@geotab/zenith 3.14.1 → 3.15.0-beta.0

package/dist/utils/compareElementsUtils/isArraysEqualDeeply.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isArraysEqualDeeply = void 0;
+exports.isArraysEqualDeeply = isArraysEqualDeeply;
 const isArraysEqualShallow_1 = require("./isArraysEqualShallow");
 const isBothArraysShallow_1 = require("./isBothArraysShallow");
 const isElementsEqual_1 = require("./isElementsEqual");
@@ -16,4 +16,3 @@ function isArraysEqualDeeply(a, b) {
     }
     return (0, isElementsEqual_1.isPropertiesEqual)(a, b);
 }
-exports.isArraysEqualDeeply = isArraysEqualDeeply;

package/dist/utils/compareElementsUtils/isElementsEqual.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isElementsEqual = exports.isPropertiesEqual = exports.isObjectsNotEqualShallow = exports.isPrimitivesNotEqual = exports.isArraysNotEqual = exports.isBothObjectsShallow = exports.isBothFunctions = exports.isBothArrays = exports.isBothObjects = void 0;
+exports.isPropertiesEqual = exports.isObjectsNotEqualShallow = exports.isPrimitivesNotEqual = exports.isArraysNotEqual = exports.isBothObjectsShallow = exports.isBothFunctions = exports.isBothArrays = exports.isBothObjects = void 0;
+exports.isElementsEqual = isElementsEqual;
 const isArraysEqualDeeply_1 = require("./isArraysEqualDeeply");
 const isArraysEqualShallow_1 = require("./isArraysEqualShallow");
 const isBothArraysShallow_1 = require("./isBothArraysShallow");
@@ -95,4 +96,3 @@ function isElementsEqual(...args) {
     }
     return (0, exports.isPropertiesEqual)(elem1, elem2);
 }
-exports.isElementsEqual = isElementsEqual;

package/dist/utils/escapeHtml.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.htmlEscape = void 0;
+exports.htmlEscape = htmlEscape;
 function htmlEscape(str) {
     return String(str || "")
         .replace(/&/g, "&")
@@ -9,4 +9,3 @@ function htmlEscape(str) {
         .replace(/</g, "&lt;")
         .replace(/>/g, "&gt;");
 }
-exports.htmlEscape = htmlEscape;

package/dist/utils/localization/directionContext.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { TTextDirection } from "./getTextDirection";
 export declare const directionContext: import("react").Context<TTextDirection>;

package/dist/utils/localization/languageContext.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const languageContext: import("react").Context<"it" | "th" | "tr" | "ms" | "id" | "ar" | "en" | "es" | "de" | "cs" | "fr-FR" | "fr" | "ja" | "nl" | "pl" | "pt-BR" | "sv" | "zh-Hans" | "ko-KR" | "zh-TW" | "da-DK" | "fi-FI" | "hu-HU" | "nb-NO" | "sk-SK" | "pt-PT" | "ro-RO" | "bg-BG" | "et-EE" | "el-GR" | "lv-LV" | "lt-LT" | "ka-GE">;

package/dist/utils/localization/translations/en.json

@@ -344,5 +344,16 @@
     "Customize view": "Customize view",
     "Select menu": "Select menu",
     "Increase value": "Increase value",
-    "Decrease value": "Decrease value"
+    "Decrease value": "Decrease value",
+    "Loading more rows": "Loading more rows",
+    "1 more row loaded": "1 more row loaded",
+    "{count} more rows loaded": "{count} more rows loaded",
+    "Line chart": "Line chart",
+    "Bar chart": "Bar chart",
+    "Pie chart": "Pie chart",
+    "Summary: {COUNT} slices.": "Summary: {COUNT} slices.",
+    "Largest:": "Largest:",
+    "Smallest:": "Smallest:",
+    "Rest: {COUNT} other slices account for {PCT}%.": "Rest: {COUNT} other slices account for {PCT}%.",
+    "Details, {COUNT} items:": "Details, {COUNT} items:"
 }

