@rowsncolumns/charts 28.1.18 → 28.1.19

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

@@ -1 +1 @@
-{"version":3,"file":"overrides.d.ts","sourceRoot":"","sources":["../../../utils/overrides.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAWrD;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,GAC1B,KAAK,GAAG,EACR,UAAU;IACR,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;CAChC;;;;gBASG,MAAM,GACN,QAAQ;eACsC,QAAQ,GAAG,QAAQ;CACrE,CAAC;AAEH,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,EAC5B,SAAS,MAAM,QA4BhB,CAAC;AAgBF,eAAO,MAAM,kBAAkB,GAC7B,MAAM,GAAG,EACT,SAAS,MAAM,EAEf,eAAa,MACT,QAAQ,GAAG,WAoDhB,CAAC;AAgCF;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,GAAI,CAAC,EACvC,YAAY,CAAC,GAAG,IAAI,GAAG,SAAS,EAChC,QAAQ;IAAE,UAAU,CAAC,EAAE,CAAC,GAAG,IAAI,CAAA;CAAE,GAAG,IAAI,GAAG,SAAS,KACnD,CAAC,GAAG,IAAI,GAAG,SAA6C,CAAC;AAE5D,eAAO,MAAM,sBAAsB,GACjC,MAAM,GAAG,EACT,aAAa,MAAM,EACnB,SAAS,MAAM;;;iCAlGH,GAAG;aAoHhB,CAAC"}
+{"version":3,"file":"overrides.d.ts","sourceRoot":"","sources":["../../../utils/overrides.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAWrD;;;;;;;GAOG;AACH;;;GAGG;AACH,eAAO,MAAM,cAAc,GAAI,QAAQ,MAAM,WACD,CAAC;AAE7C,0EAA0E;AAC1E,eAAO,MAAM,UAAU,GAAI,QAAQ,OAAO,EAAE,YAAY,MAAM,WACkB,CAAC;AAEjF;;;;GAIG;AACH,eAAO,MAAM,aAAa,QAAoB,CAAC;AAC/C,eAAO,MAAM,cAAc,QAAqB,CAAC;AAEjD,eAAO,MAAM,eAAe,GAC1B,KAAK,GAAG,EACR,UAAU;IACR,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;CAChC;;;;gBAMG,MAAM,GACN,QAAQ;eACsC,QAAQ,GAAG,QAAQ;CACrE,CAAC;AAEH,oEAAoE;AACpE,eAAO,MAAM,4BAA4B,GAAI,KAAK,GAAG,oCAWpD,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAC/B,QAAQ,qBAAqB,EAC7B,MAAM,GAAG,KACR,qBA6CF,CAAC;AAEF,+EAA+E;AAC/E,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAU5E,CAAC;AAKF;;;;;;GAMG;AACH,eAAO,MAAM,kBAAkB,GAC7B,MAAM,GAAG,EACT,MAAM,GAAG,EACT,sBAAsB,MAAM,EAC5B,SAAS,MAAM,EACf,YAAY,GAAG,GAAG,GAAG,QAmGtB,CAAC;AAgBF,eAAO,MAAM,kBAAkB,GAC7B,MAAM,GAAG,EACT,SAAS,MAAM,EAEf,eAAa,MACT,QAAQ,GAAG,WA0DhB,CAAC;AAgCF;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,GAAI,CAAC,EACvC,YAAY,CAAC,GAAG,IAAI,GAAG,SAAS,EAChC,QAAQ;IAAE,UAAU,CAAC,EAAE,CAAC,GAAG,IAAI,CAAA;CAAE,GAAG,IAAI,GAAG,SAAS,KACnD,CAAC,GAAG,IAAI,GAAG,SAA6C,CAAC;AAE5D,eAAO,MAAM,sBAAsB,GACjC,MAAM,GAAG,EACT,aAAa,MAAM,EACnB,SAAS,MAAM;;;iCAxGH,GAAG;aA0HhB,CAAC"}

package/dist/esm/utils/overrides.js

@@ -13,12 +13,24 @@ import { formatAxisValue, valueAxisLabelFormatter } from "./axis-number-format";
  * Underline / strikethrough have no canvas text decoration in echarts and
  * are not drawn.
  */
+/**
+ * `ChartTextFormat.fontSize` is in points (OOXML `sz` / 100, the editor's
+ * Size field); echarts draws pixels. 9 pt → 12 px, 14 pt → 18.67 px.
+ */
+export const pointsToPixels = (points) => Math.round(((points * 4) / 3) * 100) / 100;
+/** An authored point size as pixels, or `fallbackPx` when none is set. */
+export const fontSizePx = (points, fallbackPx) => typeof points === "number" && points > 0 ? pointsToPixels(points) : fallbackPx;
+/**
+ * Excel's chart text defaults (Office 2013+ chart styles): the theme's body
+ * (minor) font, 9 pt in Text 1 at 65% (#595959 on the light theme), and a
+ * 14 pt regular title (RD-24).
+ */
+export const CHART_TEXT_PX = pointsToPixels(9);
+export const CHART_TITLE_PX = pointsToPixels(14);
 export const themedTextStyle = (fmt, defaults) => ({
     color: fmt?.color ?? defaults.color,
     fontFamily: fmt?.fontFamily ?? defaults.fontFamily ?? "sans-serif",
-    fontSize: typeof fmt?.fontSize === "number" && fmt.fontSize > 0
-        ? fmt.fontSize
-        : defaults.fontSize,
+    fontSize: fontSizePx(fmt?.fontSize, defaults.fontSize),
     fontWeight: (fmt ? (fmt.bold ? "bold" : "normal") : defaults.fontWeight ?? "normal"),
     fontStyle: (fmt?.italic ? "italic" : "normal"),
 });
@@ -31,8 +43,9 @@ export const textFormatToEchartsTextStyle = (fmt) => {
         result.color = fmt.color;
     if (fmt.fontFamily)
         result.fontFamily = fmt.fontFamily;
-    if (typeof fmt.fontSize === "number")
-        result.fontSize = fmt.fontSize;
+    if (typeof fmt.fontSize === "number" && fmt.fontSize > 0) {
+        result.fontSize = pointsToPixels(fmt.fontSize);
+    }
     if (fmt.bold)
         result.fontWeight = "bold";
     if (fmt.italic)
@@ -86,13 +99,35 @@ export const applyLegendOverrides = (legend, opts) => {
     }
     return next;
 };
+/** Excel's Format Axis → Display units: the divisor and the label it shows. */
+export const DISPLAY_UNITS = {
+    hundreds: { divisor: 1e2, label: "Hundreds" },
+    thousands: { divisor: 1e3, label: "Thousands" },
+    tenThousands: { divisor: 1e4, label: "10000" },
+    hundredThousands: { divisor: 1e5, label: "100000" },
+    millions: { divisor: 1e6, label: "Millions" },
+    tenMillions: { divisor: 1e7, label: "10000000" },
+    hundredMillions: { divisor: 1e8, label: "100000000" },
+    billions: { divisor: 1e9, label: "Billions" },
+    trillions: { divisor: 1e12, label: "Trillions" },
+};
+const positive = (v) => typeof v === "number" && Number.isFinite(v) && v > 0;
 /**
  * `numberFormatPattern` is the axis' RESOLVED format (explicit pattern or
  * the linked source-cell format — see `resolveValueAxisNumberFormat`); it
- * becomes the tick-label formatter.
+ * becomes the tick-label formatter. `placement` says which side of the plot
+ * the axis runs along (`x` horizontal, `y` vertical) for Excel's axis
+ * crossing; it defaults to `x` for a category axis and `y` for a value axis.
  */
-export const applyAxisOverrides = (axis, opts, numberFormatPattern, locale) => {
-    const formatter = valueAxisLabelFormatter(numberFormatPattern, locale);
+export const applyAxisOverrides = (axis, opts, numberFormatPattern, locale, placement) => {
+    const units = opts?.displayUnits ? DISPLAY_UNITS[opts.displayUnits] : undefined;
+    const baseFormatter = valueAxisLabelFormatter(numberFormatPattern, locale);
+    // Display units divide the tick labels: 25,000 on a "Thousands" axis reads 25.
+    const formatter = units
+        ? (value) => typeof value === "number"
+            ? (baseFormatter ?? ((v) => formatAxisValue(undefined, v, locale)))(value / units.divisor)
+            : String(value ?? "")
+        : baseFormatter;
     if (!opts && !formatter)
         return axis;
     const next = { ...axis };
@@ -101,8 +136,11 @@ export const applyAxisOverrides = (axis, opts, numberFormatPattern, locale) => {
     }
     if (!opts)
         return next;
-    if (opts.logarithmic)
+    const isValueAxis = next.type !== "category";
+    if (opts.logarithmic) {
         next.type = "log";
+        next.logBase = positive(opts.logBase) && opts.logBase >= 2 ? opts.logBase : 10;
+    }
     if (opts.reverse)
         next.inverse = true;
     if (typeof opts.min === "number")
@@ -117,6 +155,62 @@ export const applyAxisOverrides = (axis, opts, numberFormatPattern, locale) => {
     if (opts.showMajorGridlines === true) {
         next.splitLine = { ...(next.splitLine ?? {}), show: true };
     }
+    // Format Axis → Units (FT-08). A value axis' major unit is the tick
+    // interval; minor ticks / gridlines split it by major ÷ minor (Excel's
+    // automatic minor unit is a fifth of the major).
+    if (isValueAxis && positive(opts.majorUnit) && !opts.logarithmic) {
+        next.interval = opts.majorUnit;
+    }
+    const minorSplit = positive(opts.majorUnit) && positive(opts.minorUnit)
+        ? Math.max(1, Math.round(opts.majorUnit / opts.minorUnit))
+        : 5;
+    const minorTicks = typeof opts.minorTickMark === "string" && opts.minorTickMark !== "none";
+    if (isValueAxis && (minorTicks || opts.showMinorGridlines)) {
+        next.minorTick = { show: minorTicks, splitNumber: minorSplit };
+    }
+    if (isValueAxis && opts.showMinorGridlines) {
+        next.minorSplitLine = { show: true, lineStyle: { color: "#F2F2F2" } };
+    }
+    // Format Axis → Tick Marks: none / inside / outside / cross.
+    if (opts.majorTickMark === "none") {
+        next.axisTick = { ...(next.axisTick ?? {}), show: false };
+    }
+    else if (opts.majorTickMark === "in") {
+        next.axisTick = { ...(next.axisTick ?? {}), show: true, inside: true };
+    }
+    else if (opts.majorTickMark === "cross") {
+        next.axisTick = { ...(next.axisTick ?? {}), show: true, inside: false, length: 8 };
+    }
+    // Category axis "Interval between labels / tick marks": every Nth category.
+    if (!isValueAxis && positive(opts.tickLabelSkip)) {
+        next.axisLabel = {
+            ...(next.axisLabel ?? {}),
+            interval: Math.round(opts.tickLabelSkip) - 1,
+        };
+    }
+    if (!isValueAxis && positive(opts.tickMarkSkip)) {
+        next.axisTick = {
+            ...(next.axisTick ?? {}),
+            interval: Math.round(opts.tickMarkSkip) - 1,
+        };
+    }
+    // Where this axis crosses the perpendicular one (OOXML's `<c:crosses>` /
+    // `<c:crossesAt>` on this axis). echarts places an axis at the other's zero
+    // or at either plot edge, so a `crossesAt` other than 0 draws at the edge.
+    const side = placement ?? (isValueAxis ? "y" : "x");
+    if (opts.crosses === "max") {
+        next.position = side === "x" ? "top" : "right";
+        next.axisLine = { ...(next.axisLine ?? {}), onZero: false };
+    }
+    else if (opts.crosses === "min" ||
+        (typeof opts.crossesAt === "number" && opts.crossesAt !== 0)) {
+        next.position = side === "x" ? "bottom" : "left";
+        next.axisLine = { ...(next.axisLine ?? {}), onZero: false };
+    }
+    // The display-units label ("Thousands") rides with the axis title.
+    if (units && opts.showDisplayUnitsLabel !== false) {
+        next.name = next.name ? `${next.name} (${units.label})` : units.label;
+    }
     // Axis label text style (tick labels) + axis title font come from
     // <c:txPr>. Without this echarts uses its default (~black on light).
     const axisTextStyle = textFormatToEchartsTextStyle(opts.textFormat);
@@ -138,6 +232,12 @@ export const dataLabelFormatter = (opts, locale,
 // A treemap block stacks the parts (name, value) on their own lines.
 joiner = ": ") => (params) => {
     const parts = [];
+    // Value From Cells (FT-08): the point's cell leads; resolved by the caller.
+    if (Array.isArray(opts.cellLabels)) {
+        const cell = opts.cellLabels[params.dataIndex];
+        if (cell !== undefined && cell !== null && cell !== "")
+            parts.push(String(cell));
+    }
     if (opts.showSeriesName && params.seriesName)
         parts.push(params.seriesName);
     if (opts.showCategoryName && params.name)
@@ -153,7 +253,8 @@ joiner = ": ") => (params) => {
         !opts.showCategoryName &&
         !opts.showPercent &&
         !opts.showSeriesName &&
-        !opts.showBubbleSize
+        !opts.showBubbleSize &&
+        !Array.isArray(opts.cellLabels)
         ? true
         : !!opts.showValue;
     // A scatter / bubble point's value is its [x, y, size] tuple: the label's

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rowsncolumns/charts",
-  "version": "28.1.18",
+  "version": "28.1.19",
   "author": "Vinay M",
   "license": "SEE LICENSE IN LICENSE.md",
   "main": "./dist/cjs/index.js",
@@ -67,14 +67,14 @@
   },
   "devDependencies": {
     "@rowsncolumns/calculator": ">=7.3.1",
-    "@rowsncolumns/common-types": ">=5.3.2",
-    "@rowsncolumns/grid": ">=13.2.35",
+    "@rowsncolumns/common-types": ">=5.4.0",
+    "@rowsncolumns/grid": ">=13.4.0",
     "@rowsncolumns/icons": ">=7.2.33",
-    "@rowsncolumns/spreadsheet": ">=10.4.13",
-    "@rowsncolumns/spreadsheet-state": ">=29.1.8",
+    "@rowsncolumns/spreadsheet": ">=10.8.0",
+    "@rowsncolumns/spreadsheet-state": ">=29.4.0",
     "@rowsncolumns/toolkit": ">=24.5.14",
-    "@rowsncolumns/ui": ">=16.0.4",
-    "@rowsncolumns/utils": ">=9.5.5",
+    "@rowsncolumns/ui": ">=16.2.0",
+    "@rowsncolumns/utils": ">=9.7.0",
     "@types/react-plotly.js": "^2.6.3",
     "echarts": "^5.6.0",
     "formik": "^2.4.6",