@kanunilabs/datagrid-enterprise / ColumnSparkline

Interface: ColumnSparkline<TRow>

In-cell chart configuration (gap analysis P2.2).

min/max are the difference between a column of independently scaled pictures and a column you can read DOWN: left to itself every row uses its own extremes, so a row varying between 9 and 10 looks exactly like one varying between 0 and 1000. Fix them when the rows are comparable.

Type Parameters

TRow

TRow = GridRowData

Properties

color?

optional color?: string

Series colour (line, area, bars). Default: the theme's primary colour.

fillOpacity?

optional fillOpacity?: number

Opacity of the area fill, 0.05 to 1. Default: the stylesheet's.

highlight?

optional highlight?: object

Mark the first, lowest and/or highest reading too — a dot on a line or area, a coloured bar on a bar sparkline (lowest red, highest green, first muted, via the kanuni-datagrid-sparkline-hi--* classes).

first?

optional first?: boolean

max?

optional max?: boolean

min?

optional min?: boolean

labels?

optional labels?: boolean

Each bar's value written beside it: past the end of a horizontal bar, above a vertical one — or inside, near the end, when there is no room outside (§E.6 #87). A horizontalBar with one reading and labels is a progress bar.

lineDashed?

optional lineDashed?: boolean

A dashed line for line and area.

lineWidth?

optional lineWidth?: number

Line thickness in px for line and area, 1 to 6. Default: the stylesheet's. Out of range is ignored rather than clamped (§E.6 #85).

markers?

optional markers?: boolean

A dot on every reading of a line or area, not only the marked ones (§E.6 #86).

max?

optional max?: number

min?

optional min?: number

negativeColor?

optional negativeColor?: string

Colour of bars below zero. Default: the theme's danger colour.

pointColor?

optional pointColor?: (point) => string | null | undefined

A colour per reading: return a CSS colour, or nothing for the default. It is told the reading's value and position and whether it is the first, last, lowest or highest — enough to colour positives and negatives, mark the extremes your own way, or colour a progress bar by how far along it is (§E.6 #88, #91). Applies to bars and dots; a line has one colour.

Parameters

point

SparklinePointInfo<TRow>

Returns

string | null | undefined

showBaseline?

optional showBaseline?: boolean

Zero line, drawn only when the series actually crosses it. Default on for bar.

showLast?

optional showLast?: boolean

Dot on the final reading. Default on except for bar.

optional tooltip?: boolean

Hover a reading to see its value (a native tooltip on each point or bar). Default off.

tooltipText?

optional tooltipText?: (point) => string

The tooltip's text for a reading, with the row it belongs to — say, the value beside another column's (§E.6 #89). Setting it turns tooltips on.

Parameters

point

SparklinePointInfo<TRow>

Returns

string

type?

optional type?: "bar" | "line" | "area" | "horizontalBar"

'bar' grows up from the zero line, one column per reading; 'horizontalBar' grows to the right, one row per reading (rival analysis §E.6 #81).

valueFormat?

optional valueFormat?: NumberFormatOptions

How values print in the labels, the tooltip and the screen-reader summary — { style: 'percent' } turns 0.62 into "62%". The grid's locale applies.

xKey?

optional xKey?: string

The cell may hold plain numbers, [x, y] pairs or objects; for objects these name the fields (default 'x' and 'y'). When every reading has a number or date x, a line or area places them by it, not evenly (§E.6 #82, #84).

yKey?

optional yKey?: string