demo D269

Slope chart in React

Two points per line so the direction of change from one period to the next is the message

type: 'slope', x, series, y

This draws two points per line so the direction of change from one period to the next is the message. It makes rise and fall between two moments obvious across many items, so the slope of each line carries the story.

Building…

Loading a live grid…

This is the React version. The grid mounts through the createLatticeGrid adapter, which takes its configuration as ordinary props and hands back the live grid through a ref. The grid below is the same one every other tab runs.

The configuration

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.71.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.71.0/lattice-grid.esm.min.js';
  import { createLatticeReact } from 'https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.71.0/modules/react.esm.min.js';
  import { createChart } from 'https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.71.0/modules/charts.esm.min.js';
  import 'https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.71.0/modules/chart-slope.esm.min.js';  // opt in to the slope type

  const { LatticeGrid, LatticeChart } = createLatticeReact({ React, createGrid, createChart });

  const columns = [
      { field: 'region', title: 'Region', filter: { type: 'set' } },
      { field: 'period', title: 'Year', filter: { type: 'set' } },
      { field: 'score', title: 'Score', type: 'number', total: 'avg' },
  ];

  const rows = [/* two rows a region, one per year: region, period, score */];

  function App() {
    const [grid, setGrid] = React.useState(null);

    return (
      <>
        {grid && (
          <LatticeChart grid={grid} type="slope" x="period" series="region" y="score" title="Score, year on year" style={{ height: '340px' }} />
        )}
        <LatticeGrid
          rowKey="id"
          columns={columns}
          rows={rows}
          onGridReady={setGrid}
          style={{ height: '320px', marginTop: '14px' }}
        />
      </>
    );
  }

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