@voila.dev/chart 4.0.0

package/dist/core/guides/axes.js

@@ -0,0 +1,204 @@
+const TICK_GAP = 8;
+const TITLE_GAP = 6;
+const LABEL_SPACING = 8;
+const EDGE = 8;
+const MAX_CATEGORY_SHARE = 0.35;
+const ELLIPSIS = "\u2026";
+function axisTicks(scale, options) {
+  const ticks = options?.ticks;
+  if (Array.isArray(ticks)) {
+    return ticks;
+  }
+  return scale.ticks(typeof ticks === "number" ? ticks : void 0);
+}
+function tickLabel(scale, options, value) {
+  return options?.tickFormat?.(value) ?? scale.format(value);
+}
+function truncate(text, maxWidth, fontSize, measureText) {
+  if (measureText(text, fontSize) <= maxWidth) {
+    return text;
+  }
+  let kept = text;
+  while (kept.length > 1 && measureText(kept + ELLIPSIS, fontSize) > maxWidth) {
+    kept = kept.slice(0, -1);
+  }
+  return kept + ELLIPSIS;
+}
+function hidden(options) {
+  return options?.axis === false;
+}
+function leftMargin(input, chartWidth) {
+  const { scale, options, title, theme, measureText } = input;
+  if (hidden(options)) {
+    return EDGE;
+  }
+  const discrete = scale.kind === "band" || scale.kind === "point";
+  const widest = Math.max(
+    0,
+    ...axisTicks(scale, options).map(
+      (tick) => measureText(tickLabel(scale, options, tick), theme.fontSize)
+    )
+  );
+  const labels = discrete ? Math.min(widest, chartWidth * MAX_CATEGORY_SHARE) : widest;
+  return EDGE + labels + TICK_GAP + (title ? theme.fontSize + TITLE_GAP : 0);
+}
+function bottomMargin(input) {
+  const { options, title, theme } = input;
+  if (hidden(options)) {
+    return EDGE;
+  }
+  return TICK_GAP + theme.fontSize + EDGE / 2 + (title ? theme.fontSize + TITLE_GAP : 0);
+}
+function rightMargin(input) {
+  const { scale, options, theme, measureText } = input;
+  if (hidden(options) || scale.kind === "band" || scale.kind === "point") {
+    return EDGE;
+  }
+  const ticks = axisTicks(scale, options);
+  const last = ticks[ticks.length - 1];
+  if (last === void 0) {
+    return EDGE;
+  }
+  const half = measureText(tickLabel(scale, options, last), theme.fontSize) / 2;
+  const overhang = half - (scale.range[1] - scale.map(last));
+  return Math.max(EDGE, overhang + 2);
+}
+function thinned(ticks, widths, positions) {
+  if (ticks.length < 2) {
+    return ticks.map((_tick, index) => index);
+  }
+  const spacing = Math.abs(positions[1] - positions[0]) || 1;
+  const widest = Math.max(...widths);
+  const step = Math.max(1, Math.ceil((widest + LABEL_SPACING) / spacing));
+  return ticks.map((_tick, index) => index).filter((index) => index % step === 0);
+}
+function bottomAxis(input, plot, grid) {
+  const { scale, options, title, theme, measureText } = input;
+  const ticks = axisTicks(scale, options);
+  const positions = ticks.map((tick) => scale.center(tick));
+  const gridNodes = grid ? ticks.map((tick, index) => ({
+    kind: "line",
+    key: `grid-x:${tickLabel(scale, options, tick)}`,
+    role: "grid",
+    x1: positions[index],
+    y1: plot.y,
+    x2: positions[index],
+    y2: plot.y + plot.height,
+    paint: { stroke: theme.grid, strokeWidth: 1 }
+  })) : [];
+  if (hidden(options)) {
+    return { grid: gridNodes, labels: [] };
+  }
+  const texts = ticks.map((tick) => tickLabel(scale, options, tick));
+  const widths = texts.map((text) => measureText(text, theme.fontSize));
+  const baseline = plot.y + plot.height + TICK_GAP;
+  const labels = thinned(ticks, widths, positions).map(
+    (index) => ({
+      kind: "text",
+      key: `tick-x:${texts[index]}`,
+      role: "axis",
+      x: positions[index],
+      y: baseline,
+      text: texts[index],
+      paint: {
+        fill: theme.muted,
+        fontSize: theme.fontSize,
+        textAnchor: "middle",
+        baseline: "top"
+      }
+    })
+  );
+  if (title) {
+    labels.push({
+      kind: "text",
+      key: "title-x",
+      role: "axis-title",
+      x: plot.x + plot.width / 2,
+      y: baseline + theme.fontSize + TITLE_GAP,
+      text: title,
+      paint: {
+        fill: theme.muted,
+        fontSize: theme.fontSize,
+        fontWeight: 500,
+        textAnchor: "middle",
+        baseline: "top"
+      }
+    });
+  }
+  return { grid: gridNodes, labels };
+}
+function leftAxis(input, plot, grid, chartWidth) {
+  const { scale, options, title, theme, measureText } = input;
+  const ticks = axisTicks(scale, options);
+  const positions = ticks.map((tick) => scale.center(tick));
+  const gridNodes = grid ? ticks.map((tick, index) => ({
+    kind: "line",
+    key: `grid-y:${tickLabel(scale, options, tick)}`,
+    role: "grid",
+    x1: plot.x,
+    y1: positions[index],
+    x2: plot.x + plot.width,
+    y2: positions[index],
+    paint: { stroke: theme.grid, strokeWidth: 1 }
+  })) : [];
+  if (hidden(options)) {
+    return { grid: gridNodes, labels: [] };
+  }
+  const discrete = scale.kind === "band" || scale.kind === "point";
+  const maxWidth = discrete ? chartWidth * MAX_CATEGORY_SHARE : Number.POSITIVE_INFINITY;
+  const texts = ticks.map(
+    (tick) => truncate(
+      tickLabel(scale, options, tick),
+      maxWidth,
+      theme.fontSize,
+      measureText
+    )
+  );
+  const heights = texts.map(() => theme.fontSize);
+  const labels = thinned(ticks, heights, positions).map(
+    (index) => ({
+      kind: "text",
+      key: `tick-y:${texts[index]}`,
+      role: "axis",
+      x: plot.x - TICK_GAP,
+      y: positions[index],
+      text: texts[index],
+      paint: {
+        fill: theme.muted,
+        fontSize: theme.fontSize,
+        textAnchor: "end",
+        baseline: "middle"
+      }
+    })
+  );
+  if (title) {
+    labels.push({
+      kind: "text",
+      key: "title-y",
+      role: "axis-title",
+      x: EDGE / 2 + theme.fontSize / 2,
+      y: plot.y + plot.height / 2,
+      text: title,
+      rotate: -90,
+      paint: {
+        fill: theme.muted,
+        fontSize: theme.fontSize,
+        fontWeight: 500,
+        textAnchor: "middle",
+        baseline: "middle"
+      }
+    });
+  }
+  return { grid: gridNodes, labels };
+}
+export {
+  axisTicks,
+  bottomAxis,
+  bottomMargin,
+  leftAxis,
+  leftMargin,
+  rightMargin,
+  tickLabel,
+  truncate
+};
+//# sourceMappingURL=axes.js.map

