funuicss 3.0.3 → 3.0.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/package.json +1 -1
- package/ui/chart/Bar.d.ts +2 -0
- package/ui/chart/Bar.js +3 -3
- package/ui/chart/Line.d.ts +5 -0
- package/ui/chart/Line.js +3 -3
- package/ui/chart/Pie.d.ts +1 -0
- package/ui/chart/Pie.js +2 -2
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "3.0.
|
|
2
|
+
"version": "3.0.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/chart/Bar.d.ts
CHANGED
package/ui/chart/Bar.js
CHANGED
|
@@ -45,12 +45,12 @@ var CustomTooltip = function (_a) {
|
|
|
45
45
|
return null;
|
|
46
46
|
};
|
|
47
47
|
var Bars = function (_a) {
|
|
48
|
-
var data = _a.data, series = _a.series, _b = _a.showGrid, showGrid = _b === void 0 ? true : _b, _c = _a.showLegend, showLegend = _c === void 0 ? true : _c, _d = _a.showXAxis, showXAxis = _d === void 0 ? true : _d, _e = _a.showYAxis, showYAxis = _e === void 0 ? false : _e, _f = _a.barRadius, barRadius = _f === void 0 ? 6 : _f, funcss = _a.funcss, _g = _a.barSize, barSize = _g === void 0 ? 30 : _g, _h = _a.width, width = _h === void 0 ? '100%' : _h, _j = _a.height, height = _j === void 0 ? "100%" : _j, _k = _a.margin, margin = _k === void 0 ? { top: 10, right: 30, left: 0, bottom: 20 } : _k, _l = _a.xAxisProps, xAxisProps = _l === void 0 ? {} : _l, _m = _a.yAxisProps, yAxisProps = _m === void 0 ? {} : _m, tooltipFormatter = _a.tooltipFormatter, _o = _a.legendProps, legendProps = _o === void 0 ? {} : _o;
|
|
48
|
+
var data = _a.data, series = _a.series, _b = _a.showGrid, showGrid = _b === void 0 ? true : _b, _c = _a.showLegend, showLegend = _c === void 0 ? true : _c, _d = _a.showXAxis, showXAxis = _d === void 0 ? true : _d, _e = _a.showYAxis, showYAxis = _e === void 0 ? false : _e, _f = _a.barRadius, barRadius = _f === void 0 ? 6 : _f, funcss = _a.funcss, _g = _a.barSize, barSize = _g === void 0 ? 30 : _g, _h = _a.width, width = _h === void 0 ? '100%' : _h, _j = _a.height, height = _j === void 0 ? "100%" : _j, _k = _a.margin, margin = _k === void 0 ? { top: 10, right: 30, left: 0, bottom: 20 } : _k, _l = _a.xAxisProps, xAxisProps = _l === void 0 ? {} : _l, _m = _a.yAxisProps, yAxisProps = _m === void 0 ? {} : _m, tooltipFormatter = _a.tooltipFormatter, xInterval = _a.xInterval, yInterval = _a.yInterval, _o = _a.legendProps, legendProps = _o === void 0 ? {} : _o;
|
|
49
49
|
return (react_1.default.createElement(recharts_1.ResponsiveContainer, { className: funcss || "", width: width, height: height },
|
|
50
50
|
react_1.default.createElement(recharts_1.BarChart, { data: data, margin: margin },
|
|
51
51
|
showGrid && react_1.default.createElement(recharts_1.CartesianGrid, { strokeDasharray: "3 3" }),
|
|
52
|
-
showXAxis && react_1.default.createElement(recharts_1.XAxis, __assign({ dataKey: "label" }, xAxisProps)),
|
|
53
|
-
showYAxis && react_1.default.createElement(recharts_1.YAxis, __assign({}, yAxisProps)),
|
|
52
|
+
showXAxis && react_1.default.createElement(recharts_1.XAxis, __assign({ dataKey: "label" }, xAxisProps, { interval: xInterval || 0 })),
|
|
53
|
+
showYAxis && react_1.default.createElement(recharts_1.YAxis, __assign({}, yAxisProps, { interval: yInterval || 0 })),
|
|
54
54
|
react_1.default.createElement(recharts_1.Tooltip, { content: react_1.default.createElement(CustomTooltip, null), formatter: tooltipFormatter }),
|
|
55
55
|
showLegend && react_1.default.createElement(recharts_1.Legend, __assign({}, legendProps)),
|
|
56
56
|
series.map(function (s) { return (react_1.default.createElement(recharts_1.Bar, { key: s.dataKey, dataKey: s.dataKey, name: s.label || s.dataKey, fill: resolveColor(s.color), radius: [barRadius, barRadius, 0, 0], barSize: barSize })); }))));
|
package/ui/chart/Line.d.ts
CHANGED
|
@@ -25,6 +25,9 @@ interface AreaChartProps {
|
|
|
25
25
|
showYAxis?: boolean;
|
|
26
26
|
funcss?: string;
|
|
27
27
|
curveType?: 'linear' | 'monotone' | 'step' | 'basis';
|
|
28
|
+
rotateLabel: string;
|
|
29
|
+
xLabelSize: string | number;
|
|
30
|
+
yLabelSize: string | number;
|
|
28
31
|
height?: number | string;
|
|
29
32
|
width?: number | string;
|
|
30
33
|
margin?: {
|
|
@@ -33,6 +36,8 @@ interface AreaChartProps {
|
|
|
33
36
|
left?: number;
|
|
34
37
|
bottom?: number;
|
|
35
38
|
};
|
|
39
|
+
xInterval: number;
|
|
40
|
+
yInterval: number;
|
|
36
41
|
dy?: number;
|
|
37
42
|
xAxisProps?: any;
|
|
38
43
|
yAxisProps?: any;
|
package/ui/chart/Line.js
CHANGED
|
@@ -46,7 +46,7 @@ var CustomTooltip = function (_a) {
|
|
|
46
46
|
return null;
|
|
47
47
|
};
|
|
48
48
|
var Lines = function (_a) {
|
|
49
|
-
var data = _a.data, id = _a.id, series = _a.series, fromColor = _a.fromColor, toColor = _a.toColor, dy = _a.dy, _b = _a.showGrid, showGrid = _b === void 0 ? true : _b, _c = _a.horizontalLines, horizontalLines = _c === void 0 ? false : _c, _d = _a.showLegend, showLegend = _d === void 0 ? true : _d, _e = _a.showXAxis, showXAxis = _e === void 0 ? true : _e, _f = _a.showYAxis, showYAxis = _f === void 0 ? false : _f, funcss = _a.funcss, _g = _a.curveType, curveType = _g === void 0 ? 'monotone' : _g, _h = _a.height, height = _h === void 0 ? "100%" : _h, _j = _a.width, width = _j === void 0 ? '100%' : _j, _k = _a.margin, margin = _k === void 0 ? { top: 10, right: 30, left: 0, bottom: 20 } : _k, _l = _a.xAxisProps, xAxisProps = _l === void 0 ? {} : _l, _m = _a.yAxisProps, yAxisProps = _m === void 0 ? {} : _m, tooltipFormatter = _a.tooltipFormatter, _o = _a.legendProps, legendProps = _o === void 0 ? {} : _o;
|
|
49
|
+
var data = _a.data, id = _a.id, series = _a.series, fromColor = _a.fromColor, toColor = _a.toColor, dy = _a.dy, _b = _a.showGrid, showGrid = _b === void 0 ? true : _b, _c = _a.horizontalLines, horizontalLines = _c === void 0 ? false : _c, _d = _a.showLegend, showLegend = _d === void 0 ? true : _d, _e = _a.showXAxis, showXAxis = _e === void 0 ? true : _e, _f = _a.showYAxis, showYAxis = _f === void 0 ? false : _f, funcss = _a.funcss, _g = _a.curveType, curveType = _g === void 0 ? 'monotone' : _g, _h = _a.height, height = _h === void 0 ? "100%" : _h, _j = _a.width, width = _j === void 0 ? '100%' : _j, _k = _a.margin, margin = _k === void 0 ? { top: 10, right: 30, left: 0, bottom: 20 } : _k, _l = _a.xAxisProps, xAxisProps = _l === void 0 ? {} : _l, _m = _a.yAxisProps, yAxisProps = _m === void 0 ? {} : _m, tooltipFormatter = _a.tooltipFormatter, _o = _a.legendProps, legendProps = _o === void 0 ? {} : _o, rotateLabel = _a.rotateLabel, xLabelSize = _a.xLabelSize, yLabelSize = _a.yLabelSize, xInterval = _a.xInterval, yInterval = _a.yInterval;
|
|
50
50
|
var gradientId = id || 'colorUv';
|
|
51
51
|
return (react_1.default.createElement(recharts_1.ResponsiveContainer, { width: width, height: height, className: funcss },
|
|
52
52
|
react_1.default.createElement(recharts_1.AreaChart, { data: data, margin: margin },
|
|
@@ -56,8 +56,8 @@ var Lines = function (_a) {
|
|
|
56
56
|
react_1.default.createElement("stop", { offset: "95%", stopColor: getCssVar(toColor || 'primary200'), stopOpacity: 0 }))),
|
|
57
57
|
showGrid && react_1.default.createElement(recharts_1.CartesianGrid, { strokeDasharray: "3 3" }),
|
|
58
58
|
!showGrid && horizontalLines && (react_1.default.createElement(recharts_1.CartesianGrid, { strokeDasharray: "3 3", horizontal: true, vertical: false })),
|
|
59
|
-
showXAxis && (react_1.default.createElement(recharts_1.XAxis, __assign({ interval: 0, padding: { left: 10, right: 10 }, fontSize: "0.8rem", strokeWidth: horizontalLines ? 0 : 0.2, dataKey: "label", angle: -35, dy: dy !== null && dy !== void 0 ? dy : 10 }, xAxisProps))),
|
|
60
|
-
showYAxis && (react_1.default.createElement(recharts_1.YAxis, __assign({ interval: 0, strokeWidth: horizontalLines ? 0 : 0.2, fontSize: "0.8rem" }, yAxisProps))),
|
|
59
|
+
showXAxis && (react_1.default.createElement(recharts_1.XAxis, __assign({ interval: xInterval || 0, padding: { left: 10, right: 10 }, fontSize: xLabelSize || "0.8rem", strokeWidth: horizontalLines ? 0 : 0.2, dataKey: "label", angle: rotateLabel || -35, dy: dy !== null && dy !== void 0 ? dy : 10 }, xAxisProps))),
|
|
60
|
+
showYAxis && (react_1.default.createElement(recharts_1.YAxis, __assign({ interval: yInterval || 0, strokeWidth: horizontalLines ? 0 : 0.2, fontSize: yLabelSize || "0.8rem" }, yAxisProps))),
|
|
61
61
|
react_1.default.createElement(recharts_1.Tooltip, { content: react_1.default.createElement(CustomTooltip, null), formatter: tooltipFormatter }),
|
|
62
62
|
showLegend && react_1.default.createElement(recharts_1.Legend, __assign({}, legendProps)),
|
|
63
63
|
series.map(function (s, index) { return (react_1.default.createElement(recharts_1.Area, { key: s.dataKey, type: curveType, dataKey: s.dataKey, name: s.label || s.dataKey, stroke: resolveStrokeColor(s.color), fill: "url(#".concat(gradientId, ")"), fillOpacity: 1, strokeWidth: s.strokeWidth || 2, dot: s.dot !== false ? { r: 4 } : false, activeDot: { r: 8 } })); }))));
|
package/ui/chart/Pie.d.ts
CHANGED
package/ui/chart/Pie.js
CHANGED
|
@@ -47,10 +47,10 @@ var CustomTooltip = function (_a) {
|
|
|
47
47
|
return null;
|
|
48
48
|
};
|
|
49
49
|
var ChartPie = function (_a) {
|
|
50
|
-
var data = _a.data, _b = _a.donut, donut = _b === void 0 ? false : _b, _c = _a.showLegend, showLegend = _c === void 0 ? true : _c, _d = _a.funcss, funcss = _d === void 0 ? '' : _d, width = _a.width, height = _a.height, _e = _a.outerRadius, outerRadius = _e === void 0 ? 100 : _e, innerRadius = _a.innerRadius, tooltipFormatter = _a.tooltipFormatter, _f = _a.legendProps, legendProps = _f === void 0 ? {} : _f;
|
|
50
|
+
var data = _a.data, _b = _a.donut, donut = _b === void 0 ? false : _b, _c = _a.showLegend, showLegend = _c === void 0 ? true : _c, _d = _a.funcss, funcss = _d === void 0 ? '' : _d, width = _a.width, height = _a.height, _e = _a.outerRadius, outerRadius = _e === void 0 ? 100 : _e, innerRadius = _a.innerRadius, tooltipFormatter = _a.tooltipFormatter, legendCss = _a.legendCss, _f = _a.legendProps, legendProps = _f === void 0 ? {} : _f;
|
|
51
51
|
var chart = (react_1.default.createElement(recharts_1.PieChart, { width: typeof width === 'number' ? width : undefined, height: typeof height === 'number' ? height : undefined },
|
|
52
52
|
react_1.default.createElement(recharts_1.Tooltip, { content: react_1.default.createElement(CustomTooltip, null), formatter: tooltipFormatter }),
|
|
53
|
-
showLegend && react_1.default.createElement(recharts_1.Legend, __assign({}, legendProps)),
|
|
53
|
+
showLegend && react_1.default.createElement(recharts_1.Legend, __assign({}, legendProps, { className: legendCss || "" })),
|
|
54
54
|
react_1.default.createElement(recharts_1.Pie, { data: data, dataKey: "value", nameKey: "label", cx: "50%", cy: "50%", outerRadius: outerRadius, innerRadius: donut ? innerRadius !== null && innerRadius !== void 0 ? innerRadius : outerRadius * 0.6 : 0, label: false, labelLine: false }, data.map(function (entry, index) { return (react_1.default.createElement(recharts_1.Cell, { key: "cell-".concat(index), fill: resolveColor(entry.color), stroke: "#ffffff", strokeWidth: 1 })); }))));
|
|
55
55
|
if (!width && !height) {
|
|
56
56
|
return (react_1.default.createElement(recharts_1.ResponsiveContainer, { width: "100%", height: 300, className: funcss }, chart));
|