@geotab/zenith 3.14.1 → 3.15.0-beta.1

package/esm/chart/accessibleChart/generatePieNarrative.d.ts

@@ -0,0 +1,7 @@
+import { ChartData } from "chart.js";
+export declare const PIE_LARGE_DATASET_THRESHOLD = 6;
+export declare const PIE_LARGEST_COUNT = 3;
+export declare function formatPieSlice(label: string, value: number, total: number, decimalLength: number): string;
+export declare function generatePieSliceDetails(values: number[], labels: string[], total: number, decimalLength: number): string[];
+export declare function generatePieSummaryLines(values: number[], labels: string[], total: number, decimalLength: number, details: string[], translate: (s: string) => string): string[];
+export declare function generatePieNarrative(data: ChartData, translate: (s: string) => string): string[];

package/esm/chart/accessibleChart/generatePieNarrative.js

@@ -0,0 +1,167 @@
+import { injectString } from "../../utils/localization/translationsDictionary";
+import { calculateMinTruncationPrecision } from "../utils/calculateMinTruncationPrecision";
+import { truncateDecimals } from "../../utils/truncateDecimals";
+injectString("da-DK", "Summary: {COUNT} slices.", "Oversigt: {COUNT} udsnit.");
+injectString("en", "Summary: {COUNT} slices.", "Summary: {COUNT} slices.");
+injectString("fi-FI", "Summary: {COUNT} slices.", "Yhteenveto: {COUNT} segmentti\xE4.");
+injectString("hu-HU", "Summary: {COUNT} slices.", "\xD6sszefoglal\xE1s: {COUNT} szelet.");
+injectString("ms", "Summary: {COUNT} slices.", "Ringkasan: {COUNT} hirisan.");
+injectString("nb-NO", "Summary: {COUNT} slices.", "Sammendrag: {COUNT} utsnitt.");
+injectString("nl", "Summary: {COUNT} slices.", "Samenvatting: {COUNT} segmenten.");
+injectString("pt-BR", "Summary: {COUNT} slices.", "Resumo: {COUNT} fatias.");
+injectString("sk-SK", "Summary: {COUNT} slices.", "S\xFAhrn: {COUNT} v\xFDsekov.");
+injectString("sv", "Summary: {COUNT} slices.", "Sammanfattning: {COUNT} segment.");
+injectString("ar", "Summary: {COUNT} slices.", "\u0627\u0644\u0645\u0644\u062E\u0635: {COUNT} \u0634\u0631\u064A\u062D\u0629.");
+injectString("lt-LT", "Summary: {COUNT} slices.", "Santrauka: {COUNT} segmentai.");
+injectString("lv-LV", "Summary: {COUNT} slices.", "Kopsavilkums: {COUNT} sektori.");
+injectString("ka-GE", "Summary: {COUNT} slices.", "\u10E8\u10D4\u10EF\u10D0\u10DB\u10D4\u10D1\u10D0: {COUNT} \u10E1\u10D4\u10D2\u10DB\u10D4\u10DC\u10E2\u10D8.");
+injectString("el-GR", "Summary: {COUNT} slices.", "\u03A3\u03CD\u03BD\u03BF\u03C8\u03B7: {COUNT} \u03C4\u03BC\u03AE\u03BC\u03B1\u03C4\u03B1.");
+injectString("et-EE", "Summary: {COUNT} slices.", "Kokkuv\xF5te: {COUNT} sektorit.");
+injectString("bg-BG", "Summary: {COUNT} slices.", "\u041E\u0431\u043E\u0431\u0449\u0435\u043D\u0438\u0435: {COUNT} \u0441\u0435\u0433\u043C\u0435\u043D\u0442\u0430.");
+injectString("da-DK", "Largest:", "St\xF8rst:");
+injectString("en", "Largest:", "Largest:");
+injectString("fi-FI", "Largest:", "Suurin:");
+injectString("hu-HU", "Largest:", "Legnagyobb:");
+injectString("ms", "Largest:", "Terbesar:");
+injectString("nb-NO", "Largest:", "St\xF8rst:");
+injectString("nl", "Largest:", "Grootste:");
+injectString("pt-BR", "Largest:", "Maior:");
+injectString("sk-SK", "Largest:", "Najv\xE4\u010D\u0161\xED:");
+injectString("sv", "Largest:", "St\xF6rst:");
+injectString("ar", "Largest:", "\u0627\u0644\u0623\u0643\u0628\u0631:");
+injectString("lt-LT", "Largest:", "Did\u017Eiausias:");
+injectString("lv-LV", "Largest:", "Liel\u0101kais:");
+injectString("ka-GE", "Largest:", "\u10E7\u10D5\u10D4\u10DA\u10D0\u10D6\u10D4 \u10D3\u10D8\u10D3\u10D8:");
+injectString("el-GR", "Largest:", "\u039C\u03B5\u03B3\u03B1\u03BB\u03CD\u03C4\u03B5\u03C1\u03BF:");
+injectString("et-EE", "Largest:", "Suurim:");
+injectString("bg-BG", "Largest:", "\u041D\u0430\u0439-\u0433\u043E\u043B\u044F\u043C:");
+injectString("da-DK", "Smallest:", "Mindst:");
+injectString("en", "Smallest:", "Smallest:");
+injectString("fi-FI", "Smallest:", "Pienin:");
+injectString("hu-HU", "Smallest:", "Legkisebb:");
+injectString("ms", "Smallest:", "Terkecil:");
+injectString("nb-NO", "Smallest:", "Minst:");
+injectString("nl", "Smallest:", "Kleinste:");
+injectString("pt-BR", "Smallest:", "Menor:");
+injectString("sk-SK", "Smallest:", "Najmen\u0161\xED:");
+injectString("sv", "Smallest:", "Minst:");
+injectString("ar", "Smallest:", "\u0627\u0644\u0623\u0635\u063A\u0631:");
+injectString("lt-LT", "Smallest:", "Ma\u017Eiausias:");
+injectString("lv-LV", "Smallest:", "Maz\u0101kais:");
+injectString("ka-GE", "Smallest:", "\u10E7\u10D5\u10D4\u10DA\u10D0\u10D6\u10D4 \u10DE\u10D0\u10E2\u10D0\u10E0\u10D0:");
+injectString("el-GR", "Smallest:", "\u039C\u03B9\u03BA\u03C1\u03CC\u03C4\u03B5\u03C1\u03BF:");
+injectString("et-EE", "Smallest:", "V\xE4ikseim:");
+injectString("bg-BG", "Smallest:", "\u041D\u0430\u0439-\u043C\u0430\u043B\u044A\u043A:");
+injectString("da-DK", "Rest: {COUNT} other slices account for {PCT}%.", "Resten: {COUNT} andre udsnit udg\xF8r {PCT}%.");
+injectString("en", "Rest: {COUNT} other slices account for {PCT}%.", "Rest: {COUNT} other slices account for {PCT}%.");
+injectString("fi-FI", "Rest: {COUNT} other slices account for {PCT}%.", "Muut: {COUNT} muuta segmentti\xE4 kattaa {PCT}%.");
+injectString("hu-HU", "Rest: {COUNT} other slices account for {PCT}%.", "T\xF6bbi: {COUNT} egy\xE9b szelet teszi ki a {PCT}%-ot.");
+injectString("ms", "Rest: {COUNT} other slices account for {PCT}%.", "Selebihnya: {COUNT} hirisan lain mewakili {PCT}%.");
+injectString("nb-NO", "Rest: {COUNT} other slices account for {PCT}%.", "Resten: {COUNT} andre utsnitt utgj\xF8r {PCT}%.");
+injectString("nl", "Rest: {COUNT} other slices account for {PCT}%.", "Rest: {COUNT} andere segmenten zijn goed voor {PCT}%.");
+injectString("pt-BR", "Rest: {COUNT} other slices account for {PCT}%.", "Restante: {COUNT} outras fatias representam {PCT}%.");
+injectString("sk-SK", "Rest: {COUNT} other slices account for {PCT}%.", "Zvy\u0161ok: {COUNT} \u010Fal\u0161\xEDch v\xFDsekov tvor\xED {PCT}%.");
+injectString("sv", "Rest: {COUNT} other slices account for {PCT}%.", "\xD6vriga: {COUNT} andra segment svarar f\xF6r {PCT}%.");
+injectString("ar", "Rest: {COUNT} other slices account for {PCT}%.", "\u0627\u0644\u0645\u062A\u0628\u0642\u064A: {COUNT} \u0634\u0631\u064A\u062D\u0629 \u0623\u062E\u0631\u0649 \u062A\u0645\u062B\u0651\u0644 {PCT}\u066A.");
+injectString("lt-LT", "Rest: {COUNT} other slices account for {PCT}%.", "Kiti: {COUNT} segmentai sudaro {PCT}%.");
+injectString("lv-LV", "Rest: {COUNT} other slices account for {PCT}%.", "P\u0101r\u0113jie: {COUNT} sektori veido {PCT}%.");
+injectString("ka-GE", "Rest: {COUNT} other slices account for {PCT}%.", "\u10D3\u10D0\u10DC\u10D0\u10E0\u10E9\u10D4\u10DC\u10D8: {COUNT} \u10E1\u10D4\u10D2\u10DB\u10D4\u10DC\u10E2\u10D8 \u10E8\u10D4\u10D0\u10D3\u10D2\u10D4\u10DC\u10E1 {PCT}%-\u10E1.");
+injectString("el-GR", "Rest: {COUNT} other slices account for {PCT}%.", "\u03A5\u03C0\u03CC\u03BB\u03BF\u03B9\u03C0\u03B1: {COUNT} \u03C4\u03BC\u03AE\u03BC\u03B1\u03C4\u03B1 \u03B1\u03BD\u03C4\u03B9\u03C3\u03C4\u03BF\u03B9\u03C7\u03BF\u03CD\u03BD \u03C3\u03C4\u03BF {PCT}%.");
+injectString("et-EE", "Rest: {COUNT} other slices account for {PCT}%.", "\xDClej\xE4\xE4nud: {COUNT} sektorit moodustavad {PCT}%.");
+injectString("bg-BG", "Rest: {COUNT} other slices account for {PCT}%.", "\u041E\u0441\u0442\u0430\u043D\u0430\u043B\u0438\u0442\u0435: {COUNT} \u0441\u0435\u0433\u043C\u0435\u043D\u0442\u0430 \u043F\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043B\u044F\u0432\u0430\u0442 {PCT}%.");
+injectString("da-DK", "Details, {COUNT} items:", "Detaljer, {COUNT} elementer:");
+injectString("en", "Details, {COUNT} items:", "Details, {COUNT} items:");
+injectString("fi-FI", "Details, {COUNT} items:", "Tiedot, {COUNT} kohdetta:");
+injectString("hu-HU", "Details, {COUNT} items:", "R\xE9szletek, {COUNT} elem:");
+injectString("ms", "Details, {COUNT} items:", "Butiran, {COUNT} item:");
+injectString("nb-NO", "Details, {COUNT} items:", "Detaljer, {COUNT} elementer:");
+injectString("nl", "Details, {COUNT} items:", "Details, {COUNT} items:");
+injectString("pt-BR", "Details, {COUNT} items:", "Detalhes, {COUNT} itens:");
+injectString("sk-SK", "Details, {COUNT} items:", "Podrobnosti, {COUNT} polo\u017Eiek:");
+injectString("sv", "Details, {COUNT} items:", "Detaljer, {COUNT} objekt:");
+injectString("ar", "Details, {COUNT} items:", "\u0627\u0644\u062A\u0641\u0627\u0635\u064A\u0644\u060C {COUNT} \u0639\u0646\u0627\u0635\u0631:");
+injectString("lt-LT", "Details, {COUNT} items:", "Detal\u0117s, {COUNT} elementai:");
+injectString("lv-LV", "Details, {COUNT} items:", "Deta\u013Cas, {COUNT} vienumi:");
+injectString("ka-GE", "Details, {COUNT} items:", "\u10D3\u10D4\u10E2\u10D0\u10DA\u10D4\u10D1\u10D8, {COUNT} \u10D4\u10DA\u10D4\u10DB\u10D4\u10DC\u10E2\u10D8:");
+injectString("el-GR", "Details, {COUNT} items:", "\u039B\u03B5\u03C0\u03C4\u03BF\u03BC\u03AD\u03C1\u03B5\u03B9\u03B5\u03C2, {COUNT} \u03C3\u03C4\u03BF\u03B9\u03C7\u03B5\u03AF\u03B1:");
+injectString("et-EE", "Details, {COUNT} items:", "\xDCksikasjad, {COUNT} \xFCksust:");
+injectString("bg-BG", "Details, {COUNT} items:", "\u041F\u043E\u0434\u0440\u043E\u0431\u043D\u043E\u0441\u0442\u0438, {COUNT} \u0435\u043B\u0435\u043C\u0435\u043D\u0442\u0430:");
+injectString("cs", "No data available", "Nejsou k\xA0dispozici \u017E\xE1dn\xE1 data");
+injectString("da-DK", "No data available", "Ingen data tilg\xE6ngelige");
+injectString("de", "No data available", "Keine Daten verf\xFCgbar");
+injectString("en", "No data available", "No data available");
+injectString("es", "No data available", "No hay datos disponibles");
+injectString("fi-FI", "No data available", "Tietoja ei saatavilla");
+injectString("fr", "No data available", "Aucune donn\xE9e disponible");
+injectString("fr-FR", "No data available", "Aucune donn\xE9e disponible");
+injectString("hu-HU", "No data available", "Nincsenek rendelkez\xE9sre \xE1ll\xF3 adatok");
+injectString("id", "No data available", "Tidak ada data tersedia");
+injectString("it", "No data available", "Nessun dato disponibile");
+injectString("ja", "No data available", "\u30C7\u30FC\u30BF\u304C\u3042\u308A\u307E\u305B\u3093");
+injectString("ko-KR", "No data available", "\uC0AC\uC6A9 \uAC00\uB2A5\uD55C \uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4");
+injectString("ms", "No data available", "Tiada data tersedia");
+injectString("nb-NO", "No data available", "Ingen data tilgjengelig");
+injectString("nl", "No data available", "Geen gegevens beschikbaar");
+injectString("pl", "No data available", "Brak dost\u0119pnych danych");
+injectString("pt-BR", "No data available", "Nenhum dado dispon\xEDvel");
+injectString("pt-PT", "No data available", "Sem dados dispon\xEDveis");
+injectString("sk-SK", "No data available", "Nie s\xFA k dispoz\xEDcii \u017Eiadne \xFAdaje");
+injectString("sv", "No data available", "Det finns inga tillg\xE4ngliga data");
+injectString("th", "No data available", "\u0E44\u0E21\u0E48\u0E21\u0E35\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25");
+injectString("tr", "No data available", "Mevcut veri yok");
+injectString("zh-Hans", "No data available", "\u65E0\u53EF\u7528\u6570\u636E");
+injectString("zh-TW", "No data available", "\u6C92\u6709\u53EF\u7528\u8CC7\u6599");
+injectString("ro-RO", "No data available", "Nu exist\u0103 date disponibile");
+injectString("ar", "No data available", "\u0644\u0627 \u062A\u0648\u0641\u0631 \u0628\u064A\u0627\u0646\u0627\u062A");
+injectString("lt-LT", "No data available", "Duomen\u0173 n\u0117ra");
+injectString("lv-LV", "No data available", "Nav pieejamu datu");
+injectString("ka-GE", "No data available", "\u10DB\u10DD\u10DC\u10D0\u10EA\u10D4\u10DB\u10D4\u10D1\u10D8 \u10D0\u10E0 \u10D0\u10E0\u10D8\u10E1");
+injectString("el-GR", "No data available", "\u0394\u03B5\u03BD \u03C5\u03C0\u03AC\u03C1\u03C7\u03BF\u03C5\u03BD \u03B4\u03B9\u03B1\u03B8\u03AD\u03C3\u03B9\u03BC\u03B1 \u03B4\u03B5\u03B4\u03BF\u03BC\u03AD\u03BD\u03B1");
+injectString("et-EE", "No data available", "Andmed puuduvad");
+injectString("bg-BG", "No data available", "\u041D\u044F\u043C\u0430 \u043D\u0430\u043B\u0438\u0447\u043D\u0438 \u0434\u0430\u043D\u043D\u0438");
+export const PIE_LARGE_DATASET_THRESHOLD = 6;
+export const PIE_LARGEST_COUNT = 3;
+export function formatPieSlice(label, value, total, decimalLength) {
+  const pct = Math.round(value / total * 100);
+  return `${label}: ${truncateDecimals(value, decimalLength)} (${pct}%)`;
+}
+export function generatePieSliceDetails(values, labels, total, decimalLength) {
+  return values.map((value, index) => {
+    var _a;
+    return formatPieSlice((_a = labels[index]) !== null && _a !== void 0 ? _a : String(index + 1), value, total, decimalLength);
+  });
+}
+export function generatePieSummaryLines(values, labels, total, decimalLength, details, translate) {
+  var _a;
+  const indexed = values.map((value, index) => ({
+    value,
+    index
+  }));
+  const sorted = [...indexed].sort((a, b) => b.value - a.value);
+  const largestItems = sorted.slice(0, PIE_LARGEST_COUNT);
+  const smallestItem = sorted[sorted.length - 1];
+  const restItems = sorted.slice(PIE_LARGEST_COUNT, sorted.length - 1);
+  const restTotal = restItems.reduce((sum, item) => sum + item.value, 0);
+  const restPct = Math.round(restTotal / total * 100);
+  const largestStr = largestItems.map(item => {
+    var _a;
+    return formatPieSlice((_a = labels[item.index]) !== null && _a !== void 0 ? _a : String(item.index + 1), item.value, total, decimalLength);
+  }).join(", ");
+  const smallestStr = formatPieSlice((_a = labels[smallestItem.index]) !== null && _a !== void 0 ? _a : String(smallestItem.index + 1), smallestItem.value, total, decimalLength);
+  return [translate("Summary: {COUNT} slices.").replace("{COUNT}", String(values.length)), `${translate("Largest:")} ${largestStr}.`, `${translate("Smallest:")} ${smallestStr}.`, translate("Rest: {COUNT} other slices account for {PCT}%.").replace("{COUNT}", String(restItems.length)).replace("{PCT}", String(restPct)), translate("Details, {COUNT} items:").replace("{COUNT}", String(values.length)), ...details];
+}
+export function generatePieNarrative(data, translate) {
+  var _a, _b, _c;
+  const values = (_b = (_a = data.datasets[0]) === null || _a === void 0 ? void 0 : _a.data) !== null && _b !== void 0 ? _b : [];
+  const labels = (_c = data.labels) !== null && _c !== void 0 ? _c : [];
+  const total = values.reduce((sum, v) => sum + (typeof v === "number" ? v : 0), 0);
+  if (total === 0 || values.length === 0) {
+    return [translate("No data available")];
+  }
+  const decimalLength = calculateMinTruncationPrecision(values.filter(v => typeof v === "number"));
+  const details = generatePieSliceDetails(values, labels, total, decimalLength);
+  if (values.length <= PIE_LARGE_DATASET_THRESHOLD) {
+    return details;
+  }
+  return generatePieSummaryLines(values, labels, total, decimalLength, details, translate);
+}

