Adding TrendIndicators to our charts

[envex]

I'm exploring the ability to add TrendIndicators to our charts, but I'm hung up on how we want to pass the data to the charts.

1. Add a trend prop

One option is to add another root level prop from trends that we can consume inside the chart when available.

<SimpleBarChart
   trends={[
    {
      trend: 'positive',
      value: 10,
    },
    {
      trend: 'negative',
      value: 12,
    },
    {
      value: 53,
    },
    {
      trend: 'negative',
      value: 2,
    },
    {
      trend: 'positive',
      value: 23,
    },
    {
      trend: 'positive',
      value: 100,
    },
  ]}
/>

Pros

• We don't have to pollute the DataSeries prop.

Cons

• Consumers have to match the array length to the DataSeries[] the pass to the chart so that the trends match with their data sets.

2. Leverage the metadata property on DataSeries

metadata was added to the beta branch in support of Benchmarks. This would work the same as option #1, but the data just lives elsewhere.

Pros

• No need to add a new root level prop

Cons

• metadata is a beta feature and we're not sure if it will stick around.
• Consumers still have to match the array length to the DataSeries[].

3. Augment DataPoint with trend data

We could push the Trend data along side the DataSeries data that's passed to the chart.

export interface DataPoint {
  key: number | string;
  value: number | null;
  trend?: Trend;
}

export interface DataSeries {
  data: DataPoint[];
  // ...
}

Pros

• Trend data matches 1:1 with the corresponding data point.

Cons

• Pollutes the DataPoint data. The reason we decided on metadata for benchmarks is to allow us the freedom to add new data without polluting the original DataSeries/DataPoint types.