demo D201

Is this column normal? in React

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 React version. The grid mounts through the createLatticeGrid adapter, which takes its configuration as ordinary props and hands back the live grid through a ref. The grid below is the same one every other tab runs.

The configuration

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

<div id="app"></div>

<script type="module">
  import React from 'https://esm.sh/react@18';
  import { createRoot } from 'https://esm.sh/react-dom@18/client';
  import { createGrid } from 'https://cdn.latticegrid.dev/lattice-grid@1.108.0/lattice-grid.esm.min.js';
  import { createLatticeReact } from 'https://cdn.latticegrid.dev/lattice-grid@1.108.0/modules/react.esm.min.js';
  import { createChart } from 'https://cdn.latticegrid.dev/lattice-grid@1.108.0/modules/charts.esm.min.js';

  const { LatticeGrid, LatticeChart } = createLatticeReact({ React, createGrid, createChart });

  const 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: 'volume', title: 'Volume', type: 'number' },
    { field: 'notional', title: 'Notional', type: 'number',
      format: { style: 'currency', currency: 'USD' }, total: 'sum' },
  ];

  const rows = [/* order-book rows */];

  function App() {
    const [grid, setGrid] = React.useState(null);

    // A quantile-quantile plot of one column: points on the line are normal,
    // and the reference runs through the quartiles rather than a least
    // squares fit.
    return (
      <>
        {grid && <LatticeChart grid={grid} type="qq" y="price" style={{ height: '340px' }} />}
        <LatticeGrid
          rowKey="id"
          columns={columns}
          rows={rows}
          onGridReady={setGrid}
          style={{ height: '340px', marginTop: '14px' }}
        />
      </>
    );
  }

  createRoot(document.getElementById('app')).render(<App />);
</script>