@voila.dev/chart 4.0.0

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/core/marks/funnel-layout.ts"],
+  "sourcesContent": ["/**\n * Funnel geometry, worked out away from React so it can be asserted on\n * directly. One slice per step: a horizontal band whose left edge is as tall\n * as the step's value and whose right edge slopes down to the next step's\n * value, so the drop between two steps is visible as the flank itself.\n */\n\nexport interface FunnelSlice {\n\t/** Index of the datum, i.e. of the category slot. */\n\treadonly index: number;\n\treadonly value: number;\n\t/** Left edge of the band, in plot coordinates. */\n\treadonly x: number;\n\treadonly width: number;\n\t/** Height of the left flank, proportional to the step's value. */\n\treadonly leftHeight: number;\n\t/** Height of the right flank \u2014 the next step's value, or its own on the last step. */\n\treadonly rightHeight: number;\n\t/** The trapezoid, vertically centred on the band. `\"\"` when there is nothing to draw. */\n\treadonly path: string;\n\t/** Conversion into the next step. `null` on the last step or when this one is empty. */\n\treadonly ratioToNext: number | null;\n}\n\nexport interface FunnelLayoutOptions {\n\treadonly values: ReadonlyArray<number>;\n\treadonly innerWidth: number;\n\treadonly innerHeight: number;\n\t/** Pixels of blank between two bands. */\n\treadonly gap?: number;\n\t/** Vertical centre line of the funnel. Defaults to half the inner height. */\n\treadonly centerY?: number;\n\t/** Height the largest value maps to. Defaults to the inner height. */\n\treadonly maxHeight?: number;\n\t/** Left edge of the first band. */\n\treadonly originX?: number;\n}\n\nconst DEFAULT_GAP = 4;\nconst PATH_PRECISION = 2;\n\nfunction round(value: number): number {\n\tconst factor = 10 ** PATH_PRECISION;\n\treturn Math.round(value * factor) / factor;\n}\n\nfunction point(x: number, y: number): string {\n\treturn `${round(x)},${round(y)}`;\n}\n\nfunction trapezoidPath(\n\tx: number,\n\twidth: number,\n\tcenterY: number,\n\tleftHeight: number,\n\trightHeight: number,\n): string {\n\tif (width <= 0 || (leftHeight <= 0 && rightHeight <= 0)) {\n\t\treturn \"\";\n\t}\n\tconst right = x + width;\n\treturn [\n\t\t`M${point(x, centerY - leftHeight / 2)}`,\n\t\t`L${point(right, centerY - rightHeight / 2)}`,\n\t\t`L${point(right, centerY + rightHeight / 2)}`,\n\t\t`L${point(x, centerY + leftHeight / 2)}`,\n\t\t\"Z\",\n\t].join(\"\");\n}\n\nexport function funnelSlices(\n\toptions: FunnelLayoutOptions,\n): ReadonlyArray<FunnelSlice> {\n\tconst {\n\t\tvalues,\n\t\tinnerWidth,\n\t\tinnerHeight,\n\t\tgap = DEFAULT_GAP,\n\t\tcenterY = innerHeight / 2,\n\t\tmaxHeight = innerHeight,\n\t\toriginX = 0,\n\t} = options;\n\n\tconst count = values.length;\n\tif (count === 0 || innerWidth <= 0 || maxHeight <= 0) {\n\t\treturn [];\n\t}\n\n\tconst clamped = values.map((value) => Math.max(0, value));\n\tconst peak = Math.max(...clamped);\n\tconst heightFor = (value: number): number =>\n\t\tpeak <= 0 ? 0 : (value / peak) * maxHeight;\n\n\tconst bandWidth = Math.max(0, (innerWidth - gap * (count - 1)) / count);\n\n\treturn clamped.map((value, index) => {\n\t\tconst next = clamped[index + 1];\n\t\tconst leftHeight = heightFor(value);\n\t\t// The last band has no next step to taper into, so it stays a rectangle.\n\t\tconst rightHeight = next === undefined ? leftHeight : heightFor(next);\n\t\tconst x = originX + index * (bandWidth + gap);\n\t\treturn {\n\t\t\tindex,\n\t\t\tvalue: values[index],\n\t\t\tx,\n\t\t\twidth: bandWidth,\n\t\t\tleftHeight,\n\t\t\trightHeight,\n\t\t\tpath: trapezoidPath(x, bandWidth, centerY, leftHeight, rightHeight),\n\t\t\tratioToNext: next === undefined || value <= 0 ? null : next / value,\n\t\t};\n\t});\n}\n"],
+  "mappings": "AAsCA,MAAM,cAAc;AACpB,MAAM,iBAAiB;AAEvB,SAAS,MAAM,OAAuB;AACrC,QAAM,SAAS,MAAM;AACrB,SAAO,KAAK,MAAM,QAAQ,MAAM,IAAI;AACrC;AAEA,SAAS,MAAM,GAAW,GAAmB;AAC5C,SAAO,GAAG,MAAM,CAAC,CAAC,IAAI,MAAM,CAAC,CAAC;AAC/B;AAEA,SAAS,cACR,GACA,OACA,SACA,YACA,aACS;AACT,MAAI,SAAS,KAAM,cAAc,KAAK,eAAe,GAAI;AACxD,WAAO;AAAA,EACR;AACA,QAAM,QAAQ,IAAI;AAClB,SAAO;AAAA,IACN,IAAI,MAAM,GAAG,UAAU,aAAa,CAAC,CAAC;AAAA,IACtC,IAAI,MAAM,OAAO,UAAU,cAAc,CAAC,CAAC;AAAA,IAC3C,IAAI,MAAM,OAAO,UAAU,cAAc,CAAC,CAAC;AAAA,IAC3C,IAAI,MAAM,GAAG,UAAU,aAAa,CAAC,CAAC;AAAA,IACtC;AAAA,EACD,EAAE,KAAK,EAAE;AACV;AAEO,SAAS,aACf,SAC6B;AAC7B,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN,UAAU,cAAc;AAAA,IACxB,YAAY;AAAA,IACZ,UAAU;AAAA,EACX,IAAI;AAEJ,QAAM,QAAQ,OAAO;AACrB,MAAI,UAAU,KAAK,cAAc,KAAK,aAAa,GAAG;AACrD,WAAO,CAAC;AAAA,EACT;AAEA,QAAM,UAAU,OAAO,IAAI,CAAC,UAAU,KAAK,IAAI,GAAG,KAAK,CAAC;AACxD,QAAM,OAAO,KAAK,IAAI,GAAG,OAAO;AAChC,QAAM,YAAY,CAAC,UAClB,QAAQ,IAAI,IAAK,QAAQ,OAAQ;AAElC,QAAM,YAAY,KAAK,IAAI,IAAI,aAAa,OAAO,QAAQ,MAAM,KAAK;AAEtE,SAAO,QAAQ,IAAI,CAAC,OAAO,UAAU;AACpC,UAAM,OAAO,QAAQ,QAAQ,CAAC;AAC9B,UAAM,aAAa,UAAU,KAAK;AAElC,UAAM,cAAc,SAAS,SAAY,aAAa,UAAU,IAAI;AACpE,UAAM,IAAI,UAAU,SAAS,YAAY;AACzC,WAAO;AAAA,MACN;AAAA,MACA,OAAO,OAAO,KAAK;AAAA,MACnB;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA,MAAM,cAAc,GAAG,WAAW,SAAS,YAAY,WAAW;AAAA,MAClE,aAAa,SAAS,UAAa,SAAS,IAAI,OAAO,OAAO;AAAA,IAC/D;AAAA,EACD,CAAC;AACF;",
+  "names": []
+}

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

