pixelize-design-library 2.1.74 → 2.1.75

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.
Files changed (8) hide show
  1. package/dist/Components/Apexcharts/ApexPieChart/ApexPieChart.d.ts +2 -1
  2. package/dist/Components/Apexcharts/ApexPieChart/ApexPieChart.js +113 -16
  3. package/dist/Components/Apexcharts/ApexPieChart/ApexPieChartProps.d.ts +15 -33
  4. package/dist/Components/NoteTextArea/NoteTextArea.js +0 -381
  5. package/dist/Pages/chart.js +11 -5
  6. package/dist/index.d.ts +1 -2
  7. package/dist/index.js +2 -4
  8. package/package.json +1 -1
package/dist/Components/Apexcharts/ApexPieChart/ApexPieChart.d.ts CHANGED
@@ -1,3 +1,4 @@
1
1
  import React from "react";
2
2
  import { ApexPieChartProps } from "./ApexPieChartProps";
3
- export default function ApexPieChart({ data, labels, title, titlePosition, height, width, chartColor, titleStyle, }: ApexPieChartProps): React.JSX.Element;
3
+ declare const ApexPieChart: ({ data, labels, title, height, width, donutColors, chartColor, titlePosition, titleStyle, legendStyle, variant, }: ApexPieChartProps) => React.JSX.Element;
4
+ export default ApexPieChart;
package/dist/Components/Apexcharts/ApexPieChart/ApexPieChart.js CHANGED
@@ -1,29 +1,126 @@
1
1
  "use strict";
2
+ var __assign = (this && this.__assign) || function () {
3
+ __assign = Object.assign || function(t) {
4
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
5
+ s = arguments[i];
6
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
+ t[p] = s[p];
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
12
+ };
2
13
  var __importDefault = (this && this.__importDefault) || function (mod) {
3
14
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
15
  };
5
16
  Object.defineProperty(exports, "__esModule", { value: true });
6
17
  var react_1 = __importDefault(require("react"));
7
18
  var react_apexcharts_1 = __importDefault(require("react-apexcharts"));
8
- function ApexPieChart(_a) {
9
- 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, chartColor = _a.chartColor, _d = _a.titleStyle, titleStyle = _d === void 0 ? {
19
+ var ApexPieChart = function (_a) {
20
+ var _b, _c;
21
+ 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 ? {
10
22
  color: "#3182ce",
11
- } : _d;
12
- var options = {
13
- chart: {
14
- type: "pie",
15
- height: 350,
16
- },
17
- labels: labels,
18
- title: {
23
+ fontSize: "16px",
24
+ fontWeight: 600,
25
+ fontFamily: "Arial",
26
+ } : _g, _h = _a.legendStyle, legendStyle = _h === void 0 ? {
27
+ colors: "#000",
28
+ position: "bottom",
29
+ useSeriesColors: false,
30
+ } : _h, _j = _a.variant, variant = _j === void 0 ? "pie" : _j;
31
+ var extraOptions = {};
32
+ switch (variant) {
33
+ case "semi-donut":
34
+ extraOptions = {
35
+ plotOptions: {
36
+ pie: {
37
+ startAngle: -90,
38
+ endAngle: 90,
39
+ offsetY: 10,
40
+ },
41
+ },
42
+ };
43
+ break;
44
+ case "monochrome-pie":
45
+ extraOptions = {
46
+ theme: {
47
+ monochrome: {
48
+ enabled: true,
49
+ shadeTo: "light",
50
+ shadeIntensity: 0.65,
51
+ },
52
+ },
53
+ };
54
+ break;
55
+ case "gradient-donut":
56
+ extraOptions = {
57
+ fill: {
58
+ type: "gradient",
59
+ },
60
+ };
61
+ break;
62
+ case "donut-with-pattern":
63
+ extraOptions = {
64
+ fill: {
65
+ type: "pattern",
66
+ pattern: {
67
+ style: ["verticalLines", "squares", "horizontalLines", "circles"],
68
+ },
69
+ },
70
+ };
71
+ break;
72
+ case "pie-with-image":
73
+ extraOptions = {
74
+ fill: {
75
+ type: "image",
76
+ image: {
77
+ src: [
78
+ "https://i.imgur.com/UM3mrju.jpg",
79
+ "https://i.imgur.com/NpPOqQq.jpg",
80
+ ],
81
+ },
82
+ },
83
+ };
84
+ break;
85
+ case "update-donut":
86
+ extraOptions = {
87
+ plotOptions: {
88
+ pie: {
89
+ donut: {
90
+ labels: {
91
+ show: true,
92
+ total: {
93
+ show: true,
94
+ label: "Total",
95
+ },
96
+ },
97
+ },
98
+ },
99
+ },
100
+ };
101
+ break;
102
+ case "pie":
103
+ extraOptions = {
104
+ chart: { type: "pie" },
105
+ };
106
+ break;
107
+ default:
108
+ break;
109
+ }
110
+ var options = __assign({ chart: {
111
+ type: variant.includes("pie") ? "pie" : "donut",
112
+ }, labels: labels, colors: (_b = chartColor !== null && chartColor !== void 0 ? chartColor : donutColors) !== null && _b !== void 0 ? _b : ["#3182ce", "#e53e3e", "#38a169", "#dd6b20"], legend: {
113
+ position: legendStyle.position,
114
+ labels: {
115
+ colors: legendStyle.colors,
116
+ useSeriesColors: legendStyle.useSeriesColors,
117
+ },
118
+ }, title: {
19
119
  text: title,
20
120
  align: titlePosition,
21
121
  style: titleStyle,
22
- },
23
- colors: chartColor,
24
- };
25
- var series = data;
122
+ }, dataLabels: { enabled: true } }, extraOptions);
26
123
  return (react_1.default.createElement("div", null,
27
- react_1.default.createElement(react_apexcharts_1.default, { options: options, series: series, type: "pie", height: height, width: width })));
28
- }
124
+ 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 })));
125
+ };
29
126
  exports.default = ApexPieChart;