package/dist/core/guides/axes.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/core/guides/axes.ts"],
+  "sourcesContent": ["import type { ChartAxisOptions } from \"#/core/define-chart.ts\";\nimport type {\n\tChartPositionScale,\n\tChartRect,\n\tChartTextMeasurer,\n\tChartTheme,\n\tChartValue,\n\tSceneNode,\n} from \"#/core/types.ts\";\n\n/**\n * The axes as scene nodes: grid lines behind the marks, tick labels and\n * titles in front. They are measured before the plot exists, so the margins\n * fit the widest label instead of a guessed constant.\n */\n\nconst TICK_GAP = 8;\nconst TITLE_GAP = 6;\nconst LABEL_SPACING = 8;\nconst EDGE = 8;\n/** A category label on a horizontal bar chart never takes more of the width than this. */\nconst MAX_CATEGORY_SHARE = 0.35;\nconst ELLIPSIS = \"\u2026\";\n\nexport interface AxisMeasureInput {\n\treadonly scale: ChartPositionScale;\n\treadonly options: ChartAxisOptions | undefined;\n\treadonly title: string | undefined;\n\treadonly theme: ChartTheme;\n\treadonly measureText: ChartTextMeasurer;\n}\n\nexport function axisTicks(\n\tscale: ChartPositionScale,\n\toptions: ChartAxisOptions | undefined,\n): ReadonlyArray<ChartValue> {\n\tconst ticks = options?.ticks;\n\tif (Array.isArray(ticks)) {\n\t\treturn ticks;\n\t}\n\treturn scale.ticks(typeof ticks === \"number\" ? ticks : undefined);\n}\n\nexport function tickLabel(\n\tscale: ChartPositionScale,\n\toptions: ChartAxisOptions | undefined,\n\tvalue: ChartValue,\n): string {\n\treturn options?.tickFormat?.(value) ?? scale.format(value);\n}\n\n/** Cuts a label down to `maxWidth`, ending on an ellipsis. */\nexport function truncate(\n\ttext: string,\n\tmaxWidth: number,\n\tfontSize: number,\n\tmeasureText: ChartTextMeasurer,\n): string {\n\tif (measureText(text, fontSize) <= maxWidth) {\n\t\treturn text;\n\t}\n\tlet kept = text;\n\twhile (kept.length > 1 && measureText(kept + ELLIPSIS, fontSize) > maxWidth) {\n\t\tkept = kept.slice(0, -1);\n\t}\n\treturn kept + ELLIPSIS;\n}\n\nfunction hidden(options: ChartAxisOptions | undefined): boolean {\n\treturn options?.axis === false;\n}\n\n/** Room the left axis needs: its widest tick label, the gap, and the title. */\nexport function leftMargin(\n\tinput: AxisMeasureInput,\n\tchartWidth: number,\n): number {\n\tconst { scale, options, title, theme, measureText } = input;\n\tif (hidden(options)) {\n\t\treturn EDGE;\n\t}\n\tconst discrete = scale.kind === \"band\" || scale.kind === \"point\";\n\tconst widest = Math.max(\n\t\t0,\n\t\t...axisTicks(scale, options).map((tick) =>\n\t\t\tmeasureText(tickLabel(scale, options, tick), theme.fontSize),\n\t\t),\n\t);\n\tconst labels = discrete\n\t\t? Math.min(widest, chartWidth * MAX_CATEGORY_SHARE)\n\t\t: widest;\n\treturn EDGE + labels + TICK_GAP + (title ? theme.fontSize + TITLE_GAP : 0);\n}\n\nexport function bottomMargin(input: AxisMeasureInput): number {\n\tconst { options, title, theme } = input;\n\tif (hidden(options)) {\n\t\treturn EDGE;\n\t}\n\treturn (\n\t\tTICK_GAP +\n\t\ttheme.fontSize +\n\t\tEDGE / 2 +\n\t\t(title ? theme.fontSize + TITLE_GAP : 0)\n\t);\n}\n\n/** Half the last x label hangs past the plot's right edge; leave it room. */\nexport function rightMargin(input: AxisMeasureInput): number {\n\tconst { scale, options, theme, measureText } = input;\n\tif (hidden(options) || scale.kind === \"band\" || scale.kind === \"point\") {\n\t\treturn EDGE;\n\t}\n\tconst ticks = axisTicks(scale, options);\n\tconst last = ticks[ticks.length - 1];\n\tif (last === undefined) {\n\t\treturn EDGE;\n\t}\n\tconst half = measureText(tickLabel(scale, options, last), theme.fontSize) / 2;\n\tconst overhang = half - (scale.range[1] - scale.map(last));\n\treturn Math.max(EDGE, overhang + 2);\n}\n\nexport interface AxisNodes {\n\treadonly grid: ReadonlyArray<SceneNode>;\n\treadonly labels: ReadonlyArray<SceneNode>;\n}\n\n/**\n * Every `step`-th label, so neighbours never overlap. The step is the same\n * across the axis: thinning by skipping single labels reads as noise.\n */\nfunction thinned(\n\tticks: ReadonlyArray<ChartValue>,\n\twidths: ReadonlyArray<number>,\n\tpositions: ReadonlyArray<number>,\n): ReadonlyArray<number> {\n\tif (ticks.length < 2) {\n\t\treturn ticks.map((_tick, index) => index);\n\t}\n\tconst spacing = Math.abs(positions[1] - positions[0]) || 1;\n\tconst widest = Math.max(...widths);\n\tconst step = Math.max(1, Math.ceil((widest + LABEL_SPACING) / spacing));\n\treturn ticks\n\t\t.map((_tick, index) => index)\n\t\t.filter((index) => index % step === 0);\n}\n\nexport function bottomAxis(\n\tinput: AxisMeasureInput,\n\tplot: ChartRect,\n\tgrid: boolean,\n): AxisNodes {\n\tconst { scale, options, title, theme, measureText } = input;\n\tconst ticks = axisTicks(scale, options);\n\tconst positions = ticks.map((tick) => scale.center(tick));\n\tconst gridNodes: SceneNode[] = grid\n\t\t? ticks.map((tick, index) => ({\n\t\t\t\tkind: \"line\",\n\t\t\t\tkey: `grid-x:${tickLabel(scale, options, tick)}`,\n\t\t\t\trole: \"grid\",\n\t\t\t\tx1: positions[index],\n\t\t\t\ty1: plot.y,\n\t\t\t\tx2: positions[index],\n\t\t\t\ty2: plot.y + plot.height,\n\t\t\t\tpaint: { stroke: theme.grid, strokeWidth: 1 },\n\t\t\t}))\n\t\t: [];\n\tif (hidden(options)) {\n\t\treturn { grid: gridNodes, labels: [] };\n\t}\n\tconst texts = ticks.map((tick) => tickLabel(scale, options, tick));\n\tconst widths = texts.map((text) => measureText(text, theme.fontSize));\n\tconst baseline = plot.y + plot.height + TICK_GAP;\n\tconst labels: SceneNode[] = thinned(ticks, widths, positions).map(\n\t\t(index) => ({\n\t\t\tkind: \"text\",\n\t\t\tkey: `tick-x:${texts[index]}`,\n\t\t\trole: \"axis\",\n\t\t\tx: positions[index],\n\t\t\ty: baseline,\n\t\t\ttext: texts[index],\n\t\t\tpaint: {\n\t\t\t\tfill: theme.muted,\n\t\t\t\tfontSize: theme.fontSize,\n\t\t\t\ttextAnchor: \"middle\",\n\t\t\t\tbaseline: \"top\",\n\t\t\t},\n\t\t}),\n\t);\n\tif (title) {\n\t\tlabels.push({\n\t\t\tkind: \"text\",\n\t\t\tkey: \"title-x\",\n\t\t\trole: \"axis-title\",\n\t\t\tx: plot.x + plot.width / 2,\n\t\t\ty: baseline + theme.fontSize + TITLE_GAP,\n\t\t\ttext: title,\n\t\t\tpaint: {\n\t\t\t\tfill: theme.muted,\n\t\t\t\tfontSize: theme.fontSize,\n\t\t\t\tfontWeight: 500,\n\t\t\t\ttextAnchor: \"middle\",\n\t\t\t\tbaseline: \"top\",\n\t\t\t},\n\t\t});\n\t}\n\treturn { grid: gridNodes, labels };\n}\n\nexport function leftAxis(\n\tinput: AxisMeasureInput,\n\tplot: ChartRect,\n\tgrid: boolean,\n\tchartWidth: number,\n): AxisNodes {\n\tconst { scale, options, title, theme, measureText } = input;\n\tconst ticks = axisTicks(scale, options);\n\tconst positions = ticks.map((tick) => scale.center(tick));\n\tconst gridNodes: SceneNode[] = grid\n\t\t? ticks.map((tick, index) => ({\n\t\t\t\tkind: \"line\",\n\t\t\t\tkey: `grid-y:${tickLabel(scale, options, tick)}`,\n\t\t\t\trole: \"grid\",\n\t\t\t\tx1: plot.x,\n\t\t\t\ty1: positions[index],\n\t\t\t\tx2: plot.x + plot.width,\n\t\t\t\ty2: positions[index],\n\t\t\t\tpaint: { stroke: theme.grid, strokeWidth: 1 },\n\t\t\t}))\n\t\t: [];\n\tif (hidden(options)) {\n\t\treturn { grid: gridNodes, labels: [] };\n\t}\n\tconst discrete = scale.kind === \"band\" || scale.kind === \"point\";\n\tconst maxWidth = discrete\n\t\t? chartWidth * MAX_CATEGORY_SHARE\n\t\t: Number.POSITIVE_INFINITY;\n\tconst texts = ticks.map((tick) =>\n\t\ttruncate(\n\t\t\ttickLabel(scale, options, tick),\n\t\t\tmaxWidth,\n\t\t\ttheme.fontSize,\n\t\t\tmeasureText,\n\t\t),\n\t);\n\tconst heights = texts.map(() => theme.fontSize);\n\tconst labels: SceneNode[] = thinned(ticks, heights, positions).map(\n\t\t(index) => ({\n\t\t\tkind: \"text\",\n\t\t\tkey: `tick-y:${texts[index]}`,\n\t\t\trole: \"axis\",\n\t\t\tx: plot.x - TICK_GAP,\n\t\t\ty: positions[index],\n\t\t\ttext: texts[index],\n\t\t\tpaint: {\n\t\t\t\tfill: theme.muted,\n\t\t\t\tfontSize: theme.fontSize,\n\t\t\t\ttextAnchor: \"end\",\n\t\t\t\tbaseline: \"middle\",\n\t\t\t},\n\t\t}),\n\t);\n\tif (title) {\n\t\tlabels.push({\n\t\t\tkind: \"text\",\n\t\t\tkey: \"title-y\",\n\t\t\trole: \"axis-title\",\n\t\t\tx: EDGE / 2 + theme.fontSize / 2,\n\t\t\ty: plot.y + plot.height / 2,\n\t\t\ttext: title,\n\t\t\trotate: -90,\n\t\t\tpaint: {\n\t\t\t\tfill: theme.muted,\n\t\t\t\tfontSize: theme.fontSize,\n\t\t\t\tfontWeight: 500,\n\t\t\t\ttextAnchor: \"middle\",\n\t\t\t\tbaseline: \"middle\",\n\t\t\t},\n\t\t});\n\t}\n\treturn { grid: gridNodes, labels };\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/core/marks/area.d.ts

@@ -0,0 +1,23 @@
+import { type ChartMarkOptions } from "./shared.js";
+import type { ChartAccessor, ChartCurve, ChartMark, ChartValue } from "../types.js";
+export interface AreaOptions<TDatum> extends ChartMarkOptions<TDatum> {
+    readonly x?: ChartAccessor<TDatum, ChartValue>;
+    readonly y?: ChartAccessor<TDatum, ChartValue>;
+    /** Explicit lower and upper edges: a confidence band, a min-max range. */
+    readonly from?: ChartAccessor<TDatum, ChartValue>;
+    readonly to?: ChartAccessor<TDatum, ChartValue>;
+    readonly fill?: string;
+    readonly fillOpacity?: number;
+    /** Draw the upper edge as a line in the series colour. */
+    readonly line?: boolean;
+    readonly strokeWidth?: number;
+    readonly strokeDasharray?: string;
+    readonly curve?: ChartCurve;
+    /** Series stack on one another. On by default when there is a color channel. */
+    readonly stack?: boolean;
+}
+/** A filled band under a series, over x positions. */
+export declare function areaY<TDatum>(data: ReadonlyArray<TDatum>, options?: AreaOptions<TDatum>): ChartMark;
+/** A filled band along x, over y positions. */
+export declare function areaX<TDatum>(data: ReadonlyArray<TDatum>, options?: AreaOptions<TDatum>): ChartMark;
+//# sourceMappingURL=area.d.ts.map

package/dist/core/marks/area.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"area.d.ts","sourceRoot":"","sources":["../../../src/core/marks/area.ts"],"names":[],"mappings":"AAMA,OAAO,EACN,KAAK,gBAAgB,EAMrB,MAAM,wBAAwB,CAAC;AAIhC,OAAO,KAAK,EACX,aAAa,EACb,UAAU,EACV,SAAS,EAET,UAAU,EAEV,MAAM,iBAAiB,CAAC;AAEzB,MAAM,WAAW,WAAW,CAAC,MAAM,CAAE,SAAQ,gBAAgB,CAAC,MAAM,CAAC;IACpE,QAAQ,CAAC,CAAC,CAAC,EAAE,aAAa,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IAC/C,QAAQ,CAAC,CAAC,CAAC,EAAE,aAAa,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IAC/C,0EAA0E;IAC1E,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IAClD,QAAQ,CAAC,EAAE,CAAC,EAAE,aAAa,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IAChD,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,0DAA0D;IAC1D,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,eAAe,CAAC,EAAE,MAAM,CAAC;IAClC,QAAQ,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IAC5B,gFAAgF;IAChF,QAAQ,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC;CACzB;AAsLD,sDAAsD;AACtD,wBAAgB,KAAK,CAAC,MAAM,EAC3B,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC,EAC3B,OAAO,GAAE,WAAW,CAAC,MAAM,CAAM,GAC/B,SAAS,CAEX;AAED,+CAA+C;AAC/C,wBAAgB,KAAK,CAAC,MAAM,EAC3B,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC,EAC3B,OAAO,GAAE,WAAW,CAAC,MAAM,CAAM,GAC/B,SAAS,CAEX"}

