demo D168

Waterfall, stream, marimekko in Web Component

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 web component version. A lattice-grid custom element renders the grid with no build step, its configuration set as a property, so it works on a page that has no bundler at all.

The configuration

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

<script type="module">
  import { defineLatticeGrid } from 'https://cdn.latticegrid.dev/lattice-grid@1.107.0/modules/webcomponent.esm.min.js';
  defineLatticeGrid();
</script>

<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>
<lattice-grid row-key="id" style="display: block; height: 340px; margin-top: 14px"></lattice-grid>

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

  const el = document.querySelector('lattice-grid');
  el.config = {
    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' },
    ],
  };
  el.rows = rows;  // an array of circuit records

  // Every chart reads el.grid, the live grid inside the element, so filtering or
  // sorting the table redraws them all.
  createChart({ grid: el.grid, container: '#waterfall', type: 'waterfall', x: 'month', y: 'change' });
  createChart({ grid: el.grid, container: '#stream',    type: 'stream',    x: 'month', series: 'status', y: 'charge' });
  createChart({ grid: el.grid, container: '#marimekko', type: 'marimekko', x: 'region', series: 'status', y: 'charge' });
</script>