package/dist/Components/Apexcharts/ApexPieChart/ApexPieChartProps.d.ts CHANGED
@@ -1,41 +1,23 @@
1
1
  export type ApexPieChartProps = {
2
+ variant?: DonutPieVariant;
2
3
  data: number[];
3
4
  labels: string[];
4
5
  title?: string;
5
- titlePosition?: "left" | "center" | "right";
6
6
  height?: number;
7
7
  width?: number;
8
+ donutColors?: string[];
8
9
  chartColor?: string[];
9
- titleStyle?: StyleProps;
10
- };
11
- type StyleProps = {
12
- fontSize?: string;
13
- fontFamily?: string;
14
- fontWeight?: string | number;
15
- color?: string;
10
+ titlePosition?: "left" | "center" | "right";
11
+ titleStyle?: {
12
+ color?: string;
13
+ fontSize?: string;
14
+ fontWeight?: number | string;
15
+ fontFamily?: string;
16
+ };
17
+ legendStyle?: {
18
+ colors?: string | string[];
19
+ useSeriesColors?: boolean;
20
+ position?: "top" | "right" | "bottom" | "left";
21
+ };
16
22
  };
17
- export interface ApexOptions {
18
- annotations?: ApexAnnotations;
19
- chart?: ApexChart;
20
- colors?: any[];
21
- dataLabels?: ApexDataLabels;
22
- fill?: ApexFill;
23
- forecastDataPoints?: ApexForecastDataPoints;
24
- grid?: ApexGrid;
25
- labels?: string[];
26
- legend?: ApexLegend;
27
- markers?: ApexMarkers;
28
- noData?: ApexNoData;
29
- plotOptions?: ApexPlotOptions;
30
- responsive?: ApexResponsive[];
31
- series?: ApexAxisChartSeries | ApexNonAxisChartSeries;
32
- states?: ApexStates;
33
- stroke?: ApexStroke;
34
- subtitle?: ApexTitleSubtitle;
35
- theme?: ApexTheme;
36
- title?: ApexTitleSubtitle;
37
- tooltip?: ApexTooltip;
38
- xaxis?: ApexXAxis;
39
- yaxis?: ApexYAxis | ApexYAxis[];
40
- }
41
- export {};
23
+ export type DonutPieVariant = "pie" | "donut" | "update-donut" | "monochrome-pie" | "gradient-donut" | "semi-donut" | "donut-with-pattern" | "pie-with-image";
package/dist/Components/NoteTextArea/NoteTextArea.js CHANGED
@@ -1,11 +1,4 @@
1
1
  "use strict";
2
- // import React, { useEffect, useRef, useState } from "react";
3
- // import { NoteTextAreaProps } from "./NoteTextAreaProps";
4
- // import styled from "@emotion/styled";
5
- // import { Spinner } from "@chakra-ui/react";
6
- // import { CustomThemeProps } from "../../Theme/themeProps";
7
- // import { useCustomTheme } from "../../Theme/useCustomTheme";
8
- // import { Paperclip, X } from "lucide-react";
9
2
  var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
