@pushwoosh/kit-charts 0.0.1

package/core/format/time.d.ts

@@ -0,0 +1,2 @@
+export declare function formatTime(pattern: string, timestamp: number): string;
+export declare function applyValueFormat(format: string, value: number | string): string;

package/core/format/time.js

@@ -0,0 +1,38 @@
+const MONTHS_SHORT = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+const MONTHS_LONG = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+const DAYS_SHORT = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+const DAYS_LONG = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+const pad = (value, length = 2) => String(value).padStart(length, '0');
+const TOKENS = {
+  a: date => DAYS_SHORT[date.getUTCDay()],
+  A: date => DAYS_LONG[date.getUTCDay()],
+  b: date => MONTHS_SHORT[date.getUTCMonth()],
+  B: date => MONTHS_LONG[date.getUTCMonth()],
+  d: date => pad(date.getUTCDate()),
+  e: date => String(date.getUTCDate()).padStart(2, ' '),
+  m: date => pad(date.getUTCMonth() + 1),
+  y: date => pad(date.getUTCFullYear() % 100),
+  Y: date => String(date.getUTCFullYear()),
+  H: date => pad(date.getUTCHours()),
+  M: date => pad(date.getUTCMinutes()),
+  S: date => pad(date.getUTCSeconds()),
+  L: date => pad(date.getUTCMilliseconds(), 3)
+};
+export function formatTime(pattern, timestamp) {
+  if (!Number.isFinite(timestamp)) {
+    return '';
+  }
+  const date = new Date(timestamp);
+  return pattern.replace(/%(.)/g, (match, token) => {
+    const format = TOKENS[token];
+    return format ? format(date) : match;
+  });
+}
+export function applyValueFormat(format, value) {
+  return format.replace(/\{value(?::([^}]*))?\}/g, (_match, pattern) => {
+    if (pattern && typeof value === 'number') {
+      return formatTime(pattern, value);
+    }
+    return String(value);
+  });
+}

package/core/geometry/path.d.ts

@@ -0,0 +1,19 @@
+import { type NormalizedPoint } from '../data/points';
+import { type RenderContext } from '../types/renderer';
+import { type ContinuousScale } from '../types/scale';
+export interface Projected {
+    point: NormalizedPoint;
+    px: number;
+    py: number;
+    baseY: number;
+}
+export type ProjectedSlot = Projected | null;
+export declare function projectX(scale: RenderContext['scales']['x'], point: NormalizedPoint): number;
+/** Value renderers need numbers on y; a categorical y axis is a misconfiguration. */
+export declare const continuousY: (ctx: RenderContext) => ContinuousScale | null;
+export declare function baselineY(ctx: RenderContext): number;
+export declare function projectSeries(ctx: RenderContext): ProjectedSlot[];
+export declare const drawable: (slots: readonly ProjectedSlot[]) => Projected[];
+export declare function runs(slots: readonly ProjectedSlot[]): Projected[][];
+export declare function toLinePath(slots: readonly ProjectedSlot[]): string;
+export declare function toAreaPath(slots: readonly ProjectedSlot[]): string;

package/core/geometry/path.js

