Line, area, bar and scatter in Svelte

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

  const lattice = createLatticeAction({ createGrid });

  let lineEl, stepEl, areaEl, rangeAreaEl, barEl;
  let horizontalBarEl, scatterEl, bubbleEl, comboEl, paretoEl;

  const config = {
    rowKey: 'id',
    // A bar/horizontalBar with no series key reads these to colour each mark,
    // and names the rule that fired in the legend.
    formatting: {
      charge: [
        { id: 'under', label: 'Under budget', when: { op: 'lt', value: 200_000 }, style: { background: '#1a7f37', color: '#fff' } },
        { id: 'near', label: 'Near budget', when: { op: 'lt', value: 225_000 }, style: { background: '#b26a00', color: '#fff' } },
        { id: 'over', label: 'Over budget', when: { op: 'gte', value: 225_000 }, style: { background: '#c02c38', color: '#fff' } },
      ],
    },
    columns: [
      { 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' },
    ],
    rows,  // circuits: region, status, bandwidth, utilisation, charge
    // onGrid hands over the live grid the moment it is created. Every chart is
    // built from it, so the whole set follows the grid's filters and sort.
    onGrid: (grid) => {
      createChart({ grid, container: lineEl,          type: 'line',          x: 'region', y: 'charge' });
      createChart({ grid, container: stepEl,          type: 'step',          x: 'region', y: 'charge' });
      createChart({ grid, container: areaEl,          type: 'area',          x: 'region', y: 'charge' });
      // rangeArea draws the min to max band of the measure at each point.
      createChart({ grid, container: rangeAreaEl,     type: 'rangeArea',     x: 'region', y: 'charge' });
      createChart({ grid, container: barEl,           type: 'bar',           x: 'region', y: 'charge' });
      createChart({ grid, container: horizontalBarEl, type: 'horizontalBar', x: 'region', y: 'charge', labels: true });
      createChart({ grid, container: scatterEl,       type: 'scatter',       x: 'utilisation', y: 'charge' });
      createChart({ grid, container: bubbleEl,        type: 'bubble',        x: 'utilisation', y: 'charge', size: 'charge' });
      // combo mixes marks and two axes, here bars of charge and a line of bandwidth.
      createChart({ grid, container: comboEl,         type: 'combo',         x: 'region',
        measures: [{ col: 'charge', fn: 'sum', type: 'bar', axis: 'left' },
                   { col: 'bandwidth', fn: 'avg', type: 'line', axis: 'right' }] });
      // pareto sorts the bars and draws the cumulative line.
      createChart({ grid, container: paretoEl,        type: 'pareto',        x: 'status', y: 'charge' });
    },
  };
</script>

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

<div style="display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 180px; gap: 14px">
  <div bind:this={lineEl}></div>
  <div bind:this={stepEl}></div>
  <div bind:this={areaEl}></div>
  <div bind:this={rangeAreaEl}></div>
  <div bind:this={barEl}></div>
  <div bind:this={horizontalBarEl}></div>
  <div bind:this={scatterEl}></div>
  <div bind:this={bubbleEl}></div>
  <div bind:this={comboEl}></div>
  <div bind:this={paretoEl}></div>
</div>
<div use:lattice={config} style="height: 340px; margin-top: 14px"></div>