10
3
  if (k2 === undefined) k2 = k;
11
4
  var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -39,380 +32,6 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
39
32
  return to.concat(ar || Array.prototype.slice.call(from));
40
33
  };
41
34
  Object.defineProperty(exports, "__esModule", { value: true });
42
- // const Container = styled.div<{ isActive: boolean }>`
43
- // border: ${({ isActive }) =>
44
- // isActive ? "1px solid #3182ce" : "1px solid #c0c6cc"};
45
- // border-radius: 5px;
46
- // box-shadow: ${({ isActive }) =>
47
- // isActive
48
- // ? "-1px 1px 8px 4px rgb(49 130 206 / 24%), 0px 2px 6px 0 rgb(49 130 206 / 19%)"
49
- // : "none"};
50
- // `;
51
- // const TextAreaContainer = styled.div<{ isActive: boolean }>`
52
- // width: 100%;
53
- // cursor: text;
54
- // padding: 12px 15px;
55
- // display: ${({ isActive }) => (isActive ? "block" : "none")};
56
- // `;
57
- // const PlaceholderText = styled.div<{ isActive: boolean }>`
58
- // color: #c0c6cc;
59
- // width: 100%;
60
- // cursor: text;
61
- // display: ${({ isActive }) => (isActive ? "block" : "none")};
62
- // padding: 12px 15px;
63
- // `;
64
- // const InputTitle = styled.input`
65
- // width: 100%;
66
- // height: auto;
67
- // border: none;
68
- // outline: none;
69
- // background: none;
70
- // color: black;
71
- // fontsize: 1rem;
72
- // fontweight: 500;
73
- // marginbottom: 2px;
74
- // `;
75
- // const NotesTextArea = styled.textarea<{ isActive: boolean; noteValue: string }>`
76
- // color: ${({ isActive, noteValue }) =>
77
- // isActive && noteValue ? "#000000" : "#c0c6cc"};
78
- // width: 100%;
79
- // height: auto;
80
- // border: none;
81
- // outline: none;
82
- // background: none;
83
- // fontweight: 300;
84
- // `;
85
- // const FileUploadLabel = styled.label`
86
- // cursor: pointer;
87
- // `;
88
- // const AddTitleButton = styled.div`
89
- // color: #616e88;
90
- // cursor: pointer;
91
- // fontsize: 0.8rem;
92
- // `;
93
- // const Button = styled.button<{
94
- // noteValue: string;
95
- // isSaveButton: boolean;
96
- // isLoading: boolean;
97
- // theme: CustomThemeProps;
98
- // disabled: boolean;
99
- // }>`
100
- // border: none;
101
- // padding: 3px 15px;
102
- // text-align: center;
103
- // text-decoration: none;
104
- // background: ${({ isSaveButton, noteValue, isLoading, theme }) =>
105
- // isSaveButton
106
- // ? noteValue && !isLoading
107
- // ? theme.colors.primary[500]
108
- // : theme.colors.primary[500]
109
- // : "white"};
110
- // color: ${({ isSaveButton, isLoading }) =>
111
- // isSaveButton && !isLoading ? "white" : "white"};
112
- // font-size: 1rem;
113
- // margin-right: 5px;
114
- // border-radius: 5px;
115
- // opacity: ${({ isSaveButton, noteValue, isLoading, disabled }) =>
116
- // isSaveButton && (!noteValue || isLoading || disabled) ? "0.5" : "1"};
117
- // cursor: ${({ isSaveButton, noteValue, isLoading, disabled }) =>
118
- // isSaveButton && (!noteValue || isLoading || disabled)
119
- // ? "initial"
120
- // : "pointer"};
121
- // pointer-events: ${({ isLoading }) => (isLoading ? "none" : "auto")};
122
- // `;
123
- // const CancelButton = styled.button`
124
- // border: none;
125
- // color: #5e5c5c;
126
- // padding: 3px 15px;
127
- // text-align: center;
128
- // text-decoration: none;
129
- // background: white;
130
- // font-size: 1rem;
131
- // margin-right: 5px;
132
- // border-radius: 5px;
133
- // `;
134
- // const FileViewer = styled.div`
135
- // display: flex;
136
- // align-items: center;
137
- // justify-content: space-between;
138
- // width: 300px;
139
- // `;
140
- // const FileEdit = styled(X)`
141
- // cursor: pointer;
142
- // color: #ff0000;
143
- // `;
144
- // const ErrorText = styled.div`
145
- // color: #ff0000;
146
- // font-size: 0.8rem;
147
- // margin-top: 8px;
148
- // `;
149
- // const countWords = (text: string) => {
150
- // return text.trim().split(/\s+/).length;
151
- // };
152
- // export default function NoteTextArea({
153
- // width = "100%",
154
- // handleSubmit,
155
- // handleCancel,
156
- // value,
157
- // title,
158
- // file,
159
- // isEditable = false,
160
- // saveButtonLoading,
161
- // maxFileSize = 1 * 1024 * 1024,
162
- // maxFilesSizeError = "Some files are too large. Maximum allowed size is",
163
- // maxNoteWordCount = 15,
164
- // onChange,
165
- // ref,
166
- // }: NoteTextAreaProps) {
167
- // const theme = useCustomTheme();
168
- // const noteAreaRef = useRef<HTMLTextAreaElement>(null);
169
- // const [isActive, setIsActive] = useState<boolean>(false);
170
- // const [noteValue, setNoteValue] = useState<string>("");
171
- // const [titleValue, setTitleValue] = useState<string>("");
172
- // const [titleShow, setTitleShow] = useState<boolean>(false);
173
- // const [files, setFiles] = useState<File[]>([]);
174
- // const [fileError, setFileError] = useState<string>("");
175
- // const [isSaveDisabled, setIsSaveDisabled] = useState(false);
176
- // useEffect(() => {
177
- // const titleWordCount = countWords(titleValue);
178
- // setIsSaveDisabled(titleWordCount > maxNoteWordCount);
179
- // }, [titleValue, maxNoteWordCount]);
180
- // useEffect(() => {
181
- // const noteWordCount = countWords(noteValue);
182
- // setIsSaveDisabled(noteWordCount > maxNoteWordCount);
183
- // }, [noteValue, maxNoteWordCount]);
184
- // useEffect(() => {
185
- // if (isEditable) {
186
- // setIsActive(true);
187
- // if (value) {
188
- // setNoteValue(value);
189
- // }
190
- // if (title) {
191
- // setTitleValue(title);
192
- // setTitleShow(true);
193
- // }
194
- // if (file) {
195
- // setFiles(file);
196
- // }
197
- // }
198
- // }, [value, title, file, isEditable]);
199
- // useEffect(() => {
200
- // if (!saveButtonLoading) {
201
- // setIsActive(false);
202
- // if (!isEditable) {
203
- // setNoteValue("");
204
- // setTitleValue("");
205
- // setTitleShow(false);
206
- // setFiles([]);
207
- // }
208
- // }
209
- // if (isEditable) {
210
- // setIsActive(true);
211
- // }
212
- // }, [saveButtonLoading, isEditable]);
213
- // const handleTextArea = () => {
214
- // setIsActive(true);
215
- // if (!isEditable) {
216
- // setNoteValue("");
217
- // setTitleValue("");
218
- // setTitleShow(false);
219
- // setFiles([]);
220
- // }
221
- // };
222
- // const handleCloseTextArea = () => {
223
- // setIsActive(false);
224
- // if (handleCancel) {
225
- // handleCancel(!isActive);
226
- // }
227
- // if (!isEditable) {
228
- // setNoteValue("");
229
- // setTitleValue("");
230
- // setTitleShow(false);
231
- // setFiles([]);
232
- // }
233
- // setFileError("");
234
- // };
235
- // const handleNoteChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
236
- // setNoteValue(event.target.value);
237
- // onChange?.(event.target.value);
238
- // adjustHeight();
239
- // };
240
- // useEffect(() => {
241
- // if (isActive && noteAreaRef.current) {
242
- // noteAreaRef.current.focus();
243
- // }
244
- // }, [isActive]);
245
- // const adjustHeight = () => {
246
- // const textarea = noteAreaRef.current;
247
- // if (!textarea) return;
248
- // textarea.style.height = "auto";
249
- // textarea.style.height = `${textarea.scrollHeight}px`;
250
- // };
251
- // const handleSetTitle = () => {
252
- // setTitleShow(true);
253
- // };
254
- // const handleTitleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
255
- // event.target.value.length === 0 && setTitleShow(false);
256
- // setTitleValue(event.target.value);
257
- // };
258
- // const formatBytes = (bytes: any, decimals = 2) => {
259
- // if (bytes === 0) return "0 Bytes";
260
- // const k = 1024;
261
- // const dm = decimals < 0 ? 0 : decimals;
262
- // const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
263
- // const i = Math.floor(Math.log(bytes) / Math.log(k));
264
- // return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
265
- // };
266
- // const shortenFileName = (name: string, maxLength = 20) => {
267
- // const extension = name.substring(name.lastIndexOf("."));
268
- // if (name.length <= maxLength) return name;
269
- // const nameWithoutExtension = name.replace(extension, "");
270
- // const start = nameWithoutExtension.substring(
271
- // 0,
272
- // maxLength - extension.length - 3
273
- // );
274
- // return `${start}...${extension} `;
275
- // };
276
- // return (
277
- // <Container style={{ width }} isActive={isActive}>
278
- // <PlaceholderText isActive={!isActive} onClick={handleTextArea}>
279
- // <span>Add a note...</span>
280
- // </PlaceholderText>
281
- // <TextAreaContainer isActive={isActive}>
282
- // {titleShow && (
283
- // <InputTitle
284
- // value={titleValue}
285
- // onChange={handleTitleChange}
286
- // placeholder="Add a title..."
287
- // ref={ref}
288
- // />
289
- // )}
290
- // <NotesTextArea
291
- // ref={noteAreaRef}
292
- // isActive={isActive}
293
- // noteValue={noteValue}
294
- // value={noteValue}
295
- // onChange={handleNoteChange}
296
- // placeholder="Add a note..."
297
- // />
298
- // </TextAreaContainer>
299
- // {isActive && (
300
- // <>
301
- // <hr style={{ margin: 0 }} />
302
- // <div style={{ padding: "12px 15px" }}>
303
- // <div style={{ display: "flex", alignItems: "center" }}>
304
- // <FileUploadLabel htmlFor="file-upload">
305
- // <Paperclip size={17} />
306
- // <input
307
- // id="file-upload"
308
- // type="file"
309
- // style={{ display: "none" }}
310
- // onChange={(e) => {
311
- // const newFiles = Array.from(e.target.files || []);
312
- // const validFiles = newFiles.filter(
313
- // (file) => file.size <= maxFileSize
314
- // );
315
- // const invalidFiles = newFiles.filter(
316
- // (file) => file.size > maxFileSize
317
- // );
318
- // if (invalidFiles.length > 0) {
319
- // setFileError(
320
- // `${maxFilesSizeError} ${formatBytes(maxFileSize)}.`
321
- // );
322
- // } else {
323
- // setFileError("");
324
- // }
325
- // if (validFiles.length > 0) {
326
- // setFiles((prevFiles) => [...prevFiles, ...validFiles]);
327
- // }
328
- // }}
329
- // multiple
330
- // // onChange={(event) => {
331
- // // if (event.target.files && event.target.files.length > 0) {
332
- // // const filesArray = Array.from(event.target.files);
333
- // // const validFiles = filesArray.filter(
334
- // // (file) => file.size <= maxFileSize
335
- // // );
336
- // // setFiles([...files, ...validFiles]);
337
- // // }
338
- // // }}
339
- // />
340
- // </FileUploadLabel>
341
- // {!titleShow && (
342
- // <>
343
- // <div
344
- // style={{
345
- // height: "15px",
346
- // width: "1px",
347
- // backgroundColor: "#c0c6cc",
348
- // marginRight: "5px",
349
- // marginLeft: "5px",
350
- // }}
351
- // ></div>
352
- // <AddTitleButton onClick={handleSetTitle}>
353
- // Add a Title
354
- // </AddTitleButton>
355
- // </>
356
- // )}
357
- // <div style={{ marginLeft: "auto" }}>
358
- // <CancelButton onClick={handleCloseTextArea}>
359
- // Cancel
360
- // </CancelButton>
361
- // <Button
362
- // isSaveButton={true}
363
- // noteValue={noteValue}
364
- // isLoading={saveButtonLoading}
365
- // disabled={!noteValue || isSaveDisabled}
366
- // theme={theme}
367
- // onClick={() => {
368
- // handleSubmit(noteValue, titleValue, files);
369
- // // handleCloseTextArea();
370
- // }}
371
- // >
372
- // {saveButtonLoading && (
373
- // <span style={{ marginRight: "6px" }}>
374
- // <Spinner
375
- // thickness="2px"
376
- // speed="0.75s"
377
- // emptyColor="gray.200"
378
- // color="blue.500"
379
- // size="xs"
380
- // />
381
- // </span>
382
- // )}
383
- // Save
384
- // </Button>
385
- // </div>
386
- // </div>
387
- // <div style={{ display: "flex", gap: "10px" }}>
388
- // <div>Note:</div>
389
- // <div>You can add up to {maxNoteWordCount} words only</div>
390
- // </div>
391
- // {fileError && <ErrorText>{fileError}</ErrorText>}{" "}
392
- // {/* Display file error */}
393
- // {files.length > 0 && (
394
- // <div>
395
- // {files.map((item, index) => (
396
- // <FileViewer key={index}>
397
- // <>
398
- // <span>{shortenFileName(item.name)}</span>
399
- // <span>{formatBytes(item.size)}</span>
400
- // </>
401
- // <FileEdit
402
- // onClick={() =>
403
- // setFiles(files.filter((fileItem) => fileItem !== item))
404
- // }
405
- // />
406
- // </FileViewer>
407
- // ))}
408
- // </div>
409
- // )}
410
- // </div>
411
- // </>
412
- // )}
413
- // </Container>
414
- // );
415
- // }
416
35
  var react_1 = __importStar(require("react"));
