@fundar/data-chart-telling 1.16.0 → 1.17.0

package/dist/plots/ranking/bar/markers.js

@@ -66,77 +66,6 @@ hover, ctx) {
         };
     });
 }
-/**
- * BarPlot's `styles.values` as one `'text'` marker per series, over the same
- * processed rows its bars draw (gap rows never get a label). `anchor` places
- * each label along its bar: past its top (`'outside'`), just inside it
- * (`'start'`), at its base (`'end'`), or centred (`'middle'`); a stacked bar's
- * label always sits at the middle of its own span. A grouped bar's label
- * shifts with its series' slice of the band.
- */
-export function buildValueLabels(labels, state, ctx) {
-    const { processedData } = state;
-    const isHorizontal = state.axes?.isHorizontal ?? false;
-    if (!processedData)
-        return [];
-    const geometry = buildBarGeometry(state, ctx.cfg.bar.seriesPadding);
-    const { font, anchor, format } = labels;
-    const valueOf = ValueLabels.valueOf(state);
-    const spanOf = (d) => geometry.spanOf(d) ?? [0, 0];
-    const lowOf = (d) => Math.min(...spanOf(d));
-    const highOf = (d) => Math.max(...spanOf(d));
-    const below = (d) => Number(valueOf(d)) < 0;
-    const place = (negative) => {
-        const mid = (d) => (lowOf(d) + highOf(d)) / 2;
-        if (geometry.stacked)
-            return { at: mid, side: 0 };
-        if (anchor === 'middle')
-            return { at: mid, side: 0 };
-        if (anchor === 'outside')
-            return isHorizontal
-                ? { at: negative ? lowOf : highOf, side: negative ? -1 : 1 }
-                : { at: negative ? lowOf : highOf, side: negative ? 1 : -1 };
-        if (anchor === 'start')
-            return isHorizontal ? { at: lowOf, side: 1 } : { at: highOf, side: 1 };
-        return isHorizontal ? { at: highOf, side: -1 } : { at: lowOf, side: -1 };
-    };
-    const gap = anchor === 'outside' ? 6 : 4;
-    const labelled = processedData.data.filter((d) => d[GAP_VALUE] === undefined && geometry.spanOf(d) !== undefined);
-    return (state.resolvedSeries ?? []).flatMap((s) => {
-        const own = labelled.filter((d) => d[SERIES_ID_KEY] === seriesIdOf(s));
-        // Only a label beyond the tip turns with the sign of its value.
-        const turns = !geometry.stacked && anchor === 'outside';
-        return (turns ? [false, true] : [false]).flatMap((negative) => {
-            const data = turns ? own.filter((d) => below(d) === negative) : own;
-            if (data.length === 0)
-                return [];
-            const { at, side } = place(negative);
-            // A horizontal label reads away from its point to `side`; a vertical one sits on the far side of it.
-            const textAnchor = labels.textAnchor ??
-                (isHorizontal ? (side === 1 ? 'start' : side === -1 ? 'end' : 'middle') : 'middle');
-            const lineAnchor = font?.lineAnchor ??
-                (isHorizontal ? 'middle' : side === 1 ? 'top' : side === -1 ? 'bottom' : 'middle');
-            return [
-                {
-                    type: 'text',
-                    data,
-                    ...(isHorizontal ? { x: at, y: geometry.categoryOf } : { x: geometry.categoryOf, y: at }),
-                    bandSlice: geometry.sliceOf(s.name),
-                    text: (d) => format(Number(valueOf(d)), s.name, d),
-                    styles: {
-                        ...font,
-                        fill: font?.fill ?? ctx.cfg.axis.color,
-                        fontSize: font?.fontSize ?? 12,
-                        dx: font?.dx ?? (isHorizontal ? side * gap : 0),
-                        dy: font?.dy ?? (isHorizontal ? 0 : side * gap),
-                        textAnchor,
-                        lineAnchor
-                    }
-                }
-            ];
-        });
-    });
-}
 /**
  * BarPlot's "markers" phase: visible `role: 'segment'` bars - real data plus
  * gap fills - drawing the rows the "transforms" phase left, prepended onto
@@ -160,7 +89,25 @@ export function buildMarks(state, ctx) {
     // which stays a field key whenever the plot has no transforms.
     const valueOf = (channel) => (geometry.stacked || channel === undefined ? top : channel);
     const gapValue = valueOf(channels[valueAxis]);
-    function makeMarker(data, slice, value, styles) {
+    // What each bar writes in itself: its value, anchored along the bar by `anchor` - past its tip
+    // (`'outside'`), just inside it (`'start'`), at its base (`'end'`) or in the middle. A stacked bar's
+    // label is always in the middle of its segment.
+    const labels = state.valueLabels?.show ? state.valueLabels : undefined;
+    const valueRead = ValueLabels.valueOf(state);
+    const turns = !!labels && !geometry.stacked && ValueLabels.followsSign(labels.anchor);
+    const labelAnchor = (negative) => ValueLabels.boxAnchor(labels?.anchor ?? 'outside', {
+        isHorizontal,
+        negative,
+        stacked: geometry.stacked
+    });
+    const labelFor = (name, slice, negative) => labels && {
+        ...labels.shapeLabel(ctx, (d) => labels.format(Number(valueRead(d)), name, d), {
+            fill: 'currentColor',
+            ...labelAnchor(negative)
+        }),
+        bandSlice: slice
+    };
+    function makeMarker(data, slice, value, styles, label) {
         if (data.length === 0)
             return null;
         const from = (geometry.stacked ? bottom : geometry.baseline);
@@ -170,18 +117,17 @@ export function buildMarks(state, ctx) {
             isHorizontal,
             data,
             styles,
+            ...(label ? { label } : {}),
             ...(isHorizontal
                 ? { y: category, x1: from, x2: value }
                 : { x: category, y1: from, y2: value })
         };
         if (slice) {
             if (isHorizontal) {
-                marker.insetTop = slice.start;
-                marker.insetBottom = slice.end;
+                marker.styles = { ...marker.styles, insetTop: slice.start, insetBottom: slice.end };
             }
             else {
-                marker.insetLeft = slice.start;
-                marker.insetRight = slice.end;
+                marker.styles = { ...marker.styles, insetLeft: slice.start, insetRight: slice.end };
             }
         }
         return marker;
@@ -195,7 +141,7 @@ export function buildMarks(state, ctx) {
         const disabledFill = ctx.interaction?.fillFor(name);
         for (const seg of group.visualSegments) {
             const fill = disabledFill?.fill ?? seg.styles.fill ?? defaultColor;
-            const marker = makeMarker(seg.data.filter(isReal), slice, valueOf(group.series[valueAxis]), {
+            const styles = {
                 // An outline asked for without a color is the fill's.
                 ...(seg.styles.strokeWidth !== undefined ? { stroke: fill } : {}),
                 ...seg.styles,
@@ -205,9 +151,21 @@ export function buildMarks(state, ctx) {
                 ...(disabledFill?.fillOpacity !== undefined
                     ? { strokeOpacity: disabledFill.fillOpacity }
                     : {})
-            });
-            if (marker)
-                segmentMarkers.push(marker);
+            };
+            const real = seg.data.filter(isReal);
+            const value = valueOf(group.series[valueAxis]);
+            // A label past the tip turns with the sign of its value, so the bars below zero are a marker of their own.
+            const parts = turns
+                ? [false, true].map((negative) => ({
+                    negative,
+                    rows: real.filter((row) => Number(valueRead(row)) < 0 === negative)
+                }))
+                : [{ negative: false, rows: real }];
+            for (const { negative, rows } of parts) {
+                const marker = makeMarker(rows, slice, value, styles, labelFor(name, slice, negative));
+                if (marker)
+                    segmentMarkers.push(marker);
+            }
         }
         const id = seriesIdOf(group.series);
         const fills = [...(gapFillMaps.get(id)?.values() ?? [])];

package/dist/plots/ranking/bullet/markers.js

@@ -33,7 +33,7 @@ export function buildMarks(state, ctx) {
     const rangeColors = own.ranges?.colors ?? configured.rangeColors;
     const rangeWidth = own.ranges?.width ?? configured.rangeWidth;
     const target = {
-        color: own.target?.color ?? configured.targetColor ?? ctx.cfg.axis.color,
+        color: own.target?.color ?? configured.targetColor ?? 'currentColor',
         width: own.target?.width ?? configured.targetWidth,
         length: own.target?.length ?? configured.targetLength
     };
@@ -59,8 +59,7 @@ export function buildMarks(state, ctx) {
                 data: rows,
                 value: 'category',
                 ...(isHorizontal ? { x1: 'from', x2: 'to' } : { y1: 'from', y2: 'to' }),
-                stroke: 'stroke',
-                styles: { strokeWidth: rangeWidth }
+                styles: { stroke: 'stroke', strokeWidth: rangeWidth }
             }
         ];
     // The bars narrowed to a thickness of their own, centered in their band.

package/dist/plots/ranking/cleveland/ClevelandMarkers.js

@@ -45,7 +45,7 @@ export class ClevelandMarkers {
         // color and its segment's style; the legend dims it with the series.
         const size = state.channels?.r;
         const dotRadius = typeof size === 'number' ? size : style.dotRadius;
-        const neutral = style.connectorColor ?? cfg.axis.color;
+        const neutral = style.connectorColor ?? 'currentColor';
         // `styles.stroke` is the connectors' look below everything the author sets for them: a segment's
         // stroke wins over `styles.connector`, which wins over it. A function of the series styles only
         // the connector of a lone dot, which has a series; the connector of several dots has none.
@@ -135,10 +135,12 @@ export class ClevelandMarkers {
             data: group.flatMap((look) => look.rows),
             value: 'category',
             ...(isHorizontal ? { x1: 'from', x2: 'to' } : { y1: 'from', y2: 'to' }),
-            stroke: 'stroke',
-            strokeWidth: 'strokeWidth',
-            strokeOpacity: 'strokeOpacity',
-            ...(Object.keys(pattern).length > 0 ? { styles: pattern } : {})
+            styles: {
+                ...pattern,
+                stroke: 'stroke',
+                strokeWidth: 'strokeWidth',
+                strokeOpacity: 'strokeOpacity'
+            }
         }));
         // The arrows, one marker per pattern like the lines, each from its `from` dot to its `to` dot.
         const head = connector.arrow;
@@ -157,12 +159,14 @@ export class ClevelandMarkers {
                     headLength: head.headLength,
                     headAngle: head.headAngle,
                     // The shaft starts and ends at the edge of its dots, not under them.
-                    insetStart: dotRadius,
-                    insetEnd: dotRadius,
-                    stroke: 'stroke',
-                    strokeWidth: 'strokeWidth',
-                    strokeOpacity: 'strokeOpacity',
-                    ...(Object.keys(pattern).length > 0 ? { styles: pattern } : {})
+                    styles: {
+                        ...pattern,
+                        insetStart: dotRadius,
+                        insetEnd: dotRadius,
+                        stroke: 'stroke',
+                        strokeWidth: 'strokeWidth',
+                        strokeOpacity: 'strokeOpacity'
+                    }
                 }
             ];
         });
@@ -266,7 +270,7 @@ export class ClevelandMarkers {
                 text: 'text',
                 styles: {
                     ...font,
-                    fill: font?.fill ?? ctx.cfg.axis.color,
+                    fill: font?.fill ?? 'currentColor',
                     fontSize: font?.fontSize ?? ctx.cfg.connector.labelFontSize,
                     dx: font?.dx ?? at.dx,
                     dy: font?.dy ?? at.dy,
@@ -308,7 +312,7 @@ export class ClevelandMarkers {
         // What fills the labels of a series: the one fill all share, its own color, or the axis'.
         const fillOf = (series) => labels.fill ??
             (labels.color === 'series' ? state.colorForSeries(series) : undefined) ??
-            ctx.cfg.axis.color;
+            'currentColor';
         const names = labels.color === 'series' && !labels.fill
             ? (state.resolvedSeries ?? []).map((s) => s.name)
             : [''];

package/dist/types/configuration/styling.d.ts

@@ -70,7 +70,7 @@ export type PlotStylesConfig = {
     palette: string[];
     /** Default shape cycle for the `symbol` channel, in order. */
     symbols: SymbolType[];
