demo D168

Waterfall, stream, marimekko in htmx

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 htmx version. A server-rendered table is upgraded in place, so the page is readable before any script runs and gains the full grid when the module loads, which suits a progressively enhanced app.

The configuration

<link rel="stylesheet" href="https://cdn.latticegrid.dev/lattice-grid@1.107.0/lattice-grid.min.css">

<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; height: 520px">
  <div id="waterfall"></div>
  <div id="stream"></div>
  <div id="marimekko" style="grid-column: 1 / -1"></div>
</div>
<!-- A real, server-rendered table: readable with JavaScript off. data-field on
     each header names the column that cell becomes, and data-id on each row is
     the key the grid carries it under. -->
<table id="chart-types-timeline-table" data-lattice-grid>
  <thead>
    <tr>
      <th data-field="month">Month</th>
      <th data-field="region">Region</th>
      <th data-field="status">Status</th>
      <th data-field="charge">Monthly charge</th>
      <th data-field="change">Change on last month</th>
    </tr>
  </thead>
  <tbody>
    <tr data-id="1"><td>Jan</td><td>London</td><td>live</td><td>303</td><td>303</td></tr>
    <tr data-id="2"><td>Jan</td><td>London</td><td>provisioning</td><td>202</td><td>202</td></tr>
    <tr data-id="16"><td>Feb</td><td>London</td><td>live</td><td>360</td><td>57</td></tr>
    <!-- the rest of the rows, rendered by your server -->
  </tbody>
</table>

<script type="module">
  import { hydrateTable } from 'https://cdn.latticegrid.dev/lattice-grid@1.107.0/modules/htmx.esm.min.js';
  import { createChart } from 'https://cdn.latticegrid.dev/lattice-grid@1.107.0/modules/charts.esm.min.js';

  // The markup carries the rows; a server-rendered table's column types are
  // declared in the config hydrateTable takes. The grid replaces the table
  // where it stood.
  const grid = hydrateTable(document.getElementById('chart-types-timeline-table'), {
    columns: [
      { field: 'month', title: 'Month' },
      { field: 'region', title: 'Region', filter: { type: 'set' } },
      { field: 'status', title: 'Status', filter: { type: 'set' } },
      { field: 'charge', title: 'Monthly charge', type: 'number',
        format: { style: 'currency', currency: 'GBP' }, total: 'sum' },
      { field: 'change', title: 'Change on last month', type: 'number' },
    ],
  });

  // Three ways to read a year of charges, each following the sort and
  // filters on the grid in place.
  createChart({ grid, container: '#waterfall', type: 'waterfall', x: 'month', y: 'change' });
  createChart({ grid, container: '#stream',    type: 'stream',    x: 'month', series: 'status', y: 'charge' });
  createChart({ grid, container: '#marimekko', type: 'marimekko', x: 'region', series: 'status', y: 'charge' });
</script>