@fundar/data-chart-telling 0.0.64 → 1.0.0

package/docs/scales.md

@@ -0,0 +1,78 @@
+# Scales
+
+`scales` configures how data values become positions and visual properties. It has one entry per channel.
+
+```svelte
+<LinePlot
+	{width}
+	{height}
+	data={rows}
+	x="date"
+	y="index"
+	color="division"
+	scales={{
+		x: { label: 'Month' },
+		y: { label: 'Index (Jan 2021 = 100)', domain: [90, 280], grid: true },
+		color: {
+			scheme: { Food: '#1b9e77', Transport: '#d95f02', Housing: '#7570b3', Health: '#e7298a' }
+		}
+	}}
+/>
+```
+
+![A line plot with a labelled axis, gridlines and custom colors](images/scales.png)
+
+## Axes: `x` and `y`
+
+Each axis takes an `AxisScale`.
+
+| Field                                                                        | Meaning                                                                                                                                                                                                                       |
+| ---------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `type`                                                                       | `'auto'` (default), `'linear'`, `'pow'`, `'sqrt'`, `'log'`, `'symlog'`, `'time'`, `'utc'`, `'band'`, `'point'`, `'ordinal'`, `'categorical'` and the color-oriented types (`'sequential'`, `'diverging'`, `'threshold'`, ...) |
+| `domain`, `range`                                                            | Explicit input and output extent                                                                                                                                                                                              |
+| `reverse`, `nice`, `zero`, `clamp`, `round`, `percent`                       | Direction, rounding and baseline behaviour                                                                                                                                                                                    |
+| `label`, `labelAnchor`, `labelOrientation`, `labelPosition`, `titleFontSize` | The axis title (`label: false` hides it)                                                                                                                                                                                      |
+| `ticks`, `tickSpacing`, `tickSize`, `tickPadding`, `tickRotate`              | Tick placement and size                                                                                                                                                                                                       |
+| `tickFormat`                                                                 | `false`, an `Intl.NumberFormatOptions` / `Intl.DateTimeFormatOptions` object, or `(d, index, ticks) => string`                                                                                                                |
+| `grid`                                                                       | `true` or a stroke style for gridlines                                                                                                                                                                                        |
+| `axisDisplay`                                                                | `'visible'` (default), `'hidden'` (keeps the space, so aligned panels stay aligned) or `'none'`                                                                                                                               |
+| `padding`, `paddingInner`, `paddingOuter`, `align`                           | Band and point spacing                                                                                                                                                                                                        |
+| `insetLeft`, `insetRight`, `insetTop`, `insetBottom`                         | Pixels kept free at each end                                                                                                                                                                                                  |
+| `interval`, `base`, `constant`, `sort`                                       | Time/discrete intervals, log base, symlog constant, category order                                                                                                                                                            |
+
+Number and date text defaults follow `axis.locale` and `axis.compactDisplay` in the [configuration](theming.md#locale).
+
+## Color
+
+`scales.color` configures the `color` channel (and a choropleth on a map).
+
+| Field     | Meaning                                                                                                                                                                                        |
+| --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `domain`  | `[min, max]` for a continuous value, or the list of categories                                                                                                                                 |
+| `scheme`  | A named [d3-scale-chromatic](https://d3js.org/d3-scale-chromatic) ramp (`'turbo'`, `'blues'`, `'rdylbu'`, case-insensitive), two or more colors to interpolate, or a `Record<category, color>` |
+| `pivot`   | Splits an array `scheme` into two halves meeting at this value (a diverging ramp)                                                                                                              |
+| `unknown` | Color of a value outside the mapping (default `#ccc`)                                                                                                                                          |
+
+A continuous ramp is set with `scheme: [colorA, colorB]`. Categorical colors come from the configuration's `palette` unless `scheme` is a category-to-color record.
+
+A marker can carry its own `scales.color`, independent of the plot's, so two ramps can coexist in one plot.
+
+## Grouping
+
+`scales.grouping.reverse` flips which group sorts first, such as which side of a [pyramid](plots.md#pyramidplot) a series sits on.
+
+## Opacity
+
+`scales.opacity` maps a value to an opacity: `domain` (`[min, max]` or categories), `range` (`[minOpacity, maxOpacity]` or a category-to-opacity record), `unknown`.
+
+## Symbol
+
+`scales.symbol` maps categories to shapes: `domain`, `range` (a list of `SymbolType` cycled in order, or a record), `unknown`. The default shape cycle is `symbols` in the configuration.
+
+## Radius and length
+
+`scales.r` (dot radius) and `scales.length` (vector length) take `domain: [min, max]` and `range: [minPx, maxPx]`. The radius scale is a square-root scale, so a dot's area follows its value; hand it raw values, not pre-scaled radii.
+
+## Shared and free scales
+
+[Facets](facets.md) and [timelines](timeline.md) share scales across panels or steps by default so panels stay comparable; each has an option to refit per panel or step.

package/docs/state.md

@@ -0,0 +1,71 @@
+# Reading plot state
+
+A plot's state - its hover, legend, timeline, margins, scales, rows and size - can be read from anything drawn with it, to build custom UI. Both hooks are read-only, except for the legend (series can be turned on and off) and the timeline (it can be played and moved). Call them while a component initializes; outside a plot or a figure they throw.
+
+## `useFigure()`
+
+Works anywhere inside a figure, including the `header`, `footer` and `content` snippets of a plot or composer. It returns:
+
+- `hover` - `activeX`, `activeY`, `activeSeries`, `strategy`, `sync`, `source` (the id of the plot owning the hover).
+- `legend` (or `null`) - `entries`, `range`, `off` (names of hidden series), `isOff(name)`, `turnOff(name, action)`, `turnOn(name)`, `toggle(name, action)`. `action` is `{ mode: 'dim' | 'hide' | 'omit' }`; `'omit'` removes the series and refits the axes.
+- `timeline` (or `null`) - `enabled`, `steps`, `value`, `index`, `progress`, `playing`, `loop`, `speed`, `speeds`, `controls`, and `seek`, `seekIndex`, `seekValue`, `next`, `previous`, `play`, `pause`, `toggle`, `setLoop`, `setSpeed`, `cycleSpeed`.
+
+A footer that toggles series through the legend:
+
+```svelte
+<!-- FigureReadout.svelte -->
+<script lang="ts">
+	import { useFigure } from '@fundar/data-chart-telling';
+
+	const figure = useFigure();
+	const series = $derived(
+		(figure.legend?.entries ?? []).flatMap((e) => (e.type === 'series' ? [e] : []))
+	);
+</script>
+
+{#each series as entry (entry.name)}
+	<button onclick={() => figure.legend?.toggle(entry.name, { mode: 'omit' })}>
+		{figure.legend?.isOff(entry.name) ? 'Show' : 'Hide'}
+		{entry.name}
+	</button>
+{/each}
+```
+
+```svelte
+{#snippet footer()}<FigureReadout />{/snippet}
+<LinePlot data={rows} x="year" y="value" color="sex" tooltip {footer} />
+```
+
+## `usePlot()`
+
+Works inside a plot - in a [`component` marker](markers.md#custom-components), which is mounted in the plot's SVG. It returns everything `useFigure()` does, plus:
+
+- `hover.points`, `hover.activePoint`, `hover.tooltip` (`visible`, `position`, `rows`) for this plot;
+- `margins`, `scales`, `axes`, `data`, `width`, `height`;
+- `svelteplot` - svelteplot's own `usePlot()` state for this plot.
+
+```svelte
+<!-- HoverReadout.svelte -->
+<script lang="ts">
+	import { usePlot } from '@fundar/data-chart-telling';
+
+	const plot = usePlot();
+	const point = $derived(plot.hover.activePoint);
+</script>
+
+<text x={plot.margins.left + 8} y={plot.margins.top + 16}>
+	{point ? `${point.series} at ${point.x}: ${point.label}` : 'Hover the plot'}
+</text>
+```
+
+```svelte
+<LinePlot
+	...
+	tooltip
+	markers={[{ type: 'hover' }, { type: 'component', component: HoverReadout }]}
+/>
+```
+
+## When to use them
+
+Reach for these instead of re-implementing a legend, a timeline control or a hover readout beside the plot: the figure already holds that state, and a widget reading it stays in step with the plot. [examples/LegendReader.svelte](../examples/LegendReader.svelte) is a runnable reader, and the Storybook group _Configuration / State_ has both patterns.

package/docs/styles-and-segments.md

@@ -0,0 +1,215 @@
+# Styles and segments
+
+`styles` sets plot-wide options; `segments` restyles ranges of the data.
+
+## Styles
+
+`styles` is typed per plot kind, with these fields on the axis-based plots:
+
+| Field    | Plots                                | Purpose                       |
+| -------- | ------------------------------------ | ----------------------------- |
+| `values` | all axis-based plots                 | Value labels on the marks     |
+| `frame`  | all plots                            | A border around the plot area |
+| `gaps`   | `LinePlot`, `BarPlot`, `PyramidPlot` | Bridges over missing values   |
+
+`GeoPlot` has its own `styles` (base fill and stroke, tile layer, click handler) - see [Maps](geo.md).
+
+### Value labels
+
+```svelte
+<LinePlot
+	{width}
+	{height}
+	data={rows}
+	x="date"
+	y="index"
+	color="division"
+	styles={{
+		values: {
+			show: true,
+			format: (value, seriesName) => `${seriesName}: ${value.toFixed(0)}`,
+			fontStyle: { fontSize: 13 }
+		}
+	}}
+/>
+```
+
+![End-of-line value labels](images/styles-values.png)
+
+| Field          | Meaning                                                                                                                                        |
+| -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
+| `show`         | Draws the labels. Off by default, except on a heatmap                                                                                          |
+| `anchor`       | `'outside'`, `'start'`, `'middle'`, `'end'` - where a label sits on its mark                                                                   |
+| `format`       | `(value, seriesName) => string`                                                                                                                |
+| `hoverIsolate` | Hovering a label dims every other series                                                                                                       |
+| `fontStyle`    | Text style: `fontSize`, `fill`, `dx`, `dy`, `textAnchor`, `lineAnchor`, `rotate`, `class`, ... Overrides the anchor's placement field by field |
+| `strokeStyle`  | Style of the connector lines drawn from labels that had to move apart                                                                          |
+
+Where the labels go depends on the plot: the end of each series on a line or area plot, one per bar on a bar, pyramid or histogram, one per point on a scatter, one per cell on a heatmap. On lines, overlapping labels spread apart, share one column and are joined to their points by elbow connectors; the right margin grows to fit them when it is `'auto'`. The spread is tuned by `text.declutter` in the [configuration](theming.md).
+
+### Frame
+
+`styles={{ frame: true }}` draws a border around the plot area; an object restyles it (`stroke`, `fill`, `inset`, `insetTop`, ...).
+
+### Gaps
+
+A row whose value is `null`, `undefined` or `NaN` breaks a line. `styles.gaps` bridges the break with a distinct, interpolated stretch. It is keyed by series name, or `'default'` for the series with no entry of their own, and has three zones: `start` (before the first real point), `middle` and `end` (after the last).
+
+```svelte
+<LinePlot
+	{width}
+	{height}
+	series={[{ name: 'female', x: 'year', y: 'value', data: rowsWithHoles }]}
+	styles={{
+		gaps: {
+			default: {
+				middle: { interpolate: 'linear', style: { stroke: { strokeDasharray: '4 4' } } },
+				start: { x: 2007, style: { stroke: { strokeOpacity: 0.4 } } },
+				end: { x: 2023, y: 85 }
+			}
+		}
+	}}
+/>
+```
+
+![A line bridged across missing values with dashed segments](images/styles-gaps.png)
+
+- `middle` bridges holes between real points, `interpolate` is an easing name (default `'linear'`).
+- `start` and `end` reach out to the given `x` (required to fill the zone), landing on `y` there (default: the nearest real value).
+- On bar plots only the presence of `x` matters.
+- Unset styles fall back to `line.gap`, `bar.gap` and `pyramid.gap` in the [configuration](theming.md).
+
+## Segments
+
+`segments` separates data ranges from their styling. It is an object: each key is a series name (a feature id for `GeoPlot`), or `'default'`, mapped to a list of segments.
+
+```ts
+type SegmentsConfig<TStyle> = Record<string, Segment<TStyle>[]>;
+type Segment<TStyle> = { areas?: Area[]; styles?: TStyle; scales?: ...; legend?: MarkLegend };
+type Area = { x?: Range; y?: Range };
+type Range = { from?: AxisValue; to?: AxisValue }; // inclusive on both ends
+```
+
+- A segment applies to a data point (or heatmap cell) inside **any** of its `areas`.
+- An `Area` limits by `x`, `y` or both; leaving one out leaves that axis open.
+- A segment without `areas` is a **catch-all**: it matches every point, is evaluated last, and is overridden by any area-specific segment. A catch-all placed first is a baseline that highlighted ranges override.
+- `'default'` applies to every series; a named key applies to that series only, and wins over `'default'` where both match.
+- `legend` names the segment on the automatic [legend](legend.md).
+
+The style shape depends on the plot:
+
+| Plot                        | Style type                         | Fields                                         |
+| --------------------------- | ---------------------------------- | ---------------------------------------------- |
+| `LinePlot`                  | `LineSegmentStyle`                 | `stroke` (line style), `dots` (dot style)      |
+| `AreaPlot`, `HistogramPlot` | `AreaStyle`                        | `fill`, `fillOpacity`, `stroke`, ...           |
+| `BarPlot`, `PyramidPlot`    | `BarSegmentStyle` (`AreaStyle`)    | `fill`, `fillOpacity`, `stroke`, ...           |
+| `HeatmapPlot`               | `CellSegmentStyle` (`AreaStyle`)   | `fill`, `fillOpacity`, `stroke`, `strokeWidth` |
+| `ScatterPlot`               | `ScatterSegmentStyle` (`DotStyle`) | dot fill, stroke, radius, symbol               |
+| `GeoPlot`                   | `GeoSegmentStyle`                  | `fill`, `fillOpacity`, `stroke`, `strokeWidth` |
+
+### Examples
+
+A baseline color with a highlighted range:
+
+```svelte
+<LinePlot
+	{width}
+	{height}
+	series={[{ name: 'gdp', x: 'year', y: 'value', data: gdp }]}
+	segments={{
+		gdp: [
+			{ styles: { stroke: { stroke: '#94a3b8', strokeWidth: 1 } } },
+			{
+				areas: [{ x: { from: 2008, to: 2010 } }],
+				styles: { stroke: { stroke: '#ef4444', strokeWidth: 3 } }
+			}
+		]
+	}}
+/>
+```
+
+![A grey line with a highlighted red range](images/segments-highlight.png)
+
+Per-series colors, plus dots over a range shared by every series:
+
+```svelte
+<LinePlot
+	{width}
+	{height}
+	data={lifeExpectancy}
+	x="year"
+	y="value"
+	color="sex"
+	segments={{
+		female: [{ styles: { stroke: { stroke: 'steelblue' } } }],
+		male: [{ styles: { stroke: { stroke: 'tomato' } } }],
+		default: [
+			{
+				areas: [{ x: { from: 2010, to: 2012 } }],
+				styles: { dots: { dotRadius: 5, dotSymbol: 'circle' } }
+			}
+		]
+	}}
+/>
+```
+
+![Two series colored individually, with dots on a shared range](images/segments-series.png)
+
+Two areas in one segment, the second with a `y` limit:
+
+```ts
+{
+	areas: [
+		{ x: { from: 2010, to: 2012 } },
+		{ x: { from: 2015, to: 2020 }, y: { from: 83.5, to: 84 } }
+	],
+	styles: { stroke: { strokeDasharray: '6 4' } }
+}
+```
+
+Heatmap columns and cells:
+
+```svelte
+<HeatmapPlot
+	{width}
+	{height}
+	{data}
+	x="quarter"
+	y="product"
+	color="sales"
+	segments={{
+		default: [
+			{
+				areas: [{ x: { from: 'Q1', to: 'Q1' } }, { x: { from: 'Q3', to: 'Q3' } }],
+				styles: { stroke: '#f59e0b', strokeWidth: 2 }
+			},
+			{
+				areas: [{ x: { from: 'Q2', to: 'Q2' }, y: { from: 'Alpha', to: 'Beta' } }],
+				styles: { fill: '#ef4444', fillOpacity: 0.8 }
+			}
+		]
+	}}
+/>
+```
+
+![A heatmap with highlighted columns and cells](images/segments-heatmap.png)
+
+Map features, keyed by feature id:
+
+```svelte
+<GeoPlot
+	{width}
+	{height}
+	data={provinces}
+	featureId={(f) => String(f.properties?.nombre)}
+	segments={{
+		default: [{ styles: { fillOpacity: 0.7, stroke: '#94a3b8' } }],
+		Mendoza: [{ styles: { fill: '#3b82f6', fillOpacity: 0.9 } }],
+		Salta: [{ styles: { fill: '#ef4444', fillOpacity: 0.9 } }]
+	}}
+/>
+```
+
+![A map with two highlighted provinces](images/segments-geo.png)
+
+A segment typed with `satisfies SegmentsConfig<LineSegmentStyle>` gets completion for its style fields.

package/docs/theming.md

@@ -0,0 +1,215 @@
+# Theming
+
+The whole package reads its styling - fonts, colors, spacing, the legend, tooltip, axes, plot geometry - from one global, reactive configuration. Changing it re-themes every plot on screen; nothing is passed prop by prop.
+
+```ts
+import {
+	setConfiguration,
+	getConfiguration,
+	resetConfiguration,
+	THEMES
+} from '@fundar/data-chart-telling';
+
+setConfiguration(THEMES.Editorial); // a ready-made theme
+
+setConfiguration({
+	font: '"Inter", sans-serif',
+	palette: ['#4f46e5', '#e6580d', '#16a34a'],
+	legend: { continuous: { label: { size: '0.8125rem', weight: 400 } } }
+});
+
+getConfiguration(); // the live, merged configuration
+resetConfiguration(); // back to the shipped defaults
+```
+
+- `setConfiguration` takes a deep-partial patch and deep-merges it into the current configuration: name only the leaves to change. It is reactive, so mounted plots update.
+- Call it once at startup, or when the theme switches. It is global, not per plot; a plot's own props (`styles`, `scales`, a legend section's `format`, ...) always win over it.
+- The configuration is cloned when stored, so it holds data only: numbers, strings, arrays, objects. Functions belong in plot props such as `format` and `tickFormat`.
+- When `setConfiguration` runs inside an `$effect`, wrap the call in `untrack` so the effect does not re-trigger itself.
+- `THEMES` holds `Default`, `Editorial`, `Dark` and `Compact`; each is a patch for `setConfiguration`.
+- The complete shape is the type `PlotStylesConfig` (patches: `PlotStylesConfigInput`); the shipped values are `DEFAULT_CONFIG`.
+
+## Sections
+
+| Key                                                      | Controls                                                                                                                                                         |
+| -------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `font`, `color`, `background`                            | Base text of every figure                                                                                                                                        |
+| `palette`                                                | Categorical series colors, in order                                                                                                                              |
+| `symbols`                                                | Shape cycle for the `symbol` channel                                                                                                                             |
+| `continuous`                                             | Default ramp endpoints, label color and opacity range for continuous color and opacity                                                                           |
+| `spacing`, `chrome`                                      | Padding around header, legend and caption; the chrome `order` and `rowGap`                                                                                       |
+| `title`, `subtitle`, `caption`                           | Text blocks: `font`, `size`, `weight`, `color`, `leading`, `spacing`                                                                                             |
+| `divider`                                                | The line a `'divider'` in the chrome `order` draws                                                                                                               |
+| `legend`                                                 | Text, gaps, swatches, `disabledOpacity`, paginated nav buttons, the continuous bar, its handles, ticks and labels, and the `seriesTitle` and `sizeScale` options |
+| `axis`                                                   | Axis color, font and tick sizes, `grid`, and the number locale (below)                                                                                           |
+| `tooltip`                                                | Tooltip background, color, font size, padding, radius, border                                                                                                    |
+| `margins`                                                | Default margin per side (`'auto'` or a number)                                                                                                                   |
+| `line`, `area`, `bar`, `pyramid`, `histogram`, `scatter` | Per-kind defaults: stroke width, dot radius, series padding, gap fills, fill opacity, inset                                                                      |
+| `text`                                                   | `declutter` geometry of value labels and connectors                                                                                                              |
+| `hover`                                                  | Look of the hover marker: `rule`, `dot`, `font`, `area`                                                                                                          |
+| `timeline`                                               | The rule (`rule`) and the player bar (`player`: controls, speeds, `stepDuration`, button, track, thumb, toggle)                                                  |
+| `facet`                                                  | The position badge and prev/next buttons                                                                                                                         |
+| `frameClip`                                              | Tolerance for clipping marks to the plot frame                                                                                                                   |
+
+## Locale
+
+`axis.locale` (default `'es-AR'`) and `axis.compactDisplay` (`'short'` or `'long'`, default `'short'`) set how the automatic tick formatter writes numbers - the one used by any axis without its own `scales.x`/`scales.y.tickFormat`. A legend's size section writes its values the same way. Whether an axis abbreviates at all stays svelteplot's call, based on its value range; these two choose the wording once it does.
+
+```ts
+setConfiguration({ axis: { locale: 'en-US', compactDisplay: 'long' } });
+```
+
+`axis.locale` updates plots already on screen. `axis.compactDisplay` is read when a plot mounts, so a later change shows on the next mount.
+
+## CSS variables
+
+Some fields reach the DOM as CSS custom properties, which every figure sets on its root element and the components read with a fallback. Those can also be overridden with plain CSS on a wrapping element for a one-off, non-reactive tweak:
+
+```css
+.my-dashboard {
+	--dct-tooltip-bg: #0b3d2e;
+	--dct-title-size: 2rem;
+}
+```
+
+The remaining fields are plain values read by plot code (palette, tick sizes, margins, per-kind geometry, hover look); `setConfiguration` is the way to change those.
+
+The text blocks map `title`, `subtitle` and `caption` to `--dct-{block}-{font|size|weight|color|leading|spacing}`. Every other variable and the configuration path it comes from:
+
+### base
+
+| CSS variable | Config path  |
+| ------------ | ------------ |
+| `--dct-font` | `font`       |
+| `--dct-fg`   | `color`      |
+| `--dct-bg`   | `background` |
+
+### spacing
+
+| CSS variable        | Config path              |
+| ------------------- | ------------------------ |
+| `--dct-header-pad`  | `spacing.headerPadding`  |
+| `--dct-legend-pad`  | `spacing.legendPadding`  |
+| `--dct-caption-pad` | `spacing.captionPadding` |
+| `--dct-bleed`       | `spacing.bleed`          |
+
+### divider
+
+| CSS variable           | Config path      |
+| ---------------------- | ---------------- |
+| `--dct-divider-color`  | `divider.color`  |
+| `--dct-divider-width`  | `divider.width`  |
+| `--dct-divider-style`  | `divider.style`  |
+| `--dct-divider-margin` | `divider.margin` |
+
+### chrome
+
+| CSS variable    | Config path     |
+| --------------- | --------------- |
+| `--dct-row-gap` | `chrome.rowGap` |
+
+### legend
+
+| CSS variable                            | Config path                              |
+| --------------------------------------- | ---------------------------------------- |
+| `--dct-legend-font`                     | `legend.font`                            |
+| `--dct-legend-size`                     | `legend.size`                            |
+| `--dct-legend-weight`                   | `legend.weight`                          |
+| `--dct-legend-color`                    | `legend.color`                           |
+| `--dct-legend-title-size`               | `legend.titleSize`                       |
+| `--dct-legend-title-weight`             | `legend.titleWeight`                     |
+| `--dct-legend-gap`                      | `legend.gap`                             |
+| `--dct-legend-swatch`                   | `legend.swatchSize`                      |
+| `--dct-legend-size-gap`                 | `legend.sizeScale.gap`                   |
+| `--dct-legend-nav-bg`                   | `legend.navButton.background`            |
+| `--dct-legend-nav-color`                | `legend.navButton.color`                 |
+| `--dct-legend-nav-size`                 | `legend.navButton.size`                  |
+| `--dct-legend-nav-font-size`            | `legend.navButton.fontSize`              |
+| `--dct-legend-nav-disabled-opacity`     | `legend.navButton.disabledOpacity`       |
+| `--dct-continuous-handle-width`         | `legend.continuous.handle.width`         |
+| `--dct-continuous-handle-height`        | `legend.continuous.handle.height`        |
+| `--dct-continuous-handle-radius`        | `legend.continuous.handle.radius`        |
+| `--dct-continuous-handle-fill`          | `legend.continuous.handle.fill`          |
+| `--dct-continuous-handle-stroke`        | `legend.continuous.handle.stroke`        |
+| `--dct-continuous-handle-stroke-width`  | `legend.continuous.handle.strokeWidth`   |
+| `--dct-continuous-tick-color`           | `legend.continuous.tick.color`           |
+| `--dct-continuous-tick-width`           | `legend.continuous.tick.width`           |
+| `--dct-continuous-tick-length`          | `legend.continuous.tick.length`          |
+| `--dct-continuous-label-rotate`         | `legend.continuous.label.rotate`         |
+| `--dct-continuous-label-size`           | `legend.continuous.label.size`           |
+| `--dct-continuous-label-weight`         | `legend.continuous.label.weight`         |
+| `--dct-continuous-label-overlap-rotate` | `legend.continuous.label.overlap.rotate` |
+
+### axis
+
+| CSS variable       | Config path  |
+| ------------------ | ------------ |
+| `--dct-axis-color` | `axis.color` |
+
+### tooltip
+
+| CSS variable           | Config path          |
+| ---------------------- | -------------------- |
+| `--dct-tooltip-bg`     | `tooltip.background` |
+| `--dct-tooltip-color`  | `tooltip.color`      |
+| `--dct-tooltip-size`   | `tooltip.fontSize`   |
+| `--dct-tooltip-pad`    | `tooltip.padding`    |
+| `--dct-tooltip-radius` | `tooltip.radius`     |
+| `--dct-tooltip-border` | `tooltip.border`     |
+
+### timeline
+
+| CSS variable                       | Config path                               |
+| ---------------------------------- | ----------------------------------------- |
+| `--dct-timeline-axis`              | `timeline.axisColor`                      |
+| `--dct-timeline-active`            | `timeline.activeColor`                    |
+| `--dct-timeline-gap`               | `timeline.gap`                            |
+| `--dct-player-bg`                  | `timeline.player.background`              |
+| `--dct-player-color`               | `timeline.player.color`                   |
+| `--dct-player-radius`              | `timeline.player.radius`                  |
+| `--dct-player-pad`                 | `timeline.player.padding`                 |
+| `--dct-player-gap`                 | `timeline.player.gap`                     |
+| `--dct-player-size`                | `timeline.player.fontSize`                |
+| `--dct-player-weight`              | `timeline.player.fontWeight`              |
+| `--dct-player-value-width`         | `timeline.player.valueWidth`              |
+| `--dct-player-button-size`         | `timeline.player.button.size`             |
+| `--dct-player-button-bg`           | `timeline.player.button.background`       |
+| `--dct-player-button-color`        | `timeline.player.button.color`            |
+| `--dct-player-button-hover-bg`     | `timeline.player.button.hoverBackground`  |
+| `--dct-player-button-radius`       | `timeline.player.button.radius`           |
+| `--dct-player-track-height`        | `timeline.player.track.height`            |
+| `--dct-player-track-color`         | `timeline.player.track.color`             |
+| `--dct-player-track-fill`          | `timeline.player.track.fillColor`         |
+| `--dct-player-track-radius`        | `timeline.player.track.radius`            |
+| `--dct-player-thumb-size`          | `timeline.player.thumb.size`              |
+| `--dct-player-thumb-color`         | `timeline.player.thumb.color`             |
+| `--dct-player-toggle-bg`           | `timeline.player.toggle.background`       |
+| `--dct-player-toggle-color`        | `timeline.player.toggle.color`            |
+| `--dct-player-toggle-active-bg`    | `timeline.player.toggle.activeBackground` |
+| `--dct-player-toggle-active-color` | `timeline.player.toggle.activeColor`      |
+| `--dct-player-toggle-radius`       | `timeline.player.toggle.radius`           |
+| `--dct-player-toggle-size`         | `timeline.player.toggle.fontSize`         |
+| `--dct-player-toggle-pad`          | `timeline.player.toggle.padding`          |
+
+### heatmap ramp
+
+| CSS variable      | Config path             |
+| ----------------- | ----------------------- |
+| `--dct-heat-min`  | `continuous.min`        |
+| `--dct-heat-max`  | `continuous.max`        |
+| `--dct-heat-text` | `continuous.labelColor` |
+
+### facet
+
+| CSS variable                       | Config path                       |
+| ---------------------------------- | --------------------------------- |
+| `--dct-facet-indicator-bg`         | `facet.indicator.background`      |
+| `--dct-facet-indicator-color`      | `facet.indicator.color`           |
+| `--dct-facet-indicator-size`       | `facet.indicator.fontSize`        |
+| `--dct-facet-indicator-pad`        | `facet.indicator.padding`         |
+| `--dct-facet-indicator-radius`     | `facet.indicator.radius`          |
+| `--dct-facet-nav-bg`               | `facet.navButton.background`      |
+| `--dct-facet-nav-color`            | `facet.navButton.color`           |
+| `--dct-facet-nav-btn-size`         | `facet.navButton.size`            |
+| `--dct-facet-nav-font-size`        | `facet.navButton.fontSize`        |
+| `--dct-facet-nav-disabled-opacity` | `facet.navButton.disabledOpacity` |