package/dist/core/marks/area.js

@@ -0,0 +1,187 @@
+import {
+  channelLabel,
+  isPlaceable,
+  numericValue,
+  readChannel
+} from "../channel.js";
+import {
+  colorChannel,
+  groupBySeries,
+  markId,
+  paint,
+  seriesResolver
+} from "./shared.js";
+import { stackSegments } from "./stack.js";
+import { areaPath, linePath } from "../paths.js";
+import { categoryKey } from "../scales/discrete.js";
+const DEFAULT_FILL_OPACITY = 0.3;
+const DEFAULT_STROKE_WIDTH = 2;
+function areaMark(kind, data, options) {
+  const vertical = kind === "areaY";
+  const positionKey = vertical ? options.x : options.y;
+  const valueKey = vertical ? options.y : options.x;
+  const positions = readChannel(
+    data,
+    positionKey ?? ((_datum, index) => index)
+  );
+  const values = readChannel(
+    data,
+    valueKey ?? ((datum) => datum)
+  ).map(numericValue);
+  const colors = colorChannel(data, options);
+  const explicit = options.from !== void 0 && options.to !== void 0;
+  const froms = readChannel(data, options.from).map(numericValue);
+  const tos = readChannel(data, options.to).map(numericValue);
+  const stacked = !explicit && (options.stack ?? options.color !== void 0);
+  const segments = stacked ? stackSegments(
+    positions.map(
+      (position) => isPlaceable(position) ? categoryKey(position) : void 0
+    ),
+    values
+  ) : [];
+  const edges = positions.map((position, index) => {
+    if (!isPlaceable(position)) {
+      return void 0;
+    }
+    if (explicit) {
+      const low = froms[index];
+      const high = tos[index];
+      return low === void 0 || high === void 0 ? void 0 : { low, high };
+    }
+    const value = values[index];
+    if (value === void 0) {
+      return void 0;
+    }
+    return segments[index] ?? { low: 0, high: value };
+  });
+  const positionChannel = {
+    values: positions.filter(isPlaceable),
+    label: channelLabel(positionKey)
+  };
+  const valueChannel = {
+    values: edges.flatMap((edge) => edge ? [edge.low, edge.high] : []),
+    includeZero: !explicit,
+    label: channelLabel(valueKey) ?? options.label
+  };
+  return {
+    id: options.id,
+    coordinate: "cartesian",
+    focusOrder: vertical ? "x" : "y",
+    channels: {
+      x: vertical ? positionChannel : valueChannel,
+      y: vertical ? valueChannel : positionChannel,
+      color: colors.channel
+    },
+    render(context) {
+      const id = markId(options.id, kind, context);
+      const positionScale = vertical ? context.scales.x : context.scales.y;
+      const valueScale = vertical ? context.scales.y : context.scales.x;
+      if (positionScale === void 0 || valueScale === void 0) {
+        return { nodes: [] };
+      }
+      const seriesOf = seriesResolver(
+        colors.values,
+        { ...options, fixedColor: options.fill },
+        id,
+        context
+      );
+      function place(along, value) {
+        const across = valueScale?.map(value) ?? 0;
+        return vertical ? { x: along, y: across } : { x: across, y: along };
+      }
+      const nodes = [];
+      const points = [];
+      for (const { series, indices } of groupBySeries(
+        data.length,
+        seriesOf
+      ).values()) {
+        const runs = [
+          { top: [], bottom: [] }
+        ];
+        for (const index of indices) {
+          const position = positions[index];
+          const edge = edges[index];
+          if (!isPlaceable(position) || edge === void 0) {
+            runs.push({ top: [], bottom: [] });
+            continue;
+          }
+          const along = positionScale.center(position);
+          const top = place(along, edge.high);
+          const run = runs[runs.length - 1];
+          run.top.push(top);
+          run.bottom.push(place(along, edge.low));
+          if (options.tip === false) {
+            continue;
+          }
+          const value = explicit ? edge.high : values[index] ?? 0;
+          points.push({
+            key: `${id}:${index}`,
+            markId: id,
+            index,
+            datum: data[index],
+            x: top.x,
+            y: top.y,
+            xValue: vertical ? position : value,
+            yValue: vertical ? value : position,
+            series: series.key,
+            seriesLabel: series.label,
+            color: series.color,
+            title: vertical ? context.formatX(position) : context.formatY(position),
+            value: vertical ? context.formatY(value) : context.formatX(value)
+          });
+        }
+        const shaped = runs.filter((run) => run.top.length > 0);
+        nodes.push({
+          kind: "path",
+          key: `${id}:area:${series.key}`,
+          series: series.key,
+          role: "mark",
+          d: shaped.map((run) => areaPath(run.top, run.bottom, options.curve)).join(""),
+          paint: paint({
+            fill: series.color,
+            fillOpacity: options.fillOpacity ?? DEFAULT_FILL_OPACITY,
+            opacity: options.opacity
+          })
+        });
+        if (options.line) {
+          nodes.push({
+            kind: "path",
+            key: `${id}:line:${series.key}`,
+            series: series.key,
+            role: "mark",
+            d: shaped.map((run) => linePath(run.top, options.curve)).join(""),
+            paint: paint({
+              fill: "none",
+              stroke: series.color,
+              strokeWidth: options.strokeWidth ?? DEFAULT_STROKE_WIDTH,
+              strokeDasharray: options.strokeDasharray,
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              opacity: options.opacity
+            })
+          });
+        }
+      }
+      const legend = options.color === void 0 && options.label !== void 0 ? [
+        {
+          key: id,
+          label: options.label,
+          color: options.fill ?? context.paletteColor(context.markIndex),
+          shape: "square"
+        }
+      ] : [];
+      return { nodes, points, legend };
+    }
+  };
+}
+function areaY(data, options = {}) {
+  return areaMark("areaY", data, options);
+}
+function areaX(data, options = {}) {
+  return areaMark("areaX", data, options);
+}
+export {
+  areaX,
+  areaY
+};
+//# sourceMappingURL=area.js.map