package/dist/utils/theme/themeContext.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare enum Theme {
     Default = 0,
     Drive = 1

package/dist/utils/topWindow/topWindowContext.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { zen } from "../zen";
 interface ITopWindow {
     topWindow: Window | typeof zen | undefined;

package/dist/utils/useFadeComponent.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const useFadeComponent: (initialState: boolean, onTransitionEnd?: (currentIsOpen: boolean) => void) => {
     renderComponent: boolean;
     showContent: boolean;

package/dist/utils/userFormat/userFormatContext.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface IUserFormat {
     dateFormat: string;
     timeFormat: string;

package/dist/waiting/waiting.d.ts

@@ -5,5 +5,6 @@ export interface IWaiting extends IZenComponentProps {
     delay?: number;
     hideOverlay?: boolean;
     description?: string;
+    label?: string;
 }
-export declare const Waiting: ({ isLoading, delay, hideOverlay, className, description }: IWaiting) => import("react/jsx-runtime").JSX.Element | null;
+export declare const Waiting: ({ isLoading, delay, hideOverlay, className, description, label }: IWaiting) => import("react/jsx-runtime").JSX.Element | null;

package/dist/waiting/waiting.js

@@ -6,23 +6,40 @@ const react_1 = require("react");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
 const zen_1 = require("../utils/zen");
-const Waiting = ({ isLoading = false, delay = 400, hideOverlay = false, className = "", description }) => {
+const Waiting = ({ isLoading = false, delay = 400, hideOverlay = false, className = "", description, label }) => {
     const [visible, setVisible] = (0, react_1.useState)(false);
+    const [statusText, setStatusText] = (0, react_1.useState)("");
     const spinnerDriveClassName = (0, useDriveClassName_1.useDriveClassName)("zen-waiting__spinner");
+    const showWaiting = isLoading && (delay <= 0 || visible);
     (0, react_1.useEffect)(() => {
         var _a;
         let timer;
-        if (isLoading) {
-            timer = (_a = zen_1.zen.setTimeout) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, () => setVisible(true), delay);
+        if (!isLoading) {
+            setVisible(false);
+        }
+        else if (delay <= 0) {
+            setVisible(true);
         }
         else {
-            setVisible(false);
+            timer = (_a = zen_1.zen.setTimeout) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, () => setVisible(true), delay);
+        }
+        return () => {
+            var _a;
+            timer && ((_a = zen_1.zen.clearTimeout) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, timer));
+        };
+    }, [isLoading, delay]);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        let timer;
+        setStatusText("");
+        if (isLoading && showWaiting) {
+            timer = (_a = zen_1.zen.setTimeout) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, () => setStatusText(description || label || ""), 0);
         }
         return () => {
             var _a;
             timer && ((_a = zen_1.zen.clearTimeout) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, timer));
         };
-    }, [isLoading, setVisible, delay]);
-    return visible ? ((0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-waiting", className]), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-waiting__overlay", hideOverlay ? "zen-waiting__overlay--hidden" : ""]) }), (0, jsx_runtime_1.jsxs)("div", { className: "zen-waiting__spinner-container", children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-waiting__spinner", spinnerDriveClassName || ""]), children: (0, jsx_runtime_1.jsxs)("svg", { viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsxs)("linearGradient", { id: "spinnerGradient", x1: "0", y1: "0", x2: "1", y2: "0", gradientUnits: "objectBoundingBox", children: [(0, jsx_runtime_1.jsx)("stop", { offset: "0%", stopColor: "var(--borders-form-field--active)", stopOpacity: "1" }), (0, jsx_runtime_1.jsx)("stop", { offset: "33.33%", stopColor: "var(--borders-form-field--active)", stopOpacity: "0.8" }), (0, jsx_runtime_1.jsx)("stop", { offset: "50%", stopColor: "var(--borders-form-field--active)", stopOpacity: "0.5" }), (0, jsx_runtime_1.jsx)("stop", { offset: "66.67%", stopColor: "var(--borders-form-field--active)", stopOpacity: "0.2" }), (0, jsx_runtime_1.jsx)("stop", { offset: "100%", stopColor: "var(--borders-form-field--active)", stopOpacity: "0" })] }) }), (0, jsx_runtime_1.jsx)("path", { className: "zen-waiting__spinner-animation", stroke: "url(#spinnerGradient)", strokeWidth: "6", strokeLinecap: "round", d: "M 32 4 A 28 28 0 1 1 32 60 A 28 28 0 1 1 32 4 Z" })] }) }), description && (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-waiting__spinner-text"]), children: description })] })] })) : null;
+    }, [isLoading, showWaiting, description, label]);
+    return isLoading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { role: "status", className: "zen-waiting__status", children: statusText ? (0, jsx_runtime_1.jsx)("span", { className: "zen-visually-hidden", children: statusText }) : null }), showWaiting ? ((0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-waiting", className]), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-waiting__overlay", hideOverlay ? "zen-waiting__overlay--hidden" : ""]) }), (0, jsx_runtime_1.jsxs)("div", { className: "zen-waiting__spinner-container", children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-waiting__spinner", spinnerDriveClassName || ""]), children: (0, jsx_runtime_1.jsxs)("svg", { viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsxs)("linearGradient", { id: "spinnerGradient", x1: "0", y1: "0", x2: "1", y2: "0", gradientUnits: "objectBoundingBox", children: [(0, jsx_runtime_1.jsx)("stop", { offset: "0%", stopColor: "var(--borders-form-field--active)", stopOpacity: "1" }), (0, jsx_runtime_1.jsx)("stop", { offset: "33.33%", stopColor: "var(--borders-form-field--active)", stopOpacity: "0.8" }), (0, jsx_runtime_1.jsx)("stop", { offset: "50%", stopColor: "var(--borders-form-field--active)", stopOpacity: "0.5" }), (0, jsx_runtime_1.jsx)("stop", { offset: "66.67%", stopColor: "var(--borders-form-field--active)", stopOpacity: "0.2" }), (0, jsx_runtime_1.jsx)("stop", { offset: "100%", stopColor: "var(--borders-form-field--active)", stopOpacity: "0" })] }) }), (0, jsx_runtime_1.jsx)("path", { className: "zen-waiting__spinner-animation", stroke: "url(#spinnerGradient)", strokeWidth: "6", strokeLinecap: "round", d: "M 32 4 A 28 28 0 1 1 32 60 A 28 28 0 1 1 32 4 Z" })] }) }), description && (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-waiting__spinner-text"]), children: description })] })] })) : null] })) : null;
 };
 exports.Waiting = Waiting;

package/esm/alert/banner.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
-export declare const Banner: import("react").FC<import("../banner/banner").IBanner> & {
-    ErrorSummary: import("react").FC<import("../banner/bannerErrorSummary").IBannerErrorSummary>;
+export declare const Banner: import("react").FC<import("..").IBanner> & {
+    ErrorSummary: typeof import("../banner/bannerErrorSummary").BannerErrorSummary;
 };

package/esm/alert/hooks/useAlertState.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IAlertItem } from "../../feedbackContainer/types";
 export interface IUseAlertState {
     alerts: IAlertItem[];

package/esm/banner/bannerMultipLine.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import "./banner.less";
 import { TBannerSize } from "./bannerUtils";
 import { IBannerAction } from "./banner";

package/esm/banner/bannerSingleLine.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import "./banner.less";
 import { TBannerSize } from "./bannerUtils";
 import { IBannerAction } from "./banner";

package/esm/banner/utils/isSummaryErrorElement.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { IBannerErrorSummary } from "../bannerErrorSummary";
-export declare const isSummaryErrorElement: (child: React.ReactNode) => child is import("react").ReactElement<IBannerErrorSummary, string | import("react").JSXElementConstructor<any>>;
+export declare const isSummaryErrorElement: (child: React.ReactNode) => child is React.ReactElement<IBannerErrorSummary>;

package/esm/card/components/content.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IZenComponentProps } from "../../commonHelpers/zenComponent";
 export interface IContent extends Pick<IZenComponentProps, "children"> {
 }

package/esm/chart/accessibleChart/accessibleChart.js

@@ -2,4 +2,4 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { UserFormatProvider } from "../../utils/userFormat/userFormatProvider";
 import { AccessibleChartNarrative } from "./accessibleChartNarrative";
 import { AccessibleChartTable } from "./accessibleChartTable";
-export const AccessibleChart = (props) => (_jsxs(UserFormatProvider, { dateFormat: "d MMMM yyyy", children: [props.type !== "pie" && _jsx(AccessibleChartNarrative, Object.assign({}, props)), _jsx(AccessibleChartTable, Object.assign({}, props))] }));
+export const AccessibleChart = (props) => (_jsxs(UserFormatProvider, { dateFormat: "d MMMM yyyy", children: [_jsx(AccessibleChartNarrative, Object.assign({}, props)), _jsx(AccessibleChartTable, Object.assign({}, props))] }));

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

@@ -3,4 +3,4 @@ import { IBarChartOptions } from "../barChart/interfaces";
 import { ILineChartOptions, ILineChartPoint } from "../lineChart/interfaces";
 export declare function collectAllPoints(dataset: AccessibleChartDataset, dateFormatter: (d: Date | string, format?: string) => string, miniChartLabels?: string[], options?: ILineChartOptions | IBarChartOptions): IAccessiblePoint[];
 export declare function simplifyData(data: ILineChartPoint[]): ILineChartPoint[];
-export declare const AccessibleChartNarrative: ({ data, options }: IAccessibleChart) => import("react/jsx-runtime").JSX.Element;
+export declare const AccessibleChartNarrative: ({ data, type, options, narrativeId }: IAccessibleChart) => import("react/jsx-runtime").JSX.Element;

package/esm/chart/accessibleChart/accessibleChartNarrative.js

@@ -9,6 +9,7 @@ import { getFormattedLabel } from "../utils/getFormattedLabel";
 import { truncateDecimals } from "../../utils/truncateDecimals";
 import { calculateMinTruncationPrecision } from "../utils/calculateMinTruncationPrecision";
 import { removeTrendDataFromDatasets } from "../utils/removeTrendDataFromDatasets";
+import { generatePieNarrative } from "./generatePieNarrative";
 injectString("cs", "Data", "Data");
 injectString("da-DK", "Data", "Data");
 injectString("de", "Data", "Daten");
@@ -1025,7 +1026,9 @@ function detectDatasetTrend(dataset, translate, dateFormatter, miniChartLabels,
 }
 export const AccessibleChartNarrative = ({
   data,
-  options
+  type,
+  options,
+  narrativeId
 }) => {
   const {
     translate
@@ -1037,6 +1040,7 @@ export const AccessibleChartNarrative = ({
   } = useContext(userFormatContext);
   const dateFormatter = useCallback((d, format = dateFormat) => formatDate(toLocalDateTime(d), format, translate), [toLocalDateTime, dateFormat, translate]);
   const filteredDatasets = removeTrendDataFromDatasets(data.datasets);
+  const pieAnalysis = useMemo(() => type === "pie" ? generatePieNarrative(data, translate) : null, [type, data, translate]);
   const datasetsWithAnalysis = useMemo(() => filteredDatasets.map(dataset => {
     const datasetObj = Object.assign({}, dataset);
     try {
@@ -1048,9 +1052,11 @@ export const AccessibleChartNarrative = ({
       return errMsg;
     }
   }), [filteredDatasets, translate, dateFormatter, miniChartLabels, options]);
+  const lines = pieAnalysis !== null && pieAnalysis !== void 0 ? pieAnalysis : datasetsWithAnalysis;
   return _jsx("div", {
+    id: narrativeId,
     className: "screen-reader-only",
-    children: datasetsWithAnalysis.map((analysis, index) => _jsx("div", {
+    children: lines.map((analysis, index) => _jsx("div", {
       children: analysis
     }, index))
   });

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,