package/esm/chart/accessibleChart/interfaces.d.ts

@@ -10,6 +10,7 @@ export interface IAccessibleChart {
     data: AccessibleChartData;
     type: AccessibleChartType;
     options?: ILineChartOptions | IBarChartOptions;
+    narrativeId?: string;
 }
 export interface IChartTrend {
     trendDirection: "increases" | "decreases" | "flat" | "complex" | "undefined";

package/esm/chart/barChart/getDefaultOptions.js

@@ -1,4 +1,5 @@
 import { formatDate } from "../../utils/formatDate";
+import { getYAxisTickCount } from "../utils/getYAxisTickCount";
 const getDefaultGridStyle = (isDark) => ({
     drawTicks: false,
     color: isDark ? "#C0CCD8" : "#4E677E"
@@ -40,18 +41,16 @@ export const getDefaultOptions = (yAxis, isTimedData, isDark, translate, isRtl =
             border: defaultGridBorderStyle
         }
     };
+    // When there is more than one Y-axis, force every axis to render the same number of tick
+    // increments so their horizontal grid lines line up (see getYAxisTickCount for details).
+    const yAxisTickCount = getYAxisTickCount(yAxis.length);
     for (let i = 0; i < yAxis.length; i++) {
         const yAxisId = yAxis[i].name;
         scales[yAxisId] = {
             title: {
                 display: false
             },
-            ticks: {
-                color: textColor,
-                padding: 10,
-                source: "data",
-                autoSkip: true
-            },
+            ticks: Object.assign({ color: textColor, padding: 10, source: "data", autoSkip: yAxisTickCount === undefined }, (yAxisTickCount !== undefined && { count: yAxisTickCount })),
             beginAtZero: true,
             grid: i === 0 ? getDefaultGridStyle(isDark) : { display: false },
             border: defaultGridBorderStyle,

package/esm/chart/barChart.js

@@ -1,15 +1,13 @@
-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;
+import { injectString } from "../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;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useContext, useEffect, useId, useMemo } from "react";
 import { Bar } from "../react-chartjs/typedCharts";
 import { Chart as ChartJS, CategoryScale, LinearScale, BarController, BarElement } from "chart.js/auto";
@@ -36,43 +34,142 @@ import { ChartInsight } from "./chartInsight/chartInsight";
 import { userFormatContext } from "../utils/userFormat/userFormatContext";
 import { Summary } from "../summary/summary";
 import { AccessibleChart } from "./accessibleChart/accessibleChart";
+injectString("cs", "Bar chart", "Sloupcov\xFD graf");
+injectString("da-DK", "Bar chart", "S\xF8jlediagram");
+injectString("de", "Bar chart", "Balkendiagramm");
+injectString("en", "Bar chart", "Bar chart");
+injectString("es", "Bar chart", "Gr\xE1fico de barras");
+injectString("fi-FI", "Bar chart", "Pylv\xE4sdiagrammi");
+injectString("fr", "Bar chart", "Graphique \xE0 barres");
+injectString("fr-FR", "Bar chart", "Diagramme \xE0 barres");
+injectString("hu-HU", "Bar chart", "Oszlopdiagram");
+injectString("id", "Bar chart", "Bagan batang");
+injectString("it", "Bar chart", "Grafico a barre");
+injectString("ja", "Bar chart", "\u68D2\u30B0\u30E9\u30D5");
+injectString("ko-KR", "Bar chart", "\uB9C9\uB300\uD615 \uCC28\uD2B8");
+injectString("ms", "Bar chart", "Carta bar");
+injectString("nb-NO", "Bar chart", "S\xF8ylediagram");
+injectString("nl", "Bar chart", "Staafdiagram");
+injectString("pl", "Bar chart", "Wykres s\u0142upkowy");
+injectString("pt-BR", "Bar chart", "Gr\xE1fico de barras");
+injectString("pt-PT", "Bar chart", "Gr\xE1fico de barras");
+injectString("sk-SK", "Bar chart", "St\u013Apcov\xFD graf");
+injectString("sv", "Bar chart", "Stapeldiagram");
+injectString("th", "Bar chart", "\u0E41\u0E1C\u0E19\u0E20\u0E39\u0E21\u0E34\u0E41\u0E17\u0E48\u0E07");
+injectString("tr", "Bar chart", "\xC7ubuk grafik");
+injectString("zh-Hans", "Bar chart", "\u6761\u5F62\u56FE");
+injectString("zh-TW", "Bar chart", "\u6A6B\u689D\u5716");
+injectString("ro-RO", "Bar chart", "Grafic de bare");
+injectString("ar", "Bar chart", "\u0645\u062E\u0637\u0637 \u0634\u0631\u064A\u0637\u064A");
+injectString("lt-LT", "Bar chart", "Stulpelin\u0117 diagrama");
+injectString("lv-LV", "Bar chart", "Joslu diagramma");
+injectString("ka-GE", "Bar chart", "\u10D6\u10DD\u10DA\u10DD\u10D5\u10D0\u10DC\u10D8 \u10E1\u10E5\u10D4\u10DB\u10D0");
+injectString("el-GR", "Bar chart", "\u0393\u03C1\u03AC\u03C6\u03B7\u03BC\u03B1 \u03C1\u03AC\u03B2\u03B4\u03C9\u03BD");
+injectString("et-EE", "Bar chart", "Tulpdiagramm");
+injectString("bg-BG", "Bar chart", "\u0421\u0442\u044A\u043B\u0431\u043E\u0432\u0438\u0434\u043D\u0430 \u0434\u0438\u0430\u0433\u0440\u0430\u043C\u0430");
 ChartJS.register(BarController, BarElement, CategoryScale, LinearScale);
-export const BarChart = (_a) => {
-    var { data, options = {}, axis, insight, summary, legend, tooltip, plugins, className } = _a, rest = __rest(_a, ["data", "options", "axis", "insight", "summary", "legend", "tooltip", "plugins", "className"]);
-    const { translate } = useLanguage();
-    const isDrive = useDrive();
-    const isMobile = useMobile();
-    const isRtl = useIsRTL();
-    const fontSize = useMemo(() => (isDrive ? (isMobile ? 14 : 16) : 12), [isDrive, isMobile]);
-    const { dark } = useContext(themeContext);
-    useEffect(() => {
-        ChartJS.defaults.font = {
-            family: "Roboto",
-            size: fontSize
-        };
-        ChartJS.defaults.color = dark ? "#FFFFFF" : "#1F2833";
-    }, [fontSize, dark]);
-    const legendId = useId();
-    const tooltipId = useId();
-    const { toLocalDateTime } = useContext(userFormatContext);
-    const isTimedData = useMemo(() => isDateRange(data, false), [data]);
-    const isStacked = useMemo(() => { var _a, _b; return ((_b = (_a = options.scales) === null || _a === void 0 ? void 0 : _a.y) === null || _b === void 0 ? void 0 : _b.stacked) === true; }, [options]);
-    const yAxisMeta = useMemo(() => getYAxisMeta(data, isStacked), [data, isStacked]);
-    const defOptions = useMemo(() => getDefaultOptions(yAxisMeta, isTimedData, dark, translate, isRtl), [yAxisMeta, isTimedData, dark, translate, isRtl]);
-    const chartOptions = deepMerge(defOptions, options);
-    const { isHidden, toggleHidden } = useHidden();
-    const chartData = useMemo(() => {
-        const chData = convertDates(data, toLocalDateTime);
-        chData.datasets = chData.datasets.map((ds, i) => getDefaultDatasetStyle(ds, i));
-        chData.datasets = chData.datasets.map((ds, i) => (Object.assign(Object.assign({}, ds), { hidden: isHidden(i), order: isRtl ? chData.datasets.length - 1 - i : i })));
-        return chData;
-    }, [data, isHidden, toLocalDateTime, isRtl]);
-    const chartTooltip = useMemo(() => TooltipPlugin(tooltipId, tooltip, "top", isHidden, dark), [tooltipId, tooltip, isHidden, dark]);
-    const chartLegend = useMemo(() => legendPlugin(legendId, legend, isDrive, isHidden, toggleHidden), [isDrive, isHidden, legend, legendId, toggleHidden]);
-    const chartPlugins = useMemo(() => [...(plugins || []), chartTooltip, chartLegend], [chartLegend, chartTooltip, plugins]);
-    const { xLabels, yLabels } = useAxisLabels(axis, chartOptions);
-    const intSummary = useSummary(summary, chartData);
-    const isMainHidden = useMemo(() => isHidden(0), [isHidden]);
-    const toggleMainData = useCallback(() => toggleHidden(0), [toggleHidden]);
-    return (_jsxs("div", { className: classNames(["zen-chart", className || ""]), children: [insight ? _jsx(ChartInsight, Object.assign({}, insight)) : null, summary ? _jsx(Summary, Object.assign({ onToggle: toggleMainData, isEnabled: isMainHidden }, intSummary)) : null, (isDrive ? undefined : xLabels) || yLabels.length > 0 ? (_jsx(ChartAxis, { xLabel: isDrive ? undefined : xLabels, yLabels: yLabels, yAxisPosition: isRtl ? "left" : "right" })) : null, _jsx("div", { className: "zen-chart__chart", children: _jsx(Bar, Object.assign({ options: chartOptions, data: chartData, plugins: chartPlugins }, rest, { "aria-hidden": true })) }), _jsx("div", { className: "zen-chart__legend", id: legendId }), isDrive && xLabels ? _jsx("div", { className: "zen-chart__x-axis", children: xLabels }) : null, _jsx(AccessibleChart, { type: "bar", data: chartData, options: chartOptions })] }));
-};
+export const BarChart = _a => {
+  var {
+      data,
+      options = {},
+      axis,
+      insight,
+      summary,
+      legend,
+      tooltip,
+      plugins,
+      className
+    } = _a,
+    rest = __rest(_a, ["data", "options", "axis", "insight", "summary", "legend", "tooltip", "plugins", "className"]);
+  const {
+    translate
+  } = useLanguage();
+  const isDrive = useDrive();
+  const isMobile = useMobile();
+  const isRtl = useIsRTL();
+  const fontSize = useMemo(() => isDrive ? isMobile ? 14 : 16 : 12, [isDrive, isMobile]);
+  const {
+    dark
+  } = useContext(themeContext);
+  useEffect(() => {
+    ChartJS.defaults.font = {
+      family: "Roboto",
+      size: fontSize
+    };
+    ChartJS.defaults.color = dark ? "#FFFFFF" : "#1F2833";
+  }, [fontSize, dark]);
+  const legendId = useId();
+  const tooltipId = useId();
+  const narrativeId = useId();
+  const {
+    toLocalDateTime
+  } = useContext(userFormatContext);
+  const isTimedData = useMemo(() => isDateRange(data, false), [data]);
+  const isStacked = useMemo(() => {
+    var _a, _b;
+    return ((_b = (_a = options.scales) === null || _a === void 0 ? void 0 : _a.y) === null || _b === void 0 ? void 0 : _b.stacked) === true;
+  }, [options]);
+  const yAxisMeta = useMemo(() => getYAxisMeta(data, isStacked), [data, isStacked]);
+  const defOptions = useMemo(() => getDefaultOptions(yAxisMeta, isTimedData, dark, translate, isRtl), [yAxisMeta, isTimedData, dark, translate, isRtl]);
+  const chartOptions = deepMerge(defOptions, options);
+  const {
+    isHidden,
+    toggleHidden
+  } = useHidden();
+  const chartData = useMemo(() => {
+    const chData = convertDates(data, toLocalDateTime);
+    chData.datasets = chData.datasets.map((ds, i) => getDefaultDatasetStyle(ds, i));
+    chData.datasets = chData.datasets.map((ds, i) => Object.assign(Object.assign({}, ds), {
+      hidden: isHidden(i),
+      order: isRtl ? chData.datasets.length - 1 - i : i
+    }));
+    return chData;
+  }, [data, isHidden, toLocalDateTime, isRtl]);
+  const chartTooltip = useMemo(() => TooltipPlugin(tooltipId, tooltip, "top", isHidden, dark), [tooltipId, tooltip, isHidden, dark]);
+  const chartLegend = useMemo(() => legendPlugin(legendId, legend, isDrive, isHidden, toggleHidden), [isDrive, isHidden, legend, legendId, toggleHidden]);
+  const chartPlugins = useMemo(() => [...(plugins || []), chartTooltip, chartLegend], [chartLegend, chartTooltip, plugins]);
+  const {
+    xLabels,
+    yLabels
+  } = useAxisLabels(axis, chartOptions);
+  const intSummary = useSummary(summary, chartData);
+  const isMainHidden = useMemo(() => isHidden(0), [isHidden]);
+  const toggleMainData = useCallback(() => toggleHidden(0), [toggleHidden]);
+  return _jsxs(_Fragment, {
+    children: [_jsxs("div", {
+      className: classNames(["zen-chart", className || ""]),
+      tabIndex: 0,
+      role: "figure",
+      "aria-label": translate("Bar chart"),
+      "aria-describedby": narrativeId,
+      children: [insight ? _jsx(ChartInsight, Object.assign({}, insight)) : null, summary ? _jsx(Summary, Object.assign({
+        onToggle: toggleMainData,
+        isEnabled: isMainHidden
+      }, intSummary)) : null, (isDrive ? undefined : xLabels) || yLabels.length > 0 ? _jsx(ChartAxis, {
+        xLabel: isDrive ? undefined : xLabels,
+        yLabels: yLabels,
+        yAxisPosition: isRtl ? "left" : "right"
+      }) : null, _jsx("div", {
+        className: "zen-chart__chart",
+        children: _jsx(Bar, Object.assign({
+          options: chartOptions,
+          data: chartData,
+          plugins: chartPlugins
+        }, rest, {
+          "aria-hidden": true
+        }))
+      }), _jsx("div", {
+        className: "zen-chart__legend",
+        id: legendId
+      }), isDrive && xLabels ? _jsx("div", {
+        className: "zen-chart__x-axis",
+        children: xLabels
+      }) : null]
+    }), _jsx(AccessibleChart, {
+      type: "bar",
+      data: chartData,
+      options: chartOptions,
+      narrativeId: narrativeId
+    })]
+  });
+};

package/esm/chart/interfaces.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface IYAxisMeta {
     name: string;
     min: number;

package/esm/chart/lineChart/getDefaultOptions.js

@@ -1,4 +1,5 @@
 import { formatDate } from "../../utils/formatDate";
+import { getYAxisTickCount } from "../utils/getYAxisTickCount";
 const defaultGridStyle = {
     drawTicks: false,
     color: "#C0CCD8"
@@ -94,18 +95,16 @@ export const getDefaultOptions = (yAxis, xAxis, isTimedData, ticks, isDark, tran
             border: defaultGridBorderStyle
         }
     };
+    // When there is more than one Y-axis, force every axis to render the same number of tick
+    // increments so their horizontal grid lines line up (see getYAxisTickCount for details).
+    const yAxisTickCount = getYAxisTickCount(yAxis.length);
     for (let i = 0; i < yAxis.length; i++) {
         const yAxisId = yAxis[i].name;
         scales[yAxisId] = {
             title: {
                 display: false
             },
-            ticks: {
-                color: textColor,
-                padding: 10,
-                source: "data",
-                autoSkip: true
-            },
+            ticks: Object.assign({ color: textColor, padding: 10, source: "data", autoSkip: yAxisTickCount === undefined }, (yAxisTickCount !== undefined && { count: yAxisTickCount })),
             beginAtZero: true,
             grid: i === 0 ? defaultGridStyle : { display: false },
             border: defaultGridBorderStyle,

package/esm/chart/lineChart/useChartTicks.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const useChartTicks: () => {
     chartRef: import("react").RefObject<HTMLDivElement | null>;
     ticks: number;

package/esm/chart/lineChart/useSummary.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ILineChartData } from "./interfaces";
 import { IBarChartData } from "../barChart/interfaces";
 import { IPieChartData } from "../pieChart/interfaces";
@@ -8,13 +7,13 @@ export declare const useSummary: (chartSummary: IChartSummary | false | undefine
     value: string | number | bigint | true | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined>;
     color: string | undefined;
     prefix?: import("react").ReactNode;
-    unit?: string | undefined;
+    unit?: string;
     tooltip?: import("react").ReactNode;
-    more?: import("react").ReactNode;
-    isEnabled?: boolean | undefined;
-    onToggle?: (() => void) | undefined;
+    more?: React.ReactNode;
+    isEnabled?: boolean;
+    onToggle?: () => void;
     description?: string | number | bigint | boolean | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | null | undefined;
-    label?: string | undefined;
-    onClick?: (() => void) | undefined;
-    isHidden?: boolean | undefined;
+    label?: string;
+    onClick?: () => void;
+    isHidden?: boolean;
 };