417
36
  var react_2 = require("@chakra-ui/react");
418
37
  var lucide_react_1 = require("lucide-react");
package/dist/Pages/chart.js CHANGED
@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
6
6
  var react_1 = __importDefault(require("react"));
7
7
  var ApexBarChart_1 = __importDefault(require("../Components/Apexcharts/ApexBarChart/ApexBarChart"));
8
8
  var ApexPieChart_1 = __importDefault(require("../Components/Apexcharts/ApexPieChart/ApexPieChart"));
9
- var ApexDonutChart_1 = __importDefault(require("../Components/Apexcharts/ApexDonutChart/ApexDonutChart"));
10
9
  var ChartPage = function () {
11
10
  var data = Array.from({ length: 10 }, function () { return Math.floor(Math.random() * 100); });
12
11
  var categories = data.map(function (_, index) { return "Category ".concat(index + 1); });
@@ -15,12 +14,19 @@ var ChartPage = function () {
15
14
  });
16
15
  var categories1 = data.map(function (_, index) { return "Category ".concat(index + 1); });
17
16
  return (react_1.default.createElement("div", null,
18
- react_1.default.createElement(ApexBarChart_1.default, { data: data, labels: categories, title: "Bar Chart", titlePosition: "left",
19
- // barColor={["#00E396"]}
17
+ react_1.default.createElement(ApexBarChart_1.default, { data: data, labels: categories, title: "Bar Chart", titlePosition: "left", barColor: ["#00E396"],
20
18
  // xAxisStyle={{ colors: "#00E396", fontSize: "12px" }}
21
19
  // yAxisStyle={{ colors: "#00E396", fontSize: "12px" }}
22
20
  titleStyle: { color: "#00E396" } }),
23
- react_1.default.createElement(ApexPieChart_1.default, { data: data1, labels: categories1, title: "Pie Chart", titlePosition: "left", chartColor: ["#00E396", "#3182ce", "#ff4757", "#ff6348", "#e84393"], titleStyle: { color: "#00E396" } }),
24
- react_1.default.createElement(ApexDonutChart_1.default, { data: data1, labels: categories1, title: "Donut Chart", titlePosition: "left", chartColor: ["#00E396", "#3182ce", "#ff4757", "#ff6348", "#e84393"], titleStyle: { color: "#00E396" } })));
21
+ react_1.default.createElement(ApexPieChart_1.default, { data: data1, labels: categories1, title: "Pie Chart", titlePosition: "left", chartColor: ["#00E396", "#3182ce", "#ff4757", "#ff6348", "#e84393"], titleStyle: { color: "#00E396" }, variant: "pie" }),
22
+ react_1.default.createElement(ApexPieChart_1.default, { data: data1, labels: categories1, title: "donut Chart", titlePosition: "left", chartColor: ["#00E396", "#3182ce", "#ff4757", "#ff6348", "#e84393"], titleStyle: { color: "#00E396" }, variant: "donut" }),
23
+ react_1.default.createElement(ApexPieChart_1.default, { data: data1, labels: categories1, title: "update-donut", variant: "update-donut" }),
24
+ react_1.default.createElement(ApexPieChart_1.default, { data: data1, labels: categories1, title: "Monochrome Pie", variant: "monochrome-pie" }),
25
+ react_1.default.createElement(ApexPieChart_1.default, { data: data1, labels: categories1, title: "Gradient Donut", variant: "gradient-donut" }),
26
+ react_1.default.createElement(ApexPieChart_1.default, { data: data1, labels: categories1, title: "Semi Donut", variant: "semi-donut", titlePosition: "left", chartColor: ["#00E396", "#3182ce", "#ff4757", "#ff6348", "#e84393"], titleStyle: { color: "#00E396" } }),
27
+ react_1.default.createElement(ApexPieChart_1.default, { data: data1, labels: categories1, title: "donut-with-pattern", variant: "donut-with-pattern", titlePosition: "left",
28
+ // chartColor={["#00E396", "#3182ce", "#ff4757", "#ff6348", "#e84393"]}
29
+ titleStyle: { color: "#00E396" } }),
30
+ react_1.default.createElement(ApexPieChart_1.default, { data: data1, labels: categories1, title: "pie-with-image", variant: "pie-with-image", titlePosition: "left", chartColor: ["#00E396", "#3182ce", "#ff4757", "#ff6348", "#e84393"], titleStyle: { color: "#00E396" } })));
25
31
  };