-    /** The default continuous ramp, the on-cell label colour and the default opacity-channel range. */
+    /** The default continuous ramp and the default opacity-channel range. */
     continuous: {
         /** The ramp's first color, when it is not a named `scheme`. */
         min: string;
@@ -80,7 +80,6 @@ export type PlotStylesConfig = {
         scheme?: string;
         /** The part of `scheme` to use, as `[from, to]` fractions of it: `[0.2, 1]` skips the near-white start of `'blues'`. */
         schemeRange?: [number, number];
-        labelColor: string;
         opacityRange: [number, number];
     };
     /**
@@ -264,6 +263,19 @@ export type PlotStylesConfig = {
             disabledOpacity: number;
         };
     };
+    /** The tiles of a `TreemapPlot` and the labels written on them. */
+    treemap: {
+        /** The line between tiles. */
+        stroke: string;
+        /** Its width, in px. */
+        strokeWidth: number;
+        /** Font size of a tile's label, in px. */
+        fontSize: number;
+        /** The room kept between a tile's edge and its label, in px. */
+        padding: number;
+        /** Line height of a tile's label, as a multiple of its font size. */
+        lineHeight: number;
+    };
     /** Timeline gutter styling. */
     timeline: {
         axisColor: string;
@@ -378,6 +390,19 @@ export type PlotStylesConfig = {
     };
     /** Default text-marker behavior. */
     text: {
+        /** Defaults of the `label` a shape writes in itself (`rect`, `cell`, `bar`, `waffle`), each overridden by the label's own `gap` and `fit`. */
+        label: {
+            /** Pixels between a label and the edge it is anchored to. */
+            gap: number;
+            /** Pixels a fitted label keeps free inside each edge of its shape. */
+            padding: number;
+            /** The smallest size a fitted label is written at, in px. */
+            minFontSize: number;
+            /** The fewest letters worth writing when a fitted label is cut short; under them its `fallback` is written. */
+            minLetters: number;
+            /** The colors a label inside its shape is written in: the one that reads best on the shape's color. A label's own `fill` wins. */
+            contrast: string[];
+        };
         /** Geometry and connector of a decluttered text marker (`declutter`) - e.g. LinePlot's end-of-line value labels. */
         declutter: {
             /** Shortest lane's distance (px) from the point before a connector bends. */

package/dist/types/layout/legend.d.ts

@@ -20,7 +20,12 @@ export type LegendDisabledStyle = {
  * What a legend toggle does to a series once it's off: `'dim'` dims it in
  * place (styled by `style`), `'hide'` makes it fully transparent while the
  * axes keep its range, `'omit'` removes it from the plot entirely, rescaling
- * the axes to what's left.
+ * the axes to what's left - the other series keep their values, and a part of
+ * a whole (a treemap's tile) its share and its place. `'rescale'` removes it
+ * too, and the parts left make the whole again: a stack's visible parts are
+ * scaled up to the total each category had, and a treemap's tiles are laid out
+ * and given their shares anew, as the new 100%. On a plot of no parts it is an
+ * `'omit'`.
  */
 export type LegendDisabledAction = {
     mode: 'dim';
@@ -29,6 +34,8 @@ export type LegendDisabledAction = {
     mode: 'hide';
 } | {
     mode: 'omit';
+} | {
+    mode: 'rescale';
 };
 export type LegendItem = {
     name: string;

package/dist/types/layout/mapping.d.ts

@@ -14,7 +14,9 @@ export type ChannelValue = {
      * Splits `data` into one series per distinct value - the structural
      * grouping key. Defaults to `color` when omitted, so a single `color`
      * accessor groups *and* colors series; pass both to split by one field
-     * while coloring by another.
+     * while coloring by another. A dotted name (`'sector.branch'`) groups by several
+     * levels, outermost first: a plot that nests (a treemap) nests by them, any other
+     * splits by their combination - see {@link GroupingAccessor}.
      */
     grouping: unknown;
     /**
@@ -34,6 +36,8 @@ export type ChannelValue = {
     r: number;
     /** Vector/spike magnitude - a literal number is a fixed pixel length. Configure via `scales.length`. */
     length: number;
+    /** What a row amounts to as a part of a whole: a treemap tile's area. A plot without parts ignores it. */
+    value: number;
 };
 /** Every channel a plot maps from its rows. */
 export type ChannelName = keyof ChannelValue;
@@ -46,9 +50,14 @@ export type AxisChannelName = 'x' | 'y';
 export type IndependentChannelName = 'color' | 'grouping' | 'opacity' | 'symbol';
 /** The size channels, which also take a literal number as a fixed pixel size that bypasses their scale. */
 export type SizeChannelName = 'r' | 'length';
-/** Every channel as a plot prop: a field key or accessor function (or a literal size, for a size channel). */
+/**
+ * What a plot's rows group by: a field, the fields of several levels joined by dots (`'sector.branch'`,
+ * outermost first), or a function of the row. A dotted name is a field when the rows have one by that name.
+ */
+export type GroupingAccessor<TData> = (keyof TData & string) | `${keyof TData & string}.${string}` | ((row: TData) => unknown);
+/** Every channel as a plot prop: a field key or accessor function (or a literal size, for a size channel); `grouping` also takes levels - see {@link GroupingAccessor}. */
 export type ChannelAccessors<TData extends Record<string, unknown>> = {
-    [K in keyof ChannelValue]?: Accessor<TData, ChannelValue[K]> | (K extends SizeChannelName ? number : never);
+    [K in keyof ChannelValue]?: K extends 'grouping' ? GroupingAccessor<TData> : Accessor<TData, ChannelValue[K]> | (K extends SizeChannelName ? number : never);
 };
 /** One channel's own resolved data accessor - mirrors svelteplot's own `ChannelAccessor`. */
 export type ResolvedChannel<TData, TValue = AxisValue> = {

package/dist/types/layout/scales.d.ts

@@ -19,6 +19,12 @@ export type ColorScaleConfig = {
     pivot?: number;
     /** Fallback color for a missing/unmapped value. Defaults to `'#ccc'`. */
     unknown?: string;
+    /**
+     * With a `grouping` of several levels (`'sector.kind.branch'`), the level its colors reach: `1` (the default)
+     * gives each outermost value its color, and a deeper one gives each value down to that level a tone of its
+     * outermost value's color - `2` a tone per kind within its sector's color. Ignored by a continuous ramp.
+     */
+    depth?: number;
 };
 /** How groups sharing the same `grouping`/`color` value are ordered: `reverse` flips which sorts first (e.g. PyramidPlot's left/right sides). */
 export type GroupingScaleConfig = {

package/dist/types/layout/tooltip.d.ts

@@ -12,18 +12,30 @@ export type TooltipAnchorY = 'top' | 'middle' | 'bottom';
 export type TooltipRow<TRow> = TRow & {
     seriesColor?: string;
 };
+/**
+ * What a plot knows of a hovered row beyond its own fields, the third argument of a tooltip's `format`:
+ * the series it is drawn in, on the plots that have series. A plot kind that works out more about a row
+ * gives a type that extends this one.
+ */
+export type TooltipContext = {
+    /** The name of the series the row is drawn in. */
+    series?: string;
+};
 /**
  * Author-facing tooltip option on the chart kinds. `true` = enable with defaults. `decimals`, `prefix`,
  * `suffix` and `signDisplay` write the value the default text shows - the one on the plot's value axis (the
  * x of a horizontal bar chart), and a heatmap's color value - and the numbers a custom `format` writes with its `number`.
  */
-export type TooltipOptions<TRow extends Record<string, unknown>> = NumberDisplay & {
+export type TooltipOptions<TRow extends Record<string, unknown>, TContext extends TooltipContext = TooltipContext> = NumberDisplay & {
     /** Matching strategy. Defaults to the chart kind's own default. */
     strategy?: HoverStrategy;
     /** Highlight the hovered point in every synced plot too. Defaults to `false`. */
     sync?: boolean;
-    /** Custom tooltip text for a row (supports `\n`). Defaults per chart kind. `number` writes a value as the display fields above ask. */
-    format?: (row: TRow, number: (value: number) => string) => string;
+    /**
+     * Custom tooltip text for a row (supports `\n`). Defaults per chart kind. `number` writes a value as the display
+     * fields above ask, and `context` is what the plot knows of the row - see {@link TooltipContext}.
+     */
+    format?: (row: TRow, number: (value: number) => string, context: TContext) => string;
     /** Named subset of crossing series to include. Omitted = all matched. */
     series?: string[];
     /** Custom tooltip body; replaces `format` when given. Its rows carry a `seriesColor` - see {@link TooltipRow}. */
@@ -36,4 +48,4 @@ export type TooltipOptions<TRow extends Record<string, unknown>> = NumberDisplay
     anchorY?: TooltipAnchorY;
 };
 /** Either a bare on/off flag or the full option object. */
-export type TooltipProp<TRow extends Record<string, unknown>> = boolean | TooltipOptions<TRow>;
+export type TooltipProp<TRow extends Record<string, unknown>, TContext extends TooltipContext = TooltipContext> = boolean | TooltipOptions<TRow, TContext>;

package/dist/types/markers/axis/arrow.d.ts

@@ -1,4 +1,4 @@
-import type { StrokeStyle } from '../../plots/styling';
+import type { StrokeStyle, PerRow, DirectedInsetStyle } from '../../plots/styling';
 import type { CommonMarkerConfigWithInterval } from '../channels/commonMarkerConfigWithInterval';
 /** A point-to-point arrow (svelteplot's `Arrow`), from `x1`/`y1` to `x2`/`y2`. */
 export type ArrowMarkerConfig = {
@@ -7,12 +7,6 @@ export type ArrowMarkerConfig = {
     bend?: number | true;
     headAngle?: number;
     headLength?: number;
-    inset?: number;
-    insetStart?: number;
-    insetEnd?: number;
     sweep?: 1 | 0 | -1 | '+x' | '-x' | '+y' | '-y';
-    stroke?: string | ((d: any) => string | undefined);
-    strokeWidth?: string | ((d: any) => number);
-    strokeOpacity?: string | ((d: any) => number);
-    styles?: StrokeStyle;
+    styles?: PerRow<StrokeStyle & DirectedInsetStyle>;
 } & CommonMarkerConfigWithInterval;

package/dist/types/markers/axis/bar.d.ts

@@ -1,5 +1,6 @@
 import type { AxisValue } from '../../layout/mapping';
-import type { AreaStyle } from '../../plots/styling';
+import type { AreaStyle, PerRow, InsetStyle } from '../../plots/styling';
+import type { CommonMarkerConfigWithLabel } from '../channels/commonMarkerConfigWithLabel';
 import type { CommonMarkerConfigWithColor } from '../channels/commonMarkerConfigWithColor';
 import type { CommonMarkerConfigWithInterval } from '../channels/commonMarkerConfigWithInterval';
 /** A bar mark; `role` tells a visible segment from the hover hit area and highlight. */
@@ -7,12 +8,7 @@ export type BarMarkerConfig = {
     type: 'bar';
     role: 'segment' | 'hitArea' | 'highlight';
     isHorizontal: boolean;
-    insetTop?: number;
-    insetBottom?: number;
-    insetLeft?: number;
-    insetRight?: number;
     thickness?: number;
-    styles?: AreaStyle;
+    styles?: PerRow<AreaStyle> & InsetStyle;
     category?: AxisValue;
-    hover?: boolean;
-} & CommonMarkerConfigWithColor & CommonMarkerConfigWithInterval;
+} & CommonMarkerConfigWithColor & CommonMarkerConfigWithInterval & CommonMarkerConfigWithLabel;

package/dist/types/markers/axis/cell.d.ts

@@ -1,9 +1,9 @@
-import type { AreaStyle } from '../../plots/styling';
+import type { AreaStyle, PerRow, InsetStyle } from '../../plots/styling';
 import type { CommonMarkerConfigWithArea } from '../channels/commonMarkerConfigWithArea';
+import type { CommonMarkerConfigWithLabel } from '../channels/commonMarkerConfigWithLabel';
 import type { CommonMarkerConfigWithColor } from '../channels/commonMarkerConfigWithColor';
-/** A heatmap cell mark; `fill` is always set per row. */
+/** A heatmap cell mark; its `fill` is set per row, by `color` or `styles.fill`. */
 export type CellMarkerConfig = {
     type: 'cell';
-    styles?: AreaStyle;
-    inset?: number;
-} & CommonMarkerConfigWithColor & Required<Pick<CommonMarkerConfigWithArea, 'fill'>>;
+    styles?: PerRow<AreaStyle & Pick<InsetStyle, 'inset'>>;
+} & CommonMarkerConfigWithColor & CommonMarkerConfigWithArea & CommonMarkerConfigWithLabel;

package/dist/types/markers/axis/delaunayLink.d.ts

@@ -1,7 +1,7 @@
-import type { AreaStyle } from '../../plots/styling';
+import type { AreaStyle, PerRow } from '../../plots/styling';
 import type { CommonMarkerConfigWithColor } from '../channels/commonMarkerConfigWithColor';
 /** One line per Delaunay triangulation edge (svelteplot's `DelaunayLink`). */
 export type DelaunayLinkMarkerConfig = {
     type: 'delaunayLink';
-    styles?: AreaStyle;
+    styles?: PerRow<AreaStyle>;
 } & CommonMarkerConfigWithColor;

package/dist/types/markers/axis/rect.d.ts

@@ -1,15 +1,11 @@
-import type { AreaStyle } from '../../plots/styling';
+import type { AreaStyle, PerRow, InsetStyle } from '../../plots/styling';
 import type { CommonMarkerConfigWithArea } from '../channels/commonMarkerConfigWithArea';
 import type { CommonMarkerConfigWithColor } from '../channels/commonMarkerConfigWithColor';
+import type { CommonMarkerConfigWithLabel } from '../channels/commonMarkerConfigWithLabel';
 import type { CommonMarkerConfigWithInterval } from '../channels/commonMarkerConfigWithInterval';
 /** An arbitrary rectangle (svelteplot's `Rect`); `interval` turns `x`/`y` into ranges. */
 export type RectMarkerConfig = {
     type: 'rect';
     interval?: number | string;
-    /** Pixels taken off each side of every rectangle; a bin's default `0.5` on each side leaves a hairline gap. */
-    insetLeft?: number;
-    insetRight?: number;
-    insetTop?: number;
-    insetBottom?: number;
-    styles?: AreaStyle;
-} & CommonMarkerConfigWithArea & CommonMarkerConfigWithColor & CommonMarkerConfigWithInterval;
+    styles?: PerRow<AreaStyle & InsetStyle>;
+} & CommonMarkerConfigWithArea & CommonMarkerConfigWithColor & CommonMarkerConfigWithInterval & CommonMarkerConfigWithLabel;

package/dist/types/markers/axis/rule.d.ts

@@ -1,5 +1,5 @@
 import type { AxisValue } from '../../layout/mapping';
-import type { StrokeStyle } from '../../plots/styling';
+import type { StrokeStyle, PerRow, InsetStyle } from '../../plots/styling';
 import type { CommonMarkerConfigWithInterval } from '../channels/commonMarkerConfigWithInterval';
 /**
  * A vertical or horizontal reference line, one line per row when `data` is given, or one per value
@@ -13,19 +13,5 @@ export type RuleMarkerConfig = {
      * a field key or a function of the row gives each row's own.
      */
     value: AxisValue | string | (AxisValue | string)[] | ((d: any) => AxisValue);
-    inset?: number;
-    insetTop?: number;
-    insetBottom?: number;
-    insetLeft?: number;
-    insetRight?: number;
-    /**
-     * A stroke color for each row - a field key or a function of the row - drawn
-     * as it is, not mapped through a color scale. Wins over `styles.stroke`.
-     */
-    stroke?: string | ((d: any) => string | undefined);
-    /** A stroke width for each row - a field key or a function of the row. Wins over `styles.strokeWidth`. */
-    strokeWidth?: string | ((d: any) => number);
-    /** A stroke opacity for each row - a field key or a function of the row - drawn as it is. Wins over `styles.strokeOpacity`. */
-    strokeOpacity?: string | ((d: any) => number);
-    styles?: StrokeStyle;
+    styles?: PerRow<StrokeStyle & InsetStyle>;
 } & CommonMarkerConfigWithInterval;

package/dist/types/markers/axis/tick.d.ts

@@ -1,8 +1,8 @@
-import type { StrokeStyle } from '../../plots/styling';
+import type { StrokeStyle, PerRow } from '../../plots/styling';
 import type { CommonMarkerConfigWithColor } from '../channels/commonMarkerConfigWithColor';
 /** A short tick per row along one axis (svelteplot's `TickX`/`TickY`). */
 export type TickMarkerConfig = {
     type: 'tick';
     tickLength?: number | ((d: any) => number);
-    styles?: StrokeStyle;
+    styles?: PerRow<StrokeStyle>;
 } & CommonMarkerConfigWithColor;

package/dist/types/markers/axis/voronoi.d.ts

@@ -1,7 +1,7 @@
-import type { AreaStyle } from '../../plots/styling';
+import type { AreaStyle, PerRow } from '../../plots/styling';
 import type { CommonMarkerConfigWithColor } from '../channels/commonMarkerConfigWithColor';
 /** One polygon per point, its Voronoi cell (svelteplot's `Voronoi`). */
 export type VoronoiMarkerConfig = {
     type: 'voronoi';
-    styles?: AreaStyle;
+    styles?: PerRow<AreaStyle>;
 } & CommonMarkerConfigWithColor;

package/dist/types/markers/axis/waffle.d.ts

@@ -1,4 +1,5 @@
-import type { AreaStyle } from '../../plots/styling';
+import type { AreaStyle, PerRow } from '../../plots/styling';
+import type { CommonMarkerConfigWithLabel } from '../channels/commonMarkerConfigWithLabel';
 import type { CommonMarkerConfigWithColor } from '../channels/commonMarkerConfigWithColor';
 import type { CommonMarkerConfigWithInterval } from '../channels/commonMarkerConfigWithInterval';
 /** A waffle chart bar: the value as a grid of unit squares (svelteplot's `WaffleX`/`WaffleY`). */
@@ -9,5 +10,5 @@ export type WaffleMarkerConfig = {
     multiple?: number;
     gap?: number;
     round?: boolean;
-    styles?: AreaStyle;
-} & CommonMarkerConfigWithColor & CommonMarkerConfigWithInterval;
+    styles?: PerRow<AreaStyle>;
+} & CommonMarkerConfigWithColor & CommonMarkerConfigWithInterval & CommonMarkerConfigWithLabel;

package/dist/types/markers/basic/dot.d.ts

@@ -1,4 +1,4 @@
-import type { DotStyle } from '../../plots/styling';
+import type { DotStyle, PerRow } from '../../plots/styling';
 import type { CommonMarkerConfigWithColor } from '../channels/commonMarkerConfigWithColor';
 import type { CommonMarkerConfigWithRadius } from '../channels/commonMarkerConfigWithRadius';
 import type { CommonMarkerConfigWithRowOffset } from '../channels/commonMarkerConfigWithRowOffset';
@@ -6,5 +6,5 @@ import type { CommonMarkerConfigWithSymbol } from '../channels/commonMarkerConfi
 /** A point mark (svelteplot's `Dot`), usable on any plot kind. */
 export type DotMarkerConfig = CommonMarkerConfigWithRowOffset<{
     type: 'dot';
-    styles?: DotStyle;
+    styles?: PerRow<DotStyle>;
 } & CommonMarkerConfigWithRadius & CommonMarkerConfigWithColor & CommonMarkerConfigWithSymbol>;