[RFC] Charts

[Janpot]

What's the problem? 🤔

Most of the custom components I've seen created so far were charts. We should provide an out of the box Chart component

What are the requirements? ❓

We should start simple:

• Support X/Y chart types bar/line/area/scatter (support 3 out of 4) Pie chart will be a separate component
• Support combining multiple series per chart

What are our options? 💡

The design centers mostly around how to configure the chart. I'm using typescript interfaces to model these, but really this is about the UX.

Chart data

Option1

• Use a single data property, with a single X-value selector.
• Series will define a Y-value selector that operates on the global data property

interface ChartProps<D> {
  data: D[]
  xValue: keyof D
  series: {
    kind: 'bar' | 'line' | '...'
    label: string
    yValue: keyof D
  }[]
}

UI:

• bindable input for the data
• input for X-value selector
• button to open series editor:
  • allow for adding arbitrary amount of series (similar to DataGrid columns)
  • Select control for series type
  • input for label
  • input for Y-value selector

pro:

• X-axis defined only once means less confusion when creating multiple series.

con:

• combining metrics from different datasources requires merging them prior to binding to the chart

Option 2

• Each series defines their own data, with X- and Y-value selectors. The chart will combine all X-values in a single axis

interface ChartProps {
  series: <D> {
    kind: 'bar' | 'line' | '...'
    label: string
    data: D
    xValue: keyof D
    yValue: keyof D 
  }[]
}

UI:

• button to open series editor:
  • bindable input for the data
  • input for X-value selector
  • allow for adding arbitrary amount of series (similar to DataGrid columns)
  • Select control for series type
  • input for label
  • input for Y-value selector

pro:

• easier to combine metrics from multiple datasources

con:

• Need to redefine X-value on every series, even when using the same data

Per series configuration

• color
• label (for the legend)
• dots

Future considerations (Out of scope)

• Multiple Y-axis superimposed, for when you want to show correlation between different metrics
• Grouping (e.g. X-axis contains age, but we want one bar per cohort)
• Bar stacking, should also allow for:
  • only stacking a subset of series
  • multiple stacks of series
  • positive/negative stack
• Tick format

Proposed Solution

Option 2

[apedroferreira]

At first thought, I think option 1 sounds less redundant and less confusing.