26
32
  exports.default = ChartPage;
package/dist/index.d.ts CHANGED
@@ -2,7 +2,6 @@ import Accordian from "./Components/Accordion/Accordion";
2
2
  import AlertDialog from "./Components/AlertDialog/AlertDialog";
3
3
  import ApexBarChart from "./Components/Apexcharts/ApexBarChart/ApexBarChart";
4
4
  import ApexPieChart from "./Components/Apexcharts/ApexPieChart/ApexPieChart";
5
- import ApexDonutChart from "./Components/Apexcharts/ApexDonutChart/ApexDonutChart";
6
5
  import Breadcrumbs from "./Components/Breadcrumbs/Breadcrumbs";
7
6
  import Button from "./Components/Button/Button";
8
7
  import ButtonGroupIcon from "./Components/ButtonGroupIcon/ButtonGroupIcon";
@@ -56,5 +55,5 @@ import ProductDetails from "./Components/ProductDetails/ProductDetails";
56
55
  import PhoneNumberInput from "./Components/Input/PhoneNumberInput";
57
56
  import { InputSwitch } from "./Components/Input/Switch/InputSwitch";
58
57
  import PaymentCard from "./Components/Card/PaymentCard/PaymentCard";
59
- export { Accordian, AlertDialog, ApexBarChart, ApexPieChart, ApexDonutChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, ContactForm, DatePicker, Drawer, DrawerHeader, DrawerBody, DrawerFooter, Dropdown, Editor, FileUpload, FormWrapper, Header, HeaderActions, InputTextArea, InputSwitch, KanbanBoard, Loading, Modal, ModalHeader, ModalBody, ModalFooter, NavigationBar, NoteTextArea, MultiSelect, NumberInput, PaymentCard, PhoneNumberInput, PinInput, ProductCard, ProductDetails, ProfileCard, ProfileCardHeader, ProfileCardBody, ProfileCardFooter, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Reorder, Search, Select, SearchSelect, SelectSearch, SideBar, Slider, Skeletons, Switch, Table, TableToggle, Tag, TextInput, Timeline, Toaster, ToolTip, useToaster, VerifyEmailOtp, useCustomTheme, ThemesList, debounce, };
58
+ export { Accordian, AlertDialog, ApexBarChart, ApexPieChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, ContactForm, DatePicker, Drawer, DrawerHeader, DrawerBody, DrawerFooter, Dropdown, Editor, FileUpload, FormWrapper, Header, HeaderActions, InputTextArea, InputSwitch, KanbanBoard, Loading, Modal, ModalHeader, ModalBody, ModalFooter, NavigationBar, NoteTextArea, MultiSelect, NumberInput, PaymentCard, PhoneNumberInput, PinInput, ProductCard, ProductDetails, ProfileCard, ProfileCardHeader, ProfileCardBody, ProfileCardFooter, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Reorder, Search, Select, SearchSelect, SelectSearch, SideBar, Slider, Skeletons, Switch, Table, TableToggle, Tag, TextInput, Timeline, Toaster, ToolTip, useToaster, VerifyEmailOtp, useCustomTheme, ThemesList, debounce, };
60
59
  export default withTheme;
