@geotab/zenith 3.1.1-beta.5 → 3.2.0-beta.0

package/esm/chart/accessibleChart/accessibleChartTable.js

@@ -1,3 +1,4 @@
+import { injectString } from "../../utils/localization/translationsDictionary";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext, useMemo } from "react";
 import { useLanguage } from "../../utils/localization/useLanguage";
@@ -9,95 +10,248 @@ import { getFormattedLabel } from "../utils/getFormattedLabel";
 import { truncateDecimals } from "../../utils/truncateDecimals";
 import { calculateMinTruncationPrecision } from "../utils/calculateMinTruncationPrecision";
 import { removeTrendDataFromDatasets } from "../utils/removeTrendDataFromDatasets";
+injectString("cs", "Value", "Hodnota");
+injectString("da-DK", "Value", "V\xE6rdi");
+injectString("de", "Value", "Wert");
+injectString("en", "Value", "Value");
+injectString("es", "Value", "Valor");
+injectString("fi-FI", "Value", "Arvo");
+injectString("fr", "Value", "Valeur");
+injectString("fr-FR", "Value", "Valeur");
+injectString("hu-HU", "Value", "\xC9rt\xE9k");
+injectString("id", "Value", "Nilai");
+injectString("it", "Value", "Valore");
+injectString("ja", "Value", "\u5024");
+injectString("ko-KR", "Value", "\uAC12");
+injectString("ms", "Value", "Nilai");
+injectString("nb-NO", "Value", "Verdi");
+injectString("nl", "Value", "Waarde");
+injectString("pl", "Value", "Warto\u015B\u0107");
+injectString("pt-BR", "Value", "Valor");
+injectString("sk-SK", "Value", "Hodnota");
+injectString("sv", "Value", "V\xE4rde");
+injectString("th", "Value", "\u0E04\u0E48\u0E32");
+injectString("tr", "Value", "De\u011Fer");
+injectString("zh-Hans", "Value", "\u503C");
+injectString("zh-TW", "Value", "\u503C");
+injectString("cs", "Chart data", "Data grafu");
+injectString("da-DK", "Chart data", "Diagramdata");
+injectString("de", "Chart data", "Diagrammdaten");
+injectString("en", "Chart data", "Chart data");
+injectString("es", "Chart data", "Datos del gr\xE1fico");
+injectString("fi-FI", "Chart data", "Kaaviotiedot");
+injectString("fr", "Chart data", "Donn\xE9es du graphique");
+injectString("fr-FR", "Chart data", "Donn\xE9es du diagramme");
+injectString("hu-HU", "Chart data", "Diagram adatai");
+injectString("id", "Chart data", "Data bagan");
+injectString("it", "Chart data", "Dati del grafico");
+injectString("ja", "Chart data", "\u30B0\u30E9\u30D5\u30C7\u30FC\u30BF");
+injectString("ko-KR", "Chart data", "\uCC28\uD2B8 \uB370\uC774\uD130");
+injectString("ms", "Chart data", "Data carta");
+injectString("nb-NO", "Chart data", "Diagramdata");
+injectString("nl", "Chart data", "Tabelgegevens");
+injectString("pl", "Chart data", "Dane wykresu");
+injectString("pt-BR", "Chart data", "Dados do gr\xE1fico");
+injectString("sk-SK", "Chart data", "\xDAdaje z grafu");
+injectString("sv", "Chart data", "Diagramdata");
+injectString("th", "Chart data", "\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E41\u0E1C\u0E19\u0E20\u0E39\u0E21\u0E34");
+injectString("tr", "Chart data", "Grafik verileri");
+injectString("zh-Hans", "Chart data", "\u56FE\u8868\u6570\u636E");
+injectString("zh-TW", "Chart data", "\u5716\u8868\u8CC7\u6599");
+injectString("en", "Chart contains too many data points so their number has been reduced. If you want to see more, change the Report Range", "Chart contains too many data points so their number has been reduced. If you want to see more, change the Report Range");
+injectString("cs", "X-axis", "Osa X");
+injectString("da-DK", "X-axis", "X-akse");
+injectString("de", "X-axis", "X-Achse");
+injectString("en", "X-axis", "X-axis");
+injectString("es", "X-axis", "Eje X");
+injectString("fi-FI", "X-axis", "X-akseli");
+injectString("fr", "X-axis", "Axe X");
+injectString("fr-FR", "X-axis", "Axe x");
+injectString("hu-HU", "X-axis", "X tengely");
+injectString("id", "X-axis", "Sumbu X");
+injectString("it", "X-axis", "Asse X");
+injectString("ja", "X-axis", "X \u8EF8");
+injectString("ko-KR", "X-axis", "X\uCD95");
+injectString("ms", "X-axis", "Paksi X");
+injectString("nb-NO", "X-axis", "X-akse");
+injectString("nl", "X-axis", "X-as");
+injectString("pl", "X-axis", "O\u015B X");
+injectString("pt-BR", "X-axis", "Eixo X");
+injectString("sk-SK", "X-axis", "os X");
+injectString("sv", "X-axis", "X-axel");
+injectString("th", "X-axis", "\u0E41\u0E01\u0E19 X");
+injectString("tr", "X-axis", "X ekseni");
+injectString("zh-Hans", "X-axis", "X \u8F74");
+injectString("zh-TW", "X-axis", "X \u8EF8");
+injectString("cs", "Category", "Kategorie");
+injectString("da-DK", "Category", "Kategori");
+injectString("de", "Category", "Kategorie");
+injectString("en", "Category", "Category");
+injectString("es", "Category", "Categor\xEDa");
+injectString("fi-FI", "Category", "Luokka");
+injectString("fr", "Category", "Cat\xE9gorie");
+injectString("fr-FR", "Category", "Cat\xE9gorie");
+injectString("hu-HU", "Category", "Kateg\xF3ria");
+injectString("id", "Category", "Kategori");
+injectString("it", "Category", "Categoria");
+injectString("ja", "Category", "\u30AB\u30C6\u30B4\u30EA");
+injectString("ko-KR", "Category", "\uBC94\uC8FC");
+injectString("ms", "Category", "Kategori");
+injectString("nb-NO", "Category", "Kategori");
+injectString("nl", "Category", "Categorie");
+injectString("pl", "Category", "Kategoria");
+injectString("pt-BR", "Category", "Categoria");
+injectString("sk-SK", "Category", "Kateg\xF3ria");
+injectString("sv", "Category", "Kategori");
+injectString("th", "Category", "\u0E2B\u0E21\u0E27\u0E14\u0E2B\u0E21\u0E39\u0E48");
+injectString("tr", "Category", "Kategori");
+injectString("zh-Hans", "Category", "\u7C7B\u522B");
+injectString("zh-TW", "Category", "\u7A2E\u985E");
 const MAX_TABLE_ROWS = 150;
 const getXLabels = (type, data, translate) => {
-    if (type === "pie") {
-        return [translate("Value")];
-    }
-    const filteredDatasets = removeTrendDataFromDatasets(data.datasets);
-    return filteredDatasets.map(dataset => dataset.label || translate("Value"));
+  if (type === "pie") {
+    return [translate("Value")];
+  }
+  const filteredDatasets = removeTrendDataFromDatasets(data.datasets);
+  return filteredDatasets.map(dataset => dataset.label || translate("Value"));
 };
 const getYLabels = (type, data) => {
-    if (type === "pie" || type === "line-mini") {
-        const labels = data.labels;
-        if (labels && labels.length > 0) {
-            const filteredLabels = labels.filter(l => l !== null && l !== undefined);
-            return filteredLabels.map(l => (typeof l === "string" ? l || "-" : l));
-        }
-        return [];
+  if (type === "pie" || type === "line-mini") {
+    const labels = data.labels;
+    if (labels && labels.length > 0) {
+      const filteredLabels = labels.filter(l => l !== null && l !== undefined);
+      return filteredLabels.map(l => typeof l === "string" ? l || "-" : l);
     }
-    const allXValues = data.datasets.flatMap(ds => ds.data.map(d => d.x));
-    const allXValueKeys = allXValues.map(x => x instanceof Date ? x.toISOString() : x);
-    const uniqueXValues = Array.from(new Set(allXValueKeys));
-    return uniqueXValues.sort((a, b) => {
-        const aIsDate = a instanceof Date || (typeof a === "string" && isDateString(a));
-        const bIsDate = b instanceof Date || (typeof b === "string" && isDateString(b));
-        if (aIsDate && bIsDate) {
-            return new Date(a).getTime() - new Date(b).getTime();
-        }
-        return a - b;
-    });
+    return [];
+  }
+  const allXValues = data.datasets.flatMap(ds => ds.data.map(d => d.x));
+  const allXValueKeys = allXValues.map(x => x instanceof Date ? x.toISOString() : x);
+  const uniqueXValues = Array.from(new Set(allXValueKeys));
+  return uniqueXValues.sort((a, b) => {
+    const aIsDate = a instanceof Date || typeof a === "string" && isDateString(a);
+    const bIsDate = b instanceof Date || typeof b === "string" && isDateString(b);
+    if (aIsDate && bIsDate) {
+      return new Date(a).getTime() - new Date(b).getTime();
+    }
+    return a - b;
+  });
 };
-export const AccessibleChartTable = ({ type, data, options }) => {
-    const { translate } = useLanguage();
-    const tableCaption = translate("Chart data");
-    const { dateFormat, toLocalDateTime } = useContext(userFormatContext);
-    const dateFormatter = (d, format = dateFormat) => formatDate(toLocalDateTime(d), format, translate);
-    const filteredDatasets = useMemo(() => removeTrendDataFromDatasets(data.datasets), [data.datasets]);
-    const decimalPlacesPerDataset = useMemo(() => {
-        const precisionMap = new Map();
-        filteredDatasets.forEach((dataset, index) => {
-            const numericValues = [];
-            if (type === "pie" || type === "line-mini") {
-                dataset.data.forEach(yValue => {
-                    if (typeof yValue === "number") {
-                        numericValues.push(yValue);
-                    }
-                });
-            }
-            else {
-                dataset.data.forEach(dataPoint => {
-                    if (typeof dataPoint.y === "number") {
-                        numericValues.push(dataPoint.y);
-                    }
-                });
-            }
-            precisionMap.set(index, calculateMinTruncationPrecision(numericValues));
+export const AccessibleChartTable = ({
+  type,
+  data,
+  options
+}) => {
+  const {
+    translate
+  } = useLanguage();
+  const tableCaption = translate("Chart data");
+  const {
+    dateFormat,
+    toLocalDateTime
+  } = useContext(userFormatContext);
+  const dateFormatter = (d, format = dateFormat) => formatDate(toLocalDateTime(d), format, translate);
+  const filteredDatasets = useMemo(() => removeTrendDataFromDatasets(data.datasets), [data.datasets]);
+  const decimalPlacesPerDataset = useMemo(() => {
+    const precisionMap = new Map();
+    filteredDatasets.forEach((dataset, index) => {
+      const numericValues = [];
+      if (type === "pie" || type === "line-mini") {
+        dataset.data.forEach(yValue => {
+          if (typeof yValue === "number") {
+            numericValues.push(yValue);
+          }
         });
-        return precisionMap;
-    }, [filteredDatasets, type]);
-    const xLabels = useMemo(() => getXLabels(type, data, translate), [type, data, translate]);
-    const { yLabels, isLengthLimited } = useMemo(() => {
-        const allYLabels = getYLabels(type, data);
-        const initialRowLength = allYLabels.length;
-        const limited = initialRowLength > MAX_TABLE_ROWS;
-        const finalLabels = limited ? resampleArrayEvenly(allYLabels, MAX_TABLE_ROWS) : allYLabels;
-        return { yLabels: finalLabels, isLengthLimited: limited };
-    }, [type, data]);
-    return (_jsxs("div", { className: "screen-reader-only", children: [isLengthLimited && _jsx("div", { children: translate("Chart contains too many data points so their number has been reduced. If you want to see more, change the Report Range") }), _jsxs("table", { children: [_jsx("caption", { children: tableCaption }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: type === "line" ? translate("X-axis") : translate("Category") }), xLabels.map((xLabel, xIndex) => _jsx("th", { scope: "col", children: xLabel.toString() || "-" }, xIndex))] }) }), _jsxs("tbody", { children: [type === "line" && yLabels.map((yLabel, yIndex) => _jsxs("tr", { children: [_jsx("th", { scope: "row", children: getFormattedLabel(yLabel, dateFormatter, options) }), filteredDatasets.map((dataset, dsIndex) => {
-                                        const datasetDecimalPlaces = decimalPlacesPerDataset.get(dsIndex);
-                                        const matchingDataPoint = dataset.data.find(ds => {
-                                            if (!ds.x) {
-                                                return false;
-                                            }
-                                            const dsXKey = ds.x instanceof Date ? ds.x.toISOString() : ds.x.toString();
-                                            return dsXKey === yLabel.toString();
-                                        });
-                                        let cellContent = "-";
-                                        if (matchingDataPoint) {
-                                            const yValue = matchingDataPoint.y;
-                                            cellContent = typeof yValue === "number" ? truncateDecimals(yValue, datasetDecimalPlaces) : yValue;
-                                        }
-                                        return _jsx("td", { children: cellContent }, dsIndex);
-                                    })] }, yIndex)), (type === "pie" || type === "line-mini") && yLabels.map((yLabel, yIndex) => _jsxs("tr", { children: [_jsx("th", { scope: "row", children: yLabel.toString() }), data.datasets.map((dataset, dsIndex) => {
-                                        const yValue = dataset.data[yIndex];
-                                        const datasetDecimalPlaces = decimalPlacesPerDataset.get(dsIndex);
-                                        return _jsx("td", { children: typeof yValue === "number" ? truncateDecimals(yValue, datasetDecimalPlaces) : yValue }, dsIndex);
-                                    })] }, yIndex)), (type === "bar") && yLabels.map((yLabel, yIndex) => _jsxs("tr", { children: [_jsx("th", { scope: "row", children: yLabel.toString() }), data.datasets.map((dataset, dsIndex) => {
-                                        var _a;
-                                        const y = (_a = dataset.data[yIndex]) === null || _a === void 0 ? void 0 : _a.y;
-                                        const datasetDecimalPlaces = decimalPlacesPerDataset.get(dsIndex);
-                                        const yValue = typeof y === "number" ? truncateDecimals(y, datasetDecimalPlaces) : y || "";
-                                        return _jsx("td", { children: yValue }, dsIndex);
-                                    })] }, yIndex))] })] })] }));
-};
+      } else {
+        dataset.data.forEach(dataPoint => {
+          if (typeof dataPoint.y === "number") {
+            numericValues.push(dataPoint.y);
+          }
+        });
+      }
+      precisionMap.set(index, calculateMinTruncationPrecision(numericValues));
+    });
+    return precisionMap;
+  }, [filteredDatasets, type]);
+  const xLabels = useMemo(() => getXLabels(type, data, translate), [type, data, translate]);
+  const {
+    yLabels,
+    isLengthLimited
+  } = useMemo(() => {
+    const allYLabels = getYLabels(type, data);
+    const initialRowLength = allYLabels.length;
+    const limited = initialRowLength > MAX_TABLE_ROWS;
+    const finalLabels = limited ? resampleArrayEvenly(allYLabels, MAX_TABLE_ROWS) : allYLabels;
+    return {
+      yLabels: finalLabels,
+      isLengthLimited: limited
+    };
+  }, [type, data]);
+  return _jsxs("div", {
+    className: "screen-reader-only",
+    children: [isLengthLimited && _jsx("div", {
+      children: translate("Chart contains too many data points so their number has been reduced. If you want to see more, change the Report Range")
+    }), _jsxs("table", {
+      children: [_jsx("caption", {
+        children: tableCaption
+      }), _jsx("thead", {
+        children: _jsxs("tr", {
+          children: [_jsx("th", {
+            scope: "col",
+            children: type === "line" ? translate("X-axis") : translate("Category")
+          }), xLabels.map((xLabel, xIndex) => _jsx("th", {
+            scope: "col",
+            children: xLabel.toString() || "-"
+          }, xIndex))]
+        })
+      }), _jsxs("tbody", {
+        children: [type === "line" && yLabels.map((yLabel, yIndex) => _jsxs("tr", {
+          children: [_jsx("th", {
+            scope: "row",
+            children: getFormattedLabel(yLabel, dateFormatter, options)
+          }), filteredDatasets.map((dataset, dsIndex) => {
+            const datasetDecimalPlaces = decimalPlacesPerDataset.get(dsIndex);
+            const matchingDataPoint = dataset.data.find(ds => {
+              if (!ds.x) {
+                return false;
+              }
+              const dsXKey = ds.x instanceof Date ? ds.x.toISOString() : ds.x.toString();
+              return dsXKey === yLabel.toString();
+            });
+            let cellContent = "-";
+            if (matchingDataPoint) {
+              const yValue = matchingDataPoint.y;
+              cellContent = typeof yValue === "number" ? truncateDecimals(yValue, datasetDecimalPlaces) : yValue;
+            }
+            return _jsx("td", {
+              children: cellContent
+            }, dsIndex);
+          })]
+        }, yIndex)), (type === "pie" || type === "line-mini") && yLabels.map((yLabel, yIndex) => _jsxs("tr", {
+          children: [_jsx("th", {
+            scope: "row",
+            children: yLabel.toString()
+          }), data.datasets.map((dataset, dsIndex) => {
+            const yValue = dataset.data[yIndex];
+            const datasetDecimalPlaces = decimalPlacesPerDataset.get(dsIndex);
+            return _jsx("td", {
+              children: typeof yValue === "number" ? truncateDecimals(yValue, datasetDecimalPlaces) : yValue
+            }, dsIndex);
+          })]
+        }, yIndex)), type === "bar" && yLabels.map((yLabel, yIndex) => _jsxs("tr", {
+          children: [_jsx("th", {
+            scope: "row",
+            children: yLabel.toString()
+          }), data.datasets.map((dataset, dsIndex) => {
+            var _a;
+            const y = (_a = dataset.data[yIndex]) === null || _a === void 0 ? void 0 : _a.y;
+            const datasetDecimalPlaces = decimalPlacesPerDataset.get(dsIndex);
+            const yValue = typeof y === "number" ? truncateDecimals(y, datasetDecimalPlaces) : y || "";
+            return _jsx("td", {
+              children: yValue
+            }, dsIndex);
+          })]
+        }, yIndex))]
+      })]
+    })]
+  });
+};

