@rowsncolumns/charts 28.0.0 → 28.1.1

package/dist/esm/utils/chart-styles.js

@@ -0,0 +1,357 @@
+/**
+ * Office's Change Colors gallery. Colorful 1 is the theme itself (no
+ * `colors` — the renderer keeps its accent fallback); the rest are the
+ * default Office theme's derived palettes.
+ */
+export const CHART_COLOR_PALETTES = [
+    { id: "colorful1", label: "Colorful Palette 1", kind: "colorful" },
+    {
+        id: "colorful2",
+        label: "Colorful Palette 2",
+        kind: "colorful",
+        colors: ["#4472C4", "#A5A5A5", "#5B9BD5", "#264478", "#636363", "#255E91"],
+    },
+    {
+        id: "colorful3",
+        label: "Colorful Palette 3",
+        kind: "colorful",
+        colors: ["#ED7D31", "#FFC000", "#70AD47", "#9E480E", "#997300", "#43682B"],
+    },
+    {
+        id: "colorful4",
+        label: "Colorful Palette 4",
+        kind: "colorful",
+        colors: ["#70AD47", "#4472C4", "#FFC000", "#43682B", "#264478", "#997300"],
+    },
+    {
+        id: "mono1",
+        label: "Monochromatic Palette 1",
+        kind: "monochromatic",
+        colors: ["#1F3864", "#2F5597", "#4472C4", "#8FAADC", "#B4C7E7", "#DAE3F3"],
+    },
+    {
+        id: "mono2",
+        label: "Monochromatic Palette 2",
+        kind: "monochromatic",
+        colors: ["#833C0B", "#C55A11", "#ED7D31", "#F4B183", "#F8CBAD", "#FBE5D6"],
+    },
+    {
+        id: "mono3",
+        label: "Monochromatic Palette 3",
+        kind: "monochromatic",
+        colors: ["#525252", "#7B7B7B", "#A5A5A5", "#C9C9C9", "#DBDBDB", "#EDEDED"],
+    },
+    {
+        id: "mono4",
+        label: "Monochromatic Palette 4",
+        kind: "monochromatic",
+        colors: ["#375623", "#548235", "#70AD47", "#A9D18E", "#C5E0B4", "#E2F0D9"],
+    },
+];
+const stripSeriesColor = (entry) => {
+    const { color: _color, gradient: _gradient, dataPointColors: _dataPointColors, negativeColor: _negativeColor, ...rest } = entry;
+    return rest;
+};
+/**
+ * Strip the per-series colour overrides so the chart-level palette shows
+ * through. Hierarchy specs (treemap / sunburst) carry no series.
+ */
+const withoutSeriesColors = (spec) => "series" in spec && Array.isArray(spec.series)
+    ? { ...spec, series: spec.series.map(stripSeriesColor) }
+    : spec;
+/**
+ * Change Colors: set the palette and clear every series' own colour so the
+ * palette applies (a series colour always wins over the palette).
+ */
+export const applyChartColorPalette = (spec, palette) => ({
+    ...withoutSeriesColors(spec),
+    palette: palette.colors ? [...palette.colors] : undefined,
+});
+/**
+ * Reset to Match Style: drop the per-series formatting overrides so the
+ * series follow the chart style's palette again. Chart-level fields are
+ * untouched — they *are* the style.
+ */
+export const resetChartToMatchStyle = (spec) => withoutSeriesColors(spec);
+/**
+ * The series colour cycle a renderer should use: the spec's palette when
+ * one is set, else the caller's theme accents.
+ */
+export const getChartPalette = (spec, fallback) => spec?.palette && spec.palette.length > 0
+    ? [...spec.palette]
+    : [...fallback];
+const GRAYSCALE_PALETTE = [
+    "#404040",
+    "#7F7F7F",
+    "#A5A5A5",
+    "#BFBFBF",
+    "#D9D9D9",
+    "#595959",
+];
+const MONOCHROME_PALETTE = CHART_COLOR_PALETTES.find((palette) => palette.id === "mono1").colors;
+const COLORFUL_PREVIEW = ["#4472C4", "#ED7D31", "#A5A5A5", "#FFC000"];
+const setTitleFormat = (spec, format) => ({
+    ...(spec.titleTextFormat ?? {}),
+    ...format,
+});
+const setAxisGridlines = (spec, show) => ({
+    valueAxisOptions: {
+        ...(spec.valueAxisOptions ?? {}),
+        showMajorGridlines: show,
+    },
+});
+/** Text colour for every chart text element (dark-frame styles). */
+const setTextColor = (spec, color) => ({
+    titleTextFormat: setTitleFormat(spec, { color }),
+    legend: {
+        ...(spec.legend ?? {}),
+        textFormat: { ...(spec.legend?.textFormat ?? {}), color },
+    },
+    valueAxisOptions: {
+        ...(spec.valueAxisOptions ?? {}),
+        textFormat: { ...(spec.valueAxisOptions?.textFormat ?? {}), color },
+    },
+    categoryAxisOptions: {
+        ...(spec.categoryAxisOptions ?? {}),
+        textFormat: { ...(spec.categoryAxisOptions?.textFormat ?? {}), color },
+    },
+    dataLabels: {
+        ...(spec.dataLabels ?? {}),
+        textFormat: { ...(spec.dataLabels?.textFormat ?? {}), color },
+    },
+});
+/**
+ * The Chart Styles gallery. Each entry pins the look Excel's style of that
+ * id implies onto the spec fields both renderers read: chart-area fill,
+ * gridlines, data labels, legend placement, title font and — for the
+ * grayscale / monochromatic rows — the palette. Per-series colours are
+ * left alone (Reset to Match Style clears them).
+ */
+export const CHART_STYLES = [
+    {
+        id: 2,
+        label: "Style 1",
+        preview: { background: "#FFFFFF", bars: COLORFUL_PREVIEW },
+        apply: (spec) => ({
+            ...spec,
+            chartStyle: 2,
+            backgroundColor: undefined,
+            ...setAxisGridlines(spec, true),
+            dataLabels: { ...(spec.dataLabels ?? {}), show: false },
+            titleTextFormat: setTitleFormat(spec, {
+                fontSize: 14,
+                bold: false,
+                color: undefined,
+            }),
+        }),
+    },
+    {
+        id: 10,
+        label: "Style 2",
+        preview: { background: "#FFFFFF", bars: COLORFUL_PREVIEW },
+        apply: (spec) => ({
+            ...spec,
+            chartStyle: 10,
+            backgroundColor: undefined,
+            ...setAxisGridlines(spec, true),
+            dataLabels: {
+                ...(spec.dataLabels ?? {}),
+                show: true,
+                position: "outsideEnd",
+            },
+            legend: { ...(spec.legend ?? {}), position: "top" },
+            titleTextFormat: setTitleFormat(spec, { fontSize: 16, bold: true }),
+        }),
+    },
+    {
+        id: 18,
+        label: "Style 3",
+        preview: { background: "#FFFFFF", bars: COLORFUL_PREVIEW },
+        apply: (spec) => ({
+            ...spec,
+            chartStyle: 18,
+            backgroundColor: undefined,
+            ...setAxisGridlines(spec, false),
+            dataLabels: {
+                ...(spec.dataLabels ?? {}),
+                show: true,
+                position: "insideEnd",
+            },
+            legend: { ...(spec.legend ?? {}), position: "bottom" },
+            titleTextFormat: setTitleFormat(spec, { fontSize: 14, bold: true }),
+        }),
+    },
+    {
+        id: 26,
+        label: "Style 4",
+        preview: { background: "#F2F2F2", bars: COLORFUL_PREVIEW },
+        apply: (spec) => ({
+            ...spec,
+            chartStyle: 26,
+            backgroundColor: "#F2F2F2",
+            ...setAxisGridlines(spec, true),
+            dataLabels: { ...(spec.dataLabels ?? {}), show: false },
+            legend: { ...(spec.legend ?? {}), position: "bottom" },
+            titleTextFormat: setTitleFormat(spec, { fontSize: 18, bold: true }),
+        }),
+    },
+    {
+        id: 1,
+        label: "Style 5",
+        preview: { background: "#FFFFFF", bars: GRAYSCALE_PALETTE.slice(0, 4) },
+        apply: (spec) => ({
+            ...spec,
+            chartStyle: 1,
+            backgroundColor: undefined,
+            palette: [...GRAYSCALE_PALETTE],
+            ...setAxisGridlines(spec, true),
+            titleTextFormat: setTitleFormat(spec, { fontSize: 14, bold: false }),
+        }),
+    },
+    {
+        id: 3,
+        label: "Style 6",
+        preview: { background: "#FFFFFF", bars: MONOCHROME_PALETTE.slice(0, 4) },
+        apply: (spec) => ({
+            ...spec,
+            chartStyle: 3,
+            backgroundColor: undefined,
+            palette: [...MONOCHROME_PALETTE],
+            ...setAxisGridlines(spec, true),
+            titleTextFormat: setTitleFormat(spec, { fontSize: 14, bold: false }),
+        }),
+    },
+    {
+        id: 34,
+        label: "Style 7",
+        preview: { background: "#404040", bars: COLORFUL_PREVIEW },
+        apply: (spec) => ({
+            ...spec,
+            chartStyle: 34,
+            backgroundColor: "#404040",
+            ...setTextColor(spec, "#F2F2F2"),
+            valueAxisOptions: {
+                ...(spec.valueAxisOptions ?? {}),
+                textFormat: { ...(spec.valueAxisOptions?.textFormat ?? {}), color: "#F2F2F2" },
+                showMajorGridlines: true,
+            },
+            titleTextFormat: setTitleFormat(spec, {
+                fontSize: 16,
+                bold: true,
+                color: "#FFFFFF",
+            }),
+        }),
+    },
+    {
+        id: 42,
+        label: "Style 8",
+        preview: { background: "#000000", bars: COLORFUL_PREVIEW },
+        apply: (spec) => ({
+            ...spec,
+            chartStyle: 42,
+            backgroundColor: "#000000",
+            ...setTextColor(spec, "#FFFFFF"),
+            valueAxisOptions: {
+                ...(spec.valueAxisOptions ?? {}),
+                textFormat: { ...(spec.valueAxisOptions?.textFormat ?? {}), color: "#FFFFFF" },
+                showMajorGridlines: false,
+            },
+            titleTextFormat: setTitleFormat(spec, {
+                fontSize: 16,
+                bold: true,
+                color: "#FFFFFF",
+            }),
+        }),
+    },
+];
+export const applyChartStyle = (spec, style) => style.apply(spec);
+/** Excel inserts placeholder axis titles when a layout shows axis titles the chart lacks. */
+const AXIS_TITLE_PLACEHOLDER = "Axis Title";
+const withAxisTitles = (spec, show) => show
+    ? {
+        verticalAxisTitle: spec.verticalAxisTitle || AXIS_TITLE_PLACEHOLDER,
+        horizontalAxisTitle: spec.horizontalAxisTitle || AXIS_TITLE_PLACEHOLDER,
+    }
+    : { verticalAxisTitle: undefined, horizontalAxisTitle: undefined };
+const withDataLabels = (spec, show, position) => ({
+    dataLabels: {
+        ...(spec.dataLabels ?? {}),
+        show,
+        ...(show && position ? { position } : {}),
+    },
+});
+/**
+ * Excel's Quick Layout gallery (the first six of the column-chart set).
+ * Layouts arrange the existing elements; they never touch colours.
+ */
+export const CHART_QUICK_LAYOUTS = [
+    {
+        id: 1,
+        label: "Layout 1",
+        apply: (spec) => ({
+            ...spec,
+            legend: { ...(spec.legend ?? {}), position: "right" },
+            ...withDataLabels(spec, false),
+            ...withAxisTitles(spec, false),
+        }),
+    },
+    {
+        id: 2,
+        label: "Layout 2",
+        apply: (spec) => ({
+            ...spec,
+            legend: { ...(spec.legend ?? {}), position: "top" },
+            ...withDataLabels(spec, true, "outsideEnd"),
+            ...withAxisTitles(spec, false),
+            valueAxisOptions: {
+                ...(spec.valueAxisOptions ?? {}),
+                showMajorGridlines: false,
+            },
+        }),
+    },
+    {
+        id: 3,
+        label: "Layout 3",
+        apply: (spec) => ({
+            ...spec,
+            legend: { ...(spec.legend ?? {}), position: "bottom" },
+            ...withDataLabels(spec, false),
+            ...withAxisTitles(spec, false),
+        }),
+    },
+    {
+        id: 4,
+        label: "Layout 4",
+        apply: (spec) => ({
+            ...spec,
+            legend: { ...(spec.legend ?? {}), position: "none" },
+            ...withDataLabels(spec, true, "insideEnd"),
+            ...withAxisTitles(spec, false),
+            valueAxisOptions: {
+                ...(spec.valueAxisOptions ?? {}),
+                showMajorGridlines: false,
+            },
+        }),
+    },
+    {
+        id: 5,
+        label: "Layout 5",
+        apply: (spec) => ({
+            ...spec,
+            legend: { ...(spec.legend ?? {}), position: "none" },
+            ...withDataLabels(spec, false),
+            ...withAxisTitles(spec, true),
+        }),
+    },
+    {
+        id: 6,
+        label: "Layout 6",
+        apply: (spec) => ({
+            ...spec,
+            legend: { ...(spec.legend ?? {}), position: "right" },
+            ...withDataLabels(spec, false),
+            ...withAxisTitles(spec, true),
+        }),
+    },
+];
+export const applyChartQuickLayout = (spec, layout) => layout.apply(spec);

