demo D178

Charts with no grid on screen in React

The data engine driving charts on its own

createHeadlessGrid

This drives charts from the data engine alone, with no grid on screen. It shows that the charting and the data model do not need a visible table, so you can chart a dataset headlessly.

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 { createHeadlessGrid } 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';

  // No createGrid is passed: this demo's whole point is that a chart reads
  // any Grid instance, painted or not, so only the Chart component is built.
  const { LatticeChart } = createLatticeReact({ React, createChart });

  const columns = [
    { field: 'circuit', title: 'Circuit', layout: { width: 180 } },
    { 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' },
  ];

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

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

    // createHeadlessGrid holds and shapes the data with no table drawn at all.
    // The charts read it exactly as they read a visible grid, with the same
    // follow behaviour: filter the headless grid and every chart redraws.
    React.useEffect(() => {
      const g = createHeadlessGrid({ rowKey: 'id', columns, rows });
      setGrid(g);
      return () => g.destroy();
    }, []);

    if (!grid) return null;
    return (
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '14px', height: '260px' }}>
        <LatticeChart grid={grid} type="bar" x="region" y="charge" title="by region" />
        <LatticeChart grid={grid} type="donut" x="status" y="charge" title="by status" />
        <LatticeChart grid={grid} type="histogram" y="charge" title="distribution" />
      </div>
    );
  }

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