@rowsncolumns/charts 28.1.6 → 28.1.8

package/dist/esm/utils/overrides.js

@@ -1,5 +1,4 @@
-import { ssfFormat } from "@rowsncolumns/utils";
-import { valueAxisLabelFormatter } from "./axis-number-format";
+import { formatAxisValue, 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
@@ -75,8 +74,8 @@ export const applyLegendOverrides = (legend, opts) => {
  * the linked source-cell format — see `resolveValueAxisNumberFormat`); it
  * becomes the tick-label formatter.
  */
-export const applyAxisOverrides = (axis, opts, numberFormatPattern) => {
-    const formatter = valueAxisLabelFormatter(numberFormatPattern);
+export const applyAxisOverrides = (axis, opts, numberFormatPattern, locale) => {
+    const formatter = valueAxisLabelFormatter(numberFormatPattern, locale);
     if (!opts && !formatter)
         return axis;
     const next = { ...axis };
@@ -117,14 +116,8 @@ export const applyAxisOverrides = (axis, opts, numberFormatPattern) => {
  * over the normalized percentage so labels read "$1,831" not "84.6"
  * — Excel's behaviour.
  */
-const formatLabelValue = (rawValue, originalValue, pattern) => {
-    const target = originalValue ?? rawValue;
-    if (pattern) {
-        return ssfFormat(pattern, target);
-    }
-    return target === undefined || target === null ? "" : String(target);
-};
-export const dataLabelFormatter = (opts) => (params) => {
+const formatLabelValue = (rawValue, originalValue, pattern, locale) => formatAxisValue(pattern, originalValue ?? rawValue, locale);
+export const dataLabelFormatter = (opts, locale) => (params) => {
     const parts = [];
     if (opts.showSeriesName && params.seriesName)
         parts.push(params.seriesName);
@@ -147,7 +140,7 @@ export const dataLabelFormatter = (opts) => (params) => {
         const originalValue = typeof params.data === "object" && params.data
             ? params.data.originalValue
             : undefined;
-        parts.push(formatLabelValue(params.value, originalValue, opts.numberFormatPattern));
+        parts.push(formatLabelValue(params.value, originalValue, opts.numberFormatPattern, locale));
     }
     return parts.join(": ");
 };
@@ -158,14 +151,45 @@ const ECHARTS_DLBL_POS = {
     insideEnd: "insideTop",
     outsideEnd: "top",
     bestFit: "top",
+    above: "top",
+    below: "bottom",
+    left: "left",
+    right: "right",
 };
-export const buildSeriesLabelOption = (opts) => {
+// A line / scatter label sits on a point, not in a bar: echarts has no
+// `outside` / `insideTop` for it (an unknown position is drawn at the
+// default) and Excel offers centre / left / right / above / below. The
+// bar-only placements land on Excel's default for a line, above the point.
+const ECHARTS_POINT_DLBL_POS = {
+    center: "inside",
+    inside: "inside",
+    outside: "top",
+    insideEnd: "top",
+    outsideEnd: "top",
+    bestFit: "top",
+    above: "top",
+    below: "bottom",
+    left: "left",
+    right: "right",
+};
+const POINT_SERIES_TYPES = new Set(["line", "scatter", "effectScatter"]);
+/**
+ * The data-label options one series renders with: its own
+ * `ChartData.dataLabels` when it has them (OOXML's `<c:ser><c:dLbls>`
+ * override — `{ show: false }` turns a labelled chart's labels off for
+ * that series alone), else the chart-level `ChartSpec.dataLabels`.
+ */
+export const resolveSeriesDataLabels = (chartLevel, series) => series?.dataLabels ?? chartLevel;
+export const buildSeriesLabelOption = (opts, seriesType, locale) => {
     if (!opts?.show)
         return undefined;
-    const position = (opts.position && ECHARTS_DLBL_POS[opts.position]) ?? "top";
+    const positions = seriesType && POINT_SERIES_TYPES.has(seriesType)
+        ? ECHARTS_POINT_DLBL_POS
+        : ECHARTS_DLBL_POS;
+    const position = (opts.position && positions[opts.position]) ?? "top";
     return {
         show: true,
         position,
-        formatter: dataLabelFormatter(opts),
+        formatter: dataLabelFormatter(opts, locale),
     };
 };

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

@@ -16,15 +16,41 @@ export type RadarSeriesInput = {
 };
 export type RadarIndicator = {
     name: string;
+    min: number;
     max: number;
 };
+export type RadarAxisScale = {
+    min: number;
+    max: number;
+};
+/** The value-axis options a radar's common scale reads (`ChartAxisOptions`). */
+export type RadarAxisOptions = {
+    min?: number | null;
+    max?: number | null;
+    visible?: boolean | null;
+} | null | undefined;
+/**
+ * The next "nice" axis bound at or above `value` — the top tick a value
+ * axis would auto-scale to: the step is 1 / 2 / 5 × a power of ten sized
+ * for about five divisions, and the bound is the first multiple of that
+ * step at or above the value (9 → 10, 33 → 40, 0.7 → 0.8).
+ */
+export declare const niceAxisCeiling: (value: number) => number;
+/**
+ * One value scale shared by every radar axis, as Excel draws it: `max` is
+ * the spec's `valueAxisOptions.max` when set, else the largest value across
+ * all series and categories rounded up to a nice bound (never below 1);
+ * `min` is `valueAxisOptions.min` when set (and below `max`), else 0.
+ */
+export declare const radarValueScale: (series: RadarSeriesInput[], axisOptions?: RadarAxisOptions) => RadarAxisScale;
 /**
- * Build echarts radar indicators from category labels and series.
- * The `max` per indicator is the largest value seen across all series at
- * that category (rounded up a touch so the polygon doesn't touch the
- * rim). When every series is empty at an index, `max` defaults to 1.
+ * Build echarts radar indicators from category labels and series. Every
+ * indicator carries the SAME `min` / `max` — the common scale of
+ * {@link radarValueScale} — so values on different axes compare, and a
+ * single series draws the shape of its data rather than a regular polygon
+ * (rowsncolumns/spreadsheet#1066).
  */
-export declare const buildRadarIndicators: (categories: (string | number | boolean | null | undefined)[], series: RadarSeriesInput[]) => RadarIndicator[];
+export declare const buildRadarIndicators: (categories: (string | number | boolean | null | undefined)[], series: RadarSeriesInput[], axisOptions?: RadarAxisOptions) => RadarIndicator[];
 /**
  * Shape series into echarts radar data: one entry per series with its
  * value vector aligned to the indicator order. Missing/non-numeric

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

@@ -1 +1 @@
-{"version":3,"file":"radar.d.ts","sourceRoot":"","sources":["../../../utils/radar.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,CAAC,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,EAAE,CAAC;CACvC,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAAC;AAQ3D;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,GAC/B,YAAY,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,EAAE,EAC5D,QAAQ,gBAAgB,EAAE,KACzB,cAAc,EAahB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,GAC/B,QAAQ,gBAAgB,EAAE,EAC1B,gBAAgB,MAAM,KACrB,KAAK,CAAC;IAAE,KAAK,EAAE,MAAM,EAAE,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAQzC,CAAC"}
+{"version":3,"file":"radar.d.ts","sourceRoot":"","sources":["../../../utils/radar.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,CAAC,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,EAAE,CAAC;CACvC,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAAC;AAQxE,MAAM,MAAM,cAAc,GAAG;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAAC;AAE1D,gFAAgF;AAChF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;CAC1B,GAAG,IAAI,GAAG,SAAS,CAAC;AAErB;;;;;GAKG;AACH,eAAO,MAAM,eAAe,GAAI,OAAO,MAAM,KAAG,MAW/C,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,eAAe,GAC1B,QAAQ,gBAAgB,EAAE,EAC1B,cAAc,gBAAgB,KAC7B,cAaF,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,GAC/B,YAAY,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,EAAE,EAC5D,QAAQ,gBAAgB,EAAE,EAC1B,cAAc,gBAAgB,KAC7B,cAAc,EAGhB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,GAC/B,QAAQ,gBAAgB,EAAE,EAC1B,gBAAgB,MAAM,KACrB,KAAK,CAAC;IAAE,KAAK,EAAE,MAAM,EAAE,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAQzC,CAAC"}

package/dist/esm/utils/radar.js

@@ -13,25 +13,53 @@
 const isFiniteNum = (v) => typeof v === "number" && Number.isFinite(v);
 const toNumber = (v) => isFiniteNum(v) ? v : 0;
 /**
- * Build echarts radar indicators from category labels and series.
- * The `max` per indicator is the largest value seen across all series at
- * that category (rounded up a touch so the polygon doesn't touch the
- * rim). When every series is empty at an index, `max` defaults to 1.
+ * The next "nice" axis bound at or above `value` — the top tick a value
+ * axis would auto-scale to: the step is 1 / 2 / 5 × a power of ten sized
+ * for about five divisions, and the bound is the first multiple of that
+ * step at or above the value (9 → 10, 33 → 40, 0.7 → 0.8).
  */
-export const buildRadarIndicators = (categories, series) => {
-    return categories.map((label, i) => {
-        let max = 0;
-        for (const s of series) {
-            const v = s.values[i];
+export const niceAxisCeiling = (value) => {
+    if (!isFiniteNum(value) || value <= 0)
+        return 1;
+    const rough = value / 5;
+    const magnitude = 10 ** Math.floor(Math.log10(rough));
+    const residual = rough / magnitude;
+    const step = (residual <= 1 ? 1 : residual <= 2 ? 2 : residual <= 5 ? 5 : 10) *
+        magnitude;
+    const ceiling = Math.ceil(value / step - 1e-9) * step;
+    // Avoid 0.30000000000000004-style bounds from the float arithmetic.
+    return Number(ceiling.toPrecision(12));
+};
+/**
+ * One value scale shared by every radar axis, as Excel draws it: `max` is
+ * the spec's `valueAxisOptions.max` when set, else the largest value across
+ * all series and categories rounded up to a nice bound (never below 1);
+ * `min` is `valueAxisOptions.min` when set (and below `max`), else 0.
+ */
+export const radarValueScale = (series, axisOptions) => {
+    let largest = 0;
+    for (const s of series) {
+        for (const v of s.values) {
             if (isFiniteNum(v))
-                max = Math.max(max, v);
+                largest = Math.max(largest, v);
         }
-        return {
-            name: String(label ?? ""),
-            // Pad by 10% so the outermost ring has breathing room; never 0.
-            max: max > 0 ? max * 1.1 : 1,
-        };
-    });
+    }
+    const max = isFiniteNum(axisOptions?.max)
+        ? axisOptions.max
+        : niceAxisCeiling(largest);
+    const min = isFiniteNum(axisOptions?.min) && axisOptions.min < max ? axisOptions.min : 0;
+    return { min, max };
+};
+/**
+ * Build echarts radar indicators from category labels and series. Every
+ * indicator carries the SAME `min` / `max` — the common scale of
+ * {@link radarValueScale} — so values on different axes compare, and a
+ * single series draws the shape of its data rather than a regular polygon
+ * (rowsncolumns/spreadsheet#1066).
+ */
+export const buildRadarIndicators = (categories, series, axisOptions) => {
+    const { min, max } = radarValueScale(series, axisOptions);
+    return categories.map((label) => ({ name: String(label ?? ""), min, max }));
 };
 /**
  * Shape series into echarts radar data: one entry per series with its

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rowsncolumns/charts",
-  "version": "28.1.6",
+  "version": "28.1.8",
   "author": "Vinay M",
   "license": "SEE LICENSE IN LICENSE.md",
   "main": "./dist/cjs/index.js",
@@ -70,9 +70,9 @@
     "@rowsncolumns/common-types": ">=5.3.2",
     "@rowsncolumns/grid": ">=13.2.35",
     "@rowsncolumns/icons": ">=7.2.33",
-    "@rowsncolumns/spreadsheet": ">=10.4.5",
-    "@rowsncolumns/spreadsheet-state": ">=29.1.7",
-    "@rowsncolumns/toolkit": ">=24.5.7",
+    "@rowsncolumns/spreadsheet": ">=10.4.7",
+    "@rowsncolumns/spreadsheet-state": ">=29.1.8",
+    "@rowsncolumns/toolkit": ">=24.5.9",
     "@rowsncolumns/ui": ">=16.0.4",
     "@rowsncolumns/utils": ">=9.5.5",
     "@types/react-plotly.js": "^2.6.3",