@@ -0,0 +1,76 @@
+export function projectX(scale, point) {
+  if (scale.kind === 'band') {
+    const band = scale;
+    return band.map(point.band ?? String(point.name ?? point.x)) + band.bandwidth() / 2;
+  }
+  return scale.map(Number(point.x));
+}
+/** Value renderers need numbers on y; a categorical y axis is a misconfiguration. */
+export const continuousY = ctx => ctx.scales.y.kind === 'band' ? null : ctx.scales.y;
+export function baselineY(ctx) {
+  const scale = continuousY(ctx);
+  const top = ctx.plot.y;
+  const bottom = ctx.plot.y + ctx.plot.height;
+  const zero = scale ? scale.map(0) : NaN;
+  if (!Number.isFinite(zero)) {
+    return bottom;
+  }
+  return Math.min(bottom, Math.max(top, zero));
+}
+export function projectSeries(ctx) {
+  const base = baselineY(ctx);
+  const yScale = continuousY(ctx);
+  if (!yScale) {
+    return [];
+  }
+  return ctx.points.map((point, index) => {
+    var _ctx$stacked;
+    const stacked = (_ctx$stacked = ctx.stacked) === null || _ctx$stacked === void 0 ? void 0 : _ctx$stacked[index];
+    if (point.y === null || ctx.hiddenPoints.has(point.index) || ctx.stacked && !stacked) {
+      return null;
+    }
+    const px = projectX(ctx.scales.x, point);
+    const py = yScale.map(stacked ? stacked.to : point.y);
+    const baseY = stacked ? yScale.map(stacked.from) : base;
+    if (!Number.isFinite(px) || !Number.isFinite(py) || !Number.isFinite(baseY)) {
+      return null;
+    }
+    return {
+      point,
+      px,
+      py,
+      baseY
+    };
+  });
+}
+export const drawable = slots => slots.filter(slot => slot !== null);
+export function runs(slots) {
+  const result = [];
+  let current = [];
+  slots.forEach(slot => {
+    if (slot === null) {
+      if (current.length) {
+        result.push(current);
+        current = [];
+      }
+      return;
+    }
+    current.push(slot);
+  });
+  if (current.length) {
+    result.push(current);
+  }
+  return result;
+}
+const move = projected => `M${projected.px.toFixed(2)} ${projected.py.toFixed(2)}`;
+const lineTo = (x, y) => `L${x.toFixed(2)} ${y.toFixed(2)}`;
+export function toLinePath(slots) {
+  return runs(slots).map(run => run.map((projected, index) => index === 0 ? move(projected) : lineTo(projected.px, projected.py)).join('')).join('');
+}
+export function toAreaPath(slots) {
+  return runs(slots).map(run => {
+    const top = run.map((projected, index) => index === 0 ? move(projected) : lineTo(projected.px, projected.py)).join('');
+    const bottom = [...run].reverse().map(projected => lineTo(projected.px, projected.baseY)).join('');
+    return `${top}${bottom}Z`;
+  }).join('');
+}

package/core/layout/legend-layout.d.ts

@@ -0,0 +1,21 @@
+import { type Point, type Rect, type Size, type Spacing } from '../types/geometry';
+import { type LegendOptions } from '../types/options';
+import { type LegendItem } from '../types/renderer';
+export interface LegendMetrics {
+    /** Horizontal space the legend needs when it sits beside the plot, else 0. */
+    width: number;
+    /** Vertical space the legend needs when it sits above or below the plot, else 0. */
+    height: number;
+    rowHeight: number;
+    vertical: boolean;
+    beside: boolean;
+}
+export declare function measureLegend(items: readonly LegendItem[], options: LegendOptions | undefined): LegendMetrics;
+export interface LegendLayout {
+    metrics: LegendMetrics;
+    positions: Point[];
+}
+/**
+ * Symbol anchor for every item. `y` is the symbol centre line; labels sit on it.
+ */
+export declare function layoutLegend(items: readonly LegendItem[], options: LegendOptions | undefined, plot: Rect, size: Size, spacing: Spacing): LegendLayout;

package/core/layout/legend-layout.js

