demo D178
Charts with no grid on screen
The data engine driving charts on its own
createHeadlessGrid
Loading a live grid…
The configuration
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.27.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.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.27.0/lattice-grid.esm.min.js';
import { createChart } from 'https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.27.0/modules/charts.esm.min.js';
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() {
React.useEffect(() => {
// 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.
const grid = createHeadlessGrid({ rowKey: 'id', columns, rows });
createChart({ grid, container: '#by-region', type: 'bar', x: 'region', y: 'charge', title: 'by region' });
createChart({ grid, container: '#by-status', type: 'donut', x: 'status', y: 'charge', title: 'by status' });
createChart({ grid, container: '#distribution', type: 'histogram', y: 'charge', title: 'distribution' });
}, []);
return (
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '14px', height: '260px' }}>
<div id="by-region" />
<div id="by-status" />
<div id="distribution" />
</div>
);
}
createRoot(document.getElementById('app')).render(<App />);
</script>