@geotab/zenith 3.7.0 → 3.8.0-beta.0

package/esm/chart/barChart/getBarTooltipItems.js

@@ -9,9 +9,7 @@ export const getBarTooltipItems = (data, datasetIndex, index, options, isHidden)
     // Get the x-value from the hovered dataset to match against other datasets
     // If the hovered dataset is empty, find the first non-empty dataset to get the x-value
     const hoveredDataset = data.datasets[datasetIndex];
-    let hoveredDataItem = index < hoveredDataset.data.length
-        ? hoveredDataset.data[index]
-        : undefined;
+    let hoveredDataItem = index < hoveredDataset.data.length ? hoveredDataset.data[index] : undefined;
     // If the hovered dataset doesn't have data at this index, find another dataset that does
     if (hoveredDataItem === undefined) {
         for (const dataset of data.datasets) {
@@ -26,7 +24,8 @@ export const getBarTooltipItems = (data, datasetIndex, index, options, isHidden)
         }
     }
     const hoveredXValue = typeof hoveredDataItem === "number" ? undefined : hoveredDataItem.x;
-    return data.datasets.map((dataset, dsIndex) => {
+    return data.datasets
+        .map((dataset, dsIndex) => {
         if (dataset.data.length === 0) {
             return undefined;
         }
@@ -34,9 +33,7 @@ export const getBarTooltipItems = (data, datasetIndex, index, options, isHidden)
             return undefined;
         }
         // Find the data item in this dataset that matches the hovered x-value
-        const dataItem = hoveredXValue !== undefined
-            ? dataset.data.find(item => typeof item !== "number" && item.x === hoveredXValue)
-            : dataset.data[index];
+        const dataItem = hoveredXValue !== undefined ? dataset.data.find(item => typeof item !== "number" && item.x === hoveredXValue) : dataset.data[index];
         // If no matching data point exists for this dataset, skip it
         if (!dataItem) {
             return undefined;
@@ -47,10 +44,14 @@ export const getBarTooltipItems = (data, datasetIndex, index, options, isHidden)
         const label = dataset.label || "";
         // For color, find the correct index in the original dataset
         const dataItemIndex = dataset.data.indexOf(dataItem);
-        const color = Array.isArray(dataset.backgroundColor) && dataset.backgroundColor[dataItemIndex] ? dataset.backgroundColor[dataItemIndex] :
-            typeof dataset.borderColor === "string" ? dataset.borderColor : "";
+        const color = Array.isArray(dataset.backgroundColor) && dataset.backgroundColor[dataItemIndex]
+            ? dataset.backgroundColor[dataItemIndex]
+            : typeof dataset.borderColor === "string"
+                ? dataset.borderColor
+                : "";
         return { label, value, color };
-    }).filter((item) => item !== undefined);
+    })
+        .filter((item) => item !== undefined);
 };
 export const getBarTooltipTitle = (data, datasetIndex, index) => {
     if (data.datasets.length === 0) {

package/esm/chart/barChart/getDefaultDatasetStyle.js

@@ -1,13 +1,4 @@
-const baseColors = [
-    "#3CCDE5",
-    "#428AFF",
-    "#8256E5",
-    "#06C989",
-    "#F98C41",
-    "#F5BD60",
-    "#E56A6A",
-    "#8A94A2"
-];
+const baseColors = ["#3CCDE5", "#428AFF", "#8256E5", "#06C989", "#F98C41", "#F5BD60", "#E56A6A", "#8A94A2"];
 export const getDefaultDatasetStyle = (dataSet, dsIndex) => {
     var _a, _b;
     const newDataSet = Object.assign({}, dataSet);

package/esm/chart/barChart/getDefaultOptions.js

@@ -18,20 +18,22 @@ export const getDefaultOptions = (yAxis, isTimedData, isDark, translate) => {
                 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
-            },
+            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
         }
     };

package/esm/chart/barChart.js

@@ -41,7 +41,7 @@ export const BarChart = (_a) => {
     const { translate } = useLanguage();
     const isDrive = useDrive();
     const isMobile = useMobile();
-    const fontSize = useMemo(() => isDrive ? (isMobile ? 14 : 16) : 12, [isDrive, isMobile]);
+    const fontSize = useMemo(() => (isDrive ? (isMobile ? 14 : 16) : 12), [isDrive, isMobile]);
     const { dark } = useContext(themeContext);
     useEffect(() => {
         ChartJS.defaults.font = {
@@ -72,13 +72,5 @@ export const BarChart = (_a) => {
     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, (isDrive ? undefined : xLabels) || yLabels.length > 0
-                ? _jsx(ChartAxis, { xLabel: isDrive ? undefined : xLabels, yLabels: yLabels, yAxisPosition: "right" })
-                : 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 }), isDrive && xLabels
-                ? _jsx("div", { className: "zen-chart__x-axis", children: xLabels })
-                : null, _jsx(AccessibleChart, { type: "bar", data: chartData, options: chartOptions })] });
+    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, (isDrive ? undefined : xLabels) || yLabels.length > 0 ? (_jsx(ChartAxis, { xLabel: isDrive ? undefined : xLabels, yLabels: yLabels, yAxisPosition: "right" })) : 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 }), isDrive && xLabels ? _jsx("div", { className: "zen-chart__x-axis", children: xLabels }) : null, _jsx(AccessibleChart, { type: "bar", data: chartData, options: chartOptions })] }));
 };

