funuicss 3.7.3 → 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 +528 -553
- package/package.json +1 -1
- package/ui/appbar/AppBar.d.ts +32 -2
- package/ui/appbar/AppBar.js +225 -23
- 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/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;
|