@geotab/zenith 1.26.6-beta.3 → 2.0.0-beta.0

package/esm/chart/accessibleChart/accessibleChartTable.js

@@ -0,0 +1,103 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useMemo } from "react";
+import { useLanguage } from "../../utils/localization/useLanguage";
+import { userFormatContext } from "../../utils/userFormat/userFormatContext";
+import { formatDate } from "../../utils/formatDate";
+import { resampleArrayEvenly } from "../utils/resampleArrayEvenly";
+import { isDateString } from "../utils/isDateString";
+import { getFormattedLabel } from "../utils/getFormattedLabel";
+import { truncateDecimals } from "../../utils/truncateDecimals";
+import { calculateMinTruncationPrecision } from "../utils/calculateMinTruncationPrecision";
+import { removeTrendDataFromDatasets } from "../utils/removeTrendDataFromDatasets";
+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"));
+};
+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 [];
+    }
+    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));
+        });
+        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/accessibleChart/interfaces.d.ts

@@ -0,0 +1,48 @@
+import { ChartData, ChartDataset } from "chart.js";
+import { IBarChartData, IBarChartDataset, IBarChartOptions, IBarChartPoint } from "../barChart/interfaces";
+import { ILineChartData, ILineChartDataset, ILineChartOptions, ILineChartPoint } from "../lineChart/interfaces";
+import { IPieChartData } from "../pieChart/interfaces";
+import { BarChartType, LineChartType, PieChartType } from "../chart";
+export type AccessibleChartData = ILineChartData | IBarChartData | IPieChartData | ChartData<"line">;
+export type AccessibleChartType = LineChartType | BarChartType | PieChartType | "line-mini";
+export type AccessibleChartDataset = ILineChartDataset | IBarChartDataset | ChartDataset<"line">;
+export interface IAccessibleChart {
+    data: AccessibleChartData;
+    type: AccessibleChartType;
+    options?: ILineChartOptions | IBarChartOptions;
+}
+export interface IChartTrend {
+    trendDirection: "increases" | "decreases" | "flat" | "complex" | "undefined";
+    summary: string;
+}
+export interface IExtremePoints {
+    highest: ILineChartPoint | IBarChartPoint | null;
+    lowest: ILineChartPoint | IBarChartPoint | null;
+}
+export interface IRegressionLine {
+    slope: number;
+    yIntercept: number;
+}
+export interface IDeviatingPoint {
+    x: number | string;
+    y: number;
+    residual: number;
+    isSignificantlyHigh: boolean;
+    isSignificantlyLow: boolean;
+}
+export interface IAccessiblePoint {
+    x: number;
+    y: number;
+    originX: string | number | Date;
+}
+export interface IScoredDataPoint {
+    point: ILineChartPoint;
+    peakHeight: number;
+    valleyHeight: number;
+    peakDominance: number;
+    leftPeakDominance?: number;
+    rightPeakDominance?: number;
+    valleyDominance: number;
+    leftValleyDominance?: number;
+    rightValleyDominance?: number;
+}

package/esm/chart/accessibleChart/interfaces.js

@@ -0,0 +1 @@
+export {};

package/esm/chart/barChart/getBarLegendItems.d.ts

@@ -0,0 +1,3 @@
+import { ILegendItem } from "../plugins/legend/renderLegend";
+import { IBarChartData } from "./interfaces";
+export declare const getBarLegendItems: (data: IBarChartData) => ILegendItem[];

package/esm/chart/barChart/getBarLegendItems.js

@@ -0,0 +1,13 @@
+export const getBarLegendItems = (data) => {
+    if (data.datasets.length === 0) {
+        return [];
+    }
+    const legendItems = data.datasets.map((dataset, index) => ({
+        color: typeof dataset.borderColor === "string" ? dataset.borderColor : "",
+        text: dataset.label || "",
+        value: undefined,
+        index: index,
+        hidden: false
+    }));
+    return legendItems;
+};

package/esm/chart/barChart/getBarTooltipItems.d.ts

@@ -0,0 +1,5 @@
+import { ITooltipOptions } from "../plugins/tooltip/interfaces";
+import { ITooltipItem } from "../plugins/tooltip/renderTooltip";
+import { IBarChartData } from "./interfaces";
+export declare const getBarTooltipItems: (data: IBarChartData, datasetIndex: number | undefined, index: number | undefined, options: ITooltipOptions | undefined, isHidden: (index: number) => boolean) => ITooltipItem[];
+export declare const getBarTooltipTitle: (data: IBarChartData, datasetIndex: number | undefined, index: number | undefined) => string | undefined;

