PR: #210

The buttons on the design system use lowercase letters, the default theme still has them with uppercase. See ActBox Design System → Buttons

We need to add typography variants to the packages theme (see paragraphSmall and paragraphLarge for a reference implementation)

• Update the ExtendedTypographyOptions interface (https://github.com/covid-projections/act-now-packages/blob/develop/packages/ui-components/src/styles/theme/interfaces.ts)
• Update the typography to include the typography variants shown in Figma.

Act Now Design System (Figma)

On hold, we might be able to keep it if we use #153

Update - no longer necessary

closing in favor of a duplicate ticket

Image of bug (legend not wrapping properly because the map is absolutely positioned)

It should take two metrics, one for the bar chart (raw data series) and one for the line chart (normally a rolling average). We should also pass a number of days (or a date range) to filter the timeseries by, that way we can make multiple series consistent with each other.

// width: 100% height: 100%, 
<MetricSparklines
  region={region}
  metricLineChart={metricCasesRollingAvg}
  metricBarChart={metricCases}
  numDays={30}
/>

Let's implement them based on one of our more recent iterations in CAN, adapting to better match the MUI system.

Implement the BarChart component, following the model of LineChart and similar props (yScale, xScale). Note that the chart below also includes a line chart, ignore that for the time being.

Figma

Implement components GridRows and GridColumns based of @visx/grid, but adapting the style to match our theme variables.

Figma

Figma - Overview score

Recommendations for components

Figma - Sparklines

Recommendations for components

Implement the metric dot component. See ActNow Design System and Figma - Monkeypox for examples in context

Recommendations for components:

• If the component needs a metric, we can make it receive a Metric | string to make it more flexible. All metric-aware components have access to the metricCatalog and can call metricCatalog.getMetric(metricId)
• Prefer using MUI Stack, Grid or Box when possible to minimize the amount of custom code/css to write, review and debug.
• Avoid importing the theme, use the theme from the context instead (either using styled or useTheme)
• Provide good default that match the ActNow Design System

Implement AxisLeft and AxisBottom, using the API from @visx/axis, but adapting lines and typography to use our theme variables for colors. Don't try to make the date format match the mocks yet - we probably need to think more about that (when to abbreviate month names, when to put the year, what to do on mobile, etc.)

Figma

We need to implement a multi-level ProgressBar component to represent related values such as vaccination percent for multiple doses. I would recommend to keep the interface similar to ProgressBar, but receiving a list of items with accessor methods.

<MultiProgressBar
  items={items}
  getItemColor={(item:T, itemIndex:number) => string}
  getItemLabel={(item:T, itemIndex:number) => string}
  getItemValue={(item:T, itemIndex:number) => number}
  {/* ... */}
/>

Act Now Design System (Figma)

I'm not sure what kind of data provider we’d want in order to fetch data from the CAN API.

Ideally it’d be able to fetch data for one region at a time (rather than all states/counties/etc. at once) which I think means using the JSON endpoints. Though maybe it could just use the timeseries CSV endpoints?

I’m not sure if there’s a generic JsonDataProvider we could create that would be flexible enough to work with the CAN API, so it might make sense to just write a bespoke CanDataProvider to start and then see if there’s anything we can generalize from that.

This isn't exactly urgent, but I think would be a useful exercise and will let us use CAN data in our hackathons.

Description in progress

When we try to use the Markdown component using the template (or hackathon) repository, Next.js throws an error (ESM). It looks like this error is caused by Next not handling ESM-only packages correctly (react-markdown is ESM-only).

We need to find a workaround to be able to implement and use the Markdown component.

Notes

• vercel/next.js#30330 (comment)

This is a bit broader than just implementing RollingAverageDataProvider. I think we need to come up with a mechanism to define metric data providers that depend on other metrics (or regions).

In my original metrics refactor I had prototyped a "DerivedDataProvider" that would basically let you write a data provider that depends on other metrics. A simple example is a RollingAverageDataProvider that provides a rolling average metric from a "raw" metric... The definitions are here: https://github.com/covid-projections/who-demo/blob/82eddb59ba6237cce39ac0c3ce9a007f2ca3c582/src/metrics/data_providers.ts#L32

I think we want something similar, but I'm not sure exactly what it should look like. Maybe we should just amend the MetricDataProvider.fetchData() function so that it receives the MetricCatalog as an additional argument. That way it can fetch data for other metrics in the catalog if it wants / needs to. I'm not sure. Happy to brainstorm more on this.

Implement the metric dot component. See ActNow Design System and Figma - Monkeypox for examples in context

Recommendations for components:

• If the component needs a metric, we can make it receive a Metric | string to make it more flexible. All metric-aware components have access to the metricCatalog and can call metricCatalog.getMetric(metricId)
• Prefer using MUI Stack, Grid or Box when possible to minimize the amount of custom code/css to write, review and debug.
• Avoid importing the theme, use the theme from the context instead (either using styled or useTheme)
• Provide good default that match the ActNow Design System

Implement the metric legend component. See Figma - MetricLegend

Recommendations for components:

• If the component needs a metric, we can make it receive a Metric | string to make it more flexible. All metric-aware components have access to the metricCatalog and can call metricCatalog.getMetric(metricId)
• Prefer using MUI Stack, Grid or Box when possible to minimize the amount of custom code/css to write, review and debug.
• Avoid importing the theme, use the theme from the context instead (either using styled or useTheme)
• Provide good default that match the ActNow Design System

The act-now-template repository has react as dependency already, we should have react, react-dom as peerDependencies in the ui-components project. See @mui/base/package.json.

The "label with arrow" component is being used a lot in the Act Now Design System - Figma and in the Monkeypox - Figma mocks

as seen here in the hackathon repo

currently renderInput and options are required props but they shouldn't be

See Figma - Metric Legend Categorical

Recommendations for components

Remove palette and typography variable overrides from template repo's theme, so the app properly defaults to the act now design system as it exists in act-now-packages

pr: act-now-coalition/act-now-template#22

I would recommend to implement a non-metric aware version first with the styles of the tab (width, border-bottom, styles for the active tab, etc) and then implement the metric-aware version, probably by customizing the MuiTab component in the src/styles/theme/components.ts and creating a story file under src/stories (similar to ToggleButton, Button, etc)

• ActNow Design System

A better idea might be to allow the app to customize the relativeUrl property of Regions (based on region props)

Chart should be between the label and the value. Act Now Design System - MetricOverview

USStateMap (base + metric) PR: #180

We need to implement the MetricOverview component. It's probably worth discussing with the group what the best API for the component is as well as some behaviours:

Open Questions

• Should it take Metric, MetricData or both?
• Should it load the timeseries async to load the current values faster?
• Does it make sense to load the metric def. statically (metric name, description) and current value and timelines async?
• Thoughts on naming for metric-aware components (let's say, for the metric-aware version of LegendThreshold?)

Example from the Monkeypox mocks:

Mobile

Desktop

Design System - Figma

This might not be necessary if we merge #153

Update- no longer necessary

We can look at what we did in GCAT for inspiration.

https://github.com/covid-projections/gcat/blob/develop/src/common/metrics/metric.ts#L39
https://github.com/covid-projections/gcat/blob/49b319164a3e55c894cabd53e18740f02bf4ffa5/src/cms-content/metrics/metrics.json#L286

The goal is to provide whatever we need to be able to power our LegendCategorical component via a metric.

Figma - MetricValue

Recommendations for components

Let's use a placeholder for now. The social copy, title, etc will ultimately be written in the CMS, but we can implement the component and add it to the template pages