funuicss 3.7.4 → 3.7.5
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/css/fun.css +361 -575
- package/package.json +1 -1
- package/ui/button/Button.d.ts +1 -1
- package/ui/button/Button.js +81 -37
- package/ui/chart/Bar.js +37 -33
- package/ui/chart/Line.js +32 -28
- package/ui/chart/Pie.js +5 -1
- package/ui/input/Input.js +263 -93
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "3.7.
|
|
2
|
+
"version": "3.7.5",
|
|
3
3
|
"name": "funuicss",
|
|
4
4
|
"description": "React and Next.js component UI Library for creating Easy and good looking websites with fewer lines of code. Elevate your web development experience with our cutting-edge React/Next.js component UI Library. Craft stunning websites effortlessly, boasting both seamless functionality and aesthetic appeal—all achieved with minimal lines of code. Unleash the power of simplicity and style in your projects!",
|
|
5
5
|
"main": "index.js",
|
package/ui/button/Button.d.ts
CHANGED
|
@@ -37,7 +37,7 @@ interface ButtonProps {
|
|
|
37
37
|
isLoading?: boolean;
|
|
38
38
|
variant?: string;
|
|
39
39
|
url?: string;
|
|
40
|
-
status?: 'success' | 'warning' | 'info' | '
|
|
40
|
+
status?: 'success' | 'warning' | 'info' | 'error';
|
|
41
41
|
children?: React.ReactNode;
|
|
42
42
|
style?: React.CSSProperties;
|
|
43
43
|
onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
|
package/ui/button/Button.js
CHANGED
|
@@ -66,13 +66,11 @@ function Button(_a) {
|
|
|
66
66
|
var _d = _a.variant, variant = _d === void 0 ? '' : _d, color = _a.color, bg = _a.bg, funcss = _a.funcss, startIcon = _a.startIcon, endIcon = _a.endIcon, stringPrefix = _a.stringPrefix, stringSuffix = _a.stringSuffix, prefix = _a.prefix, suffix = _a.suffix, iconSize = _a.iconSize, _e = _a.iconLineHeight, iconLineHeight = _e === void 0 ? 0 : _e, text = _a.text, rounded = _a.rounded, raised = _a.raised, height = _a.height, width = _a.width, float = _a.float, hoverUp = _a.hoverUp, fullWidth = _a.fullWidth, outlined = _a.outlined, small = _a.small, hoverless = _a.hoverless, smaller = _a.smaller, big = _a.big, bigger = _a.bigger, jumbo = _a.jumbo, flat = _a.flat, hoverNone = _a.hoverNone, fillAnimation = _a.fillAnimation, fillDirection = _a.fillDirection, fillTextColor = _a.fillTextColor, outlineSize = _a.outlineSize, isLoading = _a.isLoading, status = _a.status, bold = _a.bold, children = _a.children, style = _a.style, url = _a.url, onClick = _a.onClick, rest = __rest(_a, ["variant", "color", "bg", "funcss", "startIcon", "endIcon", "stringPrefix", "stringSuffix", "prefix", "suffix", "iconSize", "iconLineHeight", "text", "rounded", "raised", "height", "width", "float", "hoverUp", "fullWidth", "outlined", "small", "hoverless", "smaller", "big", "bigger", "jumbo", "flat", "hoverNone", "fillAnimation", "fillDirection", "fillTextColor", "outlineSize", "isLoading", "status", "bold", "children", "style", "url", "onClick"]);
|
|
67
67
|
var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Button', variant).mergeWithLocal;
|
|
68
68
|
// Create local props object - these will override config props
|
|
69
|
-
var localProps = __assign({ color: color, bg: bg, funcss: funcss, text: text, rounded: rounded, raised: raised, height: height, width: width, float: float, hoverUp: hoverUp, fullWidth: fullWidth, outlined: outlined, small: small, hoverless: hoverless, smaller: smaller, big: big, bigger: bigger, jumbo: jumbo, flat: flat, hoverNone: hoverNone, fillAnimation: fillAnimation, fillDirection: fillDirection, fillTextColor: fillTextColor, outlineSize: outlineSize, isLoading: isLoading, status: status, bold: bold, stringPrefix: stringPrefix,
|
|
70
|
-
stringSuffix: stringSuffix }, rest);
|
|
69
|
+
var localProps = __assign({ color: color, bg: bg, funcss: funcss, text: text, rounded: rounded, raised: raised, height: height, width: width, float: float, hoverUp: hoverUp, fullWidth: fullWidth, outlined: outlined, small: small, hoverless: hoverless, smaller: smaller, big: big, bigger: bigger, jumbo: jumbo, flat: flat, hoverNone: hoverNone, fillAnimation: fillAnimation, fillDirection: fillDirection, fillTextColor: fillTextColor, outlineSize: outlineSize, isLoading: isLoading, status: status, bold: bold, stringPrefix: stringPrefix, stringSuffix: stringSuffix }, rest);
|
|
71
70
|
// Merge with config - LOCAL PROPS OVERRIDE CONFIG
|
|
72
71
|
var mergedProps = mergeWithLocal(localProps).props;
|
|
73
72
|
// Extract final values - local props take precedence
|
|
74
73
|
var final = {
|
|
75
|
-
// Use local props first, fallback to merged props
|
|
76
74
|
isLoading: isLoading !== null && isLoading !== void 0 ? isLoading : mergedProps.isLoading,
|
|
77
75
|
status: status !== null && status !== void 0 ? status : mergedProps.status,
|
|
78
76
|
text: text !== null && text !== void 0 ? text : mergedProps.text,
|
|
@@ -97,34 +95,78 @@ function Button(_a) {
|
|
|
97
95
|
fillTextColor: fillTextColor !== null && fillTextColor !== void 0 ? fillTextColor : mergedProps.fillTextColor,
|
|
98
96
|
funcss: funcss !== null && funcss !== void 0 ? funcss : mergedProps.funcss,
|
|
99
97
|
fullWidth: fullWidth !== null && fullWidth !== void 0 ? fullWidth : mergedProps.fullWidth,
|
|
100
|
-
stringPrefix: stringPrefix !== null && stringPrefix !== void 0 ? stringPrefix : mergedProps.stringPrefix,
|
|
101
|
-
stringSuffix: stringSuffix !== null && stringSuffix !== void 0 ? stringSuffix : mergedProps.stringSuffix,
|
|
98
|
+
stringPrefix: stringPrefix !== null && stringPrefix !== void 0 ? stringPrefix : mergedProps.stringPrefix,
|
|
99
|
+
stringSuffix: stringSuffix !== null && stringSuffix !== void 0 ? stringSuffix : mergedProps.stringSuffix,
|
|
102
100
|
};
|
|
103
101
|
var _f = (0, react_1.useState)(null), prefixNode = _f[0], setPrefixNode = _f[1];
|
|
104
102
|
var _g = (0, react_1.useState)(null), suffixNode = _g[0], setSuffixNode = _g[1];
|
|
103
|
+
var _h = (0, react_1.useState)(false), hasValidStringPrefix = _h[0], setHasValidStringPrefix = _h[1];
|
|
104
|
+
var _j = (0, react_1.useState)(false), hasValidStringSuffix = _j[0], setHasValidStringSuffix = _j[1];
|
|
105
105
|
function isReactElement(node) {
|
|
106
106
|
return react_1.default.isValidElement(node);
|
|
107
107
|
}
|
|
108
|
-
// Handle
|
|
108
|
+
// Handle stringPrefix - only load if we have a valid string
|
|
109
109
|
(0, react_1.useEffect)(function () {
|
|
110
110
|
var effectiveStringPrefix = final.stringPrefix;
|
|
111
|
-
if (effectiveStringPrefix) {
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
setPrefixNode(null); // Clear when empty
|
|
111
|
+
if (!effectiveStringPrefix || effectiveStringPrefix.trim() === '') {
|
|
112
|
+
setPrefixNode(null);
|
|
113
|
+
setHasValidStringPrefix(false);
|
|
114
|
+
return;
|
|
116
115
|
}
|
|
116
|
+
(0, getDynamicIcon_1.getDynamicIcon)(effectiveStringPrefix).then(function (node) {
|
|
117
|
+
if (node) {
|
|
118
|
+
setPrefixNode(node);
|
|
119
|
+
setHasValidStringPrefix(true);
|
|
120
|
+
}
|
|
121
|
+
else {
|
|
122
|
+
setPrefixNode(null);
|
|
123
|
+
setHasValidStringPrefix(false);
|
|
124
|
+
}
|
|
125
|
+
});
|
|
117
126
|
}, [final.stringPrefix]);
|
|
118
|
-
// Handle
|
|
127
|
+
// Handle stringSuffix - only load if we have a valid string
|
|
119
128
|
(0, react_1.useEffect)(function () {
|
|
120
129
|
var effectiveStringSuffix = final.stringSuffix;
|
|
121
|
-
if (effectiveStringSuffix) {
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
setSuffixNode(null); // Clear when empty
|
|
130
|
+
if (!effectiveStringSuffix || effectiveStringSuffix.trim() === '') {
|
|
131
|
+
setSuffixNode(null);
|
|
132
|
+
setHasValidStringSuffix(false);
|
|
133
|
+
return;
|
|
126
134
|
}
|
|
135
|
+
(0, getDynamicIcon_1.getDynamicIcon)(effectiveStringSuffix).then(function (node) {
|
|
136
|
+
if (node) {
|
|
137
|
+
setSuffixNode(node);
|
|
138
|
+
setHasValidStringSuffix(true);
|
|
139
|
+
}
|
|
140
|
+
else {
|
|
141
|
+
setSuffixNode(null);
|
|
142
|
+
setHasValidStringSuffix(false);
|
|
143
|
+
}
|
|
144
|
+
});
|
|
127
145
|
}, [final.stringSuffix]);
|
|
146
|
+
// Determine which prefix to show with proper priority
|
|
147
|
+
var showPrefix = react_1.default.useMemo(function () {
|
|
148
|
+
// Priority order: status > startIcon (local) > prefix (local) > stringPrefix (dynamic)
|
|
149
|
+
if (final.status)
|
|
150
|
+
return true;
|
|
151
|
+
if (startIcon)
|
|
152
|
+
return true;
|
|
153
|
+
if (prefix)
|
|
154
|
+
return true;
|
|
155
|
+
if (hasValidStringPrefix && prefixNode)
|
|
156
|
+
return true;
|
|
157
|
+
return false;
|
|
158
|
+
}, [final.status, startIcon, prefix, hasValidStringPrefix, prefixNode]);
|
|
159
|
+
// Determine which suffix to show with proper priority
|
|
160
|
+
var showSuffix = react_1.default.useMemo(function () {
|
|
161
|
+
// Priority order: endIcon (local) > suffix (local) > stringSuffix (dynamic)
|
|
162
|
+
if (endIcon)
|
|
163
|
+
return true;
|
|
164
|
+
if (suffix)
|
|
165
|
+
return true;
|
|
166
|
+
if (hasValidStringSuffix && suffixNode)
|
|
167
|
+
return true;
|
|
168
|
+
return false;
|
|
169
|
+
}, [endIcon, suffix, hasValidStringSuffix, suffixNode]);
|
|
128
170
|
var textColorClass = final.bg
|
|
129
171
|
? final.color
|
|
130
172
|
? final.color
|
|
@@ -155,7 +197,7 @@ function Button(_a) {
|
|
|
155
197
|
final.outlined
|
|
156
198
|
? "outlined outline-".concat(effectiveBg || '', " text-").concat(final.color ? final.color : effectiveBg === null || effectiveBg === void 0 ? void 0 : effectiveBg.replace(/[0-9]/g, ''))
|
|
157
199
|
: effectiveBg || '',
|
|
158
|
-
"".concat(final.fillAnimation ? "".concat(final.fillTextColor ? "hover-text-".concat(final.fillTextColor) :
|
|
200
|
+
"".concat(final.fillAnimation ? "".concat(final.fillTextColor ? "hover-text-".concat(final.fillTextColor) : "hover-text-white", " button-fill fill-").concat(final.fillDirection || 'left') : ''),
|
|
159
201
|
].join(' ');
|
|
160
202
|
var iconWrapperStyle = {
|
|
161
203
|
lineHeight: iconLineHeight,
|
|
@@ -163,27 +205,29 @@ function Button(_a) {
|
|
|
163
205
|
alignItems: 'center',
|
|
164
206
|
justifyContent: 'center',
|
|
165
207
|
};
|
|
166
|
-
//
|
|
167
|
-
var
|
|
168
|
-
|
|
169
|
-
|
|
208
|
+
// Helper function to render icon with proper size
|
|
209
|
+
var renderIcon = function (icon, className) {
|
|
210
|
+
if (className === void 0) { className = ''; }
|
|
211
|
+
if (!icon)
|
|
212
|
+
return null;
|
|
213
|
+
return (react_1.default.createElement("span", { className: className, style: iconWrapperStyle }, isReactElement(icon) ? react_1.default.cloneElement(icon, { size: iconSize }) : icon));
|
|
214
|
+
};
|
|
170
215
|
return (react_1.default.createElement("span", null,
|
|
171
216
|
react_1.default.createElement("button", __assign({ className: "".concat(classNames, " ").concat((showPrefix || showSuffix || final.isLoading) ? 'iconic' : ''), style: __assign({ height: (_b = height !== null && height !== void 0 ? height : mergedProps.height) !== null && _b !== void 0 ? _b : '', width: final.fullWidth ? '100%' : (_c = width !== null && width !== void 0 ? width : mergedProps.width) !== null && _c !== void 0 ? _c : '', borderRadius: final.flat ? '0rem' : '' }, style), onClick: onClick || (url ? function () { return (window.location.href = url); } : undefined) }, mergedProps),
|
|
172
|
-
final.isLoading ? (react_1.default.createElement(
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
: prefix || startIcon || prefixNode))))),
|
|
217
|
+
final.isLoading ? (renderIcon(react_1.default.createElement(pi_1.PiSpinner, { className: "rotate" }), 'btn_left_icon')) : (react_1.default.createElement(react_1.default.Fragment, null,
|
|
218
|
+
final.status && (react_1.default.createElement("span", { className: "btn_left_icon", style: iconWrapperStyle },
|
|
219
|
+
final.status === 'success' && react_1.default.createElement(pi_1.PiCheck, { size: iconSize }),
|
|
220
|
+
final.status === 'info' && react_1.default.createElement(pi_1.PiInfo, { size: iconSize }),
|
|
221
|
+
final.status === 'warning' && react_1.default.createElement(pi_1.PiWarning, { size: iconSize }),
|
|
222
|
+
final.status === 'error' && react_1.default.createElement(pi_1.PiX, { size: iconSize }))),
|
|
223
|
+
!final.status && showPrefix && (react_1.default.createElement(react_1.default.Fragment, null,
|
|
224
|
+
startIcon && renderIcon(startIcon, 'btn_left_icon'),
|
|
225
|
+
!startIcon && prefix && renderIcon(prefix, 'btn_left_icon'),
|
|
226
|
+
!startIcon && !prefix && hasValidStringPrefix && renderIcon(prefixNode, 'btn_left_icon'))))),
|
|
183
227
|
final.fillAnimation && react_1.default.createElement("span", { className: "button_fill_span ".concat(effectiveBg) }),
|
|
184
228
|
children ? children : final.text ? final.text : "",
|
|
185
|
-
showSuffix && (react_1.default.createElement(
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
229
|
+
showSuffix && (react_1.default.createElement(react_1.default.Fragment, null,
|
|
230
|
+
endIcon && renderIcon(endIcon, 'btn_right_icon'),
|
|
231
|
+
!endIcon && suffix && renderIcon(suffix, 'btn_right_icon'),
|
|
232
|
+
!endIcon && !suffix && hasValidStringSuffix && renderIcon(suffixNode, 'btn_right_icon'))))));
|
|
189
233
|
}
|
package/ui/chart/Bar.js
CHANGED
|
@@ -229,38 +229,42 @@ var Bars = function (localProps) {
|
|
|
229
229
|
react_1.default.createElement("div", { className: "text-lg mb-2" }, "\uD83D\uDCCA"),
|
|
230
230
|
react_1.default.createElement("div", null, "No chart data available"))));
|
|
231
231
|
}
|
|
232
|
-
return (react_1.default.createElement(
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
232
|
+
return (react_1.default.createElement("div", { style: {
|
|
233
|
+
height: final.height || "400px",
|
|
234
|
+
width: final.width || "100%"
|
|
235
|
+
} },
|
|
236
|
+
react_1.default.createElement(recharts_1.ResponsiveContainer, { aspect: final.aspect, className: final.funcss, style: containerStyle },
|
|
237
|
+
react_1.default.createElement(recharts_1.BarChart, { data: parsedData, layout: final.layout, margin: smartMargin, barGap: final.barGap, barCategoryGap: final.barCategoryGap, stackOffset: final.stackOffset, syncId: final.syncId },
|
|
238
|
+
final.showGrid && (react_1.default.createElement(recharts_1.CartesianGrid, { strokeDasharray: final.gridStrokeDasharray, stroke: final.gridStroke || getCssVar('border-color') || '#e2e8f0', horizontal: final.horizontalLines !== false, vertical: final.verticalLines !== false })),
|
|
239
|
+
final.showXAxis && (react_1.default.createElement(recharts_1.XAxis, __assign({ type: isVertical ? 'number' : 'category', dataKey: isVertical ? undefined : 'label', interval: final.xInterval, padding: { left: 10, right: 10 }, fontSize: final.xLabelSize, strokeWidth: 0.2, angle: final.rotateLabel || (isVertical ? 0 : -35), dy: (_a = final.dy) !== null && _a !== void 0 ? _a : (isVertical ? 0 : 10), tickLine: final.tickLine, axisLine: final.axisLine, label: final.xAxisLabel ? {
|
|
240
|
+
value: final.xAxisLabel,
|
|
241
|
+
position: isVertical ? 'insideBottom' : 'insideBottom',
|
|
242
|
+
offset: isVertical ? -10 : -30
|
|
243
|
+
} : undefined }, final.xAxisProps))),
|
|
244
|
+
final.showYAxis && (react_1.default.createElement(recharts_1.YAxis, __assign({ type: isVertical ? 'category' : 'number', dataKey: isVertical ? 'label' : undefined, interval: final.yInterval, strokeWidth: 0.2, fontSize: final.yLabelSize, tickLine: final.tickLine, axisLine: final.axisLine, label: final.yAxisLabel ? {
|
|
245
|
+
value: final.yAxisLabel,
|
|
246
|
+
angle: isVertical ? 0 : -90,
|
|
247
|
+
position: isVertical ? 'insideLeft' : 'insideLeft'
|
|
248
|
+
} : undefined }, final.yAxisProps))),
|
|
249
|
+
final.showTooltip && (react_1.default.createElement(recharts_1.Tooltip, __assign({ content: react_1.default.createElement(TooltipComponent, { formatter: final.tooltipFormatter }), formatter: final.tooltipFormatter }, final.tooltipProps))),
|
|
250
|
+
final.showLegend && react_1.default.createElement(recharts_1.Legend, __assign({}, final.legendProps)),
|
|
251
|
+
parsedSeries.map(function (s, index) {
|
|
252
|
+
if (!s || !s.dataKey) {
|
|
253
|
+
console.warn('Invalid series configuration at index:', index);
|
|
254
|
+
return null;
|
|
255
|
+
}
|
|
256
|
+
try {
|
|
257
|
+
return (react_1.default.createElement(recharts_1.Bar, { key: s.dataKey || "series-".concat(index), dataKey: s.dataKey, name: s.label || s.dataKey, fill: resolveColor(s.color), stroke: s.stroke ? resolveColor(s.stroke) : undefined, strokeWidth: s.strokeWidth || 0, fillOpacity: s.fillOpacity !== undefined ? s.fillOpacity : 0.8, barSize: s.barSize || final.barSize, maxBarSize: s.maxBarSize || final.maxBarSize, stackId: s.stackId, background: s.background || false, minPointSize: s.minPointSize, isAnimationActive: final.isAnimationActive, animationDuration: final.animationDuration, onClick: final.onBarClick, onMouseEnter: final.onBarMouseEnter, onMouseLeave: final.onBarMouseLeave, activeBar: s.activeBar !== false ? (typeof s.activeBar === 'object' ? s.activeBar : {
|
|
258
|
+
fill: resolveColor(s.color),
|
|
259
|
+
stroke: resolveColor(s.stroke),
|
|
260
|
+
strokeWidth: 2,
|
|
261
|
+
fillOpacity: 1
|
|
262
|
+
}) : false }));
|
|
263
|
+
}
|
|
264
|
+
catch (error) {
|
|
265
|
+
console.error('Error rendering bar series:', error);
|
|
266
|
+
return null;
|
|
267
|
+
}
|
|
268
|
+
})))));
|
|
265
269
|
};
|
|
266
270
|
exports.default = Bars;
|
package/ui/chart/Line.js
CHANGED
|
@@ -226,33 +226,37 @@ var Lines = function (localProps) {
|
|
|
226
226
|
react_1.default.createElement("div", { className: "text-lg mb-2" }, "\uD83D\uDCCA"),
|
|
227
227
|
react_1.default.createElement("div", null, "No chart data available"))));
|
|
228
228
|
}
|
|
229
|
-
return (react_1.default.createElement(
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
229
|
+
return (react_1.default.createElement("div", { style: {
|
|
230
|
+
height: final.height || "400px",
|
|
231
|
+
width: final.width || "100%",
|
|
232
|
+
} },
|
|
233
|
+
react_1.default.createElement(recharts_1.ResponsiveContainer, { aspect: final.aspect, className: final.funcss, style: containerStyle },
|
|
234
|
+
react_1.default.createElement(recharts_1.AreaChart, { data: parsedData, margin: final.margin, syncId: final.syncId },
|
|
235
|
+
react_1.default.createElement("defs", null,
|
|
236
|
+
defaultGradient,
|
|
237
|
+
gradients),
|
|
238
|
+
final.showGrid && (react_1.default.createElement(recharts_1.CartesianGrid, { strokeDasharray: final.gridStrokeDasharray, stroke: final.gridStroke || getCssVar('border-color') || '#e2e8f0' })),
|
|
239
|
+
!final.showGrid && final.horizontalLines && (react_1.default.createElement(recharts_1.CartesianGrid, { strokeDasharray: final.gridStrokeDasharray, horizontal: true, vertical: false, stroke: final.gridStroke || getCssVar('border-color') || '#e2e8f0' })),
|
|
240
|
+
final.showXAxis && (react_1.default.createElement(recharts_1.XAxis, __assign({ interval: final.xInterval, padding: { left: 10, right: 10 }, fontSize: final.xLabelSize || "0.8rem", strokeWidth: final.horizontalLines ? 0 : 0.2, dataKey: "label", angle: final.rotateLabel || -35, dy: (_a = final.dy) !== null && _a !== void 0 ? _a : 10, tickLine: final.tickLine, axisLine: final.axisLine, label: final.xAxisLabel ? { value: final.xAxisLabel, position: 'insideBottom', offset: -10 } : undefined }, final.xAxisProps))),
|
|
241
|
+
final.showYAxis && (react_1.default.createElement(recharts_1.YAxis, __assign({ interval: final.yInterval, strokeWidth: final.horizontalLines ? 0 : 0.2, fontSize: final.yLabelSize || "0.8rem", tickLine: final.tickLine, axisLine: final.axisLine, label: final.yAxisLabel ? { value: final.yAxisLabel, angle: -90, position: 'insideLeft' } : undefined }, final.yAxisProps))),
|
|
242
|
+
final.showTooltip && (react_1.default.createElement(recharts_1.Tooltip, __assign({ content: react_1.default.createElement(TooltipComponent, { formatter: final.tooltipFormatter }), formatter: final.tooltipFormatter }, final.tooltipProps))),
|
|
243
|
+
final.showLegend && react_1.default.createElement(recharts_1.Legend, __assign({}, final.legendProps)),
|
|
244
|
+
parsedSeries.map(function (s, index) {
|
|
245
|
+
if (!s || !s.dataKey) {
|
|
246
|
+
console.warn('Invalid series configuration at index:', index);
|
|
247
|
+
return null;
|
|
248
|
+
}
|
|
249
|
+
try {
|
|
250
|
+
var hasCustomGradient = s.fromColor || s.toColor;
|
|
251
|
+
var gradientId = hasCustomGradient
|
|
252
|
+
? "".concat(baseGradientId, "-").concat(index)
|
|
253
|
+
: baseGradientId;
|
|
254
|
+
return (react_1.default.createElement(recharts_1.Area, { key: s.dataKey || "series-".concat(index), type: final.curveType, dataKey: s.dataKey, name: s.label || s.dataKey, stroke: resolveStrokeColor(s.color), fill: hasCustomGradient || final.fromColor ? "url(#".concat(gradientId, ")") : resolveStrokeColor(s.color), fillOpacity: s.fillOpacity !== undefined ? s.fillOpacity : 0.6, strokeWidth: s.strokeWidth || 2, strokeDasharray: s.strokeDasharray, dot: s.dot !== false ? { r: 4 } : false, activeDot: s.activeDot !== false ? (typeof s.activeDot === 'object' ? s.activeDot : { r: 6, strokeWidth: 2 }) : false, isAnimationActive: final.isAnimationActive, animationDuration: final.animationDuration }));
|
|
255
|
+
}
|
|
256
|
+
catch (error) {
|
|
257
|
+
console.error('Error rendering area series:', error);
|
|
258
|
+
return null;
|
|
259
|
+
}
|
|
260
|
+
})))));
|
|
257
261
|
};
|
|
258
262
|
exports.default = Lines;
|
package/ui/chart/Pie.js
CHANGED
|
@@ -221,6 +221,10 @@ var ChartPie = function (localProps) {
|
|
|
221
221
|
final.showLegend && (react_1.default.createElement(recharts_1.Legend, __assign({}, legendConfig, { className: final.legendCss }))),
|
|
222
222
|
react_1.default.createElement(recharts_1.Pie, { data: parsedData, dataKey: "value", nameKey: "label", cx: "50%", cy: "50%", outerRadius: final.outerRadius, innerRadius: innerRadius, paddingAngle: final.paddingAngle, cornerRadius: final.cornerRadius, startAngle: final.startAngle, endAngle: final.endAngle, minAngle: final.minAngle, label: LabelComponent ? react_1.default.createElement(LabelComponent, null) : final.showLabels, labelLine: final.showLabelLine, isAnimationActive: final.isAnimationActive, animationDuration: final.animationDuration, onClick: final.onPieClick, onMouseEnter: final.onPieEnter, onMouseLeave: final.onPieLeave, activeShape: final.activeShape, inactiveShape: final.inactiveShape }, parsedData.map(function (entry, index) { return (react_1.default.createElement(recharts_1.Cell, { key: "cell-".concat(index), fill: resolveColor(entry.color) || defaultColors[index % defaultColors.length], stroke: resolveColor(final.strokeColor), strokeWidth: final.strokeWidth })); }))));
|
|
223
223
|
// Use ResponsiveContainer for automatic sizing
|
|
224
|
-
return (react_1.default.createElement(
|
|
224
|
+
return (react_1.default.createElement("div", { style: {
|
|
225
|
+
height: final.height || "300px",
|
|
226
|
+
width: final.width || "300px"
|
|
227
|
+
} },
|
|
228
|
+
react_1.default.createElement(recharts_1.ResponsiveContainer, { width: final.width, height: final.height, aspect: final.aspect, className: final.funcss, style: containerStyle }, chartContent)));
|
|
225
229
|
};
|
|
226
230
|
exports.default = ChartPie;
|