package/esm/chart/barChart/getBarTooltipItems.js

@@ -0,0 +1,43 @@
+import { formatValue } from "../plugins/legend/formatValue";
+export const getBarTooltipItems = (data, datasetIndex, index, options, isHidden) => {
+    if (data.datasets.length === 0) {
+        return [];
+    }
+    if (datasetIndex === undefined || index === undefined) {
+        return [];
+    }
+    return data.datasets.map((dataset, dsIndex) => {
+        if (dataset.data.length === 0) {
+            return undefined;
+        }
+        if (isHidden(dsIndex)) {
+            return undefined;
+        }
+        const dataItem = dataset.data[index];
+        const itemValue = typeof dataItem === "number" ? dataItem : dataItem.y;
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        const value = itemValue !== undefined ? formatValue(itemValue.toFixed(2), dsIndex, options === null || options === void 0 ? void 0 : options.unit) : undefined;
+        const label = dataset.label || "";
+        const color = Array.isArray(dataset.backgroundColor) && dataset.backgroundColor[index] ? dataset.backgroundColor[index] :
+            typeof dataset.borderColor === "string" ? dataset.borderColor : "";
+        return { label, value, color };
+    }).filter(item => item !== undefined);
+};
+export const getBarTooltipTitle = (data, datasetIndex, index) => {
+    if (data.datasets.length === 0) {
+        return undefined;
+    }
+    if (datasetIndex === undefined || index === undefined) {
+        return undefined;
+    }
+    const dataset = data.datasets[datasetIndex];
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    if (dataset && dataset.data[index]) {
+        const dataItem = dataset.data[index];
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        if (typeof dataItem === "object" && dataItem !== null && "x" in dataItem) {
+            return dataItem.x;
+        }
+    }
+    return undefined;
+};

package/esm/chart/barChart/getDefaultDatasetStyle.d.ts

@@ -0,0 +1,2 @@
+import { IBarChartDataset } from "./interfaces";
+export declare const getDefaultDatasetStyle: (dataSet: IBarChartDataset, dsIndex: number) => IBarChartDataset;

package/esm/chart/barChart/getDefaultDatasetStyle.js

@@ -0,0 +1,25 @@
+const baseColors = [
+    "#2853BD",
+    "#DA7C3A",
+    "#4AA75E",
+    "#1098FF",
+    "#3852D6",
+    "#D35D80"
+];
+export const getDefaultDatasetStyle = (dataSet, dsIndex) => {
+    var _a, _b;
+    const newDataSet = Object.assign({}, dataSet);
+    let baseColor;
+    if (Array.isArray(dataSet.backgroundColor) && dataSet.backgroundColor.length > 0) {
+        baseColor = (_a = dataSet.backgroundColor[0]) === null || _a === void 0 ? void 0 : _a.toString();
+        newDataSet.backgroundColor = dataSet.backgroundColor;
+    }
+    else {
+        baseColor = ((_b = dataSet.backgroundColor) === null || _b === void 0 ? void 0 : _b.toString()) || baseColors[dsIndex % baseColors.length];
+        newDataSet.backgroundColor = baseColor;
+    }
+    newDataSet.borderColor = baseColor;
+    newDataSet.barPercentage = dataSet.barPercentage !== undefined ? dataSet.barPercentage : 0.9;
+    newDataSet.categoryPercentage = dataSet.categoryPercentage !== undefined ? dataSet.categoryPercentage : 0.6;
+    return newDataSet;
+};

package/esm/chart/barChart/getDefaultOptions.d.ts

@@ -0,0 +1,45 @@
+import { IYAxisMeta } from "../interfaces";
+export declare const getDefaultOptions: (yAxis: IYAxisMeta[], isTimedData: boolean, isDark: boolean, translate: (s: string) => string) => {
+    responsive: boolean;
+    maintainAspectRatio: boolean;
+    scales: {
+        x: {
+            title: {
+                display: boolean;
+            };
+            grid: {
+                display: boolean;
+            };
+            type: string;
+            ticks: {
+                source: string;
+                autoSkip: boolean;
+                maxRotation: number;
+                maxTicksLimit: number;
+                color: string;
+                callback: (value: string) => string;
+            } | {
+                source: string;
+                autoSkip: boolean;
+                maxTicksLimit: number;
+                color: string;
+                maxRotation?: undefined;
+                callback?: undefined;
+            };
+            border: {
+                display: boolean;
+                dash: number[];
+            };
+        };
+    };
+    plugins: {
+        legend: {
+            display: boolean;
+        };
+        tooltip: {
+            enabled: boolean;
+        };
+        zenithTooltip: {};
+    };
+    animation: boolean;
+};