@@ -0,0 +1,103 @@
+import { measureText, textHeight } from './measure-text';
+import { LEGEND_BLOCK_GAP, LEGEND_ROW_GAP } from './metrics';
+const itemWidth = (item, options) => {
+  const symbolSize = (options === null || options === void 0 ? void 0 : options.symbolHeight) ?? 8;
+  return symbolSize + ((options === null || options === void 0 ? void 0 : options.symbolPadding) ?? 6) + measureText(item.label, options === null || options === void 0 ? void 0 : options.itemStyle);
+};
+export function measureLegend(items, options) {
+  const rowHeight = textHeight(options === null || options === void 0 ? void 0 : options.itemStyle);
+  const vertical = ((options === null || options === void 0 ? void 0 : options.layout) ?? 'horizontal') === 'vertical';
+  // A middle-aligned legend has nowhere to go above or below the plot, so it
+  // takes a column at the side instead — the same trade Highcharts makes.
+  const beside = ((options === null || options === void 0 ? void 0 : options.verticalAlign) ?? 'bottom') === 'middle';
+  if (!items.length || (options === null || options === void 0 ? void 0 : options.enabled) === false) {
+    return {
+      width: 0,
+      height: 0,
+      rowHeight,
+      vertical,
+      beside
+    };
+  }
+  const widest = items.reduce((max, item) => Math.max(max, itemWidth(item, options)), 0);
+  if (beside) {
+    return {
+      width: Math.ceil(widest) + LEGEND_BLOCK_GAP,
+      height: 0,
+      rowHeight,
+      vertical,
+      beside
+    };
+  }
+  const rows = vertical ? items.length : 1;
+  return {
+    width: 0,
+    height: rows * (rowHeight + LEGEND_ROW_GAP) + LEGEND_BLOCK_GAP - LEGEND_ROW_GAP,
+    rowHeight,
+    vertical,
+    beside
+  };
+}
+/**
+ * Symbol anchor for every item. `y` is the symbol centre line; labels sit on it.
+ */
+export function layoutLegend(items, options, plot, size, spacing) {
+  const metrics = measureLegend(items, options);
+  const distance = (options === null || options === void 0 ? void 0 : options.itemDistance) ?? 16;
+  const align = (options === null || options === void 0 ? void 0 : options.align) ?? 'left';
+  const shiftX = (options === null || options === void 0 ? void 0 : options.x) ?? 0;
+  const shiftY = (options === null || options === void 0 ? void 0 : options.y) ?? 0;
+  const widths = items.map(item => itemWidth(item, options));
+  const rowStep = metrics.rowHeight + LEGEND_ROW_GAP;
+  if (metrics.vertical || metrics.beside) {
+    const column = Math.max(...widths, 0);
+    const startX = (() => {
+      if (align === 'right') {
+        return size.width - column - LEGEND_BLOCK_GAP / 2;
+      }
+      if (align === 'center') {
+        return plot.x + (plot.width - column) / 2;
+      }
+      return plot.x;
+    })();
+    const block = items.length * rowStep - LEGEND_ROW_GAP;
+    const startY = (() => {
+      if (metrics.beside) {
+        return plot.y + (plot.height - block) / 2 + metrics.rowHeight / 2;
+      }
+      return ((options === null || options === void 0 ? void 0 : options.verticalAlign) ?? 'bottom') === 'top' ? plot.y - metrics.height + metrics.rowHeight : plot.y + plot.height + metrics.rowHeight + LEGEND_ROW_GAP;
+    })();
+    return {
+      metrics,
+      positions: items.map((_item, index) => ({
+        x: startX + shiftX,
+        y: startY + index * rowStep + shiftY
+      }))
+    };
+  }
+  const total = widths.reduce((sum, width) => sum + width, 0) + distance * Math.max(0, items.length - 1);
+  const startX = (() => {
+    if (align === 'center') {
+      return plot.x + (plot.width - total) / 2;
+    }
+    if (align === 'right') {
+      return plot.x + plot.width - total;
+    }
+    return plot.x;
+  })();
+  // Sit on the last row inside the chart's bottom spacing, not on the canvas
+  // edge: flush with the edge, the row's own descenders and its focus ring are
+  // cut off by the viewport.
+  const y = ((options === null || options === void 0 ? void 0 : options.verticalAlign) ?? 'bottom') === 'top' ? plot.y - metrics.height + metrics.rowHeight : size.height - spacing[2] - metrics.rowHeight / 2;
+  const offsets = widths.reduce((acc, _width, index) => {
+    acc.push(index === 0 ? startX : acc[index - 1] + widths[index - 1] + distance);
+    return acc;
+  }, []);
+  return {
+    metrics,
+    positions: offsets.map(x => ({
+      x: x + shiftX,
+      y: y + shiftY
+    }))
+  };
+}

package/core/layout/measure-text.d.ts

@@ -0,0 +1,9 @@
+import { type TextStyle } from '../types/options';
+export declare const DEFAULT_FONT_SIZE: string;
+export declare const DEFAULT_FONT_FAMILY: string;
+export declare const DEFAULT_TITLE_FONT_SIZE: string;
+export declare const DEFAULT_SUBTITLE_FONT_SIZE: string;
+export declare const toCssFont: (style?: TextStyle) => string;
+export declare function measureText(text: string, style?: TextStyle): number;
+export declare const textHeight: (style?: TextStyle) => number;
+export declare function clearTextMeasurementCache(): void;

package/core/layout/measure-text.js

