pixelize-design-library 2.2.144 → 2.2.146

package/dist/Components/Apexcharts/ApexBarChart/ApexBarChart.js

@@ -1,23 +1,68 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = ApexBarChart;
-var react_1 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
 var react_apexcharts_1 = __importDefault(require("react-apexcharts"));
+var react_2 = require("@chakra-ui/react");
+var chartColorsFromTheme_1 = require("../../../Theme/chartColorsFromTheme");
 function ApexBarChart(_a) {
-    var data = _a.data, labels = _a.labels, title = _a.title, titlePosition = _a.titlePosition, _b = _a.height, height = _b === void 0 ? 400 : _b, _c = _a.width, width = _c === void 0 ? 500 : _c, _d = _a.barColor, barColor = _d === void 0 ? ["#3182ce"] : _d, _e = _a.xAxisStyle, xAxisStyle = _e === void 0 ? {
-        color: "#ffffff",
-    } : _e, _f = _a.yAxisStyle, yAxisStyle = _f === void 0 ? {
-        color: "#ffffff",
-    } : _f, _g = _a.titleStyle, titleStyle = _g === void 0 ? {
-        color: "#3182ce",
-        fontSize: "16px",
-        fontWeight: 600,
-        fontFamily: "Arial",
-    } : _g;
-    var options = {
+    var data = _a.data, labels = _a.labels, title = _a.title, titlePosition = _a.titlePosition, _b = _a.height, height = _b === void 0 ? 400 : _b, _c = _a.width, width = _c === void 0 ? 500 : _c, barColor = _a.barColor, xAxisStyle = _a.xAxisStyle, yAxisStyle = _a.yAxisStyle, titleStyle = _a.titleStyle;
+    var theme = (0, react_2.useTheme)();
+    var palette = theme.colors;
+    var resolvedBarColors = barColor !== null && barColor !== void 0 ? barColor : [(0, chartColorsFromTheme_1.getDefaultSeriesColors)(palette)[0]];
+    var axisColor = (0, chartColorsFromTheme_1.chartAxisLabelColor)(palette);
+    var mergedXAxis = (0, react_1.useMemo)(function () { var _a; return (__assign(__assign({}, xAxisStyle), { color: (_a = xAxisStyle === null || xAxisStyle === void 0 ? void 0 : xAxisStyle.color) !== null && _a !== void 0 ? _a : axisColor })); }, [axisColor, xAxisStyle]);
+    var mergedYAxis = (0, react_1.useMemo)(function () { var _a; return (__assign(__assign({}, yAxisStyle), { color: (_a = yAxisStyle === null || yAxisStyle === void 0 ? void 0 : yAxisStyle.color) !== null && _a !== void 0 ? _a : axisColor })); }, [axisColor, yAxisStyle]);
+    var mergedTitleStyle = (0, react_1.useMemo)(function () { return (0, chartColorsFromTheme_1.mergeChartTitleStyle)(palette, titleStyle); }, [palette, titleStyle]);
+    var dataLabelColor = palette.primary[500];
+    var options = (0, react_1.useMemo)(function () { return ({
         chart: {
             type: "bar",
             height: 350,
@@ -32,27 +77,36 @@ function ApexBarChart(_a) {
             enabled: false,
             style: {
                 fontSize: "12px",
-                colors: ["#00E396"], //data label color
+                colors: [dataLabelColor],
             },
         },
         xaxis: {
             categories: labels,
             labels: {
-                style: xAxisStyle,
+                style: mergedXAxis,
             },
         },
         yaxis: {
             labels: {
-                style: yAxisStyle,
+                style: mergedYAxis,
             },
         },
         title: {
             text: title,
             align: titlePosition,
-            style: titleStyle,
+            style: mergedTitleStyle,
         },
-        colors: barColor, //bar color
-    };
+        colors: resolvedBarColors,
+    }); }, [
+        labels,
+        mergedXAxis,
+        mergedYAxis,
+        title,
+        titlePosition,
+        mergedTitleStyle,
+        resolvedBarColors,
+        dataLabelColor,
+    ]);
     var series = [
         {
             name: "Data",

package/dist/Components/Apexcharts/ApexLineChart/ApexLineChart.js

@@ -47,29 +47,30 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var react_apexcharts_1 = __importDefault(require("react-apexcharts"));
+var react_2 = require("@chakra-ui/react");
 var ToolTip_1 = __importDefault(require("../../ToolTip/ToolTip"));
+var chartColorsFromTheme_1 = require("../../../Theme/chartColorsFromTheme");
 var ApexLineChart = function (_a) {
-    var data = _a.data, labels = _a.labels, title = _a.title, height = _a.height, width = _a.width, _b = _a.lineColors, lineColors = _b === void 0 ? ["#3182ce", "#e53e3e", "#38a169"] : _b, _c = _a.titlePosition, titlePosition = _c === void 0 ? "center" : _c, _d = _a.titleStyle, titleStyle = _d === void 0 ? {
-        color: "#3182ce",
-        fontSize: "16px",
-        fontWeight: 600,
-        fontFamily: "Arial",
-    } : _d, _e = _a.compact, compact = _e === void 0 ? false : _e, _f = _a.toolbarBreakpointPct, toolbarBreakpointPct = _f === void 0 ? 0.6 : _f, titleClampLines = _a.titleClampLines, _g = _a.showTitleEllipsis, showTitleEllipsis = _g === void 0 ? true : _g, _h = _a.showSeries, showSeries = _h === void 0 ? true : _h, seriesNames = _a.series, _j = _a.variant, variant = _j === void 0 ? "basic" : _j;
+    var data = _a.data, labels = _a.labels, title = _a.title, height = _a.height, width = _a.width, lineColors = _a.lineColors, _b = _a.titlePosition, titlePosition = _b === void 0 ? "center" : _b, titleStyle = _a.titleStyle, _c = _a.compact, compact = _c === void 0 ? false : _c, _d = _a.toolbarBreakpointPct, toolbarBreakpointPct = _d === void 0 ? 0.6 : _d, titleClampLines = _a.titleClampLines, _e = _a.showTitleEllipsis, showTitleEllipsis = _e === void 0 ? true : _e, _f = _a.showSeries, showSeries = _f === void 0 ? true : _f, seriesNames = _a.series, _g = _a.variant, variant = _g === void 0 ? "basic" : _g;
+    var theme = (0, react_2.useTheme)();
+    var palette = theme.colors;
+    var resolvedLineColors = lineColors !== null && lineColors !== void 0 ? lineColors : (0, chartColorsFromTheme_1.getDefaultSeriesColors)(palette);
+    var resolvedTitleStyle = (0, react_1.useMemo)(function () { return (0, chartColorsFromTheme_1.mergeChartTitleStyle)(palette, titleStyle); }, [palette, titleStyle]);
     var initialName = Array.isArray(seriesNames) && seriesNames.length ? seriesNames[0] : "Series 1";
-    var _k = (0, react_1.useState)([
+    var _h = (0, react_1.useState)([
         {
             name: initialName,
             data: Array.isArray(data) ? data : [],
         },
-    ]), apexSeries = _k[0], setApexSeries = _k[1];
+    ]), apexSeries = _h[0], setApexSeries = _h[1];
     (0, react_1.useEffect)(function () {
         if (variant === "realtime") {
             var interval_1 = setInterval(function () {
                 setApexSeries(function (prev) {
                     var newData = __spreadArray([], prev[0].data, true);
-                    newData.push(Math.floor(Math.random() * 100) + 10); // simulate
+                    newData.push(Math.floor(Math.random() * 100) + 10);
                     if (newData.length > 20)
-                        newData.shift(); // keep window size
+                        newData.shift();
                     return [{ name: prev[0].name, data: newData }];
                 });
             }, 1000);
@@ -77,7 +78,7 @@ var ApexLineChart = function (_a) {
         }
     }, [variant]);
     var wrapperRef = (0, react_1.useRef)(null);
-    var _l = (0, react_1.useState)(0), containerW = _l[0], setContainerW = _l[1];
+    var _j = (0, react_1.useState)(0), containerW = _j[0], setContainerW = _j[1];
     (0, react_1.useEffect)(function () {
         if (!wrapperRef.current)
             return;
@@ -90,7 +91,7 @@ var ApexLineChart = function (_a) {
         return function () { return ro.disconnect(); };
     }, []);
     var parsePercent = function (v) {
-        var n = parseFloat(v.replace('%', ''));
+        var n = parseFloat(v.replace("%", ""));
         return isNaN(n) ? 0 : n / 100;
     };
     var chartW = typeof width === "number"
@@ -98,17 +99,15 @@ var ApexLineChart = function (_a) {
         : typeof width === "string" && width.trim().endsWith("%")
             ? containerW * parsePercent(width.trim())
             : containerW;
-    var hNum = typeof height === "number"
-        ? height
-        : 0;
+    var hNum = typeof height === "number" ? height : 0;
     var isSmall = compact || (chartW > 0 && chartW < 280) || (hNum > 0 && hNum < 220);
-    var computedFontSize = (titleStyle === null || titleStyle === void 0 ? void 0 : titleStyle.fontSize) ||
+    var computedFontSize = (resolvedTitleStyle === null || resolvedTitleStyle === void 0 ? void 0 : resolvedTitleStyle.fontSize) ||
         (chartW
             ? "".concat(Math.max(12, Math.min(18, Math.floor(chartW / 18))), "px")
             : "14px");
     var clampLines = titleClampLines !== null && titleClampLines !== void 0 ? titleClampLines : (isSmall ? 2 : 1);
     var titleRef = (0, react_1.useRef)(null);
-    var _m = (0, react_1.useState)(false), isTruncated = _m[0], setIsTruncated = _m[1];
+    var _k = (0, react_1.useState)(false), isTruncated = _k[0], setIsTruncated = _k[1];
     (0, react_1.useEffect)(function () {
         var el = titleRef.current;
         if (!el)
@@ -126,7 +125,7 @@ var ApexLineChart = function (_a) {
             ? parsePercent(width.trim())
             : 1;
     var showToolbar = !isSmall && ratio >= toolbarBreakpointPct;
-    var options = {
+    var options = (0, react_1.useMemo)(function () { return ({
         chart: {
             type: "line",
             animations: variant === "realtime"
@@ -140,31 +139,43 @@ var ApexLineChart = function (_a) {
             toolbar: { show: showToolbar },
         },
         stroke: { curve: "smooth" },
-        colors: lineColors,
+        colors: resolvedLineColors,
         xaxis: labels
             ? { categories: labels }
             : { type: variant === "realtime" ? "numeric" : "category" },
         title: {
             text: isSmall ? undefined : title,
             align: titlePosition !== null && titlePosition !== void 0 ? titlePosition : "center",
-            style: titleStyle,
+            style: resolvedTitleStyle,
         },
         tooltip: {
-            enabled: !!showSeries, // 👈 THIS is the key
+            enabled: !!showSeries,
             marker: { show: !!showSeries },
         },
         markers: { size: showSeries ? 4 : 0, hover: { size: showSeries ? 4 : 0 } },
         dataLabels: { enabled: false },
         grid: { padding: { top: isSmall ? 6 : 16, right: 8, left: 8 } },
-    };
+    }); }, [
+        variant,
+        showToolbar,
+        resolvedLineColors,
+        labels,
+        isSmall,
+        title,
+        titlePosition,
+        resolvedTitleStyle,
+        showSeries,
+    ]);
+    var tooltipBg = (0, chartColorsFromTheme_1.chartTooltipBackground)(palette);
+    var tooltipFg = (0, chartColorsFromTheme_1.chartTooltipForeground)(palette);
     return (react_1.default.createElement("div", { ref: wrapperRef },
-        title && isSmall && (react_1.default.createElement(ToolTip_1.default, { label: title, placement: "top", hasArrow: true, fontSize: "0.75rem", bg: "#4A5568", color: "#fff", isDisabled: !isTruncated },
+        title && isSmall && (react_1.default.createElement(ToolTip_1.default, { label: title, placement: "top", hasArrow: true, fontSize: "0.75rem", bg: tooltipBg, color: tooltipFg, isDisabled: !isTruncated },
             react_1.default.createElement("div", { ref: titleRef, style: {
                     textAlign: "left",
-                    color: titleStyle === null || titleStyle === void 0 ? void 0 : titleStyle.color,
+                    color: resolvedTitleStyle === null || resolvedTitleStyle === void 0 ? void 0 : resolvedTitleStyle.color,
                     fontSize: computedFontSize,
-                    fontWeight: titleStyle === null || titleStyle === void 0 ? void 0 : titleStyle.fontWeight,
-                    fontFamily: titleStyle === null || titleStyle === void 0 ? void 0 : titleStyle.fontFamily,
+                    fontWeight: resolvedTitleStyle === null || resolvedTitleStyle === void 0 ? void 0 : resolvedTitleStyle.fontWeight,
+                    fontFamily: resolvedTitleStyle === null || resolvedTitleStyle === void 0 ? void 0 : resolvedTitleStyle.fontFamily,
                     marginBottom: 4,
                     width: typeof width === "string"
                         ? width

package/dist/Components/Apexcharts/ApexPieChart/ApexPieChart.js

@@ -10,143 +10,190 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
 var react_apexcharts_1 = __importDefault(require("react-apexcharts"));
+var react_2 = require("@chakra-ui/react");
+var chartColorsFromTheme_1 = require("../../../Theme/chartColorsFromTheme");
+var getValidLegendPosition = function (position) {
+    var validPositions = ["left", "right", "top", "bottom"];
+    if (validPositions.includes(position)) {
+        return position;
+    }
+    console.warn("Invalid legend position: ".concat(position, ". Defaulting to 'bottom'."));
+    return "bottom";
+};
 var ApexPieChart = function (_a) {
-    var _b, _c;
-    var data = _a.data, labels = _a.labels, title = _a.title, _d = _a.height, height = _d === void 0 ? 400 : _d, _e = _a.width, width = _e === void 0 ? 500 : _e, donutColors = _a.donutColors, chartColor = _a.chartColor, _f = _a.titlePosition, titlePosition = _f === void 0 ? "center" : _f, _g = _a.titleStyle, titleStyle = _g === void 0 ? {
-        color: "#3182ce",
-        fontSize: "16px",
-        fontWeight: 600,
-        fontFamily: "Arial",
-    } : _g, _h = _a.legendPosition, legendPosition = _h === void 0 ? "bottom" : _h, _j = _a.legendStyle, legendStyle = _j === void 0 ? {
-        colors: "#000",
-        useSeriesColors: false,
-        horizontalGap: 10,
-        verticalGap: 5,
-        markerSize: 8,
-        markerOffsetX: -5,
-        markerOffsetY: 0,
-    } : _j, _k = _a.variant, variant = _k === void 0 ? "pie" : _k;
-    var extraOptions = {};
-    // Your switch cases for different variants
-    switch (variant) {
-        case "semi-donut":
-            extraOptions = {
-                plotOptions: {
-                    pie: {
-                        startAngle: -90,
-                        endAngle: 90,
-                        offsetY: 10,
+    var _b;
+    var data = _a.data, labels = _a.labels, title = _a.title, _c = _a.height, height = _c === void 0 ? 400 : _c, _d = _a.width, width = _d === void 0 ? 500 : _d, donutColors = _a.donutColors, chartColor = _a.chartColor, _e = _a.titlePosition, titlePosition = _e === void 0 ? "center" : _e, titleStyle = _a.titleStyle, _f = _a.legendPosition, legendPosition = _f === void 0 ? "bottom" : _f, legendStyle = _a.legendStyle, _g = _a.variant, variant = _g === void 0 ? "pie" : _g;
+    var theme = (0, react_2.useTheme)();
+    var palette = theme.colors;
+    var mergedTitleStyle = (0, react_1.useMemo)(function () { return (0, chartColorsFromTheme_1.mergeChartTitleStyle)(palette, titleStyle); }, [palette, titleStyle]);
+    var mergedLegendStyle = (0, react_1.useMemo)(function () {
+        var defaults = {
+            colors: palette.text[900],
+            useSeriesColors: false,
+            horizontalGap: 10,
+            verticalGap: 5,
+            markerSize: 8,
+            markerOffsetX: -5,
+            markerOffsetY: 0,
+        };
+        return __assign(__assign({}, defaults), legendStyle);
+    }, [palette, legendStyle]);
+    var seriesColors = (0, react_1.useMemo)(function () { var _a; return (_a = chartColor !== null && chartColor !== void 0 ? chartColor : donutColors) !== null && _a !== void 0 ? _a : (0, chartColorsFromTheme_1.getDefaultSeriesColors)(palette); }, [chartColor, donutColors, palette]);
+    var validLegendPosition = getValidLegendPosition(legendPosition);
+    var options = (0, react_1.useMemo)(function () {
+        var extraOptions = {};
+        switch (variant) {
+            case "semi-donut":
+                extraOptions = {
+                    plotOptions: {
+                        pie: {
+                            startAngle: -90,
+                            endAngle: 90,
+                            offsetY: 10,
+                        },
                     },
-                },
-            };
-            break;
-        case "monochrome-pie":
-            extraOptions = {
-                theme: {
-                    monochrome: {
-                        enabled: true,
-                        shadeTo: "light",
-                        shadeIntensity: 0.65,
+                };
+                break;
+            case "monochrome-pie":
+                extraOptions = {
+                    theme: {
+                        monochrome: {
+                            enabled: true,
+                            shadeTo: "light",
+                            shadeIntensity: 0.65,
+                        },
                     },
-                },
-            };
-            break;
-        case "gradient-donut":
-            extraOptions = {
-                fill: {
-                    type: "gradient",
-                },
-            };
-            break;
-        case "donut-with-pattern":
-            extraOptions = {
-                fill: {
-                    type: "pattern",
-                    pattern: {
-                        style: ["verticalLines", "squares", "horizontalLines", "circles"],
+                };
+                break;
+            case "gradient-donut":
+                extraOptions = {
+                    fill: {
+                        type: "gradient",
                     },
-                },
-            };
-            break;
-        case "pie-with-image":
-            extraOptions = {
-                fill: {
-                    type: "image",
-                    image: {
-                        src: [
-                            "https://i.imgur.com/UM3mrju.jpg",
-                            "https://i.imgur.com/NpPOqQq.jpg",
-                        ],
+                };
+                break;
+            case "donut-with-pattern":
+                extraOptions = {
+                    fill: {
+                        type: "pattern",
+                        pattern: {
+                            style: ["verticalLines", "squares", "horizontalLines", "circles"],
+                        },
                     },
-                },
-            };
-            break;
-        case "update-donut":
-            extraOptions = {
-                plotOptions: {
-                    pie: {
-                        donut: {
-                            labels: {
-                                show: true,
-                                total: {
+                };
+                break;
+            case "pie-with-image":
+                extraOptions = {
+                    fill: {
+                        type: "image",
+                        image: {
+                            src: [
+                                "https://i.imgur.com/UM3mrju.jpg",
+                                "https://i.imgur.com/NpPOqQq.jpg",
+                            ],
+                        },
+                    },
+                };
+                break;
+            case "update-donut":
+                extraOptions = {
+                    plotOptions: {
+                        pie: {
+                            donut: {
+                                labels: {
                                     show: true,
-                                    label: "Total",
+                                    total: {
+                                        show: true,
+                                        label: "Total",
+                                    },
                                 },
                             },
                         },
                     },
-                },
-            };
-            break;
-        case "pie":
-            extraOptions = {
-                chart: { type: "pie" },
-            };
-            break;
-        default:
-            break;
-    }
-    // Validate and normalize legend position
-    var getValidLegendPosition = function (position) {
-        var validPositions = ["left", "right", "top", "bottom"];
-        if (validPositions.includes(position)) {
-            return position;
+                };
+                break;
+            case "pie":
+                extraOptions = {
+                    chart: { type: "pie" },
+                };
+                break;
+            default:
+                break;
         }
-        console.warn("Invalid legend position: ".concat(position, ". Defaulting to 'bottom'."));
-        return "bottom";
-    };
-    var validLegendPosition = getValidLegendPosition(legendPosition);
-    var options = __assign({ chart: {
-            type: variant.includes("pie") ? "pie" : "donut",
-        }, labels: labels, colors: (_b = chartColor !== null && chartColor !== void 0 ? chartColor : donutColors) !== null && _b !== void 0 ? _b : ["#3182ce", "#e53e3e", "#38a169", "#dd6b20"], legend: {
-            position: validLegendPosition,
-            labels: {
-                colors: legendStyle.colors,
-                useSeriesColors: legendStyle.useSeriesColors,
-            },
-            markers: {
-                size: legendStyle.markerSize,
-                offsetX: legendStyle.markerOffsetX,
-                offsetY: legendStyle.markerOffsetY,
-                strokeWidth: 0,
-                shape: 'circle',
-            },
-            itemMargin: {
-                horizontal: legendStyle.horizontalGap,
-                vertical: legendStyle.verticalGap,
-            },
-        }, title: {
-            text: title,
-            align: titlePosition,
-            style: titleStyle,
-        }, dataLabels: { enabled: true } }, extraOptions);
+        return __assign({ chart: {
+                type: variant.includes("pie") ? "pie" : "donut",
+            }, labels: labels, colors: seriesColors, legend: {
+                position: validLegendPosition,
+                labels: {
+                    colors: mergedLegendStyle.colors,
+                    useSeriesColors: mergedLegendStyle.useSeriesColors,
+                },
+                markers: {
+                    size: mergedLegendStyle.markerSize,
+                    offsetX: mergedLegendStyle.markerOffsetX,
+                    offsetY: mergedLegendStyle.markerOffsetY,
+                    strokeWidth: 0,
+                    shape: "circle",
+                },
+                itemMargin: {
+                    horizontal: mergedLegendStyle.horizontalGap,
+                    vertical: mergedLegendStyle.verticalGap,
+                },
+            }, title: {
+                text: title,
+                align: titlePosition,
+                style: mergedTitleStyle,
+            }, dataLabels: { enabled: true } }, extraOptions);
+    }, [
+        variant,
+        labels,
+        seriesColors,
+        validLegendPosition,
+        mergedLegendStyle,
+        title,
+        titlePosition,
+        mergedTitleStyle,
+    ]);
     return (react_1.default.createElement("div", null,
-        react_1.default.createElement(react_apexcharts_1.default, { options: options, series: data, type: (_c = options.chart) === null || _c === void 0 ? void 0 : _c.type, height: height, width: width })));
+        react_1.default.createElement(react_apexcharts_1.default, { options: options, series: data, type: (_b = options.chart) === null || _b === void 0 ? void 0 : _b.type, height: height, width: width })));
 };
 exports.default = ApexPieChart;