@geotab/zenith 3.14.1 → 3.15.0-beta.0

package/dist/chart/barChart.js

@@ -1,19 +1,55 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
+
+const {
+  injectString
+} = require("../utils/localization/translationsDictionary");
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
 };
-Object.defineProperty(exports, "__esModule", { value: true });
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.BarChart = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+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");
 const typedCharts_1 = require("../react-chartjs/typedCharts");
 const auto_1 = require("chart.js/auto");
 require("../react-chartjs/dateAdapter");
@@ -40,43 +76,109 @@ const userFormatContext_1 = require("../utils/userFormat/userFormatContext");
 const summary_1 = require("../summary/summary");
 const accessibleChart_1 = require("./accessibleChart/accessibleChart");
 auto_1.Chart.register(auto_1.BarController, auto_1.BarElement, auto_1.CategoryScale, auto_1.LinearScale);
-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 } = (0, useLanguage_1.useLanguage)();
-    const isDrive = (0, useDrive_1.useDrive)();
-    const isMobile = (0, useMobile_1.useMobile)();
-    const isRtl = (0, useIsRTL_1.useIsRTL)();
-    const fontSize = (0, react_1.useMemo)(() => (isDrive ? (isMobile ? 14 : 16) : 12), [isDrive, isMobile]);
-    const { dark } = (0, react_1.useContext)(themeContext_1.themeContext);
-    (0, react_1.useEffect)(() => {
-        auto_1.Chart.defaults.font = {
-            family: "Roboto",
-            size: fontSize
-        };
-        auto_1.Chart.defaults.color = dark ? "#FFFFFF" : "#1F2833";
-    }, [fontSize, dark]);
-    const legendId = (0, react_1.useId)();
-    const tooltipId = (0, react_1.useId)();
-    const { toLocalDateTime } = (0, react_1.useContext)(userFormatContext_1.userFormatContext);
-    const isTimedData = (0, react_1.useMemo)(() => (0, isDateRange_1.isDateRange)(data, false), [data]);
-    const isStacked = (0, react_1.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 = (0, react_1.useMemo)(() => (0, getYAxisMeta_1.getYAxisMeta)(data, isStacked), [data, isStacked]);
-    const defOptions = (0, react_1.useMemo)(() => (0, getDefaultOptions_1.getDefaultOptions)(yAxisMeta, isTimedData, dark, translate, isRtl), [yAxisMeta, isTimedData, dark, translate, isRtl]);
-    const chartOptions = (0, utils_1.deepMerge)(defOptions, options);
-    const { isHidden, toggleHidden } = (0, useHidden_1.useHidden)();
-    const chartData = (0, react_1.useMemo)(() => {
-        const chData = (0, convertDates_1.convertDates)(data, toLocalDateTime);
-        chData.datasets = chData.datasets.map((ds, i) => (0, getDefaultDatasetStyle_1.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 = (0, react_1.useMemo)(() => (0, tooltipPlugin_1.TooltipPlugin)(tooltipId, tooltip, "top", isHidden, dark), [tooltipId, tooltip, isHidden, dark]);
-    const chartLegend = (0, react_1.useMemo)(() => (0, legendPlugin_1.legendPlugin)(legendId, legend, isDrive, isHidden, toggleHidden), [isDrive, isHidden, legend, legendId, toggleHidden]);
-    const chartPlugins = (0, react_1.useMemo)(() => [...(plugins || []), chartTooltip, chartLegend], [chartLegend, chartTooltip, plugins]);
-    const { xLabels, yLabels } = (0, useAxisLabels_1.useAxisLabels)(axis, chartOptions);
-    const intSummary = (0, useSummary_1.useSummary)(summary, chartData);
-    const isMainHidden = (0, react_1.useMemo)(() => isHidden(0), [isHidden]);
-    const toggleMainData = (0, react_1.useCallback)(() => toggleHidden(0), [toggleHidden]);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-chart", className || ""]), children: [insight ? (0, jsx_runtime_1.jsx)(chartInsight_1.ChartInsight, Object.assign({}, insight)) : null, summary ? (0, jsx_runtime_1.jsx)(summary_1.Summary, Object.assign({ onToggle: toggleMainData, isEnabled: isMainHidden }, intSummary)) : null, (isDrive ? undefined : xLabels) || yLabels.length > 0 ? ((0, jsx_runtime_1.jsx)(chartAxis_1.ChartAxis, { xLabel: isDrive ? undefined : xLabels, yLabels: yLabels, yAxisPosition: isRtl ? "left" : "right" })) : null, (0, jsx_runtime_1.jsx)("div", { className: "zen-chart__chart", children: (0, jsx_runtime_1.jsx)(typedCharts_1.Bar, Object.assign({ options: chartOptions, data: chartData, plugins: chartPlugins }, rest, { "aria-hidden": true })) }), (0, jsx_runtime_1.jsx)("div", { className: "zen-chart__legend", id: legendId }), isDrive && xLabels ? (0, jsx_runtime_1.jsx)("div", { className: "zen-chart__x-axis", children: xLabels }) : null, (0, jsx_runtime_1.jsx)(accessibleChart_1.AccessibleChart, { type: "bar", data: chartData, options: chartOptions })] }));
+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
+  } = (0, useLanguage_1.useLanguage)();
+  const isDrive = (0, useDrive_1.useDrive)();
+  const isMobile = (0, useMobile_1.useMobile)();
+  const isRtl = (0, useIsRTL_1.useIsRTL)();
+  const fontSize = (0, react_1.useMemo)(() => isDrive ? isMobile ? 14 : 16 : 12, [isDrive, isMobile]);
+  const {
+    dark
+  } = (0, react_1.useContext)(themeContext_1.themeContext);
+  (0, react_1.useEffect)(() => {
+    auto_1.Chart.defaults.font = {
+      family: "Roboto",
+      size: fontSize
+    };
+    auto_1.Chart.defaults.color = dark ? "#FFFFFF" : "#1F2833";
+  }, [fontSize, dark]);
+  const legendId = (0, react_1.useId)();
+  const tooltipId = (0, react_1.useId)();
+  const narrativeId = (0, react_1.useId)();
+  const {
+    toLocalDateTime
+  } = (0, react_1.useContext)(userFormatContext_1.userFormatContext);
+  const isTimedData = (0, react_1.useMemo)(() => (0, isDateRange_1.isDateRange)(data, false), [data]);
+  const isStacked = (0, react_1.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 = (0, react_1.useMemo)(() => (0, getYAxisMeta_1.getYAxisMeta)(data, isStacked), [data, isStacked]);
+  const defOptions = (0, react_1.useMemo)(() => (0, getDefaultOptions_1.getDefaultOptions)(yAxisMeta, isTimedData, dark, translate, isRtl), [yAxisMeta, isTimedData, dark, translate, isRtl]);
+  const chartOptions = (0, utils_1.deepMerge)(defOptions, options);
+  const {
+    isHidden,
+    toggleHidden
+  } = (0, useHidden_1.useHidden)();
+  const chartData = (0, react_1.useMemo)(() => {
+    const chData = (0, convertDates_1.convertDates)(data, toLocalDateTime);
+    chData.datasets = chData.datasets.map((ds, i) => (0, getDefaultDatasetStyle_1.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 = (0, react_1.useMemo)(() => (0, tooltipPlugin_1.TooltipPlugin)(tooltipId, tooltip, "top", isHidden, dark), [tooltipId, tooltip, isHidden, dark]);
+  const chartLegend = (0, react_1.useMemo)(() => (0, legendPlugin_1.legendPlugin)(legendId, legend, isDrive, isHidden, toggleHidden), [isDrive, isHidden, legend, legendId, toggleHidden]);
+  const chartPlugins = (0, react_1.useMemo)(() => [...(plugins || []), chartTooltip, chartLegend], [chartLegend, chartTooltip, plugins]);
+  const {
+    xLabels,
+    yLabels
+  } = (0, useAxisLabels_1.useAxisLabels)(axis, chartOptions);
+  const intSummary = (0, useSummary_1.useSummary)(summary, chartData);
+  const isMainHidden = (0, react_1.useMemo)(() => isHidden(0), [isHidden]);
+  const toggleMainData = (0, react_1.useCallback)(() => toggleHidden(0), [toggleHidden]);
+  return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+    children: [(0, jsx_runtime_1.jsxs)("div", {
+      className: (0, classNames_1.classNames)(["zen-chart", className || ""]),
+      tabIndex: 0,
+      role: "figure",
+      "aria-label": translate("Bar chart"),
+      "aria-describedby": narrativeId,
+      children: [insight ? (0, jsx_runtime_1.jsx)(chartInsight_1.ChartInsight, Object.assign({}, insight)) : null, summary ? (0, jsx_runtime_1.jsx)(summary_1.Summary, Object.assign({
+        onToggle: toggleMainData,
+        isEnabled: isMainHidden
+      }, intSummary)) : null, (isDrive ? undefined : xLabels) || yLabels.length > 0 ? (0, jsx_runtime_1.jsx)(chartAxis_1.ChartAxis, {
+        xLabel: isDrive ? undefined : xLabels,
+        yLabels: yLabels,
+        yAxisPosition: isRtl ? "left" : "right"
+      }) : null, (0, jsx_runtime_1.jsx)("div", {
+        className: "zen-chart__chart",
+        children: (0, jsx_runtime_1.jsx)(typedCharts_1.Bar, Object.assign({
+          options: chartOptions,
+          data: chartData,
+          plugins: chartPlugins
+        }, rest, {
+          "aria-hidden": true
+        }))
+      }), (0, jsx_runtime_1.jsx)("div", {
+        className: "zen-chart__legend",
+        id: legendId
+      }), isDrive && xLabels ? (0, jsx_runtime_1.jsx)("div", {
+        className: "zen-chart__x-axis",
+        children: xLabels
+      }) : null]
+    }), (0, jsx_runtime_1.jsx)(accessibleChart_1.AccessibleChart, {
+      type: "bar",
+      data: chartData,
+      options: chartOptions,
+      narrativeId: narrativeId
+    })]
+  });
 };
-exports.BarChart = BarChart;
+exports.BarChart = BarChart;

package/dist/chart/interfaces.d.ts

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

package/dist/chart/lineChart/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 defaultGridStyle = {
     drawTicks: false,
     color: "#C0CCD8"
@@ -97,18 +98,16 @@ const getDefaultOptions = (yAxis, xAxis, isTimedData, ticks, isDark, translate,
             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 ? defaultGridStyle : { display: false },
             border: defaultGridBorderStyle,

package/dist/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/dist/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;
 };

package/dist/chart/lineChart.js

@@ -1,19 +1,55 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
+
+const {
+  injectString
+} = require("../utils/localization/translationsDictionary");
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
 };
-Object.defineProperty(exports, "__esModule", { value: true });
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.LineChart = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+injectString("cs", "Line chart", "Spojnicov\xFD graf");
+injectString("da-DK", "Line chart", "Linjediagram");
+injectString("de", "Line chart", "Liniendiagramm");
+injectString("en", "Line chart", "Line chart");
+injectString("es", "Line chart", "Gr\xE1fico de l\xEDneas");
+injectString("fi-FI", "Line chart", "Viivakaavio");
+injectString("fr", "Line chart", "Graphique lin\xE9aire");
+injectString("fr-FR", "Line chart", "Graphique lin\xE9aire");
+injectString("hu-HU", "Line chart", "Vonaldiagram");
+injectString("id", "Line chart", "Bagan garis");
+injectString("it", "Line chart", "Grafico a linee");
+injectString("ja", "Line chart", "\u6298\u308C\u7DDA\u30B0\u30E9\u30D5");
+injectString("ko-KR", "Line chart", "\uC120\uD615 \uCC28\uD2B8");
+injectString("ms", "Line chart", "Carta garisan");
+injectString("nb-NO", "Line chart", "Linjediagram");
+injectString("nl", "Line chart", "Lijndiagram");
+injectString("pl", "Line chart", "Wykres liniowy");
+injectString("pt-BR", "Line chart", "Gr\xE1fico de linhas");
+injectString("pt-PT", "Line chart", "Gr\xE1fico de linhas");
+injectString("sk-SK", "Line chart", "\u010Ciarov\xFD graf");
+injectString("sv", "Line chart", "Linjediagram");
+injectString("th", "Line chart", "\u0E41\u0E1C\u0E19\u0E20\u0E39\u0E21\u0E34\u0E40\u0E2A\u0E49\u0E19");
+injectString("tr", "Line chart", "\xC7izgi grafik");
+injectString("zh-Hans", "Line chart", "\u6298\u7EBF\u56FE");
+injectString("zh-TW", "Line chart", "\u6298\u7DDA\u5716");
+injectString("ro-RO", "Line chart", "Grafic liniar");
+injectString("ar", "Line chart", "\u0645\u062E\u0637\u0637 \u062E\u0637\u064A");
+injectString("lt-LT", "Line chart", "Linijin\u0117 diagrama");
+injectString("lv-LV", "Line chart", "L\u012Bniju diagramma");
+injectString("ka-GE", "Line chart", "\u10EE\u10D0\u10D6\u10DD\u10D5\u10D0\u10DC\u10D8 \u10E1\u10E5\u10D4\u10DB\u10D0");
+injectString("el-GR", "Line chart", "\u0393\u03C1\u03AC\u03C6\u03B7\u03BC\u03B1 \u03B3\u03C1\u03B1\u03BC\u03BC\u03CE\u03BD");
+injectString("et-EE", "Line chart", "Joondiagramm");
+injectString("bg-BG", "Line chart", "\u041B\u0438\u043D\u0435\u0439\u043D\u0430 \u0434\u0438\u0430\u0433\u0440\u0430\u043C\u0430");
 const typedCharts_1 = require("../react-chartjs/typedCharts");
 const auto_1 = require("chart.js/auto");
 require("../react-chartjs/dateAdapter");
@@ -43,52 +79,124 @@ const userFormatContext_1 = require("../utils/userFormat/userFormatContext");
 const summary_1 = require("../summary/summary");
 const accessibleChart_1 = require("./accessibleChart/accessibleChart");
 auto_1.Chart.register(auto_1.CategoryScale, auto_1.LinearScale, auto_1.PointElement, auto_1.LineElement, auto_1.Title, auto_1.Tooltip, auto_1.Legend, auto_1.Filler, auto_1.TimeScale);
-const LineChart = (_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 } = (0, useLanguage_1.useLanguage)();
-    const isDrive = (0, useDrive_1.useDrive)();
-    const isMobile = (0, useMobile_1.useMobile)();
-    const isRtl = (0, useIsRTL_1.useIsRTL)();
-    const fontSize = (0, react_1.useMemo)(() => (isDrive ? (isMobile ? 14 : 16) : 12), [isDrive, isMobile]);
-    const { dark } = (0, react_1.useContext)(themeContext_1.themeContext);
-    (0, react_1.useEffect)(() => {
-        auto_1.Chart.defaults.font = {
-            family: "Roboto",
-            size: fontSize
-        };
-        auto_1.Chart.defaults.color = dark ? "#FFFFFF" : "#1F2833";
-    }, [fontSize, dark]);
-    const legendId = (0, react_1.useId)();
-    const tooltipId = (0, react_1.useId)();
-    const { isHidden, toggleHidden, hiddenCount } = (0, useHidden_1.useHidden)();
-    const { toLocalDateTime } = (0, react_1.useContext)(userFormatContext_1.userFormatContext);
-    const isTimedData = (0, react_1.useMemo)(() => (0, isDateRange_1.isDateRange)(data, true), [data]);
-    const chartData = (0, react_1.useMemo)(() => {
-        const chData = Object.assign({}, data);
-        chData.datasets = chData.datasets.map((ds, i) => (0, getDefaultDatasetStyle_1.getDefaultDatasetStyle)(ds, i));
-        chData.datasets = chData.datasets.reduce((acc, dataset, dsIndex) => {
-            acc.push(dataset);
-            if (dataset.trendData) {
-                acc.push(Object.assign(Object.assign({}, dataset), { data: dataset.trendData, borderDash: [5, 5], parentIndex: dsIndex }));
-            }
-            return acc;
-        }, []);
-        chData.datasets = chData.datasets.map((ds, i) => isHidden(ds.parentIndex !== undefined ? ds.parentIndex : i) ? Object.assign(Object.assign({}, ds), { hidden: true }) : ds);
-        return (0, convertDates_1.convertDates)(chData, toLocalDateTime);
-    }, [data, isHidden, toLocalDateTime]);
-    const yAxisMeta = (0, react_1.useMemo)(() => (0, getYAxisMeta_1.getYAxisMeta)(chartData), [chartData]);
-    const xAxisMeta = (0, react_1.useMemo)(() => (0, getXAxisMeta_1.getXAxisMeta)(chartData, isTimedData), [chartData, isTimedData]);
-    const stableXAxisMeta = (0, useLastVisibleXAxisMeta_1.useLastVisibleXAxisMeta)(xAxisMeta, hiddenCount, data.datasets.length);
-    const { chartRef, ticks } = (0, useChartTicks_1.useChartTicks)();
-    const defOptions = (0, react_1.useMemo)(() => (0, getDefaultOptions_1.getDefaultOptions)(yAxisMeta, stableXAxisMeta, isTimedData, ticks, dark, translate, isRtl), [yAxisMeta, stableXAxisMeta, isTimedData, ticks, dark, translate, isRtl]);
-    const chartOptions = (0, utils_1.deepMerge)(defOptions, options);
-    const chartTooltip = (0, react_1.useMemo)(() => (0, linePlugin_1.LinePlugin)(tooltipId, tooltip, dark), [tooltip, tooltipId, dark]);
-    const chartLegend = (0, react_1.useMemo)(() => (0, legendPlugin_1.legendPlugin)(legendId, legend, isDrive, isHidden, toggleHidden), [isDrive, legend, legendId, isHidden, toggleHidden]);
-    const chartPlugins = (0, react_1.useMemo)(() => [...(plugins || []), chartTooltip, chartLegend], [plugins, chartTooltip, chartLegend]);
-    const { xLabels, yLabels } = (0, useAxisLabels_1.useAxisLabels)(axis, chartOptions);
-    const intSummary = (0, useSummary_1.useSummary)(summary, chartData);
-    const isMainHidden = (0, react_1.useMemo)(() => isHidden(0), [isHidden]);
-    const toggleMainDataset = (0, react_1.useCallback)(() => toggleHidden(0), [toggleHidden]);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-chart", className || ""]), ref: chartRef, children: [insight ? (0, jsx_runtime_1.jsx)(chartInsight_1.ChartInsight, Object.assign({}, insight)) : null, summary !== false ? (0, jsx_runtime_1.jsx)(summary_1.Summary, Object.assign({}, intSummary, { onToggle: toggleMainDataset, isEnabled: isMainHidden })) : null, (isDrive ? undefined : xLabels) || yLabels.length > 0 ? ((0, jsx_runtime_1.jsx)(chartAxis_1.ChartAxis, { xLabel: isDrive ? undefined : xLabels, yLabels: yLabels, yAxisPosition: isRtl ? "left" : "right" })) : null, (0, jsx_runtime_1.jsx)("div", { className: "zen-chart__chart", children: (0, jsx_runtime_1.jsx)(typedCharts_1.Line, Object.assign({ width: 100, height: 100, options: chartOptions, data: chartData, plugins: chartPlugins, "aria-hidden": true }, rest)) }), (0, jsx_runtime_1.jsx)("div", { className: "zen-chart__legend", id: legendId }), isDrive && xLabels ? (0, jsx_runtime_1.jsx)("div", { className: "zen-chart__x-axis", children: xLabels }) : null, (0, jsx_runtime_1.jsx)(accessibleChart_1.AccessibleChart, { type: "line", data: chartData, options: chartOptions })] }));
+const LineChart = _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
+  } = (0, useLanguage_1.useLanguage)();
+  const isDrive = (0, useDrive_1.useDrive)();
+  const isMobile = (0, useMobile_1.useMobile)();
+  const isRtl = (0, useIsRTL_1.useIsRTL)();
+  const fontSize = (0, react_1.useMemo)(() => isDrive ? isMobile ? 14 : 16 : 12, [isDrive, isMobile]);
+  const {
+    dark
+  } = (0, react_1.useContext)(themeContext_1.themeContext);
+  (0, react_1.useEffect)(() => {
+    auto_1.Chart.defaults.font = {
+      family: "Roboto",
+      size: fontSize
+    };
+    auto_1.Chart.defaults.color = dark ? "#FFFFFF" : "#1F2833";
+  }, [fontSize, dark]);
+  const legendId = (0, react_1.useId)();
+  const tooltipId = (0, react_1.useId)();
+  const narrativeId = (0, react_1.useId)();
+  const {
+    isHidden,
+    toggleHidden,
+    hiddenCount
+  } = (0, useHidden_1.useHidden)();
+  const {
+    toLocalDateTime
+  } = (0, react_1.useContext)(userFormatContext_1.userFormatContext);
+  const isTimedData = (0, react_1.useMemo)(() => (0, isDateRange_1.isDateRange)(data, true), [data]);
+  const chartData = (0, react_1.useMemo)(() => {
+    const chData = Object.assign({}, data);
+    chData.datasets = chData.datasets.map((ds, i) => (0, getDefaultDatasetStyle_1.getDefaultDatasetStyle)(ds, i));
+    chData.datasets = chData.datasets.reduce((acc, dataset, dsIndex) => {
+      acc.push(dataset);
+      if (dataset.trendData) {
+        acc.push(Object.assign(Object.assign({}, dataset), {
+          data: dataset.trendData,
+          borderDash: [5, 5],
+          parentIndex: dsIndex
+        }));
+      }
+      return acc;
+    }, []);
+    chData.datasets = chData.datasets.map((ds, i) => isHidden(ds.parentIndex !== undefined ? ds.parentIndex : i) ? Object.assign(Object.assign({}, ds), {
+      hidden: true
+    }) : ds);
+    return (0, convertDates_1.convertDates)(chData, toLocalDateTime);
+  }, [data, isHidden, toLocalDateTime]);
+  const yAxisMeta = (0, react_1.useMemo)(() => (0, getYAxisMeta_1.getYAxisMeta)(chartData), [chartData]);
+  const xAxisMeta = (0, react_1.useMemo)(() => (0, getXAxisMeta_1.getXAxisMeta)(chartData, isTimedData), [chartData, isTimedData]);
+  const stableXAxisMeta = (0, useLastVisibleXAxisMeta_1.useLastVisibleXAxisMeta)(xAxisMeta, hiddenCount, data.datasets.length);
+  const {
+    chartRef,
+    ticks
+  } = (0, useChartTicks_1.useChartTicks)();
+  const defOptions = (0, react_1.useMemo)(() => (0, getDefaultOptions_1.getDefaultOptions)(yAxisMeta, stableXAxisMeta, isTimedData, ticks, dark, translate, isRtl), [yAxisMeta, stableXAxisMeta, isTimedData, ticks, dark, translate, isRtl]);
+  const chartOptions = (0, utils_1.deepMerge)(defOptions, options);
+  const chartTooltip = (0, react_1.useMemo)(() => (0, linePlugin_1.LinePlugin)(tooltipId, tooltip, dark), [tooltip, tooltipId, dark]);
+  const chartLegend = (0, react_1.useMemo)(() => (0, legendPlugin_1.legendPlugin)(legendId, legend, isDrive, isHidden, toggleHidden), [isDrive, legend, legendId, isHidden, toggleHidden]);
+  const chartPlugins = (0, react_1.useMemo)(() => [...(plugins || []), chartTooltip, chartLegend], [plugins, chartTooltip, chartLegend]);
+  const {
+    xLabels,
+    yLabels
+  } = (0, useAxisLabels_1.useAxisLabels)(axis, chartOptions);
+  const intSummary = (0, useSummary_1.useSummary)(summary, chartData);
+  const isMainHidden = (0, react_1.useMemo)(() => isHidden(0), [isHidden]);
+  const toggleMainDataset = (0, react_1.useCallback)(() => toggleHidden(0), [toggleHidden]);
+  return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+    children: [(0, jsx_runtime_1.jsxs)("div", {
+      className: (0, classNames_1.classNames)(["zen-chart", className || ""]),
+      ref: chartRef,
+      tabIndex: 0,
+      role: "figure",
+      "aria-label": translate("Line chart"),
+      "aria-describedby": narrativeId,
+      children: [insight ? (0, jsx_runtime_1.jsx)(chartInsight_1.ChartInsight, Object.assign({}, insight)) : null, summary !== false ? (0, jsx_runtime_1.jsx)(summary_1.Summary, Object.assign({}, intSummary, {
+        onToggle: toggleMainDataset,
+        isEnabled: isMainHidden
+      })) : null, (isDrive ? undefined : xLabels) || yLabels.length > 0 ? (0, jsx_runtime_1.jsx)(chartAxis_1.ChartAxis, {
+        xLabel: isDrive ? undefined : xLabels,
+        yLabels: yLabels,
+        yAxisPosition: isRtl ? "left" : "right"
+      }) : null, (0, jsx_runtime_1.jsx)("div", {
+        className: "zen-chart__chart",
+        children: (0, jsx_runtime_1.jsx)(typedCharts_1.Line, Object.assign({
+          width: 100,
+          height: 100,
+          options: chartOptions,
+          data: chartData,
+          plugins: chartPlugins,
+          "aria-hidden": true
+        }, rest))
+      }), (0, jsx_runtime_1.jsx)("div", {
+        className: "zen-chart__legend",
+        id: legendId
+      }), isDrive && xLabels ? (0, jsx_runtime_1.jsx)("div", {
+        className: "zen-chart__x-axis",
+        children: xLabels
+      }) : null]
+    }), (0, jsx_runtime_1.jsx)(accessibleChart_1.AccessibleChart, {
+      type: "line",
+      data: chartData,
+      options: chartOptions,
+      narrativeId: narrativeId
+    })]
+  });
 };
-exports.LineChart = LineChart;
+exports.LineChart = LineChart;