package/dist/esm/utils/empty-cells.d.ts

@@ -0,0 +1,30 @@
+import type { EmbeddedChart } from "@rowsncolumns/spreadsheet";
+type ChartSpec = EmbeddedChart["spec"];
+export type EmptyCellsPolicy = NonNullable<ChartSpec["emptyCells"]>;
+type EmptyCellsSpec = Pick<ChartSpec, "emptyCells" | "showNaAsEmpty">;
+export declare const isChartErrorValue: (value: unknown) => boolean;
+/** Excel's default is a gap. */
+export declare const getEmptyCellsPolicy: (spec: EmptyCellsSpec) => EmptyCellsPolicy;
+/** Only a line-like series has a line to carry across the hole. */
+export declare const isLineLikeChartType: (chartType: ChartSpec["chartType"] | null | undefined) => boolean;
+/**
+ * "Connect data points with line" — the renderer bridges the gap
+ * (echarts `connectNulls`, plotly `connectgaps`).
+ */
+export declare const connectsAcrossEmptyCells: (spec: EmptyCellsSpec, lineLike: boolean) => boolean;
+/**
+ * Plot-ready values for one series under the chart's "Hidden and Empty
+ * Cells" settings. `values` are the sanitized numbers (blanks and errors
+ * already `undefined`), `rawValues` the cells as read, index-aligned, so
+ * a blank can be told from an error:
+ *
+ * - a blank follows `emptyCells`: `"zero"` plots 0, `"gaps"` and
+ *   `"connect"` leave `null` (the renderer's connect flag bridges it);
+ * - an error is a blank while `showNaAsEmpty` is on (Excel's default);
+ *   with it off a line-like series is drawn straight through the point
+ *   (linear interpolation between its numeric neighbours — Excel's
+ *   pre-2016 #N/A behaviour), and any other series leaves a gap.
+ */
+export declare const applyEmptyCellsPolicy: (values: readonly (number | null | undefined)[], rawValues: readonly unknown[], spec: EmptyCellsSpec, lineLike: boolean) => (number | null)[];
+export {};
+//# sourceMappingURL=empty-cells.d.ts.map