@@ -0,0 +1,19 @@
+import { type ChartMarkOptions } from "./shared.js";
+import type { ChartAccessor, ChartMark, ChartValue } from "../types.js";
+export interface FunnelOptions<TDatum> extends ChartMarkOptions<TDatum> {
+    /** The step: "Visites", "Inscriptions", "Missions". */
+    readonly category: ChartAccessor<TDatum, ChartValue>;
+    readonly value: ChartAccessor<TDatum, ChartValue>;
+    /** Pixels of blank between two steps. */
+    readonly gap?: number;
+    readonly fill?: string;
+    /** `false` drops the step name and value written above each step. */
+    readonly labels?: boolean;
+}
+/**
+ * Steps left to right, each as tall as its value, each sloping down to the
+ * next: the drop between two stages is the shape itself. The tooltip gives
+ * the conversion from the step before.
+ */
+export declare function funnel<TDatum>(data: ReadonlyArray<TDatum>, options: FunnelOptions<TDatum>): ChartMark;
+//# sourceMappingURL=funnel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"funnel.d.ts","sourceRoot":"","sources":["../../../src/core/marks/funnel.ts"],"names":[],"mappings":"AAQA,OAAO,EACN,KAAK,gBAAgB,EAIrB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,KAAK,EACX,aAAa,EACb,SAAS,EAET,UAAU,EAEV,MAAM,iBAAiB,CAAC;AAEzB,MAAM,WAAW,aAAa,CAAC,MAAM,CAAE,SAAQ,gBAAgB,CAAC,MAAM,CAAC;IACtE,uDAAuD;IACvD,QAAQ,CAAC,QAAQ,EAAE,aAAa,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IACrD,QAAQ,CAAC,KAAK,EAAE,aAAa,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IAClD,yCAAyC;IACzC,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IACvB,qEAAqE;IACrE,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC;CAC1B;AAKD;;;;GAIG;AACH,wBAAgB,MAAM,CAAC,MAAM,EAC5B,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC,EAC3B,OAAO,EAAE,aAAa,CAAC,MAAM,CAAC,GAC5B,SAAS,CA8HX"}

