demo D201

Is this column normal? in Vue

A Q-Q plot against a line through the quartiles

type: 'qq', y

This draws a Q-Q plot of a column against a line through its quartiles, to judge whether it is normally distributed. It answers 'is this column normal' visually, so you can see how far the data departs from the assumption before relying on it.

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', format: { decimals: 4 } },
            { field: 'bid', title: 'Bid', type: 'number', format: { decimals: 4 } },
            { field: 'ask', title: 'Ask', type: 'number', format: { decimals: 4 } },
            { field: 'volume', title: 'Volume', type: 'number', format: { notation: 'compact' } },
            { 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();
      // A quantile-quantile chart of one measure against the normal.
      createChart({ grid, container: '#chart', type: 'qq', y: 'price' });
    },
    template: `
      <div id="chart"></div>
      <div id="grid"><lattice-grid ref="grid" v-bind="config" /></div>
    `,
  }).mount('#app');
</script>