@geotab/zenith 3.14.1 → 3.15.0-beta.0

package/dist/chart/pieChart.js

@@ -1,19 +1,55 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
+
+const {
+  injectString
+} = require("../utils/localization/translationsDictionary");
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
 };
-Object.defineProperty(exports, "__esModule", { value: true });
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.PieChart = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+injectString("cs", "Pie chart", "V\xFDse\u010Dov\xFD graf");
+injectString("da-DK", "Pie chart", "Cirkeldiagram");
+injectString("de", "Pie chart", "Kreisdiagramm");
+injectString("en", "Pie chart", "Pie chart");
+injectString("es", "Pie chart", "Gr\xE1fico de torta");
+injectString("fi-FI", "Pie chart", "Ympyr\xE4kaavio");
+injectString("fr", "Pie chart", "Graphique \xE0 secteurs");
+injectString("fr-FR", "Pie chart", "Diagramme circulaire");
+injectString("hu-HU", "Pie chart", "Keresztdiagram");
+injectString("id", "Pie chart", "Bagan pai");
+injectString("it", "Pie chart", "Grafico a torta");
+injectString("ja", "Pie chart", "\u5186\u30B0\u30E9\u30D5");
+injectString("ko-KR", "Pie chart", "\uD30C\uC774 \uCC28\uD2B8");
+injectString("ms", "Pie chart", "Carta pai");
+injectString("nb-NO", "Pie chart", "Sirkeldiagram");
+injectString("nl", "Pie chart", "Cirkeldiagram");
+injectString("pl", "Pie chart", "Wykres ko\u0142owy");
+injectString("pt-BR", "Pie chart", "Gr\xE1fico de pizza");
+injectString("pt-PT", "Pie chart", "Gr\xE1fico de setores");
+injectString("sk-SK", "Pie chart", "Kol\xE1\u010Dov\xFD graf");
+injectString("sv", "Pie chart", "Cirkeldiagram");
+injectString("th", "Pie chart", "\u0E41\u0E1C\u0E19\u0E20\u0E39\u0E21\u0E34\u0E27\u0E07\u0E01\u0E25\u0E21");
+injectString("tr", "Pie chart", "Pasta grafik");
+injectString("zh-Hans", "Pie chart", "\u997C\u56FE");
+injectString("zh-TW", "Pie chart", "\u5713\u5F62\u5716");
+injectString("ro-RO", "Pie chart", "Diagram\u0103 circular\u0103");
+injectString("ar", "Pie chart", "\u0645\u062E\u0637\u0637 \u062F\u0627\u0626\u0631\u064A");
+injectString("lt-LT", "Pie chart", "Skritulin\u0117 diagrama");
+injectString("lv-LV", "Pie chart", "Sektoru diagramma");
+injectString("ka-GE", "Pie chart", "\u10EC\u10E0\u10D8\u10E3\u10DA\u10D8 \u10E1\u10E5\u10D4\u10DB\u10D0");
+injectString("el-GR", "Pie chart", "\u0393\u03C1\u03AC\u03C6\u03B7\u03BC\u03B1 \u03C0\u03AF\u03C4\u03B1\u03C2");
+injectString("et-EE", "Pie chart", "Sektordiagramm");
+injectString("bg-BG", "Pie chart", "\u041A\u0440\u044A\u0433\u043E\u0432\u0430 \u0434\u0438\u0430\u0433\u0440\u0430\u043C\u0430");
 const typedCharts_1 = require("../react-chartjs/typedCharts");
 const auto_1 = require("chart.js/auto");
 require("../react-chartjs/dateAdapter");
@@ -34,70 +70,132 @@ const accessibleChart_1 = require("./accessibleChart/accessibleChart");
 const centerTextPlugin_1 = require("./pieChart/centerTextPlugin");
 const pieLegendPlugin_1 = require("./pieChart/pieLegendPlugin");
 const legendPlugin_1 = require("./plugins/legend/legendPlugin");
+const useLanguage_1 = require("../utils/localization/useLanguage");
 auto_1.Chart.register(auto_1.PieController, auto_1.ArcElement);
