demo D168

Waterfall, stream, marimekko in Vue

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 Vue 3 version. A createLatticeGrid component takes the configuration through v-bind, and reactive data flows straight into the grid, so it updates the way the rest of your Vue app does.

The configuration

<link rel="stylesheet" href="https://cdn.latticegrid.dev/lattice-grid@1.107.0/lattice-grid.min.css">
<style>
  #charts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
  #charts > div { height: 250px; }
  #charts > #marimekko { grid-column: 1 / -1; height: 300px; }
  #grid { margin-top: 14px; }
  #grid > div { height: 340px; }
</style>
<div id="app"></div>

<script type="module">
  import * as Vue from 'https://esm.sh/vue@3/dist/vue.esm-browser.prod.js';
  import { createGrid } from 'https://cdn.latticegrid.dev/lattice-grid@1.107.0/lattice-grid.esm.min.js';
  import createLatticeGrid from 'https://cdn.latticegrid.dev/lattice-grid@1.107.0/modules/vue.esm.min.js';
  import { createChart } from 'https://cdn.latticegrid.dev/lattice-grid@1.107.0/modules/charts.esm.min.js';

  const LatticeGrid = createLatticeGrid({ vue: Vue, createGrid });

  Vue.createApp({
    components: { LatticeGrid },
    data() {
      return {
        config: {
          rowKey: 'id',
          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: '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,
        },
      };
    },
    mounted() {
      // The component exposes the live grid via a template ref. All three charts read
      // that one instance and redraw whenever the grid is sorted or filtered.
      const grid = this.$refs.grid.grid();
      createChart({ grid, container: '#waterfall', type: 'waterfall', x: 'month', y: 'change', title: 'waterfall' });
      createChart({ grid, container: '#stream',    type: 'stream',    x: 'month', series: 'status', y: 'charge', title: 'stream' });
      createChart({ grid, container: '#marimekko', type: 'marimekko', x: 'region', series: 'status', y: 'charge', title: 'marimekko' });
    },
    template: `
      <div id="charts">
        <div id="waterfall"></div>
        <div id="stream"></div>
        <div id="marimekko"></div>
      </div>
      <div id="grid"><lattice-grid ref="grid" v-bind="config" /></div>
    `,
  }).mount('#app');
</script>