Lattice Grid Buy a licence

demo D168

Waterfall, stream, marimekko in Svelte

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 Svelte version. A use action attaches the grid to a plain element, so no framework runtime is passed in and the component stays small, while the configuration is ordinary Svelte state.

The configuration

<script>
  import { createGrid } from 'https://cdn.latticegrid.dev/lattice-grid@1.108.0/lattice-grid.esm.min.js';
  import createLatticeAction from 'https://cdn.latticegrid.dev/lattice-grid@1.108.0/modules/svelte.esm.min.js';
  import { createChart } from 'https://cdn.latticegrid.dev/lattice-grid@1.108.0/modules/charts.esm.min.js';

  const lattice = createLatticeAction({ createGrid });

  let waterfallEl, streamEl, marimekkoEl;

  const config = {
    rowKey: 'id',
    columns: [
      { 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: 'utilisation', title: 'Utilisation', type: 'number', format: { decimals: 1, suffix: '%' } },
      { field: 'charge', title: 'Monthly charge', type: 'number',
        format: { style: 'currency', currency: 'GBP' }, total: 'sum' },
      { field: 'change', title: 'Change on last month', type: 'number' },
    ],
    rows,  // circuit lines: month, region, status, charge, change
    // onGrid hands over the live grid the moment it is created. Every chart is
    // built from it, so all three follow the grid's filters and sort.
    onGrid: (grid) => {
      createChart({ grid, container: waterfallEl, type: 'waterfall', x: 'month', y: 'change' });
      createChart({ grid, container: streamEl,    type: 'stream',    x: 'month', series: 'status', y: 'charge' });
      createChart({ grid, container: marimekkoEl, type: 'marimekko', x: 'region', series: 'status', y: 'charge' });
    },
  };
</script>

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

<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; height: 520px">
  <div bind:this={waterfallEl}></div>
  <div bind:this={streamEl}></div>
  <div bind:this={marimekkoEl} style="grid-column: 1 / -1"></div>
</div>
<div use:lattice={config} style="height: 340px; margin-top: 14px"></div>