pixelize-design-library 2.1.75 → 2.1.76
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.
- package/dist/Components/Apexcharts/ApexLineChart/ApexLineChart.d.ts +4 -0
- package/dist/Components/Apexcharts/ApexLineChart/ApexLineChart.js +125 -0
- package/dist/Components/Apexcharts/ApexLineChart/ApexLineChartProps.d.ts +22 -0
- package/dist/Components/Apexcharts/ApexLineChart/ApexLineChartProps.js +2 -0
- package/dist/Pages/chart.js +4 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.js +4 -2
- package/package.json +1 -1
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { ApexLineChartProps } from "./ApexLineChartProps";
|
|
3
|
+
declare const ApexLineChart: ({ data, labels, title, height, width, lineColors, titlePosition, titleStyle, variant, }: ApexLineChartProps) => React.JSX.Element;
|
|
4
|
+
export default ApexLineChart;
|
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
+
if (mod && mod.__esModule) return mod;
|
|
20
|
+
var result = {};
|
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
+
__setModuleDefault(result, mod);
|
|
23
|
+
return result;
|
|
24
|
+
};
|
|
25
|
+
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
26
|
+
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
27
|
+
if (ar || !(i in from)) {
|
|
28
|
+
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
29
|
+
ar[i] = from[i];
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
return to.concat(ar || Array.prototype.slice.call(from));
|
|
33
|
+
};
|
|
34
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
35
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
36
|
+
};
|
|
37
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
38
|
+
var react_1 = __importStar(require("react"));
|
|
39
|
+
var react_apexcharts_1 = __importDefault(require("react-apexcharts"));
|
|
40
|
+
var ApexLineChart = function (_a) {
|
|
41
|
+
var data = _a.data, labels = _a.labels, title = _a.title, _b = _a.height, height = _b === void 0 ? 400 : _b, _c = _a.width, width = _c === void 0 ? 600 : _c, _d = _a.lineColors, lineColors = _d === void 0 ? ["#3182ce", "#e53e3e", "#38a169"] : _d, _e = _a.titlePosition, titlePosition = _e === void 0 ? "center" : _e, _f = _a.titleStyle, titleStyle = _f === void 0 ? {
|
|
42
|
+
color: "#3182ce",
|
|
43
|
+
fontSize: "16px",
|
|
44
|
+
fontWeight: 600,
|
|
45
|
+
fontFamily: "Arial",
|
|
46
|
+
} : _f, _g = _a.variant, variant = _g === void 0 ? "basic" : _g;
|
|
47
|
+
var _h = (0, react_1.useState)([
|
|
48
|
+
{
|
|
49
|
+
name: "Series 1",
|
|
50
|
+
data: Array.isArray(data) ? data : [],
|
|
51
|
+
},
|
|
52
|
+
]), series = _h[0], setSeries = _h[1];
|
|
53
|
+
var chartRef = (0, react_1.useRef)(null);
|
|
54
|
+
// 🔄 Handle realtime updates
|
|
55
|
+
(0, react_1.useEffect)(function () {
|
|
56
|
+
if (variant === "realtime") {
|
|
57
|
+
var interval_1 = setInterval(function () {
|
|
58
|
+
setSeries(function (prev) {
|
|
59
|
+
var newData = __spreadArray([], prev[0].data, true);
|
|
60
|
+
newData.push(Math.floor(Math.random() * 100) + 10); // simulate
|
|
61
|
+
if (newData.length > 20)
|
|
62
|
+
newData.shift(); // keep window size
|
|
63
|
+
return [{ name: "Series 1", data: newData }];
|
|
64
|
+
});
|
|
65
|
+
}, 1000);
|
|
66
|
+
return function () { return clearInterval(interval_1); };
|
|
67
|
+
}
|
|
68
|
+
}, [variant]);
|
|
69
|
+
// const options: ApexOptions = {
|
|
70
|
+
// chart: {
|
|
71
|
+
// type: "line",
|
|
72
|
+
// animations:
|
|
73
|
+
// variant === "realtime"
|
|
74
|
+
// ? {
|
|
75
|
+
// enabled: true,
|
|
76
|
+
// easing: "linear",
|
|
77
|
+
// dynamicAnimation: { speed: 1000 },
|
|
78
|
+
// }
|
|
79
|
+
// : undefined,
|
|
80
|
+
// zoom: { enabled: true },
|
|
81
|
+
// toolbar: { show: true },
|
|
82
|
+
// },
|
|
83
|
+
// stroke: { curve: "smooth" },
|
|
84
|
+
// colors: lineColors,
|
|
85
|
+
// xaxis: labels
|
|
86
|
+
// ? { categories: labels }
|
|
87
|
+
// : { type: variant === "realtime" ? "numeric" : "category" },
|
|
88
|
+
// title: {
|
|
89
|
+
// text: title,
|
|
90
|
+
// align: titlePosition ?? "center",
|
|
91
|
+
// style: titleStyle,
|
|
92
|
+
// },
|
|
93
|
+
// markers: { size: 4 },
|
|
94
|
+
// dataLabels: { enabled: false },
|
|
95
|
+
// };
|
|
96
|
+
var options = {
|
|
97
|
+
chart: {
|
|
98
|
+
type: "line",
|
|
99
|
+
animations: variant === "realtime"
|
|
100
|
+
? {
|
|
101
|
+
enabled: true,
|
|
102
|
+
speed: 1000,
|
|
103
|
+
dynamicAnimation: { speed: 1000 }, // ✅ allowed
|
|
104
|
+
}
|
|
105
|
+
: { enabled: false },
|
|
106
|
+
zoom: { enabled: true },
|
|
107
|
+
toolbar: { show: true },
|
|
108
|
+
},
|
|
109
|
+
stroke: { curve: "smooth" },
|
|
110
|
+
colors: lineColors,
|
|
111
|
+
xaxis: labels
|
|
112
|
+
? { categories: labels }
|
|
113
|
+
: { type: variant === "realtime" ? "numeric" : "category" },
|
|
114
|
+
title: {
|
|
115
|
+
text: title,
|
|
116
|
+
align: titlePosition !== null && titlePosition !== void 0 ? titlePosition : "center",
|
|
117
|
+
style: titleStyle,
|
|
118
|
+
},
|
|
119
|
+
markers: { size: 4 },
|
|
120
|
+
dataLabels: { enabled: false },
|
|
121
|
+
};
|
|
122
|
+
return (react_1.default.createElement("div", null,
|
|
123
|
+
react_1.default.createElement(react_apexcharts_1.default, { ref: chartRef, options: options, series: series, type: "line", height: height, width: width })));
|
|
124
|
+
};
|
|
125
|
+
exports.default = ApexLineChart;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
export type ApexLineChartProps = {
|
|
2
|
+
variant?: LineChartVariant;
|
|
3
|
+
data: number[];
|
|
4
|
+
labels?: string[];
|
|
5
|
+
title?: string;
|
|
6
|
+
height?: number;
|
|
7
|
+
width?: number;
|
|
8
|
+
lineColors?: string[];
|
|
9
|
+
titlePosition?: "left" | "center" | "right";
|
|
10
|
+
titleStyle?: {
|
|
11
|
+
color?: string;
|
|
12
|
+
fontSize?: string;
|
|
13
|
+
fontWeight?: number | string;
|
|
14
|
+
fontFamily?: string;
|
|
15
|
+
};
|
|
16
|
+
legendStyle?: {
|
|
17
|
+
colors?: string | string[];
|
|
18
|
+
useSeriesColors?: boolean;
|
|
19
|
+
position?: "top" | "right" | "bottom" | "left";
|
|
20
|
+
};
|
|
21
|
+
};
|
|
22
|
+
export type LineChartVariant = "basic" | "realtime";
|
package/dist/Pages/chart.js
CHANGED
|
@@ -6,6 +6,7 @@ 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 ApexLineChart_1 = __importDefault(require("../Components/Apexcharts/ApexLineChart/ApexLineChart"));
|
|
9
10
|
var ChartPage = function () {
|
|
10
11
|
var data = Array.from({ length: 10 }, function () { return Math.floor(Math.random() * 100); });
|
|
11
12
|
var categories = data.map(function (_, index) { return "Category ".concat(index + 1); });
|
|
@@ -27,6 +28,8 @@ var ChartPage = function () {
|
|
|
27
28
|
react_1.default.createElement(ApexPieChart_1.default, { data: data1, labels: categories1, title: "donut-with-pattern", variant: "donut-with-pattern", titlePosition: "left",
|
|
28
29
|
// chartColor={["#00E396", "#3182ce", "#ff4757", "#ff6348", "#e84393"]}
|
|
29
30
|
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" } })
|
|
31
|
+
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" } }),
|
|
32
|
+
react_1.default.createElement(ApexLineChart_1.default, { variant: "basic", data: [10, 20, 30, 40, 50], labels: ["Jan", "Feb", "Mar", "Apr", "May"], title: "Basic Line Chart", lineColors: ["#3182ce"], height: 300, width: 600 }),
|
|
33
|
+
react_1.default.createElement(ApexLineChart_1.default, { variant: "realtime", data: [15, 25, 35], title: "Realtime Line Chart", lineColors: ["#e53e3e"], height: 300, width: 600 })));
|
|
31
34
|
};
|
|
32
35
|
exports.default = ChartPage;
|
package/dist/index.d.ts
CHANGED
|
@@ -55,5 +55,6 @@ import ProductDetails from "./Components/ProductDetails/ProductDetails";
|
|
|
55
55
|
import PhoneNumberInput from "./Components/Input/PhoneNumberInput";
|
|
56
56
|
import { InputSwitch } from "./Components/Input/Switch/InputSwitch";
|
|
57
57
|
import PaymentCard from "./Components/Card/PaymentCard/PaymentCard";
|
|
58
|
-
|
|
58
|
+
import ApexLineChart from "./Components/Apexcharts/ApexLineChart/ApexLineChart";
|
|
59
|
+
export { Accordian, AlertDialog, ApexBarChart, ApexPieChart, ApexLineChart, 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, };
|
|
59
60
|
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.
|
|
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;
|
|
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.ApexLineChart = 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;
|
|
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"));
|
|
@@ -153,4 +153,6 @@ var InputSwitch_1 = require("./Components/Input/Switch/InputSwitch");
|
|
|
153
153
|
Object.defineProperty(exports, "InputSwitch", { enumerable: true, get: function () { return InputSwitch_1.InputSwitch; } });
|
|
154
154
|
var PaymentCard_1 = __importDefault(require("./Components/Card/PaymentCard/PaymentCard"));
|
|
155
155
|
exports.PaymentCard = PaymentCard_1.default;
|
|
156
|
+
var ApexLineChart_1 = __importDefault(require("./Components/Apexcharts/ApexLineChart/ApexLineChart"));
|
|
157
|
+
exports.ApexLineChart = ApexLineChart_1.default;
|
|
156
158
|
exports.default = withTheme_1.default;
|