demo D168

Waterfall, stream, marimekko in React

Monthly rises and falls, a mix shifting over time, and regions against statuses

type: 'waterfall' · 'stream' · 'marimekko'

A year of circuit charges drawn three ways. The waterfall shows each month's rise or fall in total charge and where they add up to. The stream graph shows the mix of live, provisioning and ceased circuits shifting through the year. The marimekko gives each region a column as wide as its charge, split by status.

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.latticegrid.dev/lattice-grid@1.107.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.latticegrid.dev/lattice-grid@1.107.0/lattice-grid.esm.min.js';
  import { createLatticeReact } from 'https://cdn.latticegrid.dev/lattice-grid@1.107.0/modules/react.esm.min.js';
  import { createChart } from 'https://cdn.latticegrid.dev/lattice-grid@1.107.0/modules/charts.esm.min.js';

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

  const columns = [
    { field: 'circuit', title: 'Circuit', layout: { width: 180 } },
    { field: 'month', title: 'Month' },
    { field: 'region', title: 'Region', filter: { type: 'set' } },
    { field: 'status', title: 'Status', filter: { type: 'set' } },
    { field: 'bandwidth', title: 'Bandwidth', type: 'number' },
    { field: 'charge', title: 'Monthly charge', type: 'number',
      format: { style: 'currency', currency: 'GBP' }, total: 'sum' },
    { field: 'change', title: 'Change on last month', type: 'number' },
  ];

  const rows = [/* circuit records */];

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

    // Three ways to read the month-by-month movement, the mix and the regions, each reading the live
    // grid, so a filter redraws every chart together.
    return (
      <>
        {grid && (
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '14px', height: '520px' }}>
            <LatticeChart grid={grid} type="waterfall" x="month" y="change" title="waterfall" />
            <LatticeChart grid={grid} type="stream" x="month" series="status" y="charge" title="stream" />
            <div style={{ gridColumn: '1 / -1' }}>
              <LatticeChart grid={grid} type="marimekko" x="region" series="status" y="charge" title="marimekko" />
            </div>
          </div>
        )}
        <LatticeGrid
          rowKey="id"
          columns={columns}
          rows={rows}
          onGridReady={setGrid}
          style={{ height: '340px', marginTop: '14px' }}
        />
      </>
    );
  }

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