package/dist/esm/utils/empty-cells.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty-cells.d.ts","sourceRoot":"","sources":["../../../utils/empty-cells.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,KAAK,SAAS,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC;AAEvC,MAAM,MAAM,gBAAgB,GAAG,WAAW,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC,CAAC;AAEpE,KAAK,cAAc,GAAG,IAAI,CAAC,SAAS,EAAE,YAAY,GAAG,eAAe,CAAC,CAAC;AAetE,eAAO,MAAM,iBAAiB,GAAI,OAAO,OAAO,KAAG,OACuB,CAAC;AAE3E,gCAAgC;AAChC,eAAO,MAAM,mBAAmB,GAAI,MAAM,cAAc,KAAG,gBAChC,CAAC;AAE5B,mEAAmE;AACnE,eAAO,MAAM,mBAAmB,GAC9B,WAAW,SAAS,CAAC,WAAW,CAAC,GAAG,IAAI,GAAG,SAAS,KACnD,OAAuD,CAAC;AAE3D;;;GAGG;AACH,eAAO,MAAM,wBAAwB,GACnC,MAAM,cAAc,EACpB,UAAU,OAAO,KAChB,OAA8D,CAAC;AAElE;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,qBAAqB,GAChC,QAAQ,SAAS,CAAC,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,EAAE,EAC9C,WAAW,SAAS,OAAO,EAAE,EAC7B,MAAM,cAAc,EACpB,UAAU,OAAO,KAChB,CAAC,MAAM,GAAG,IAAI,CAAC,EA4BjB,CAAC"}

