Sparklines

A sparkline draws a small dependency-free SVG line or bar chart inside a cell from an array-valued series — a per-row trend such as twelve months of revenue. It can read the array straight from the cell, or build a parent’s trend from its child rows (from: 'children'), the natural OLAP roll-up. Purely presentational: the engine supplies the numbers, the frontend draws.

Dash (Python)

from dash_tensor_grid import TensorGrid, build_grid

# `first`/`last` keep an array column intact per group so the sparkline has a series to draw.
payload = build_grid(trend, {
    "rows": ["region"],
    "measures": {"trend": "first", "volume": "first", "revenue": "sum"},
    "formats": {"revenue": "currency:USD"},
    "cell_renderers": {
        "trend": {"type": "sparkline", "params": {"fill": True}},
        "volume": {"type": "bar", "params": {"color": "#4c8bf5"}},
    },
})
TensorGrid(id="grid", row_data=payload["row_data"], column_defs=payload["column_defs"])

React

<TensorGrid
  data={trend}
  rows={['region']}
  measures={{ trend: 'first', volume: 'first', revenue: 'sum' }}
  formats={{ revenue: '$0,0' }}
  sparklines={{
    trend: { fill: true },
    volume: { type: 'bar', color: '#4c8bf5' },
  }}
/>;
// Parent trend from child rows: sparklines={{ revenue: { from: 'children', fill: true } }}

Vue

<TensorGrid
  :data="trend"
  :rows="['region']"
  :measures="{ trend: 'first', volume: 'first', revenue: 'sum' }"
  :formats="{ revenue: '$0,0' }"
  :sparklines="{
    trend: { fill: true },
    volume: { type: 'bar', color: '#4c8bf5' },
  }"
/>

Vanilla JS

mountTensorGrid(el, {
  data: trend,
  rows: ['region'],
  measures: { trend: 'first', volume: 'first', revenue: 'sum' },
  formats: { revenue: '$0,0' },
  sparklines: {
    trend: { fill: true },
    volume: { type: 'bar', color: '#4c8bf5' },
  },
});

Options

• type — 'line' (default) or 'bar' (mini columns).
• from — 'cell' (default) reads the cell’s own array; 'children' gathers this measure’s values across the node’s child rows, so a parent (e.g. region) shows the trend of its month children. A leaf under 'children' has no series and renders the null token.
• color fixes the stroke/fill; omit it and a line auto-colors green when the last point ≥ the first, red otherwise (tune with colorUp / colorDown).
• fill tints the area under a line; lineWidth, width, height size it.
• The series needs at least two finite numbers, or the cell shows the null token.
• Sparklines are one of the cell renderers — the underlying value stays raw so the column still sorts and aggregates.