@rowsncolumns/charts 28.1.2 → 28.1.5

package/dist/cjs/utils/legend-layout.js

@@ -0,0 +1,338 @@
+"use strict";
+// Legend band reservation (rowsncolumns/spreadsheet#986).
+//
+// Excel and Google Sheets never let the legend paint over the plot: for
+// every legend position the chart reserves a band of its own — legend
+// outermost, then the axis title, then the tick labels, then the plot
+// area shrinks to whatever is left. Both renderers here used to pin the
+// legend a fixed distance from the frame edge and leave the plot margin
+// constant, so a bottom legend sat on the category labels and hid the
+// horizontal axis title (and a top legend crowded the chart title).
+//
+// This module estimates the legend's rendered size from its actual items
+// (count, label widths, font size, wrapping into rows / columns) and turns
+// that into renderer geometry: the echarts `grid` + legend offsets +
+// category-axis `nameGap`, and the plotly `margin` + paper-relative legend
+// anchor. The estimate is deliberately generous — a few px of slack beats
+// a legend on top of the labels.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.reservePlotlyLegendBand = exports.reserveEchartsLegendBand = exports.echartsTitleBand = exports.categoryAxisNameGap = exports.echartsAxisLabelDepth = exports.legendLabelsFrom = exports.estimateLegendBand = exports.measureTextWidth = exports.LEGEND_ITEM_GAP = exports.LEGEND_PADDING = exports.EDGE_PAD = exports.BAND_GAP = void 0;
+var tslib_1 = require("tslib");
+/** Space kept between neighbouring bands (legend ↔ axis title ↔ labels). */
+exports.BAND_GAP = 8;
+/** Inset of the outermost band from the chart frame. */
+exports.EDGE_PAD = 10;
+/** echarts `legend.padding` default used by both adapters' legend boxes. */
+exports.LEGEND_PADDING = 10;
+/** echarts `legend.itemGap` default. */
+exports.LEGEND_ITEM_GAP = 10;
+/** Gap echarts leaves between a legend icon and its text. */
+var LEGEND_ICON_TEXT_GAP = 5;
+/** Approximate rendered width of `text` at `fontSize` (canvas when available). */
+var measureTextWidth = function (text, fontSize) {
+    if (typeof document !== "undefined") {
+        var ctx = document.createElement("canvas").getContext("2d");
+        if (ctx) {
+            ctx.font = "".concat(fontSize, "px sans-serif");
+            var width = ctx.measureText(text).width;
+            if (Number.isFinite(width) && width > 0)
+                return width;
+        }
+    }
+    // Headless fallback: ~0.6em per character.
+    return text.length * fontSize * 0.6;
+};
+exports.measureTextWidth = measureTextWidth;
+/**
+ * Estimate the legend's rendered box from its items. Horizontal legends
+ * pack items greedily into rows no wider than the frame; vertical legends
+ * stack items and spill into a new column when taller than the frame.
+ */
+var estimateLegendBand = function (_a) {
+    var e_1, _b;
+    var labels = _a.labels, _c = _a.fontSize, fontSize = _c === void 0 ? 12 : _c, _d = _a.itemWidth, itemWidth = _d === void 0 ? 10 : _d, _e = _a.itemGap, itemGap = _e === void 0 ? exports.LEGEND_ITEM_GAP : _e, _f = _a.padding, padding = _f === void 0 ? exports.LEGEND_PADDING : _f, orientation = _a.orientation, availableWidth = _a.availableWidth, availableHeight = _a.availableHeight;
+    if (!labels.length)
+        return { rows: 0, columns: 0, width: 0, height: 0 };
+    var lineHeight = Math.ceil(fontSize * 1.3);
+    var itemWidths = labels.map(function (label) {
+        return itemWidth + LEGEND_ICON_TEXT_GAP + Math.ceil((0, exports.measureTextWidth)(label, fontSize));
+    });
+    if (orientation === "horizontal") {
+        var maxRowWidth = Math.max(1, availableWidth - padding * 2);
+        var rows_1 = 1;
+        var rowWidth = 0;
+        var widestRow = 0;
+        try {
+            for (var itemWidths_1 = tslib_1.__values(itemWidths), itemWidths_1_1 = itemWidths_1.next(); !itemWidths_1_1.done; itemWidths_1_1 = itemWidths_1.next()) {
+                var w = itemWidths_1_1.value;
+                var next = rowWidth === 0 ? w : rowWidth + itemGap + w;
+                if (next > maxRowWidth && rowWidth > 0) {
+                    widestRow = Math.max(widestRow, rowWidth);
+                    rows_1 += 1;
+                    rowWidth = w;
+                }
+                else {
+                    rowWidth = next;
+                }
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (itemWidths_1_1 && !itemWidths_1_1.done && (_b = itemWidths_1.return)) _b.call(itemWidths_1);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+        widestRow = Math.max(widestRow, rowWidth);
+        return {
+            rows: rows_1,
+            columns: 1,
+            width: padding * 2 + widestRow,
+            height: padding * 2 + rows_1 * lineHeight + (rows_1 - 1) * itemGap,
+        };
+    }
+    var maxColumnHeight = Math.max(1, availableHeight - padding * 2);
+    var perColumn = Math.max(1, Math.floor((maxColumnHeight + itemGap) / (lineHeight + itemGap)));
+    var columns = Math.ceil(labels.length / perColumn);
+    var rows = Math.min(labels.length, perColumn);
+    var widestItem = Math.max.apply(Math, tslib_1.__spreadArray([], tslib_1.__read(itemWidths), false));
+    return {
+        rows: rows,
+        columns: columns,
+        width: padding * 2 + columns * widestItem + (columns - 1) * itemGap,
+        height: padding * 2 + rows * lineHeight + (rows - 1) * itemGap,
+    };
+};
+exports.estimateLegendBand = estimateLegendBand;
+/**
+ * Pull the legend entry labels out of an echarts `legend.data` (strings or
+ * `{ name }` items); falls back to the series names, which is what echarts
+ * itself lists when `data` is empty.
+ */
+var legendLabelsFrom = function (legendData, seriesNames) {
+    var fromData = (legendData !== null && legendData !== void 0 ? legendData : [])
+        .map(function (d) {
+        return typeof d === "string"
+            ? d
+            : d && typeof d === "object" && typeof d.name === "string"
+                ? d.name
+                : "";
+    })
+        .filter(function (s) { return s.length > 0; });
+    if (fromData.length)
+        return fromData;
+    return seriesNames
+        .map(function (n) { return (typeof n === "string" ? n : n === undefined || n === null ? "" : String(n)); })
+        .filter(function (s) { return s.length > 0; });
+};
+exports.legendLabelsFrom = legendLabelsFrom;
+/**
+ * Depth (px) of one row of echarts axis tick labels measured from the axis
+ * line: 5px tick + 8px label margin + one 12px line, rounded up. With
+ * `grid.containLabel` this is the part the grid already accounts for; the
+ * axis title sits beyond it.
+ */
+var echartsAxisLabelDepth = function (fontSize) {
+    if (fontSize === void 0) { fontSize = 12; }
+    return 5 + 8 + Math.ceil(fontSize * 1.1);
+};
+exports.echartsAxisLabelDepth = echartsAxisLabelDepth;
+/**
+ * echarts `nameGap` for a category axis whose title sits in the middle
+ * below the tick labels: clear one row of labels plus a small gap, measured
+ * to the title's centre line.
+ */
+var categoryAxisNameGap = function (fontSize) {
+    if (fontSize === void 0) { fontSize = 12; }
+    return (0, exports.echartsAxisLabelDepth)(fontSize) + exports.BAND_GAP / 2 + Math.ceil(fontSize / 2);
+};
+exports.categoryAxisNameGap = categoryAxisNameGap;
+/** Height of the echarts chart-title band (padding 10 each side + one line). */
+var echartsTitleBand = function (titleFontSize) {
+    if (titleFontSize === void 0) { titleFontSize = 16; }
+    return exports.LEGEND_PADDING * 2 + Math.ceil(titleFontSize * 1.25);
+};
+exports.echartsTitleBand = echartsTitleBand;
+/**
+ * Echarts cartesian geometry with a band reserved for the legend in its
+ * position, outside the axis-title band, outside the tick labels.
+ */
+var reserveEchartsLegendBand = function (_a) {
+    var position = _a.position, visible = _a.visible, labels = _a.labels, _b = _a.legendFontSize, legendFontSize = _b === void 0 ? 12 : _b, _c = _a.legendItemWidth, legendItemWidth = _c === void 0 ? 10 : _c, width = _a.width, height = _a.height, hasTitle = _a.hasTitle, _d = _a.titleFontSize, titleFontSize = _d === void 0 ? 16 : _d, hasBottomAxisTitle = _a.hasBottomAxisTitle, bottomAxisNameGap = _a.bottomAxisNameGap, hasLeftAxisTitle = _a.hasLeftAxisTitle, _e = _a.axisFontSize, axisFontSize = _e === void 0 ? 12 : _e;
+    var pos = visible ? (position !== null && position !== void 0 ? position : "top") : "none";
+    var horizontal = pos === "top" || pos === "bottom";
+    var band = pos === "none"
+        ? { rows: 0, columns: 0, width: 0, height: 0 }
+        : (0, exports.estimateLegendBand)({
+            labels: labels,
+            fontSize: legendFontSize,
+            itemWidth: legendItemWidth,
+            orientation: horizontal ? "horizontal" : "vertical",
+            availableWidth: width,
+            availableHeight: height,
+        });
+    var titleBand = hasTitle ? (0, exports.echartsTitleBand)(titleFontSize) : 0;
+    var labelDepth = (0, exports.echartsAxisLabelDepth)(axisFontSize);
+    // The bottom axis title's centre sits `nameGap` below the axis line and
+    // its line box extends half a font below that; the contained labels
+    // already cover `labelDepth` of it.
+    var bottomTitleOverhang = hasBottomAxisTitle
+        ? Math.max(0, bottomAxisNameGap + Math.ceil(axisFontSize / 2) - labelDepth) + exports.BAND_GAP
+        : 0;
+    // The rotated left axis title clears its labels by `fontSize + 6` (see
+    // valueAxisNameGap) and its own line box extends half a font further.
+    var leftTitleOverhang = hasLeftAxisTitle
+        ? Math.ceil(axisFontSize * 1.5) + 6 + exports.BAND_GAP / 2
+        : 0;
+    // Half a tick label pokes past the top / right end of an axis.
+    var topHeadroom = Math.ceil(axisFontSize / 2) + 4;
+    var rightHeadroom = Math.ceil(axisFontSize / 2) + 10;
+    var legend = {};
+    var top = (hasTitle ? titleBand : exports.EDGE_PAD) + topHeadroom;
+    var bottom = exports.EDGE_PAD + bottomTitleOverhang;
+    var left = exports.EDGE_PAD + leftTitleOverhang;
+    var right = rightHeadroom;
+    switch (pos) {
+        case "top": {
+            legend.top = hasTitle ? titleBand : exports.EDGE_PAD;
+            legend.bottom = undefined;
+            top = legend.top + band.height + exports.BAND_GAP + topHeadroom;
+            break;
+        }
+        case "bottom": {
+            legend.bottom = exports.EDGE_PAD;
+            legend.top = undefined;
+            bottom = exports.EDGE_PAD + band.height + exports.BAND_GAP + bottomTitleOverhang;
+            break;
+        }
+        case "left": {
+            legend.left = exports.EDGE_PAD;
+            legend.right = undefined;
+            left = exports.EDGE_PAD + band.width + exports.BAND_GAP + leftTitleOverhang;
+            break;
+        }
+        case "right": {
+            legend.right = exports.EDGE_PAD;
+            legend.left = undefined;
+            right = exports.EDGE_PAD + band.width + exports.BAND_GAP;
+            break;
+        }
+        case "topRight": {
+            legend.right = exports.EDGE_PAD;
+            legend.left = undefined;
+            legend.top = hasTitle ? titleBand : exports.EDGE_PAD;
+            legend.bottom = undefined;
+            right = exports.EDGE_PAD + band.width + exports.BAND_GAP;
+            break;
+        }
+        default:
+            break;
+    }
+    return {
+        band: band,
+        grid: { left: left, right: right, top: top, bottom: bottom, containLabel: true },
+        legend: legend,
+    };
+};
+exports.reserveEchartsLegendBand = reserveEchartsLegendBand;
+/** Plotly text line height (its LINE_SPACING is 1.3em). */
+var plotlyLineHeight = function (fontSize) { return Math.ceil(fontSize * 1.3); };
+/** Plotly default `legend.itemwidth`. */
+var PLOTLY_LEGEND_ITEM_WIDTH = 30;
+/**
+ * Plotly geometry with a band reserved for the legend in its position.
+ * Legend coordinates are paper-relative (fractions of the plot area), so
+ * they are derived from the margins this returns; `automargin` on the
+ * axes may still grow a margin further for unusually deep tick labels.
+ */
+var reservePlotlyLegendBand = function (_a) {
+    var position = _a.position, visible = _a.visible, labels = _a.labels, _b = _a.legendFontSize, legendFontSize = _b === void 0 ? 12 : _b, width = _a.width, height = _a.height, hasTitle = _a.hasTitle, _c = _a.titleFontSize, titleFontSize = _c === void 0 ? 16 : _c, hasBottomAxisTitle = _a.hasBottomAxisTitle, hasLeftAxisTitle = _a.hasLeftAxisTitle, leftAxisDepth = _a.leftAxisDepth, _d = _a.rightAxisDepth, rightAxisDepth = _d === void 0 ? 0 : _d, _e = _a.bottomAxisTitleStandoff, bottomAxisTitleStandoff = _e === void 0 ? exports.BAND_GAP : _e, _f = _a.axisFontSize, axisFontSize = _f === void 0 ? 12 : _f;
+    var pos = visible ? (position !== null && position !== void 0 ? position : "right") : "none";
+    var horizontal = pos === "top" || pos === "bottom";
+    var band = pos === "none"
+        ? { rows: 0, columns: 0, width: 0, height: 0 }
+        : (0, exports.estimateLegendBand)({
+            labels: labels,
+            fontSize: legendFontSize,
+            itemWidth: PLOTLY_LEGEND_ITEM_WIDTH,
+            itemGap: 5,
+            padding: 5,
+            orientation: horizontal ? "horizontal" : "vertical",
+            availableWidth: width,
+            availableHeight: height,
+        });
+    var titleBand = hasTitle
+        ? exports.EDGE_PAD + plotlyLineHeight(titleFontSize) + exports.BAND_GAP
+        : 0;
+    // One row of bottom tick labels: plotly pads them ~3px off the axis.
+    var bottomLabelDepth = 3 + plotlyLineHeight(axisFontSize);
+    var bottomTitleBand = hasBottomAxisTitle
+        ? bottomAxisTitleStandoff + plotlyLineHeight(axisFontSize)
+        : 0;
+    var bottomAxisDepth = bottomLabelDepth + bottomTitleBand;
+    var topHeadroom = Math.ceil(axisFontSize / 2) + 4;
+    var t = Math.max(exports.EDGE_PAD + topHeadroom, titleBand + topHeadroom);
+    var b = bottomAxisDepth + exports.EDGE_PAD;
+    var l = leftAxisDepth + (hasLeftAxisTitle ? exports.BAND_GAP : 0) + exports.EDGE_PAD;
+    var r = Math.max(exports.EDGE_PAD + Math.ceil(axisFontSize / 2), rightAxisDepth + exports.EDGE_PAD);
+    var legend = null;
+    switch (pos) {
+        case "top": {
+            t = (hasTitle ? titleBand : exports.EDGE_PAD) + band.height + exports.BAND_GAP + topHeadroom;
+            legend = { orientation: "h", x: 0.5, xanchor: "center", y: 1, yanchor: "bottom" };
+            break;
+        }
+        case "bottom": {
+            b = bottomAxisDepth + exports.BAND_GAP + band.height + exports.EDGE_PAD;
+            legend = { orientation: "h", x: 0.5, xanchor: "center", y: 0, yanchor: "top" };
+            break;
+        }
+        case "left": {
+            l = leftAxisDepth + exports.BAND_GAP + band.width + exports.EDGE_PAD;
+            legend = { orientation: "v", x: 0, xanchor: "right", y: 0.5, yanchor: "middle" };
+            break;
+        }
+        case "right": {
+            r = rightAxisDepth + exports.BAND_GAP + band.width + exports.EDGE_PAD;
+            legend = { orientation: "v", x: 1, xanchor: "left", y: 0.5, yanchor: "middle" };
+            break;
+        }
+        case "topRight": {
+            r = rightAxisDepth + exports.BAND_GAP + band.width + exports.EDGE_PAD;
+            legend = { orientation: "v", x: 1, xanchor: "left", y: 1, yanchor: "top" };
+            break;
+        }
+        default:
+            break;
+    }
+    // Paper coordinates: offsets outside the plot area are fractions of it.
+    var plotWidth = Math.max(1, width - l - r);
+    var plotHeight = Math.max(1, height - t - b);
+    if (legend) {
+        switch (pos) {
+            case "top":
+                legend.y = 1 + (exports.BAND_GAP + topHeadroom) / plotHeight;
+                break;
+            case "bottom":
+                legend.y = -(bottomAxisDepth + exports.BAND_GAP) / plotHeight;
+                break;
+            case "left":
+                legend.x = -(leftAxisDepth + exports.BAND_GAP) / plotWidth;
+                break;
+            case "right":
+            case "topRight":
+                legend.x = 1 + (rightAxisDepth + exports.BAND_GAP) / plotWidth;
+                break;
+            default:
+                break;
+        }
+    }
+    return {
+        band: band,
+        margin: { l: l, r: r, t: t, b: b },
+        legend: legend,
+        bottomAxisTitleStandoff: bottomAxisTitleStandoff,
+        title: { yref: "container", y: 1, yanchor: "top", pad: { t: exports.EDGE_PAD } },
+    };
+};
+exports.reservePlotlyLegendBand = reservePlotlyLegendBand;

package/dist/cjs/utils/trendline.d.ts

@@ -7,12 +7,24 @@
  * so the regressions are hand-rolled here as pure least-squares math and
  * the renderers draw the returned points as an overlay line series.
  *
- * All fits operate on the index domain x = 0, 1, 2, … (one step per
- * category) which matches how a category-axis chart positions points.
- * The caller passes the raw y-values; gaps (null/NaN) are skipped during
- * fitting but the fitted curve is still emitted for every x in range.
+ * All fits operate on Excel's category domain x = 1, 2, …, n (one step per
+ * category, first category = 1) — the domain Excel fits and prints for a
+ * category-axis chart (line, column, bar, area). Linear, polynomial and
+ * exponential curves are invariant to where the domain starts (only the
+ * equation text moves), but logarithmic and power fits are not: fitting
+ * them on x = 0, 1, … dropped the first category from the fit and evaluated
+ * ln(x) at x → 0 for it, which drew the Jan point of a 12-month log trend
+ * at about −524 instead of Excel's ≈6.4 (rowsncolumns/spreadsheet#1028).
+ *
+ * The emitted points keep the renderer-facing 0-based CATEGORY INDEX in `x`
+ * (echarts plots `[x, y]` on the category axis, plotly maps `x` onto the
+ * category labels), so a forecast of k periods still extends to index
+ * n−1+k forward and −k backward. The caller passes the raw y-values; gaps
+ * (null/NaN) are skipped during fitting but the fitted curve is still
+ * emitted for every x in range.
  */
 export type TrendlineType = "linear" | "exp" | "log" | "poly" | "power" | "movingAvg";
+/** `x` is the 0-based category index (−k … n−1+k with forecasting), `y` the fitted value. */
 export type TrendlinePoint = {
     x: number;
     y: number;
@@ -28,7 +40,8 @@ export type TrendlineResult = {
 /**
  * Compute a trendline for a series of y-values.
  *
- * @param values  Raw y-values; the category index is used as x.
+ * @param values  Raw y-values; the 1-based category position is used as x
+ *                for the fit, the 0-based index is reported in the points.
  * @param spec    Trendline parameters (type/order/period/forecast).
  */
 export declare const computeTrendline: (values: (number | null | undefined)[], spec?: {

package/dist/cjs/utils/trendline.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"trendline.d.ts","sourceRoot":"","sources":["../../../utils/trendline.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,MAAM,MAAM,aAAa,GACrB,QAAQ,GACR,KAAK,GACL,KAAK,GACL,MAAM,GACN,OAAO,GACP,WAAW,CAAC;AAEhB,MAAM,MAAM,cAAc,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAEtD,MAAM,MAAM,eAAe,GAAG;IAC5B,sEAAsE;IACtE,MAAM,EAAE,cAAc,EAAE,CAAC;IACzB,uEAAuE;IACvE,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,2DAA2D;IAC3D,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;CACzB,CAAC;AA+IF;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,GAC3B,QAAQ,CAAC,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,EAAE,EACrC,OAAM;IACJ,IAAI,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,gBAAgB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC7B,KACL,eAAe,GAAG,IA6FpB,CAAC"}
+{"version":3,"file":"trendline.d.ts","sourceRoot":"","sources":["../../../utils/trendline.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,MAAM,MAAM,aAAa,GACrB,QAAQ,GACR,KAAK,GACL,KAAK,GACL,MAAM,GACN,OAAO,GACP,WAAW,CAAC;AAEhB,6FAA6F;AAC7F,MAAM,MAAM,cAAc,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAEtD,MAAM,MAAM,eAAe,GAAG;IAC5B,sEAAsE;IACtE,MAAM,EAAE,cAAc,EAAE,CAAC;IACzB,uEAAuE;IACvE,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,2DAA2D;IAC3D,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;CACzB,CAAC;AAsJF;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,GAC3B,QAAQ,CAAC,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,EAAE,EACrC,OAAM;IACJ,IAAI,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,gBAAgB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC7B,KACL,eAAe,GAAG,IAiGpB,CAAC"}

package/dist/cjs/utils/trendline.js

@@ -8,10 +8,21 @@
  * so the regressions are hand-rolled here as pure least-squares math and
  * the renderers draw the returned points as an overlay line series.
  *
- * All fits operate on the index domain x = 0, 1, 2, … (one step per
- * category) which matches how a category-axis chart positions points.
- * The caller passes the raw y-values; gaps (null/NaN) are skipped during
- * fitting but the fitted curve is still emitted for every x in range.
+ * All fits operate on Excel's category domain x = 1, 2, …, n (one step per
+ * category, first category = 1) — the domain Excel fits and prints for a
+ * category-axis chart (line, column, bar, area). Linear, polynomial and
+ * exponential curves are invariant to where the domain starts (only the
+ * equation text moves), but logarithmic and power fits are not: fitting
+ * them on x = 0, 1, … dropped the first category from the fit and evaluated
+ * ln(x) at x → 0 for it, which drew the Jan point of a 12-month log trend
+ * at about −524 instead of Excel's ≈6.4 (rowsncolumns/spreadsheet#1028).
+ *
+ * The emitted points keep the renderer-facing 0-based CATEGORY INDEX in `x`
+ * (echarts plots `[x, y]` on the category axis, plotly maps `x` onto the
+ * category labels), so a forecast of k periods still extends to index
+ * n−1+k forward and −k backward. The caller passes the raw y-values; gaps
+ * (null/NaN) are skipped during fitting but the fitted curve is still
+ * emitted for every x in range.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.computeTrendline = void 0;
@@ -20,7 +31,8 @@ var isFiniteNum = function (v) {
     return typeof v === "number" && Number.isFinite(v);
 };
 /**
- * Build (x, y) pairs from raw y-values using the category index as x.
+ * Build (x, y) pairs from raw y-values using Excel's 1-based category
+ * position as x (the first category is x = 1, see the module comment).
  * Non-finite y-values are dropped (they cannot be fitted).
  */
 var toPairs = function (values) {
@@ -28,7 +40,7 @@ var toPairs = function (values) {
     for (var i = 0; i < values.length; i++) {
         var y = values[i];
         if (isFiniteNum(y))
-            pairs.push({ x: i, y: y });
+            pairs.push({ x: i + 1, y: y });
     }
     return pairs;
 };
@@ -66,6 +78,11 @@ var round = function (n, digits) {
     var f = Math.pow(10, digits);
     return Math.round(n * f) / f;
 };
+/** `+ 2` / `- 2` for an additive term, the way Excel prints an equation. */
+var signed = function (n) {
+    var r = round(n);
+    return r < 0 ? "- ".concat(Math.abs(r)) : "+ ".concat(r);
+};
 /** Solve a small linear system A·x = b via Gaussian elimination. */
 var solveLinearSystem = function (A, b) {
     var _a;
@@ -198,7 +215,8 @@ var fitPower = function (pairs) {
 /**
  * Compute a trendline for a series of y-values.
  *
- * @param values  Raw y-values; the category index is used as x.
+ * @param values  Raw y-values; the 1-based category position is used as x
+ *                for the fit, the 0-based index is reported in the points.
  * @param spec    Trendline parameters (type/order/period/forecast).
  */
 var computeTrendline = function (values, spec) {
@@ -230,9 +248,9 @@ var computeTrendline = function (values, spec) {
         }
         return { points: points_1, rSquared: null, equation: null };
     }
-    var lastX = values.length - 1;
-    var xStart = -backward;
-    var xEnd = lastX + forward;
+    // Fit domain is 1..n; a forecast of k periods extends it to 1−k / n+k.
+    var xStart = 1 - backward;
+    var xEnd = values.length + forward;
     var xs = [];
     for (var x = xStart; x <= xEnd; x++)
         xs.push(x);
@@ -244,7 +262,7 @@ var computeTrendline = function (values, spec) {
             if (!fit_1)
                 return null;
             predict = function (x) { return fit_1.m * x + fit_1.b; };
-            equation = "y = ".concat(round(fit_1.m), "x + ").concat(round(fit_1.b));
+            equation = "y = ".concat(round(fit_1.m), "x ").concat(signed(fit_1.b));
             break;
         }
         case "poly": {
@@ -257,8 +275,10 @@ var computeTrendline = function (values, spec) {
             equation =
                 "y = " +
                     coeffs_1
-                        .map(function (c, i) { return (i === 0 ? "".concat(round(c)) : "".concat(round(c), "x^").concat(i)); })
-                        .join(" + ");
+                        .map(function (c, i) {
+                        return i === 0 ? "".concat(round(c)) : "".concat(signed(c), "x").concat(i === 1 ? "" : "^".concat(i));
+                    })
+                        .join(" ");
             break;
         }
         case "exp": {
@@ -273,9 +293,10 @@ var computeTrendline = function (values, spec) {
             var fit_3 = fitLog(pairs);
             if (!fit_3)
                 return null;
-            // ln(0) and ln(negative) are undefined; clamp x to >0 for the curve.
+            // Only a backward forecast reaches x ≤ 0 (the fit domain starts at 1);
+            // ln(0) and ln(negative) are undefined, so clamp x to >0 for the curve.
             predict = function (x) { return fit_3.a + fit_3.b * Math.log(x <= 0 ? 1e-9 : x); };
-            equation = "y = ".concat(round(fit_3.a), " + ").concat(round(fit_3.b), "ln(x)");
+            equation = "y = ".concat(round(fit_3.b), "ln(x) ").concat(signed(fit_3.a));
             break;
         }
         case "power": {
@@ -289,8 +310,9 @@ var computeTrendline = function (values, spec) {
         default:
             return null;
     }
+    // Report the renderer-facing 0-based category index (see module comment).
     var points = xs
-        .map(function (x) { return ({ x: x, y: predict(x) }); })
+        .map(function (x) { return ({ x: x - 1, y: predict(x) }); })
         .filter(function (p) { return Number.isFinite(p.y); });
     if (points.length < 2)
         return null;

package/dist/esm/basic-chart/basic-chart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"basic-chart.d.ts","sourceRoot":"","sources":["../../../basic-chart/basic-chart.tsx"],"names":[],"mappings":"AA4DA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAEtE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AA0PrD,MAAM,MAAM,eAAe,GAAG,oBAAoB,CAAC;AAkEnD,eAAO,MAAM,UAAU,GAAI,wOAiBxB,eAAe,sBAmuGjB,CAAC"}
+{"version":3,"file":"basic-chart.d.ts","sourceRoot":"","sources":["../../../basic-chart/basic-chart.tsx"],"names":[],"mappings":"AA4DA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAEtE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAmQrD,MAAM,MAAM,eAAe,GAAG,oBAAoB,CAAC;AAqEnD,eAAO,MAAM,UAAU,GAAI,wOAiBxB,eAAe,sBAmzGjB,CAAC"}