package/esm/chart/chart.js

@@ -12,9 +12,33 @@ import { PieChart } from "./pieChart";
 import { LineChart } from "./lineChart";
 import { BarChart } from "./barChart";
 import { useLanguage } from "../utils/localization/useLanguage";
+injectString("cs", "Chart data table and visualization", "Chart data table and visualization");
+injectString("da-DK", "Chart data table and visualization", "Chart data table and visualization");
+injectString("de", "Chart data table and visualization", "Chart data table and visualization");
 injectString("en", "Chart data table and visualization", "Chart data table and visualization");
+injectString("es", "Chart data table and visualization", "Chart data table and visualization");
+injectString("fi-FI", "Chart data table and visualization", "Chart data table and visualization");
+injectString("fr", "Chart data table and visualization", "Chart data table and visualization");
+injectString("fr-FR", "Chart data table and visualization", "Chart data table and visualization");
+injectString("hu-HU", "Chart data table and visualization", "Chart data table and visualization");
+injectString("id", "Chart data table and visualization", "Chart data table and visualization");
+injectString("it", "Chart data table and visualization", "Chart data table and visualization");
+injectString("ja", "Chart data table and visualization", "Chart data table and visualization");
+injectString("ko-KR", "Chart data table and visualization", "Chart data table and visualization");
+injectString("ms", "Chart data table and visualization", "Chart data table and visualization");
+injectString("nb-NO", "Chart data table and visualization", "Chart data table and visualization");
+injectString("nl", "Chart data table and visualization", "Chart data table and visualization");
+injectString("pl", "Chart data table and visualization", "Chart data table and visualization");
+injectString("pt-BR", "Chart data table and visualization", "Chart data table and visualization");
 injectString("pt-PT", "Chart data table and visualization", "Tabela de dados do gr\xE1fico e visualiza\xE7\xE3o do gr\xE1fico");
+injectString("sk-SK", "Chart data table and visualization", "Chart data table and visualization");
+injectString("sv", "Chart data table and visualization", "Chart data table and visualization");
+injectString("th", "Chart data table and visualization", "Chart data table and visualization");
+injectString("tr", "Chart data table and visualization", "Chart data table and visualization");
+injectString("zh-Hans", "Chart data table and visualization", "Chart data table and visualization");
+injectString("zh-TW", "Chart data table and visualization", "Chart data table and visualization");
 injectString("ro-RO", "Chart data table and visualization", "Tabelul \u0219i vizualizarea datelor din grafic");