package/dist/core/marks/area.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/core/marks/area.ts"],
+  "sourcesContent": ["import {\n\tchannelLabel,\n\tisPlaceable,\n\tnumericValue,\n\treadChannel,\n} from \"#/core/channel.ts\";\nimport {\n\ttype ChartMarkOptions,\n\tcolorChannel,\n\tgroupBySeries,\n\tmarkId,\n\tpaint,\n\tseriesResolver,\n} from \"#/core/marks/shared.ts\";\nimport { stackSegments } from \"#/core/marks/stack.ts\";\nimport { areaPath, type ChartXY, linePath } from \"#/core/paths.ts\";\nimport { categoryKey } from \"#/core/scales/discrete.ts\";\nimport type {\n\tChartAccessor,\n\tChartCurve,\n\tChartMark,\n\tChartPoint,\n\tChartValue,\n\tSceneNode,\n} from \"#/core/types.ts\";\n\nexport interface AreaOptions<TDatum> extends ChartMarkOptions<TDatum> {\n\treadonly x?: ChartAccessor<TDatum, ChartValue>;\n\treadonly y?: ChartAccessor<TDatum, ChartValue>;\n\t/** Explicit lower and upper edges: a confidence band, a min-max range. */\n\treadonly from?: ChartAccessor<TDatum, ChartValue>;\n\treadonly to?: ChartAccessor<TDatum, ChartValue>;\n\treadonly fill?: string;\n\treadonly fillOpacity?: number;\n\t/** Draw the upper edge as a line in the series colour. */\n\treadonly line?: boolean;\n\treadonly strokeWidth?: number;\n\treadonly strokeDasharray?: string;\n\treadonly curve?: ChartCurve;\n\t/** Series stack on one another. On by default when there is a color channel. */\n\treadonly stack?: boolean;\n}\n\nconst DEFAULT_FILL_OPACITY = 0.3;\nconst DEFAULT_STROKE_WIDTH = 2;\n\nfunction areaMark<TDatum>(\n\tkind: \"areaY\" | \"areaX\",\n\tdata: ReadonlyArray<TDatum>,\n\toptions: AreaOptions<TDatum>,\n): ChartMark {\n\tconst vertical = kind === \"areaY\";\n\tconst positionKey = vertical ? options.x : options.y;\n\tconst valueKey = vertical ? options.y : options.x;\n\tconst positions = readChannel(\n\t\tdata,\n\t\tpositionKey ?? ((_datum: TDatum, index: number) => index),\n\t);\n\tconst values = readChannel(\n\t\tdata,\n\t\tvalueKey ?? ((datum: TDatum) => datum as unknown as ChartValue),\n\t).map(numericValue);\n\tconst colors = colorChannel(data, options);\n\tconst explicit = options.from !== undefined && options.to !== undefined;\n\tconst froms = readChannel(data, options.from).map(numericValue);\n\tconst tos = readChannel(data, options.to).map(numericValue);\n\tconst stacked = !explicit && (options.stack ?? options.color !== undefined);\n\tconst segments = stacked\n\t\t? stackSegments(\n\t\t\t\tpositions.map((position) =>\n\t\t\t\t\tisPlaceable(position) ? categoryKey(position) : undefined,\n\t\t\t\t),\n\t\t\t\tvalues,\n\t\t\t)\n\t\t: [];\n\tconst edges = positions.map((position, index) => {\n\t\tif (!isPlaceable(position)) {\n\t\t\treturn undefined;\n\t\t}\n\t\tif (explicit) {\n\t\t\tconst low = froms[index];\n\t\t\tconst high = tos[index];\n\t\t\treturn low === undefined || high === undefined\n\t\t\t\t? undefined\n\t\t\t\t: { low, high };\n\t\t}\n\t\tconst value = values[index];\n\t\tif (value === undefined) {\n\t\t\treturn undefined;\n\t\t}\n\t\treturn segments[index] ?? { low: 0, high: value };\n\t});\n\n\tconst positionChannel = {\n\t\tvalues: positions.filter(isPlaceable),\n\t\tlabel: channelLabel(positionKey),\n\t};\n\tconst valueChannel = {\n\t\tvalues: edges.flatMap((edge) => (edge ? [edge.low, edge.high] : [])),\n\t\tincludeZero: !explicit,\n\t\tlabel: channelLabel(valueKey) ?? options.label,\n\t};\n\n\treturn {\n\t\tid: options.id,\n\t\tcoordinate: \"cartesian\",\n\t\tfocusOrder: vertical ? \"x\" : \"y\",\n\t\tchannels: {\n\t\t\tx: vertical ? positionChannel : valueChannel,\n\t\t\ty: vertical ? valueChannel : positionChannel,\n\t\t\tcolor: colors.channel,\n\t\t},\n\t\trender(context) {\n\t\t\tconst id = markId(options.id, kind, context);\n\t\t\tconst positionScale = vertical ? context.scales.x : context.scales.y;\n\t\t\tconst valueScale = vertical ? context.scales.y : context.scales.x;\n\t\t\tif (positionScale === undefined || valueScale === undefined) {\n\t\t\t\treturn { nodes: [] };\n\t\t\t}\n\t\t\tconst seriesOf = seriesResolver(\n\t\t\t\tcolors.values,\n\t\t\t\t{ ...options, fixedColor: options.fill },\n\t\t\t\tid,\n\t\t\t\tcontext,\n\t\t\t);\n\t\t\tfunction place(along: number, value: number): ChartXY {\n\t\t\t\tconst across = valueScale?.map(value) ?? 0;\n\t\t\t\treturn vertical ? { x: along, y: across } : { x: across, y: along };\n\t\t\t}\n\n\t\t\tconst nodes: SceneNode[] = [];\n\t\t\tconst points: ChartPoint[] = [];\n\t\t\tfor (const { series, indices } of groupBySeries(\n\t\t\t\tdata.length,\n\t\t\t\tseriesOf,\n\t\t\t).values()) {\n\t\t\t\tconst runs: Array<{ top: ChartXY[]; bottom: ChartXY[] }> = [\n\t\t\t\t\t{ top: [], bottom: [] },\n\t\t\t\t];\n\t\t\t\tfor (const index of indices) {\n\t\t\t\t\tconst position = positions[index];\n\t\t\t\t\tconst edge = edges[index];\n\t\t\t\t\tif (!isPlaceable(position) || edge === undefined) {\n\t\t\t\t\t\truns.push({ top: [], bottom: [] });\n\t\t\t\t\t\tcontinue;\n\t\t\t\t\t}\n\t\t\t\t\tconst along = positionScale.center(position);\n\t\t\t\t\tconst top = place(along, edge.high);\n\t\t\t\t\tconst run = runs[runs.length - 1];\n\t\t\t\t\trun.top.push(top);\n\t\t\t\t\trun.bottom.push(place(along, edge.low));\n\t\t\t\t\tif (options.tip === false) {\n\t\t\t\t\t\tcontinue;\n\t\t\t\t\t}\n\t\t\t\t\tconst value = explicit ? edge.high : (values[index] ?? 0);\n\t\t\t\t\tpoints.push({\n\t\t\t\t\t\tkey: `${id}:${index}`,\n\t\t\t\t\t\tmarkId: id,\n\t\t\t\t\t\tindex,\n\t\t\t\t\t\tdatum: data[index],\n\t\t\t\t\t\tx: top.x,\n\t\t\t\t\t\ty: top.y,\n\t\t\t\t\t\txValue: vertical ? position : value,\n\t\t\t\t\t\tyValue: vertical ? value : position,\n\t\t\t\t\t\tseries: series.key,\n\t\t\t\t\t\tseriesLabel: series.label,\n\t\t\t\t\t\tcolor: series.color,\n\t\t\t\t\t\ttitle: vertical\n\t\t\t\t\t\t\t? context.formatX(position)\n\t\t\t\t\t\t\t: context.formatY(position),\n\t\t\t\t\t\tvalue: vertical ? context.formatY(value) : context.formatX(value),\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t\tconst shaped = runs.filter((run) => run.top.length > 0);\n\t\t\t\tnodes.push({\n\t\t\t\t\tkind: \"path\",\n\t\t\t\t\tkey: `${id}:area:${series.key}`,\n\t\t\t\t\tseries: series.key,\n\t\t\t\t\trole: \"mark\",\n\t\t\t\t\td: shaped\n\t\t\t\t\t\t.map((run) => areaPath(run.top, run.bottom, options.curve))\n\t\t\t\t\t\t.join(\"\"),\n\t\t\t\t\tpaint: paint({\n\t\t\t\t\t\tfill: series.color,\n\t\t\t\t\t\tfillOpacity: options.fillOpacity ?? DEFAULT_FILL_OPACITY,\n\t\t\t\t\t\topacity: options.opacity,\n\t\t\t\t\t}),\n\t\t\t\t});\n\t\t\t\tif (options.line) {\n\t\t\t\t\tnodes.push({\n\t\t\t\t\t\tkind: \"path\",\n\t\t\t\t\t\tkey: `${id}:line:${series.key}`,\n\t\t\t\t\t\tseries: series.key,\n\t\t\t\t\t\trole: \"mark\",\n\t\t\t\t\t\td: shaped.map((run) => linePath(run.top, options.curve)).join(\"\"),\n\t\t\t\t\t\tpaint: paint({\n\t\t\t\t\t\t\tfill: \"none\",\n\t\t\t\t\t\t\tstroke: series.color,\n\t\t\t\t\t\t\tstrokeWidth: options.strokeWidth ?? DEFAULT_STROKE_WIDTH,\n\t\t\t\t\t\t\tstrokeDasharray: options.strokeDasharray,\n\t\t\t\t\t\t\tstrokeLinecap: \"round\",\n\t\t\t\t\t\t\tstrokeLinejoin: \"round\",\n\t\t\t\t\t\t\topacity: options.opacity,\n\t\t\t\t\t\t}),\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t}\n\t\t\tconst legend =\n\t\t\t\toptions.color === undefined && options.label !== undefined\n\t\t\t\t\t? [\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tkey: id,\n\t\t\t\t\t\t\t\tlabel: options.label,\n\t\t\t\t\t\t\t\tcolor: options.fill ?? context.paletteColor(context.markIndex),\n\t\t\t\t\t\t\t\tshape: \"square\" as const,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t]\n\t\t\t\t\t: [];\n\t\t\treturn { nodes, points, legend };\n\t\t},\n\t};\n}\n\n/** A filled band under a series, over x positions. */\nexport function areaY<TDatum>(\n\tdata: ReadonlyArray<TDatum>,\n\toptions: AreaOptions<TDatum> = {},\n): ChartMark {\n\treturn areaMark(\"areaY\", data, options);\n}\n\n/** A filled band along x, over y positions. */\nexport function areaX<TDatum>(\n\tdata: ReadonlyArray<TDatum>,\n\toptions: AreaOptions<TDatum> = {},\n): ChartMark {\n\treturn areaMark(\"areaX\", data, options);\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/core/marks/bar.d.ts

@@ -0,0 +1,26 @@
+import { type ChartMarkOptions } from "./shared.js";
+import type { ChartAccessor, ChartMark, ChartValue } from "../types.js";
+export interface BarOptions<TDatum> extends ChartMarkOptions<TDatum> {
+    readonly x?: ChartAccessor<TDatum, ChartValue>;
+    readonly y?: ChartAccessor<TDatum, ChartValue>;
+    /** Explicit start and end of the bar on the value axis: floating bars, ranges, Gantt rows. */
+    readonly from?: ChartAccessor<TDatum, ChartValue>;
+    readonly to?: ChartAccessor<TDatum, ChartValue>;
+    readonly fill?: string;
+    readonly fillOpacity?: number;
+    readonly stroke?: string;
+    readonly strokeDasharray?: string;
+    /** Series stack on one another. On by default when there is a color channel. */
+    readonly stack?: boolean;
+    /** Series stand side by side inside the band instead of stacking. */
+    readonly group?: boolean;
+    /** Corner radius of the bar's far end. */
+    readonly radius?: number;
+    /** Pixels kept clear on each side of the bar inside its band. */
+    readonly inset?: number;
+}
+/** Upright bars: categories along x, values up y. */
+export declare function barY<TDatum>(data: ReadonlyArray<TDatum>, options?: BarOptions<TDatum>): ChartMark;
+/** Bars on their side: categories down y, values along x. */
+export declare function barX<TDatum>(data: ReadonlyArray<TDatum>, options?: BarOptions<TDatum>): ChartMark;
+//# sourceMappingURL=bar.d.ts.map

package/dist/core/marks/bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bar.d.ts","sourceRoot":"","sources":["../../../src/core/marks/bar.ts"],"names":[],"mappings":"AAMA,OAAO,EACN,KAAK,gBAAgB,EAKrB,MAAM,wBAAwB,CAAC;AAGhC,OAAO,KAAK,EACX,aAAa,EAEb,SAAS,EAET,UAAU,EAEV,MAAM,iBAAiB,CAAC;AAEzB,MAAM,WAAW,UAAU,CAAC,MAAM,CAAE,SAAQ,gBAAgB,CAAC,MAAM,CAAC;IACnE,QAAQ,CAAC,CAAC,CAAC,EAAE,aAAa,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IAC/C,QAAQ,CAAC,CAAC,CAAC,EAAE,aAAa,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IAC/C,8FAA8F;IAC9F,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IAClD,QAAQ,CAAC,EAAE,CAAC,EAAE,aAAa,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IAChD,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,eAAe,CAAC,EAAE,MAAM,CAAC;IAClC,gFAAgF;IAChF,QAAQ,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IACzB,qEAAqE;IACrE,QAAQ,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IACzB,0CAA0C;IAC1C,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB,iEAAiE;IACjE,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;CACxB;AA6ND,qDAAqD;AACrD,wBAAgB,IAAI,CAAC,MAAM,EAC1B,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC,EAC3B,OAAO,GAAE,UAAU,CAAC,MAAM,CAAM,GAC9B,SAAS,CAEX;AAED,6DAA6D;AAC7D,wBAAgB,IAAI,CAAC,MAAM,EAC1B,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC,EAC3B,OAAO,GAAE,UAAU,CAAC,MAAM,CAAM,GAC9B,SAAS,CAEX"}