Variation along an ordering

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.28.0/lattice-grid.min.css">

<div id="app"></div>

<script type="module">
  import React from 'https://esm.sh/react@18';
  import { createRoot } from 'https://esm.sh/react-dom@18/client';
  import { createGrid } from 'https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.28.0/lattice-grid.esm.min.js';
  import createLatticeGrid from 'https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.28.0/modules/react.esm.min.js';

  const LatticeGrid = createLatticeGrid({ React, createGrid });

  const columns = [
    { field: 'date', title: 'Date', type: 'date', layout: { pin: 'start', width: 150 } },
    { field: 'price', title: 'Price', type: 'number' },
  ];

  const rows = [/* a dated price series */];

  function App() {
    const gridRef = React.useRef(null);
    const [out, setOut] = React.useState('');

    // by is required: the series reads rows as loaded, not in the grid's sort.
    // Every figure is over the filtered rows, so narrowing the range moves them.
    const report = () => {
      const grid = gridRef.current && gridRef.current.grid;
      if (!grid) return;
      setOut(JSON.stringify(grid.statistics.series('price', { by: 'date', periodsPerYear: 252 }), null, 2));
    };

    React.useEffect(report, []);

    return (
      <>
        <LatticeGrid
          ref={gridRef}
          rowKey="id"
          toolPanel={{ side: 'left', panels: ['filters', 'columns'] }}
          columns={columns}
          rows={rows}
          onFilterChanged={report}
          style={{ height: '460px' }}
        />
        <pre style={{ marginTop: '12px' }}>{out}</pre>
      </>
    );
  }

  createRoot(document.getElementById('app')).render(<App />);
</script>