+injectString("ar-SA", "Chart data table and visualization", "\u062C\u062F\u0648\u0644 \u0628\u064A\u0627\u0646\u0627\u062A \u0627\u0644\u0631\u0633\u0645 \u0627\u0644\u0628\u064A\u0627\u0646\u064A \u0648\u0627\u0644\u062A\u0635\u0648\u0631");
 const isPieChart = (type, _) => type === "pie";
 const isBarChart = (type, _) => type === "bar";
 export const Chart = _a => {

package/esm/chart/chartAxis/chartAxis.js

@@ -29,6 +29,7 @@ injectString("tr", "Y-axis", "Y ekseni");
 injectString("zh-Hans", "Y-axis", "Y \u8F74");
 injectString("zh-TW", "Y-axis", "Y \u8EF8");
 injectString("ro-RO", "Y-axis", "Axa Y");
+injectString("ar-SA", "Y-axis", "\u0627\u0644\u0645\u062D\u0648\u0631 \u0635");
 injectString("cs", "X-axis", "Osa X");
 injectString("da-DK", "X-axis", "X-akse");
 injectString("de", "X-axis", "X-Achse");
@@ -55,6 +56,7 @@ injectString("tr", "X-axis", "X ekseni");
 injectString("zh-Hans", "X-axis", "X \u8F74");
 injectString("zh-TW", "X-axis", "X \u8EF8");
 injectString("ro-RO", "X-axis", "Axa X");
+injectString("ar-SA", "X-axis", "\u0627\u0644\u0645\u062D\u0648\u0631 \u0633");
 export const ChartAxis = ({
   xLabel,
   yLabels,

package/esm/chart/chartInsight/chartInsight.js

@@ -8,5 +8,5 @@ export const ChartInsight = ({ icon, text }) => {
             className: "zen-chart-insight__icon"
         })
         : null;
-    return _jsxs("div", { className: "zen-chart-insight", children: [sizedIcon, _jsx("div", { className: "zen-chart-insight__text", children: text })] });
+    return (_jsxs("div", { className: "zen-chart-insight", children: [sizedIcon, _jsx("div", { className: "zen-chart-insight__text", children: text })] }));
 };

package/esm/chart/lineChart/getDatasetColor.js

@@ -1,11 +1,2 @@
-const baseColors = [
-    "#3CCDE5",
-    "#428AFF",
-    "#8256E5",
-    "#06C989",
-    "#F98C41",
-    "#F5BD60",
-    "#E56A6A",
-    "#8A94A2"
-];
+const baseColors = ["#3CCDE5", "#428AFF", "#8256E5", "#06C989", "#F98C41", "#F5BD60", "#E56A6A", "#8A94A2"];
 export const getDatasetColor = (index) => baseColors[index % baseColors.length];

package/esm/chart/lineChart/getDefaultOptions.js

@@ -14,25 +14,32 @@ const getFormatFromDateRange = (minDate, maxDate, ticks) => {
     const stepDiff = diff / ticks;
     //const diffInMinutes = diff / (1000 * 60);
     //const diffInDays = diff / (1000 * 60 * 60 * 24);
-    if (stepDiff > 31536000000) { // 1 year
+    if (stepDiff > 31536000000) {
+        // 1 year
         return { unit: "year", format: "MMM, yyyy" };
     }
-    if (stepDiff > 2592000000) { // 30 days
+    if (stepDiff > 2592000000) {
+        // 30 days
         return { unit: "month", format: "MMM dd, yyyy" };
     }
-    if (stepDiff > 604800000) { // 7 days
+    if (stepDiff > 604800000) {
+        // 7 days
         return { unit: "week", format: "MMM dd" };
     }
-    if (stepDiff > 86400000) { // 1 day
+    if (stepDiff > 86400000) {
+        // 1 day
         return { unit: "day", format: "MMM dd" };
     }
-    if (stepDiff > 3600000) { // 1 hour
+    if (stepDiff > 3600000) {
+        // 1 hour
         return { unit: "hour", format: "MMM dd HH:mm" };
     }
-    if (stepDiff > 60000) { // 1 minute
+    if (stepDiff > 60000) {
+        // 1 minute
         return { unit: "minute", format: "HH:mm" };
     }
-    if (stepDiff > 1000) { // 1 second
+    if (stepDiff > 1000) {
+        // 1 second
         return { unit: "second", format: "HH:mm:ss" };
     }
     return { unit: "millisecond", format: "HH:mm:ss.l" };
@@ -49,27 +56,31 @@ export const getDefaultOptions = (yAxis, xAxis, isTimedData, ticks, isDark, tran
                 display: false
             },
             type: isTimedData ? "time" : "linear",
-            time: isTimedData ? {
-                unit: time.unit,
-                displayFormats: {
-                    [time.unit]: time.format
+            time: isTimedData
+                ? {
+                    unit: time.unit,
+                    displayFormats: {
+                        [time.unit]: time.format
+                    }
                 }
-            } : undefined,
-            ticks: isTimedData ? {
-                autoSkip: false,
-                maxRotation: 0,
-                count: ticks,
-                maxTicksLimit: ticks,
-                color: textColor,
-                callback: (value) => formatDate(new Date(value), time.format, translate)
-            } : {
-                source: "data",
-                autoSkip: false,
-                maxRotation: 0,
-                count: ticks,
-                maxTicksLimit: ticks,
-                color: textColor
-            },
+                : undefined,
+            ticks: isTimedData
+                ? {
+                    autoSkip: false,
+                    maxRotation: 0,
+                    count: ticks,
+                    maxTicksLimit: ticks,
+                    color: textColor,
+                    callback: (value) => formatDate(new Date(value), time.format, translate)
+                }
+                : {
+                    source: "data",
+                    autoSkip: false,
+                    maxRotation: 0,
+                    count: ticks,
+                    maxTicksLimit: ticks,
+                    color: textColor
+                },
             border: defaultGridBorderStyle
         }
     };

package/esm/chart/lineChart/useSummary.js

@@ -14,7 +14,7 @@ const mapChartSummaryToSummary = (chartSummary) => {
     return mappedSummary;
 };
 export const useSummary = (chartSummary, data) => {
-    const summary = useMemo(() => chartSummary ? Object.assign(Object.assign({}, chartSummary), mapChartSummaryToSummary(chartSummary)) : false, [chartSummary]);
+    const summary = useMemo(() => (chartSummary ? Object.assign(Object.assign({}, chartSummary), mapChartSummaryToSummary(chartSummary)) : false), [chartSummary]);
     const value = useMemo(() => {
         if (summary && summary.value) {
             return summary.value;
@@ -48,7 +48,9 @@ export const useSummary = (chartSummary, data) => {
         }
         return data.datasets[0] && typeof data.datasets[0].borderColor === "string"
             ? data.datasets[0].borderColor
-            : (summary && summary.title) ? "#3CCDE5" : undefined;
+            : summary && summary.title
+                ? "#3CCDE5"
+                : undefined;
     }, [data.datasets, summary]);
     const title = useMemo(() => {
         if (summary && summary.title) {

package/esm/chart/lineChart.js

@@ -43,7 +43,7 @@ export const LineChart = (_a) => {
     const { translate } = useLanguage();
     const isDrive = useDrive();
     const isMobile = useMobile();
-    const fontSize = useMemo(() => isDrive ? (isMobile ? 14 : 16) : 12, [isDrive, isMobile]);
+    const fontSize = useMemo(() => (isDrive ? (isMobile ? 14 : 16) : 12), [isDrive, isMobile]);
     const { dark } = useContext(themeContext);
     useEffect(() => {
         ChartJS.defaults.font = {
@@ -82,13 +82,5 @@ export const LineChart = (_a) => {
     const intSummary = useSummary(summary, chartData);
     const isMainHidden = useMemo(() => isHidden(0), [isHidden]);
     const toggleMainDataset = useCallback(() => toggleHidden(0), [toggleHidden]);
-    return _jsxs("div", { className: classNames(["zen-chart", className || ""]), ref: chartRef, children: [insight
-                ? _jsx(ChartInsight, Object.assign({}, insight))
-                : null, summary !== false
-                ? _jsx(Summary, Object.assign({}, intSummary, { onToggle: toggleMainDataset, isEnabled: isMainHidden }))
-                : null, (isDrive ? undefined : xLabels) || yLabels.length > 0
-                ? _jsx(ChartAxis, { xLabel: isDrive ? undefined : xLabels, yLabels: yLabels })
-                : null, _jsx("div", { className: "zen-chart__chart", children: _jsx(Line, Object.assign({ width: 100, height: 100, options: chartOptions, data: chartData, plugins: chartPlugins, "aria-hidden": true }, rest)) }), _jsx("div", { className: "zen-chart__legend", id: legendId }), isDrive && xLabels
-                ? _jsx("div", { className: "zen-chart__x-axis", children: xLabels })
-                : null, _jsx(AccessibleChart, { type: "line", data: chartData, options: chartOptions })] });
+    return (_jsxs("div", { className: classNames(["zen-chart", className || ""]), ref: chartRef, children: [insight ? _jsx(ChartInsight, Object.assign({}, insight)) : null, summary !== false ? _jsx(Summary, Object.assign({}, intSummary, { onToggle: toggleMainDataset, isEnabled: isMainHidden })) : null, (isDrive ? undefined : xLabels) || yLabels.length > 0 ? _jsx(ChartAxis, { xLabel: isDrive ? undefined : xLabels, yLabels: yLabels }) : null, _jsx("div", { className: "zen-chart__chart", children: _jsx(Line, Object.assign({ width: 100, height: 100, options: chartOptions, data: chartData, plugins: chartPlugins, "aria-hidden": true }, rest)) }), _jsx("div", { className: "zen-chart__legend", id: legendId }), isDrive && xLabels ? _jsx("div", { className: "zen-chart__x-axis", children: xLabels }) : null, _jsx(AccessibleChart, { type: "line", data: chartData, options: chartOptions })] }));
 };

package/esm/chart/pieChart/centerTextPlugin.d.ts

@@ -0,0 +1,3 @@
+import { Plugin } from "chart.js/auto";
+import { ICenterText } from "./interfaces";
+export declare const centerTextPlugin: (centerText: ICenterText | undefined) => Plugin<"pie">;

package/esm/chart/pieChart/centerTextPlugin.js

@@ -0,0 +1,29 @@
+import { zen } from "../../utils/zen";
+const getCssVar = (el, name) => { var _a, _b; return (_b = (_a = zen.getComputedStyle) === null || _a === void 0 ? void 0 : _a.call(zen, el).getPropertyValue(name).trim()) !== null && _b !== void 0 ? _b : ""; };
+export const centerTextPlugin = (centerText) => ({
+    id: "zenithPieCenterText",
+    afterDraw(chart) {
+        if (!centerText || centerText.value === undefined) {
+            return;
+        }
+        const { ctx, chartArea: { top, left, width, height } } = chart;
+        ctx.save();
+        const centerX = left + width / 2;
+        const centerY = top + height / 2;
+        const css = (name) => getCssVar(chart.canvas, name);
+        const fontFamily = css("--main-font");
+        const hasLabel = !!centerText.label;
+        const valueY = hasLabel ? centerY - 14 : centerY;
+        ctx.textAlign = "center";
+        ctx.textBaseline = "middle";
+        ctx.font = `${css("--pie-center-value-font-weight")} ${css("--pie-center-value-font-size")} ${fontFamily}`;
+        ctx.fillStyle = css("--text-primary");
+        ctx.fillText(String(centerText.value), centerX, valueY);
+        if (hasLabel) {
+            ctx.font = `${css("--pie-center-label-font-weight")} ${css("--pie-center-label-font-size")} ${fontFamily}`;
+            ctx.fillStyle = css("--text-secondary");
+            ctx.fillText(String(centerText.label), centerX, centerY + 16);
+        }
+        ctx.restore();
+    }
+});

package/esm/chart/pieChart/getDefaultDatasetStyle.js

@@ -1,13 +1,4 @@
-const baseColors = [
-    "#3CCDE5",
-    "#428AFF",
-    "#8256E5",
-    "#06C989",
-    "#F98C41",
-    "#F5BD60",
-    "#E56A6A",
-    "#8A94A2"
-];
+const baseColors = ["#3CCDE5", "#428AFF", "#8256E5", "#06C989", "#F98C41", "#F5BD60", "#E56A6A", "#8A94A2"];
 export const getDefaultDatasetStyle = (dataSet) => {
     const newDataSet = Object.assign({}, dataSet);
     if (!newDataSet.backgroundColor) {

package/esm/chart/pieChart/getPieTooltipItems.js

@@ -17,9 +17,11 @@ export const getPieTooltipItems = (data, datasetIndex, index, options) => {
     }
     const labels = (data.labels || []);
     const colors = dataset.backgroundColor || [];
-    return [{
+    return [
+        {
             color: colors[index] && typeof colors[index] === "string" ? colors[index] : "",
             label: labels[index] && typeof labels[index] === "string" ? labels[index] : "",
             value: dataItem ? formatValue(dataItem.toFixed(2), index, options === null || options === void 0 ? void 0 : options.unit) : undefined
-        }];
+        }
+    ];
 };

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

@@ -1,8 +1,21 @@
 import { ChartData, ChartDataset, ChartOptions, PluginOptionsByType } from "chart.js/auto";
+import { ILegendOptions } from "../plugins/legend/interfaces";
 interface IPieChartPluginOptions extends Partial<PluginOptionsByType<"pie">> {
 }
+export interface ICenterText {
+    getValue?: (visibleValues: number[]) => string | number;
+    value?: string | number;
+    label?: string;
+}
+export interface IPieLegendOptions extends ILegendOptions {
+    position?: "bottom" | "right";
+    showPercentage?: boolean;
+    showBar?: boolean;
+}
 export interface IPieChartOptions extends ChartOptions<"pie"> {
     plugins?: IPieChartPluginOptions;
+    centerText?: ICenterText;
+    isHorizontal?: boolean;
 }
 export type IPieChartDataset = ChartDataset<"pie", number[]>;
 export interface IPieChartData extends Omit<ChartData<"pie">, "datasets"> {

package/esm/chart/pieChart/pieLegendPlugin.d.ts

@@ -0,0 +1,7 @@
+import { Chart } from "chart.js/auto";
+import { IPieChartData, IPieLegendOptions } from "./interfaces";
+export declare const pieLegendPlugin: (containerId: string, options: IPieLegendOptions | undefined | false, isDrive: boolean, rawData: IPieChartData, isHidden: (index: number) => boolean, toggleHidden: (index: number) => void) => {
+    id: string;
+    isDrive: boolean;
+    afterUpdate(chart: Chart<"pie">): void;
+};

package/esm/chart/pieChart/pieLegendPlugin.js

@@ -0,0 +1,41 @@
+import { zen } from "../../utils/zen";
+import { getPieLegendItems } from "./getPieLegendItems";
+import { renderPieLegend } from "./renderPieLegend";
+export const pieLegendPlugin = (containerId, options, isDrive, rawData, isHidden, toggleHidden) => ({
+    id: "zenithPieLegend",
+    isDrive,
+    afterUpdate(chart) {
+        var _a;
+        const container = (_a = zen.document) === null || _a === void 0 ? void 0 : _a.getElementById(containerId);
+        if (!container) {
+            return;
+        }
+        if (options === false) {
+            container.classList.add("zen-legend--hidden");
+            return;
+        }
+        let items = getPieLegendItems(rawData, options, isHidden);
+        if (items.length === 0) {
+            container.classList.add("zen-legend--hidden");
+            return;
+        }
+        const computeStats = (options === null || options === void 0 ? void 0 : options.showPercentage) || (options === null || options === void 0 ? void 0 : options.showBar);
+        const rawValues = rawData.datasets[0].data;
+        const total = computeStats ? rawValues.reduce((sum, v, i) => (isHidden(i) ? sum : sum + v), 0) : 0;
+        items = items.map(item => {
+            const hidden = isHidden(item.index);
+            const onClick = () => {
+                toggleHidden(item.index);
+                chart.update();
+            };
+            return Object.assign(Object.assign(Object.assign({}, item), { onClick,
+                hidden }), (computeStats && {
+                percentage: hidden ? undefined : (total > 0 ? ((rawValues[item.index] / total) * 100).toFixed(1) : "0") + "%",
+                barWidth: hidden ? 0 : total > 0 ? (rawValues[item.index] / total) * 100 : 0
+            }));
+        });
+        container.innerHTML = "";
+        container.classList.remove("zen-legend--hidden");
+        renderPieLegend(container, isDrive, items, options);
+    }
+});

package/esm/chart/pieChart/renderPieLegend.d.ts

@@ -0,0 +1,7 @@
+import { ILegendItem } from "../plugins/legend/renderLegend";
+import { IPieLegendOptions } from "./interfaces";
+export interface IPieLegendItem extends ILegendItem {
+    percentage?: string;
+    barWidth?: number;
+}
+export declare const renderPieLegend: (element: HTMLElement, isDrive: boolean, items: IPieLegendItem[], options?: IPieLegendOptions) => void;

package/esm/chart/pieChart/renderPieLegend.js

@@ -0,0 +1,57 @@
+import { classNames } from "../../commonHelpers/classNames/classNames";
+import { htmlEscape } from "../../utils/escapeHtml";
+export const renderPieLegend = (element, isDrive, items, options) => {
+    const classes = classNames(["zen-pie-legend", isDrive ? "zen-pie-legend--drive" : ""]);
+    const listItems = items
+        .map(item => {
+        var _a;
+        const labelClass = classNames(["zen-pie-legend__item-label", item.hidden ? "zen-pie-legend__item-label--hidden" : ""]);
+        const valueClass = classNames(["zen-pie-legend__item-value", item.hidden ? "zen-pie-legend__item-value--hidden" : ""]);
+        const valueHtml = item.value !== undefined ? `<p class="${valueClass}">${htmlEscape(item.value)}</p>` : "";
+        const percentageHtml = (options === null || options === void 0 ? void 0 : options.showPercentage) && item.percentage !== undefined && !item.hidden
+            ? `<p class="zen-pie-legend__item-percentage">${htmlEscape(item.percentage)}</p>`
+            : "";
+        const barHtml = (options === null || options === void 0 ? void 0 : options.showBar) && !item.hidden
+            ? `<div class="zen-pie-legend__item-bar-track">
+                <div class="zen-pie-legend__item-bar" data-bar-width="${(_a = item.barWidth) !== null && _a !== void 0 ? _a : 0}"></div>
+               </div>`
+            : "";
+        return `<li class="zen-pie-legend__item" data-index="${item.index}">
+            <span class="zen-pie-legend__item-color"></span>
+            <div class="zen-pie-legend__item-content">
+                <div class="zen-pie-legend__item-row">
+                    <p class="${labelClass}">${htmlEscape(item.text)}</p>
+                    ${valueHtml}
+                    ${percentageHtml}
+                </div>
+                ${barHtml}
+            </div>
+        </li>`;
+    })
+        .join("");
+    element.innerHTML = `<ul class="${classes}">${listItems}</ul>`;
+    const itemsByIndex = new Map(items.map(item => [item.index, item]));
+    element.querySelectorAll(".zen-pie-legend__item").forEach(el => {
+        var _a;
+        const idx = el.getAttribute("data-index");
+        const legendItem = itemsByIndex.get(Number(idx));
+        if (!legendItem) {
+            return;
+        }
+        const colorEl = el.querySelector(".zen-pie-legend__item-color");
+        if (colorEl) {
+            colorEl.style.backgroundColor = legendItem.color;
+        }
+        const barEl = el.querySelector(".zen-pie-legend__item-bar");
+        if (barEl) {
+            barEl.style.backgroundColor = legendItem.color;
+            barEl.style.width = `${(_a = barEl.getAttribute("data-bar-width")) !== null && _a !== void 0 ? _a : 0}%`;
+        }
+        el.addEventListener("click", () => {
+            if (!legendItem.onClick) {
+                return;
+            }
+            legendItem.onClick();
+        }, false);
+    });
+};

package/esm/chart/pieChart.d.ts

@@ -1,9 +1,9 @@
 import "./chart.less";
+import "./pieChart/pieChart.less";
 import { IZenComponentProps } from "../commonHelpers/zenComponent";
 import { Plugin } from "chart.js/auto";
 import "../react-chartjs/dateAdapter";
-import { IPieChartData, IPieChartOptions } from "./pieChart/interfaces";
-import { ILegendOptions } from "./plugins/legend/interfaces";
+import { IPieChartData, IPieChartOptions, IPieLegendOptions } from "./pieChart/interfaces";
 import { ITooltipOptions } from "./plugins/tooltip/interfaces";
 import { IChartInsight } from "./chartInsight/chartInsight";
 import { IChartSummary } from "./interfaces";
@@ -12,7 +12,7 @@ export interface IPieChart extends IZenComponentProps {
     options?: IPieChartOptions;
     insight?: IChartInsight | false;
     summary?: IChartSummary | false;
-    legend?: ILegendOptions | false;
+    legend?: IPieLegendOptions | false;
     tooltip?: ITooltipOptions | false;
     plugins?: Plugin<"pie">[];
 }