package/dist/core/marks/funnel.js

@@ -0,0 +1,143 @@
+import {
+  channelLabel,
+  isPlaceable,
+  numericValue,
+  readChannel
+} from "../channel.js";
+import { formatPercentage } from "../format.js";
+import { funnelSlices } from "./funnel-layout.js";
+import {
+  markId,
+  paint,
+  seriesResolver
+} from "./shared.js";
+import { categoryKey } from "../scales/discrete.js";
+const LABEL_ZONE = 36;
+function funnel(data, options) {
+  const categories = readChannel(data, options.category);
+  const values = readChannel(data, options.value).map(
+    (value) => numericValue(value) ?? 0
+  );
+  const colorAccessor = options.color ?? options.category;
+  const colors = readChannel(data, colorAccessor);
+  return {
+    id: options.id,
+    coordinate: "frame",
+    focusOrder: "point",
+    colorLegend: options.labels === false,
+    titles: {
+      category: channelLabel(options.category),
+      value: channelLabel(options.value) ?? options.label
+    },
+    channels: {
+      color: {
+        values: colors.filter(isPlaceable),
+        label: channelLabel(colorAccessor)
+      }
+    },
+    render(context) {
+      const id = markId(options.id, "funnel", context);
+      const { plot, theme } = context;
+      const labelled = options.labels !== false;
+      const top = plot.y + (labelled ? LABEL_ZONE : 0);
+      const height = Math.max(0, plot.height - (labelled ? LABEL_ZONE : 0));
+      const slices = funnelSlices({
+        values,
+        innerWidth: plot.width,
+        innerHeight: height,
+        centerY: top + height / 2,
+        originX: plot.x,
+        gap: options.gap
+      });
+      const seriesOf = seriesResolver(
+        colors,
+        { ...options, color: colorAccessor, fixedColor: options.fill },
+        id,
+        context
+      );
+      const nodes = [];
+      const points = [];
+      for (const slice of slices) {
+        const category = categories[slice.index];
+        if (!isPlaceable(category) || slice.path === "") {
+          continue;
+        }
+        const series = seriesOf(slice.index);
+        const key = categoryKey(category);
+        nodes.push({
+          kind: "path",
+          key: `${id}:${key}`,
+          series: series.key,
+          role: "mark",
+          d: slice.path,
+          paint: paint({ fill: series.color, opacity: options.opacity })
+        });
+        if (labelled) {
+          nodes.push(
+            {
+              kind: "text",
+              key: `${id}:name:${key}`,
+              role: "label",
+              x: slice.x,
+              y: plot.y,
+              text: series.label ?? context.formatX(category),
+              paint: {
+                fill: theme.muted,
+                fontSize: theme.fontSize,
+                baseline: "top"
+              }
+            },
+            {
+              kind: "text",
+              key: `${id}:value:${key}`,
+              role: "label",
+              x: slice.x,
+              y: plot.y + theme.fontSize + 4,
+              text: context.formatY(slice.value),
+              paint: {
+                fill: theme.foreground,
+                fontSize: theme.fontSize + 2,
+                fontWeight: 600,
+                baseline: "top"
+              }
+            }
+          );
+        }
+        if (options.tip === false) {
+          continue;
+        }
+        const previous = slice.index > 0 ? values[slice.index - 1] : void 0;
+        const conversion = previous !== void 0 && previous > 0 ? ` (${formatPercentage(slice.value / previous, context.locale)})` : "";
+        const centerY = top + height / 2;
+        points.push({
+          key: `${id}:${key}`,
+          markId: id,
+          index: slice.index,
+          datum: data[slice.index],
+          x: slice.x + slice.width / 2,
+          y: centerY,
+          xValue: category,
+          yValue: slice.value,
+          series: series.key,
+          color: series.color,
+          title: series.label ?? context.formatX(category),
+          value: `${context.formatY(slice.value)}${conversion}`,
+          hit: {
+            kind: "rect",
+            rect: {
+              x: slice.x,
+              y: centerY - slice.leftHeight / 2,
+              width: slice.width,
+              height: slice.leftHeight
+            }
+          }
+        });
+      }
+      return { nodes, points };
+    }
+  };
+}
+export {
+  funnel
+};
+//# sourceMappingURL=funnel.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/core/marks/funnel.ts"],
+  "sourcesContent": ["import {\n\tchannelLabel,\n\tisPlaceable,\n\tnumericValue,\n\treadChannel,\n} from \"#/core/channel.ts\";\nimport { formatPercentage } from \"#/core/format.ts\";\nimport { funnelSlices } from \"#/core/marks/funnel-layout.ts\";\nimport {\n\ttype ChartMarkOptions,\n\tmarkId,\n\tpaint,\n\tseriesResolver,\n} from \"#/core/marks/shared.ts\";\nimport { categoryKey } from \"#/core/scales/discrete.ts\";\nimport type {\n\tChartAccessor,\n\tChartMark,\n\tChartPoint,\n\tChartValue,\n\tSceneNode,\n} from \"#/core/types.ts\";\n\nexport interface FunnelOptions<TDatum> extends ChartMarkOptions<TDatum> {\n\t/** The step: \"Visites\", \"Inscriptions\", \"Missions\". */\n\treadonly category: ChartAccessor<TDatum, ChartValue>;\n\treadonly value: ChartAccessor<TDatum, ChartValue>;\n\t/** Pixels of blank between two steps. */\n\treadonly gap?: number;\n\treadonly fill?: string;\n\t/** `false` drops the step name and value written above each step. */\n\treadonly labels?: boolean;\n}\n\n/** Room kept above the shape for each step's name and value. */\nconst LABEL_ZONE = 36;\n\n/**\n * Steps left to right, each as tall as its value, each sloping down to the\n * next: the drop between two stages is the shape itself. The tooltip gives\n * the conversion from the step before.\n */\nexport function funnel<TDatum>(\n\tdata: ReadonlyArray<TDatum>,\n\toptions: FunnelOptions<TDatum>,\n): ChartMark {\n\tconst categories = readChannel(data, options.category);\n\tconst values = readChannel(data, options.value).map(\n\t\t(value) => numericValue(value) ?? 0,\n\t);\n\tconst colorAccessor = options.color ?? options.category;\n\tconst colors = readChannel(data, colorAccessor);\n\treturn {\n\t\tid: options.id,\n\t\tcoordinate: \"frame\",\n\t\tfocusOrder: \"point\",\n\t\tcolorLegend: options.labels === false,\n\t\ttitles: {\n\t\t\tcategory: channelLabel(options.category),\n\t\t\tvalue: channelLabel(options.value) ?? options.label,\n\t\t},\n\t\tchannels: {\n\t\t\tcolor: {\n\t\t\t\tvalues: colors.filter(isPlaceable),\n\t\t\t\tlabel: channelLabel(colorAccessor),\n\t\t\t},\n\t\t},\n\t\trender(context) {\n\t\t\tconst id = markId(options.id, \"funnel\", context);\n\t\t\tconst { plot, theme } = context;\n\t\t\tconst labelled = options.labels !== false;\n\t\t\tconst top = plot.y + (labelled ? LABEL_ZONE : 0);\n\t\t\tconst height = Math.max(0, plot.height - (labelled ? LABEL_ZONE : 0));\n\t\t\tconst slices = funnelSlices({\n\t\t\t\tvalues,\n\t\t\t\tinnerWidth: plot.width,\n\t\t\t\tinnerHeight: height,\n\t\t\t\tcenterY: top + height / 2,\n\t\t\t\toriginX: plot.x,\n\t\t\t\tgap: options.gap,\n\t\t\t});\n\t\t\tconst seriesOf = seriesResolver(\n\t\t\t\tcolors,\n\t\t\t\t{ ...options, color: colorAccessor, fixedColor: options.fill },\n\t\t\t\tid,\n\t\t\t\tcontext,\n\t\t\t);\n\t\t\tconst nodes: SceneNode[] = [];\n\t\t\tconst points: ChartPoint[] = [];\n\t\t\tfor (const slice of slices) {\n\t\t\t\tconst category = categories[slice.index];\n\t\t\t\tif (!isPlaceable(category) || slice.path === \"\") {\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\t\t\t\tconst series = seriesOf(slice.index);\n\t\t\t\tconst key = categoryKey(category);\n\t\t\t\tnodes.push({\n\t\t\t\t\tkind: \"path\",\n\t\t\t\t\tkey: `${id}:${key}`,\n\t\t\t\t\tseries: series.key,\n\t\t\t\t\trole: \"mark\",\n\t\t\t\t\td: slice.path,\n\t\t\t\t\tpaint: paint({ fill: series.color, opacity: options.opacity }),\n\t\t\t\t});\n\t\t\t\tif (labelled) {\n\t\t\t\t\tnodes.push(\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tkind: \"text\",\n\t\t\t\t\t\t\tkey: `${id}:name:${key}`,\n\t\t\t\t\t\t\trole: \"label\",\n\t\t\t\t\t\t\tx: slice.x,\n\t\t\t\t\t\t\ty: plot.y,\n\t\t\t\t\t\t\ttext: series.label ?? context.formatX(category),\n\t\t\t\t\t\t\tpaint: {\n\t\t\t\t\t\t\t\tfill: theme.muted,\n\t\t\t\t\t\t\t\tfontSize: theme.fontSize,\n\t\t\t\t\t\t\t\tbaseline: \"top\",\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tkind: \"text\",\n\t\t\t\t\t\t\tkey: `${id}:value:${key}`,\n\t\t\t\t\t\t\trole: \"label\",\n\t\t\t\t\t\t\tx: slice.x,\n\t\t\t\t\t\t\ty: plot.y + theme.fontSize + 4,\n\t\t\t\t\t\t\ttext: context.formatY(slice.value),\n\t\t\t\t\t\t\tpaint: {\n\t\t\t\t\t\t\t\tfill: theme.foreground,\n\t\t\t\t\t\t\t\tfontSize: theme.fontSize + 2,\n\t\t\t\t\t\t\t\tfontWeight: 600,\n\t\t\t\t\t\t\t\tbaseline: \"top\",\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t},\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 previous = slice.index > 0 ? values[slice.index - 1] : undefined;\n\t\t\t\tconst conversion =\n\t\t\t\t\tprevious !== undefined && previous > 0\n\t\t\t\t\t\t? ` (${formatPercentage(slice.value / previous, context.locale)})`\n\t\t\t\t\t\t: \"\";\n\t\t\t\tconst centerY = top + height / 2;\n\t\t\t\tpoints.push({\n\t\t\t\t\tkey: `${id}:${key}`,\n\t\t\t\t\tmarkId: id,\n\t\t\t\t\tindex: slice.index,\n\t\t\t\t\tdatum: data[slice.index],\n\t\t\t\t\tx: slice.x + slice.width / 2,\n\t\t\t\t\ty: centerY,\n\t\t\t\t\txValue: category,\n\t\t\t\t\tyValue: slice.value,\n\t\t\t\t\tseries: series.key,\n\t\t\t\t\tcolor: series.color,\n\t\t\t\t\ttitle: series.label ?? context.formatX(category),\n\t\t\t\t\tvalue: `${context.formatY(slice.value)}${conversion}`,\n\t\t\t\t\thit: {\n\t\t\t\t\t\tkind: \"rect\",\n\t\t\t\t\t\trect: {\n\t\t\t\t\t\t\tx: slice.x,\n\t\t\t\t\t\t\ty: centerY - slice.leftHeight / 2,\n\t\t\t\t\t\t\twidth: slice.width,\n\t\t\t\t\t\t\theight: slice.leftHeight,\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/line.d.ts

@@ -0,0 +1,17 @@
+import { type ChartMarkOptions } from "./shared.js";
+import type { ChartAccessor, ChartCurve, ChartMark, ChartValue } from "../types.js";
+export interface LineOptions<TDatum> extends ChartMarkOptions<TDatum> {
+    readonly x?: ChartAccessor<TDatum, ChartValue>;
+    readonly y?: ChartAccessor<TDatum, ChartValue>;
+    readonly stroke?: string;
+    readonly strokeWidth?: number;
+    readonly strokeDasharray?: string;
+    readonly curve?: ChartCurve;
+    /** A dot on every point, not only on the focused one. */
+    readonly dots?: boolean;
+}
+/** A line whose value runs up the y axis, over x positions: a time series. */
+export declare function lineY<TDatum>(data: ReadonlyArray<TDatum>, options?: LineOptions<TDatum>): ChartMark;
+/** A line whose value runs along x, over y positions. */
+export declare function lineX<TDatum>(data: ReadonlyArray<TDatum>, options?: LineOptions<TDatum>): ChartMark;
+//# sourceMappingURL=line.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"line.d.ts","sourceRoot":"","sources":["../../../src/core/marks/line.ts"],"names":[],"mappings":"AACA,OAAO,EACN,KAAK,gBAAgB,EAOrB,MAAM,wBAAwB,CAAC;AAEhC,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,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,eAAe,CAAC,EAAE,MAAM,CAAC;IAClC,QAAQ,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IAC5B,yDAAyD;IACzD,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC;CACxB;AAkKD,8EAA8E;AAC9E,wBAAgB,KAAK,CAAC,MAAM,EAC3B,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC,EAC3B,OAAO,GAAE,WAAW,CAAC,MAAM,CAAM,GAC/B,SAAS,CAEX;AAED,yDAAyD;AACzD,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/line.js

@@ -0,0 +1,150 @@
+import { channelLabel, isPlaceable, readChannel } from "../channel.js";
+import {
+  colorChannel,
+  groupBySeries,
+  markId,
+  paint,
+  seriesResolver,
+  valueOn
+} from "./shared.js";
+import { linePath } from "../paths.js";
+const DEFAULT_STROKE_WIDTH = 2;
+const DOT_RADIUS = 3;
+function positionAccessor(accessor, fallback) {
+  if (accessor !== void 0) {
+    return accessor;
+  }
+  return fallback === "index" ? (_datum, index) => index : (datum) => datum;
+}
+function lineMark(kind, data, options) {
+  const vertical = kind === "lineY";
+  const positionKey = vertical ? options.x : options.y;
+  const valueKey = vertical ? options.y : options.x;
+  const positions = readChannel(data, positionAccessor(positionKey, "index"));
+  const values = readChannel(data, positionAccessor(valueKey, "identity"));
+  const colors = colorChannel(data, options);
+  const positionChannel = {
+    values: positions.filter(isPlaceable),
+    label: channelLabel(positionKey)
+  };
+  const valueChannel = {
+    values: values.filter(isPlaceable),
+    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.stroke },
+        id,
+        context
+      );
+      const lines = [];
+      const dots = [];
+      const points = [];
+      for (const { series, indices } of groupBySeries(
+        data.length,
+        seriesOf
+      ).values()) {
+        const runs = [[]];
+        for (const index of indices) {
+          const position = positions[index];
+          const value = valueOn(valueScale, values[index]);
+          if (!isPlaceable(position) || value === void 0) {
+            runs.push([]);
+            continue;
+          }
+          const along = positionScale.center(position);
+          const across = valueScale.center(value);
+          const xy = vertical ? { x: along, y: across } : { x: across, y: along };
+          runs[runs.length - 1].push(xy);
+          if (options.tip !== false) {
+            points.push({
+              key: `${id}:${index}`,
+              markId: id,
+              index,
+              datum: data[index],
+              x: xy.x,
+              y: xy.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)
+            });
+          }
+          if (options.dots) {
+            dots.push({
+              kind: "circle",
+              key: `${id}:dot:${index}`,
+              series: series.key,
+              role: "mark",
+              cx: xy.x,
+              cy: xy.y,
+              r: DOT_RADIUS,
+              paint: paint({
+                fill: series.color,
+                stroke: context.theme.background,
+                strokeWidth: 1.5,
+                opacity: options.opacity
+              })
+            });
+          }
+        }
+        const d = runs.map((run) => linePath(run, options.curve)).filter((part) => part !== "").join("");
+        lines.push({
+          kind: "path",
+          key: `${id}:line:${series.key}`,
+          series: series.key,
+          role: "mark",
+          d,
+          paint: paint({
+            stroke: series.color,
+            strokeWidth: options.strokeWidth ?? DEFAULT_STROKE_WIDTH,
+            strokeDasharray: options.strokeDasharray,
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            fill: "none",
+            opacity: options.opacity
+          })
+        });
+      }
+      const legend = options.color === void 0 && options.label !== void 0 ? [
+        {
+          key: id,
+          label: options.label,
+          color: options.stroke ?? context.paletteColor(context.markIndex),
+          shape: options.strokeDasharray ? "dashed" : "line"
+        }
+      ] : [];
+      return { nodes: [...lines, ...dots], points, legend };
+    }
+  };
+}
+function lineY(data, options = {}) {
+  return lineMark("lineY", data, options);
+}
+function lineX(data, options = {}) {
+  return lineMark("lineX", data, options);
+}
+export {
+  lineX,
+  lineY
+};
+//# sourceMappingURL=line.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/core/marks/line.ts"],
+  "sourcesContent": ["import { channelLabel, isPlaceable, readChannel } from \"#/core/channel.ts\";\nimport {\n\ttype ChartMarkOptions,\n\tcolorChannel,\n\tgroupBySeries,\n\tmarkId,\n\tpaint,\n\tseriesResolver,\n\tvalueOn,\n} from \"#/core/marks/shared.ts\";\nimport { type ChartXY, linePath } from \"#/core/paths.ts\";\nimport type {\n\tChartAccessor,\n\tChartCurve,\n\tChartMark,\n\tChartPoint,\n\tChartValue,\n\tSceneNode,\n} from \"#/core/types.ts\";\n\nexport interface LineOptions<TDatum> extends ChartMarkOptions<TDatum> {\n\treadonly x?: ChartAccessor<TDatum, ChartValue>;\n\treadonly y?: ChartAccessor<TDatum, ChartValue>;\n\treadonly stroke?: string;\n\treadonly strokeWidth?: number;\n\treadonly strokeDasharray?: string;\n\treadonly curve?: ChartCurve;\n\t/** A dot on every point, not only on the focused one. */\n\treadonly dots?: boolean;\n}\n\nconst DEFAULT_STROKE_WIDTH = 2;\nconst DOT_RADIUS = 3;\n\n/** With no accessor, a line of plain numbers plots each against its index. */\nfunction positionAccessor<TDatum>(\n\taccessor: ChartAccessor<TDatum, ChartValue> | undefined,\n\tfallback: \"index\" | \"identity\",\n): ChartAccessor<TDatum, ChartValue> {\n\tif (accessor !== undefined) {\n\t\treturn accessor;\n\t}\n\treturn fallback === \"index\"\n\t\t? (_datum, index) => index\n\t\t: (datum) => datum as unknown as ChartValue;\n}\n\nfunction lineMark<TDatum>(\n\tkind: \"lineY\" | \"lineX\",\n\tdata: ReadonlyArray<TDatum>,\n\toptions: LineOptions<TDatum>,\n): ChartMark {\n\t// lineY: the value runs up the y axis; lineX: along x, positions down y.\n\tconst vertical = kind === \"lineY\";\n\tconst positionKey = vertical ? options.x : options.y;\n\tconst valueKey = vertical ? options.y : options.x;\n\tconst positions = readChannel(data, positionAccessor(positionKey, \"index\"));\n\tconst values = readChannel(data, positionAccessor(valueKey, \"identity\"));\n\tconst colors = colorChannel(data, options);\n\tconst positionChannel = {\n\t\tvalues: positions.filter(isPlaceable),\n\t\tlabel: channelLabel(positionKey),\n\t};\n\tconst valueChannel = {\n\t\tvalues: values.filter(isPlaceable),\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.stroke },\n\t\t\t\tid,\n\t\t\t\tcontext,\n\t\t\t);\n\t\t\tconst lines: SceneNode[] = [];\n\t\t\tconst dots: SceneNode[] = [];\n\t\t\tconst points: ChartPoint[] = [];\n\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\t// A gap in the data is a gap in the line, not a dive to zero.\n\t\t\t\tconst runs: ChartXY[][] = [[]];\n\t\t\t\tfor (const index of indices) {\n\t\t\t\t\tconst position = positions[index];\n\t\t\t\t\tconst value = valueOn(valueScale, values[index]);\n\t\t\t\t\tif (!isPlaceable(position) || value === undefined) {\n\t\t\t\t\t\truns.push([]);\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 across = valueScale.center(value);\n\t\t\t\t\tconst xy = vertical\n\t\t\t\t\t\t? { x: along, y: across }\n\t\t\t\t\t\t: { x: across, y: along };\n\t\t\t\t\truns[runs.length - 1].push(xy);\n\t\t\t\t\tif (options.tip !== false) {\n\t\t\t\t\t\tpoints.push({\n\t\t\t\t\t\t\tkey: `${id}:${index}`,\n\t\t\t\t\t\t\tmarkId: id,\n\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\tdatum: data[index],\n\t\t\t\t\t\t\tx: xy.x,\n\t\t\t\t\t\t\ty: xy.y,\n\t\t\t\t\t\t\txValue: vertical ? position : value,\n\t\t\t\t\t\t\tyValue: vertical ? value : position,\n\t\t\t\t\t\t\tseries: series.key,\n\t\t\t\t\t\t\tseriesLabel: series.label,\n\t\t\t\t\t\t\tcolor: series.color,\n\t\t\t\t\t\t\ttitle: vertical\n\t\t\t\t\t\t\t\t? context.formatX(position)\n\t\t\t\t\t\t\t\t: context.formatY(position),\n\t\t\t\t\t\t\tvalue: vertical ? context.formatY(value) : context.formatX(value),\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t\tif (options.dots) {\n\t\t\t\t\t\tdots.push({\n\t\t\t\t\t\t\tkind: \"circle\",\n\t\t\t\t\t\t\tkey: `${id}:dot:${index}`,\n\t\t\t\t\t\t\tseries: series.key,\n\t\t\t\t\t\t\trole: \"mark\",\n\t\t\t\t\t\t\tcx: xy.x,\n\t\t\t\t\t\t\tcy: xy.y,\n\t\t\t\t\t\t\tr: DOT_RADIUS,\n\t\t\t\t\t\t\tpaint: paint({\n\t\t\t\t\t\t\t\tfill: series.color,\n\t\t\t\t\t\t\t\tstroke: context.theme.background,\n\t\t\t\t\t\t\t\tstrokeWidth: 1.5,\n\t\t\t\t\t\t\t\topacity: options.opacity,\n\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tconst d = runs\n\t\t\t\t\t.map((run) => linePath(run, options.curve))\n\t\t\t\t\t.filter((part) => part !== \"\")\n\t\t\t\t\t.join(\"\");\n\t\t\t\tlines.push({\n\t\t\t\t\tkind: \"path\",\n\t\t\t\t\tkey: `${id}:line:${series.key}`,\n\t\t\t\t\tseries: series.key,\n\t\t\t\t\trole: \"mark\",\n\t\t\t\t\td,\n\t\t\t\t\tpaint: paint({\n\t\t\t\t\t\tstroke: series.color,\n\t\t\t\t\t\tstrokeWidth: options.strokeWidth ?? DEFAULT_STROKE_WIDTH,\n\t\t\t\t\t\tstrokeDasharray: options.strokeDasharray,\n\t\t\t\t\t\tstrokeLinecap: \"round\",\n\t\t\t\t\t\tstrokeLinejoin: \"round\",\n\t\t\t\t\t\tfill: \"none\",\n\t\t\t\t\t\topacity: options.opacity,\n\t\t\t\t\t}),\n\t\t\t\t});\n\t\t\t}\n\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:\n\t\t\t\t\t\t\t\t\toptions.stroke ?? context.paletteColor(context.markIndex),\n\t\t\t\t\t\t\t\tshape: options.strokeDasharray\n\t\t\t\t\t\t\t\t\t? (\"dashed\" as const)\n\t\t\t\t\t\t\t\t\t: (\"line\" 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: [...lines, ...dots], points, legend };\n\t\t},\n\t};\n}\n\n/** A line whose value runs up the y axis, over x positions: a time series. */\nexport function lineY<TDatum>(\n\tdata: ReadonlyArray<TDatum>,\n\toptions: LineOptions<TDatum> = {},\n): ChartMark {\n\treturn lineMark(\"lineY\", data, options);\n}\n\n/** A line whose value runs along x, over y positions. */\nexport function lineX<TDatum>(\n\tdata: ReadonlyArray<TDatum>,\n\toptions: LineOptions<TDatum> = {},\n): ChartMark {\n\treturn lineMark(\"lineX\", data, options);\n}\n"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -0,0 +1,61 @@
+import { type ChartMarkOptions } from "./shared.js";
+import type { ChartAccessor, ChartMark, ChartValue } from "../types.js";
+interface SliceAngle {
+    readonly startAngle: number;
+    readonly endAngle: number;
+    readonly fraction: number;
+}
+/**
+ * Splits a turn between values, proportionally. Negative values count as
+ * zero: a pie of signed numbers has no honest reading.
+ */
+export declare function sliceAngles(values: ReadonlyArray<number>, padAngle?: number, startAngle?: number, endAngle?: number): ReadonlyArray<SliceAngle>;
+export interface ArcOptions<TDatum> extends ChartMarkOptions<TDatum> {
+    /** The slice's name: what the legend, tooltip and table call it. */
+    readonly category: ChartAccessor<TDatum, ChartValue>;
+    readonly value: ChartAccessor<TDatum, ChartValue>;
+    /** Share of the radius left empty in the middle: 0 is a pie, 0.6 a donut. */
+    readonly innerRadius?: number;
+    /** Degrees of blank between two slices. */
+    readonly padAngle?: number;
+    readonly startAngle?: number;
+    readonly endAngle?: number;
+    readonly fill?: string;
+    readonly stroke?: string;
+}
+/** A pie, or a donut with `innerRadius`: each datum a slice of the whole. */
+export declare function arc<TDatum>(data: ReadonlyArray<TDatum>, options: ArcOptions<TDatum>): ChartMark;
+/** A ring of slices: `arc` with the middle left empty. */
+export declare function donut<TDatum>(data: ReadonlyArray<TDatum>, options: ArcOptions<TDatum>): ChartMark;
+export interface RadialBarOptions<TDatum> extends ChartMarkOptions<TDatum> {
+    readonly category: ChartAccessor<TDatum, ChartValue>;
+    readonly value: ChartAccessor<TDatum, ChartValue>;
+    /** The value a full turn stands for. Defaults to the largest value, rounded up. */
+    readonly max?: number;
+    /** Share of the radius left empty in the middle. */
+    readonly innerRadius?: number;
+    /** Share of each ring's thickness left empty between two rings. */
+    readonly gap?: number;
+    /** Draw each ring's empty remainder, so the bars read against a full turn. */
+    readonly track?: boolean;
+    readonly fill?: string;
+}
+/** Concentric rings, each filled as far round as its value: progress against a common maximum. */
+export declare function radialBar<TDatum>(data: ReadonlyArray<TDatum>, options: RadialBarOptions<TDatum>): ChartMark;
+export interface RadarOptions<TDatum> extends ChartMarkOptions<TDatum> {
+    /** The spoke a value sits on: "Vitesse", "Endurance"… */
+    readonly axis: ChartAccessor<TDatum, ChartValue>;
+    readonly value: ChartAccessor<TDatum, ChartValue>;
+    /** The value the outer ring stands for. Defaults to the largest value, rounded up. */
+    readonly max?: number;
+    /** Grid rings between the centre and the outer ring. */
+    readonly rings?: number;
+    readonly fillOpacity?: number;
+    readonly fill?: string;
+    /** `false` leaves the grid and spoke labels to another radar on the same chart. */
+    readonly grid?: boolean;
+}
+/** Values on spokes joined into a polygon, one per series: profiles compared at a glance. */
+export declare function radar<TDatum>(data: ReadonlyArray<TDatum>, options: RadarOptions<TDatum>): ChartMark;
+export {};
+//# sourceMappingURL=polar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"polar.d.ts","sourceRoot":"","sources":["../../../src/core/marks/polar.ts"],"names":[],"mappings":"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"}