funuicss 2.6.17 → 2.6.19

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 (15) hide show
  1. package/css/fun.css +0 -6
  2. package/package.json +1 -1
  3. package/tsconfig.tsbuildinfo +1 -1
  4. package/ui/chart/Bar.d.ts +13 -1
  5. package/ui/chart/Bar.js +26 -24
  6. package/ui/chart/Bar.tsx +49 -14
  7. package/ui/chart/Line.d.ts +14 -1
  8. package/ui/chart/Line.js +25 -13
  9. package/ui/chart/Line.tsx +62 -19
  10. package/ui/chart/Pie.d.ts +4 -0
  11. package/ui/chart/Pie.js +37 -13
  12. package/ui/chart/Pie.tsx +41 -13
  13. package/ui/sidebar/SideBar.d.ts +4 -1
  14. package/ui/sidebar/SideBar.js +7 -7
  15. package/ui/sidebar/SideBar.tsx +9 -3
package/ui/chart/Bar.d.ts CHANGED
@@ -12,12 +12,24 @@ interface BarsProps {
12
12
  data: DataItem[];
13
13
  series: ChartSeries[];
14
14
  showGrid?: boolean;
15
- funcss?: string;
16
15
  showLegend?: boolean;
17
16
  showXAxis?: boolean;
18
17
  showYAxis?: boolean;
18
+ funcss?: string;
19
19
  barRadius?: number;
20
20
  barSize?: number;
21
+ width?: number | string;
22
+ height?: number | string;
23
+ margin?: {
24
+ top?: number;
25
+ right?: number;
26
+ left?: number;
27
+ bottom?: number;
28
+ };
29
+ xAxisProps?: any;
30
+ yAxisProps?: any;
31
+ tooltipFormatter?: (value: any, name: string, props: any) => React.ReactNode;
32
+ legendProps?: any;
21
33
  }
22
34
  declare const Bars: React.FC<BarsProps>;
23
35
  export default Bars;
package/ui/chart/Bar.js CHANGED
@@ -11,24 +11,19 @@ var __assign = (this && this.__assign) || function () {
11
11
  };
12
12
  return __assign.apply(this, arguments);
13
13
  };
14
- var __rest = (this && this.__rest) || function (s, e) {
15
- var t = {};
16
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
17
- t[p] = s[p];
18
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
19
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
20
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
21
- t[p[i]] = s[p[i]];
22
- }
23
- return t;
24
- };
25
14
  var __importDefault = (this && this.__importDefault) || function (mod) {
26
15
  return (mod && mod.__esModule) ? mod : { "default": mod };
27
16
  };
28
17
  Object.defineProperty(exports, "__esModule", { value: true });
29
18
  var react_1 = __importDefault(require("react"));
30
19
  var recharts_1 = require("recharts");
31
- // Resolve 'primary' to actual CSS variable value like var(--primary)
20
+ // Resolve CSS variables
21
+ var getCssVar = function (varName) {
22
+ var _a;
23
+ if (typeof window === 'undefined')
24
+ return '';
25
+ return ((_a = getComputedStyle(document.documentElement).getPropertyValue(varName)) === null || _a === void 0 ? void 0 : _a.trim()) || '';
26
+ };
32
27
  var resolveColor = function (color) {
33
28
  if (!color)
34
29
  return getCssVar('--primary') || '#8884d8';
@@ -36,21 +31,28 @@ var resolveColor = function (color) {
36
31
  return color;
37
32
  return getCssVar("--".concat(color)) || color;
38
33
  };
39
- // Helper to get CSS variable value from :root
40
- var getCssVar = function (varName) {
41
- if (typeof window === 'undefined')
42
- return '';
43
- return getComputedStyle(document.documentElement).getPropertyValue(varName).trim();
34
+ // Custom Tooltip
35
+ var CustomTooltip = function (_a) {
36
+ var active = _a.active, payload = _a.payload, label = _a.label;
37
+ if (active && payload && payload.length) {
38
+ return (react_1.default.createElement("div", { className: "dark raised round-edge p-2 text-sm" },
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 } },
41
+ entry.name,
42
+ ": ",
43
+ react_1.default.createElement("span", { className: "font-semibold" }, entry.value))); })));
44
+ }
45
+ return null;
44
46
  };