-const PieChart = (_a) => {
-    var { data, options = {}, insight, summary, legend, tooltip, plugins, className } = _a, rest = __rest(_a, ["data", "options", "insight", "summary", "legend", "tooltip", "plugins", "className"]);
-    const { isHorizontal } = options;
-    const isDrive = (0, useDrive_1.useDrive)();
-    const isMobile = (0, useMobile_1.useMobile)();
-    const fontSize = (0, react_1.useMemo)(() => (isDrive ? (isMobile ? 14 : 16) : 12), [isDrive, isMobile]);
-    const { dark } = (0, react_1.useContext)(themeContext_1.themeContext);
-    const legendId = (0, react_1.useId)();
-    const tooltipId = (0, react_1.useId)();
-    const containerRef = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(() => {
-        var _a;
-        const el = containerRef.current;
-        const styles = el ? (_a = zen_1.zen.getComputedStyle) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, el) : undefined;
-        const fontFamily = (styles === null || styles === void 0 ? void 0 : styles.getPropertyValue("--main-font").trim()) || "Roboto";
-        const color = (styles === null || styles === void 0 ? void 0 : styles.getPropertyValue("--text-primary").trim()) || "";
-        auto_1.Chart.defaults.font = {
-            family: fontFamily,
-            size: fontSize
-        };
-        auto_1.Chart.defaults.color = color;
-    }, [fontSize, dark]);
-    const defOptions = (0, react_1.useMemo)(() => (0, getDefaultOptions_1.getDefaultOptions)(), []);
-    const chartOptions = (0, utils_1.deepMerge)(defOptions, options);
-    const { isHidden, toggleHidden: rawToggle } = (0, useHidden_1.useHidden)();
-    const pieData = data.datasets[0].data;
-    const toggleHidden = (0, react_1.useCallback)((index) => {
-        if (!isHidden(index)) {
-            const visibleCount = pieData.filter((_, i) => !isHidden(i)).length;
-            if (visibleCount <= 1)
-                return;
-        }
-        rawToggle(index);
-    }, [isHidden, rawToggle, pieData]);
-    const chartData = (0, react_1.useMemo)(() => {
-        const chData = Object.assign({}, data);
-        chData.datasets = chData.datasets.map(ds => (0, getDefaultDatasetStyle_1.getDefaultDatasetStyle)(ds));
-        chData.datasets[0].data = chData.datasets[0].data.map((value, index) => (isHidden(index) ? 0 : value));
-        return chData;
-    }, [data, isHidden]);
-    const chartTooltip = (0, react_1.useMemo)(() => (0, tooltipPlugin_1.TooltipPlugin)(tooltipId, tooltip, "left", isHidden, dark), [tooltipId, tooltip, isHidden, dark]);
-    const effectiveLegend = (0, react_1.useMemo)(() => (isHorizontal && legend !== false ? Object.assign(Object.assign({}, legend), { position: "right", showBar: true, showPercentage: true }) : legend), [isHorizontal, legend]);
-    const legendData = (0, react_1.useMemo)(() => {
-        var _a;
-        return (Object.assign(Object.assign({}, data), { datasets: [Object.assign(Object.assign({}, data.datasets[0]), { backgroundColor: (_a = chartData.datasets[0]) === null || _a === void 0 ? void 0 : _a.backgroundColor }), ...data.datasets.slice(1)] }));
-    }, [data, chartData]);
-    const chartLegend = (0, react_1.useMemo)(() => isHorizontal
-        ? (0, pieLegendPlugin_1.pieLegendPlugin)(legendId, effectiveLegend, isDrive, legendData, isHidden, toggleHidden)
-        : (0, legendPlugin_1.legendPlugin)(legendId, legend, isDrive, isHidden, toggleHidden), [isDrive, isHorizontal, effectiveLegend, legend, legendId, legendData, isHidden, toggleHidden]);
-    const resolvedCenterText = (0, react_1.useMemo)(() => {
-        if (!options.centerText)
-            return undefined;
-        const { getValue, value, label } = options.centerText;
-        if (getValue) {
-            const visibleValues = chartData.datasets[0].data.filter((_, i) => !isHidden(i));
-            return { value: getValue(visibleValues), label };
-        }
-        return { value, label };
-    }, [options.centerText, chartData, isHidden]);
-    const chartCenterText = (0, react_1.useMemo)(() => (0, centerTextPlugin_1.centerTextPlugin)(resolvedCenterText), [resolvedCenterText]);
-    const chartPlugins = (0, react_1.useMemo)(() => [...(plugins || []), chartLegend, chartTooltip, chartCenterText], [chartLegend, chartTooltip, chartCenterText, plugins]);
-    const intSummary = (0, useSummary_1.useSummary)(summary, chartData);
-    const legendRight = isHorizontal;
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: containerRef, className: (0, classNames_1.classNames)(["zen-chart", legendRight ? "zen-chart--legend-right" : "", className || ""]), children: [insight ? (0, jsx_runtime_1.jsx)(chartInsight_1.ChartInsight, Object.assign({}, insight)) : null, summary ? (0, jsx_runtime_1.jsx)(summary_1.Summary, Object.assign({}, intSummary)) : null, (0, jsx_runtime_1.jsx)("div", { className: "zen-chart__chart", children: (0, jsx_runtime_1.jsx)(typedCharts_1.Pie, Object.assign({ options: chartOptions, data: chartData, plugins: chartPlugins }, rest, { "aria-hidden": true })) }), (0, jsx_runtime_1.jsx)("div", { className: "zen-chart__legend", id: legendId }), (0, jsx_runtime_1.jsx)(accessibleChart_1.AccessibleChart, { type: "pie", data: chartData })] }));
+const PieChart = _a => {
+  var {
+      data,
+      options = {},
+      insight,
+      summary,
+      legend,
+      tooltip,
+      plugins,
+      className
+    } = _a,
+    rest = __rest(_a, ["data", "options", "insight", "summary", "legend", "tooltip", "plugins", "className"]);
+  const {
+    isHorizontal
+  } = options;
+  const {
+    translate
+  } = (0, useLanguage_1.useLanguage)();
+  const isDrive = (0, useDrive_1.useDrive)();
+  const isMobile = (0, useMobile_1.useMobile)();
+  const fontSize = (0, react_1.useMemo)(() => isDrive ? isMobile ? 14 : 16 : 12, [isDrive, isMobile]);
+  const {
+    dark
+  } = (0, react_1.useContext)(themeContext_1.themeContext);
+  const legendId = (0, react_1.useId)();
+  const tooltipId = (0, react_1.useId)();
+  const narrativeId = (0, react_1.useId)();
+  const containerRef = (0, react_1.useRef)(null);
+  (0, react_1.useEffect)(() => {
+    var _a;
+    const el = containerRef.current;
+    const styles = el ? (_a = zen_1.zen.getComputedStyle) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, el) : undefined;
+    const fontFamily = (styles === null || styles === void 0 ? void 0 : styles.getPropertyValue("--main-font").trim()) || "Roboto";
+    const color = (styles === null || styles === void 0 ? void 0 : styles.getPropertyValue("--text-primary").trim()) || "";
+    auto_1.Chart.defaults.font = {
+      family: fontFamily,
+      size: fontSize
+    };
+    auto_1.Chart.defaults.color = color;
+  }, [fontSize, dark]);
+  const defOptions = (0, react_1.useMemo)(() => (0, getDefaultOptions_1.getDefaultOptions)(), []);
+  const chartOptions = (0, utils_1.deepMerge)(defOptions, options);
+  const {
+    isHidden,
+    toggleHidden: rawToggle
+  } = (0, useHidden_1.useHidden)();
+  const pieData = data.datasets[0].data;
+  const toggleHidden = (0, react_1.useCallback)(index => {
+    if (!isHidden(index)) {
+      const visibleCount = pieData.filter((_, i) => !isHidden(i)).length;
+      if (visibleCount <= 1) return;
+    }
+    rawToggle(index);
+  }, [isHidden, rawToggle, pieData]);
+  const chartData = (0, react_1.useMemo)(() => {
+    const chData = Object.assign({}, data);
+    chData.datasets = chData.datasets.map(ds => (0, getDefaultDatasetStyle_1.getDefaultDatasetStyle)(ds));
+    chData.datasets[0].data = chData.datasets[0].data.map((value, index) => isHidden(index) ? 0 : value);
+    return chData;
+  }, [data, isHidden]);
+  const chartTooltip = (0, react_1.useMemo)(() => (0, tooltipPlugin_1.TooltipPlugin)(tooltipId, tooltip, "left", isHidden, dark), [tooltipId, tooltip, isHidden, dark]);
+  const effectiveLegend = (0, react_1.useMemo)(() => isHorizontal && legend !== false ? Object.assign(Object.assign({}, legend), {
+    position: "right",
+    showBar: true,
+    showPercentage: true
+  }) : legend, [isHorizontal, legend]);
+  const legendData = (0, react_1.useMemo)(() => {
+    var _a;
+    return Object.assign(Object.assign({}, data), {
+      datasets: [Object.assign(Object.assign({}, data.datasets[0]), {
+        backgroundColor: (_a = chartData.datasets[0]) === null || _a === void 0 ? void 0 : _a.backgroundColor
+      }), ...data.datasets.slice(1)]
+    });
+  }, [data, chartData]);
+  const chartLegend = (0, react_1.useMemo)(() => isHorizontal ? (0, pieLegendPlugin_1.pieLegendPlugin)(legendId, effectiveLegend, isDrive, legendData, isHidden, toggleHidden) : (0, legendPlugin_1.legendPlugin)(legendId, legend, isDrive, isHidden, toggleHidden), [isDrive, isHorizontal, effectiveLegend, legend, legendId, legendData, isHidden, toggleHidden]);
+  const resolvedCenterText = (0, react_1.useMemo)(() => {
+    if (!options.centerText) return undefined;
+    const {
+      getValue,
+      value,
+      label
+    } = options.centerText;
+    if (getValue) {
+      const visibleValues = chartData.datasets[0].data.filter((_, i) => !isHidden(i));
+      return {
+        value: getValue(visibleValues),
+        label
+      };
+    }
+    return {
+      value,
+      label
+    };
+  }, [options.centerText, chartData, isHidden]);
+  const chartCenterText = (0, react_1.useMemo)(() => (0, centerTextPlugin_1.centerTextPlugin)(resolvedCenterText), [resolvedCenterText]);
+  const chartPlugins = (0, react_1.useMemo)(() => [...(plugins || []), chartLegend, chartTooltip, chartCenterText], [chartLegend, chartTooltip, chartCenterText, plugins]);
+  const intSummary = (0, useSummary_1.useSummary)(summary, chartData);
+  const legendRight = isHorizontal;
+  return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+    children: [(0, jsx_runtime_1.jsxs)("div", {
+      ref: containerRef,
+      className: (0, classNames_1.classNames)(["zen-chart", legendRight ? "zen-chart--legend-right" : "", className || ""]),
+      tabIndex: 0,
+      role: "figure",
+      "aria-label": translate("Pie chart"),
+      "aria-describedby": narrativeId,
+      children: [insight ? (0, jsx_runtime_1.jsx)(chartInsight_1.ChartInsight, Object.assign({}, insight)) : null, summary ? (0, jsx_runtime_1.jsx)(summary_1.Summary, Object.assign({}, intSummary)) : null, (0, jsx_runtime_1.jsx)("div", {
+        className: "zen-chart__chart",
+        children: (0, jsx_runtime_1.jsx)(typedCharts_1.Pie, Object.assign({
+          options: chartOptions,
+          data: chartData,
+          plugins: chartPlugins
+        }, rest, {
+          "aria-hidden": true
+        }))
+      }), (0, jsx_runtime_1.jsx)("div", {
+        className: "zen-chart__legend",
+        id: legendId
+      })]
+    }), (0, jsx_runtime_1.jsx)(accessibleChart_1.AccessibleChart, {
+      type: "pie",
+      data: data,
+      narrativeId: narrativeId
+    })]
+  });
 };
