# User Dashboards v1 Spec and Questions

*References:*

- [Linear](https://linear.app/govrn/issue/PRO-342/spec-user-dashboards)
- [Dashboards User Stories](https://hackmd.io/DpuCeuJoT8m-s2fcRqkcCw?both#User-Stories)

## Questions

- **How do we want to handle *Unassigned* Contributions?**
- All Contributions not attributed to a DAO will be *Unassigned* -- as of now, this could be the major bucket for most of our users
- Design consideration: How does this look for the stacked bar chart? This will likely be the largest bucket
- Do we want to include *Unassigned* by default or add this to be selected in the multi-select filter?
- *Unassigned* has a different impact in each type of chart:
- For the heatmap, including *Unassigned* will increase the **total contributions** per day, but we won't see them grouped by DAO 'buckets' in this view
- For the stacked bar chart, including *Unassigned* will be more directly visible as this'll show as one of the bars
- Is this what we'd want or does this introduce too much noise to these views?
- **Stacked Bar Chart Impact**:
- Will this be less effective if a user is in a lot of DAOs due to the visual clutter on the Y-axis?
- Do we think that our users will be more likely to be core contributors to a handle of DAOs (bar chart would be less noisy) or have 1 or 2 contributions to many DAOs (bar chart may become too noisy if showing a lot of DAO buckets)
- **Filters will impact the graphs differently:**
- Heat map → reduce number of Contributions per day when filtering by specific DAO
- Stacked bar chart → would only show an individual bar when filtering by single DAO, and then also show *Unassigned*
- **Multi-Select Filter:**
- Populated with the DAOs that a user is in with *all selected* by default
- Select more than 1 DAO → show all Contributions for all chosen DAOs
- Do we want *Unassigned* to also be displayed by default or select all of a user's DAOs *except* Unassigned?
- **Aggregation:**
- Does it matter how many *Attestations* each Contribution has?
- Do we only show minted Contributions?
- This would reduce the data load and noise
- Favor minted Contributions — users will only surface DAOs on ones

## Technical Considerations

- Home **route** changed to the Dashboard view for connected users
- **Connected and existing user:**
- `/dashboard` route will be the Home by default for logged in users and accessed by clicking on *Home* in the menu
- Will also redirect from `/` and act as the app home page
- **Not connected:**
- If not connected, users see a view prompting them to connect (similar to what we have now)

### Charts Components

- **Requirements**:
- *Contribution Heat Map*:
- Contribution calendar similar to GitHub’s Heat Map
- Daily Contribution volume (number of user’s Contributions per day)
- Header is each month
- X axis: Each week
- Y axis: Each weekday
- Contribution count per day:
- No color if count per day = 0
- Lightest color for 1 Contribution
- Darker color as the count increases
- Query will aggregate based on total Contributions for all selected DAOs for the specified date range (working back from current day)
- Won't include differentiation between DAO 'buckets' -- all Contributions meeting the filter requirements are surfaced in this view and rolled up to the daily Contribution heat map
- *DAO Stacked Bar Chart*:
- Shows Contributions grouped by *day* and sorted by DAO 'bucket'
-
- **Components**:
- Chart Shell/Wrapper
- Responsive: Charts will stack vertically on mobile, horizontally on desktop
- Filter is a multi-select that populates based on the user's DAOs (including an option for 'No DAO' which would be the Unassigned Contributions)
- By default all are selected
- Contribution Heat Map
- Contribution Stacked Bar Chart
- **Implementation:**
- Leverage charts Libraries:
- Determine which one would be lightest weight and work best
- [https://react-charts.tanstack.com/](https://react-charts.tanstack.com/)
- [https://recharts.org/en-US/](https://recharts.org/en-US/)
- https://github.com/uiwjs/react-heat-map

### Filters

- **Requirements:**
- Filter by all DAOs and potentially *Unassigned*(default, no filter)
- Default state of the data:
- All user Contributions able to be grouped by the specified date ranges (day, but constrained by a certain range)
- Support a shifting range window
- Find today, and then figure out each weekday and determine how many days to go back in the heat chart
- Filter by individual DAO
- Filter the data to only show contributions where DAO ids = selected DAOs and have the Contribution count show for these DAOs
- *Specific* Contributions able to be grouped by the specified date ranges
- **Design**:
- Would sit above the charts / `ChartShell` component, possibly in a `ChartsControl` component that then passes the updated filtered data into the chart children components
- Either a dropdown menu or 2 buttons side by side
- Design considerations for this since 1 of the filters would be the default state
- **Implementation**:
- Each filter `onChange` would be a new query with the filter and date range
- Additional considerations may be needed to support this approach since it’s different than what we’re currently doing for queries (we query once at initial load as it is now)
- Filter changes which DAOs we’re showing Contributions for → query this and use the groupBy
- 2 separate queries — 1 for each chart
- Stacked Bar Chart requires us to break down the **counts by DAO**