45
47
  var Bars = function (_a) {
46
- 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, rest = __rest(_a, ["data", "series", "showGrid", "showLegend", "showXAxis", "showYAxis", "barRadius", "funcss", "barSize"]);
47
- return (react_1.default.createElement(recharts_1.ResponsiveContainer, __assign({ className: funcss || "" }, rest, { width: "100%" }),
48
- react_1.default.createElement(recharts_1.BarChart, { data: data },
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 },
49
51
  showGrid && react_1.default.createElement(recharts_1.CartesianGrid, { strokeDasharray: "3 3" }),
50
- showXAxis && react_1.default.createElement(recharts_1.XAxis, { dataKey: "label" }),
51
- showYAxis && react_1.default.createElement(recharts_1.YAxis, null),
52
- react_1.default.createElement(recharts_1.Tooltip, null),
53
- showLegend && react_1.default.createElement(recharts_1.Legend, null),
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 }),
55
+ showLegend && react_1.default.createElement(recharts_1.Legend, __assign({}, legendProps)),
54
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 })); }))));
55
57
  };
56
58
  exports.default = Bars;
package/ui/chart/Bar.tsx CHANGED
@@ -20,32 +20,61 @@ type DataItem = {
20
20
  type ChartSeries = {
21
21
  dataKey: string;
22
22
  label?: string;
23
- color?: string; // Can be a CSS variable name like 'primary' or a hex code
23
+ color?: string; // CSS variable name (e.g. 'primary') or hex
24
24
  };
25
25
 
26
26
  interface BarsProps {
27
27
  data: DataItem[];
28
28
  series: ChartSeries[];
29
+
30
+ // Style and behavior
29
31
  showGrid?: boolean;
30
- funcss?: string,
31
32
  showLegend?: boolean;
32
33
  showXAxis?: boolean;
33
34
  showYAxis?: boolean;
35
+ funcss?: string;
34
36
  barRadius?: number;
35
37
  barSize?: number;
38
+ width?: number | string;
39
+ height?: number | string;
40
+ margin?: { top?: number; right?: number; left?: number; bottom?: number };
41
+
42
+ // Axis custom props
43
+ xAxisProps?: any;
44
+ yAxisProps?: any;
45
+
46
+ // Tooltip and legend customization
47
+ tooltipFormatter?: (value: any, name: string, props: any) => React.ReactNode;
48
+ legendProps?: any;
36
49
  }
37
50
 
38
- // Resolve 'primary' to actual CSS variable value like var(--primary)
51
+ // Resolve CSS variables
52
+ const getCssVar = (varName: string): string => {
53
+ if (typeof window === 'undefined') return '';
54
+ return getComputedStyle(document.documentElement).getPropertyValue(varName)?.trim() || '';
55
+ };
56
+
39
57
  const resolveColor = (color?: string): string => {
40
58
  if (!color) return getCssVar('--primary') || '#8884d8';
41
59
  if (color.startsWith('#')) return color;
42
60
  return getCssVar(`--${color}`) || color;
43
61
  };
44
62
 
45
- // Helper to get CSS variable value from :root
46
- const getCssVar = (varName: string): string => {
47
- if (typeof window === 'undefined') return '';
48
- return getComputedStyle(document.documentElement).getPropertyValue(varName).trim();
63
+ // Custom Tooltip
64
+ const CustomTooltip = ({ active, payload, label }: any) => {
65
+ if (active && payload && payload.length) {
66
+ return (
67
+ <div className="dark raised round-edge p-2 text-sm">
68
+ <div className="text-bold">{label}</div>
69
+ {payload.map((entry: any, index: number) => (
70
+ <div key={index} style={{ lineHeight: 1 }}>
71
+ {entry.name}: <span className="font-semibold">{entry.value}</span>
72
+ </div>
73
+ ))}
74
+ </div>
75
+ );
76
+ }
77
+ return null;
49
78
  };
50
79
 
51
80
  const Bars: React.FC<BarsProps> = ({
@@ -58,16 +87,22 @@ const Bars: React.FC<BarsProps> = ({
58
87
  barRadius = 6,
59
88
  funcss,
60
89
  barSize = 30,
61
- ...rest
90
+ width = '100%',
91
+ height = "100%",
92
+ margin = { top: 10, right: 30, left: 0, bottom: 20 },
93
+ xAxisProps = {},
94
+ yAxisProps = {},
95
+ tooltipFormatter,
96
+ legendProps = {},
62
97
  }) => {
63
98
  return (
64
- <ResponsiveContainer className={funcss || ``} {...rest} width="100%" >
65
- <BarChart data={data}>
99
+ <ResponsiveContainer className={funcss || ``} width={width} height={height}>
100
+ <BarChart data={data} margin={margin}>
66
101
  {showGrid && <CartesianGrid strokeDasharray="3 3" />}
67
- {showXAxis && <XAxis dataKey="label" />}
68
- {showYAxis && <YAxis />}
69
- <Tooltip />
70
- {showLegend && <Legend />}
102
+ {showXAxis && <XAxis dataKey="label" {...xAxisProps} />}
103
+ {showYAxis && <YAxis {...yAxisProps} />}
104
+ <Tooltip content={<CustomTooltip />} formatter={tooltipFormatter} />
105
+ {showLegend && <Legend {...legendProps} />}
71
106
  {series.map((s) => (
72
107
  <Bar
73
108
  key={s.dataKey}
package/ui/chart/Line.d.ts CHANGED
@@ -16,8 +16,8 @@ interface AreaChartProps {
16
16
  data: DataItem[];
17
17
  series: ChartSeries[];
18
18
  fromColor?: string;
19
- id?: string;
20
19
  toColor?: string;
20
+ id?: string;
21
21
  showGrid?: boolean;
22
22
  horizontalLines?: boolean;
23
23
  showLegend?: boolean;
@@ -25,6 +25,19 @@ interface AreaChartProps {
25
25
  showYAxis?: boolean;
26
26
  funcss?: string;
27
27
  curveType?: 'linear' | 'monotone' | 'step' | 'basis';
28
+ height?: number | string;
29
+ width?: number | string;
30
+ margin?: {
31
+ top?: number;
32
+ right?: number;
33
+ left?: number;
34
+ bottom?: number;
35
+ };
36
+ dy?: number;
37
+ xAxisProps?: any;
38
+ yAxisProps?: any;
39
+ tooltipFormatter?: (value: any, name: string, props: any) => React.ReactNode;
40
+ legendProps?: any;
28
41
  }
29
42
  declare const Lines: React.FC<AreaChartProps>;
30
43
  export default Lines;
package/ui/chart/Line.js CHANGED
@@ -1,19 +1,30 @@
1
1
  "use strict";
2
2
  'use client';
3
+ var __assign = (this && this.__assign) || function () {
4
+ __assign = Object.assign || function(t) {
5
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
6
+ s = arguments[i];
7
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
8
+ t[p] = s[p];
9
+ }
10
+ return t;
11
+ };
12
+ return __assign.apply(this, arguments);
13
+ };
3
14
  var __importDefault = (this && this.__importDefault) || function (mod) {
4
15
  return (mod && mod.__esModule) ? mod : { "default": mod };
5
16
  };
6
17
  Object.defineProperty(exports, "__esModule", { value: true });
7
18
  var react_1 = __importDefault(require("react"));
8
19
  var recharts_1 = require("recharts");
9
- // Helper to read CSS variables
20
+ // CSS var resolver
10
21
  var getCssVar = function (varName) {
11
22
  var _a;
12
23
  if (typeof window === 'undefined')
13
24
  return '';
14
25
  return ((_a = getComputedStyle(document.documentElement).getPropertyValue("--".concat(varName))) === null || _a === void 0 ? void 0 : _a.trim()) || '';
15
26
  };
16
- // Resolve stroke color with fallback
27
+ // Color resolver
17
28
  var resolveStrokeColor = function (color) {
18
29
  if (!color)
19
30
  return getCssVar('primary') || '#8884d8';
@@ -21,13 +32,13 @@ var resolveStrokeColor = function (color) {
21
32
  return color;
22
33
  return getCssVar(color) || color;
23
34
  };
24
- // Custom tooltip
35
+ // Tooltip
25
36
  var CustomTooltip = function (_a) {
26
37
  var active = _a.active, payload = _a.payload, label = _a.label;
27
38
  if (active && payload && payload.length) {
28
39
  return (react_1.default.createElement("div", { className: "dark raised round-edge p-2 text-sm" },
29
40
  react_1.default.createElement("div", { className: "text-bold" }, label),
30
- payload.map(function (entry, index) { return (react_1.default.createElement("div", { key: index },
41
+ payload.map(function (entry, index) { return (react_1.default.createElement("div", { key: index, style: { lineHeight: 1 } },
31
42
  entry.name,
32
43
  ": ",
33
44
  react_1.default.createElement("span", { className: "font-semibold" }, entry.value))); })));
@@ -35,19 +46,20 @@ var CustomTooltip = function (_a) {
35
46
  return null;
36
47
  };
37
48
  var Lines = function (_a) {
38
- var data = _a.data, id = _a.id, series = _a.series, fromColor = _a.fromColor, toColor = _a.toColor, _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;
39
- return (react_1.default.createElement(recharts_1.ResponsiveContainer, { width: "100%", className: funcss },
40
- react_1.default.createElement(recharts_1.AreaChart, { data: data },
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;
50
+ var gradientId = id || 'colorUv';
51
+ return (react_1.default.createElement(recharts_1.ResponsiveContainer, { width: width, height: height, className: funcss },
52
+ react_1.default.createElement(recharts_1.AreaChart, { data: data, margin: margin },
41
53
  react_1.default.createElement("defs", null,
42
- react_1.default.createElement("linearGradient", { id: id || 'colorUv', x1: "0", y1: "0", x2: "0", y2: "1" },
54
+ react_1.default.createElement("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1" },
43
55
  react_1.default.createElement("stop", { offset: "5%", stopColor: getCssVar(fromColor || 'primary'), stopOpacity: 0.8 }),
44
56
  react_1.default.createElement("stop", { offset: "95%", stopColor: getCssVar(toColor || 'primary200'), stopOpacity: 0 }))),
45
57
  showGrid && react_1.default.createElement(recharts_1.CartesianGrid, { strokeDasharray: "3 3" }),
46
58
  !showGrid && horizontalLines && (react_1.default.createElement(recharts_1.CartesianGrid, { strokeDasharray: "3 3", horizontal: true, vertical: false })),
47
- showXAxis && react_1.default.createElement(recharts_1.XAxis, { className: 'text-xsm mt-4', strokeWidth: horizontalLines ? 0 : 0.2, dataKey: "label", angle: 35 }),
48
- showYAxis && react_1.default.createElement(recharts_1.YAxis, { strokeWidth: horizontalLines ? 0 : 0.2 }),
49
- react_1.default.createElement(recharts_1.Tooltip, { content: react_1.default.createElement(CustomTooltip, null) }),
50
- showLegend && react_1.default.createElement(recharts_1.Legend, null),
51
- 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(id || 'colorUv', ")"), fillOpacity: 1, strokeWidth: s.strokeWidth || 2, dot: s.dot !== false ? { r: 4 } : false, activeDot: { r: 8 } })); }))));
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))),
61
+ react_1.default.createElement(recharts_1.Tooltip, { content: react_1.default.createElement(CustomTooltip, null), formatter: tooltipFormatter }),
62
+ showLegend && react_1.default.createElement(recharts_1.Legend, __assign({}, legendProps)),
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 } })); }))));
52
64
  };
53
65
  exports.default = Lines;
package/ui/chart/Line.tsx CHANGED
@@ -31,45 +31,60 @@ interface AreaChartProps {
31
31
  data: DataItem[];
32
32
  series: ChartSeries[];
33
33
  fromColor?: string;
34
- id?: string;
35
34
  toColor?: string;
36
- showGrid?: boolean; // Show full grid (horizontal + vertical)
37
- horizontalLines?: boolean; // Only show horizontal divider lines
35
+ id?: string;
36
+
37
+ // Display controls
38
+ showGrid?: boolean;
39
+ horizontalLines?: boolean;
38
40
  showLegend?: boolean;
39
41
  showXAxis?: boolean;
40
42
  showYAxis?: boolean;
43
+
44
+ // Appearance controls
41
45
  funcss?: string;
42
46
  curveType?: 'linear' | 'monotone' | 'step' | 'basis';
47
+ height?: number | string;
48
+ width?: number | string;
49
+ margin?: { top?: number; right?: number; left?: number; bottom?: number };
50
+
51
+ // Axis controls
52
+ dy?: number;
53
+ xAxisProps?: any;
54
+ yAxisProps?: any;
55
+
56
+ // Tooltip / Legend
57
+ tooltipFormatter?: (value: any, name: string, props: any) => React.ReactNode;
58
+ legendProps?: any;
43
59
  }
44
60
 
45
- // Helper to read CSS variables
61
+ // CSS var resolver
46
62
  const getCssVar = (varName: string): string => {
47
63
  if (typeof window === 'undefined') return '';
48
64
  return getComputedStyle(document.documentElement).getPropertyValue(`--${varName}`)?.trim() || '';
49
65
  };
50
66
 
51
- // Resolve stroke color with fallback
67
+ // Color resolver
52
68
  const resolveStrokeColor = (color?: string): string => {
53
69
  if (!color) return getCssVar('primary') || '#8884d8';
54
70
  if (color.startsWith('#')) return color;
55
71
  return getCssVar(color) || color;
56
72
  };
57
73
 
58
- // Custom tooltip
74
+ // Tooltip
59
75
  const CustomTooltip = ({ active, payload, label }: any) => {
60
76
  if (active && payload && payload.length) {
61
77
  return (
62
78
  <div className="dark raised round-edge p-2 text-sm">
63
79
  <div className="text-bold">{label}</div>
64
80
  {payload.map((entry: any, index: number) => (
65
- <div key={index}>
81
+ <div key={index} style={{ lineHeight: 1 }}>
66
82
  {entry.name}: <span className="font-semibold">{entry.value}</span>
67
83
  </div>
68
84
  ))}
69
85
  </div>
70
86
  );
71
87
  }
72
-
73
88
  return null;
74
89
  };
75
90
 
@@ -79,6 +94,7 @@ const Lines: React.FC<AreaChartProps> = ({
79
94
  series,
80
95
  fromColor,
81
96
  toColor,
97
+ dy,
82
98
  showGrid = true,
83
99
  horizontalLines = false,
84
100
  showLegend = true,
@@ -86,13 +102,22 @@ const Lines: React.FC<AreaChartProps> = ({
86
102
  showYAxis = false,
87
103
  funcss,
88
104
  curveType = 'monotone',
105
+ height = "100%",
106
+ width = '100%',
107
+ margin = { top: 10, right: 30, left: 0, bottom: 20 },
108
+ xAxisProps = {},
109
+ yAxisProps = {},
110
+ tooltipFormatter,
111
+ legendProps = {},
89
112
  }) => {
113
+ const gradientId = id || 'colorUv';
114
+
90
115
  return (
91
- <ResponsiveContainer width="100%" className={funcss}>
92
- <AreaChart data={data}>
93
- {/* Gradient fill */}
116
+ <ResponsiveContainer width={width} height={height} className={funcss}>
117
+ <AreaChart data={data} margin={margin}>
118
+ {/* Gradient Fill */}
94
119
  <defs>
95
- <linearGradient id={id || 'colorUv'} x1="0" y1="0" x2="0" y2="1">
120
+ <linearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
96
121
  <stop
97
122
  offset="5%"
98
123
  stopColor={getCssVar(fromColor || 'primary')}
@@ -106,19 +131,37 @@ const Lines: React.FC<AreaChartProps> = ({
106
131
  </linearGradient>
107
132
  </defs>
108
133
 
109
- {/* Grid control */}
134
+ {/* Grid */}
110
135
  {showGrid && <CartesianGrid strokeDasharray="3 3" />}
111
136
  {!showGrid && horizontalLines && (
112
137
  <CartesianGrid strokeDasharray="3 3" horizontal={true} vertical={false} />
113
138
  )}
114
139
 
115
140
  {/* Axes */}
116
- {showXAxis && <XAxis className='text-xsm mt-4' strokeWidth={horizontalLines ? 0 : 0.2} dataKey="label" angle={35} />}
117
- {showYAxis && <YAxis strokeWidth={horizontalLines ? 0 : 0.2}/>}
141
+ {showXAxis && (
142
+ <XAxis
143
+ interval={0}
144
+ padding={{ left: 10, right: 10 }}
145
+ fontSize="0.8rem"
146
+ strokeWidth={horizontalLines ? 0 : 0.2}
147
+ dataKey="label"
148
+ angle={-35}
149
+ dy={dy ?? 10}
150
+ {...xAxisProps}
151
+ />
152
+ )}
153
+ {showYAxis && (
154
+ <YAxis
155
+ interval={0}
156
+ strokeWidth={horizontalLines ? 0 : 0.2}
157
+ fontSize="0.8rem"
158
+ {...yAxisProps}
159
+ />
160
+ )}
118
161
 
119
- {/* Tooltip and Legend */}
120
- <Tooltip content={<CustomTooltip />} />
121
- {showLegend && <Legend />}
162
+ {/* Tooltip & Legend */}
163
+ <Tooltip content={<CustomTooltip />} formatter={tooltipFormatter} />
164
+ {showLegend && <Legend {...legendProps} />}
122
165
 
123
166
  {/* Area series */}
124
167
  {series.map((s, index) => (
@@ -128,7 +171,7 @@ const Lines: React.FC<AreaChartProps> = ({
128
171
  dataKey={s.dataKey}
129
172
  name={s.label || s.dataKey}
130
173
  stroke={resolveStrokeColor(s.color)}
131
- fill={`url(#${id || 'colorUv'})`}
174
+ fill={`url(#${gradientId})`}
132
175
  fillOpacity={1}
133
176
  strokeWidth={s.strokeWidth || 2}
134
177
  dot={s.dot !== false ? { r: 4 } : false}
package/ui/chart/Pie.d.ts CHANGED
@@ -11,6 +11,10 @@ interface PieChartProps {
11
11
  funcss?: string;
12
12
  width?: number | string;
13
13
  height?: number | string;
14
+ outerRadius?: number;
15
+ innerRadius?: number;
16
+ tooltipFormatter?: (value: any, name: string, props: any) => React.ReactNode;
17
+ legendProps?: any;
14
18
  }
15
19
  declare const ChartPie: React.FC<PieChartProps>;
16
20
  export default ChartPie;
package/ui/chart/Pie.js CHANGED
@@ -1,11 +1,23 @@
1
1
  "use strict";
2
2
  'use client';
3
+ var __assign = (this && this.__assign) || function () {
4
+ __assign = Object.assign || function(t) {
5
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
6
+ s = arguments[i];
7
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
8
+ t[p] = s[p];
9
+ }
10
+ return t;
11
+ };
12
+ return __assign.apply(this, arguments);
13
+ };
3
14
  var __importDefault = (this && this.__importDefault) || function (mod) {
4
15
  return (mod && mod.__esModule) ? mod : { "default": mod };
5
16
  };
6
17
  Object.defineProperty(exports, "__esModule", { value: true });
7
18
  var react_1 = __importDefault(require("react"));
8
19
  var recharts_1 = require("recharts");
20
+ // Get CSS variable value from :root
9
21
  var getCssVar = function (varName) {
10
22
  var _a;
11
23
  if (typeof window === 'undefined')
@@ -13,21 +25,33 @@ var getCssVar = function (varName) {
13
25
  return (((_a = getComputedStyle(document.documentElement)
14
26
  .getPropertyValue("--".concat(varName))) === null || _a === void 0 ? void 0 : _a.trim()) || '');
15
27
  };
28
+ // Resolve color from CSS var or fallback
29
+ var resolveColor = function (input, fallback) {
30
+ if (fallback === void 0) { fallback = '#8884d8'; }
31
+ if (!input)
32
+ return getCssVar('primary') || fallback;
33
+ if (input.startsWith('#'))
34
+ return input;
35
+ return getCssVar(input) || input;
36
+ };
37
+ // Custom Tooltip
38
+ var CustomTooltip = function (_a) {
39
+ var active = _a.active, payload = _a.payload, label = _a.label;
40
+ if (active && payload && payload.length) {
41
+ return (react_1.default.createElement("div", { className: "dark raised round-edge p-2 text-sm" },
42
+ react_1.default.createElement("div", { className: "text-bold" }, payload[0].name),
43
+ react_1.default.createElement("div", { style: { lineHeight: 1 } },
44
+ "Count: ",
45
+ react_1.default.createElement("span", { className: "font-semibold" }, payload[0].value))));
46
+ }
47
+ return null;
48
+ };
16
49
  var ChartPie = function (_a) {
17
- 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;
18
- var resolveColor = function (input, fallback) {
19
- if (fallback === void 0) { fallback = '#8884d8'; }
20
- if (!input)
21
- return getCssVar('primary') || fallback;
22
- if (input.startsWith('#'))
23
- return input;
24
- return getCssVar(input) || input;
25
- };
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;
26
51
  var chart = (react_1.default.createElement(recharts_1.PieChart, { width: typeof width === 'number' ? width : undefined, height: typeof height === 'number' ? height : undefined },
27
- react_1.default.createElement(recharts_1.Tooltip, null),
28
- showLegend && react_1.default.createElement(recharts_1.Legend, null),
29
- react_1.default.createElement(recharts_1.Pie, { data: data, dataKey: "value", nameKey: "label", cx: "50%", cy: "50%", outerRadius: 100, innerRadius: donut ? 60 : 0, label: true }, 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 })); }))));
30
- // If no width or height is set, use ResponsiveContainer
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)),
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 })); }))));
31
55
  if (!width && !height) {
32
56
  return (react_1.default.createElement(recharts_1.ResponsiveContainer, { width: "100%", height: 300, className: funcss }, chart));
33
57
  }