package/esm/chart/barChart/getDefaultOptions.js

@@ -0,0 +1,73 @@
+import { formatDate } from "../../utils/formatDate";
+const getDefaultGridStyle = (isDark) => ({
+    drawTicks: false,
+    color: isDark ? "#C0CCD8" : "#4E677E"
+});
+const defaultGridBorderStyle = {
+    display: false,
+    dash: [2, 2]
+};
+export const getDefaultOptions = (yAxis, isTimedData, isDark, translate) => {
+    const textColor = isDark ? "#C0CCD8" : "#4E677E";
+    const scales = {
+        x: {
+            title: {
+                display: false
+            },
+            grid: {
+                display: false
+            },
+            type: isTimedData ? "time" : "category",
+            ticks: isTimedData ? {
+                source: "data",
+                autoSkip: true,
+                maxRotation: 0,
+                maxTicksLimit: 12,
+                color: textColor,
+                callback: (value) => formatDate(new Date(value), "MMM dd", translate)
+            } : {
+                source: "data",
+                autoSkip: false,
+                //maxRotation: 0,
+                maxTicksLimit: 12,
+                color: textColor
+            },
+            border: defaultGridBorderStyle
+        }
+    };
+    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
+            },
+            beginAtZero: true,
+            grid: i === 0 ? getDefaultGridStyle(isDark) : { display: false },
+            border: defaultGridBorderStyle,
+            min: yAxis[i].min,
+            max: yAxis[i].max,
+            position: i === 0 ? "left" : "right"
+        };
+    }
+    return {
+        responsive: true,
+        maintainAspectRatio: false,
+        scales,
+        plugins: {
+            legend: {
+                display: false
+            },
+            tooltip: {
+                enabled: false
+            },
+            zenithTooltip: {}
+        },
+        animation: false
+    };
+};

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

@@ -0,0 +1,15 @@
+import { ChartData, ChartDataset, ChartOptions, PluginOptionsByType } from "chart.js/auto";
+interface IBarChartPluginOptions extends Partial<PluginOptionsByType<"bar">> {
+}
+export interface IBarChartOptions extends ChartOptions<"bar"> {
+    plugins?: IBarChartPluginOptions;
+}
+export interface IBarChartPoint {
+    x: number | string;
+    y: number;
+}
+export type IBarChartDataset = ChartDataset<"bar", IBarChartPoint[]>;
+export interface IBarChartData extends Omit<ChartData<"bar">, "datasets" | "labels"> {
+    datasets: IBarChartDataset[];
+}
+export {};

package/esm/chart/barChart/interfaces.js

@@ -0,0 +1 @@
+export {};

package/esm/chart/barChart.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+import "./chart.less";
+import { IZenComponentProps } from "../commonHelpers/zenComponent";
+import { Plugin } from "chart.js/auto";
+import "../react-chartjs/dateAdapter";
+import { IChartAxis } from "./chartAxis/chartAxis";
+import { IBarChartData, IBarChartOptions } from "./barChart/interfaces";
+import { ILegendOptions } from "./plugins/legend/interfaces";
+import { ITooltipOptions } from "./plugins/tooltip/interfaces";
+import { IChartInsight } from "./chartInsight/chartInsight";
+import { IChartSummary } from "./interfaces";
+export interface IBarChart extends IZenComponentProps {
+    data: IBarChartData;
+    options?: IBarChartOptions;
+    axis?: Partial<IChartAxis>;
+    legend?: ILegendOptions | false;
+    tooltip?: ITooltipOptions | false;
+    insight?: IChartInsight | false;
+    summary?: IChartSummary | false;
+    plugins?: Plugin<"bar">[];
+}
+export declare const BarChart: React.FC<IBarChart>;

package/esm/chart/barChart.js

