@pagamio/frontend-commons-lib 0.8.223 → 0.8.225
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/lib/dashboard-visuals/components/CardWrapper.js +2 -1
- package/lib/dashboard-visuals/utils/chartOptions.d.ts +1 -1
- package/lib/dashboard-visuals/utils/chartOptions.js +8 -1
- package/lib/dashboard-visuals/visuals/BarChart.js +63 -6
- package/lib/dashboard-visuals/visuals/DonutChart.js +34 -28
- package/lib/dashboard-visuals/visuals/Tile.d.ts +1 -0
- package/lib/dashboard-visuals/visuals/Tile.js +2 -2
- package/package.json +1 -1
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { ExternalLinkIcon } from '@radix-ui/react-icons';
|
|
3
3
|
import { Card as FlowbiteCard } from 'flowbite-react';
|
|
4
|
+
import { cn } from '../../helpers';
|
|
4
5
|
const Card = ({ title, children, onOpenDetails, className, showDetailsModal = true }) => {
|
|
5
|
-
return (_jsxs(FlowbiteCard, { className:
|
|
6
|
+
return (_jsxs(FlowbiteCard, { className: cn('relative w-full sm:w-auto border-b-4 border-b-primary-500', className), style: {
|
|
6
7
|
height: '100%',
|
|
7
8
|
}, theme: {
|
|
8
9
|
root: {
|
|
@@ -181,9 +181,16 @@ export const getChartBarOptions = ({ title, colorScheme = ['#60A5FA', '#93C5FD']
|
|
|
181
181
|
yAxis: {
|
|
182
182
|
type: 'category',
|
|
183
183
|
name: yAxisLabel,
|
|
184
|
-
data: data
|
|
184
|
+
data: data
|
|
185
|
+
.map((item) => {
|
|
186
|
+
const value = item[yAxisDataNameKey];
|
|
187
|
+
return value ? String(value).toUpperCase() : '';
|
|
188
|
+
})
|
|
189
|
+
.reverse(), // Reverse the categories to maintain original order
|
|
185
190
|
axisLabel: {
|
|
186
191
|
formatter: (value) => {
|
|
192
|
+
if (!value)
|
|
193
|
+
return '';
|
|
187
194
|
return value.length > 20 ? `${value.substring(0, 17)}...` : value;
|
|
188
195
|
},
|
|
189
196
|
},
|
|
@@ -8,26 +8,56 @@ const BarChart = ({ query, options, title, stacked, url = DashboardPaths.QUERY,
|
|
|
8
8
|
return {
|
|
9
9
|
tooltip: {
|
|
10
10
|
trigger: 'axis',
|
|
11
|
-
axisPointer: {
|
|
11
|
+
axisPointer: {
|
|
12
|
+
type: 'shadow',
|
|
13
|
+
shadowStyle: {
|
|
14
|
+
color: 'rgba(0, 0, 0, 0.05)',
|
|
15
|
+
},
|
|
16
|
+
},
|
|
17
|
+
backgroundColor: 'rgba(255, 255, 255, 0.95)',
|
|
18
|
+
borderColor: '#e5e7eb',
|
|
19
|
+
borderWidth: 1,
|
|
20
|
+
borderRadius: 6,
|
|
21
|
+
padding: [8, 12],
|
|
22
|
+
textStyle: {
|
|
23
|
+
color: '#374151',
|
|
24
|
+
fontSize: 13,
|
|
25
|
+
},
|
|
12
26
|
...chartToolTip,
|
|
13
27
|
},
|
|
14
28
|
color: props.colors || defaultColors,
|
|
15
29
|
legend: {
|
|
16
30
|
type: 'scroll',
|
|
17
|
-
top:
|
|
31
|
+
top: 10,
|
|
32
|
+
left: 'center',
|
|
33
|
+
itemWidth: 12,
|
|
34
|
+
itemHeight: 12,
|
|
35
|
+
textStyle: {
|
|
36
|
+
fontSize: 12,
|
|
37
|
+
color: '#6B7280',
|
|
38
|
+
},
|
|
39
|
+
icon: 'roundRect',
|
|
18
40
|
},
|
|
19
41
|
grid: {
|
|
20
|
-
top:
|
|
21
|
-
bottom:
|
|
22
|
-
left:
|
|
23
|
-
right:
|
|
42
|
+
top: 80,
|
|
43
|
+
bottom: 70,
|
|
44
|
+
left: 60,
|
|
45
|
+
right: 30,
|
|
24
46
|
containLabel: true,
|
|
25
47
|
},
|
|
26
48
|
xAxis: {
|
|
27
49
|
type: 'category',
|
|
50
|
+
axisLine: {
|
|
51
|
+
lineStyle: {
|
|
52
|
+
color: '#E5E7EB',
|
|
53
|
+
},
|
|
54
|
+
},
|
|
28
55
|
axisLabel: {
|
|
29
56
|
interval: 0,
|
|
30
57
|
rotate: xAxisLabelRotate,
|
|
58
|
+
color: '#6B7280',
|
|
59
|
+
fontSize: 11,
|
|
60
|
+
margin: 12,
|
|
31
61
|
formatter: (value) => {
|
|
32
62
|
if (typeof value !== 'string')
|
|
33
63
|
return value;
|
|
@@ -40,17 +70,33 @@ const BarChart = ({ query, options, title, stacked, url = DashboardPaths.QUERY,
|
|
|
40
70
|
return value;
|
|
41
71
|
},
|
|
42
72
|
},
|
|
73
|
+
axisTick: {
|
|
74
|
+
show: false,
|
|
75
|
+
},
|
|
43
76
|
},
|
|
44
77
|
yAxis: {
|
|
45
78
|
type: 'value',
|
|
79
|
+
axisLine: {
|
|
80
|
+
show: false,
|
|
81
|
+
},
|
|
82
|
+
axisTick: {
|
|
83
|
+
show: false,
|
|
84
|
+
},
|
|
85
|
+
axisLabel: {
|
|
86
|
+
color: '#6B7280',
|
|
87
|
+
fontSize: 11,
|
|
88
|
+
},
|
|
46
89
|
splitLine: {
|
|
47
90
|
lineStyle: {
|
|
48
91
|
type: 'dashed',
|
|
92
|
+
color: '#F3F4F6',
|
|
49
93
|
},
|
|
50
94
|
},
|
|
51
95
|
...(yAxisLabelFormatter && {
|
|
52
96
|
axisLabel: {
|
|
53
97
|
formatter: yAxisLabelFormatter,
|
|
98
|
+
color: '#6B7280',
|
|
99
|
+
fontSize: 11,
|
|
54
100
|
},
|
|
55
101
|
}),
|
|
56
102
|
},
|
|
@@ -72,6 +118,17 @@ const BarChart = ({ query, options, title, stacked, url = DashboardPaths.QUERY,
|
|
|
72
118
|
...series,
|
|
73
119
|
type: 'bar',
|
|
74
120
|
stack: stacked ? 'stack' : undefined,
|
|
121
|
+
barMaxWidth: 50,
|
|
122
|
+
itemStyle: {
|
|
123
|
+
borderRadius: stacked ? 0 : [4, 4, 0, 0],
|
|
124
|
+
},
|
|
125
|
+
emphasis: {
|
|
126
|
+
itemStyle: {
|
|
127
|
+
shadowBlur: 10,
|
|
128
|
+
shadowOffsetX: 0,
|
|
129
|
+
shadowColor: 'rgba(0, 0, 0, 0.2)',
|
|
130
|
+
},
|
|
131
|
+
},
|
|
75
132
|
}));
|
|
76
133
|
const chartOptionsData = {
|
|
77
134
|
...barChartOptions,
|
|
@@ -7,10 +7,14 @@ const DonutChart = ({ title, url = DashboardPaths.QUERY, query, nameKey, valueKe
|
|
|
7
7
|
const formatChartData = useCallback((data) => {
|
|
8
8
|
if (!data?.length)
|
|
9
9
|
return { legendData: [], seriesData: [] };
|
|
10
|
-
const legendData = data.map((item) =>
|
|
10
|
+
const legendData = data.map((item) => {
|
|
11
|
+
const name = String(item[nameKey] || '');
|
|
12
|
+
return name.toUpperCase();
|
|
13
|
+
});
|
|
11
14
|
const seriesData = data.map((item) => {
|
|
15
|
+
const name = String(item[nameKey] || '');
|
|
12
16
|
const dataPoint = {
|
|
13
|
-
name:
|
|
17
|
+
name: name.toUpperCase(),
|
|
14
18
|
value: item[valueKey],
|
|
15
19
|
};
|
|
16
20
|
return dataPoint;
|
|
@@ -22,68 +26,70 @@ const DonutChart = ({ title, url = DashboardPaths.QUERY, query, nameKey, valueKe
|
|
|
22
26
|
tooltip: {
|
|
23
27
|
trigger: 'item',
|
|
24
28
|
extraCssText: 'box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);',
|
|
25
|
-
backgroundColor: 'rgba(255, 255, 255, 0.
|
|
29
|
+
backgroundColor: 'rgba(255, 255, 255, 0.95)',
|
|
26
30
|
textStyle: {
|
|
27
31
|
color: '#333',
|
|
32
|
+
fontSize: 13,
|
|
28
33
|
},
|
|
29
34
|
borderWidth: 1,
|
|
30
|
-
borderColor: '#
|
|
35
|
+
borderColor: '#e5e7eb',
|
|
36
|
+
borderRadius: 6,
|
|
37
|
+
padding: [8, 12],
|
|
31
38
|
appendToBody: true,
|
|
32
39
|
formatter: undefined,
|
|
33
40
|
},
|
|
34
41
|
legend: {
|
|
35
42
|
orient: 'horizontal',
|
|
36
|
-
bottom:
|
|
43
|
+
bottom: 5,
|
|
37
44
|
left: 'center',
|
|
38
|
-
itemWidth:
|
|
39
|
-
itemHeight:
|
|
45
|
+
itemWidth: 12,
|
|
46
|
+
itemHeight: 12,
|
|
47
|
+
itemGap: 15,
|
|
40
48
|
textStyle: {
|
|
41
|
-
fontSize:
|
|
49
|
+
fontSize: 11,
|
|
50
|
+
color: '#374151',
|
|
51
|
+
fontWeight: 500,
|
|
42
52
|
},
|
|
43
|
-
icon: '
|
|
53
|
+
icon: 'circle',
|
|
44
54
|
pageIconSize: 12,
|
|
55
|
+
tooltip: {
|
|
56
|
+
show: true,
|
|
57
|
+
},
|
|
58
|
+
data: chartData.legendData,
|
|
45
59
|
},
|
|
46
60
|
color: colors,
|
|
47
61
|
series: [
|
|
48
62
|
{
|
|
49
63
|
name: title,
|
|
50
64
|
type: 'pie',
|
|
51
|
-
radius: ['
|
|
52
|
-
center: ['50%', '
|
|
53
|
-
avoidLabelOverlap:
|
|
65
|
+
radius: ['45%', '75%'],
|
|
66
|
+
center: ['50%', '42%'],
|
|
67
|
+
avoidLabelOverlap: true,
|
|
54
68
|
itemStyle: {
|
|
55
69
|
borderColor: '#fff',
|
|
56
70
|
borderWidth: 2,
|
|
71
|
+
borderRadius: 4,
|
|
57
72
|
},
|
|
58
73
|
label: {
|
|
59
|
-
show:
|
|
60
|
-
position: 'outside',
|
|
61
|
-
formatter: '{b}',
|
|
62
|
-
fontSize: 12,
|
|
63
|
-
lineHeight: 15,
|
|
64
|
-
rich: {
|
|
65
|
-
b: {
|
|
66
|
-
fontSize: 12,
|
|
67
|
-
lineHeight: 15,
|
|
68
|
-
},
|
|
69
|
-
},
|
|
74
|
+
show: false,
|
|
70
75
|
},
|
|
71
76
|
labelLine: {
|
|
72
|
-
show:
|
|
73
|
-
length: 15,
|
|
74
|
-
length2: 10,
|
|
77
|
+
show: false,
|
|
75
78
|
},
|
|
76
79
|
emphasis: {
|
|
77
80
|
label: {
|
|
78
|
-
show:
|
|
81
|
+
show: showLabels,
|
|
79
82
|
fontSize: 14,
|
|
80
83
|
fontWeight: 'bold',
|
|
84
|
+
color: '#111827',
|
|
81
85
|
},
|
|
82
86
|
itemStyle: {
|
|
83
87
|
shadowBlur: 10,
|
|
84
88
|
shadowOffsetX: 0,
|
|
85
|
-
shadowColor: 'rgba(0, 0, 0, 0.
|
|
89
|
+
shadowColor: 'rgba(0, 0, 0, 0.3)',
|
|
86
90
|
},
|
|
91
|
+
scale: true,
|
|
92
|
+
scaleSize: 8,
|
|
87
93
|
},
|
|
88
94
|
data: chartData.seriesData,
|
|
89
95
|
},
|
|
@@ -4,7 +4,7 @@ import Card from '../components/CardWrapper';
|
|
|
4
4
|
import ChartWrapper from '../components/ChartWrapper';
|
|
5
5
|
import { useChartData } from '../hooks/useChartData';
|
|
6
6
|
import { DashboardPaths, formatValue } from '../utils';
|
|
7
|
-
const Tile = ({ query, title, format, url = DashboardPaths.METRICS, details, valueKey, previousValueKey, changeKey, currency: propCurrency, currencyDisplaySymbol, ...props }) => {
|
|
7
|
+
const Tile = ({ query, title, format, url = DashboardPaths.METRICS, details, valueKey, previousValueKey, changeKey, currency: propCurrency, currencyDisplaySymbol, className, ...props }) => {
|
|
8
8
|
const { data, error, loading, isEmpty, refresh } = useChartData(url, query);
|
|
9
9
|
// Safe default values - handle both flat and nested data structures
|
|
10
10
|
let value = 0;
|
|
@@ -23,7 +23,7 @@ const Tile = ({ query, title, format, url = DashboardPaths.METRICS, details, val
|
|
|
23
23
|
}
|
|
24
24
|
}
|
|
25
25
|
const currency = propCurrency || (!Array.isArray(data) ? data?.additionalData?.currency : undefined) || undefined;
|
|
26
|
-
return (_jsx(Card, { title: title, children: _jsx(ChartWrapper, { loading: loading && !data, error: error, isEmpty: isEmpty, onRetry: refresh, children: _jsx("div", { className: "flex justify-between", style: { height: '50px' }, children: _jsx("div", { className: "text-xl font-400", children: currency
|
|
26
|
+
return (_jsx(Card, { title: title, className: className, children: _jsx(ChartWrapper, { loading: loading && !data, error: error, isEmpty: isEmpty, onRetry: refresh, children: _jsx("div", { className: "flex justify-between", style: { height: '50px' }, children: _jsx("div", { className: "text-xl font-400", children: currency
|
|
27
27
|
? formatPrice(Number(value.toFixed(2)), currency, 2, undefined, currencyDisplaySymbol)
|
|
28
28
|
: formatValue(Number(value.toFixed(2)), 'number') }) }) }) }));
|
|
29
29
|
};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pagamio/frontend-commons-lib",
|
|
3
3
|
"description": "Pagamio library for Frontend reusable components like the form engine and table container",
|
|
4
|
-
"version": "0.8.
|
|
4
|
+
"version": "0.8.225",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public",
|
|
7
7
|
"provenance": false
|