elastic / elastic-charts

https://elastic.github.io/elastic-charts/storybook
Other
372 stars 120 forks source link

Allow passing raw values with `ContextAccessor` #2527

Open nickofthyme opened 2 months ago

nickofthyme commented 2 months ago

When aggregating data to pass to the Chart, there are some cases where the raw value is a non-primitive value. A great example of this is the range type which is an object similar to that below.

{
  "gte": 0,
  "lt": 100,
  "label": "My range",
}

Currently in many places in kibana, especially in Lens, we format these values before passing the data to the chart. This works fine for most cases but sometimes we want the raw value and determining this after the fact is complex and challenging.

The proposal is to add a valueAccessor to each of the accessors including x, y, x0, y0 and split. This would enable something like the following, to pass the raw value and easily convert that value into a primitive value for use in the chart.

const MyChart = (
  <Chart>
    <BarSeries
      xAccessor="x"
      splitSeriesAccessor={["split"]}
      splitSeriesValueAccessor={(range) => formatRange(range)}
      data=[
         { x: 0, split: { gte: 0, lt: 100 } },
       ]
    />
  </Chart>
)

This was originally suggested in https://github.com/elastic/elastic-charts/issues/808 and POC's in https://github.com/elastic/elastic-charts/pull/837, but at the time the functional accessors were deemed sufficient. With new context surrounding this issue, this is desired to improve chart control functions in kibana/Lens.