package/ui/chart/Pie.tsx CHANGED
@@ -23,8 +23,13 @@ interface PieChartProps {
23
23
  funcss?: string;
24
24
  width?: number | string;
25
25
  height?: number | string;
26
+ outerRadius?: number;
27
+ innerRadius?: number;
28
+ tooltipFormatter?: (value: any, name: string, props: any) => React.ReactNode;
29
+ legendProps?: any;
26
30
  }
27
31
 
32
+ // Get CSS variable value from :root
28
33
  const getCssVar = (varName: string): string => {
29
34
  if (typeof window === 'undefined') return '';
30
35
  return (
@@ -34,6 +39,28 @@ const getCssVar = (varName: string): string => {
34
39
  );
35
40
  };
36
41
 
42
+ // Resolve color from CSS var or fallback
43
+ const resolveColor = (input?: string, fallback = '#8884d8') => {
44
+ if (!input) return getCssVar('primary') || fallback;
45
+ if (input.startsWith('#')) return input;
46
+ return getCssVar(input) || input;
47
+ };
48
+
49
+ // Custom Tooltip
50
+ const CustomTooltip = ({ active, payload, label }: any) => {
51
+ if (active && payload && payload.length) {
52
+ return (
53
+ <div className="dark raised round-edge p-2 text-sm">
54
+ <div className="text-bold">{payload[0].name}</div>
55
+ <div style={{ lineHeight: 1 }}>
56
+ Count: <span className="font-semibold">{payload[0].value}</span>
57
+ </div>
58
+ </div>
59
+ );
60
+ }
61
+ return null;
62
+ };
63
+
37
64
  const ChartPie: React.FC<PieChartProps> = ({
38
65
  data,
39
66
  donut = false,
@@ -41,26 +68,28 @@ const ChartPie: React.FC<PieChartProps> = ({
41
68
  funcss = '',
42
69
  width,
43
70
  height,
71
+ outerRadius = 100,
72
+ innerRadius,
73
+ tooltipFormatter,
74
+ legendProps = {},
44
75
  }) => {
45
- const resolveColor = (input?: string, fallback = '#8884d8') => {
46
- if (!input) return getCssVar('primary') || fallback;
47
- if (input.startsWith('#')) return input;
48
- return getCssVar(input) || input;
49
- };
50
-
51
76
  const chart = (
52
- <RePieChart width={typeof width === 'number' ? width : undefined} height={typeof height === 'number' ? height : undefined}>
53
- <Tooltip />
54
- {showLegend && <Legend />}
77
+ <RePieChart
78
+ width={typeof width === 'number' ? width : undefined}
79
+ height={typeof height === 'number' ? height : undefined}
80
+ >
81
+ <Tooltip content={<CustomTooltip />} formatter={tooltipFormatter} />
82
+ {showLegend && <Legend {...legendProps} />}
55
83
  <Pie
56
84
  data={data}
57
85
  dataKey="value"
58
86
  nameKey="label"
59
87
  cx="50%"
60
88
  cy="50%"
61
- outerRadius={100}
62
- innerRadius={donut ? 60 : 0}
63
- label
89
+ outerRadius={outerRadius}
90
+ innerRadius={donut ? innerRadius ?? outerRadius * 0.6 : 0}
91
+ label={false} // <-- Hide slice value labels
92
+ labelLine={false} // <-- Remove line pointers
64
93
  >
65
94
  {data.map((entry, index) => (
66
95
  <Cell
@@ -74,7 +103,6 @@ const ChartPie: React.FC<PieChartProps> = ({
74
103
  </RePieChart>
75
104
  );
76
105
 
77
- // If no width or height is set, use ResponsiveContainer
78
106
  if (!width && !height) {
79
107
  return (
80
108
  <ResponsiveContainer width="100%" height={300} className={funcss}>
package/ui/sidebar/SideBar.d.ts CHANGED
@@ -16,10 +16,13 @@ interface SideBarProps {
16
16
  sidebarWidth?: number;
17
17
  sidebarCss?: string;
18
18
  activeCss?: string;
19
+ iconCSS?: string;
19
20
  bodyCss?: string;
21
+ popIcon?: boolean;
22
+ dividers?: boolean;
20
23
  links?: SideBarLink[];
21
24
  children?: ReactNode;
22
25
  onClose?: () => void;
23
26
  }
24
- export default function SideBar({ funcss, position, open, header, content, footer, top, sidebarWidth, sidebarCss, activeCss, bodyCss, links, children, onClose, }: SideBarProps): React.JSX.Element;
27
+ export default function SideBar({ funcss, position, open, header, content, footer, top, sidebarWidth, iconCSS, sidebarCss, activeCss, bodyCss, popIcon, dividers, links, children, onClose, }: SideBarProps): React.JSX.Element;
25
28
  export {};