pixelize-design-library 2.2.11-test-5 → 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) {
|
|
@@ -33,11 +119,99 @@ var ApexPieChart = function (_a) {
|
|
|
33
119
|
markerOffsetY: 0,
|
|
34
120
|
} : _j, _k = _a.variant, variant = _k === void 0 ? "pie" : _k;
|
|
35
121
|
var extraOptions = {};
|
|
36
|
-
//
|
|
122
|
+
// Your switch cases for different variants
|
|
123
|
+
switch (variant) {
|
|
124
|
+
case "semi-donut":
|
|
125
|
+
extraOptions = {
|
|
126
|
+
plotOptions: {
|
|
127
|
+
pie: {
|
|
128
|
+
startAngle: -90,
|
|
129
|
+
endAngle: 90,
|
|
130
|
+
offsetY: 10,
|
|
131
|
+
},
|
|
132
|
+
},
|
|
133
|
+
};
|
|
134
|
+
break;
|
|
135
|
+
case "monochrome-pie":
|
|
136
|
+
extraOptions = {
|
|
137
|
+
theme: {
|
|
138
|
+
monochrome: {
|
|
139
|
+
enabled: true,
|
|
140
|
+
shadeTo: "light",
|
|
141
|
+
shadeIntensity: 0.65,
|
|
142
|
+
},
|
|
143
|
+
},
|
|
144
|
+
};
|
|
145
|
+
break;
|
|
146
|
+
case "gradient-donut":
|
|
147
|
+
extraOptions = {
|
|
148
|
+
fill: {
|
|
149
|
+
type: "gradient",
|
|
150
|
+
},
|
|
151
|
+
};
|
|
152
|
+
break;
|
|
153
|
+
case "donut-with-pattern":
|
|
154
|
+
extraOptions = {
|
|
155
|
+
fill: {
|
|
156
|
+
type: "pattern",
|
|
157
|
+
pattern: {
|
|
158
|
+
style: ["verticalLines", "squares", "horizontalLines", "circles"],
|
|
159
|
+
},
|
|
160
|
+
},
|
|
161
|
+
};
|
|
162
|
+
break;
|
|
163
|
+
case "pie-with-image":
|
|
164
|
+
extraOptions = {
|
|
165
|
+
fill: {
|
|
166
|
+
type: "image",
|
|
167
|
+
image: {
|
|
168
|
+
src: [
|
|
169
|
+
"https://i.imgur.com/UM3mrju.jpg",
|
|
170
|
+
"https://i.imgur.com/NpPOqQq.jpg",
|
|
171
|
+
],
|
|
172
|
+
},
|
|
173
|
+
},
|
|
174
|
+
};
|
|
175
|
+
break;
|
|
176
|
+
case "update-donut":
|
|
177
|
+
extraOptions = {
|
|
178
|
+
plotOptions: {
|
|
179
|
+
pie: {
|
|
180
|
+
donut: {
|
|
181
|
+
labels: {
|
|
182
|
+
show: true,
|
|
183
|
+
total: {
|
|
184
|
+
show: true,
|
|
185
|
+
label: "Total",
|
|
186
|
+
},
|
|
187
|
+
},
|
|
188
|
+
},
|
|
189
|
+
},
|
|
190
|
+
},
|
|
191
|
+
};
|
|
192
|
+
break;
|
|
193
|
+
case "pie":
|
|
194
|
+
extraOptions = {
|
|
195
|
+
chart: { type: "pie" },
|
|
196
|
+
};
|
|
197
|
+
break;
|
|
198
|
+
default:
|
|
199
|
+
break;
|
|
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);
|
|
37
211
|
var options = __assign({ chart: {
|
|
38
212
|
type: variant.includes("pie") ? "pie" : "donut",
|
|
39
213
|
}, labels: labels, colors: (_b = chartColor !== null && chartColor !== void 0 ? chartColor : donutColors) !== null && _b !== void 0 ? _b : ["#3182ce", "#e53e3e", "#38a169", "#dd6b20"], legend: {
|
|
40
|
-
position:
|
|
214
|
+
position: validLegendPosition,
|
|
41
215
|
labels: {
|
|
42
216
|
colors: legendStyle.colors,
|
|
43
217
|
useSeriesColors: legendStyle.useSeriesColors,
|
|
@@ -48,18 +222,11 @@ var ApexPieChart = function (_a) {
|
|
|
48
222
|
offsetY: legendStyle.markerOffsetY,
|
|
49
223
|
strokeWidth: 0,
|
|
50
224
|
shape: 'circle',
|
|
51
|
-
// ✅ You can also customize the stroke color and width
|
|
52
|
-
// strokeColor: '#000',
|
|
53
|
-
// strokeWidth: 1,
|
|
54
225
|
},
|
|
55
226
|
itemMargin: {
|
|
56
227
|
horizontal: legendStyle.horizontalGap,
|
|
57
|
-
vertical: legendStyle.verticalGap,
|
|
228
|
+
vertical: legendStyle.verticalGap,
|
|
58
229
|
},
|
|
59
|
-
// containerMargin: {
|
|
60
|
-
// left: 0,
|
|
61
|
-
// top: 0,
|
|
62
|
-
// },
|
|
63
230
|
}, title: {
|
|
64
231
|
text: title,
|
|
65
232
|
align: titlePosition,
|
|
@@ -14,7 +14,7 @@ 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;
|