package/dist/esm/utils/empty-cells.js

@@ -0,0 +1,67 @@
+const CHART_ERROR_VALUES = new Set([
+    "#N/A",
+    "#VALUE!",
+    "#REF!",
+    "#DIV/0!",
+    "#NUM!",
+    "#NAME?",
+    "#NULL!",
+    "#SPILL!",
+    "#CALC!",
+    "#GETTING_DATA",
+]);
+export const isChartErrorValue = (value) => typeof value === "string" && CHART_ERROR_VALUES.has(value.toUpperCase());
+/** Excel's default is a gap. */
+export const getEmptyCellsPolicy = (spec) => spec.emptyCells ?? "gaps";
+/** Only a line-like series has a line to carry across the hole. */
+export const isLineLikeChartType = (chartType) => chartType === "line" || chartType === "area";
+/**
+ * "Connect data points with line" — the renderer bridges the gap
+ * (echarts `connectNulls`, plotly `connectgaps`).
+ */
+export const connectsAcrossEmptyCells = (spec, lineLike) => lineLike && getEmptyCellsPolicy(spec) === "connect";
+/**
+ * Plot-ready values for one series under the chart's "Hidden and Empty
+ * Cells" settings. `values` are the sanitized numbers (blanks and errors
+ * already `undefined`), `rawValues` the cells as read, index-aligned, so
+ * a blank can be told from an error:
+ *
+ * - a blank follows `emptyCells`: `"zero"` plots 0, `"gaps"` and
+ *   `"connect"` leave `null` (the renderer's connect flag bridges it);
+ * - an error is a blank while `showNaAsEmpty` is on (Excel's default);
+ *   with it off a line-like series is drawn straight through the point
+ *   (linear interpolation between its numeric neighbours — Excel's
+ *   pre-2016 #N/A behaviour), and any other series leaves a gap.
+ */
+export const applyEmptyCellsPolicy = (values, rawValues, spec, lineLike) => {
+    const policy = getEmptyCellsPolicy(spec);
+    const naAsEmpty = spec.showNaAsEmpty !== false;
+    const plotted = values.map((value) => typeof value === "number" && Number.isFinite(value) ? value : null);
+    const legacyErrors = [];
+    for (let i = 0; i < plotted.length; i++) {
+        if (plotted[i] !== null)
+            continue;
+        if (!naAsEmpty && isChartErrorValue(rawValues[i])) {
+            legacyErrors.push(i);
+            continue;
+        }
+        if (policy === "zero")
+            plotted[i] = 0;
+    }
+    if (lineLike) {
+        for (const i of legacyErrors) {
+            let prev = i - 1;
+            while (prev >= 0 && plotted[prev] === null)
+                prev--;
+            let next = i + 1;
+            while (next < plotted.length && plotted[next] === null)
+                next++;
+            if (prev < 0 || next >= plotted.length)
+                continue;
+            const a = plotted[prev];
+            const b = plotted[next];
+            plotted[i] = a + ((b - a) * (i - prev)) / (next - prev);
+        }
+    }
+    return plotted;
+};