package/dist/index.js CHANGED
@@ -27,8 +27,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
27
27
  return (mod && mod.__esModule) ? mod : { "default": mod };
28
28
  };
29
29
  Object.defineProperty(exports, "__esModule", { value: true });
30
- exports.Select = exports.Search = exports.Reorder = exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCardFooter = exports.ProfileCardBody = exports.ProfileCardHeader = exports.ProfileCard = exports.ProductDetails = exports.ProductCard = exports.PinInput = exports.PhoneNumberInput = exports.PaymentCard = exports.NumberInput = exports.MultiSelect = exports.NoteTextArea = exports.NavigationBar = exports.ModalFooter = exports.ModalBody = exports.ModalHeader = exports.Modal = exports.Loading = exports.KanbanBoard = exports.InputSwitch = exports.InputTextArea = exports.HeaderActions = exports.Header = exports.FormWrapper = exports.FileUpload = exports.Editor = exports.Dropdown = exports.DrawerFooter = exports.DrawerBody = exports.DrawerHeader = exports.Drawer = exports.DatePicker = exports.ContactForm = exports.Checkbox = exports.Card = exports.ButtonGroupIcon = exports.Button = exports.Breadcrumbs = exports.ApexDonutChart = exports.ApexPieChart = exports.ApexBarChart = exports.AlertDialog = exports.Accordian = void 0;
31
- exports.debounce = exports.ThemesList = exports.useCustomTheme = exports.VerifyEmailOtp = exports.useToaster = exports.ToolTip = exports.Toaster = exports.Timeline = exports.TextInput = exports.Tag = exports.TableToggle = exports.Table = exports.Switch = exports.Skeletons = exports.Slider = exports.SideBar = exports.SelectSearch = exports.SearchSelect = void 0;
30
+ exports.SearchSelect = exports.Select = exports.Search = exports.Reorder = exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCardFooter = exports.ProfileCardBody = exports.ProfileCardHeader = exports.ProfileCard = exports.ProductDetails = exports.ProductCard = exports.PinInput = exports.PhoneNumberInput = exports.PaymentCard = exports.NumberInput = exports.MultiSelect = exports.NoteTextArea = exports.NavigationBar = exports.ModalFooter = exports.ModalBody = exports.ModalHeader = exports.Modal = exports.Loading = exports.KanbanBoard = exports.InputSwitch = exports.InputTextArea = exports.HeaderActions = exports.Header = exports.FormWrapper = exports.FileUpload = exports.Editor = exports.Dropdown = exports.DrawerFooter = exports.DrawerBody = exports.DrawerHeader = exports.Drawer = exports.DatePicker = exports.ContactForm = exports.Checkbox = exports.Card = exports.ButtonGroupIcon = exports.Button = exports.Breadcrumbs = exports.ApexPieChart = exports.ApexBarChart = exports.AlertDialog = exports.Accordian = void 0;
31
+ exports.debounce = exports.ThemesList = exports.useCustomTheme = exports.VerifyEmailOtp = exports.useToaster = exports.ToolTip = exports.Toaster = exports.Timeline = exports.TextInput = exports.Tag = exports.TableToggle = exports.Table = exports.Switch = exports.Skeletons = exports.Slider = exports.SideBar = exports.SelectSearch = void 0;
32
32
  var Accordion_1 = __importDefault(require("./Components/Accordion/Accordion"));
33
33
  exports.Accordian = Accordion_1.default;
34
34
  var AlertDialog_1 = __importDefault(require("./Components/AlertDialog/AlertDialog"));
@@ -37,8 +37,6 @@ var ApexBarChart_1 = __importDefault(require("./Components/Apexcharts/ApexBarCha
37
37
  exports.ApexBarChart = ApexBarChart_1.default;
38
38
  var ApexPieChart_1 = __importDefault(require("./Components/Apexcharts/ApexPieChart/ApexPieChart"));
39
39
  exports.ApexPieChart = ApexPieChart_1.default;
40
- var ApexDonutChart_1 = __importDefault(require("./Components/Apexcharts/ApexDonutChart/ApexDonutChart"));
41
- exports.ApexDonutChart = ApexDonutChart_1.default;
42
40
  var Breadcrumbs_1 = __importDefault(require("./Components/Breadcrumbs/Breadcrumbs"));
43
41
  exports.Breadcrumbs = Breadcrumbs_1.default;
44
42
  var Button_1 = __importDefault(require("./Components/Button/Button"));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pixelize-design-library",
3
- "version": "2.1.74",
3
+ "version": "2.1.75",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",