pixelize-design-library 2.1.75 → 2.1.77

package/dist/Components/Apexcharts/ApexLineChart/ApexLineChart.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { ApexLineChartProps } from "./ApexLineChartProps";
+declare const ApexLineChart: ({ data, labels, title, height, width, lineColors, titlePosition, titleStyle, variant, }: ApexLineChartProps) => React.JSX.Element;
+export default ApexLineChart;

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

@@ -0,0 +1,125 @@
+"use strict";
+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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var react_apexcharts_1 = __importDefault(require("react-apexcharts"));
+var ApexLineChart = function (_a) {
+    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 ? {
+        color: "#3182ce",
+        fontSize: "16px",
+        fontWeight: 600,
+        fontFamily: "Arial",
+    } : _f, _g = _a.variant, variant = _g === void 0 ? "basic" : _g;
+    var _h = (0, react_1.useState)([
+        {
+            name: "Series 1",
+            data: Array.isArray(data) ? data : [],
+        },
+    ]), series = _h[0], setSeries = _h[1];
+    var chartRef = (0, react_1.useRef)(null);
+    // 🔄 Handle realtime updates
+    (0, react_1.useEffect)(function () {
+        if (variant === "realtime") {
+            var interval_1 = setInterval(function () {
+                setSeries(function (prev) {
+                    var newData = __spreadArray([], prev[0].data, true);
+                    newData.push(Math.floor(Math.random() * 100) + 10); // simulate
+                    if (newData.length > 20)
+                        newData.shift(); // keep window size
+                    return [{ name: "Series 1", data: newData }];
+                });
+            }, 1000);
+            return function () { return clearInterval(interval_1); };
+        }
+    }, [variant]);
+    //   const options: ApexOptions = {
+    //     chart: {
+    //       type: "line",
+    //       animations:
+    //         variant === "realtime"
+    //           ? {
+    //               enabled: true,
+    //               easing: "linear",
+    //               dynamicAnimation: { speed: 1000 },
+    //             }
+    //           : undefined,
+    //       zoom: { enabled: true },
+    //       toolbar: { show: true },
+    //     },
+    //     stroke: { curve: "smooth" },
+    //     colors: lineColors,
+    //     xaxis: labels
+    //       ? { categories: labels }
+    //       : { type: variant === "realtime" ? "numeric" : "category" },
+    //     title: {
+    //       text: title,
+    //       align: titlePosition ?? "center",
+    //       style: titleStyle,
+    //     },
+    //     markers: { size: 4 },
+    //     dataLabels: { enabled: false },
+    //   };
+    var options = {
+        chart: {
+            type: "line",
+            animations: variant === "realtime"
+                ? {
+                    enabled: true,
+                    speed: 1000,
+                    dynamicAnimation: { speed: 1000 }, // ✅ allowed
+                }
+                : { enabled: false },
+            zoom: { enabled: true },
+            toolbar: { show: true },
+        },
+        stroke: { curve: "smooth" },
+        colors: lineColors,
+        xaxis: labels
+            ? { categories: labels }
+            : { type: variant === "realtime" ? "numeric" : "category" },
+        title: {
+            text: title,
+            align: titlePosition !== null && titlePosition !== void 0 ? titlePosition : "center",
+            style: titleStyle,
+        },
+        markers: { size: 4 },
+        dataLabels: { enabled: false },
+    };
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(react_apexcharts_1.default, { ref: chartRef, options: options, series: series, type: "line", height: height, width: width })));
+};
+exports.default = ApexLineChart;

package/dist/Components/Apexcharts/ApexLineChart/ApexLineChartProps.d.ts

@@ -0,0 +1,22 @@
+export type ApexLineChartProps = {
+    variant?: LineChartVariant;
+    data: number[];
+    labels?: string[];
+    title?: string;
+    height?: number;
+    width?: number;
+    lineColors?: string[];
+    titlePosition?: "left" | "center" | "right";
+    titleStyle?: {
+        color?: string;
+        fontSize?: string;
+        fontWeight?: number | string;
+        fontFamily?: string;
+    };
+    legendStyle?: {
+        colors?: string | string[];
+        useSeriesColors?: boolean;
+        position?: "top" | "right" | "bottom" | "left";
+    };
+};
+export type LineChartVariant = "basic" | "realtime";

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/Apexcharts/ApexPolarCharts/ApexPolarCharts.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { ApexPolarChartProps } from "./ApexPolarChartsProps";
+declare const ApexPolarChart: ({ data, labels, title, height, width, chartColors, titlePosition, titleStyle, legendStyle, variant, }: ApexPolarChartProps) => React.JSX.Element;
+export default ApexPolarChart;