package/esm/chart/chart.js

@@ -1,28 +1,38 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
+import { injectString } from "../utils/localization/translationsDictionary";
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PieChart } from "./pieChart";
 import { LineChart } from "./lineChart";
 import { BarChart } from "./barChart";
 import { useLanguage } from "../utils/localization/useLanguage";
+injectString("en", "Chart data table and visualization", "Chart data table and visualization");
 const isPieChart = (type, _) => type === "pie";
 const isBarChart = (type, _) => type === "bar";
-export const Chart = (_a) => {
-    var { type } = _a, rest = __rest(_a, ["type"]);
-    const { translate } = useLanguage();
-    const chartComponent = isPieChart(type, rest) ?
-        _jsx(PieChart, Object.assign({}, rest)) :
-        isBarChart(type, rest) ?
-            _jsx(BarChart, Object.assign({}, rest)) :
-            _jsx(LineChart, Object.assign({}, rest));
-    return _jsxs("figure", { style: { margin: 0, padding: 0, height: "100%" }, children: [_jsx("figcaption", { className: "screen-reader-only", children: translate("Chart data table and visualization") }), chartComponent] });
-};
+export const Chart = _a => {
+  var {
+      type
+    } = _a,
+    rest = __rest(_a, ["type"]);
+  const {
+    translate
+  } = useLanguage();
+  const chartComponent = isPieChart(type, rest) ? _jsx(PieChart, Object.assign({}, rest)) : isBarChart(type, rest) ? _jsx(BarChart, Object.assign({}, rest)) : _jsx(LineChart, Object.assign({}, rest));
+  return _jsxs("figure", {
+    style: {
+      margin: 0,
+      padding: 0,
+      height: "100%"
+    },
+    children: [_jsx("figcaption", {
+      className: "screen-reader-only",
+      children: translate("Chart data table and visualization")
+    }), chartComponent]
+  });
+};

