@geotab/zenith 3.14.1 → 3.15.0-beta.1

package/README.md

@@ -45,9 +45,35 @@ Now components are ready for usage.
 
 Zenith library provides components defined in Zenith Design System. It includes very basic blocks like colors, icons, font presets, atom components like buttons, checkboxes etc and high order components - header, table, filters bar etc. List of existing components can be found in [Storybook](https://developers.geotab.com/zenith-storybook/index.html).
 
-
 ## Change log
 
+### 3.15.0
+
+- Add infinite scroll support for desktop `DataGrid`
+- Add `tabIndex` support for keyboard and screen reader accessibility in `Chart`
+- Add customization for `Toggle` component in toolbar
+- Update `Nav` CSS styling
+- Add `active` property support to `Footer.Action` component
+- Add native accessible loading-status support (`isLoading` prop with live-region) to `Waiting`
+- Add status dot and label support to `Tag` component
+- Add "trend, neutral" icon to icon library
+- Improve select-all behavior in search for `Dropdown`
+- Add new icons (`IconAce`, `IconBreak`, `IconChevronStepper` and more)
+- Add `ProgressIndicator` — new table-cell progress component
+- Fix `DropdownRaw` single-select mode not auto-closing after leaf node selection
+- Fix second Y-axis chart increments not aligning with first Y-axis
+- Fix `EmptyState` component not adapting to dark mode in Drive app
+- Fix `Chart` Y-axis showing negative floor for all-positive data
+- Fix `Tabs` active tab underline gap with bottom divider
+- Fix icons not adapting to dark mode in Drive app
+- Fix `Chart` line tooltip showing interpolated value instead of actual data point
+- Fix `TabBar` content not adapting to dark theme
+- Fix dropdown height inconsistency
+- Fix full selection mode bug in `Dropdown`
+- Fix icon fill overriding parent colour in primary buttons and nav
+- Fix `GroupsFilter` input padding
+- Fix `Toast` progress bar border radius in RTL layouts
+
 ### 3.14.1
 
 - Add new languages support: Bulgarian, Greek, Estonian, Georgian, Lithuanian, and Latvian
@@ -69,7 +95,7 @@ Zenith library provides components defined in Zenith Design System. It includes
 
 ### 3.12.3
 
-- Fix `LineChart` crash when timed chart has no data
+- Fix: line chart crash when timed chart has no data
 
 ### 3.12.1
 

package/dist/advancedGroupsFilter/advancedGroupsFilterFormSection.js

@@ -27,13 +27,23 @@ var __setModuleDefault = this && this.__setModuleDefault || (Object.create ? fun
 } : 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;
+  };
+}();
 Object.defineProperty(exports, "__esModule", {
   value: true
 });

package/dist/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/dist/alert/hooks/useAlertState.d.ts

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

package/dist/banner/bannerMultipLine.d.ts

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

package/dist/banner/bannerSingleLine.d.ts

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

package/dist/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/dist/calendar/dateUtils.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getValidTime = exports.getValidDatesForEnd = exports.getValidDatesForStart = exports.isDifferentPeriod = exports.isValidationDateError = exports.isValidDate = exports.getSelectableYears = exports.isDisableDate = exports.isDisableYear = exports.getAvailablePeriod = exports.toDayStart = exports.setYear = exports.getSameDateOrTheLastForMonth = exports.addMonth = exports.getEndOfWeek = exports.getStartOfWeek = exports.getDayOfWeekOffset = exports.addMonths = exports.addDays = exports.addMinutes = exports.getNewEndDate = exports.getNewStartDate = exports.getCalendarMonthDates = exports.getEndOfMonth = exports.getStartOfMonth = exports.dayNames = void 0;
+exports.getValidTime = exports.getValidDatesForEnd = exports.getValidDatesForStart = exports.isDifferentPeriod = exports.isValidationDateError = exports.isValidDate = exports.getSelectableYears = exports.isDisableDate = exports.isDisableYear = exports.getAvailablePeriod = exports.toDayStart = exports.setYear = exports.getSameDateOrTheLastForMonth = exports.addMonth = exports.getEndOfWeek = exports.getStartOfWeek = exports.getDayOfWeekOffset = exports.addDays = exports.addMinutes = exports.getNewEndDate = exports.getNewStartDate = exports.getCalendarMonthDates = exports.getEndOfMonth = exports.getStartOfMonth = exports.dayNames = void 0;
+exports.addMonths = addMonths;
 exports.dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
 const getStartOfMonth = (d) => {
     const date = new Date(Date.parse(d));
@@ -90,7 +91,6 @@ function addMonths(date, num) {
     date.setDate(Math.min(day, Math.round((monthAdded.getTime() - date.getTime()) / 86400000)));
     return date;
 }
-exports.addMonths = addMonths;
 const getDayOfWeekOffset = (nowDate, firstDayOfWeek) => {
     const dayOfWeek = nowDate.getDay();
     const startDayOfWeek = firstDayOfWeek ? exports.dayNames.indexOf(firstDayOfWeek) : 0;

package/dist/card/card.js

@@ -27,13 +27,23 @@ var __setModuleDefault = this && this.__setModuleDefault || (Object.create ? fun
 } : 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;
+  };
+}();
 Object.defineProperty(exports, "__esModule", {
   value: true
 });

