funuicss 3.0.4 → 3.0.6

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.
Files changed (5) hide show
  1. package/package.json +1 -1
  2. package/ui/chart/Bar.d.ts +16 -8
  3. package/ui/chart/Bar.js +41 -11
  4. package/ui/chart/Line.d.ts +2 -0
  5. package/ui/chart/Line.js +3 -3
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "3.0.4",
2
+ "version": "3.0.6",
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
@@ -11,25 +11,33 @@ type ChartSeries = {
11
11
  interface BarsProps {
12
12
  data: DataItem[];
13
13
  series: ChartSeries[];
14
- showGrid?: boolean;
15
- showLegend?: boolean;
16
- showXAxis?: boolean;
17
- showYAxis?: boolean;
18
- funcss?: string;
19
- barRadius?: number;
20
- barSize?: number;
21
14
  width?: number | string;
22
15
  height?: number | string;
16
+ layout?: 'horizontal' | 'vertical';
23
17
  margin?: {
24
18
  top?: number;
25
19
  right?: number;
26
- left?: number;
27
20
  bottom?: number;
21
+ left?: number;
28
22
  };
23
+ barRadius?: number;
24
+ barSize?: number;
25
+ barGap?: number | string;
26
+ barCategoryGap?: number | string;
27
+ showXAxis?: boolean;
28
+ showYAxis?: boolean;
29
29
  xAxisProps?: any;
30
30
  yAxisProps?: any;
31
+ xInterval?: number;
32
+ yInterval?: number;
33
+ showGrid?: boolean;
34
+ gridProps?: any;
35
+ showTooltip?: boolean;
31
36
  tooltipFormatter?: (value: any, name: string, props: any) => React.ReactNode;
37
+ showLegend?: boolean;
32
38
  legendProps?: any;
39
+ isAnimationActive?: boolean;
40
+ funcss?: string;
33
41
  }
34
42
  declare const Bars: React.FC<BarsProps>;
35
43
  export default Bars;
package/ui/chart/Bar.js CHANGED
@@ -17,7 +17,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
17
17
  Object.defineProperty(exports, "__esModule", { value: true });
18
18
  var react_1 = __importDefault(require("react"));
19
19
  var recharts_1 = require("recharts");
20
- // Resolve CSS variables
20
+ // CSS variable resolver
21
21
  var getCssVar = function (varName) {
22
22
  var _a;
23
23
  if (typeof window === 'undefined')
@@ -31,13 +31,13 @@ var resolveColor = function (color) {
31
31
  return color;
32
32
  return getCssVar("--".concat(color)) || color;
33
33
  };
34
- // Custom Tooltip
34
+ // Custom tooltip renderer
35
35
  var CustomTooltip = function (_a) {
36
36
  var active = _a.active, payload = _a.payload, label = _a.label;
37
37
  if (active && payload && payload.length) {
38
38
  return (react_1.default.createElement("div", { className: "dark raised round-edge p-2 text-sm" },
39
39
  react_1.default.createElement("div", { className: "text-bold" }, label),
40
- payload.map(function (entry, index) { return (react_1.default.createElement("div", { key: index, style: { lineHeight: 1 } },
40
+ payload.map(function (entry, index) { return (react_1.default.createElement("div", { key: index },
41
41
  entry.name,
42
42
  ": ",
43
43
  react_1.default.createElement("span", { className: "font-semibold" }, entry.value))); })));
@@ -45,14 +45,44 @@ 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;
49
- return (react_1.default.createElement(recharts_1.ResponsiveContainer, { className: funcss || "", width: width, height: height },
50
- react_1.default.createElement(recharts_1.BarChart, { data: data, margin: margin },
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)),
54
- react_1.default.createElement(recharts_1.Tooltip, { content: react_1.default.createElement(CustomTooltip, null), formatter: tooltipFormatter }),
48
+ var data = _a.data, series = _a.series,
49
+ // Layout
50
+ _b = _a.width,
51
+ // Layout
52
+ width = _b === void 0 ? '100%' : _b, _c = _a.height, height = _c === void 0 ? 300 : _c, _d = _a.layout, layout = _d === void 0 ? 'horizontal' : _d, _e = _a.margin, margin = _e === void 0 ? { top: 10, right: 30, left: 0, bottom: 20 } : _e,
53
+ // Bar Styling
54
+ _f = _a.barRadius,
55
+ // Bar Styling
56
+ barRadius = _f === void 0 ? 6 : _f, _g = _a.barSize, barSize = _g === void 0 ? 30 : _g, _h = _a.barGap, barGap = _h === void 0 ? 4 : _h, _j = _a.barCategoryGap, barCategoryGap = _j === void 0 ? '10%' : _j,
57
+ // Axis
58
+ _k = _a.showXAxis,
59
+ // Axis
60
+ showXAxis = _k === void 0 ? true : _k, _l = _a.showYAxis, showYAxis = _l === void 0 ? true : _l, _m = _a.xAxisProps, xAxisProps = _m === void 0 ? {} : _m, _o = _a.yAxisProps, yAxisProps = _o === void 0 ? {} : _o, _p = _a.xInterval, xInterval = _p === void 0 ? 0 : _p, _q = _a.yInterval, yInterval = _q === void 0 ? 0 : _q,
61
+ // Grid
62
+ _r = _a.showGrid,
63
+ // Grid
64
+ showGrid = _r === void 0 ? true : _r, _s = _a.gridProps, gridProps = _s === void 0 ? {} : _s,
65
+ // Tooltip & Legend
66
+ _t = _a.showTooltip,
67
+ // Tooltip & Legend
68
+ showTooltip = _t === void 0 ? true : _t, tooltipFormatter = _a.tooltipFormatter, _u = _a.showLegend, showLegend = _u === void 0 ? true : _u, _v = _a.legendProps, legendProps = _v === void 0 ? {} : _v,
69
+ // Animation
70
+ _w = _a.isAnimationActive,
71
+ // Animation
72
+ isAnimationActive = _w === void 0 ? true : _w,
73
+ // Extra
74
+ funcss = _a.funcss;
75
+ return (react_1.default.createElement(recharts_1.ResponsiveContainer, { className: funcss || '', width: width, height: height },
76
+ react_1.default.createElement(recharts_1.BarChart, { data: data, layout: layout, margin: margin, barGap: barGap, barCategoryGap: barCategoryGap },
77
+ showGrid && react_1.default.createElement(recharts_1.CartesianGrid, __assign({ strokeDasharray: "3 3" }, gridProps)),
78
+ showXAxis && layout === 'horizontal' && (react_1.default.createElement(recharts_1.XAxis, __assign({ dataKey: "label", interval: xInterval }, xAxisProps))),
79
+ showYAxis && layout === 'horizontal' && (react_1.default.createElement(recharts_1.YAxis, __assign({ interval: yInterval }, yAxisProps))),
80
+ showYAxis && layout === 'vertical' && (react_1.default.createElement(recharts_1.XAxis, __assign({ dataKey: "label", interval: xInterval }, xAxisProps))),
81
+ showXAxis && layout === 'vertical' && (react_1.default.createElement(recharts_1.YAxis, __assign({ interval: yInterval }, yAxisProps))),
82
+ showTooltip && (react_1.default.createElement(recharts_1.Tooltip, { content: react_1.default.createElement(CustomTooltip, null), formatter: tooltipFormatter })),
55
83
  showLegend && react_1.default.createElement(recharts_1.Legend, __assign({}, legendProps)),
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 })); }))));
84
+ 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: layout === 'horizontal'
85
+ ? [barRadius, barRadius, 0, 0]
86
+ : [0, barRadius, barRadius, 0], barSize: barSize, isAnimationActive: isAnimationActive })); }))));
57
87
  };
58
88
  exports.default = Bars;
package/ui/chart/Line.d.ts CHANGED
@@ -36,6 +36,8 @@ interface AreaChartProps {
36
36
  left?: number;
37
37
  bottom?: number;
38
38
  };
39
+ xInterval: number;
40
+ yInterval: number;
39
41
  dy?: number;
40
42
  xAxisProps?: any;
41
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, rotateLabel = _a.rotateLabel, xLabelSize = _a.xLabelSize, yLabelSize = _a.yLabelSize;
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: 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: 0, strokeWidth: horizontalLines ? 0 : 0.2, fontSize: yLabelSize || "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 } })); }))));