[charts] Helpers for Transforming Dataset Series

[aress31]

Summary

Using charts often requires significant data transformation, which can be cumbersome and not very developer-friendly. Let me illustrate this with my current use case: I fetch data from a database, where the records (referred to as the dataset in MUI terminology) look like this:

[
    {
        "id": "3831831b-f8dd-43d9-96cd-5f09d4fb4c25",
        "status": "active",
        "creator": "Toyotarō",
        "file": "SNIP",
        "version": "0.4",
        "description": "foo",
        "created_at": "2024-12-02T23:45:15.578371+00:00",
        "updated_at": "2024-12-02T23:45:15.289+00:00"
    },
    {
        "id": "11cfeb3a-f85a-4ad9-9e3a-8815e634566f",
        "status": "active",
        "creator": "Toyotarō",
        "file": "SNIP",
        "version": "3121",
        "description": "bar",
        "created_at": "2024-12-06T06:23:15.325937+00:00",
        "updated_at": "2024-12-06T06:23:15.352+00:00"
    }
]

From this dataset, I want to generate charts dynamically using any field as the xAxis or series key. Ideally, I’d like to do something like this:

    <LineChart
      loading={isLoading}
      xAxis={[
        {
          dataKey: "created_at",
          scaleType: "point",
          valueFormatter: (value) => dayjs(value).toString(),
        },
      ]}
      series={[
        {
          dataKey: "description", --- or any other fields
        },
      ]}
      dataset={dataset}
      {...customize}
    />

However, because the chart components expect aggregated data (e.g., counts or other transformations), additional preprocessing of the dataset is required. This introduces unnecessary complexity and boilerplate code.

To simplify this, it would be helpful to expose utility functions for common transformations or, even better, to bake this functionality directly into the chart components for plug-and-play usability. This would significantly enhance developer experience and reduce repetitive tasks.

Examples

See above.

Motivation

See above.

Search keywords: series, chart, helper, aggregate

[michelengelen]

@JCQuintas could you step in here? Thanks! 🙇🏼

[JCQuintas]

Hi @aress31, indeed, this is something we have discussed before internally but isn't currently planned.

Do you have suggestions on how an implementation would look like?

[aress31]

@JCQuintas no idea sorry, but would be nice to see such helpers to make the charts plug and play.

[alexfauquette]

We could introduce a getValue call back in the series and xAxis. But at some point, the user will have to specify at some point that created_at is a Date.

We could automatically parse with Date() for UTC and time scales, and Number.float() for linear, or log scales

[aress31]

@alexfauquette, I will provide you with an example using the dataset below:

[
    {
        "count": 1,
        "created_at": "2024-12-09T03:18:26.859344+00:00"
    },
    {
        "count": 1,
        "created_at": "2024-12-11T10:37:59.602215+00:00"
    },
    {
        "count": 1,
        "created_at": "2024-12-09T03:20:05.259137+00:00"
    },
    {
        "count": 1,
        "created_at": "2024-12-09T06:34:33.092119+00:00"
    },
    {
        "count": 1,
        "created_at": "2024-12-09T03:17:32.97368+00:00"
    },
    {
        "count": 1,
        "created_at": "2024-12-09T03:20:14.916028+00:00"
    },
    {
        "count": 10,
        "created_at": "2024-12-07T03:39:50.844102+00:00"
    },
    {
        "count": 1,
        "created_at": "2024-12-09T06:33:54.326826+00:00"
    },
    {
        "count": 1,
        "created_at": "2024-12-09T06:34:26.344888+00:00"
    },
    {
        "count": 1,
        "created_at": "2024-12-09T04:16:14.825664+00:00"
    }
]

In a LineChart, consider the following configuration:

  <LineChart {...commonProps} />

  const commonProps = {
    xAxis: [
      {
        min: dayjs(filterDate).toDate(),
        dataKey: xAxis,
        scaleType: chartType === "bar" ? "band" : "utc",
      },
    ],
    series: [{ dataKey: "count" }],
    dataset: dataset.map(({ created_at, ...item }) => ({
      ...item,
      created_at: dayjs(created_at).toDate(),
    }))
  };

The above configuration results in multiple lines (i.e., series), see:

The goal here is to generate a single line showing the count change over time (created_at). A helper method to transform dataset into a merged/consumable series is needed. Alternatively, a Recipes section on the documentation website could cover common use-cases like this one.

[JCQuintas]

@aress31 In your example use case, the issue is that the time data is unordered. After sorting it, it seems to display the expected curve.

https://codesandbox.io/embed/r6yh4h?module=/src/Demo.tsx&fontsize=12

[aress31]

@JCQuintas that is correct! It now works, thanks, but should not this sort be done at the Chart level when type is set to either utc or date? Or at least a giant warning should be added in the doc that users need to provide date-ordered datasets.

[aress31]

Also just throwing an idea but maybe a sort property could be supported in axis as well to define the preferred sorting order?

This would allow for easy sorting of axis, e.g., the x-axis in: