Alternative data model

[baryluk]

While I was investigating https://codesandbox.io/s/github/tannerlinsley/react-charts/tree/next/examples/stress-test?file=/src/index.js

I think one of the issues in regards to performance and memory usage, is current data model. While it is somehow easy to use (that is discussable tho), I personally prefer purely-array based solutions, with shared X-axis, in a majority of cases. This way there are no objects involved.

Current data model:

   const data = React.useMemo(
     () => [
       {
         label: 'Series 1',
         data: [
           { primary: 1, secondary: 10 },
           { primary: 2, secondary: 10 },
           { primary: 3, secondary: 10 },
         ],
       },
       {
         label: 'Series 2',
         data: [
           { primary: 1, secondary: 20 },
           { primary: 2, secondary: 20 },
           { primary: 3, secondary: 20 },
         ],
       },
       {
         label: 'Series 3',
         data: [
           { primary: 1, secondary: 30 },
           { primary: 2, secondary: 30 },
           { primary: 3, secondary: 30 },
         ],
       },
     ],
     []
   )

Alternative:

   const data = React.useMemo(
     () => [
       {
         label: 'Group A',
         common_primary: [1, 2, 3],
         series: [
         {
            label: 'Series 1',
            data: [10, 10, 10],  // secondary
         },
         {
            label: 'Series 2',
            data: [10, 10, 10],  // secondary
         },
         {
            label: 'Series 3',
            data: [10, 10, 10],  // secondary
         },
         ],
       },
     ],
     []
   )

The common_primary is just an example, but occurs often in practice.

For non-repeating primary, each series will have own primary array.

Also, it would be great if data could be other iterable or possibly also a typed array, instead of just array.

Unfortunately I don't know much about React, to try and experiment with this, and see the performance / memory benefits, but it is likely there are some. The iteration over two arrays for individual points, shouldn't be a problem, the cache usage at any given time should be the same, if not lower, and flat representation like proposed here, actually allows more JS VM optimizations.

[tannerlinsley]

Due to a massive overhaul and rewrite of React Charts to TypeScript and a massively upgraded public API, this issue is being bulk closed for triage. The latest version can be tested via the react-charts@beta tag. Documentation is in the process of being upgraded, but thankfully, everything is fully typed now, so you can explore the API that way for now.

If, after testing or playing with the v3 beta, you believe your issue is still not addressed or relevant, feel free to open a new issue.