@@ -0,0 +1,57 @@
+import { FontFamily, FontSize } from '@pushwoosh/kit-constants';
+const cache = new Map();
+let context;
+const getContext = () => {
+  if (context !== undefined) {
+    return context;
+  }
+  try {
+    context = document.createElement('canvas').getContext('2d') ?? null;
+  } catch {
+    context = null;
+  }
+  return context;
+};
+export const DEFAULT_FONT_SIZE = FontSize.SMALL;
+export const DEFAULT_FONT_FAMILY = FontFamily.MAIN;
+export const DEFAULT_TITLE_FONT_SIZE = FontSize.HEADING2;
+export const DEFAULT_SUBTITLE_FONT_SIZE = FontSize.SMALL;
+export const toCssFont = style => {
+  const weight = (style === null || style === void 0 ? void 0 : style.fontWeight) ?? 'normal';
+  const size = (style === null || style === void 0 ? void 0 : style.fontSize) ?? DEFAULT_FONT_SIZE;
+  const family = (style === null || style === void 0 ? void 0 : style.fontFamily) ?? DEFAULT_FONT_FAMILY;
+  return `${weight} ${size} ${family}`;
+};
+const parseFontSize = font => {
+  const match = /(\d+(?:\.\d+)?)px/.exec(font);
+  return match ? Number(match[1]) : 12;
+};
+export function measureText(text, style) {
+  if (!text) {
+    return 0;
+  }
+  const font = toCssFont(style);
+  const key = `${font}\u0000${text}`;
+  const cached = cache.get(key);
+  if (cached !== undefined) {
+    return cached;
+  }
+  const ctx = getContext();
+  let width;
+  if (ctx) {
+    ctx.font = font;
+    width = ctx.measureText(text).width;
+  } else {
+    width = 0;
+  }
+  if (!width) {
+    width = text.length * parseFontSize(font) * 0.55;
+  }
+  cache.set(key, width);
+  return width;
+}
+export const textHeight = style => Math.ceil(parseFontSize(toCssFont(style)) * 1.2);
+export function clearTextMeasurementCache() {
+  cache.clear();
+  context = undefined;
+}

package/core/layout/metrics.d.ts

@@ -0,0 +1,63 @@
+/**
+ * Every distance the chart chrome uses. They live together because a chart reads
+ * as sloppy the moment each component invents its own gap: the numbers below are
+ * one 2/4/6/8/12/16 scale, and changing one here changes it everywhere it means
+ * the same thing.
+ */
+/** Half the height of a text line — centres a label on the tick it belongs to. */
+export declare const TEXT_BASELINE_SHIFT = 4;
+/** Tick label to the plot edge, on either axis. */
+export declare const AXIS_LABEL_GAP = 8;
+/** Baseline of an x axis label below the axis line, tick length aside. */
+export declare const X_AXIS_LABEL_DROP = 14;
+/** Air added to the tick label column when measuring the y axis gutter. */
+export declare const AXIS_GUTTER_PADDING = 10;
+/** A rotated axis title to the column of tick labels it stands beside. */
+export declare const AXIS_TITLE_GAP = 6;
+/** An x axis title below its labels. */
+export declare const X_AXIS_TITLE_GAP = 16;
+/** A value label to the shape it labels. */
+export declare const VALUE_LABEL_GAP = 6;
+/** A value label to the chart edge — never let one sit on the border. */
+export declare const CHART_EDGE_GAP = 4;
+/** Air above the plot for value labels, on top of the label's own height. */
+export declare const VALUE_LABEL_HEADROOM = 6;
+/** How far a point marker reaches past its point at the default radius. */
+export declare const MARKER_REACH = 5;
+/** Between legend rows. */
+export declare const LEGEND_ROW_GAP = 4;
+/** Between the legend block and the plot it belongs to. */
+export declare const LEGEND_BLOCK_GAP = 12;
+/** The hint badge beside a title: its side, corner radius and gap after the text. */
+export declare const HINT_ICON_SIZE = 16;
+export declare const HINT_ICON_RADIUS = 4;
+export declare const HINT_ICON_GAP = 6;
+/** A wrapping explanation gets more room than a value readout. */
+export declare const HINT_PADDING = 12;
+/** Between the title block and the plot below it. */
+export declare const TITLE_BLOCK_GAP = 10;
+/** Tooltip beak: both its height and half its width. */
+export declare const TOOLTIP_TAIL = 7;
+/** Tooltip to the cursor, when it follows the pointer instead of a point. */
+export declare const TOOLTIP_CURSOR_OFFSET = 12;
+/** Keep a floating element this far inside the viewport. */
+export declare const VIEWPORT_MARGIN = 8;
+/** Tooltip inner padding. */
+export declare const TOOLTIP_PADDING = 8;
+/** Tooltip corner radius. */
+export declare const TOOLTIP_RADIUS = 6;
+/** Distance from a plot band or plot line to its own label. */
+export declare const PLOT_LABEL_GAP = 6;
+/**
+ * Puts a stroke where the device can draw it in one row of pixels: half a stroke
+ * either side of the position has to land on a pixel boundary, so an odd stroke
+ * sits on a half pixel and an even one on a whole. A 1px line centred on a whole
+ * pixel is otherwise split between the two rows either side of it and reads as
+ * two grey rows rather than one dark one.
+ *
+ * Deliberately the same arithmetic as Highcharts' own `crisp` — nearest offset
+ * rather than always the one above, and a fractional stroke handled by its own
+ * remainder. Neither library looks at `devicePixelRatio`: the snapping is in css
+ * pixels, so it is exact at whole ratios and merely consistent at the rest.
+ */
+export declare const crisp: (position: number, strokeWidth?: number) => number;