@@ -0,0 +1,83 @@
+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 { useCallback, useContext, useEffect, useMemo } from "react";
+import { Bar } from "../react-chartjs/typedCharts";
+import { Chart as ChartJS, CategoryScale, LinearScale, BarController, BarElement } from "chart.js/auto";
+import "../react-chartjs/dateAdapter";
+import { deepMerge } from "../commonHelpers/utils";
+import { useDrive } from "../utils/theme/useDrive";
+import { useMobile } from "../commonHelpers/hooks/useMobile";
+import { themeContext } from "../utils/theme/themeContext";
+import { generateId } from "../commonHelpers/generateId";
+import { classNames } from "../commonHelpers/classNames/classNames";
+import { legendPlugin } from "./plugins/legend/legendPlugin";
+import { ChartAxis } from "./chartAxis/chartAxis";
+import { useLanguage } from "../utils/localization/useLanguage";
+import { isDateRange } from "./utils/isDateRange";
+import { getYAxisMeta } from "./utils/getYAxisMeta";
+import { getDefaultOptions } from "./barChart/getDefaultOptions";
+import { convertDates } from "./utils/convertDates";
+import { useAxisLabels } from "./lineChart/useAxisLabels";
+import { useSummary } from "./lineChart/useSummary";
+import { getDefaultDatasetStyle } from "./barChart/getDefaultDatasetStyle";
+import { useHidden } from "./utils/useHidden";
+import { TooltipPlugin } from "./plugins/tooltip/tooltipPlugin";
+import { ChartInsight } from "./chartInsight/chartInsight";
+import { userFormatContext } from "../utils/userFormat/userFormatContext";
+import { Summary } from "../summary/summary";
+import { AccessibleChart } from "./accessibleChart/accessibleChart";
+ChartJS.register(BarController, BarElement, CategoryScale, LinearScale);
+export const BarChart = (_a) => {
+    var { data, options = {}, axis, insight, summary, legend, tooltip, plugins, className } = _a, rest = __rest(_a, ["data", "options", "axis", "insight", "summary", "legend", "tooltip", "plugins", "className"]);
+    const { translate } = useLanguage();
+    const isDrive = useDrive();
+    const isMobile = useMobile();
+    const fontSize = useMemo(() => isDrive ? (isMobile ? 14 : 16) : 12, [isDrive, isMobile]);
+    const { dark } = useContext(themeContext);
+    useEffect(() => {
+        ChartJS.defaults.font = {
+            family: "Roboto",
+            size: fontSize
+        };
+        ChartJS.defaults.color = dark ? "#FFFFFF" : "#1F2833";
+    }, [fontSize, dark]);
+    const legendId = useMemo(() => generateId(), []);
+    const tooltipId = useMemo(() => generateId(), []);
+    const { toLocalDateTime } = useContext(userFormatContext);
+    const isTimedData = useMemo(() => isDateRange(data, false), [data]);
+    const yAxisMeta = useMemo(() => getYAxisMeta(data), [data]);
+    const defOptions = useMemo(() => getDefaultOptions(yAxisMeta, isTimedData, dark, translate), [yAxisMeta, isTimedData, dark, translate]);
+    const chartOptions = deepMerge(defOptions, options);
+    const { isHidden, toggleHidden } = useHidden();
+    const chartData = useMemo(() => {
+        const chData = convertDates(data, toLocalDateTime);
+        chData.datasets = chData.datasets.map((ds, i) => getDefaultDatasetStyle(ds, i));
+        chData.datasets = chData.datasets.map((ds, i) => (Object.assign(Object.assign({}, ds), { hidden: isHidden(i) })));
+        return chData;
+    }, [data, isHidden, toLocalDateTime]);
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-arguments
+    const chartTooltip = useMemo(() => TooltipPlugin(tooltipId, tooltip, "top", isHidden, dark), [tooltipId, tooltip, isHidden, dark]);
+    const chartLegend = useMemo(() => legendPlugin(legendId, legend, isDrive, isHidden, toggleHidden), [isDrive, isHidden, legend, legendId, toggleHidden]);
+    const chartPlugins = useMemo(() => [...(plugins || []), chartTooltip, chartLegend], [chartLegend, chartTooltip, plugins]);
+    const { xLabels, yLabels } = useAxisLabels(axis, chartOptions);
+    const intSummary = useSummary(summary, chartData);
+    const isMainHidden = useMemo(() => isHidden(0), [isHidden]);
+    const toggleMainData = useCallback(() => toggleHidden(0), [toggleHidden]);
+    return _jsxs("div", { className: classNames(["zen-chart", className || ""]), children: [insight
+                ? _jsx(ChartInsight, Object.assign({}, insight))
+                : null, summary
+                ? _jsx(Summary, Object.assign({ onToggle: toggleMainData, isEnabled: isMainHidden }, intSummary))
+                : null, xLabels || yLabels.length > 0
+                ? _jsx(ChartAxis, { xLabel: xLabels, yLabels: yLabels })
+                : null, _jsx("div", { className: "zen-chart__chart", children: _jsx(Bar, Object.assign({ options: chartOptions, data: chartData, plugins: chartPlugins }, rest, { "aria-hidden": true })) }), _jsx("div", { className: "zen-chart__legend", id: legendId }), _jsx(AccessibleChart, { type: "bar", data: chartData, options: chartOptions })] });
+};

