Create Organizational Dashboard page

[ashlingam]

Overview

Create Organizational Dashboard page to house analytics collected from surveys. Initially, the dashboard will house data from the remote onboarding, new member, and project leader surveys, but eventually, expand to include the visualized results from the other surveys in our repertoire.

Instructions to remove the vertical scrollbar have been included below. Please add/remove vertical scrollbar depending on UX considerations.

Action Items

• Design and populate Google Data Studio dashboard
  • Create dashboard in Google Data Studio
  • Get feedback on dashboard
  • Create dashboard page and insert GDS dashboard via iframe
  • Revise dashboard
  • Refine page UI in Figma
  • Sign off
• Review feasibility with Kian
• Review with Design team which of the two designs work best with our current design schema and if we are going to leave off the white band at bottom?
• Development
  • Implement page design with Iframe from Figma mockups. Note Figma mock up missing while band at bottom. Decision will have already been made to include or not include it.
  • Show version with scroll bar to Bonnie
    • decide to remove scroll bar (creating a lot of white space), or leave.
  • complete page.

Resources/Instructions

Figma https://www.figma.com/file/0RRPy1Ph7HafI3qOITg0Mr/Hack-for-LA-Website?node-id=811%3A1003

Desktop Embed:

<iframe width="1200" height="1800" src="https://datastudio.google.com/embed/reporting/16J9XI19pQejSDNFvjl_V3ZezJ502rM_a/page/qx6RB" frameborder="0" style="border:0" allowfullscreen></iframe>

Mobile Embed:

<iframe width="350" height="2000" src="https://datastudio.google.com/embed/reporting/1xNlu1xcL5y6jh95lX3xr0zb2FCqD92Gm/page/gIfSB" frameborder="0" style="border:0" allowfullscreen></iframe>

Remove Vertical Scrollbar Instructions:

https://www.sitepoint.com/community/t/removing-vertical-scrollbar-in-iframe/22495

Read More:

https://support.google.com/datastudio/answer/7450249?hl=en
How to export one chart at a time from google sheets (provides html)

Something you probably wont need, but good to have
direct access to google studio page - its what is being embeded

Link to spreadsheet that feeds the website dashboard: https://docs.google.com/spreadsheets/d/1sIhdPzSpMNn7ZwGftiCbgMRtF-84ziJgmr8EjsC_yK8/edit#gid=1185333001

[ashlingam]

1. Progress - Initial dashboard created with pages for Website Performance and Brigade Analysis. Remaining survey data needs to be integrated.
2. Blocks - None
3. Availability - Through 6/3, then exit project.
4. ETA - 6/3