package/core/layout/metrics.js

@@ -0,0 +1,66 @@
+/**
+ * Every distance the chart chrome uses. They live together because a chart reads
+ * as sloppy the moment each component invents its own gap: the numbers below are
+ * one 2/4/6/8/12/16 scale, and changing one here changes it everywhere it means
+ * the same thing.
+ */
+/** Half the height of a text line — centres a label on the tick it belongs to. */
+export const TEXT_BASELINE_SHIFT = 4;
+/** Tick label to the plot edge, on either axis. */
+export const AXIS_LABEL_GAP = 8;
+/** Baseline of an x axis label below the axis line, tick length aside. */
+export const X_AXIS_LABEL_DROP = 14;
+/** Air added to the tick label column when measuring the y axis gutter. */
+export const AXIS_GUTTER_PADDING = 10;
+/** A rotated axis title to the column of tick labels it stands beside. */
+export const AXIS_TITLE_GAP = 6;
+/** An x axis title below its labels. */
+export const X_AXIS_TITLE_GAP = 16;
+/** A value label to the shape it labels. */
+export const VALUE_LABEL_GAP = 6;
+/** A value label to the chart edge — never let one sit on the border. */
+export const CHART_EDGE_GAP = 4;
+/** Air above the plot for value labels, on top of the label's own height. */
+export const VALUE_LABEL_HEADROOM = 6;
+/** How far a point marker reaches past its point at the default radius. */
+export const MARKER_REACH = 5;
+/** Between legend rows. */
+export const LEGEND_ROW_GAP = 4;
+/** Between the legend block and the plot it belongs to. */
+export const LEGEND_BLOCK_GAP = 12;
+/** The hint badge beside a title: its side, corner radius and gap after the text. */
+export const HINT_ICON_SIZE = 16;
+export const HINT_ICON_RADIUS = 4;
+export const HINT_ICON_GAP = 6;
+/** A wrapping explanation gets more room than a value readout. */
+export const HINT_PADDING = 12;
+/** Between the title block and the plot below it. */
+export const TITLE_BLOCK_GAP = 10;
+/** Tooltip beak: both its height and half its width. */
+export const TOOLTIP_TAIL = 7;
+/** Tooltip to the cursor, when it follows the pointer instead of a point. */
+export const TOOLTIP_CURSOR_OFFSET = 12;
+/** Keep a floating element this far inside the viewport. */
+export const VIEWPORT_MARGIN = 8;
+/** Tooltip inner padding. */
+export const TOOLTIP_PADDING = 8;
+/** Tooltip corner radius. */
+export const TOOLTIP_RADIUS = 6;
+/** Distance from a plot band or plot line to its own label. */
+export const PLOT_LABEL_GAP = 6;
+/**
+ * Puts a stroke where the device can draw it in one row of pixels: half a stroke
+ * either side of the position has to land on a pixel boundary, so an odd stroke
+ * sits on a half pixel and an even one on a whole. A 1px line centred on a whole
+ * pixel is otherwise split between the two rows either side of it and reads as
+ * two grey rows rather than one dark one.
+ *
+ * Deliberately the same arithmetic as Highcharts' own `crisp` — nearest offset
+ * rather than always the one above, and a fractional stroke handled by its own
+ * remainder. Neither library looks at `devicePixelRatio`: the snapping is in css
+ * pixels, so it is exact at whole ratios and merely consistent at the rest.
+ */
+export const crisp = (position, strokeWidth = 1) => {
+  const offset = strokeWidth % 2 / 2;
+  return Math.round(position - offset) + offset;
+};

package/core/layout/point-width.d.ts