-exports.PieChart = PieChart;
+exports.PieChart = PieChart;

package/dist/chart/plugins/linePlugin/getInterpolatedValue.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getInterpolatedValue = void 0;
+exports.getInterpolatedValue = getInterpolatedValue;
 function getInterpolatedValue(xScale, data, datasetIndex, xPixel) {
     const dataset = data.datasets[datasetIndex];
     const dataPoints = dataset.data;
@@ -43,4 +43,3 @@ function getInterpolatedValue(xScale, data, datasetIndex, xPixel) {
     const interpolatedY = y1 + ((y2 - y1) * (x - x1)) / (x2 - x1);
     return interpolatedY;
 }
-exports.getInterpolatedValue = getInterpolatedValue;

package/dist/chart/plugins/linePlugin/linePlugin.js

@@ -55,9 +55,32 @@ const LinePlugin = (containerId, options, isDark) => ({
             const y = chart.verticalLine.y;
             const topY = chart.chartArea.top;
             const bottomY = chart.chartArea.bottom;
-            (0, drawLine_1.drawLine)(ctx, x, topY, bottomY);
             const datasets = chart.data.datasets;
             let lowestValueY = Infinity;
+            const xScale = chart.scales.x;
+            let snappedX = x;
+            let closestDist = Infinity;
+            datasets.forEach((dataset, dsIndex) => {
+                if (!chart.isDatasetVisible(dsIndex)) {
+                    return;
+                }
+                if (chart.getDatasetMeta(dsIndex).type !== "line") {
+                    return;
+                }
+                const dataPoints = dataset.data;
+                for (const point of dataPoints) {
+                    if (point.y === null) {
+                        continue;
+                    }
+                    const px = xScale.getPixelForValue(point.x);
+                    const dist = Math.abs(px - x);
+                    if (dist < closestDist) {
+                        closestDist = dist;
+                        snappedX = px;
+                    }
+                }
+            });
+            (0, drawLine_1.drawLine)(ctx, snappedX, topY, bottomY);
             const items = datasets
                 .map((dataset, dsIndex) => {
                 if (!chart.isDatasetVisible(dsIndex)) {
@@ -66,8 +89,7 @@ const LinePlugin = (containerId, options, isDark) => ({
                 if (chart.getDatasetMeta(dsIndex).type !== "line") {
                     return undefined;
                 }
-                const xScale = chart.scales.x;
-                const value = (0, getInterpolatedValue_1.getInterpolatedValue)(xScale, chart.data, dsIndex, x);
+                const value = (0, getInterpolatedValue_1.getInterpolatedValue)(xScale, chart.data, dsIndex, snappedX);
                 const yAxisID = dataset.yAxisID || "y";
                 const yScale = chart.scales[yAxisID];
                 // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
@@ -95,8 +117,8 @@ const LinePlugin = (containerId, options, isDark) => ({
                 return;
             }
             const chartRect = chart.canvas.getBoundingClientRect();
-            const top = chartRect.top + (lowestValueY || y);
-            const left = chartRect.left + x;
+            const top = chartRect.top + (lowestValueY !== Infinity ? lowestValueY : y);
+            const left = chartRect.left + snappedX;
             if (zen_1.zen.document === undefined) {
                 return;
             }
@@ -113,8 +135,8 @@ const LinePlugin = (containerId, options, isDark) => ({
                 xLabel = scaleLabels[elementIdx];
             }
             else {
-                const xValue = chart.scales.x.getValueForPixel(x);
-                xLabel = xValue ? chart.scales.x.getLabelForValue(xValue) : undefined;
+                const xValue = chart.scales.x.getValueForPixel(snappedX);
+                xLabel = xValue !== undefined ? chart.scales.x.getLabelForValue(xValue) : undefined;
             }
             (0, renderTooltip_1.renderTooltip)(containerId, left + scrollLeft, top + scrollTop, "top", items, options === null || options === void 0 ? void 0 : options.title, options && options.subtitle !== undefined ? options.subtitle : xLabel, (options === null || options === void 0 ? void 0 : options.note) || undefined, isDark);
         }

package/dist/chart/utils/convertDates.d.ts

@@ -1,3 +1,3 @@
 import { IBarChartData } from "../barChart/interfaces";
 import { ILineChartData } from "../lineChart/interfaces";
-export declare const convertDates: (data: ILineChartData | IBarChartData, toLocalDateTime: (date: Date | string) => Date) => IBarChartData | ILineChartData;
+export declare const convertDates: (data: ILineChartData | IBarChartData, toLocalDateTime: (date: Date | string) => Date) => typeof data;

package/dist/chart/utils/getFormattedLabel.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getFormattedLabel = void 0;
+exports.getFormattedLabel = getFormattedLabel;
 const isDateString_1 = require("./isDateString");
 function getFormattedLabel(value, dateFormatter, options) {
     var _a, _b, _c;
@@ -17,4 +17,3 @@ function getFormattedLabel(value, dateFormatter, options) {
     }
     return String(value);
 }
-exports.getFormattedLabel = getFormattedLabel;

package/dist/chart/utils/getNiceAxisRange.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Computes a Y-axis min/max pair that:
+ *  - Fully contains the original [min, max] range.
+ *  - Splits into exactly `tickCount - 1` equal, "nice" (round-number) steps, so an axis
+ *    configured with this min/max and `ticks.count = tickCount` renders exactly `tickCount`
+ *    human-friendly tick values (e.g. 0, 25, 50, 75, 100) instead of arbitrary decimals.
+ *
+ * This is what allows forcing the same `ticks.count` across multiple Y-axes (see
+ * getYAxisTickCount) without sacrificing round-number tick labels: Chart.js's own tick
+ * generator produces evenly-spaced (but not necessarily round) values whenever `ticks.count`
+ * is combined with an explicit `min`/`max`, so the min/max passed in must already be "niced".
+ *
+ * **Precondition:** `min <= max`. An inverted range (`min > max`) produces a negative
+ * `rawStep`, which causes an early return of the original pair unchanged — Chart.js does not
+ * handle inverted axes gracefully. The current call chain enforces this via `normalizeRange`,
+ * so the inverted case is unreachable in practice; direct callers must guarantee it themselves.
+ */
+export declare const getNiceAxisRange: (min: number, max: number, tickCount: number) => {
+    min: number;
+    max: number;
+};

package/dist/chart/utils/getNiceAxisRange.js

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getNiceAxisRange = void 0;
+// Classic "nice numbers" step candidates, used to pick human-friendly tick spacing
+// (e.g. 1, 2, 2.5, 5, 10, 20, 25, 50, 100...) instead of arbitrary decimals. 2.5 is included
+// alongside the more common 1-2-5 sequence because omitting it causes the axis range to
+// overshoot the data significantly more often (e.g. a range of 94 rounds up to a step of 50,
+// i.e. a span of 200, instead of a step of 25, i.e. a span of 100).
+const NICE_STEP_MULTIPLIERS = [1, 2, 2.5, 5];
+/**
+ * Returns a sorted list of "nice" step candidates at or above `minStep`, spanning a few orders
+ * of magnitude so callers can pick the smallest one that satisfies their range requirement.
+ */
+const getNiceStepCandidatesAtLeast = (minStep) => {
+    if (!Number.isFinite(minStep) || minStep <= 0) {
+        return [];
+    }
+    const exponent = Math.floor(Math.log10(minStep));
+    const candidates = [];
+    // Search a window around the raw step's magnitude; one order of magnitude below covers
+    // rounding edge cases (e.g. minStep just above a power of ten), and several above ensure
+    // we can always find a candidate whose range covers the data even for very large steps.
+    for (let e = exponent - 1; e <= exponent + 6; e++) {
+        for (const multiplier of NICE_STEP_MULTIPLIERS) {
+            candidates.push(multiplier * Math.pow(10, e));
+        }
+    }
+    return candidates.filter(candidate => candidate >= minStep * 0.999).sort((a, b) => a - b);
+};
+/**
+ * Rounds `value` to a sensible number of decimal places derived from `step`'s magnitude, to
+ * avoid floating point artifacts like 0.30000000000000004 ending up in tick labels.
+ */
+const roundToStepPrecision = (value, step) => {
+    const decimals = Math.max(0, -Math.floor(Math.log10(step)) + 2);
+    const factor = Math.pow(10, decimals);
+    return Math.round(value * factor) / factor;
+};
+/**
+ * Computes a Y-axis min/max pair that:
+ *  - Fully contains the original [min, max] range.
+ *  - Splits into exactly `tickCount - 1` equal, "nice" (round-number) steps, so an axis
+ *    configured with this min/max and `ticks.count = tickCount` renders exactly `tickCount`
+ *    human-friendly tick values (e.g. 0, 25, 50, 75, 100) instead of arbitrary decimals.
+ *
+ * This is what allows forcing the same `ticks.count` across multiple Y-axes (see
+ * getYAxisTickCount) without sacrificing round-number tick labels: Chart.js's own tick
+ * generator produces evenly-spaced (but not necessarily round) values whenever `ticks.count`
+ * is combined with an explicit `min`/`max`, so the min/max passed in must already be "niced".
+ *
+ * **Precondition:** `min <= max`. An inverted range (`min > max`) produces a negative
+ * `rawStep`, which causes an early return of the original pair unchanged — Chart.js does not
+ * handle inverted axes gracefully. The current call chain enforces this via `normalizeRange`,
+ * so the inverted case is unreachable in practice; direct callers must guarantee it themselves.
+ */
+const getNiceAxisRange = (min, max, tickCount) => {
+    if (!Number.isFinite(min) || !Number.isFinite(max) || tickCount < 2) {
+        return { min, max };
+    }
+    const safeMax = min === max ? min + 1 : max;
+    const rawStep = (safeMax - min) / (tickCount - 1);
+    if (!(rawStep > 0)) {
+        return { min, max: safeMax };
+    }
+    const candidates = getNiceStepCandidatesAtLeast(rawStep);
+    for (const step of candidates) {
+        const niceMin = Math.floor(min / step) * step;
+        const niceMax = niceMin + step * (tickCount - 1);
+        if (niceMax >= safeMax) {
+            return { min: roundToStepPrecision(niceMin, step), max: roundToStepPrecision(niceMax, step) };
+        }
+    }
+    // Should be unreachable given the generated candidate range, but fall back safely.
+    return { min, max: safeMax };
+};
+exports.getNiceAxisRange = getNiceAxisRange;

package/dist/chart/utils/getRange.js

@@ -6,12 +6,12 @@ const getRange = (data) => {
     const { min, max } = (0, getMinMax_1.getMinMax)(data);
     let range = max - min;
     if (range === 0) {
-        range = min * 0.1;
+        range = Math.abs(min) * 0.1;
     }
     const suggestedMin = min - range * 0.1;
     const suggestedMax = max + range * 0.1;
     return {
-        min: suggestedMin,
+        min: min >= 0 && suggestedMin < 0 ? 0 : suggestedMin,
         max: suggestedMax
     };
 };

package/dist/chart/utils/getYAxisMeta.d.ts

@@ -1,7 +1,4 @@
+import { IYAxisMeta } from "../interfaces";
 import { ILineChartData } from "../lineChart/interfaces";
 import { IBarChartData } from "../barChart/interfaces";
-export declare const getYAxisMeta: (data: ILineChartData | IBarChartData, stacked?: boolean) => {
-    min: number;
-    max: number;
-    name: string;
-}[];
+export declare const getYAxisMeta: (data: ILineChartData | IBarChartData, stacked?: boolean) => IYAxisMeta[];

package/dist/chart/utils/getYAxisMeta.js

@@ -4,6 +4,19 @@ exports.getYAxisMeta = void 0;
 const getRange_1 = require("./getRange");
 const mergeRanges_1 = require("./mergeRanges");
 const normalizeRange_1 = require("./normalizeRange");
+const getNiceAxisRange_1 = require("./getNiceAxisRange");
+const getYAxisTickCount_1 = require("./getYAxisTickCount");
+// When there is more than one Y-axis, snap every axis's min/max to a shared "nice" tick count
+// (see getYAxisTickCount/getNiceAxisRange) so the chart can render the same number of
+// round-number tick increments on each axis, keeping their horizontal grid lines aligned.
+// Single-axis charts are returned unchanged.
+const alignYAxisRanges = (axes) => {
+    const tickCount = (0, getYAxisTickCount_1.getYAxisTickCount)(axes.length);
+    if (!tickCount) {
+        return axes;
+    }
+    return axes.map(axis => (Object.assign(Object.assign({}, axis), (0, getNiceAxisRange_1.getNiceAxisRange)(axis.min, axis.max, tickCount))));
+};
 const getYAxisMeta = (data, stacked = false) => {
     if (data.datasets.length === 0) {
         return [
@@ -34,7 +47,7 @@ const getYAxisMeta = (data, stacked = false) => {
                 valuesByX.set(xKey, existing);
             });
         });
-        return Object.values(axisMap).map(axis => {
+        const stackedResult = Object.values(axisMap).map(axis => {
             const stackedValues = [];
             axis.valuesByX.forEach(value => {
                 // Always include 0 as the baseline for stacked charts
@@ -52,6 +65,7 @@ const getYAxisMeta = (data, stacked = false) => {
             const normalized = (0, normalizeRange_1.normalizeRange)(range);
             return Object.assign({ name: axis.name }, normalized);
         });
+        return alignYAxisRanges(stackedResult);
     }
     const axisMap = data.datasets.reduce((acc, ds) => {
         const name = ds.yAxisID ? ds.yAxisID : "y";
@@ -62,6 +76,7 @@ const getYAxisMeta = (data, stacked = false) => {
         acc[name] = Object.assign({ name: name }, totalRange);
         return acc;
     }, {});
-    return Object.values(axisMap).map(el => (Object.assign(Object.assign({}, el), (0, normalizeRange_1.normalizeRange)(el))));
+    const result = Object.values(axisMap).map(el => (Object.assign(Object.assign({}, el), (0, normalizeRange_1.normalizeRange)(el))));
+    return alignYAxisRanges(result);
 };
 exports.getYAxisMeta = getYAxisMeta;

package/dist/chart/utils/getYAxisTickCount.d.ts

@@ -0,0 +1,15 @@
+/**
+ * When a chart renders more than one Y-axis (e.g. a primary/left axis and a secondary/right
+ * axis), Chart.js computes "nice" tick values independently per axis by default. Because each
+ * axis has its own data range, this frequently produces a different number of tick increments
+ * on each axis, which causes the horizontal grid lines to misalign between axes.
+ *
+ * Forcing every Y-axis to the same explicit `ticks.count` makes Chart.js generate that exact
+ * number of evenly-spaced ticks between each axis's own min/max, so the number of increments
+ * (and therefore the grid line positions) stay consistent across all Y-axes.
+ *
+ * Single-axis charts are left untouched (returns `undefined`, so Chart.js falls back to its
+ * default "nice ticks" behavior) since there is no second axis to align against.
+ */
+export declare const DUAL_YAXIS_TICK_COUNT = 5;
+export declare const getYAxisTickCount: (yAxisCount: number) => number | undefined;

package/dist/chart/utils/getYAxisTickCount.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getYAxisTickCount = exports.DUAL_YAXIS_TICK_COUNT = void 0;
+/**
+ * When a chart renders more than one Y-axis (e.g. a primary/left axis and a secondary/right
+ * axis), Chart.js computes "nice" tick values independently per axis by default. Because each
+ * axis has its own data range, this frequently produces a different number of tick increments
+ * on each axis, which causes the horizontal grid lines to misalign between axes.
+ *
+ * Forcing every Y-axis to the same explicit `ticks.count` makes Chart.js generate that exact
+ * number of evenly-spaced ticks between each axis's own min/max, so the number of increments
+ * (and therefore the grid line positions) stay consistent across all Y-axes.
+ *
+ * Single-axis charts are left untouched (returns `undefined`, so Chart.js falls back to its
+ * default "nice ticks" behavior) since there is no second axis to align against.
+ */
+exports.DUAL_YAXIS_TICK_COUNT = 5;
+const getYAxisTickCount = (yAxisCount) => (yAxisCount > 1 ? exports.DUAL_YAXIS_TICK_COUNT : undefined);
+exports.getYAxisTickCount = getYAxisTickCount;

package/dist/chart/utils/resampleArrayEvenly.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.resampleArrayEvenly = void 0;
+exports.resampleArrayEvenly = resampleArrayEvenly;
 function resampleArrayEvenly(originalArray, newLength) {
     const originalLength = originalArray.length;
     if (newLength <= 0 || originalLength === 0) {
@@ -20,4 +20,3 @@ function resampleArrayEvenly(originalArray, newLength) {
     }
     return resampledArray;
 }
-exports.resampleArrayEvenly = resampleArrayEvenly;

package/dist/checkbox/checkbox.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)

package/dist/checkboxListWithAction/checkboxListWithAction.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import "./checkboxListWithAction.less";
 import { IZenComponentProps } from "../commonHelpers/zenComponent";
 import { IColor } from "../groupsFilterRaw/groupsFilterInterfaces";

package/dist/chip/chip.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import "./chip.less";
 import { IZenComponentProps } from "./../commonHelpers/zenComponent";
 import { IIcon } from "../icons/icon";