package/dist/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/dist/cardContainer/helpers/getSizeClass.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getSizeClass = void 0;
+exports.getSizeClass = getSizeClass;
 function getSizeClass(className, size) {
     // eslint-disable-next-line @typescript-eslint/switch-exhaustiveness-check
     switch (size) {
@@ -22,4 +22,3 @@ function getSizeClass(className, size) {
             return "";
     }
 }
-exports.getSizeClass = getSizeClass;

package/dist/chart/accessibleChart/accessibleChart.js

@@ -5,5 +5,5 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const userFormatProvider_1 = require("../../utils/userFormat/userFormatProvider");
 const accessibleChartNarrative_1 = require("./accessibleChartNarrative");
 const accessibleChartTable_1 = require("./accessibleChartTable");
-const AccessibleChart = (props) => ((0, jsx_runtime_1.jsxs)(userFormatProvider_1.UserFormatProvider, { dateFormat: "d MMMM yyyy", children: [props.type !== "pie" && (0, jsx_runtime_1.jsx)(accessibleChartNarrative_1.AccessibleChartNarrative, Object.assign({}, props)), (0, jsx_runtime_1.jsx)(accessibleChartTable_1.AccessibleChartTable, Object.assign({}, props))] }));
+const AccessibleChart = (props) => ((0, jsx_runtime_1.jsxs)(userFormatProvider_1.UserFormatProvider, { dateFormat: "d MMMM yyyy", children: [(0, jsx_runtime_1.jsx)(accessibleChartNarrative_1.AccessibleChartNarrative, Object.assign({}, props)), (0, jsx_runtime_1.jsx)(accessibleChartTable_1.AccessibleChartTable, Object.assign({}, props))] }));
 exports.AccessibleChart = AccessibleChart;

package/dist/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/dist/chart/accessibleChart/accessibleChartNarrative.js

@@ -6,7 +6,9 @@ const {
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.AccessibleChartNarrative = exports.simplifyData = exports.collectAllPoints = void 0;
+exports.AccessibleChartNarrative = void 0;
+exports.collectAllPoints = collectAllPoints;
+exports.simplifyData = simplifyData;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const useLanguage_1 = require("../../utils/localization/useLanguage");
 const react_1 = require("react");
@@ -17,6 +19,7 @@ const getFormattedLabel_1 = require("../utils/getFormattedLabel");
 const truncateDecimals_1 = require("../../utils/truncateDecimals");
 const calculateMinTruncationPrecision_1 = require("../utils/calculateMinTruncationPrecision");
 const removeTrendDataFromDatasets_1 = require("../utils/removeTrendDataFromDatasets");
+const generatePieNarrative_1 = require("./generatePieNarrative");
 injectString("cs", "Data", "Data");
 injectString("da-DK", "Data", "Data");
 injectString("de", "Data", "Daten");
@@ -485,7 +488,6 @@ function collectAllPoints(dataset, dateFormatter, miniChartLabels, options) {
   }
   return allPoints;
 }
-exports.collectAllPoints = collectAllPoints;
 function simplifyData(data) {
   // Need at least 3 points to find a peak or valley
   if (data.length < 3) {
@@ -647,7 +649,6 @@ function simplifyData(data) {
   }
   return finalResult;
 }
-exports.simplifyData = simplifyData;
 function getTrendDirectionBySlope(slope) {
   const slopeThreshold = 1e-10;
   if (slope > slopeThreshold) {
@@ -1035,7 +1036,9 @@ function detectDatasetTrend(dataset, translate, dateFormatter, miniChartLabels,
 }
 const AccessibleChartNarrative = ({
   data,
-  options
+  type,
+  options,
+  narrativeId
 }) => {
   const {
     translate
@@ -1047,6 +1050,7 @@ const AccessibleChartNarrative = ({
   } = (0, react_1.useContext)(userFormatContext_1.userFormatContext);
   const dateFormatter = (0, react_1.useCallback)((d, format = dateFormat) => (0, formatDate_1.formatDate)(toLocalDateTime(d), format, translate), [toLocalDateTime, dateFormat, translate]);
   const filteredDatasets = (0, removeTrendDataFromDatasets_1.removeTrendDataFromDatasets)(data.datasets);
+  const pieAnalysis = (0, react_1.useMemo)(() => type === "pie" ? (0, generatePieNarrative_1.generatePieNarrative)(data, translate) : null, [type, data, translate]);
   const datasetsWithAnalysis = (0, react_1.useMemo)(() => filteredDatasets.map(dataset => {
     const datasetObj = Object.assign({}, dataset);
     try {
@@ -1058,9 +1062,11 @@ const AccessibleChartNarrative = ({
       return errMsg;
     }
   }), [filteredDatasets, translate, dateFormatter, miniChartLabels, options]);
+  const lines = pieAnalysis !== null && pieAnalysis !== void 0 ? pieAnalysis : datasetsWithAnalysis;
   return (0, jsx_runtime_1.jsx)("div", {
+    id: narrativeId,
     className: "screen-reader-only",
-    children: datasetsWithAnalysis.map((analysis, index) => (0, jsx_runtime_1.jsx)("div", {
+    children: lines.map((analysis, index) => (0, jsx_runtime_1.jsx)("div", {
       children: analysis
     }, index))
   });

package/dist/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/dist/chart/accessibleChart/generatePieNarrative.js

@@ -0,0 +1,179 @@
+"use strict";
+
+const {
+  injectString
+} = require("../../utils/localization/translationsDictionary");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PIE_LARGEST_COUNT = exports.PIE_LARGE_DATASET_THRESHOLD = void 0;
+exports.formatPieSlice = formatPieSlice;
+exports.generatePieSliceDetails = generatePieSliceDetails;
+exports.generatePieSummaryLines = generatePieSummaryLines;
+exports.generatePieNarrative = generatePieNarrative;
+const calculateMinTruncationPrecision_1 = require("../utils/calculateMinTruncationPrecision");
+const truncateDecimals_1 = require("../../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");
+exports.PIE_LARGE_DATASET_THRESHOLD = 6;
+exports.PIE_LARGEST_COUNT = 3;
+function formatPieSlice(label, value, total, decimalLength) {
+  const pct = Math.round(value / total * 100);
+  return `${label}: ${(0, truncateDecimals_1.truncateDecimals)(value, decimalLength)} (${pct}%)`;
+}
+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);
+  });
+}
+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, exports.PIE_LARGEST_COUNT);
+  const smallestItem = sorted[sorted.length - 1];
+  const restItems = sorted.slice(exports.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];
+}
+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 = (0, calculateMinTruncationPrecision_1.calculateMinTruncationPrecision)(values.filter(v => typeof v === "number"));
+  const details = generatePieSliceDetails(values, labels, total, decimalLength);
+  if (values.length <= exports.PIE_LARGE_DATASET_THRESHOLD) {
+    return details;
+  }
+  return generatePieSummaryLines(values, labels, total, decimalLength, details, translate);
+}

package/dist/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/dist/chart/barChart/getDefaultOptions.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getDefaultOptions = void 0;
 const formatDate_1 = require("../../utils/formatDate");
+const getYAxisTickCount_1 = require("../utils/getYAxisTickCount");
 const getDefaultGridStyle = (isDark) => ({
     drawTicks: false,
     color: isDark ? "#C0CCD8" : "#4E677E"
@@ -43,18 +44,16 @@ const getDefaultOptions = (yAxis, isTimedData, isDark, translate, isRtl = false)
             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 = (0, getYAxisTickCount_1.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,