@@ -0,0 +1,11 @@
+import { type StackInput } from '../stack/stack';
+import { type SlotGeometry } from '../types/geometry';
+import { type AnyScale } from '../types/scale';
+export declare function stepOf(scale: AnyScale, series: readonly StackInput[], plotWidth: number): number;
+export interface SlotInput {
+    series: readonly StackInput[];
+    scale: AnyScale;
+    plotWidth: number;
+    stacks: ReadonlyMap<number, unknown>;
+}
+export declare function computeSlots({ series, scale, plotWidth, stacks, }: SlotInput): Map<number, SlotGeometry>;

package/core/layout/point-width.js

@@ -0,0 +1,86 @@
+const DEFAULT_GROUP_PADDING = 0.2;
+const DEFAULT_POINT_PADDING = 0.1;
+const MIN_WIDTH = 1;
+export function stepOf(scale, series, plotWidth) {
+  if (scale.kind === 'band') {
+    return scale.step();
+  }
+  if (scale.kind === 'color') {
+    return plotWidth / 2;
+  }
+  const continuous = scale;
+  const positions = new Set();
+  series.forEach(({
+    points
+  }) => {
+    points.forEach(point => {
+      if (typeof point.x === 'number' && Number.isFinite(point.x)) {
+        positions.add(point.x);
+      }
+    });
+  });
+  if (positions.size < 2) {
+    return plotWidth / 2;
+  }
+  const sorted = [...positions].sort((left, right) => left - right);
+  let smallest = Infinity;
+  for (let i = 1; i < sorted.length; i += 1) {
+    smallest = Math.min(smallest, sorted[i] - sorted[i - 1]);
+  }
+  const step = Math.abs(continuous.map(sorted[0] + smallest) - continuous.map(sorted[0]));
+  return Number.isFinite(step) && step > 0 ? step : plotWidth / 2;
+}
+function slotIndices(series, stacks) {
+  const indices = new Map();
+  const stackSlot = new Map();
+  let next = 0;
+  series.forEach(entry => {
+    if (!stacks.has(entry.index)) {
+      indices.set(entry.index, next);
+      next += 1;
+      return;
+    }
+    const key = `${entry.options.yAxis ?? 0}:${entry.options.stacking ?? ''}`;
+    const existing = stackSlot.get(key);
+    if (existing === undefined) {
+      stackSlot.set(key, next);
+      indices.set(entry.index, next);
+      next += 1;
+    } else {
+      indices.set(entry.index, existing);
+    }
+  });
+  return {
+    indices,
+    count: Math.max(1, next)
+  };
+}
+export function computeSlots({
+  series,
+  scale,
+  plotWidth,
+  stacks
+}) {
+  const result = new Map();
+  if (!series.length) {
+    return result;
+  }
+  const step = stepOf(scale, series, plotWidth);
+  const {
+    indices,
+    count
+  } = slotIndices(series, stacks);
+  series.forEach(entry => {
+    const groupPadding = entry.options.groupPadding ?? DEFAULT_GROUP_PADDING;
+    const pointPadding = entry.options.pointPadding ?? DEFAULT_POINT_PADDING;
+    const groupWidth = step * (1 - 2 * groupPadding);
+    const slotWidth = groupWidth / count;
+    const index = indices.get(entry.index) ?? 0;
+    result.set(entry.index, {
+      width: Math.max(MIN_WIDTH, slotWidth * (1 - 2 * pointPadding)),
+      offset: slotWidth * (index + 0.5) - groupWidth / 2,
+      step
+    });
+  });
+  return result;
+}

package/core/layout/title-layout.d.ts

@@ -0,0 +1,30 @@
+import { type Size, type Spacing } from '../types/geometry';
+import { type ChartOptions, type TextStyle } from '../types/options';
+declare const ANCHOR: {
+    readonly left: "start";
+    readonly center: "middle";
+    readonly right: "end";
+};
+export type TitleAnchor = typeof ANCHOR[keyof typeof ANCHOR];
+export interface TitleEntry {
+    key: 'title' | 'subtitle' | 'caption';
+    text: string;
+    x: number;
+    y: number;
+    anchor: TitleAnchor;
+    style: TextStyle | undefined;
+    fontSize: string;
+    /** Set when the title carries a hint: centre of the info icon after the text. */
+    hint?: {
+        text: string;
+        x: number;
+        y: number;
+    };
+}
+export interface TitleBlock {
+    /** Vertical space the titles take above the plot, gap included. */
+    height: number;
+    entries: TitleEntry[];
+}
+export declare function layoutTitles(options: ChartOptions, size: Size, spacing: Spacing): TitleBlock;
+export {};