pixelize-design-library 2.2.11 → 2.2.13
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/Assets/defaultLogo.tsx +31 -0
- package/dist/Components/Apexcharts/ApexLineChart/ApexLineChart.js +2 -3
- package/dist/Components/Apexcharts/ApexPieChart/ApexPieChart.d.ts +1 -1
- package/dist/Components/Apexcharts/ApexPieChart/ApexPieChart.js +30 -4
- package/dist/Components/Apexcharts/ApexPieChart/ApexPieChartProps.d.ts +6 -1
- package/dist/Components/Dropdown/DropDown.js +1 -1
- package/dist/Components/SideBar/components/OverflowTooltipText.js +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { useCustomTheme } from "../Theme/useCustomTheme";
|
|
3
|
+
|
|
4
|
+
const DefaultLogo = () => {
|
|
5
|
+
const theme = useCustomTheme();
|
|
6
|
+
return (
|
|
7
|
+
<svg
|
|
8
|
+
width="12.09"
|
|
9
|
+
height="15.95"
|
|
10
|
+
viewBox="0 0 31 29"
|
|
11
|
+
fill="none"
|
|
12
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
13
|
+
>
|
|
14
|
+
<path
|
|
15
|
+
d="M30.4999 6.26137V7.81058H15.9761H14.8787V22.8508V28.8862H12.5226C9.6824 28.8862 7.32632 26.4656 7.06812 23.3995C7.06812 23.2381 7.06812 23.0444 7.06812 22.8508V18.3323C7.06812 18.2677 7.06812 18.2032 7.06812 18.1063V15.5889V6.2291C7.06812 2.80793 9.84378 -5.72205e-06 13.2972 -5.72205e-06H24.8517C28.0147 0.355021 30.4676 3.00158 30.4676 6.2291L30.4999 6.26137Z"
|
|
16
|
+
fill={theme.colors.black}
|
|
17
|
+
/>
|
|
18
|
+
<path
|
|
19
|
+
d="M7.10053 23.3672H7.03598C5.16402 23.2381 3.48571 22.4635 2.25926 21.3338C0.871428 20.0428 0 18.2677 0 16.3312V15.6211H7.06825V18.1386C7.06825 18.2032 7.06825 18.2677 7.06825 18.3645V22.883C7.06825 23.0767 7.06825 23.2381 7.06825 23.4317L7.10053 23.3672Z"
|
|
20
|
+
fill={theme.colors.black}
|
|
21
|
+
/>
|
|
22
|
+
<path
|
|
23
|
+
d="M30.4678 12.0063V15.6211V17.1703C30.4678 20.6238 26.272 23.3994 21.0757 23.3994H14.8789V22.8508V15.6211H22.6572V7.81056C22.6895 7.81056 30.5001 7.81056 30.5001 7.81056V11.5868C30.5001 11.7159 30.5001 11.8772 30.5001 12.0063H30.4678Z"
|
|
24
|
+
fill={theme.colors.black}
|
|
25
|
+
/>
|
|
26
|
+
</svg>
|
|
27
|
+
|
|
28
|
+
)
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
export default DefaultLogo;
|
|
@@ -50,7 +50,6 @@ var ApexLineChart = function (_a) {
|
|
|
50
50
|
data: Array.isArray(data) ? data : [],
|
|
51
51
|
},
|
|
52
52
|
]), series = _h[0], setSeries = _h[1];
|
|
53
|
-
var chartRef = (0, react_1.useRef)(null);
|
|
54
53
|
// 🔄 Handle realtime updates
|
|
55
54
|
(0, react_1.useEffect)(function () {
|
|
56
55
|
if (variant === "realtime") {
|
|
@@ -73,7 +72,7 @@ var ApexLineChart = function (_a) {
|
|
|
73
72
|
? {
|
|
74
73
|
enabled: true,
|
|
75
74
|
speed: 1000,
|
|
76
|
-
dynamicAnimation: { speed: 1000 },
|
|
75
|
+
dynamicAnimation: { speed: 1000 },
|
|
77
76
|
}
|
|
78
77
|
: { enabled: false },
|
|
79
78
|
zoom: { enabled: true },
|
|
@@ -93,6 +92,6 @@ var ApexLineChart = function (_a) {
|
|
|
93
92
|
dataLabels: { enabled: false },
|
|
94
93
|
};
|
|
95
94
|
return (react_1.default.createElement("div", null,
|
|
96
|
-
react_1.default.createElement(react_apexcharts_1.default, {
|
|
95
|
+
react_1.default.createElement(react_apexcharts_1.default, { options: options, series: series, type: "line", height: height, width: width })));
|
|
97
96
|
};
|
|
98
97
|
exports.default = ApexLineChart;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { ApexPieChartProps } from "./ApexPieChartProps";
|
|
3
|
-
declare const ApexPieChart: ({ data, labels, title, height, width, donutColors, chartColor, titlePosition, titleStyle, legendStyle, variant, }: ApexPieChartProps) => React.JSX.Element;
|
|
3
|
+
declare const ApexPieChart: ({ data, labels, title, height, width, donutColors, chartColor, titlePosition, titleStyle, legendPosition, legendStyle, variant, }: ApexPieChartProps) => React.JSX.Element;
|
|
4
4
|
export default ApexPieChart;
|
|
@@ -23,12 +23,17 @@ var ApexPieChart = function (_a) {
|
|
|
23
23
|
fontSize: "16px",
|
|
24
24
|
fontWeight: 600,
|
|
25
25
|
fontFamily: "Arial",
|
|
26
|
-
} : _g, _h = _a.legendStyle, legendStyle =
|
|
26
|
+
} : _g, _h = _a.legendPosition, legendPosition = _h === void 0 ? "bottom" : _h, _j = _a.legendStyle, legendStyle = _j === void 0 ? {
|
|
27
27
|
colors: "#000",
|
|
28
|
-
position: "bottom",
|
|
29
28
|
useSeriesColors: false,
|
|
30
|
-
|
|
29
|
+
horizontalGap: 10,
|
|
30
|
+
verticalGap: 5,
|
|
31
|
+
markerSize: 8,
|
|
32
|
+
markerOffsetX: -5,
|
|
33
|
+
markerOffsetY: 0,
|
|
34
|
+
} : _j, _k = _a.variant, variant = _k === void 0 ? "pie" : _k;
|
|
31
35
|
var extraOptions = {};
|
|
36
|
+
// Your switch cases for different variants
|
|
32
37
|
switch (variant) {
|
|
33
38
|
case "semi-donut":
|
|
34
39
|
extraOptions = {
|
|
@@ -107,14 +112,35 @@ var ApexPieChart = function (_a) {
|
|
|
107
112
|
default:
|
|
108
113
|
break;
|
|
109
114
|
}
|
|
115
|
+
// Validate and normalize legend position
|
|
116
|
+
var getValidLegendPosition = function (position) {
|
|
117
|
+
var validPositions = ["left", "right", "top", "bottom"];
|
|
118
|
+
if (validPositions.includes(position)) {
|
|
119
|
+
return position;
|
|
120
|
+
}
|
|
121
|
+
console.warn("Invalid legend position: ".concat(position, ". Defaulting to 'bottom'."));
|
|
122
|
+
return "bottom";
|
|
123
|
+
};
|
|
124
|
+
var validLegendPosition = getValidLegendPosition(legendPosition);
|
|
110
125
|
var options = __assign({ chart: {
|
|
111
126
|
type: variant.includes("pie") ? "pie" : "donut",
|
|
112
127
|
}, labels: labels, colors: (_b = chartColor !== null && chartColor !== void 0 ? chartColor : donutColors) !== null && _b !== void 0 ? _b : ["#3182ce", "#e53e3e", "#38a169", "#dd6b20"], legend: {
|
|
113
|
-
position:
|
|
128
|
+
position: validLegendPosition,
|
|
114
129
|
labels: {
|
|
115
130
|
colors: legendStyle.colors,
|
|
116
131
|
useSeriesColors: legendStyle.useSeriesColors,
|
|
117
132
|
},
|
|
133
|
+
markers: {
|
|
134
|
+
size: legendStyle.markerSize,
|
|
135
|
+
offsetX: legendStyle.markerOffsetX,
|
|
136
|
+
offsetY: legendStyle.markerOffsetY,
|
|
137
|
+
strokeWidth: 0,
|
|
138
|
+
shape: 'circle',
|
|
139
|
+
},
|
|
140
|
+
itemMargin: {
|
|
141
|
+
horizontal: legendStyle.horizontalGap,
|
|
142
|
+
vertical: legendStyle.verticalGap,
|
|
143
|
+
},
|
|
118
144
|
}, title: {
|
|
119
145
|
text: title,
|
|
120
146
|
align: titlePosition,
|
|
@@ -14,10 +14,15 @@ export type ApexPieChartProps = {
|
|
|
14
14
|
fontWeight?: number | string;
|
|
15
15
|
fontFamily?: string;
|
|
16
16
|
};
|
|
17
|
+
legendPosition?: "left" | "right" | "top" | "bottom";
|
|
17
18
|
legendStyle?: {
|
|
18
19
|
colors?: string | string[];
|
|
19
20
|
useSeriesColors?: boolean;
|
|
20
|
-
|
|
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";
|
|
@@ -39,7 +39,7 @@ var react_2 = require("@chakra-ui/react");
|
|
|
39
39
|
var framer_motion_1 = require("framer-motion");
|
|
40
40
|
var useCustomTheme_1 = require("../../Theme/useCustomTheme");
|
|
41
41
|
var lucide_react_1 = require("lucide-react");
|
|
42
|
-
var MotionBox =
|
|
42
|
+
var MotionBox = framer_motion_1.motion.create((0, react_1.forwardRef)(function (props, ref) { return (react_1.default.createElement(react_2.Box, __assign({ ref: ref }, props))); }));
|
|
43
43
|
var Dropdown = (0, react_1.forwardRef)(function (_a, ref) {
|
|
44
44
|
var dropDownButtonStyle = _a.dropDownButtonStyle, ButtonText = _a.ButtonText, options = _a.options, handleOptionSelect = _a.handleOptionSelect, _b = _a.dropdownType, dropdownType = _b === void 0 ? "button" : _b, text = _a.text, DropdownIcon = _a.DropdownIcon, _c = _a.isVisibleIconShow, isVisibleIconShow = _c === void 0 ? true : _c, buttonProps = _a.buttonProps, headStyle = _a.headStyle, ListStyle = _a.ListStyle, ItemStyle = _a.ItemStyle, LabelStyle = _a.LabelStyle, ImageStyle = _a.ImageStyle, _d = _a.optionsSize, optionsSize = _d === void 0 ? "lg" : _d, _e = _a.divider, divider = _e === void 0 ? false : _e;
|
|
45
45
|
var theme = (0, useCustomTheme_1.useCustomTheme)();
|
|
@@ -58,6 +58,6 @@ var OverflowTooltipText = function (_a) {
|
|
|
58
58
|
}, [children]);
|
|
59
59
|
var shouldShowTooltip = isOverflowing && !isTooltipDisabled;
|
|
60
60
|
return (react_1.default.createElement(ToolTip_1.default, { label: textContent, isDisabled: !shouldShowTooltip, placement: placement, hasArrow: true },
|
|
61
|
-
react_1.default.createElement(react_2.Box, { ref: contentRef, as: "
|
|
61
|
+
react_1.default.createElement(react_2.Box, { ref: contentRef, as: "span", display: "inline-block", maxWidth: maxWidth, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children)));
|
|
62
62
|
};
|
|
63
63
|
exports.default = OverflowTooltipText;
|