package/dist/Components/Apexcharts/ApexPolarCharts/ApexPolarCharts.js

@@ -0,0 +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 __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_apexcharts_1 = __importDefault(require("react-apexcharts"));
+var ApexPolarChart = function (_a) {
+    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 ? 500 : _c, chartColors = _a.chartColors, _d = _a.titlePosition, titlePosition = _d === void 0 ? "center" : _d, _e = _a.titleStyle, titleStyle = _e === void 0 ? {
+        color: "#3182ce",
+        fontSize: "16px",
+        fontWeight: 600,
+        fontFamily: "Arial",
+    } : _e, _f = _a.legendStyle, legendStyle = _f === void 0 ? {
+        colors: "#000",
+        position: "bottom",
+        useSeriesColors: false,
+    } : _f, _g = _a.variant, variant = _g === void 0 ? "basic" : _g;
+    var extraOptions = {};
+    switch (variant) {
+        case "basic":
+            extraOptions = {
+                stroke: { colors: ["#fff"] },
+                fill: { opacity: 0.8 },
+            };
+            break;
+        case "monochrome":
+            extraOptions = {
+                theme: {
+                    monochrome: {
+                        enabled: true,
+                        shadeTo: "light",
+                        shadeIntensity: 0.6,
+                    },
+                },
+                stroke: { colors: ["#fff"] },
+                fill: { opacity: 0.8 },
+            };
+            break;
+        default:
+            break;
+    }
+    var options = __assign({ chart: { type: "polarArea" }, labels: labels, colors: chartColors !== null && chartColors !== void 0 ? chartColors : ["#3182ce", "#e53e3e", "#38a169", "#dd6b20"], legend: {
+            position: legendStyle.position,
+            labels: {
+                colors: legendStyle.colors,
+                useSeriesColors: legendStyle.useSeriesColors,
+            },
+        }, title: {
+            text: title,
+            align: titlePosition,
+            style: titleStyle,
+        }, dataLabels: { enabled: true } }, extraOptions);
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(react_apexcharts_1.default, { options: options, series: data, type: "polarArea", height: height, width: width })));
+};
+exports.default = ApexPolarChart;

package/dist/Components/Apexcharts/ApexPolarCharts/ApexPolarChartsProps.d.ts

@@ -0,0 +1,22 @@
+export type ApexPolarChartProps = {
+    variant?: PolarVariant;
+    data: number[];
+    labels: string[];
+    title?: string;
+    height?: number;
+    width?: number;
+    chartColors?: string[];
+    titlePosition?: "left" | "center" | "right";
+    titleStyle?: {
+        color?: string;
+        fontSize?: string;
+        fontWeight?: number | string;
+        fontFamily?: string;
+    };
+    legendStyle?: {
+        colors?: string | string[];
+        useSeriesColors?: boolean;
+        position?: "top" | "right" | "bottom" | "left";
+    };
+};
+export type PolarVariant = "basic" | "monochrome";

package/dist/Components/Apexcharts/ApexPolarCharts/ApexPolarChartsProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Pages/chart.js

@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var ApexBarChart_1 = __importDefault(require("../Components/Apexcharts/ApexBarChart/ApexBarChart"));
 var ApexPieChart_1 = __importDefault(require("../Components/Apexcharts/ApexPieChart/ApexPieChart"));