package/esm/chart/chart.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import { IPieChart } from "./pieChart";
+import { ILineChart } from "./lineChart";
+import { IBarChart } from "./barChart";
+type LineChartType = "line";
+type BarChartType = "bar";
+type PieChartType = "pie";
+interface ITypedLineChart extends ILineChart {
+    type: LineChartType;
+}
+interface ITypedBarChart extends IBarChart {
+    type: BarChartType;
+}
+interface ITypedPieChart extends IPieChart {
+    type: PieChartType;
+}
+type IChart = ITypedLineChart | ITypedBarChart | ITypedPieChart;
+export type { LineChartType, BarChartType, PieChartType, ITypedLineChart, ITypedBarChart, ITypedPieChart, IChart };
+export declare const Chart: React.FC<IChart>;

package/esm/chart/chart.js

@@ -0,0 +1,28 @@
+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";
+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] });
+};

package/esm/chart/chartAxis/chartAxis.d.ts

@@ -0,0 +1,6 @@
+import "./chartAxis.less";
+export interface IChartAxis {
+    xLabel?: string | undefined;
+    yLabels?: string[];
+}
+export declare const ChartAxis: ({ xLabel, yLabels }: IChartAxis) => import("react/jsx-runtime").JSX.Element;

package/esm/chart/chartAxis/chartAxis.js

@@ -0,0 +1,9 @@
+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] });
+};

package/esm/chart/chartInsight/chartInsight.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from "react";
+import "./chartInsight.less";
+export interface IChartInsight {
+    icon?: ReactNode;
+    text: ReactNode;
+}
+export declare const ChartInsight: ({ icon, text }: IChartInsight) => import("react/jsx-runtime").JSX.Element;

package/esm/chart/chartInsight/chartInsight.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cloneElement, isValidElement } from "react";
+const isReactElement = (element) => isValidElement(element);
+export const ChartInsight = ({ icon, text }) => {
+    const sizedIcon = icon && isReactElement(icon)
+        ? cloneElement(icon, {
+            size: "large",
+            className: "zen-chart-insight__icon"
+        })
+        : null;
+    return _jsxs("div", { className: "zen-chart-insight", children: [sizedIcon, _jsx("div", { className: "zen-chart-insight__text", children: text })] });
+};

package/esm/chart/interfaces.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+export interface IYAxisMeta {
+    name: string;
+    min: number;
+    max: number;
+}
+export interface IXAxisMeta {
+    minDate: string;
+    maxDate: string;
+}
+export type TUnit = string | string[] | ((index: number, value: string) => string);
+export interface IChartSummary {
+    color?: string;
+    label?: string;
+    value?: number | string;
+    unit?: string;
+    more?: React.ReactNode;
+    description?: string;
+    onClick?: () => void;
+    isHidden?: boolean;
+}

package/esm/chart/interfaces.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export declare const getDatasetColor: (index: number) => string;

package/esm/chart/lineChart/getDatasetColor.js

@@ -0,0 +1,9 @@
+const baseColors = [
+    "#2853BD",
+    "#DA7C3A",
+    "#4AA75E",
+    "#1098FF",
+    "#3852D6",
+    "#D35D80"
+];
+export const getDatasetColor = (index) => baseColors[index % baseColors.length];

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

@@ -0,0 +1,2 @@
+import { ILineChartNativeDataset } from "./interfaces";
+export declare const getDefaultDatasetStyle: (dataSet: ILineChartNativeDataset, dsIndex: number) => ILineChartNativeDataset;