package/esm/chart/chartAxis/chartAxis.js

@@ -1,9 +1,82 @@
+import { injectString } from "../../utils/localization/translationsDictionary";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { classNames } from "../../commonHelpers/classNames/classNames";
 import { useLanguage } from "../../utils/localization/useLanguage";
-export const ChartAxis = ({ xLabel, yLabels }) => {
-    const { translate } = useLanguage();
-    return _jsxs("div", { className: "zen-chart-axis", children: [(yLabels || []).map((label, index) => (_jsxs("div", { className: classNames(["zen-chart-axis__item", (yLabels || []).length > 1 && index === 0 ? "zen-chart-axis__item--wide" : ""]), children: [_jsx("span", { className: "zen-chart-axis__label", children: translate("Y-axis") }), _jsx("span", { className: "zen-chart-axis__value zen-ellipsis", children: label })] }, label))), xLabel
-                ? _jsxs("div", { className: "zen-chart-axis__item", children: [_jsx("span", { className: "zen-chart-axis__label", children: translate("X-axis") }), _jsx("span", { className: "zen-chart-axis__value zen-ellipsis", children: xLabel })] })
-                : null] });
-};
+injectString("cs", "Y-axis", "Osa\xA0Y");
+injectString("da-DK", "Y-axis", "Y-akse");
+injectString("de", "Y-axis", "Y-Achse");
+injectString("en", "Y-axis", "Y-axis");
+injectString("es", "Y-axis", "Eje Y");
+injectString("fi-FI", "Y-axis", "Y-akseli");
+injectString("fr", "Y-axis", "Axe des Y");
+injectString("fr-FR", "Y-axis", "Axe Y");
+injectString("hu-HU", "Y-axis", "Y tengely");
+injectString("id", "Y-axis", "Poros y");
+injectString("it", "Y-axis", "Asse Y");
+injectString("ja", "Y-axis", "Y \u8EF8");
+injectString("ko-KR", "Y-axis", "Y\uCD95");
+injectString("ms", "Y-axis", "Paksi-Y");
+injectString("nb-NO", "Y-axis", "Y-akse");
+injectString("nl", "Y-axis", "Y-as");
+injectString("pl", "Y-axis", "O\u015B Y");
+injectString("pt-BR", "Y-axis", "Eixo Y");
+injectString("sk-SK", "Y-axis", "os Y");
+injectString("sv", "Y-axis", "Y-axel");
+injectString("th", "Y-axis", "\u0E41\u0E01\u0E19 Y");
+injectString("tr", "Y-axis", "Y ekseni");
+injectString("zh-Hans", "Y-axis", "Y \u8F74");
+injectString("zh-TW", "Y-axis", "Y \u8EF8");
+injectString("cs", "X-axis", "Osa X");
+injectString("da-DK", "X-axis", "X-akse");
+injectString("de", "X-axis", "X-Achse");
+injectString("en", "X-axis", "X-axis");
+injectString("es", "X-axis", "Eje X");
+injectString("fi-FI", "X-axis", "X-akseli");
+injectString("fr", "X-axis", "Axe X");
+injectString("fr-FR", "X-axis", "Axe x");
+injectString("hu-HU", "X-axis", "X tengely");
+injectString("id", "X-axis", "Sumbu X");
+injectString("it", "X-axis", "Asse X");
+injectString("ja", "X-axis", "X \u8EF8");
+injectString("ko-KR", "X-axis", "X\uCD95");
+injectString("ms", "X-axis", "Paksi X");
+injectString("nb-NO", "X-axis", "X-akse");
+injectString("nl", "X-axis", "X-as");
+injectString("pl", "X-axis", "O\u015B X");
+injectString("pt-BR", "X-axis", "Eixo X");
+injectString("sk-SK", "X-axis", "os X");
+injectString("sv", "X-axis", "X-axel");
+injectString("th", "X-axis", "\u0E41\u0E01\u0E19 X");
+injectString("tr", "X-axis", "X ekseni");
+injectString("zh-Hans", "X-axis", "X \u8F74");
+injectString("zh-TW", "X-axis", "X \u8EF8");
+export const ChartAxis = ({
+  xLabel,
+  yLabels
+}) => {
+  const {
+    translate
+  } = useLanguage();
+  return _jsxs("div", {
+    className: "zen-chart-axis",
+    children: [(yLabels || []).map((label, index) => _jsxs("div", {
+      className: classNames(["zen-chart-axis__item", (yLabels || []).length > 1 && index === 0 ? "zen-chart-axis__item--wide" : ""]),
+      children: [_jsx("span", {
+        className: "zen-chart-axis__label",
+        children: translate("Y-axis")
+      }), _jsx("span", {
+        className: "zen-chart-axis__value zen-ellipsis",
+        children: label
+      })]
+    }, label)), xLabel ? _jsxs("div", {
+      className: "zen-chart-axis__item",
+      children: [_jsx("span", {
+        className: "zen-chart-axis__label",
+        children: translate("X-axis")
+      }), _jsx("span", {
+        className: "zen-chart-axis__value zen-ellipsis",
+        children: xLabel
+      })]
+    }) : null]
+  });
+};