+var ApexLineChart_1 = __importDefault(require("../Components/Apexcharts/ApexLineChart/ApexLineChart"));
+var ApexPolarCharts_1 = __importDefault(require("../Components/Apexcharts/ApexPolarCharts/ApexPolarCharts"));
 var ChartPage = function () {
     var data = Array.from({ length: 10 }, function () { return Math.floor(Math.random() * 100); });
     var categories = data.map(function (_, index) { return "Category ".concat(index + 1); });
@@ -27,6 +29,10 @@ var ChartPage = function () {
         react_1.default.createElement(ApexPieChart_1.default, { data: data1, labels: categories1, title: "donut-with-pattern", variant: "donut-with-pattern", titlePosition: "left", 
             // chartColor={["#00E396", "#3182ce", "#ff4757", "#ff6348", "#e84393"]}
             titleStyle: { color: "#00E396" } }),
-        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" } })));
+        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" } }),
+        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 }),
+        react_1.default.createElement(ApexLineChart_1.default, { variant: "realtime", data: [15, 25, 35], title: "Realtime Line Chart", lineColors: ["#e53e3e"], height: 300, width: 600 }),
+        react_1.default.createElement(ApexPolarCharts_1.default, { data: [21, 23, 19, 14, 6], labels: ["Apple", "Mango", "Orange", "Watermelon", "Banana"], variant: "basic" }),
+        react_1.default.createElement(ApexPolarCharts_1.default, { data: [21, 23, 19, 14, 6], labels: ["Apple", "Mango", "Orange", "Watermelon", "Banana"], variant: "monochrome" })));
 };
 exports.default = ChartPage;

package/dist/index.d.ts

@@ -2,6 +2,7 @@ import Accordian from "./Components/Accordion/Accordion";
 import AlertDialog from "./Components/AlertDialog/AlertDialog";
 import ApexBarChart from "./Components/Apexcharts/ApexBarChart/ApexBarChart";
 import ApexPieChart from "./Components/Apexcharts/ApexPieChart/ApexPieChart";
+import ApexPolarChart from "./Components/Apexcharts/ApexPolarCharts/ApexPolarCharts";
 import Breadcrumbs from "./Components/Breadcrumbs/Breadcrumbs";
 import Button from "./Components/Button/Button";
 import ButtonGroupIcon from "./Components/ButtonGroupIcon/ButtonGroupIcon";
@@ -55,5 +56,6 @@ import ProductDetails from "./Components/ProductDetails/ProductDetails";
 import PhoneNumberInput from "./Components/Input/PhoneNumberInput";
 import { InputSwitch } from "./Components/Input/Switch/InputSwitch";
 import PaymentCard from "./Components/Card/PaymentCard/PaymentCard";
-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, };
+import ApexLineChart from "./Components/Apexcharts/ApexLineChart/ApexLineChart";
+export { Accordian, AlertDialog, ApexBarChart, ApexPieChart, ApexPolarChart, 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, };
 export default withTheme;

package/dist/index.js

@@ -27,8 +27,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-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;
-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;
+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.ApexPolarChart = exports.ApexPieChart = exports.ApexBarChart = exports.AlertDialog = exports.Accordian = void 0;
+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 = exports.Select = void 0;
 var Accordion_1 = __importDefault(require("./Components/Accordion/Accordion"));
 exports.Accordian = Accordion_1.default;
 var AlertDialog_1 = __importDefault(require("./Components/AlertDialog/AlertDialog"));
@@ -37,6 +37,8 @@ var ApexBarChart_1 = __importDefault(require("./Components/Apexcharts/ApexBarCha
 exports.ApexBarChart = ApexBarChart_1.default;
 var ApexPieChart_1 = __importDefault(require("./Components/Apexcharts/ApexPieChart/ApexPieChart"));
 exports.ApexPieChart = ApexPieChart_1.default;
+var ApexPolarCharts_1 = __importDefault(require("./Components/Apexcharts/ApexPolarCharts/ApexPolarCharts"));
+exports.ApexPolarChart = ApexPolarCharts_1.default;
 var Breadcrumbs_1 = __importDefault(require("./Components/Breadcrumbs/Breadcrumbs"));
 exports.Breadcrumbs = Breadcrumbs_1.default;
 var Button_1 = __importDefault(require("./Components/Button/Button"));
@@ -153,4 +155,6 @@ var InputSwitch_1 = require("./Components/Input/Switch/InputSwitch");
 Object.defineProperty(exports, "InputSwitch", { enumerable: true, get: function () { return InputSwitch_1.InputSwitch; } });
 var PaymentCard_1 = __importDefault(require("./Components/Card/PaymentCard/PaymentCard"));
 exports.PaymentCard = PaymentCard_1.default;
+var ApexLineChart_1 = __importDefault(require("./Components/Apexcharts/ApexLineChart/ApexLineChart"));
+exports.ApexLineChart = ApexLineChart_1.default;
 exports.default = withTheme_1.default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.1.75",
+  "version": "2.1.77",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",