@rowsncolumns/charts 28.1.5 → 28.1.6

package/dist/cjs/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;AAmQrD,MAAM,MAAM,eAAe,GAAG,oBAAoB,CAAC;AAqEnD,eAAO,MAAM,UAAU,GAAI,wOAiBxB,eAAe,sBAmzGjB,CAAC"}
+{"version":3,"file":"basic-chart.d.ts","sourceRoot":"","sources":["../../../basic-chart/basic-chart.tsx"],"names":[],"mappings":"AAkEA,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,sBAwzGjB,CAAC"}

package/dist/cjs/basic-chart/basic-chart.js

@@ -958,7 +958,7 @@ var BasicChart = function (_a) {
                     ]);
                     seriesColorAt_1 = function (index) {
                         var _a, _b, _c;
-                        return (_c = (_b = (_a = spec.series) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b.color) !== null && _c !== void 0 ? _c : threeDPalette_1[index % threeDPalette_1.length];
+                        return (_c = (_b = (_a = spec.series) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b.color) !== null && _c !== void 0 ? _c : (0, utils_1.chartPaletteColorAt)(threeDPalette_1, index);
                     };
                     // Entering 3-D from a 2-D render: the cartesian option doesn't
                     // merge into a grid3D one, so re-initialize the echarts instance
@@ -1364,7 +1364,7 @@ var BasicChart = function (_a) {
                             grid: stockGrid,
                             tooltip: { trigger: "axis" },
                             axisPointer: stockAxisPointer,
-                            series: tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read(lineSeries.map(function (s, i) { return (tslib_1.__assign(tslib_1.__assign({ type: "line", name: s.name, data: s.values, showSymbol: false, itemStyle: { color: stockColors_1[i % stockColors_1.length] }, lineStyle: { color: stockColors_1[i % stockColors_1.length] } }, (stockSeriesLabelFor_1(s.role)
+                            series: tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read(lineSeries.map(function (s, i) { return (tslib_1.__assign(tslib_1.__assign({ type: "line", name: s.name, data: s.values, showSymbol: false, itemStyle: { color: (0, utils_1.chartPaletteColorAt)(stockColors_1, i) }, lineStyle: { color: (0, utils_1.chartPaletteColorAt)(stockColors_1, i) } }, (stockSeriesLabelFor_1(s.role)
                                 ? { label: stockSeriesLabelFor_1(s.role) }
                                 : {})), ((0, axis_number_format_1.tooltipValueFormatter)(stockFormatFor_1(s.role))
                                 ? {
@@ -1624,7 +1624,7 @@ var BasicChart = function (_a) {
                         theme.themeColors.accent6,
                     ]);
                     paletteColorAt = function (index) {
-                        return seriesPalette[index % seriesPalette.length];
+                        return (0, utils_1.chartPaletteColorAt)(seriesPalette, index);
                     };
                     _loop_1 = function (specSeriesIndex, series) {
                         var dataLabel, _140, _141, effectiveChartType, lineLike, domainSources, pieDomainLabels, piePointOffset, data, seriesEchartsType, seriesStyleAttrs, seriesEntry, isBarOrColumn, seriesAny, markerSymbol, wantsMarkers, isolated, marked, isolated_1, isolated_1_1, i, gradientArgs, gradient, overrides_2, _142, _143, dp, fallback_1, overrides_3, _144, _145, dp, positiveColor_1, negativeColor_1;
@@ -1904,7 +1904,7 @@ var BasicChart = function (_a) {
                             theme.themeColors.accent6,
                         ]);
                         paletteAt_1 = function (index) {
-                            return ofPiePalette_1[index % ofPiePalette_1.length];
+                            return (0, utils_1.chartPaletteColorAt)(ofPiePalette_1, index);
                         };
                         chartSeries.push({
                             type: "pie",
@@ -2663,14 +2663,17 @@ var BasicChart = function (_a) {
                         color: textColor,
                     },
                 },
-                color: (0, chart_styles_1.getChartPalette)(chart.spec, [
+                // Unrolled through Excel's luminance variations: echarts cycles this
+                // list over pie slices and over series, and the seventh must not
+                // repeat the first (rowsncolumns/spreadsheet#1045).
+                color: (0, utils_1.expandChartPalette)((0, chart_styles_1.getChartPalette)(chart.spec, [
                     theme.themeColors.accent1,
                     theme.themeColors.accent2,
                     theme.themeColors.accent3,
                     theme.themeColors.accent4,
                     theme.themeColors.accent5,
                     theme.themeColors.accent6,
-                ]),
+                ])),
                 // Excel's Format Chart Area fill; `transparent` (echarts' own
                 // default) so clearing the fill undoes an earlier setOption.
                 backgroundColor: (_f = chart.spec.backgroundColor) !== null && _f !== void 0 ? _f : "transparent",

package/dist/cjs/plotly/basic-chart/basic-chart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"basic-chart.d.ts","sourceRoot":"","sources":["../../../../plotly/basic-chart/basic-chart.tsx"],"names":[],"mappings":"AA6BA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAEtE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAgXxD,MAAM,MAAM,eAAe,GAAG,oBAAoB,CAAC;AA0FnD,eAAO,MAAM,UAAU,GAAI,wOAiBxB,eAAe,sBA4zEjB,CAAC"}
+{"version":3,"file":"basic-chart.d.ts","sourceRoot":"","sources":["../../../../plotly/basic-chart/basic-chart.tsx"],"names":[],"mappings":"AAoCA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAEtE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAgXxD,MAAM,MAAM,eAAe,GAAG,oBAAoB,CAAC;AA0FnD,eAAO,MAAM,UAAU,GAAI,wOAiBxB,eAAe,sBA8zEjB,CAAC"}

package/dist/cjs/plotly/basic-chart/basic-chart.js

@@ -552,7 +552,7 @@ var BasicChart = function (_a) {
                         });
                         var yValues = entry.points.map(function (point) { return point.value[1]; });
                         var labelValuesForSeries = entry.points.map(function (point) { return point.name; });
-                        var seriesColor = (_b = (_a = spec.series[index]) === null || _a === void 0 ? void 0 : _a.color) !== null && _b !== void 0 ? _b : palette_1[index % palette_1.length];
+                        var seriesColor = (_b = (_a = spec.series[index]) === null || _a === void 0 ? void 0 : _a.color) !== null && _b !== void 0 ? _b : (0, utils_1.chartPaletteColorAt)(palette_1, index);
                         var perSeriesMarker = (_d = (_c = spec.series[index]) === null || _c === void 0 ? void 0 : _c.marker) !== null && _d !== void 0 ? _d : undefined;
                         if (isScatter_1) {
                             // Per-series marker.symbol = "none" → pure line (no markers).
@@ -1113,7 +1113,7 @@ var BasicChart = function (_a) {
                         // then theme palette. Plotly cannot paint the real gradient, so the
                         // median stop stands in for the whole ramp.
                         var effectiveColor = (_g = (_f = options === null || options === void 0 ? void 0 : options.gradientColor) !== null && _f !== void 0 ? _f : seriesColor) !== null && _g !== void 0 ? _g : ((options === null || options === void 0 ? void 0 : options.seriesIndex) !== undefined
-                            ? themeColorPalette[options.seriesIndex % themeColorPalette.length]
+                            ? (0, utils_1.chartPaletteColorAt)(themeColorPalette, options.seriesIndex)
                             : undefined);
                         // Per-data-point color overrides — Gantt charts use `<c:dPt>` to
                         // give every task its own color. Build a per-point color array
@@ -1145,7 +1145,7 @@ var BasicChart = function (_a) {
                                 // with (or the series' own colour when one was authored).
                                 var existing_1 = Array.isArray((_h = target.marker) === null || _h === void 0 ? void 0 : _h.colors)
                                     ? target.marker.colors
-                                    : themeColorPalette;
+                                    : (0, utils_1.expandChartPalette)(themeColorPalette);
                                 var labelCount = Array.isArray(target.labels)
                                     ? target.labels.length
                                     : 0;
@@ -1514,7 +1514,7 @@ var BasicChart = function (_a) {
                                         secondScale = (0, of_pie_1.clampSecondPieSize)(spec.secondPieSize) / 100;
                                         halfAngle = (0, of_pie_1.otherSliceHalfAngle)(otherTotal, total);
                                         paletteAt_1 = function (index) {
-                                            return themeColorPalette[index % themeColorPalette.length];
+                                            return (0, utils_1.chartPaletteColorAt)(themeColorPalette, index);
                                         };
                                         MAIN_DOMAIN_X = [0, 0.55];
                                         CY = 0.5;
@@ -1632,7 +1632,9 @@ var BasicChart = function (_a) {
                                             labels: pieData.labels,
                                             name: dataLabel,
                                             marker: {
-                                                colors: themeColorPalette,
+                                                // Unrolled through Excel's luminance variations so slice 7 does
+                                                // not repeat slice 1 (rowsncolumns/spreadsheet#1045).
+                                                colors: (0, utils_1.expandChartPalette)(themeColorPalette),
                                             },
                                         };
                                         // Ties the trace back to spec.series for click selection and

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;AAmQrD,MAAM,MAAM,eAAe,GAAG,oBAAoB,CAAC;AAqEnD,eAAO,MAAM,UAAU,GAAI,wOAiBxB,eAAe,sBAmzGjB,CAAC"}
+{"version":3,"file":"basic-chart.d.ts","sourceRoot":"","sources":["../../../basic-chart/basic-chart.tsx"],"names":[],"mappings":"AAkEA,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,sBAwzGjB,CAAC"}

package/dist/esm/basic-chart/basic-chart.js

@@ -3,7 +3,7 @@ import { getStringifiedColor, useFocusSheet, useRegisterChartActions, useSetSele
 import { useSubscribeToMultipleRanges } from "@rowsncolumns/spreadsheet-state";
 import { createDownloadableFile } from "@rowsncolumns/toolkit";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DropdownRightSlot, IconButton, useIsomorphicLayoutEffect, useOnVisibilityChange, } from "@rowsncolumns/ui";
-import { debug, isAFormula, isNil } from "@rowsncolumns/utils";
+import { chartPaletteColorAt, debug, expandChartPalette, isAFormula, isNil, } from "@rowsncolumns/utils";
 import { BarChart, BoxplotChart, CandlestickChart, CustomChart, FunnelChart, HeatmapChart, LineChart, PieChart, RadarChart as EchartsRadarChart, ScatterChart, SunburstChart, TreemapChart as EchartsTreemapChart, } from "echarts/charts";
 import { DatasetComponent, GridComponent, LegendComponent, RadarComponent, TitleComponent, TooltipComponent, VisualMapComponent, } from "echarts/components";
 import * as echarts from "echarts/core";
@@ -942,7 +942,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                 theme.themeColors.accent6,
             ]);
             const seriesColorAt = (index) => spec.series?.[index]?.color ??
-                threeDPalette[index % threeDPalette.length];
+                chartPaletteColorAt(threeDPalette, index);
             // Entering 3-D from a 2-D render: the cartesian option doesn't
             // merge into a grid3D one, so re-initialize the echarts instance
             // from scratch (theme options are re-applied after setOption).
@@ -1402,8 +1402,8 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                         name: s.name,
                         data: s.values,
                         showSymbol: false,
-                        itemStyle: { color: stockColors[i % stockColors.length] },
-                        lineStyle: { color: stockColors[i % stockColors.length] },
+                        itemStyle: { color: chartPaletteColorAt(stockColors, i) },
+                        lineStyle: { color: chartPaletteColorAt(stockColors, i) },
                         ...(stockSeriesLabelFor(s.role)
                             ? { label: stockSeriesLabelFor(s.role) }
                             : {}),
@@ -1688,7 +1688,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
             theme.themeColors.accent5,
             theme.themeColors.accent6,
         ]);
-        const paletteColorAt = (index) => seriesPalette[index % seriesPalette.length];
+        const paletteColorAt = (index) => chartPaletteColorAt(seriesPalette, index);
         for (const [specSeriesIndex, series] of (spec.series ?? []).entries()) {
             const dataLabel = !isNil(series.dataLabel) && isAFormula(series.dataLabel)
                 ? coerceCalculatedLabel(await onRequestCalculate(series.dataLabel, position.sheetId ?? sheetId, position.overlayPosition.anchorCell.rowIndex, position.overlayPosition.anchorCell.columnIndex))
@@ -1969,7 +1969,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                 theme.themeColors.accent5,
                 theme.themeColors.accent6,
             ]);
-            const paletteAt = (index) => ofPiePalette[index % ofPiePalette.length];
+            const paletteAt = (index) => chartPaletteColorAt(ofPiePalette, index);
             chartSeries.push({
                 type: "pie",
                 name: seriesEntry?.dataLabel ?? "",
@@ -2782,14 +2782,17 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                         color: textColor,
                     },
                 },
-                color: getChartPalette(chart.spec, [
+                // Unrolled through Excel's luminance variations: echarts cycles this
+                // list over pie slices and over series, and the seventh must not
+                // repeat the first (rowsncolumns/spreadsheet#1045).
+                color: expandChartPalette(getChartPalette(chart.spec, [
                     theme.themeColors.accent1,
                     theme.themeColors.accent2,
                     theme.themeColors.accent3,
                     theme.themeColors.accent4,
                     theme.themeColors.accent5,
                     theme.themeColors.accent6,
-                ]),
+                ])),
                 // Excel's Format Chart Area fill; `transparent` (echarts' own
                 // default) so clearing the fill undoes an earlier setOption.
                 backgroundColor: chart.spec.backgroundColor ?? "transparent",

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

@@ -1 +1 @@
-{"version":3,"file":"basic-chart.d.ts","sourceRoot":"","sources":["../../../../plotly/basic-chart/basic-chart.tsx"],"names":[],"mappings":"AA6BA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAEtE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAgXxD,MAAM,MAAM,eAAe,GAAG,oBAAoB,CAAC;AA0FnD,eAAO,MAAM,UAAU,GAAI,wOAiBxB,eAAe,sBA4zEjB,CAAC"}
+{"version":3,"file":"basic-chart.d.ts","sourceRoot":"","sources":["../../../../plotly/basic-chart/basic-chart.tsx"],"names":[],"mappings":"AAoCA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAEtE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAgXxD,MAAM,MAAM,eAAe,GAAG,oBAAoB,CAAC;AA0FnD,eAAO,MAAM,UAAU,GAAI,wOAiBxB,eAAe,sBA8zEjB,CAAC"}

package/dist/esm/plotly/basic-chart/basic-chart.js

@@ -2,7 +2,7 @@ import { DotsVerticalIcon } from "@rowsncolumns/icons";
 import { getStringifiedColor, useFocusSheet, useRegisterChartActions, useSetSelectedChartSeries, } from "@rowsncolumns/spreadsheet";
 import { useSubscribeToSheet } from "@rowsncolumns/spreadsheet-state";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuPortal, DropdownMenuTrigger, IconButton, useIsomorphicLayoutEffect, useOnVisibilityChange, } from "@rowsncolumns/ui";
-import { debug, isAFormula, isNil, ssfFormat } from "@rowsncolumns/utils";
+import { chartPaletteColorAt, debug, expandChartPalette, isAFormula, isNil, ssfFormat, } from "@rowsncolumns/utils";
 import React, { useCallback, useMemo, useRef, useState } from "react";
 import { aggregateSeriesByDomain, getDomainValuesForAxis, sanitizeDomainValues, shouldAggregateSeries, } from "../../utils/aggregation";
 import { formatAxisValue, numberFormatToPlotlyTicks, resolveSeriesNumberFormats, resolveValueAxisNumberFormat, valueAxisNameGap, } from "../../utils/axis-number-format";
@@ -525,7 +525,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                     : point.value[0]);
                 const yValues = entry.points.map((point) => point.value[1]);
                 const labelValuesForSeries = entry.points.map((point) => point.name);
-                const seriesColor = spec.series[index]?.color ?? palette[index % palette.length];
+                const seriesColor = spec.series[index]?.color ?? chartPaletteColorAt(palette, index);
                 const perSeriesMarker = spec.series[index]?.marker ?? undefined;
                 if (isScatter) {
                     // Per-series marker.symbol = "none" → pure line (no markers).
@@ -1144,7 +1144,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
             const effectiveColor = options?.gradientColor ??
                 seriesColor ??
                 (options?.seriesIndex !== undefined
-                    ? themeColorPalette[options.seriesIndex % themeColorPalette.length]
+                    ? chartPaletteColorAt(themeColorPalette, options.seriesIndex)
                     : undefined);
             // Per-data-point color overrides — Gantt charts use `<c:dPt>` to
             // give every task its own color. Build a per-point color array
@@ -1166,7 +1166,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                     // with (or the series' own colour when one was authored).
                     const existing = Array.isArray(target.marker?.colors)
                         ? target.marker.colors
-                        : themeColorPalette;
+                        : expandChartPalette(themeColorPalette);
                     const labelCount = Array.isArray(target.labels)
                         ? target.labels.length
                         : 0;
@@ -1584,7 +1584,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                 const ofPieType = resolveOfPieType(spec.ofPieType);
                 const secondScale = clampSecondPieSize(spec.secondPieSize) / 100;
                 const halfAngle = otherSliceHalfAngle(otherTotal, total);
-                const paletteAt = (index) => themeColorPalette[index % themeColorPalette.length];
+                const paletteAt = (index) => chartPaletteColorAt(themeColorPalette, index);
                 // Layout in paper coordinates (0-1 across the plot area
                 // inside the margins). Main pie on the left, secondary plot
                 // on the right.
@@ -1714,7 +1714,9 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                     labels: pieData.labels,
                     name: dataLabel,
                     marker: {
-                        colors: themeColorPalette,
+                        // Unrolled through Excel's luminance variations so slice 7 does
+                        // not repeat slice 1 (rowsncolumns/spreadsheet#1045).
+                        colors: expandChartPalette(themeColorPalette),
                     },
                 };
                 // Ties the trace back to spec.series for click selection and

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rowsncolumns/charts",
-  "version": "28.1.5",
+  "version": "28.1.6",
   "author": "Vinay M",
   "license": "SEE LICENSE IN LICENSE.md",
   "main": "./dist/cjs/index.js",
@@ -72,9 +72,9 @@
     "@rowsncolumns/icons": ">=7.2.33",
     "@rowsncolumns/spreadsheet": ">=10.4.5",
     "@rowsncolumns/spreadsheet-state": ">=29.1.7",
-    "@rowsncolumns/toolkit": ">=24.5.6",
+    "@rowsncolumns/toolkit": ">=24.5.7",
     "@rowsncolumns/ui": ">=16.0.4",
-    "@rowsncolumns/utils": ">=9.5.4",
+    "@rowsncolumns/utils": ">=9.5.5",
     "@types/react-plotly.js": "^2.6.3",
     "echarts": "^5.6.0",
     "formik": "^2.4.6",