@voila.dev/chart 4.0.0

package/dist/core/marks/bar.js

@@ -0,0 +1,200 @@
+import {
+  channelLabel,
+  isPlaceable,
+  numericValue,
+  readChannel
+} from "../channel.js";
+import {
+  colorChannel,
+  markId,
+  paint,
+  seriesResolver
+} from "./shared.js";
+import { stackSegments } from "./stack.js";
+import { categoryKey } from "../scales/discrete.js";
+const DEFAULT_RADIUS = 4;
+function barMark(kind, data, options) {
+  const vertical = kind === "barY";
+  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.group && (options.stack ?? options.color !== void 0);
+  const segments = stacked ? stackSegments(
+    positions.map(
+      (position) => isPlaceable(position) ? categoryKey(position) : void 0
+    ),
+    values
+  ) : [];
+  const bars = [];
+  for (const [index, position] of positions.entries()) {
+    if (!isPlaceable(position)) {
+      continue;
+    }
+    if (explicit) {
+      const low = froms[index];
+      const high = tos[index];
+      if (low !== void 0 && high !== void 0) {
+        bars.push({
+          index,
+          position,
+          low,
+          high,
+          value: high - low,
+          outer: true
+        });
+      }
+      continue;
+    }
+    const value = values[index];
+    if (value === void 0) {
+      continue;
+    }
+    const segment = segments[index];
+    bars.push(
+      segment === void 0 ? { index, position, low: 0, high: value, value, outer: true } : { index, position, ...segment, value }
+    );
+  }
+  const positionChannel = {
+    values: bars.map((bar) => bar.position),
+    discrete: "band",
+    label: channelLabel(positionKey)
+  };
+  const valueChannel = {
+    values: bars.flatMap((bar) => [bar.low, bar.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
+      );
+      const seriesOrder = [
+        ...new Set(bars.map((bar) => seriesOf(bar.index).key))
+      ];
+      const lanes = options.group ? Math.max(1, seriesOrder.length) : 1;
+      const laneWidth = positionScale.bandwidth / lanes;
+      const inset = options.inset ?? 0;
+      const radius = options.radius ?? DEFAULT_RADIUS;
+      const nodes = [];
+      const points = [];
+      for (const bar of bars) {
+        const series = seriesOf(bar.index);
+        const lane = options.group ? seriesOrder.indexOf(series.key) : 0;
+        const alongStart = positionScale.map(bar.position) + lane * laneWidth + inset;
+        const alongSize = Math.max(0, laneWidth - inset * 2);
+        const lowPixel = valueScale.map(bar.low);
+        const highPixel = valueScale.map(bar.high);
+        const acrossStart = Math.min(lowPixel, highPixel);
+        const acrossSize = Math.abs(highPixel - lowPixel);
+        const rect = vertical ? {
+          x: alongStart,
+          y: acrossStart,
+          width: alongSize,
+          height: acrossSize
+        } : {
+          x: acrossStart,
+          y: alongStart,
+          width: acrossSize,
+          height: alongSize
+        };
+        nodes.push({
+          kind: "rect",
+          key: `${id}:${bar.index}`,
+          series: series.key,
+          role: "mark",
+          ...rect,
+          corners: corners(vertical, bar, radius, explicit),
+          paint: paint({
+            fill: series.color,
+            fillOpacity: options.fillOpacity,
+            stroke: options.stroke,
+            strokeDasharray: options.strokeDasharray,
+            opacity: options.opacity
+          })
+        });
+        if (options.tip === false) {
+          continue;
+        }
+        const along = alongStart + alongSize / 2;
+        points.push({
+          key: `${id}:${bar.index}`,
+          markId: id,
+          index: bar.index,
+          datum: data[bar.index],
+          x: vertical ? along : highPixel,
+          y: vertical ? highPixel : along,
+          xValue: vertical ? bar.position : bar.value,
+          yValue: vertical ? bar.value : bar.position,
+          series: series.key,
+          seriesLabel: series.label,
+          color: series.color,
+          title: vertical ? context.formatX(bar.position) : context.formatY(bar.position),
+          value: vertical ? context.formatY(bar.value) : context.formatX(bar.value),
+          hit: { kind: "rect", rect }
+        });
+      }
+      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 corners(vertical, bar, radius, explicit) {
+  if (radius === 0 || !bar.outer) {
+    return void 0;
+  }
+  if (explicit) {
+    return [radius, radius, radius, radius];
+  }
+  const positive = bar.high >= bar.low;
+  if (vertical) {
+    return positive ? [radius, radius, 0, 0] : [0, 0, radius, radius];
+  }
+  return positive ? [0, radius, radius, 0] : [radius, 0, 0, radius];
+}
+function barY(data, options = {}) {
+  return barMark("barY", data, options);
+}
+function barX(data, options = {}) {
+  return barMark("barX", data, options);
+}
+export {
+  barX,
+  barY
+};
+//# sourceMappingURL=bar.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/core/marks/bar.ts"],
+  "sourcesContent": ["import {\n\tchannelLabel,\n\tisPlaceable,\n\tnumericValue,\n\treadChannel,\n} from \"#/core/channel.ts\";\nimport {\n\ttype ChartMarkOptions,\n\tcolorChannel,\n\tmarkId,\n\tpaint,\n\tseriesResolver,\n} from \"#/core/marks/shared.ts\";\nimport { stackSegments } from \"#/core/marks/stack.ts\";\nimport { categoryKey } from \"#/core/scales/discrete.ts\";\nimport type {\n\tChartAccessor,\n\tChartCorners,\n\tChartMark,\n\tChartPoint,\n\tChartValue,\n\tSceneNode,\n} from \"#/core/types.ts\";\n\nexport interface BarOptions<TDatum> extends ChartMarkOptions<TDatum> {\n\treadonly x?: ChartAccessor<TDatum, ChartValue>;\n\treadonly y?: ChartAccessor<TDatum, ChartValue>;\n\t/** Explicit start and end of the bar on the value axis: floating bars, ranges, Gantt rows. */\n\treadonly from?: ChartAccessor<TDatum, ChartValue>;\n\treadonly to?: ChartAccessor<TDatum, ChartValue>;\n\treadonly fill?: string;\n\treadonly fillOpacity?: number;\n\treadonly stroke?: string;\n\treadonly strokeDasharray?: string;\n\t/** Series stack on one another. On by default when there is a color channel. */\n\treadonly stack?: boolean;\n\t/** Series stand side by side inside the band instead of stacking. */\n\treadonly group?: boolean;\n\t/** Corner radius of the bar's far end. */\n\treadonly radius?: number;\n\t/** Pixels kept clear on each side of the bar inside its band. */\n\treadonly inset?: number;\n}\n\nconst DEFAULT_RADIUS = 4;\n\ninterface BarDatum {\n\treadonly index: number;\n\treadonly position: ChartValue;\n\treadonly low: number;\n\treadonly high: number;\n\treadonly value: number;\n\t/** Round the far end: the outer segment of a stack, or any unstacked bar. */\n\treadonly outer: boolean;\n}\n\nfunction barMark<TDatum>(\n\tkind: \"barY\" | \"barX\",\n\tdata: ReadonlyArray<TDatum>,\n\toptions: BarOptions<TDatum>,\n): ChartMark {\n\tconst vertical = kind === \"barY\";\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 =\n\t\t!explicit &&\n\t\t!options.group &&\n\t\t(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\n\tconst bars: BarDatum[] = [];\n\tfor (const [index, position] of positions.entries()) {\n\t\tif (!isPlaceable(position)) {\n\t\t\tcontinue;\n\t\t}\n\t\tif (explicit) {\n\t\t\tconst low = froms[index];\n\t\t\tconst high = tos[index];\n\t\t\tif (low !== undefined && high !== undefined) {\n\t\t\t\tbars.push({\n\t\t\t\t\tindex,\n\t\t\t\t\tposition,\n\t\t\t\t\tlow,\n\t\t\t\t\thigh,\n\t\t\t\t\tvalue: high - low,\n\t\t\t\t\touter: true,\n\t\t\t\t});\n\t\t\t}\n\t\t\tcontinue;\n\t\t}\n\t\tconst value = values[index];\n\t\tif (value === undefined) {\n\t\t\tcontinue;\n\t\t}\n\t\tconst segment = segments[index];\n\t\tbars.push(\n\t\t\tsegment === undefined\n\t\t\t\t? { index, position, low: 0, high: value, value, outer: true }\n\t\t\t\t: { index, position, ...segment, value },\n\t\t);\n\t}\n\n\tconst positionChannel = {\n\t\tvalues: bars.map((bar) => bar.position),\n\t\tdiscrete: \"band\" as const,\n\t\tlabel: channelLabel(positionKey),\n\t};\n\tconst valueChannel = {\n\t\tvalues: bars.flatMap((bar) => [bar.low, bar.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\tconst seriesOrder = [\n\t\t\t\t...new Set(bars.map((bar) => seriesOf(bar.index).key)),\n\t\t\t];\n\t\t\tconst lanes = options.group ? Math.max(1, seriesOrder.length) : 1;\n\t\t\tconst laneWidth = positionScale.bandwidth / lanes;\n\t\t\tconst inset = options.inset ?? 0;\n\t\t\tconst radius = options.radius ?? DEFAULT_RADIUS;\n\n\t\t\tconst nodes: SceneNode[] = [];\n\t\t\tconst points: ChartPoint[] = [];\n\t\t\tfor (const bar of bars) {\n\t\t\t\tconst series = seriesOf(bar.index);\n\t\t\t\tconst lane = options.group ? seriesOrder.indexOf(series.key) : 0;\n\t\t\t\tconst alongStart =\n\t\t\t\t\tpositionScale.map(bar.position) + lane * laneWidth + inset;\n\t\t\t\tconst alongSize = Math.max(0, laneWidth - inset * 2);\n\t\t\t\tconst lowPixel = valueScale.map(bar.low);\n\t\t\t\tconst highPixel = valueScale.map(bar.high);\n\t\t\t\tconst acrossStart = Math.min(lowPixel, highPixel);\n\t\t\t\tconst acrossSize = Math.abs(highPixel - lowPixel);\n\t\t\t\tconst rect = vertical\n\t\t\t\t\t? {\n\t\t\t\t\t\t\tx: alongStart,\n\t\t\t\t\t\t\ty: acrossStart,\n\t\t\t\t\t\t\twidth: alongSize,\n\t\t\t\t\t\t\theight: acrossSize,\n\t\t\t\t\t\t}\n\t\t\t\t\t: {\n\t\t\t\t\t\t\tx: acrossStart,\n\t\t\t\t\t\t\ty: alongStart,\n\t\t\t\t\t\t\twidth: acrossSize,\n\t\t\t\t\t\t\theight: alongSize,\n\t\t\t\t\t\t};\n\t\t\t\tnodes.push({\n\t\t\t\t\tkind: \"rect\",\n\t\t\t\t\tkey: `${id}:${bar.index}`,\n\t\t\t\t\tseries: series.key,\n\t\t\t\t\trole: \"mark\",\n\t\t\t\t\t...rect,\n\t\t\t\t\tcorners: corners(vertical, bar, radius, explicit),\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,\n\t\t\t\t\t\tstroke: options.stroke,\n\t\t\t\t\t\tstrokeDasharray: options.strokeDasharray,\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.tip === false) {\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\t\t\t\tconst along = alongStart + alongSize / 2;\n\t\t\t\tpoints.push({\n\t\t\t\t\tkey: `${id}:${bar.index}`,\n\t\t\t\t\tmarkId: id,\n\t\t\t\t\tindex: bar.index,\n\t\t\t\t\tdatum: data[bar.index],\n\t\t\t\t\tx: vertical ? along : highPixel,\n\t\t\t\t\ty: vertical ? highPixel : along,\n\t\t\t\t\txValue: vertical ? bar.position : bar.value,\n\t\t\t\t\tyValue: vertical ? bar.value : bar.position,\n\t\t\t\t\tseries: series.key,\n\t\t\t\t\tseriesLabel: series.label,\n\t\t\t\t\tcolor: series.color,\n\t\t\t\t\ttitle: vertical\n\t\t\t\t\t\t? context.formatX(bar.position)\n\t\t\t\t\t\t: context.formatY(bar.position),\n\t\t\t\t\tvalue: vertical\n\t\t\t\t\t\t? context.formatY(bar.value)\n\t\t\t\t\t\t: context.formatX(bar.value),\n\t\t\t\t\thit: { kind: \"rect\", rect },\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/** Rounds the end of the bar away from zero, and only that end: stacked joins stay square. */\nfunction corners(\n\tvertical: boolean,\n\tbar: BarDatum,\n\tradius: number,\n\texplicit: boolean,\n): ChartCorners | undefined {\n\tif (radius === 0 || !bar.outer) {\n\t\treturn undefined;\n\t}\n\tif (explicit) {\n\t\treturn [radius, radius, radius, radius];\n\t}\n\tconst positive = bar.high >= bar.low;\n\tif (vertical) {\n\t\treturn positive ? [radius, radius, 0, 0] : [0, 0, radius, radius];\n\t}\n\treturn positive ? [0, radius, radius, 0] : [radius, 0, 0, radius];\n}\n\n/** Upright bars: categories along x, values up y. */\nexport function barY<TDatum>(\n\tdata: ReadonlyArray<TDatum>,\n\toptions: BarOptions<TDatum> = {},\n): ChartMark {\n\treturn barMark(\"barY\", data, options);\n}\n\n/** Bars on their side: categories down y, values along x. */\nexport function barX<TDatum>(\n\tdata: ReadonlyArray<TDatum>,\n\toptions: BarOptions<TDatum> = {},\n): ChartMark {\n\treturn barMark(\"barX\", data, options);\n}\n"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -0,0 +1,16 @@
+import { type ChartMarkOptions } from "./shared.js";
+import type { ChartAccessor, ChartMark, ChartValue } from "../types.js";
+export interface CellOptions<TDatum> extends ChartMarkOptions<TDatum> {
+    readonly x?: ChartAccessor<TDatum, ChartValue>;
+    readonly y?: ChartAccessor<TDatum, ChartValue>;
+    readonly fill?: string;
+    /** Pixels kept clear around each cell. */
+    readonly inset?: number;
+    readonly radius?: number;
+}
+/**
+ * A rectangle per (x, y) pair of categories, filled by its color value: a
+ * heatmap, a calendar, a matrix.
+ */
+export declare function cell<TDatum>(data: ReadonlyArray<TDatum>, options: CellOptions<TDatum>): ChartMark;
+//# sourceMappingURL=cell.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cell.d.ts","sourceRoot":"","sources":["../../../src/core/marks/cell.ts"],"names":[],"mappings":"AAEA,OAAO,EACN,KAAK,gBAAgB,EAMrB,MAAM,wBAAwB,CAAC;AAChC,OAAO,KAAK,EACX,aAAa,EACb,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,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IACvB,0CAA0C;IAC1C,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;CACzB;AAKD;;;GAGG;AACH,wBAAgB,IAAI,CAAC,MAAM,EAC1B,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC,EAC3B,OAAO,EAAE,WAAW,CAAC,MAAM,CAAC,GAC1B,SAAS,CAqFX"}

package/dist/core/marks/cell.js

@@ -0,0 +1,98 @@
+import { channelLabel, isPlaceable, readChannel } from "../channel.js";
+import { formatValue } from "../format.js";
+import {
+  colorChannel,
+  markId,
+  paint,
+  seriesResolver,
+  valueOn
+} from "./shared.js";
+const DEFAULT_INSET = 1;
+const DEFAULT_RADIUS = 2;
+function cell(data, options) {
+  const xs = readChannel(data, options.x);
+  const ys = readChannel(data, options.y);
+  const colors = colorChannel(data, options);
+  return {
+    id: options.id,
+    coordinate: "cartesian",
+    focusOrder: "point",
+    channels: {
+      x: {
+        values: xs.filter(isPlaceable),
+        discrete: "band",
+        padding: 0,
+        label: channelLabel(options.x)
+      },
+      y: {
+        values: ys.filter(isPlaceable),
+        discrete: "band",
+        padding: 0,
+        label: channelLabel(options.y)
+      },
+      color: colors.channel
+    },
+    render(context) {
+      const id = markId(options.id, "cell", context);
+      const { x: xScale, y: yScale } = context.scales;
+      if (xScale === void 0 || yScale === void 0) {
+        return { nodes: [] };
+      }
+      const seriesOf = seriesResolver(
+        colors.values,
+        { ...options, fixedColor: options.fill },
+        id,
+        context
+      );
+      const inset = options.inset ?? DEFAULT_INSET;
+      const radius = options.radius ?? DEFAULT_RADIUS;
+      const nodes = [];
+      const points = [];
+      for (const [index, datum] of data.entries()) {
+        const xValue = valueOn(xScale, xs[index]);
+        const yValue = valueOn(yScale, ys[index]);
+        if (xValue === void 0 || yValue === void 0) {
+          continue;
+        }
+        const rect = {
+          x: xScale.map(xValue) + inset,
+          y: yScale.map(yValue) + inset,
+          width: Math.max(0, xScale.bandwidth - inset * 2),
+          height: Math.max(0, yScale.bandwidth - inset * 2)
+        };
+        const series = seriesOf(index);
+        const colorValue = colors.values[index];
+        nodes.push({
+          kind: "rect",
+          key: `${id}:${index}`,
+          role: "mark",
+          ...rect,
+          corners: [radius, radius, radius, radius],
+          paint: paint({ fill: series.color, opacity: options.opacity })
+        });
+        if (options.tip !== false) {
+          points.push({
+            key: `${id}:${index}`,
+            markId: id,
+            index,
+            datum,
+            x: rect.x + rect.width / 2,
+            y: rect.y + rect.height / 2,
+            xValue,
+            yValue,
+            color: series.color,
+            seriesLabel: options.label,
+            title: `${context.formatX(xValue)} \xB7 ${context.formatY(yValue)}`,
+            value: colorValue === void 0 ? "" : formatValue(colorValue, context.locale),
+            hit: { kind: "rect", rect }
+          });
+        }
+      }
+      return { nodes, points };
+    }
+  };
+}
+export {
+  cell
+};
+//# sourceMappingURL=cell.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/core/marks/cell.ts"],
+  "sourcesContent": ["import { channelLabel, isPlaceable, readChannel } from \"#/core/channel.ts\";\nimport { formatValue } from \"#/core/format.ts\";\nimport {\n\ttype ChartMarkOptions,\n\tcolorChannel,\n\tmarkId,\n\tpaint,\n\tseriesResolver,\n\tvalueOn,\n} from \"#/core/marks/shared.ts\";\nimport type {\n\tChartAccessor,\n\tChartMark,\n\tChartPoint,\n\tChartValue,\n\tSceneNode,\n} from \"#/core/types.ts\";\n\nexport interface CellOptions<TDatum> extends ChartMarkOptions<TDatum> {\n\treadonly x?: ChartAccessor<TDatum, ChartValue>;\n\treadonly y?: ChartAccessor<TDatum, ChartValue>;\n\treadonly fill?: string;\n\t/** Pixels kept clear around each cell. */\n\treadonly inset?: number;\n\treadonly radius?: number;\n}\n\nconst DEFAULT_INSET = 1;\nconst DEFAULT_RADIUS = 2;\n\n/**\n * A rectangle per (x, y) pair of categories, filled by its color value: a\n * heatmap, a calendar, a matrix.\n */\nexport function cell<TDatum>(\n\tdata: ReadonlyArray<TDatum>,\n\toptions: CellOptions<TDatum>,\n): ChartMark {\n\tconst xs = readChannel(data, options.x);\n\tconst ys = readChannel(data, options.y);\n\tconst colors = colorChannel(data, options);\n\treturn {\n\t\tid: options.id,\n\t\tcoordinate: \"cartesian\",\n\t\tfocusOrder: \"point\",\n\t\tchannels: {\n\t\t\tx: {\n\t\t\t\tvalues: xs.filter(isPlaceable),\n\t\t\t\tdiscrete: \"band\",\n\t\t\t\tpadding: 0,\n\t\t\t\tlabel: channelLabel(options.x),\n\t\t\t},\n\t\t\ty: {\n\t\t\t\tvalues: ys.filter(isPlaceable),\n\t\t\t\tdiscrete: \"band\",\n\t\t\t\tpadding: 0,\n\t\t\t\tlabel: channelLabel(options.y),\n\t\t\t},\n\t\t\tcolor: colors.channel,\n\t\t},\n\t\trender(context) {\n\t\t\tconst id = markId(options.id, \"cell\", context);\n\t\t\tconst { x: xScale, y: yScale } = context.scales;\n\t\t\tif (xScale === undefined || yScale === 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\tconst inset = options.inset ?? DEFAULT_INSET;\n\t\t\tconst radius = options.radius ?? DEFAULT_RADIUS;\n\t\t\tconst nodes: SceneNode[] = [];\n\t\t\tconst points: ChartPoint[] = [];\n\t\t\tfor (const [index, datum] of data.entries()) {\n\t\t\t\tconst xValue = valueOn(xScale, xs[index]);\n\t\t\t\tconst yValue = valueOn(yScale, ys[index]);\n\t\t\t\tif (xValue === undefined || yValue === undefined) {\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\t\t\t\tconst rect = {\n\t\t\t\t\tx: xScale.map(xValue) + inset,\n\t\t\t\t\ty: yScale.map(yValue) + inset,\n\t\t\t\t\twidth: Math.max(0, xScale.bandwidth - inset * 2),\n\t\t\t\t\theight: Math.max(0, yScale.bandwidth - inset * 2),\n\t\t\t\t};\n\t\t\t\tconst series = seriesOf(index);\n\t\t\t\tconst colorValue = colors.values[index];\n\t\t\t\tnodes.push({\n\t\t\t\t\tkind: \"rect\",\n\t\t\t\t\tkey: `${id}:${index}`,\n\t\t\t\t\trole: \"mark\",\n\t\t\t\t\t...rect,\n\t\t\t\t\tcorners: [radius, radius, radius, radius],\n\t\t\t\t\tpaint: paint({ fill: series.color, opacity: options.opacity }),\n\t\t\t\t});\n\t\t\t\tif (options.tip !== false) {\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,\n\t\t\t\t\t\tx: rect.x + rect.width / 2,\n\t\t\t\t\t\ty: rect.y + rect.height / 2,\n\t\t\t\t\t\txValue,\n\t\t\t\t\t\tyValue,\n\t\t\t\t\t\tcolor: series.color,\n\t\t\t\t\t\tseriesLabel: options.label,\n\t\t\t\t\t\ttitle: `${context.formatX(xValue)} \u00B7 ${context.formatY(yValue)}`,\n\t\t\t\t\t\tvalue:\n\t\t\t\t\t\t\tcolorValue === undefined\n\t\t\t\t\t\t\t\t? \"\"\n\t\t\t\t\t\t\t\t: formatValue(colorValue, context.locale),\n\t\t\t\t\t\thit: { kind: \"rect\", rect },\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn { nodes, points };\n\t\t},\n\t};\n}\n"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -0,0 +1,17 @@
+import { type ChartMarkOptions } from "./shared.js";
+import type { ChartAccessor, ChartMark, ChartValue } from "../types.js";
+export interface DotOptions<TDatum> extends ChartMarkOptions<TDatum> {
+    readonly x?: ChartAccessor<TDatum, ChartValue>;
+    readonly y?: ChartAccessor<TDatum, ChartValue>;
+    /** A radius in pixels, or a field whose values set the area of each dot. */
+    readonly r?: number | ChartAccessor<TDatum, ChartValue>;
+    /** The largest radius a sized dot reaches. */
+    readonly maxRadius?: number;
+    readonly fill?: string;
+    readonly fillOpacity?: number;
+    readonly stroke?: string;
+    readonly strokeWidth?: number;
+}
+/** A dot per datum: a scatter plot, or a bubble chart when `r` is a field. */
+export declare function dot<TDatum>(data: ReadonlyArray<TDatum>, options?: DotOptions<TDatum>): ChartMark;
+//# sourceMappingURL=dot.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dot.d.ts","sourceRoot":"","sources":["../../../src/core/marks/dot.ts"],"names":[],"mappings":"AAMA,OAAO,EACN,KAAK,gBAAgB,EAMrB,MAAM,wBAAwB,CAAC;AAChC,OAAO,KAAK,EACX,aAAa,EACb,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,4EAA4E;IAC5E,QAAQ,CAAC,CAAC,CAAC,EAAE,MAAM,GAAG,aAAa,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IACxD,8CAA8C;IAC9C,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,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,WAAW,CAAC,EAAE,MAAM,CAAC;CAC9B;AAKD,8EAA8E;AAC9E,wBAAgB,GAAG,CAAC,MAAM,EACzB,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC,EAC3B,OAAO,GAAE,UAAU,CAAC,MAAM,CAAM,GAC9B,SAAS,CAkHX"}

package/dist/core/marks/dot.js

@@ -0,0 +1,125 @@
+import {
+  channelLabel,
+  isPlaceable,
+  numericValue,
+  readChannel
+} from "../channel.js";
+import {
+  colorChannel,
+  markId,
+  paint,
+  seriesResolver,
+  valueOn
+} from "./shared.js";
+const DEFAULT_RADIUS = 4;
+const DEFAULT_MAX_RADIUS = 16;
+function dot(data, options = {}) {
+  const xs = readChannel(
+    data,
+    options.x ?? ((_datum, index) => index)
+  );
+  const ys = readChannel(
+    data,
+    options.y ?? ((datum) => datum)
+  );
+  const colors = colorChannel(data, options);
+  const sized = options.r !== void 0 && typeof options.r !== "number";
+  const sizes = sized ? readChannel(data, options.r).map(
+    numericValue
+  ) : [];
+  const largest = Math.max(0, ...sizes.map((size) => Math.abs(size ?? 0)));
+  const reach = typeof options.r === "number" ? options.r : sized ? options.maxRadius ?? DEFAULT_MAX_RADIUS : DEFAULT_RADIUS;
+  return {
+    id: options.id,
+    coordinate: "cartesian",
+    focusOrder: "point",
+    channels: {
+      x: {
+        values: xs.filter(isPlaceable),
+        label: channelLabel(options.x),
+        inset: reach
+      },
+      y: {
+        values: ys.filter(isPlaceable),
+        label: channelLabel(options.y) ?? options.label,
+        inset: reach
+      },
+      color: colors.channel
+    },
+    render(context) {
+      const id = markId(options.id, "dot", context);
+      const { x: xScale, y: yScale } = context.scales;
+      if (xScale === void 0 || yScale === void 0) {
+        return { nodes: [] };
+      }
+      const seriesOf = seriesResolver(
+        colors.values,
+        { ...options, fixedColor: options.fill },
+        id,
+        context
+      );
+      const maxRadius = options.maxRadius ?? DEFAULT_MAX_RADIUS;
+      function radiusOf(index) {
+        if (typeof options.r === "number") return options.r;
+        if (!sized) return DEFAULT_RADIUS;
+        const size = Math.abs(sizes[index] ?? 0);
+        return largest === 0 ? 0 : Math.sqrt(size / largest) * maxRadius;
+      }
+      const nodes = [];
+      const points = [];
+      for (const [index, datum] of data.entries()) {
+        const xValue = valueOn(xScale, xs[index]);
+        const yValue = valueOn(yScale, ys[index]);
+        if (xValue === void 0 || yValue === void 0) {
+          continue;
+        }
+        const series = seriesOf(index);
+        const cx = xScale.center(xValue);
+        const cy = yScale.center(yValue);
+        const r = radiusOf(index);
+        nodes.push({
+          kind: "circle",
+          key: `${id}:${index}`,
+          series: series.key,
+          role: "mark",
+          cx,
+          cy,
+          r,
+          paint: paint({
+            fill: series.color,
+            fillOpacity: options.fillOpacity,
+            stroke: options.stroke,
+            strokeWidth: options.strokeWidth,
+            opacity: options.opacity
+          })
+        });
+        if (options.tip !== false) {
+          points.push({
+            key: `${id}:${index}`,
+            markId: id,
+            index,
+            datum,
+            x: cx,
+            y: cy,
+            xValue,
+            yValue,
+            series: series.key,
+            seriesLabel: series.label,
+            color: series.color,
+            title: context.formatX(xValue),
+            value: context.formatY(yValue),
+            hit: {
+              kind: "rect",
+              rect: { x: cx - r, y: cy - r, width: r * 2, height: r * 2 }
+            }
+          });
+        }
+      }
+      return { nodes, points };
+    }
+  };
+}
+export {
+  dot
+};
+//# sourceMappingURL=dot.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/core/marks/dot.ts"],
+  "sourcesContent": ["import {\n\tchannelLabel,\n\tisPlaceable,\n\tnumericValue,\n\treadChannel,\n} from \"#/core/channel.ts\";\nimport {\n\ttype ChartMarkOptions,\n\tcolorChannel,\n\tmarkId,\n\tpaint,\n\tseriesResolver,\n\tvalueOn,\n} from \"#/core/marks/shared.ts\";\nimport type {\n\tChartAccessor,\n\tChartMark,\n\tChartPoint,\n\tChartValue,\n\tSceneNode,\n} from \"#/core/types.ts\";\n\nexport interface DotOptions<TDatum> extends ChartMarkOptions<TDatum> {\n\treadonly x?: ChartAccessor<TDatum, ChartValue>;\n\treadonly y?: ChartAccessor<TDatum, ChartValue>;\n\t/** A radius in pixels, or a field whose values set the area of each dot. */\n\treadonly r?: number | ChartAccessor<TDatum, ChartValue>;\n\t/** The largest radius a sized dot reaches. */\n\treadonly maxRadius?: number;\n\treadonly fill?: string;\n\treadonly fillOpacity?: number;\n\treadonly stroke?: string;\n\treadonly strokeWidth?: number;\n}\n\nconst DEFAULT_RADIUS = 4;\nconst DEFAULT_MAX_RADIUS = 16;\n\n/** A dot per datum: a scatter plot, or a bubble chart when `r` is a field. */\nexport function dot<TDatum>(\n\tdata: ReadonlyArray<TDatum>,\n\toptions: DotOptions<TDatum> = {},\n): ChartMark {\n\tconst xs = readChannel(\n\t\tdata,\n\t\toptions.x ?? ((_datum: TDatum, index: number) => index),\n\t);\n\tconst ys = readChannel(\n\t\tdata,\n\t\toptions.y ?? ((datum: TDatum) => datum as unknown as ChartValue),\n\t);\n\tconst colors = colorChannel(data, options);\n\tconst sized = options.r !== undefined && typeof options.r !== \"number\";\n\tconst sizes = sized\n\t\t? readChannel(data, options.r as ChartAccessor<TDatum, ChartValue>).map(\n\t\t\t\tnumericValue,\n\t\t\t)\n\t\t: [];\n\tconst largest = Math.max(0, ...sizes.map((size) => Math.abs(size ?? 0)));\n\tconst reach =\n\t\ttypeof options.r === \"number\"\n\t\t\t? options.r\n\t\t\t: sized\n\t\t\t\t? (options.maxRadius ?? DEFAULT_MAX_RADIUS)\n\t\t\t\t: DEFAULT_RADIUS;\n\n\treturn {\n\t\tid: options.id,\n\t\tcoordinate: \"cartesian\",\n\t\tfocusOrder: \"point\",\n\t\tchannels: {\n\t\t\tx: {\n\t\t\t\tvalues: xs.filter(isPlaceable),\n\t\t\t\tlabel: channelLabel(options.x),\n\t\t\t\tinset: reach,\n\t\t\t},\n\t\t\ty: {\n\t\t\t\tvalues: ys.filter(isPlaceable),\n\t\t\t\tlabel: channelLabel(options.y) ?? options.label,\n\t\t\t\tinset: reach,\n\t\t\t},\n\t\t\tcolor: colors.channel,\n\t\t},\n\t\trender(context) {\n\t\t\tconst id = markId(options.id, \"dot\", context);\n\t\t\tconst { x: xScale, y: yScale } = context.scales;\n\t\t\tif (xScale === undefined || yScale === 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\tconst maxRadius = options.maxRadius ?? DEFAULT_MAX_RADIUS;\n\t\t\t// Area, not radius, carries the value: a dot twice the value looks twice as big.\n\t\t\tfunction radiusOf(index: number): number {\n\t\t\t\tif (typeof options.r === \"number\") return options.r;\n\t\t\t\tif (!sized) return DEFAULT_RADIUS;\n\t\t\t\tconst size = Math.abs(sizes[index] ?? 0);\n\t\t\t\treturn largest === 0 ? 0 : Math.sqrt(size / largest) * maxRadius;\n\t\t\t}\n\t\t\tconst nodes: SceneNode[] = [];\n\t\t\tconst points: ChartPoint[] = [];\n\t\t\tfor (const [index, datum] of data.entries()) {\n\t\t\t\tconst xValue = valueOn(xScale, xs[index]);\n\t\t\t\tconst yValue = valueOn(yScale, ys[index]);\n\t\t\t\tif (xValue === undefined || yValue === undefined) {\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\t\t\t\tconst series = seriesOf(index);\n\t\t\t\tconst cx = xScale.center(xValue);\n\t\t\t\tconst cy = yScale.center(yValue);\n\t\t\t\tconst r = radiusOf(index);\n\t\t\t\tnodes.push({\n\t\t\t\t\tkind: \"circle\",\n\t\t\t\t\tkey: `${id}:${index}`,\n\t\t\t\t\tseries: series.key,\n\t\t\t\t\trole: \"mark\",\n\t\t\t\t\tcx,\n\t\t\t\t\tcy,\n\t\t\t\t\tr,\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,\n\t\t\t\t\t\tstroke: options.stroke,\n\t\t\t\t\t\tstrokeWidth: options.strokeWidth,\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.tip !== false) {\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,\n\t\t\t\t\t\tx: cx,\n\t\t\t\t\t\ty: cy,\n\t\t\t\t\t\txValue,\n\t\t\t\t\t\tyValue,\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: context.formatX(xValue),\n\t\t\t\t\t\tvalue: context.formatY(yValue),\n\t\t\t\t\t\thit: {\n\t\t\t\t\t\t\tkind: \"rect\",\n\t\t\t\t\t\t\trect: { x: cx - r, y: cy - r, width: r * 2, height: r * 2 },\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\treturn { nodes, points };\n\t\t},\n\t};\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/core/marks/funnel-layout.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Funnel geometry, worked out away from React so it can be asserted on
+ * directly. One slice per step: a horizontal band whose left edge is as tall
+ * as the step's value and whose right edge slopes down to the next step's
+ * value, so the drop between two steps is visible as the flank itself.
+ */
+export interface FunnelSlice {
+    /** Index of the datum, i.e. of the category slot. */
+    readonly index: number;
+    readonly value: number;
+    /** Left edge of the band, in plot coordinates. */
+    readonly x: number;
+    readonly width: number;
+    /** Height of the left flank, proportional to the step's value. */
+    readonly leftHeight: number;
+    /** Height of the right flank — the next step's value, or its own on the last step. */
+    readonly rightHeight: number;
+    /** The trapezoid, vertically centred on the band. `""` when there is nothing to draw. */
+    readonly path: string;
+    /** Conversion into the next step. `null` on the last step or when this one is empty. */
+    readonly ratioToNext: number | null;
+}
+export interface FunnelLayoutOptions {
+    readonly values: ReadonlyArray<number>;
+    readonly innerWidth: number;
+    readonly innerHeight: number;
+    /** Pixels of blank between two bands. */
+    readonly gap?: number;
+    /** Vertical centre line of the funnel. Defaults to half the inner height. */
+    readonly centerY?: number;
+    /** Height the largest value maps to. Defaults to the inner height. */
+    readonly maxHeight?: number;
+    /** Left edge of the first band. */
+    readonly originX?: number;
+}
+export declare function funnelSlices(options: FunnelLayoutOptions): ReadonlyArray<FunnelSlice>;
+//# sourceMappingURL=funnel-layout.d.ts.map

package/dist/core/marks/funnel-layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"funnel-layout.d.ts","sourceRoot":"","sources":["../../../src/core/marks/funnel-layout.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,MAAM,WAAW,WAAW;IAC3B,qDAAqD;IACrD,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,kDAAkD;IAClD,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,kEAAkE;IAClE,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,sFAAsF;IACtF,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,yFAAyF;IACzF,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,wFAAwF;IACxF,QAAQ,CAAC,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;CACpC;AAED,MAAM,WAAW,mBAAmB;IACnC,QAAQ,CAAC,MAAM,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IACvC,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,yCAAyC;IACzC,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC;IACtB,6EAA6E;IAC7E,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAC1B,sEAAsE;IACtE,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,mCAAmC;IACnC,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;CAC1B;AAkCD,wBAAgB,YAAY,CAC3B,OAAO,EAAE,mBAAmB,GAC1B,aAAa,CAAC,WAAW,CAAC,CAwC5B"}

package/dist/core/marks/funnel-layout.js

@@ -0,0 +1,61 @@
+const DEFAULT_GAP = 4;
+const PATH_PRECISION = 2;
+function round(value) {
+  const factor = 10 ** PATH_PRECISION;
+  return Math.round(value * factor) / factor;
+}
+function point(x, y) {
+  return `${round(x)},${round(y)}`;
+}
+function trapezoidPath(x, width, centerY, leftHeight, rightHeight) {
+  if (width <= 0 || leftHeight <= 0 && rightHeight <= 0) {
+    return "";
+  }
+  const right = x + width;
+  return [
+    `M${point(x, centerY - leftHeight / 2)}`,
+    `L${point(right, centerY - rightHeight / 2)}`,
+    `L${point(right, centerY + rightHeight / 2)}`,
+    `L${point(x, centerY + leftHeight / 2)}`,
+    "Z"
+  ].join("");
+}
+function funnelSlices(options) {
+  const {
+    values,
+    innerWidth,
+    innerHeight,
+    gap = DEFAULT_GAP,
+    centerY = innerHeight / 2,
+    maxHeight = innerHeight,
+    originX = 0
+  } = options;
+  const count = values.length;
+  if (count === 0 || innerWidth <= 0 || maxHeight <= 0) {
+    return [];
+  }
+  const clamped = values.map((value) => Math.max(0, value));
+  const peak = Math.max(...clamped);
+  const heightFor = (value) => peak <= 0 ? 0 : value / peak * maxHeight;
+  const bandWidth = Math.max(0, (innerWidth - gap * (count - 1)) / count);
+  return clamped.map((value, index) => {
+    const next = clamped[index + 1];
+    const leftHeight = heightFor(value);
+    const rightHeight = next === void 0 ? leftHeight : heightFor(next);
+    const x = originX + index * (bandWidth + gap);
+    return {
+      index,
+      value: values[index],
+      x,
+      width: bandWidth,
+      leftHeight,
+      rightHeight,
+      path: trapezoidPath(x, bandWidth, centerY, leftHeight, rightHeight),
+      ratioToNext: next === void 0 || value <= 0 ? null : next / value
+    };
+  });
+}
+export {
+  funnelSlices
+};
+//# sourceMappingURL=funnel-layout.js.map