pixelize-design-library 2.2.11-test-4 → 2.2.11-test-6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,4 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
// import React, { useEffect, useRef, useState } from "react";
|
|
3
|
+
// import ReactApexChart from "react-apexcharts";
|
|
4
|
+
// import { ApexOptions } from "apexcharts";
|
|
5
|
+
// import { ApexLineChartProps } from "./ApexLineChartProps";
|
|
2
6
|
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
7
|
if (k2 === undefined) k2 = k;
|
|
4
8
|
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
@@ -35,6 +39,84 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
35
39
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
36
40
|
};
|
|
37
41
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
42
|
+
// const ApexLineChart = ({
|
|
43
|
+
// data,
|
|
44
|
+
// labels,
|
|
45
|
+
// title,
|
|
46
|
+
// height = 400,
|
|
47
|
+
// width = 600,
|
|
48
|
+
// lineColors = ["#3182ce", "#e53e3e", "#38a169"],
|
|
49
|
+
// titlePosition = "center",
|
|
50
|
+
// titleStyle = {
|
|
51
|
+
// color: "#3182ce",
|
|
52
|
+
// fontSize: "16px",
|
|
53
|
+
// fontWeight: 600,
|
|
54
|
+
// fontFamily: "Arial",
|
|
55
|
+
// },
|
|
56
|
+
// variant = "basic",
|
|
57
|
+
// }: ApexLineChartProps) => {
|
|
58
|
+
// const [series, setSeries] = useState([
|
|
59
|
+
// {
|
|
60
|
+
// name: "Series 1",
|
|
61
|
+
// data: Array.isArray(data) ? data : [],
|
|
62
|
+
// },
|
|
63
|
+
// ]);
|
|
64
|
+
// const chartRef = useRef<ReactApexChart | null>(null);
|
|
65
|
+
// // 🔄 Handle realtime updates
|
|
66
|
+
// useEffect(() => {
|
|
67
|
+
// if (variant === "realtime") {
|
|
68
|
+
// const interval = setInterval(() => {
|
|
69
|
+
// setSeries((prev) => {
|
|
70
|
+
// const newData = [...prev[0].data];
|
|
71
|
+
// newData.push(Math.floor(Math.random() * 100) + 10); // simulate
|
|
72
|
+
// if (newData.length > 20) newData.shift(); // keep window size
|
|
73
|
+
// return [{ name: "Series 1", data: newData }];
|
|
74
|
+
// });
|
|
75
|
+
// }, 1000);
|
|
76
|
+
// return () => clearInterval(interval);
|
|
77
|
+
// }
|
|
78
|
+
// }, [variant]);
|
|
79
|
+
// const options: ApexOptions = {
|
|
80
|
+
// chart: {
|
|
81
|
+
// type: "line",
|
|
82
|
+
// animations:
|
|
83
|
+
// variant === "realtime"
|
|
84
|
+
// ? {
|
|
85
|
+
// enabled: true,
|
|
86
|
+
// speed: 1000, // ✅ allowed
|
|
87
|
+
// dynamicAnimation: { speed: 1000 }, // ✅ allowed
|
|
88
|
+
// }
|
|
89
|
+
// : { enabled: false },
|
|
90
|
+
// zoom: { enabled: true },
|
|
91
|
+
// toolbar: { show: true },
|
|
92
|
+
// },
|
|
93
|
+
// stroke: { curve: "smooth" },
|
|
94
|
+
// colors: lineColors,
|
|
95
|
+
// xaxis: labels
|
|
96
|
+
// ? { categories: labels }
|
|
97
|
+
// : { type: variant === "realtime" ? "numeric" : "category" },
|
|
98
|
+
// title: {
|
|
99
|
+
// text: title,
|
|
100
|
+
// align: titlePosition ?? "center",
|
|
101
|
+
// style: titleStyle,
|
|
102
|
+
// },
|
|
103
|
+
// markers: { size: 4 },
|
|
104
|
+
// dataLabels: { enabled: false },
|
|
105
|
+
// };
|
|
106
|
+
// return (
|
|
107
|
+
// <div>
|
|
108
|
+
// <ReactApexChart
|
|
109
|
+
// ref={chartRef}
|
|
110
|
+
// options={options}
|
|
111
|
+
// series={series}
|
|
112
|
+
// type="line"
|
|
113
|
+
// height={height}
|
|
114
|
+
// width={width}
|
|
115
|
+
// />
|
|
116
|
+
// </div>
|
|
117
|
+
// );
|
|
118
|
+
// };
|
|
119
|
+
// export default ApexLineChart;
|
|
38
120
|
var react_1 = __importStar(require("react"));
|
|
39
121
|
var react_apexcharts_1 = __importDefault(require("react-apexcharts"));
|
|
40
122
|
var ApexLineChart = function (_a) {
|
|
@@ -50,7 +132,6 @@ var ApexLineChart = function (_a) {
|
|
|
50
132
|
data: Array.isArray(data) ? data : [],
|
|
51
133
|
},
|
|
52
134
|
]), series = _h[0], setSeries = _h[1];
|
|
53
|
-
var chartRef = (0, react_1.useRef)(null);
|
|
54
135
|
// 🔄 Handle realtime updates
|
|
55
136
|
(0, react_1.useEffect)(function () {
|
|
56
137
|
if (variant === "realtime") {
|
|
@@ -73,7 +154,7 @@ var ApexLineChart = function (_a) {
|
|
|
73
154
|
? {
|
|
74
155
|
enabled: true,
|
|
75
156
|
speed: 1000,
|
|
76
|
-
dynamicAnimation: { speed: 1000 },
|
|
157
|
+
dynamicAnimation: { speed: 1000 },
|
|
77
158
|
}
|
|
78
159
|
: { enabled: false },
|
|
79
160
|
zoom: { enabled: true },
|
|
@@ -93,6 +174,6 @@ var ApexLineChart = function (_a) {
|
|
|
93
174
|
dataLabels: { enabled: false },
|
|
94
175
|
};
|
|
95
176
|
return (react_1.default.createElement("div", null,
|
|
96
|
-
react_1.default.createElement(react_apexcharts_1.default, {
|
|
177
|
+
react_1.default.createElement(react_apexcharts_1.default, { options: options, series: series, type: "line", height: height, width: width })));
|
|
97
178
|
};
|
|
98
179
|
exports.default = ApexLineChart;
|
|
@@ -1,4 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
// import React from "react";
|
|
3
|
+
// import ReactApexChart from "react-apexcharts";
|
|
4
|
+
// import { ApexOptions } from "apexcharts";
|
|
5
|
+
// import { ApexPieChartProps } from "./ApexPieChartProps";
|
|
2
6
|
var __assign = (this && this.__assign) || function () {
|
|
3
7
|
__assign = Object.assign || function(t) {
|
|
4
8
|
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
@@ -14,6 +18,88 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
14
18
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
19
|
};
|
|
16
20
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
21
|
+
// const ApexPieChart = ({
|
|
22
|
+
// data,
|
|
23
|
+
// labels,
|
|
24
|
+
// title,
|
|
25
|
+
// height = 400,
|
|
26
|
+
// width = 500,
|
|
27
|
+
// donutColors,
|
|
28
|
+
// chartColor,
|
|
29
|
+
// titlePosition = "center",
|
|
30
|
+
// titleStyle = {
|
|
31
|
+
// color: "#3182ce",
|
|
32
|
+
// fontSize: "16px",
|
|
33
|
+
// fontWeight: 600,
|
|
34
|
+
// fontFamily: "Arial",
|
|
35
|
+
// },
|
|
36
|
+
// legendPosition = "bottom",
|
|
37
|
+
// legendStyle = {
|
|
38
|
+
// colors: "#000",
|
|
39
|
+
// useSeriesColors: false,
|
|
40
|
+
// horizontalGap: 10,
|
|
41
|
+
// verticalGap: 5,
|
|
42
|
+
// markerSize: 8,
|
|
43
|
+
// markerOffsetX: -5, // ✅ This controls space between circle and text
|
|
44
|
+
// markerOffsetY: 0,
|
|
45
|
+
// },
|
|
46
|
+
// variant = "pie",
|
|
47
|
+
// }: ApexPieChartProps) => {
|
|
48
|
+
// let extraOptions: ApexOptions = {};
|
|
49
|
+
// // ... (your existing switch cases remain the same)
|
|
50
|
+
// const options: ApexOptions = {
|
|
51
|
+
// chart: {
|
|
52
|
+
// type: variant.includes("pie") ? "pie" : "donut",
|
|
53
|
+
// },
|
|
54
|
+
// labels,
|
|
55
|
+
// colors: chartColor ??
|
|
56
|
+
// donutColors ?? ["#3182ce", "#e53e3e", "#38a169", "#dd6b20"],
|
|
57
|
+
// legend: {
|
|
58
|
+
// position: legendPosition,
|
|
59
|
+
// labels: {
|
|
60
|
+
// colors: legendStyle.colors,
|
|
61
|
+
// useSeriesColors: legendStyle.useSeriesColors,
|
|
62
|
+
// },
|
|
63
|
+
// markers: {
|
|
64
|
+
// size: legendStyle.markerSize,
|
|
65
|
+
// offsetX: legendStyle.markerOffsetX, // ✅ Controls horizontal space between circle and text
|
|
66
|
+
// offsetY: legendStyle.markerOffsetY, // ✅ Controls vertical alignment
|
|
67
|
+
// strokeWidth: 0,
|
|
68
|
+
// shape: 'circle',
|
|
69
|
+
// // ✅ You can also customize the stroke color and width
|
|
70
|
+
// // strokeColor: '#000',
|
|
71
|
+
// // strokeWidth: 1,
|
|
72
|
+
// },
|
|
73
|
+
// itemMargin: {
|
|
74
|
+
// horizontal: legendStyle.horizontalGap, // Space between different legend items
|
|
75
|
+
// vertical: legendStyle.verticalGap, // Space between legend rows
|
|
76
|
+
// },
|
|
77
|
+
// // containerMargin: {
|
|
78
|
+
// // left: 0,
|
|
79
|
+
// // top: 0,
|
|
80
|
+
// // },
|
|
81
|
+
// },
|
|
82
|
+
// title: {
|
|
83
|
+
// text: title,
|
|
84
|
+
// align: titlePosition,
|
|
85
|
+
// style: titleStyle,
|
|
86
|
+
// },
|
|
87
|
+
// dataLabels: { enabled: true },
|
|
88
|
+
// ...extraOptions,
|
|
89
|
+
// };
|
|
90
|
+
// return (
|
|
91
|
+
// <div>
|
|
92
|
+
// <ReactApexChart
|
|
93
|
+
// options={options}
|
|
94
|
+
// series={data}
|
|
95
|
+
// type={options.chart?.type as "pie" | "donut"}
|
|
96
|
+
// height={height}
|
|
97
|
+
// width={width}
|
|
98
|
+
// />
|
|
99
|
+
// </div>
|
|
100
|
+
// );
|
|
101
|
+
// };
|
|
102
|
+
// export default ApexPieChart;
|
|
17
103
|
var react_1 = __importDefault(require("react"));
|
|
18
104
|
var react_apexcharts_1 = __importDefault(require("react-apexcharts"));
|
|
19
105
|
var ApexPieChart = function (_a) {
|
|
@@ -26,8 +112,14 @@ var ApexPieChart = function (_a) {
|
|
|
26
112
|
} : _g, _h = _a.legendPosition, legendPosition = _h === void 0 ? "bottom" : _h, _j = _a.legendStyle, legendStyle = _j === void 0 ? {
|
|
27
113
|
colors: "#000",
|
|
28
114
|
useSeriesColors: false,
|
|
115
|
+
horizontalGap: 10,
|
|
116
|
+
verticalGap: 5,
|
|
117
|
+
markerSize: 8,
|
|
118
|
+
markerOffsetX: -5,
|
|
119
|
+
markerOffsetY: 0,
|
|
29
120
|
} : _j, _k = _a.variant, variant = _k === void 0 ? "pie" : _k;
|
|
30
121
|
var extraOptions = {};
|
|
122
|
+
// Your switch cases for different variants
|
|
31
123
|
switch (variant) {
|
|
32
124
|
case "semi-donut":
|
|
33
125
|
extraOptions = {
|
|
@@ -106,22 +198,34 @@ var ApexPieChart = function (_a) {
|
|
|
106
198
|
default:
|
|
107
199
|
break;
|
|
108
200
|
}
|
|
201
|
+
// Validate and normalize legend position
|
|
202
|
+
var getValidLegendPosition = function (position) {
|
|
203
|
+
var validPositions = ["left", "right", "top", "bottom"];
|
|
204
|
+
if (validPositions.includes(position)) {
|
|
205
|
+
return position;
|
|
206
|
+
}
|
|
207
|
+
console.warn("Invalid legend position: ".concat(position, ". Defaulting to 'bottom'."));
|
|
208
|
+
return "bottom";
|
|
209
|
+
};
|
|
210
|
+
var validLegendPosition = getValidLegendPosition(legendPosition);
|
|
109
211
|
var options = __assign({ chart: {
|
|
110
212
|
type: variant.includes("pie") ? "pie" : "donut",
|
|
111
213
|
}, labels: labels, colors: (_b = chartColor !== null && chartColor !== void 0 ? chartColor : donutColors) !== null && _b !== void 0 ? _b : ["#3182ce", "#e53e3e", "#38a169", "#dd6b20"], legend: {
|
|
112
|
-
position:
|
|
214
|
+
position: validLegendPosition,
|
|
113
215
|
labels: {
|
|
114
216
|
colors: legendStyle.colors,
|
|
115
217
|
useSeriesColors: legendStyle.useSeriesColors,
|
|
116
218
|
},
|
|
117
219
|
markers: {
|
|
118
|
-
size:
|
|
119
|
-
offsetX:
|
|
120
|
-
offsetY:
|
|
220
|
+
size: legendStyle.markerSize,
|
|
221
|
+
offsetX: legendStyle.markerOffsetX,
|
|
222
|
+
offsetY: legendStyle.markerOffsetY,
|
|
223
|
+
strokeWidth: 0,
|
|
224
|
+
shape: 'circle',
|
|
121
225
|
},
|
|
122
226
|
itemMargin: {
|
|
123
|
-
horizontal:
|
|
124
|
-
vertical:
|
|
227
|
+
horizontal: legendStyle.horizontalGap,
|
|
228
|
+
vertical: legendStyle.verticalGap,
|
|
125
229
|
},
|
|
126
230
|
}, title: {
|
|
127
231
|
text: title,
|
|
@@ -14,10 +14,15 @@ export type ApexPieChartProps = {
|
|
|
14
14
|
fontWeight?: number | string;
|
|
15
15
|
fontFamily?: string;
|
|
16
16
|
};
|
|
17
|
-
legendPosition?: "
|
|
17
|
+
legendPosition?: "left" | "right" | "top" | "bottom";
|
|
18
18
|
legendStyle?: {
|
|
19
19
|
colors?: string | string[];
|
|
20
20
|
useSeriesColors?: boolean;
|
|
21
|
+
horizontalGap?: number;
|
|
22
|
+
verticalGap?: number;
|
|
23
|
+
markerSize?: number;
|
|
24
|
+
markerOffsetX?: number;
|
|
25
|
+
markerOffsetY?: number;
|
|
21
26
|
};
|
|
22
27
|
};
|
|
23
28
|
export type DonutPieVariant = "pie" | "donut" | "update-donut" | "monochrome-pie" | "gradient-donut" | "semi-donut" | "donut-with-pattern" | "pie-with-image";
|