package/dist/esm/utils/overrides.d.ts

@@ -2,7 +2,12 @@ import type { LegendComponentOption } from "echarts";
 /** Build an echarts `textStyle` from a parsed `ChartTextFormat`. */
 export declare const textFormatToEchartsTextStyle: (fmt: any) => Record<string, any> | undefined;
 export declare const applyLegendOverrides: (legend: LegendComponentOption, opts: any) => LegendComponentOption;
-export declare const applyAxisOverrides: (axis: any, opts: any) => any;
+/**
+ * `numberFormatPattern` is the axis' RESOLVED format (explicit pattern or
+ * the linked source-cell format — see `resolveValueAxisNumberFormat`); it
+ * becomes the tick-label formatter.
+ */
+export declare const applyAxisOverrides: (axis: any, opts: any, numberFormatPattern?: string) => any;
 export declare const dataLabelFormatter: (opts: any) => (params: any) => string;
 export declare const buildSeriesLabelOption: (opts: any) => {
     readonly show: true;

package/dist/esm/utils/overrides.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overrides.d.ts","sourceRoot":"","sources":["../../../utils/overrides.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AASrD,oEAAoE;AACpE,eAAO,MAAM,4BAA4B,GAAI,KAAK,GAAG,oCASpD,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAC/B,QAAQ,qBAAqB,EAC7B,MAAM,GAAG,KACR,qBA6CF,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,MAAM,GAAG,EAAE,MAAM,GAAG,QAsBtD,CAAC;AAqBF,eAAO,MAAM,kBAAkB,GAAI,MAAM,GAAG,MAAM,QAAQ,GAAG,WA4B5D,CAAC;AAWF,eAAO,MAAM,sBAAsB,GAAI,MAAM,GAAG;;;iCAvCU,GAAG;aA+C5D,CAAC"}
+{"version":3,"file":"overrides.d.ts","sourceRoot":"","sources":["../../../utils/overrides.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAWrD,oEAAoE;AACpE,eAAO,MAAM,4BAA4B,GAAI,KAAK,GAAG,oCASpD,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAC/B,QAAQ,qBAAqB,EAC7B,MAAM,GAAG,KACR,qBA6CF,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,GAC7B,MAAM,GAAG,EACT,MAAM,GAAG,EACT,sBAAsB,MAAM,QA4B7B,CAAC;AAqBF,eAAO,MAAM,kBAAkB,GAAI,MAAM,GAAG,MAAM,QAAQ,GAAG,WA4B5D,CAAC;AAWF,eAAO,MAAM,sBAAsB,GAAI,MAAM,GAAG;;;iCAvCU,GAAG;aA+C5D,CAAC"}

package/dist/esm/utils/overrides.js

@@ -1,4 +1,5 @@
 import { ssfFormat } from "@rowsncolumns/utils";
+import { valueAxisLabelFormatter } from "./axis-number-format";
 // Map ChartSpec.legend / dataLabels / axisOptions to ECharts option
 // fragments. Each helper is a no-op when the spec field is missing, so
 // callers can spread the result without checks. Shared by the main
@@ -69,10 +70,21 @@ export const applyLegendOverrides = (legend, opts) => {
     }
     return next;
 };
-export const applyAxisOverrides = (axis, opts) => {
-    if (!opts)
+/**
+ * `numberFormatPattern` is the axis' RESOLVED format (explicit pattern or
+ * the linked source-cell format — see `resolveValueAxisNumberFormat`); it
+ * becomes the tick-label formatter.
+ */
+export const applyAxisOverrides = (axis, opts, numberFormatPattern) => {
+    const formatter = valueAxisLabelFormatter(numberFormatPattern);
+    if (!opts && !formatter)
         return axis;
     const next = { ...axis };
+    if (formatter) {
+        next.axisLabel = { ...(next.axisLabel ?? {}), formatter };
+    }
+    if (!opts)
+        return next;
     if (opts.logarithmic)
         next.type = "log";
     if (opts.reverse)

package/dist/esm/utils/pie-explosion.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Exploded pie / doughnut (rowsncolumns/spreadsheet#668 C-32). Excel stores
+ * the explosion as a percentage of the pie radius (`<c:explosion val="25"/>`,
+ * 25 being the gallery default); each slice moves outward along its own
+ * bisector by that much. Both renderers resolve the spec value here.
+ */
+/** Excel's gallery "Exploded Pie" / "Exploded Doughnut" explosion. */
+export declare const DEFAULT_PIE_EXPLOSION = 25;
+/**
+ * The explosion percentage a spec asks for, `0` when the slices touch
+ * (absent, non-numeric, negative or `0`).
+ */
+export declare const resolveExplosion: (spec: {
+    explosion?: number | null;
+} | null | undefined) => number;
+/**
+ * The outer radius of a pie in pixels for the container it renders in:
+ * echarts' `radius` is a percentage of half the shorter side (default
+ * `"75%"`) or an absolute pixel count.
+ */
+export declare const pieRadiusPx: (radius: (string | number)[] | null | undefined, width: number, height: number) => number;
+/**
+ * echarts has no slice offset of its own; the exploded look is its
+ * `select` state (`selectedOffset`, in pixels) with every slice selected.
+ * The percentage is of the pie radius, so the offset scales with it.
+ */
+export declare const explosionOffsetPx: (explosion: number, radiusPx: number) => number;
+/** plotly pie `pull` — a fraction of the radius. */
+export declare const explosionToPlotlyPull: (explosion: number) => number | undefined;
+//# sourceMappingURL=pie-explosion.d.ts.map

package/dist/esm/utils/pie-explosion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pie-explosion.d.ts","sourceRoot":"","sources":["../../../utils/pie-explosion.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,sEAAsE;AACtE,eAAO,MAAM,qBAAqB,KAAK,CAAC;AAKxC;;;GAGG;AACH,eAAO,MAAM,gBAAgB,GAC3B,MAAM;IAAE,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,GAAG,IAAI,GAAG,SAAS,KACrD,MAIF,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,WAAW,GACtB,QAAQ,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,GAAG,IAAI,GAAG,SAAS,EAC9C,OAAO,MAAM,EACb,QAAQ,MAAM,KACb,MAOF,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,GAAI,WAAW,MAAM,EAAE,UAAU,MAAM,WAC3B,CAAC;AAE3C,oDAAoD;AACpD,eAAO,MAAM,qBAAqB,GAAI,WAAW,MAAM,uBACG,CAAC"}

package/dist/esm/utils/pie-explosion.js

@@ -0,0 +1,43 @@
+/**
+ * Exploded pie / doughnut (rowsncolumns/spreadsheet#668 C-32). Excel stores
+ * the explosion as a percentage of the pie radius (`<c:explosion val="25"/>`,
+ * 25 being the gallery default); each slice moves outward along its own
+ * bisector by that much. Both renderers resolve the spec value here.
+ */
+/** Excel's gallery "Exploded Pie" / "Exploded Doughnut" explosion. */
+export const DEFAULT_PIE_EXPLOSION = 25;
+/** OOXML `CT_UnsignedInt` explosion — Excel's dialog caps it at 400%. */
+const MAX_PIE_EXPLOSION = 400;
+/**
+ * The explosion percentage a spec asks for, `0` when the slices touch
+ * (absent, non-numeric, negative or `0`).
+ */
+export const resolveExplosion = (spec) => {
+    const explosion = spec?.explosion;
+    if (typeof explosion !== "number" || !Number.isFinite(explosion))
+        return 0;
+    return Math.min(MAX_PIE_EXPLOSION, Math.max(0, explosion));
+};
+/**
+ * The outer radius of a pie in pixels for the container it renders in:
+ * echarts' `radius` is a percentage of half the shorter side (default
+ * `"75%"`) or an absolute pixel count.
+ */
+export const pieRadiusPx = (radius, width, height) => {
+    const half = Math.max(0, Math.min(width, height)) / 2;
+    const outer = radius?.[radius.length - 1] ?? "75%";
+    if (typeof outer === "number")
+        return Math.max(0, outer);
+    const parsed = Number.parseFloat(outer);
+    if (!Number.isFinite(parsed))
+        return half * 0.75;
+    return outer.trim().endsWith("%") ? (half * parsed) / 100 : parsed;
+};
+/**
+ * echarts has no slice offset of its own; the exploded look is its
+ * `select` state (`selectedOffset`, in pixels) with every slice selected.
+ * The percentage is of the pie radius, so the offset scales with it.
+ */
+export const explosionOffsetPx = (explosion, radiusPx) => Math.round((radiusPx * explosion) / 100);
+/** plotly pie `pull` — a fraction of the radius. */
+export const explosionToPlotlyPull = (explosion) => explosion > 0 ? Math.min(1, explosion / 100) : undefined;

package/dist/esm/utils/plotly-click.d.ts

@@ -0,0 +1,34 @@
+/**
+ * plotly click → chart selection (rowsncolumns/spreadsheet#668 C-37 / C-38).
+ *
+ * The plotly renderer is interactive with `layout.dragmode: false`: plotly
+ * reports `plotly_click` but never starts a drag, so a body drag reaches
+ * the embed's move handler instead. plotly does not track that drag either
+ * and treats the mouseup as a click, so the caller compares the click's
+ * pointer position with where the pointer went down.
+ */
+/** Pointer travel (px) beyond which a mouseup is a drag, not a click. */
+export declare const CLICK_DRAG_TOLERANCE_PX = 3;
+export declare const wasDragged: (pointerDown: {
+    x: number;
+    y: number;
+} | undefined, clickEvent: {
+    clientX?: number;
+    clientY?: number;
+} | undefined) => boolean;
+export type PlotlyClickPoint = {
+    curveNumber: number;
+    /** Index of the clicked point within its trace (a category index). */
+    pointNumber?: number;
+    data?: unknown;
+};
+/**
+ * The `spec.series` entry (and data point) a plotly click lands on. Traces
+ * tagged with `meta.rncSeriesIndex` resolve through the tag; untagged ones
+ * map by curve position while it fits; anything else is not a series.
+ */
+export declare const resolvePlotlyClickSelection: (points: ReadonlyArray<PlotlyClickPoint> | undefined, seriesCount: number) => {
+    seriesIndex: number;
+    dataIndex?: number;
+} | undefined;
+//# sourceMappingURL=plotly-click.d.ts.map

package/dist/esm/utils/plotly-click.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"plotly-click.d.ts","sourceRoot":"","sources":["../../../utils/plotly-click.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,yEAAyE;AACzE,eAAO,MAAM,uBAAuB,IAAI,CAAC;AAEzC,eAAO,MAAM,UAAU,GACrB,aAAa;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,SAAS,EACjD,YAAY;IAAE,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,SAAS,KAC7D,OAQF,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,WAAW,EAAE,MAAM,CAAC;IACpB,sEAAsE;IACtE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,2BAA2B,GACtC,QAAQ,aAAa,CAAC,gBAAgB,CAAC,GAAG,SAAS,EACnD,aAAa,MAAM,KAClB;IAAE,WAAW,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,SAkBhD,CAAC"}

package/dist/esm/utils/plotly-click.js

@@ -0,0 +1,44 @@
+/**
+ * plotly click → chart selection (rowsncolumns/spreadsheet#668 C-37 / C-38).
+ *
+ * The plotly renderer is interactive with `layout.dragmode: false`: plotly
+ * reports `plotly_click` but never starts a drag, so a body drag reaches
+ * the embed's move handler instead. plotly does not track that drag either
+ * and treats the mouseup as a click, so the caller compares the click's
+ * pointer position with where the pointer went down.
+ */
+/** Pointer travel (px) beyond which a mouseup is a drag, not a click. */
+export const CLICK_DRAG_TOLERANCE_PX = 3;
+export const wasDragged = (pointerDown, clickEvent) => {
+    if (!pointerDown || !clickEvent)
+        return false;
+    const { clientX, clientY } = clickEvent;
+    if (typeof clientX !== "number" || typeof clientY !== "number")
+        return false;
+    return (Math.abs(clientX - pointerDown.x) > CLICK_DRAG_TOLERANCE_PX ||
+        Math.abs(clientY - pointerDown.y) > CLICK_DRAG_TOLERANCE_PX);
+};
+/**
+ * The `spec.series` entry (and data point) a plotly click lands on. Traces
+ * tagged with `meta.rncSeriesIndex` resolve through the tag; untagged ones
+ * map by curve position while it fits; anything else is not a series.
+ */
+export const resolvePlotlyClickSelection = (points, seriesCount) => {
+    const point = points?.[0];
+    if (!point)
+        return undefined;
+    const meta = point.data
+        ?.meta;
+    const seriesIndex = typeof meta?.rncSeriesIndex === "number"
+        ? meta.rncSeriesIndex
+        : point.curveNumber < seriesCount
+            ? point.curveNumber
+            : undefined;
+    if (seriesIndex === undefined || seriesIndex >= seriesCount) {
+        return undefined;
+    }
+    const dataIndex = point.pointNumber;
+    return typeof dataIndex === "number" && dataIndex >= 0
+        ? { seriesIndex, dataIndex }
+        : { seriesIndex };
+};