demo D205

Density over a histogram in Vue

A kernel density estimate over the bars, so binning and data separate

curve: true, buckets

This draws a kernel density estimate over a histogram of the same column, so the smooth shape and the binning are kept separate. It shows the underlying distribution without being misled by the choice of bin widths.

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>
  #chart { height: 340px; }
  #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: 'symbol', title: 'Symbol', layout: { width: 120 } },
            { field: 'desk', title: 'Desk', filter: { type: 'set' } },
            { field: 'price', title: 'Price', type: 'number' },
            { field: 'bid', title: 'Bid', type: 'number' },
            { field: 'ask', title: 'Ask', type: 'number' },
            { field: 'volume', title: 'Volume', type: 'number' },
            { field: 'notional', title: 'Notional', type: 'number',
              format: { style: 'currency', currency: 'USD' }, total: 'sum' },
          ],
          rows,
        },
      };
    },
    mounted() {
      // The component exposes the live grid via a template ref, which the chart draws from.
      const grid = this.$refs.grid.grid();
      // curve draws a density estimate over the bars; buckets sets the bins.
      createChart({ grid, container: '#chart', type: 'histogram', y: 'price', buckets: 20, curve: true });
    },
    template: `
      <div id="chart"></div>
      <div id="grid"><lattice-grid ref="grid" v-bind="config" /></div>
    `,
  }).mount('#app');
</script>