phx-react 1.3.607 → 1.3.610
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/dist/cjs/components/Chart/BarChart/BarChart.d.ts +41 -0
- package/dist/cjs/components/Chart/BarChart/BarChart.js +150 -0
- package/dist/cjs/components/Chart/BarChart/BarChart.js.map +1 -0
- package/dist/cjs/components/Chart/DonutChart/DonutChart.d.ts +13 -0
- package/dist/cjs/components/Chart/DonutChart/DonutChart.js +104 -0
- package/dist/cjs/components/Chart/DonutChart/DonutChart.js.map +1 -0
- package/dist/cjs/components/Chart/PieChart/PieChart.d.ts +14 -0
- package/dist/cjs/components/Chart/PieChart/PieChart.js +78 -0
- package/dist/cjs/components/Chart/PieChart/PieChart.js.map +1 -0
- package/dist/cjs/components/Chart/index.d.ts +3 -0
- package/dist/cjs/components/Chart/index.js +7 -0
- package/dist/cjs/components/Chart/index.js.map +1 -0
- package/dist/cjs/components/Select/Select.d.ts +2 -0
- package/dist/cjs/components/Select/Select.js +4 -2
- package/dist/cjs/components/Select/Select.js.map +1 -1
- package/dist/cjs/index.d.ts +4 -1
- package/dist/cjs/index.js +7 -1
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/components/Chart/BarChart/BarChart.d.ts +41 -0
- package/dist/esm/components/Chart/BarChart/BarChart.js +148 -0
- package/dist/esm/components/Chart/BarChart/BarChart.js.map +1 -0
- package/dist/esm/components/Chart/DonutChart/DonutChart.d.ts +13 -0
- package/dist/esm/components/Chart/DonutChart/DonutChart.js +101 -0
- package/dist/esm/components/Chart/DonutChart/DonutChart.js.map +1 -0
- package/dist/esm/components/Chart/PieChart/PieChart.d.ts +14 -0
- package/dist/esm/components/Chart/PieChart/PieChart.js +76 -0
- package/dist/esm/components/Chart/PieChart/PieChart.js.map +1 -0
- package/dist/esm/components/Chart/index.d.ts +3 -0
- package/dist/esm/components/Chart/index.js +4 -0
- package/dist/esm/components/Chart/index.js.map +1 -0
- package/dist/esm/components/Select/Select.d.ts +2 -0
- package/dist/esm/components/Select/Select.js +4 -2
- package/dist/esm/components/Select/Select.js.map +1 -1
- package/dist/esm/index.d.ts +4 -1
- package/dist/esm/index.js +4 -1
- package/dist/esm/index.js.map +1 -1
- package/package.json +3 -2
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
interface PHXBarChartProps {
|
|
3
|
+
data: Array<{
|
|
4
|
+
name: string;
|
|
5
|
+
uv: number;
|
|
6
|
+
pv: number;
|
|
7
|
+
amt: number;
|
|
8
|
+
color: string;
|
|
9
|
+
value: number;
|
|
10
|
+
lineChart: number;
|
|
11
|
+
yAxisRight: number;
|
|
12
|
+
}>;
|
|
13
|
+
dataKeyLineChart?: string;
|
|
14
|
+
colorLineChart?: string;
|
|
15
|
+
duplicateChart?: boolean;
|
|
16
|
+
dataKeyChartA?: string;
|
|
17
|
+
dataKeyChartB?: string;
|
|
18
|
+
xAxisKey?: string;
|
|
19
|
+
yAxisRightKey?: string;
|
|
20
|
+
domain: Array<any>;
|
|
21
|
+
nameLineChart?: string;
|
|
22
|
+
hiddenLineChart?: boolean;
|
|
23
|
+
doubleColumnInRow?: boolean;
|
|
24
|
+
dataKeyColumnDouble?: string;
|
|
25
|
+
barSize?: number;
|
|
26
|
+
nameColumnDouble: string;
|
|
27
|
+
chartType: 'double' | 'single' | 'one-to-many' | 'many-to-one' | 'many-to-many';
|
|
28
|
+
radiusChart: Array<number>;
|
|
29
|
+
chartColumnA: Array<{
|
|
30
|
+
name: string;
|
|
31
|
+
value: number;
|
|
32
|
+
color: string;
|
|
33
|
+
}>;
|
|
34
|
+
chartColumnB: Array<{
|
|
35
|
+
name: string;
|
|
36
|
+
value: number;
|
|
37
|
+
color: string;
|
|
38
|
+
}>;
|
|
39
|
+
}
|
|
40
|
+
declare function PHXBarChart(props: Readonly<PHXBarChartProps>): React.JSX.Element;
|
|
41
|
+
export default PHXBarChart;
|
|
@@ -0,0 +1,150 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
exports.__esModule = true;
|
|
3
|
+
var tslib_1 = require("tslib");
|
|
4
|
+
var react_1 = tslib_1.__importStar(require("react"));
|
|
5
|
+
var recharts_1 = require("recharts");
|
|
6
|
+
var Card_1 = require("../../Card");
|
|
7
|
+
function PHXBarChart(props) {
|
|
8
|
+
var data = props.data, dataKeyLineChart = props.dataKeyLineChart, colorLineChart = props.colorLineChart, dataKeyChartA = props.dataKeyChartA, dataKeyChartB = props.dataKeyChartB, xAxisKey = props.xAxisKey, yAxisRightKey = props.yAxisRightKey, domain = props.domain, nameLineChart = props.nameLineChart, hiddenLineChart = props.hiddenLineChart, doubleColumnInRow = props.doubleColumnInRow, barSize = props.barSize, nameColumnDouble = props.nameColumnDouble, chartType = props.chartType, radiusChart = props.radiusChart, chartColumnA = props.chartColumnA, chartColumnB = props.chartColumnB;
|
|
9
|
+
var _a = (0, react_1.useState)(null), hoveredBar = _a[0], setHoveredBar = _a[1];
|
|
10
|
+
var onMouseEnter = function (value) {
|
|
11
|
+
setHoveredBar(value.tooltipPayload[0].name);
|
|
12
|
+
};
|
|
13
|
+
var onMouseLeave = function () {
|
|
14
|
+
setHoveredBar(null);
|
|
15
|
+
};
|
|
16
|
+
var CustomToolLegend = function (propsTooltip) {
|
|
17
|
+
var payload = propsTooltip.payload;
|
|
18
|
+
// gộp những item có label name giống nhau thành 1
|
|
19
|
+
var aggregatedItems = {};
|
|
20
|
+
payload.forEach(function (item) {
|
|
21
|
+
var _a;
|
|
22
|
+
var name = (_a = item === null || item === void 0 ? void 0 : item.payload) === null || _a === void 0 ? void 0 : _a.name;
|
|
23
|
+
if (!aggregatedItems[name]) {
|
|
24
|
+
aggregatedItems[name] = tslib_1.__assign(tslib_1.__assign({}, item), { count: 1 });
|
|
25
|
+
}
|
|
26
|
+
else {
|
|
27
|
+
aggregatedItems[name].count++;
|
|
28
|
+
}
|
|
29
|
+
});
|
|
30
|
+
var aggregatedItemsArray = Object.values(aggregatedItems);
|
|
31
|
+
return (react_1["default"].createElement("div", { className: 'custom-legend mt-4' },
|
|
32
|
+
react_1["default"].createElement("div", { className: 'flex flex-wrap justify-end gap-2' }, aggregatedItemsArray === null || aggregatedItemsArray === void 0 ? void 0 : aggregatedItemsArray.map(function (item) { return (react_1["default"].createElement("div", { key: item.id, style: {
|
|
33
|
+
backgroundColor: '#F6F6F7',
|
|
34
|
+
padding: 5,
|
|
35
|
+
borderRadius: '5px'
|
|
36
|
+
} },
|
|
37
|
+
react_1["default"].createElement("div", { style: {
|
|
38
|
+
display: 'flex',
|
|
39
|
+
alignItems: 'center',
|
|
40
|
+
opacity: !hoveredBar ? 1 : hoveredBar === item.payload.name ? 1 : 0.5
|
|
41
|
+
} },
|
|
42
|
+
react_1["default"].createElement("div", { style: {
|
|
43
|
+
borderRadius: '4px',
|
|
44
|
+
width: '18px',
|
|
45
|
+
height: '18px',
|
|
46
|
+
background: "linear-gradient(".concat(item.color, ", ").concat(item.color, ")"),
|
|
47
|
+
alignItems: 'center',
|
|
48
|
+
alignContent: 'center'
|
|
49
|
+
} }),
|
|
50
|
+
react_1["default"].createElement("p", { style: {
|
|
51
|
+
marginLeft: '10px',
|
|
52
|
+
fontSize: '14px',
|
|
53
|
+
marginRight: 4
|
|
54
|
+
} }, item === null || item === void 0 ? void 0 : item.payload.name)))); }))));
|
|
55
|
+
};
|
|
56
|
+
var CustomToolTip = function (propsTooltip) {
|
|
57
|
+
var _a, _b;
|
|
58
|
+
var active = propsTooltip.active, payload = propsTooltip.payload;
|
|
59
|
+
if (!active || !payload || payload.length === 0) {
|
|
60
|
+
return null;
|
|
61
|
+
}
|
|
62
|
+
var groupedItems = {};
|
|
63
|
+
payload.forEach(function (item) {
|
|
64
|
+
var name = item.name;
|
|
65
|
+
if (!groupedItems[name]) {
|
|
66
|
+
groupedItems[name] = item;
|
|
67
|
+
}
|
|
68
|
+
});
|
|
69
|
+
var groupedItemsArray = Object.values(groupedItems);
|
|
70
|
+
return (react_1["default"].createElement("div", { style: {
|
|
71
|
+
backgroundColor: '#f5f5f5',
|
|
72
|
+
margin: 10,
|
|
73
|
+
width: '10rem',
|
|
74
|
+
padding: 3,
|
|
75
|
+
borderRadius: 8
|
|
76
|
+
} },
|
|
77
|
+
react_1["default"].createElement("div", { className: 'ml-2 mt-2' }, (_b = (_a = groupedItemsArray[0]) === null || _a === void 0 ? void 0 : _a.payload) === null || _b === void 0 ? void 0 : _b.name),
|
|
78
|
+
groupedItemsArray.map(function (item) { return (react_1["default"].createElement("div", { key: item.id, style: {
|
|
79
|
+
display: 'flex',
|
|
80
|
+
padding: 5,
|
|
81
|
+
marginTop: 4
|
|
82
|
+
} },
|
|
83
|
+
react_1["default"].createElement("div", { style: {
|
|
84
|
+
borderRadius: '4px',
|
|
85
|
+
width: '18px',
|
|
86
|
+
height: '18px',
|
|
87
|
+
background: "linear-gradient(".concat(item.color, ", ").concat(item.color, ")"),
|
|
88
|
+
alignItems: 'center',
|
|
89
|
+
alignContent: 'center',
|
|
90
|
+
opacity: hoveredBar === item.name ? 1 : 0.5
|
|
91
|
+
} }),
|
|
92
|
+
react_1["default"].createElement("div", { className: 'ml-2', style: { opacity: hoveredBar === item.name ? 1 : 0.5 } }, item.name),
|
|
93
|
+
react_1["default"].createElement("div", { style: {
|
|
94
|
+
marginLeft: 'auto',
|
|
95
|
+
opacity: hoveredBar === item.name ? 1 : 0.5
|
|
96
|
+
} }, item.payload.amt))); })));
|
|
97
|
+
};
|
|
98
|
+
var columns = chartColumnA.map(function (item) { return (tslib_1.__assign({}, item)); });
|
|
99
|
+
var columnsPageB = chartColumnB.map(function (item) { return (tslib_1.__assign({}, item)); });
|
|
100
|
+
var handleBoderChart = function (index, chartColumn) {
|
|
101
|
+
var chartIndex = index === chartColumn.length - 1 ? radiusChart !== null && radiusChart !== void 0 ? radiusChart : [6, 6, 0, 0] : [0, 0, 0, 0];
|
|
102
|
+
return chartIndex;
|
|
103
|
+
};
|
|
104
|
+
return (react_1["default"].createElement(Card_1.PHXCard, null,
|
|
105
|
+
react_1["default"].createElement(recharts_1.ResponsiveContainer, { height: 500, width: '100%' },
|
|
106
|
+
react_1["default"].createElement(recharts_1.ComposedChart, { barGap: 20, data: data, height: 300, width: 500 },
|
|
107
|
+
react_1["default"].createElement(recharts_1.CartesianGrid, { strokeDasharray: '3 3', vertical: false }),
|
|
108
|
+
react_1["default"].createElement(recharts_1.XAxis, { axisLine: false, dataKey: xAxisKey !== null && xAxisKey !== void 0 ? xAxisKey : 'name' }),
|
|
109
|
+
react_1["default"].createElement(recharts_1.YAxis, { axisLine: false }),
|
|
110
|
+
react_1["default"].createElement(recharts_1.YAxis, { axisLine: false, dataKey: yAxisRightKey !== null && yAxisRightKey !== void 0 ? yAxisRightKey : 'yAxisRight', domain: domain, minTickGap: 20, orientation: 'right', tickCount: 5, yAxisId: 2 }),
|
|
111
|
+
react_1["default"].createElement(recharts_1.Tooltip, { content: react_1["default"].createElement(CustomToolTip, null) }),
|
|
112
|
+
react_1["default"].createElement(recharts_1.Legend, { content: react_1["default"].createElement(CustomToolLegend, null) }),
|
|
113
|
+
chartType === 'one-to-many' && (react_1["default"].createElement(react_1["default"].Fragment, null,
|
|
114
|
+
react_1["default"].createElement(recharts_1.Bar, { barSize: barSize, dataKey: dataKeyChartA !== null && dataKeyChartA !== void 0 ? dataKeyChartA : 'pv', onMouseEnter: function (value) { return onMouseEnter(value); }, fill: '#dd75c1', name: 'name' },
|
|
115
|
+
react_1["default"].createElement(recharts_1.Cell, { fill: '#dd75c1' })),
|
|
116
|
+
columnsPageB.map(function (item, index) { return (react_1["default"].createElement(recharts_1.Bar, { key: "bar-pageB-".concat(index), onMouseEnter: function (value) { return onMouseEnter(value); }, onMouseLeave: onMouseLeave, barSize: barSize, dataKey: dataKeyChartB !== null && dataKeyChartB !== void 0 ? dataKeyChartB : 'amt', fill: item.color, name: item.name, position: { x: 30 },
|
|
117
|
+
// @ts-ignore
|
|
118
|
+
radius: handleBoderChart(index, columnsPageB), stackId: 'stackB' },
|
|
119
|
+
react_1["default"].createElement(recharts_1.Cell, { key: "cell-pageB-".concat(index), fill: item.color }))); }))),
|
|
120
|
+
chartType === 'many-to-one' && (react_1["default"].createElement(react_1["default"].Fragment, null,
|
|
121
|
+
columnsPageB.map(function (item, index) { return (react_1["default"].createElement(recharts_1.Bar, { key: "bar-pageB-".concat(index), onMouseEnter: function (value) { return onMouseEnter(value); }, onMouseLeave: onMouseLeave, barSize: barSize, dataKey: 'pv', fill: item.color, name: item.name, position: { x: 30 },
|
|
122
|
+
// @ts-ignore
|
|
123
|
+
radius: handleBoderChart(index, columnsPageB), stackId: 'stackB' },
|
|
124
|
+
react_1["default"].createElement(recharts_1.Cell, { key: "cell-pageB-".concat(index), fill: item.color }))); }),
|
|
125
|
+
react_1["default"].createElement(recharts_1.Bar, { onMouseEnter: function (value) { return onMouseEnter(value); }, onMouseLeave: onMouseLeave, barSize: barSize, dataKey: dataKeyChartB !== null && dataKeyChartB !== void 0 ? dataKeyChartB : 'uv', fill: '#dd75c1', name: 'name' },
|
|
126
|
+
react_1["default"].createElement(recharts_1.Cell, { fill: '#dd75c1' })))),
|
|
127
|
+
chartType === 'single' && (
|
|
128
|
+
// @ts-ignore
|
|
129
|
+
react_1["default"].createElement(recharts_1.Bar, { onMouseEnter: function (value) { return onMouseEnter(value); }, onMouseLeave: onMouseLeave, barSize: barSize, dataKey: dataKeyChartB !== null && dataKeyChartB !== void 0 ? dataKeyChartB : 'pv', fill: '#dd75c1', name: 'name' },
|
|
130
|
+
react_1["default"].createElement(recharts_1.Cell, { fill: '#dd75c1' }))),
|
|
131
|
+
chartType === 'double' && (react_1["default"].createElement(react_1["default"].Fragment, null,
|
|
132
|
+
react_1["default"].createElement(recharts_1.Bar, { onMouseEnter: function (value) { return onMouseEnter(value); }, onMouseLeave: onMouseLeave, barSize: barSize, dataKey: dataKeyChartB !== null && dataKeyChartB !== void 0 ? dataKeyChartB : 'pv', fill: '#dd75c1', name: 'name' },
|
|
133
|
+
react_1["default"].createElement(recharts_1.Cell, { fill: '#dd75c1' })),
|
|
134
|
+
doubleColumnInRow && (
|
|
135
|
+
// @ts-ignore
|
|
136
|
+
react_1["default"].createElement(recharts_1.Bar, { onMouseEnter: function (value) { return onMouseEnter(value); }, onMouseLeave: onMouseLeave, barSize: barSize, dataKey: dataKeyChartB !== null && dataKeyChartB !== void 0 ? dataKeyChartB : 'uv', fill: '#8868ee', name: nameColumnDouble },
|
|
137
|
+
react_1["default"].createElement(recharts_1.Cell, { fill: '#8868ee' }))))),
|
|
138
|
+
chartType === 'many-to-many' && (react_1["default"].createElement(react_1["default"].Fragment, null,
|
|
139
|
+
columns.map(function (item, index) { return (react_1["default"].createElement(recharts_1.Bar, { key: "bar-pageA-".concat(index), onMouseEnter: function (value) { return onMouseEnter(value); }, onMouseLeave: onMouseLeave, barSize: barSize, dataKey: dataKeyChartB !== null && dataKeyChartB !== void 0 ? dataKeyChartB : 'uv', fill: item.color, name: item.name, position: { x: 30 },
|
|
140
|
+
// @ts-ignore
|
|
141
|
+
radius: handleBoderChart(index, columns), stackId: 'stackA' },
|
|
142
|
+
react_1["default"].createElement(recharts_1.Cell, { key: "cell-pageA-".concat(index), fill: item.color }))); }),
|
|
143
|
+
columnsPageB.map(function (item, index) { return (react_1["default"].createElement(recharts_1.Bar, { key: "bar-pageB-".concat(index), onMouseEnter: function (value) { return onMouseEnter(value); }, onMouseLeave: onMouseLeave, barSize: barSize, dataKey: dataKeyChartB !== null && dataKeyChartB !== void 0 ? dataKeyChartB : 'pv', fill: item.color, name: item.name, position: { x: 30 },
|
|
144
|
+
// @ts-ignore
|
|
145
|
+
radius: handleBoderChart(index, columnsPageB), stackId: 'stackB' },
|
|
146
|
+
react_1["default"].createElement(recharts_1.Cell, { key: "cell-pageB-".concat(index), fill: item.color }))); }))),
|
|
147
|
+
!hiddenLineChart && (react_1["default"].createElement(recharts_1.Line, { type: 'monotone', name: nameLineChart, dataKey: dataKeyLineChart !== null && dataKeyLineChart !== void 0 ? dataKeyLineChart : 'lineChart', stroke: colorLineChart !== null && colorLineChart !== void 0 ? colorLineChart : '#ff7300' }))))));
|
|
148
|
+
}
|
|
149
|
+
exports["default"] = PHXBarChart;
|
|
150
|
+
//# sourceMappingURL=BarChart.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BarChart.js","sourceRoot":"","sources":["../../../../../src/components/Chart/BarChart/BarChart.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
interface DonutChartProps {
|
|
3
|
+
withChart?: number;
|
|
4
|
+
data: Array<{
|
|
5
|
+
name: string;
|
|
6
|
+
value: number;
|
|
7
|
+
}>;
|
|
8
|
+
colorChart?: Array<string>;
|
|
9
|
+
dataKey?: string;
|
|
10
|
+
hiddenLabel?: boolean;
|
|
11
|
+
}
|
|
12
|
+
declare function DonutChart(props: Readonly<DonutChartProps>): React.JSX.Element;
|
|
13
|
+
export default DonutChart;
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
exports.__esModule = true;
|
|
3
|
+
var tslib_1 = require("tslib");
|
|
4
|
+
var react_1 = tslib_1.__importStar(require("react"));
|
|
5
|
+
var recharts_1 = require("recharts");
|
|
6
|
+
var Card_1 = require("../../Card");
|
|
7
|
+
function DonutChart(props) {
|
|
8
|
+
var _a = props.colorChart, colorChart = _a === void 0 ? ['#0088FE', '#00C49F', '#FFBB28', '#FF8042'] : _a, dataKey = props.dataKey, withChart = props.withChart, data = props.data, _b = props.hiddenLabel, hiddenLabel = _b === void 0 ? true : _b;
|
|
9
|
+
var RADIAN = Math.PI / 180;
|
|
10
|
+
var _c = (0, react_1.useState)(null), hoveredBar = _c[0], setHoveredBar = _c[1];
|
|
11
|
+
var renderCustomizedLabel = function (_a) {
|
|
12
|
+
var cx = _a.cx, cy = _a.cy, innerRadius = _a.innerRadius, midAngle = _a.midAngle, outerRadius = _a.outerRadius, payload = _a.payload, percent = _a.percent;
|
|
13
|
+
var radius = innerRadius + (outerRadius - innerRadius) * 0.5;
|
|
14
|
+
var labelRadius = outerRadius + 20;
|
|
15
|
+
var labelX = cx + labelRadius * Math.cos(-midAngle * RADIAN);
|
|
16
|
+
var labelY = cy + labelRadius * Math.sin(-midAngle * RADIAN);
|
|
17
|
+
var x = cx + radius * Math.cos(-midAngle * RADIAN);
|
|
18
|
+
var y = cy + radius * Math.sin(-midAngle * RADIAN);
|
|
19
|
+
return (react_1["default"].createElement(react_1["default"].Fragment, null,
|
|
20
|
+
react_1["default"].createElement("text", { dominantBaseline: 'central', fill: '#999', textAnchor: labelX > cx ? 'start' : 'end', x: labelX, y: labelY }, payload.name),
|
|
21
|
+
hiddenLabel && (react_1["default"].createElement("text", { dominantBaseline: 'central', fill: 'white', textAnchor: x > cx ? 'start' : 'end', x: x, y: y }, "".concat((percent * 100).toFixed(0), "%")))));
|
|
22
|
+
};
|
|
23
|
+
var CustomToolLegend = function (propsTooltip) {
|
|
24
|
+
var payload = propsTooltip.payload;
|
|
25
|
+
return (react_1["default"].createElement("div", { className: 'custom-legend mt-4' },
|
|
26
|
+
react_1["default"].createElement("div", { className: 'flex flex-wrap justify-end gap-2' }, payload === null || payload === void 0 ? void 0 : payload.map(function (item) { return (react_1["default"].createElement("div", { key: item.id, style: {
|
|
27
|
+
backgroundColor: '#F6F6F7',
|
|
28
|
+
padding: 5,
|
|
29
|
+
borderRadius: '5px'
|
|
30
|
+
} },
|
|
31
|
+
react_1["default"].createElement("div", { style: {
|
|
32
|
+
display: 'flex',
|
|
33
|
+
alignItems: 'center',
|
|
34
|
+
opacity: !hoveredBar ? 1 : hoveredBar === item.payload.name ? 1 : 0.5
|
|
35
|
+
} },
|
|
36
|
+
react_1["default"].createElement("div", { style: {
|
|
37
|
+
borderRadius: '4px',
|
|
38
|
+
width: '18px',
|
|
39
|
+
height: '18px',
|
|
40
|
+
background: "linear-gradient(".concat(item.color, ", ").concat(item.color, ")"),
|
|
41
|
+
alignItems: 'center',
|
|
42
|
+
alignContent: 'center'
|
|
43
|
+
} }),
|
|
44
|
+
react_1["default"].createElement("p", { style: {
|
|
45
|
+
marginLeft: '10px',
|
|
46
|
+
fontSize: '14px',
|
|
47
|
+
marginRight: 4,
|
|
48
|
+
color: '#999'
|
|
49
|
+
} }, item === null || item === void 0 ? void 0 : item.payload.name)))); }))));
|
|
50
|
+
};
|
|
51
|
+
var CustomToolTip = function (propsTooltip) {
|
|
52
|
+
var _a, _b;
|
|
53
|
+
var payload = propsTooltip.payload;
|
|
54
|
+
return (react_1["default"].createElement("div", { style: {
|
|
55
|
+
backgroundColor: '#f5f5f5e8',
|
|
56
|
+
margin: 10,
|
|
57
|
+
width: '10rem',
|
|
58
|
+
padding: 3,
|
|
59
|
+
borderRadius: 8
|
|
60
|
+
} },
|
|
61
|
+
react_1["default"].createElement("div", { className: 'ml-2 mt-2' }, (_b = (_a = payload[0]) === null || _a === void 0 ? void 0 : _a.payload) === null || _b === void 0 ? void 0 : _b.name),
|
|
62
|
+
payload.map(function (item) { return (react_1["default"].createElement("div", { key: item.id, style: {
|
|
63
|
+
display: 'flex',
|
|
64
|
+
padding: 5,
|
|
65
|
+
marginTop: 4
|
|
66
|
+
} },
|
|
67
|
+
react_1["default"].createElement("div", { style: {
|
|
68
|
+
borderRadius: '4px',
|
|
69
|
+
width: '18px',
|
|
70
|
+
height: '18px',
|
|
71
|
+
background: "linear-gradient(".concat(item.payload.fill, ", ").concat(item.payload.fill, ")"),
|
|
72
|
+
alignItems: 'center',
|
|
73
|
+
alignContent: 'center'
|
|
74
|
+
} }),
|
|
75
|
+
react_1["default"].createElement("div", { className: 'ml-2' }, item.name),
|
|
76
|
+
react_1["default"].createElement("div", { style: {
|
|
77
|
+
marginLeft: 'auto'
|
|
78
|
+
} }, item.payload.value))); })));
|
|
79
|
+
};
|
|
80
|
+
var colors = data.reduce(function (color, _, index) {
|
|
81
|
+
color["color".concat(index + 1)] = colorChart[index % colorChart.length];
|
|
82
|
+
return color;
|
|
83
|
+
}, {});
|
|
84
|
+
var onMouseEnter = function (value) {
|
|
85
|
+
setHoveredBar(value.tooltipPayload[0].name);
|
|
86
|
+
};
|
|
87
|
+
var onMouseLeave = function () {
|
|
88
|
+
setHoveredBar(null);
|
|
89
|
+
};
|
|
90
|
+
return (react_1["default"].createElement(Card_1.PHXCard, null,
|
|
91
|
+
react_1["default"].createElement(recharts_1.ResponsiveContainer, { height: 500, width: '100%' },
|
|
92
|
+
react_1["default"].createElement(recharts_1.PieChart, { height: 400, width: 400 },
|
|
93
|
+
react_1["default"].createElement(recharts_1.Pie
|
|
94
|
+
// @ts-ignore
|
|
95
|
+
, {
|
|
96
|
+
// @ts-ignore
|
|
97
|
+
color: colors, cx: '50%', cy: '50%', data: data,
|
|
98
|
+
// @ts-ignore
|
|
99
|
+
dataKey: dataKey !== null && dataKey !== void 0 ? dataKey : 'value', fill: '#8884d8', label: renderCustomizedLabel, onMouseEnter: function (value) { return onMouseEnter(value); }, onMouseLeave: onMouseLeave, labelLine: false, outerRadius: withChart !== null && withChart !== void 0 ? withChart : 150, style: { outline: 'none' } }, data.map(function (_entry, index) { return (react_1["default"].createElement(recharts_1.Cell, { key: "cell-".concat(index), fill: colorChart[index % colorChart.length] })); })),
|
|
100
|
+
react_1["default"].createElement(recharts_1.Legend, { content: react_1["default"].createElement(CustomToolLegend, null) }),
|
|
101
|
+
react_1["default"].createElement(recharts_1.Tooltip, { content: react_1["default"].createElement(CustomToolTip, null) })))));
|
|
102
|
+
}
|
|
103
|
+
exports["default"] = DonutChart;
|
|
104
|
+
//# sourceMappingURL=DonutChart.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DonutChart.js","sourceRoot":"","sources":["../../../../../src/components/Chart/DonutChart/DonutChart.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
interface PHXPieChartProps {
|
|
3
|
+
outerRadius?: number;
|
|
4
|
+
dataKey?: string;
|
|
5
|
+
data: Array<{
|
|
6
|
+
name: string;
|
|
7
|
+
value: number;
|
|
8
|
+
}>;
|
|
9
|
+
color?: Array<string>;
|
|
10
|
+
hiddenLabel?: boolean;
|
|
11
|
+
hiddenLegend?: boolean;
|
|
12
|
+
}
|
|
13
|
+
declare function PHXPieChart(props: Readonly<PHXPieChartProps>): React.JSX.Element;
|
|
14
|
+
export default PHXPieChart;
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
exports.__esModule = true;
|
|
3
|
+
var tslib_1 = require("tslib");
|
|
4
|
+
var react_1 = tslib_1.__importStar(require("react"));
|
|
5
|
+
var recharts_1 = require("recharts");
|
|
6
|
+
var Card_1 = require("../../Card");
|
|
7
|
+
function PHXPieChart(props) {
|
|
8
|
+
var _a = props.outerRadius, outerRadius = _a === void 0 ? 150 : _a, dataKey = props.dataKey, data = props.data, _b = props.color, color = _b === void 0 ? ['#6f8fef', '#8565ed', '#dd75c1', '#FF8042'] : _b, hiddenLabel = props.hiddenLabel, hiddenLegend = props.hiddenLegend;
|
|
9
|
+
var _c = (0, react_1.useState)(null), activeIndex = _c[0], setActiveIndex = _c[1];
|
|
10
|
+
var _d = (0, react_1.useState)(null), hoveredBar = _d[0], setHoveredBar = _d[1];
|
|
11
|
+
var onPieEnter = function (value, index) {
|
|
12
|
+
setActiveIndex(index);
|
|
13
|
+
setHoveredBar(value.tooltipPayload[0].name);
|
|
14
|
+
};
|
|
15
|
+
var onMouseLeave = function () {
|
|
16
|
+
setActiveIndex(null);
|
|
17
|
+
setHoveredBar(null);
|
|
18
|
+
};
|
|
19
|
+
var RADIAN = Math.PI / 180;
|
|
20
|
+
var CustomToolLegend = function (propsTooltip) {
|
|
21
|
+
var payload = propsTooltip.payload;
|
|
22
|
+
return (react_1["default"].createElement("div", { className: 'custom-legend mt-4' },
|
|
23
|
+
react_1["default"].createElement("div", { className: 'flex flex-wrap justify-end gap-2' }, payload === null || payload === void 0 ? void 0 : payload.map(function (item) { return (react_1["default"].createElement("div", { key: item.id, style: {
|
|
24
|
+
backgroundColor: '#F6F6F7',
|
|
25
|
+
padding: 5,
|
|
26
|
+
borderRadius: '5px'
|
|
27
|
+
} },
|
|
28
|
+
react_1["default"].createElement("div", { style: {
|
|
29
|
+
display: 'flex',
|
|
30
|
+
alignItems: 'center',
|
|
31
|
+
opacity: !hoveredBar ? 1 : hoveredBar === item.payload.name ? 1 : 0.5
|
|
32
|
+
} },
|
|
33
|
+
react_1["default"].createElement("div", { style: {
|
|
34
|
+
borderRadius: '4px',
|
|
35
|
+
width: '18px',
|
|
36
|
+
height: '18px',
|
|
37
|
+
background: "linear-gradient(".concat(item.color, ", ").concat(item.color, ")"),
|
|
38
|
+
alignItems: 'center',
|
|
39
|
+
alignContent: 'center'
|
|
40
|
+
} }),
|
|
41
|
+
react_1["default"].createElement("p", { style: {
|
|
42
|
+
marginLeft: '10px',
|
|
43
|
+
fontSize: '14px',
|
|
44
|
+
marginRight: 4,
|
|
45
|
+
color: '#999'
|
|
46
|
+
} }, item === null || item === void 0 ? void 0 : item.payload.name)))); }))));
|
|
47
|
+
};
|
|
48
|
+
var renderActiveShape = function (props) {
|
|
49
|
+
var cx = props.cx, cy = props.cy, innerRadius = props.innerRadius, outerRadius = props.outerRadius, startAngle = props.startAngle, endAngle = props.endAngle, fill = props.fill, payload = props.payload, percent = props.percent;
|
|
50
|
+
return (react_1["default"].createElement("g", null,
|
|
51
|
+
react_1["default"].createElement("text", { x: cx, y: cy, dy: -8, textAnchor: 'middle', fill: fill, style: { fontSize: '18px' } }, payload.name),
|
|
52
|
+
react_1["default"].createElement("text", { x: cx, y: cy, dy: 12, textAnchor: 'middle', fill: fill }, "(".concat((percent * 100).toFixed(2), "%)")),
|
|
53
|
+
react_1["default"].createElement(recharts_1.Sector, { cx: cx, cy: cy, opacity: 0.5, innerRadius: innerRadius, outerRadius: outerRadius, startAngle: startAngle, endAngle: endAngle, fill: fill, cornerRadius: 5 })));
|
|
54
|
+
};
|
|
55
|
+
return (react_1["default"].createElement(Card_1.PHXCard, null,
|
|
56
|
+
react_1["default"].createElement(recharts_1.ResponsiveContainer, { height: 500, width: '100%' },
|
|
57
|
+
react_1["default"].createElement(recharts_1.PieChart, { height: 400, onMouseLeave: onMouseLeave, width: 800 },
|
|
58
|
+
react_1["default"].createElement(recharts_1.Pie, tslib_1.__assign({ activeIndex: activeIndex, activeShape: renderActiveShape, cx: '50%', cy: '50%', data: data, dataKey: dataKey !== null && dataKey !== void 0 ? dataKey : 'value', fill: '#8884d8', innerRadius: 130 }, (!hiddenLabel && {
|
|
59
|
+
label: function (_a) {
|
|
60
|
+
var _b;
|
|
61
|
+
var cx = _a.cx, cy = _a.cy, index = _a.index, innerRadius = _a.innerRadius, midAngle = _a.midAngle, outerRadius = _a.outerRadius, value = _a.value;
|
|
62
|
+
var radius = 25 + innerRadius + (outerRadius - innerRadius);
|
|
63
|
+
var x = cx + radius * Math.cos(-midAngle * RADIAN);
|
|
64
|
+
var y = cy + radius * Math.sin(-midAngle * RADIAN);
|
|
65
|
+
if (value === 0) {
|
|
66
|
+
return react_1["default"].createElement(react_1["default"].Fragment, null);
|
|
67
|
+
}
|
|
68
|
+
return (react_1["default"].createElement("text", { dominantBaseline: 'central', fill: '#8884d8', textAnchor: x > cx ? 'start' : 'end', x: x, y: y }, (_b = data[index]) === null || _b === void 0 ? void 0 :
|
|
69
|
+
_b.name,
|
|
70
|
+
" (",
|
|
71
|
+
value,
|
|
72
|
+
")"));
|
|
73
|
+
}
|
|
74
|
+
}), { onMouseEnter: onPieEnter, outerRadius: outerRadius, cornerRadius: 5, paddingAngle: 1, labelLine: false, style: { outline: 'none' } }), data.map(function (_entry, index) { return (react_1["default"].createElement(recharts_1.Cell, { key: "cell-".concat(index + 1), fill: color[index % color.length] })); })),
|
|
75
|
+
hiddenLegend && react_1["default"].createElement(recharts_1.Legend, { content: react_1["default"].createElement(CustomToolLegend, null) })))));
|
|
76
|
+
}
|
|
77
|
+
exports["default"] = PHXPieChart;
|
|
78
|
+
//# sourceMappingURL=PieChart.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PieChart.js","sourceRoot":"","sources":["../../../../../src/components/Chart/PieChart/PieChart.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
exports.__esModule = true;
|
|
3
|
+
var tslib_1 = require("tslib");
|
|
4
|
+
tslib_1.__exportStar(require("./PieChart/PieChart"), exports);
|
|
5
|
+
tslib_1.__exportStar(require("./DonutChart/DonutChart"), exports);
|
|
6
|
+
tslib_1.__exportStar(require("./BarChart/BarChart"), exports);
|
|
7
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Chart/index.ts"],"names":[],"mappings":";;;AAAA,8DAAmC;AACnC,kEAAuC;AACvC,8DAAmC"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React, { SelectHTMLAttributes } from 'react';
|
|
2
2
|
import { UseFormRegisterReturn } from 'react-hook-form';
|
|
3
|
+
import { ComplexAction } from '../types';
|
|
3
4
|
export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
|
|
4
5
|
className?: string;
|
|
5
6
|
register?: UseFormRegisterReturn;
|
|
@@ -8,5 +9,6 @@ export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
|
|
|
8
9
|
helpText?: string;
|
|
9
10
|
error?: boolean;
|
|
10
11
|
errorType?: 'required-field' | 'duplicate-field';
|
|
12
|
+
labelAction?: ComplexAction;
|
|
11
13
|
}
|
|
12
14
|
export declare const PHXSelect: React.FC<SelectProps>;
|
|
@@ -5,9 +5,11 @@ var tslib_1 = require("tslib");
|
|
|
5
5
|
var react_1 = tslib_1.__importDefault(require("react"));
|
|
6
6
|
var types_1 = require("../types");
|
|
7
7
|
var PHXSelect = function (_a) {
|
|
8
|
-
var children = _a.children, className = _a.className, register = _a.register, label = _a.label, helpText = _a.helpText, error = _a.error, errorType = _a.errorType, rest = tslib_1.__rest(_a, ["children", "className", "register", "label", "helpText", "error", "errorType"]);
|
|
8
|
+
var children = _a.children, className = _a.className, register = _a.register, label = _a.label, helpText = _a.helpText, error = _a.error, errorType = _a.errorType, labelAction = _a.labelAction, rest = tslib_1.__rest(_a, ["children", "className", "register", "label", "helpText", "error", "errorType", "labelAction"]);
|
|
9
9
|
return (react_1["default"].createElement("div", { className: className },
|
|
10
|
-
react_1["default"].createElement("
|
|
10
|
+
react_1["default"].createElement("div", { className: (0, types_1.classNames)(label ? 'flex mb-1 text-xs font-normal text-gray-700' : 'hidden', label && (labelAction === null || labelAction === void 0 ? void 0 : labelAction.content) ? 'justify-between' : '') },
|
|
11
|
+
label && react_1["default"].createElement("label", null, label),
|
|
12
|
+
(labelAction === null || labelAction === void 0 ? void 0 : labelAction.content) && (react_1["default"].createElement("p", { className: 'text-blue-600 hover:cursor-pointer hover:text-blue-800 hover:underline', onClick: labelAction.onClick }, labelAction.content))),
|
|
11
13
|
react_1["default"].createElement("select", tslib_1.__assign({}, register, rest, { className: (0, types_1.classNames)('mt-1 block w-full rounded-lg border border-gray-500 px-3 py-1.5 text-xs font-normal shadow-sm hover:bg-gray-50 focus:border-gray-500 focus:bg-gray-50 focus:outline-none focus:outline-offset-1 focus:outline-indigo-500 focus:ring-transparent', error ? 'border-red-800 bg-red-50 hover:bg-red-50 focus:border-red-800 focus:bg-red-50' : '') }), children),
|
|
12
14
|
helpText ? react_1["default"].createElement("div", { className: 'mt-1 pl-1 text-xs font-light text-gray-400' }, helpText) : null,
|
|
13
15
|
error && errorType ? (react_1["default"].createElement("div", { className: 'ml-1 mt-1 flex items-center' },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../../src/components/Select/Select.tsx"],"names":[],"mappings":";;;;AAAA,wDAAmD;AAEnD,
|
|
1
|
+
{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../../src/components/Select/Select.tsx"],"names":[],"mappings":";;;;AAAA,wDAAmD;AAEnD,kCAAoD;AAa7C,IAAM,SAAS,GAA0B,UAAC,EAUnC;IATZ,IAAA,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,QAAQ,cAAA,EACR,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,KAAK,WAAA,EACL,SAAS,eAAA,EACT,WAAW,iBAAA,EACR,IAAI,sBATwC,+FAUhD,CADQ;IACU,OAAA,CACjB,0CAAK,SAAS,EAAE,SAAS;QACvB,0CACE,SAAS,EAAE,IAAA,kBAAU,EACnB,KAAK,CAAC,CAAC,CAAC,6CAA6C,CAAC,CAAC,CAAC,QAAQ,EAChE,KAAK,KAAI,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,OAAO,CAAA,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,CACvD;YAEA,KAAK,IAAI,gDAAQ,KAAK,CAAS;YAC/B,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,OAAO,KAAI,CACvB,wCACE,SAAS,EAAC,wEAAwE,EAClF,OAAO,EAAE,WAAW,CAAC,OAAO,IAE3B,WAAW,CAAC,OAAO,CAClB,CACL,CACG;QACN,gEACM,QAAQ,EACR,IAAI,IACR,SAAS,EAAE,IAAA,kBAAU,EACnB,iPAAiP,EACjP,KAAK,CAAC,CAAC,CAAC,+EAA+E,CAAC,CAAC,CAAC,EAAE,CAC7F,KAEA,QAAQ,CACF;QACR,QAAQ,CAAC,CAAC,CAAC,0CAAK,SAAS,EAAC,4CAA4C,IAAE,QAAQ,CAAO,CAAC,CAAC,CAAC,IAAI;QAC9F,KAAK,IAAI,SAAS,CAAC,CAAC,CAAC,CACpB,0CAAK,SAAS,EAAC,6BAA6B;YAC1C,0CACE,SAAS,EAAC,2BAA2B,EACrC,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,GAAG,EACf,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,4BAA4B;gBAElC,2CACE,CAAC,EAAC,0EAA0E,EAC5E,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GACtB,CACE;YAEN,wCAAG,SAAS,EAAC,sBAAsB,IAChC,SAAS,KAAK,gBAAgB,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,sBAAsB,CAClF,CACA,CACP,CAAC,CAAC,CAAC,IAAI,CACJ,CACP,CAAA;CAAA,CAAA;AA9DY,QAAA,SAAS,aA8DrB"}
|
package/dist/cjs/index.d.ts
CHANGED
|
@@ -51,4 +51,7 @@ import PHXGetActiveYearAndNextYear from './components/Func/getActiveAndNextSchoo
|
|
|
51
51
|
import { PHXDateRangePicker } from './components/DateRangePicker';
|
|
52
52
|
import PHXFetchAPI from './components/Func/serverQuery';
|
|
53
53
|
import { PBFMainWrap } from './components/PBFMainWrap';
|
|
54
|
-
|
|
54
|
+
import PieChart from './components/Chart/PieChart/PieChart';
|
|
55
|
+
import BarChart from './components/Chart/BarChart/BarChart';
|
|
56
|
+
import DonutChart from './components/Chart/DonutChart/DonutChart';
|
|
57
|
+
export { PHXButton, PHXCard, PHXSpinner, PHXMainWrap, PHXFormWrap, PHXHeaderBar, PHXTable, PHXInput, PHXSelect, PHXSelectBox, PHXRadio, PHXCheckbox, PHXFormStep, PHXFormTuition, PHXNotifications, PHXStep, PHXSkeleton, PHXFuncGetLoggedInfo, PHXClientQuery, PHXClientMutation, PHXTextarea, PHXModal, PHXTabs, PHXChoiceList, PHXDescriptionLists, PHXBadge, PHXLogin, PHXLoginSso, PHXBanner, PHXButtonGroup, PHXCombobox, PHXFormLayout, PHXHorizontalStack, PHXTextEditor, PHXUploadFile, PHXTableLogImportExport, PHXSearchResultList, PHXDatePicker, PHXLoginPn28, PHXEmptyRecord, PHXPagePermission, PHXTimePicker, PHXDropdown, PHXUploadAvatar, PHXGetHttpLinkConfig, PHXDateRangePicker, PHXUseDebounce, PHXResourceList, PHXGetCurrentYearWithTerm, PHXFetchAPI, PHXGetActiveYearAndNextYear, PHXLogUserActivity, PBFMainWrap, PieChart, BarChart, DonutChart, };
|
package/dist/cjs/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
exports.__esModule = true;
|
|
3
3
|
exports.PHXFetchAPI = exports.PHXGetCurrentYearWithTerm = exports.PHXResourceList = exports.PHXUseDebounce = exports.PHXDateRangePicker = exports.PHXGetHttpLinkConfig = exports.PHXUploadAvatar = exports.PHXDropdown = exports.PHXTimePicker = exports.PHXPagePermission = exports.PHXEmptyRecord = exports.PHXLoginPn28 = exports.PHXDatePicker = exports.PHXSearchResultList = exports.PHXTableLogImportExport = exports.PHXUploadFile = exports.PHXTextEditor = exports.PHXHorizontalStack = exports.PHXFormLayout = exports.PHXCombobox = exports.PHXButtonGroup = exports.PHXBanner = exports.PHXLoginSso = exports.PHXLogin = exports.PHXBadge = exports.PHXDescriptionLists = exports.PHXChoiceList = exports.PHXTabs = exports.PHXModal = exports.PHXTextarea = exports.PHXClientMutation = exports.PHXClientQuery = exports.PHXFuncGetLoggedInfo = exports.PHXSkeleton = exports.PHXStep = exports.PHXNotifications = exports.PHXFormTuition = exports.PHXFormStep = exports.PHXCheckbox = exports.PHXRadio = exports.PHXSelectBox = exports.PHXSelect = exports.PHXInput = exports.PHXTable = exports.PHXHeaderBar = exports.PHXFormWrap = exports.PHXMainWrap = exports.PHXSpinner = exports.PHXCard = exports.PHXButton = void 0;
|
|
4
|
-
exports.PBFMainWrap = exports.PHXLogUserActivity = exports.PHXGetActiveYearAndNextYear = void 0;
|
|
4
|
+
exports.DonutChart = exports.BarChart = exports.PieChart = exports.PBFMainWrap = exports.PHXLogUserActivity = exports.PHXGetActiveYearAndNextYear = void 0;
|
|
5
5
|
var tslib_1 = require("tslib");
|
|
6
6
|
var logUserActivity_1 = require("./components/Func/logUserActivity");
|
|
7
7
|
exports.PHXLogUserActivity = logUserActivity_1.PHXLogUserActivity;
|
|
@@ -109,4 +109,10 @@ var serverQuery_1 = tslib_1.__importDefault(require("./components/Func/serverQue
|
|
|
109
109
|
exports.PHXFetchAPI = serverQuery_1["default"];
|
|
110
110
|
var PBFMainWrap_1 = require("./components/PBFMainWrap");
|
|
111
111
|
exports.PBFMainWrap = PBFMainWrap_1.PBFMainWrap;
|
|
112
|
+
var PieChart_1 = tslib_1.__importDefault(require("./components/Chart/PieChart/PieChart"));
|
|
113
|
+
exports.PieChart = PieChart_1["default"];
|
|
114
|
+
var BarChart_1 = tslib_1.__importDefault(require("./components/Chart/BarChart/BarChart"));
|
|
115
|
+
exports.BarChart = BarChart_1["default"];
|
|
116
|
+
var DonutChart_1 = tslib_1.__importDefault(require("./components/Chart/DonutChart/DonutChart"));
|
|
117
|
+
exports.DonutChart = DonutChart_1["default"];
|
|
112
118
|
//# sourceMappingURL=index.js.map
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;;AAAA,qEAAsE;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
interface PHXBarChartProps {
|
|
3
|
+
data: Array<{
|
|
4
|
+
name: string;
|
|
5
|
+
uv: number;
|
|
6
|
+
pv: number;
|
|
7
|
+
amt: number;
|
|
8
|
+
color: string;
|
|
9
|
+
value: number;
|
|
10
|
+
lineChart: number;
|
|
11
|
+
yAxisRight: number;
|
|
12
|
+
}>;
|
|
13
|
+
dataKeyLineChart?: string;
|
|
14
|
+
colorLineChart?: string;
|
|
15
|
+
duplicateChart?: boolean;
|
|
16
|
+
dataKeyChartA?: string;
|
|
17
|
+
dataKeyChartB?: string;
|
|
18
|
+
xAxisKey?: string;
|
|
19
|
+
yAxisRightKey?: string;
|
|
20
|
+
domain: Array<any>;
|
|
21
|
+
nameLineChart?: string;
|
|
22
|
+
hiddenLineChart?: boolean;
|
|
23
|
+
doubleColumnInRow?: boolean;
|
|
24
|
+
dataKeyColumnDouble?: string;
|
|
25
|
+
barSize?: number;
|
|
26
|
+
nameColumnDouble: string;
|
|
27
|
+
chartType: 'double' | 'single' | 'one-to-many' | 'many-to-one' | 'many-to-many';
|
|
28
|
+
radiusChart: Array<number>;
|
|
29
|
+
chartColumnA: Array<{
|
|
30
|
+
name: string;
|
|
31
|
+
value: number;
|
|
32
|
+
color: string;
|
|
33
|
+
}>;
|
|
34
|
+
chartColumnB: Array<{
|
|
35
|
+
name: string;
|
|
36
|
+
value: number;
|
|
37
|
+
color: string;
|
|
38
|
+
}>;
|
|
39
|
+
}
|
|
40
|
+
declare function PHXBarChart(props: Readonly<PHXBarChartProps>): React.JSX.Element;
|
|
41
|
+
export default PHXBarChart;
|
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
import { __assign } from "tslib";
|
|
2
|
+
import React, { useState } from 'react';
|
|
3
|
+
import { Bar, ComposedChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis, Cell, Line, } from 'recharts';
|
|
4
|
+
import { PHXCard } from '../../Card';
|
|
5
|
+
function PHXBarChart(props) {
|
|
6
|
+
var data = props.data, dataKeyLineChart = props.dataKeyLineChart, colorLineChart = props.colorLineChart, dataKeyChartA = props.dataKeyChartA, dataKeyChartB = props.dataKeyChartB, xAxisKey = props.xAxisKey, yAxisRightKey = props.yAxisRightKey, domain = props.domain, nameLineChart = props.nameLineChart, hiddenLineChart = props.hiddenLineChart, doubleColumnInRow = props.doubleColumnInRow, barSize = props.barSize, nameColumnDouble = props.nameColumnDouble, chartType = props.chartType, radiusChart = props.radiusChart, chartColumnA = props.chartColumnA, chartColumnB = props.chartColumnB;
|
|
7
|
+
var _a = useState(null), hoveredBar = _a[0], setHoveredBar = _a[1];
|
|
8
|
+
var onMouseEnter = function (value) {
|
|
9
|
+
setHoveredBar(value.tooltipPayload[0].name);
|
|
10
|
+
};
|
|
11
|
+
var onMouseLeave = function () {
|
|
12
|
+
setHoveredBar(null);
|
|
13
|
+
};
|
|
14
|
+
var CustomToolLegend = function (propsTooltip) {
|
|
15
|
+
var payload = propsTooltip.payload;
|
|
16
|
+
// gộp những item có label name giống nhau thành 1
|
|
17
|
+
var aggregatedItems = {};
|
|
18
|
+
payload.forEach(function (item) {
|
|
19
|
+
var _a;
|
|
20
|
+
var name = (_a = item === null || item === void 0 ? void 0 : item.payload) === null || _a === void 0 ? void 0 : _a.name;
|
|
21
|
+
if (!aggregatedItems[name]) {
|
|
22
|
+
aggregatedItems[name] = __assign(__assign({}, item), { count: 1 });
|
|
23
|
+
}
|
|
24
|
+
else {
|
|
25
|
+
aggregatedItems[name].count++;
|
|
26
|
+
}
|
|
27
|
+
});
|
|
28
|
+
var aggregatedItemsArray = Object.values(aggregatedItems);
|
|
29
|
+
return (React.createElement("div", { className: 'custom-legend mt-4' },
|
|
30
|
+
React.createElement("div", { className: 'flex flex-wrap justify-end gap-2' }, aggregatedItemsArray === null || aggregatedItemsArray === void 0 ? void 0 : aggregatedItemsArray.map(function (item) { return (React.createElement("div", { key: item.id, style: {
|
|
31
|
+
backgroundColor: '#F6F6F7',
|
|
32
|
+
padding: 5,
|
|
33
|
+
borderRadius: '5px'
|
|
34
|
+
} },
|
|
35
|
+
React.createElement("div", { style: {
|
|
36
|
+
display: 'flex',
|
|
37
|
+
alignItems: 'center',
|
|
38
|
+
opacity: !hoveredBar ? 1 : hoveredBar === item.payload.name ? 1 : 0.5
|
|
39
|
+
} },
|
|
40
|
+
React.createElement("div", { style: {
|
|
41
|
+
borderRadius: '4px',
|
|
42
|
+
width: '18px',
|
|
43
|
+
height: '18px',
|
|
44
|
+
background: "linear-gradient(".concat(item.color, ", ").concat(item.color, ")"),
|
|
45
|
+
alignItems: 'center',
|
|
46
|
+
alignContent: 'center'
|
|
47
|
+
} }),
|
|
48
|
+
React.createElement("p", { style: {
|
|
49
|
+
marginLeft: '10px',
|
|
50
|
+
fontSize: '14px',
|
|
51
|
+
marginRight: 4
|
|
52
|
+
} }, item === null || item === void 0 ? void 0 : item.payload.name)))); }))));
|
|
53
|
+
};
|
|
54
|
+
var CustomToolTip = function (propsTooltip) {
|
|
55
|
+
var _a, _b;
|
|
56
|
+
var active = propsTooltip.active, payload = propsTooltip.payload;
|
|
57
|
+
if (!active || !payload || payload.length === 0) {
|
|
58
|
+
return null;
|
|
59
|
+
}
|
|
60
|
+
var groupedItems = {};
|
|
61
|
+
payload.forEach(function (item) {
|
|
62
|
+
var name = item.name;
|
|
63
|
+
if (!groupedItems[name]) {
|
|
64
|
+
groupedItems[name] = item;
|
|
65
|
+
}
|
|
66
|
+
});
|
|
67
|
+
var groupedItemsArray = Object.values(groupedItems);
|
|
68
|
+
return (React.createElement("div", { style: {
|
|
69
|
+
backgroundColor: '#f5f5f5',
|
|
70
|
+
margin: 10,
|
|
71
|
+
width: '10rem',
|
|
72
|
+
padding: 3,
|
|
73
|
+
borderRadius: 8
|
|
74
|
+
} },
|
|
75
|
+
React.createElement("div", { className: 'ml-2 mt-2' }, (_b = (_a = groupedItemsArray[0]) === null || _a === void 0 ? void 0 : _a.payload) === null || _b === void 0 ? void 0 : _b.name),
|
|
76
|
+
groupedItemsArray.map(function (item) { return (React.createElement("div", { key: item.id, style: {
|
|
77
|
+
display: 'flex',
|
|
78
|
+
padding: 5,
|
|
79
|
+
marginTop: 4
|
|
80
|
+
} },
|
|
81
|
+
React.createElement("div", { style: {
|
|
82
|
+
borderRadius: '4px',
|
|
83
|
+
width: '18px',
|
|
84
|
+
height: '18px',
|
|
85
|
+
background: "linear-gradient(".concat(item.color, ", ").concat(item.color, ")"),
|
|
86
|
+
alignItems: 'center',
|
|
87
|
+
alignContent: 'center',
|
|
88
|
+
opacity: hoveredBar === item.name ? 1 : 0.5
|
|
89
|
+
} }),
|
|
90
|
+
React.createElement("div", { className: 'ml-2', style: { opacity: hoveredBar === item.name ? 1 : 0.5 } }, item.name),
|
|
91
|
+
React.createElement("div", { style: {
|
|
92
|
+
marginLeft: 'auto',
|
|
93
|
+
opacity: hoveredBar === item.name ? 1 : 0.5
|
|
94
|
+
} }, item.payload.amt))); })));
|
|
95
|
+
};
|
|
96
|
+
var columns = chartColumnA.map(function (item) { return (__assign({}, item)); });
|
|
97
|
+
var columnsPageB = chartColumnB.map(function (item) { return (__assign({}, item)); });
|
|
98
|
+
var handleBoderChart = function (index, chartColumn) {
|
|
99
|
+
var chartIndex = index === chartColumn.length - 1 ? radiusChart !== null && radiusChart !== void 0 ? radiusChart : [6, 6, 0, 0] : [0, 0, 0, 0];
|
|
100
|
+
return chartIndex;
|
|
101
|
+
};
|
|
102
|
+
return (React.createElement(PHXCard, null,
|
|
103
|
+
React.createElement(ResponsiveContainer, { height: 500, width: '100%' },
|
|
104
|
+
React.createElement(ComposedChart, { barGap: 20, data: data, height: 300, width: 500 },
|
|
105
|
+
React.createElement(CartesianGrid, { strokeDasharray: '3 3', vertical: false }),
|
|
106
|
+
React.createElement(XAxis, { axisLine: false, dataKey: xAxisKey !== null && xAxisKey !== void 0 ? xAxisKey : 'name' }),
|
|
107
|
+
React.createElement(YAxis, { axisLine: false }),
|
|
108
|
+
React.createElement(YAxis, { axisLine: false, dataKey: yAxisRightKey !== null && yAxisRightKey !== void 0 ? yAxisRightKey : 'yAxisRight', domain: domain, minTickGap: 20, orientation: 'right', tickCount: 5, yAxisId: 2 }),
|
|
109
|
+
React.createElement(Tooltip, { content: React.createElement(CustomToolTip, null) }),
|
|
110
|
+
React.createElement(Legend, { content: React.createElement(CustomToolLegend, null) }),
|
|
111
|
+
chartType === 'one-to-many' && (React.createElement(React.Fragment, null,
|
|
112
|
+
React.createElement(Bar, { barSize: barSize, dataKey: dataKeyChartA !== null && dataKeyChartA !== void 0 ? dataKeyChartA : 'pv', onMouseEnter: function (value) { return onMouseEnter(value); }, fill: '#dd75c1', name: 'name' },
|
|
113
|
+
React.createElement(Cell, { fill: '#dd75c1' })),
|
|
114
|
+
columnsPageB.map(function (item, index) { return (React.createElement(Bar, { key: "bar-pageB-".concat(index), onMouseEnter: function (value) { return onMouseEnter(value); }, onMouseLeave: onMouseLeave, barSize: barSize, dataKey: dataKeyChartB !== null && dataKeyChartB !== void 0 ? dataKeyChartB : 'amt', fill: item.color, name: item.name, position: { x: 30 },
|
|
115
|
+
// @ts-ignore
|
|
116
|
+
radius: handleBoderChart(index, columnsPageB), stackId: 'stackB' },
|
|
117
|
+
React.createElement(Cell, { key: "cell-pageB-".concat(index), fill: item.color }))); }))),
|
|
118
|
+
chartType === 'many-to-one' && (React.createElement(React.Fragment, null,
|
|
119
|
+
columnsPageB.map(function (item, index) { return (React.createElement(Bar, { key: "bar-pageB-".concat(index), onMouseEnter: function (value) { return onMouseEnter(value); }, onMouseLeave: onMouseLeave, barSize: barSize, dataKey: 'pv', fill: item.color, name: item.name, position: { x: 30 },
|
|
120
|
+
// @ts-ignore
|
|
121
|
+
radius: handleBoderChart(index, columnsPageB), stackId: 'stackB' },
|
|
122
|
+
React.createElement(Cell, { key: "cell-pageB-".concat(index), fill: item.color }))); }),
|
|
123
|
+
React.createElement(Bar, { onMouseEnter: function (value) { return onMouseEnter(value); }, onMouseLeave: onMouseLeave, barSize: barSize, dataKey: dataKeyChartB !== null && dataKeyChartB !== void 0 ? dataKeyChartB : 'uv', fill: '#dd75c1', name: 'name' },
|
|
124
|
+
React.createElement(Cell, { fill: '#dd75c1' })))),
|
|
125
|
+
chartType === 'single' && (
|
|
126
|
+
// @ts-ignore
|
|
127
|
+
React.createElement(Bar, { onMouseEnter: function (value) { return onMouseEnter(value); }, onMouseLeave: onMouseLeave, barSize: barSize, dataKey: dataKeyChartB !== null && dataKeyChartB !== void 0 ? dataKeyChartB : 'pv', fill: '#dd75c1', name: 'name' },
|
|
128
|
+
React.createElement(Cell, { fill: '#dd75c1' }))),
|
|
129
|
+
chartType === 'double' && (React.createElement(React.Fragment, null,
|
|
130
|
+
React.createElement(Bar, { onMouseEnter: function (value) { return onMouseEnter(value); }, onMouseLeave: onMouseLeave, barSize: barSize, dataKey: dataKeyChartB !== null && dataKeyChartB !== void 0 ? dataKeyChartB : 'pv', fill: '#dd75c1', name: 'name' },
|
|
131
|
+
React.createElement(Cell, { fill: '#dd75c1' })),
|
|
132
|
+
doubleColumnInRow && (
|
|
133
|
+
// @ts-ignore
|
|
134
|
+
React.createElement(Bar, { onMouseEnter: function (value) { return onMouseEnter(value); }, onMouseLeave: onMouseLeave, barSize: barSize, dataKey: dataKeyChartB !== null && dataKeyChartB !== void 0 ? dataKeyChartB : 'uv', fill: '#8868ee', name: nameColumnDouble },
|
|
135
|
+
React.createElement(Cell, { fill: '#8868ee' }))))),
|
|
136
|
+
chartType === 'many-to-many' && (React.createElement(React.Fragment, null,
|
|
137
|
+
columns.map(function (item, index) { return (React.createElement(Bar, { key: "bar-pageA-".concat(index), onMouseEnter: function (value) { return onMouseEnter(value); }, onMouseLeave: onMouseLeave, barSize: barSize, dataKey: dataKeyChartB !== null && dataKeyChartB !== void 0 ? dataKeyChartB : 'uv', fill: item.color, name: item.name, position: { x: 30 },
|
|
138
|
+
// @ts-ignore
|
|
139
|
+
radius: handleBoderChart(index, columns), stackId: 'stackA' },
|
|
140
|
+
React.createElement(Cell, { key: "cell-pageA-".concat(index), fill: item.color }))); }),
|
|
141
|
+
columnsPageB.map(function (item, index) { return (React.createElement(Bar, { key: "bar-pageB-".concat(index), onMouseEnter: function (value) { return onMouseEnter(value); }, onMouseLeave: onMouseLeave, barSize: barSize, dataKey: dataKeyChartB !== null && dataKeyChartB !== void 0 ? dataKeyChartB : 'pv', fill: item.color, name: item.name, position: { x: 30 },
|
|
142
|
+
// @ts-ignore
|
|
143
|
+
radius: handleBoderChart(index, columnsPageB), stackId: 'stackB' },
|
|
144
|
+
React.createElement(Cell, { key: "cell-pageB-".concat(index), fill: item.color }))); }))),
|
|
145
|
+
!hiddenLineChart && (React.createElement(Line, { type: 'monotone', name: nameLineChart, dataKey: dataKeyLineChart !== null && dataKeyLineChart !== void 0 ? dataKeyLineChart : 'lineChart', stroke: colorLineChart !== null && colorLineChart !== void 0 ? colorLineChart : '#ff7300' }))))));
|
|
146
|
+
}
|
|
147
|
+
export default PHXBarChart;
|
|
148
|
+
//# sourceMappingURL=BarChart.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BarChart.js","sourceRoot":"","sources":["../../../../../src/components/Chart/BarChart/BarChart.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
interface DonutChartProps {
|
|
3
|
+
withChart?: number;
|
|
4
|
+
data: Array<{
|
|
5
|
+
name: string;
|
|
6
|
+
value: number;
|
|
7
|
+
}>;
|
|
8
|
+
colorChart?: Array<string>;
|
|
9
|
+
dataKey?: string;
|
|
10
|
+
hiddenLabel?: boolean;
|
|
11
|
+
}
|
|
12
|
+
declare function DonutChart(props: Readonly<DonutChartProps>): React.JSX.Element;
|
|
13
|
+
export default DonutChart;
|
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
import React, { useState } from 'react';
|
|
2
|
+
import { PieChart, Pie, Cell, ResponsiveContainer, Legend, Tooltip } from 'recharts';
|
|
3
|
+
import { PHXCard } from '../../Card';
|
|
4
|
+
function DonutChart(props) {
|
|
5
|
+
var _a = props.colorChart, colorChart = _a === void 0 ? ['#0088FE', '#00C49F', '#FFBB28', '#FF8042'] : _a, dataKey = props.dataKey, withChart = props.withChart, data = props.data, _b = props.hiddenLabel, hiddenLabel = _b === void 0 ? true : _b;
|
|
6
|
+
var RADIAN = Math.PI / 180;
|
|
7
|
+
var _c = useState(null), hoveredBar = _c[0], setHoveredBar = _c[1];
|
|
8
|
+
var renderCustomizedLabel = function (_a) {
|
|
9
|
+
var cx = _a.cx, cy = _a.cy, innerRadius = _a.innerRadius, midAngle = _a.midAngle, outerRadius = _a.outerRadius, payload = _a.payload, percent = _a.percent;
|
|
10
|
+
var radius = innerRadius + (outerRadius - innerRadius) * 0.5;
|
|
11
|
+
var labelRadius = outerRadius + 20;
|
|
12
|
+
var labelX = cx + labelRadius * Math.cos(-midAngle * RADIAN);
|
|
13
|
+
var labelY = cy + labelRadius * Math.sin(-midAngle * RADIAN);
|
|
14
|
+
var x = cx + radius * Math.cos(-midAngle * RADIAN);
|
|
15
|
+
var y = cy + radius * Math.sin(-midAngle * RADIAN);
|
|
16
|
+
return (React.createElement(React.Fragment, null,
|
|
17
|
+
React.createElement("text", { dominantBaseline: 'central', fill: '#999', textAnchor: labelX > cx ? 'start' : 'end', x: labelX, y: labelY }, payload.name),
|
|
18
|
+
hiddenLabel && (React.createElement("text", { dominantBaseline: 'central', fill: 'white', textAnchor: x > cx ? 'start' : 'end', x: x, y: y }, "".concat((percent * 100).toFixed(0), "%")))));
|
|
19
|
+
};
|
|
20
|
+
var CustomToolLegend = function (propsTooltip) {
|
|
21
|
+
var payload = propsTooltip.payload;
|
|
22
|
+
return (React.createElement("div", { className: 'custom-legend mt-4' },
|
|
23
|
+
React.createElement("div", { className: 'flex flex-wrap justify-end gap-2' }, payload === null || payload === void 0 ? void 0 : payload.map(function (item) { return (React.createElement("div", { key: item.id, style: {
|
|
24
|
+
backgroundColor: '#F6F6F7',
|
|
25
|
+
padding: 5,
|
|
26
|
+
borderRadius: '5px'
|
|
27
|
+
} },
|
|
28
|
+
React.createElement("div", { style: {
|
|
29
|
+
display: 'flex',
|
|
30
|
+
alignItems: 'center',
|
|
31
|
+
opacity: !hoveredBar ? 1 : hoveredBar === item.payload.name ? 1 : 0.5
|
|
32
|
+
} },
|
|
33
|
+
React.createElement("div", { style: {
|
|
34
|
+
borderRadius: '4px',
|
|
35
|
+
width: '18px',
|
|
36
|
+
height: '18px',
|
|
37
|
+
background: "linear-gradient(".concat(item.color, ", ").concat(item.color, ")"),
|
|
38
|
+
alignItems: 'center',
|
|
39
|
+
alignContent: 'center'
|
|
40
|
+
} }),
|
|
41
|
+
React.createElement("p", { style: {
|
|
42
|
+
marginLeft: '10px',
|
|
43
|
+
fontSize: '14px',
|
|
44
|
+
marginRight: 4,
|
|
45
|
+
color: '#999'
|
|
46
|
+
} }, item === null || item === void 0 ? void 0 : item.payload.name)))); }))));
|
|
47
|
+
};
|
|
48
|
+
var CustomToolTip = function (propsTooltip) {
|
|
49
|
+
var _a, _b;
|
|
50
|
+
var payload = propsTooltip.payload;
|
|
51
|
+
return (React.createElement("div", { style: {
|
|
52
|
+
backgroundColor: '#f5f5f5e8',
|
|
53
|
+
margin: 10,
|
|
54
|
+
width: '10rem',
|
|
55
|
+
padding: 3,
|
|
56
|
+
borderRadius: 8
|
|
57
|
+
} },
|
|
58
|
+
React.createElement("div", { className: 'ml-2 mt-2' }, (_b = (_a = payload[0]) === null || _a === void 0 ? void 0 : _a.payload) === null || _b === void 0 ? void 0 : _b.name),
|
|
59
|
+
payload.map(function (item) { return (React.createElement("div", { key: item.id, style: {
|
|
60
|
+
display: 'flex',
|
|
61
|
+
padding: 5,
|
|
62
|
+
marginTop: 4
|
|
63
|
+
} },
|
|
64
|
+
React.createElement("div", { style: {
|
|
65
|
+
borderRadius: '4px',
|
|
66
|
+
width: '18px',
|
|
67
|
+
height: '18px',
|
|
68
|
+
background: "linear-gradient(".concat(item.payload.fill, ", ").concat(item.payload.fill, ")"),
|
|
69
|
+
alignItems: 'center',
|
|
70
|
+
alignContent: 'center'
|
|
71
|
+
} }),
|
|
72
|
+
React.createElement("div", { className: 'ml-2' }, item.name),
|
|
73
|
+
React.createElement("div", { style: {
|
|
74
|
+
marginLeft: 'auto'
|
|
75
|
+
} }, item.payload.value))); })));
|
|
76
|
+
};
|
|
77
|
+
var colors = data.reduce(function (color, _, index) {
|
|
78
|
+
color["color".concat(index + 1)] = colorChart[index % colorChart.length];
|
|
79
|
+
return color;
|
|
80
|
+
}, {});
|
|
81
|
+
var onMouseEnter = function (value) {
|
|
82
|
+
setHoveredBar(value.tooltipPayload[0].name);
|
|
83
|
+
};
|
|
84
|
+
var onMouseLeave = function () {
|
|
85
|
+
setHoveredBar(null);
|
|
86
|
+
};
|
|
87
|
+
return (React.createElement(PHXCard, null,
|
|
88
|
+
React.createElement(ResponsiveContainer, { height: 500, width: '100%' },
|
|
89
|
+
React.createElement(PieChart, { height: 400, width: 400 },
|
|
90
|
+
React.createElement(Pie
|
|
91
|
+
// @ts-ignore
|
|
92
|
+
, {
|
|
93
|
+
// @ts-ignore
|
|
94
|
+
color: colors, cx: '50%', cy: '50%', data: data,
|
|
95
|
+
// @ts-ignore
|
|
96
|
+
dataKey: dataKey !== null && dataKey !== void 0 ? dataKey : 'value', fill: '#8884d8', label: renderCustomizedLabel, onMouseEnter: function (value) { return onMouseEnter(value); }, onMouseLeave: onMouseLeave, labelLine: false, outerRadius: withChart !== null && withChart !== void 0 ? withChart : 150, style: { outline: 'none' } }, data.map(function (_entry, index) { return (React.createElement(Cell, { key: "cell-".concat(index), fill: colorChart[index % colorChart.length] })); })),
|
|
97
|
+
React.createElement(Legend, { content: React.createElement(CustomToolLegend, null) }),
|
|
98
|
+
React.createElement(Tooltip, { content: React.createElement(CustomToolTip, null) })))));
|
|
99
|
+
}
|
|
100
|
+
export default DonutChart;
|
|
101
|
+
//# sourceMappingURL=DonutChart.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DonutChart.js","sourceRoot":"","sources":["../../../../../src/components/Chart/DonutChart/DonutChart.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
interface PHXPieChartProps {
|
|
3
|
+
outerRadius?: number;
|
|
4
|
+
dataKey?: string;
|
|
5
|
+
data: Array<{
|
|
6
|
+
name: string;
|
|
7
|
+
value: number;
|
|
8
|
+
}>;
|
|
9
|
+
color?: Array<string>;
|
|
10
|
+
hiddenLabel?: boolean;
|
|
11
|
+
hiddenLegend?: boolean;
|
|
12
|
+
}
|
|
13
|
+
declare function PHXPieChart(props: Readonly<PHXPieChartProps>): React.JSX.Element;
|
|
14
|
+
export default PHXPieChart;
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
import { __assign } from "tslib";
|
|
2
|
+
import React, { useState } from 'react';
|
|
3
|
+
import { ResponsiveContainer, PieChart, Pie, Cell, Legend, Sector } from 'recharts';
|
|
4
|
+
import { PHXCard } from '../../Card';
|
|
5
|
+
function PHXPieChart(props) {
|
|
6
|
+
var _a = props.outerRadius, outerRadius = _a === void 0 ? 150 : _a, dataKey = props.dataKey, data = props.data, _b = props.color, color = _b === void 0 ? ['#6f8fef', '#8565ed', '#dd75c1', '#FF8042'] : _b, hiddenLabel = props.hiddenLabel, hiddenLegend = props.hiddenLegend;
|
|
7
|
+
var _c = useState(null), activeIndex = _c[0], setActiveIndex = _c[1];
|
|
8
|
+
var _d = useState(null), hoveredBar = _d[0], setHoveredBar = _d[1];
|
|
9
|
+
var onPieEnter = function (value, index) {
|
|
10
|
+
setActiveIndex(index);
|
|
11
|
+
setHoveredBar(value.tooltipPayload[0].name);
|
|
12
|
+
};
|
|
13
|
+
var onMouseLeave = function () {
|
|
14
|
+
setActiveIndex(null);
|
|
15
|
+
setHoveredBar(null);
|
|
16
|
+
};
|
|
17
|
+
var RADIAN = Math.PI / 180;
|
|
18
|
+
var CustomToolLegend = function (propsTooltip) {
|
|
19
|
+
var payload = propsTooltip.payload;
|
|
20
|
+
return (React.createElement("div", { className: 'custom-legend mt-4' },
|
|
21
|
+
React.createElement("div", { className: 'flex flex-wrap justify-end gap-2' }, payload === null || payload === void 0 ? void 0 : payload.map(function (item) { return (React.createElement("div", { key: item.id, style: {
|
|
22
|
+
backgroundColor: '#F6F6F7',
|
|
23
|
+
padding: 5,
|
|
24
|
+
borderRadius: '5px'
|
|
25
|
+
} },
|
|
26
|
+
React.createElement("div", { style: {
|
|
27
|
+
display: 'flex',
|
|
28
|
+
alignItems: 'center',
|
|
29
|
+
opacity: !hoveredBar ? 1 : hoveredBar === item.payload.name ? 1 : 0.5
|
|
30
|
+
} },
|
|
31
|
+
React.createElement("div", { style: {
|
|
32
|
+
borderRadius: '4px',
|
|
33
|
+
width: '18px',
|
|
34
|
+
height: '18px',
|
|
35
|
+
background: "linear-gradient(".concat(item.color, ", ").concat(item.color, ")"),
|
|
36
|
+
alignItems: 'center',
|
|
37
|
+
alignContent: 'center'
|
|
38
|
+
} }),
|
|
39
|
+
React.createElement("p", { style: {
|
|
40
|
+
marginLeft: '10px',
|
|
41
|
+
fontSize: '14px',
|
|
42
|
+
marginRight: 4,
|
|
43
|
+
color: '#999'
|
|
44
|
+
} }, item === null || item === void 0 ? void 0 : item.payload.name)))); }))));
|
|
45
|
+
};
|
|
46
|
+
var renderActiveShape = function (props) {
|
|
47
|
+
var cx = props.cx, cy = props.cy, innerRadius = props.innerRadius, outerRadius = props.outerRadius, startAngle = props.startAngle, endAngle = props.endAngle, fill = props.fill, payload = props.payload, percent = props.percent;
|
|
48
|
+
return (React.createElement("g", null,
|
|
49
|
+
React.createElement("text", { x: cx, y: cy, dy: -8, textAnchor: 'middle', fill: fill, style: { fontSize: '18px' } }, payload.name),
|
|
50
|
+
React.createElement("text", { x: cx, y: cy, dy: 12, textAnchor: 'middle', fill: fill }, "(".concat((percent * 100).toFixed(2), "%)")),
|
|
51
|
+
React.createElement(Sector, { cx: cx, cy: cy, opacity: 0.5, innerRadius: innerRadius, outerRadius: outerRadius, startAngle: startAngle, endAngle: endAngle, fill: fill, cornerRadius: 5 })));
|
|
52
|
+
};
|
|
53
|
+
return (React.createElement(PHXCard, null,
|
|
54
|
+
React.createElement(ResponsiveContainer, { height: 500, width: '100%' },
|
|
55
|
+
React.createElement(PieChart, { height: 400, onMouseLeave: onMouseLeave, width: 800 },
|
|
56
|
+
React.createElement(Pie, __assign({ activeIndex: activeIndex, activeShape: renderActiveShape, cx: '50%', cy: '50%', data: data, dataKey: dataKey !== null && dataKey !== void 0 ? dataKey : 'value', fill: '#8884d8', innerRadius: 130 }, (!hiddenLabel && {
|
|
57
|
+
label: function (_a) {
|
|
58
|
+
var _b;
|
|
59
|
+
var cx = _a.cx, cy = _a.cy, index = _a.index, innerRadius = _a.innerRadius, midAngle = _a.midAngle, outerRadius = _a.outerRadius, value = _a.value;
|
|
60
|
+
var radius = 25 + innerRadius + (outerRadius - innerRadius);
|
|
61
|
+
var x = cx + radius * Math.cos(-midAngle * RADIAN);
|
|
62
|
+
var y = cy + radius * Math.sin(-midAngle * RADIAN);
|
|
63
|
+
if (value === 0) {
|
|
64
|
+
return React.createElement(React.Fragment, null);
|
|
65
|
+
}
|
|
66
|
+
return (React.createElement("text", { dominantBaseline: 'central', fill: '#8884d8', textAnchor: x > cx ? 'start' : 'end', x: x, y: y }, (_b = data[index]) === null || _b === void 0 ? void 0 :
|
|
67
|
+
_b.name,
|
|
68
|
+
" (",
|
|
69
|
+
value,
|
|
70
|
+
")"));
|
|
71
|
+
}
|
|
72
|
+
}), { onMouseEnter: onPieEnter, outerRadius: outerRadius, cornerRadius: 5, paddingAngle: 1, labelLine: false, style: { outline: 'none' } }), data.map(function (_entry, index) { return (React.createElement(Cell, { key: "cell-".concat(index + 1), fill: color[index % color.length] })); })),
|
|
73
|
+
hiddenLegend && React.createElement(Legend, { content: React.createElement(CustomToolLegend, null) })))));
|
|
74
|
+
}
|
|
75
|
+
export default PHXPieChart;
|
|
76
|
+
//# sourceMappingURL=PieChart.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PieChart.js","sourceRoot":"","sources":["../../../../../src/components/Chart/PieChart/PieChart.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Chart/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React, { SelectHTMLAttributes } from 'react';
|
|
2
2
|
import { UseFormRegisterReturn } from 'react-hook-form';
|
|
3
|
+
import { ComplexAction } from '../types';
|
|
3
4
|
export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
|
|
4
5
|
className?: string;
|
|
5
6
|
register?: UseFormRegisterReturn;
|
|
@@ -8,5 +9,6 @@ export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
|
|
|
8
9
|
helpText?: string;
|
|
9
10
|
error?: boolean;
|
|
10
11
|
errorType?: 'required-field' | 'duplicate-field';
|
|
12
|
+
labelAction?: ComplexAction;
|
|
11
13
|
}
|
|
12
14
|
export declare const PHXSelect: React.FC<SelectProps>;
|
|
@@ -2,9 +2,11 @@ import { __assign, __rest } from "tslib";
|
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { classNames } from '../types';
|
|
4
4
|
export var PHXSelect = function (_a) {
|
|
5
|
-
var children = _a.children, className = _a.className, register = _a.register, label = _a.label, helpText = _a.helpText, error = _a.error, errorType = _a.errorType, rest = __rest(_a, ["children", "className", "register", "label", "helpText", "error", "errorType"]);
|
|
5
|
+
var children = _a.children, className = _a.className, register = _a.register, label = _a.label, helpText = _a.helpText, error = _a.error, errorType = _a.errorType, labelAction = _a.labelAction, rest = __rest(_a, ["children", "className", "register", "label", "helpText", "error", "errorType", "labelAction"]);
|
|
6
6
|
return (React.createElement("div", { className: className },
|
|
7
|
-
React.createElement("
|
|
7
|
+
React.createElement("div", { className: classNames(label ? 'flex mb-1 text-xs font-normal text-gray-700' : 'hidden', label && (labelAction === null || labelAction === void 0 ? void 0 : labelAction.content) ? 'justify-between' : '') },
|
|
8
|
+
label && React.createElement("label", null, label),
|
|
9
|
+
(labelAction === null || labelAction === void 0 ? void 0 : labelAction.content) && (React.createElement("p", { className: 'text-blue-600 hover:cursor-pointer hover:text-blue-800 hover:underline', onClick: labelAction.onClick }, labelAction.content))),
|
|
8
10
|
React.createElement("select", __assign({}, register, rest, { className: classNames('mt-1 block w-full rounded-lg border border-gray-500 px-3 py-1.5 text-xs font-normal shadow-sm hover:bg-gray-50 focus:border-gray-500 focus:bg-gray-50 focus:outline-none focus:outline-offset-1 focus:outline-indigo-500 focus:ring-transparent', error ? 'border-red-800 bg-red-50 hover:bg-red-50 focus:border-red-800 focus:bg-red-50' : '') }), children),
|
|
9
11
|
helpText ? React.createElement("div", { className: 'mt-1 pl-1 text-xs font-light text-gray-400' }, helpText) : null,
|
|
10
12
|
error && errorType ? (React.createElement("div", { className: 'ml-1 mt-1 flex items-center' },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../../src/components/Select/Select.tsx"],"names":[],"mappings":";AAAA,OAAO,KAA+B,MAAM,OAAO,CAAA;AAEnD,OAAO,EAAE,UAAU,
|
|
1
|
+
{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../../src/components/Select/Select.tsx"],"names":[],"mappings":";AAAA,OAAO,KAA+B,MAAM,OAAO,CAAA;AAEnD,OAAO,EAAE,UAAU,EAAiB,MAAM,UAAU,CAAA;AAapD,MAAM,CAAC,IAAM,SAAS,GAA0B,UAAC,EAUnC;IATZ,IAAA,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,QAAQ,cAAA,EACR,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,KAAK,WAAA,EACL,SAAS,eAAA,EACT,WAAW,iBAAA,EACR,IAAI,cATwC,+FAUhD,CADQ;IACU,OAAA,CACjB,6BAAK,SAAS,EAAE,SAAS;QACvB,6BACE,SAAS,EAAE,UAAU,CACnB,KAAK,CAAC,CAAC,CAAC,6CAA6C,CAAC,CAAC,CAAC,QAAQ,EAChE,KAAK,KAAI,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,OAAO,CAAA,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,CACvD;YAEA,KAAK,IAAI,mCAAQ,KAAK,CAAS;YAC/B,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,OAAO,KAAI,CACvB,2BACE,SAAS,EAAC,wEAAwE,EAClF,OAAO,EAAE,WAAW,CAAC,OAAO,IAE3B,WAAW,CAAC,OAAO,CAClB,CACL,CACG;QACN,2CACM,QAAQ,EACR,IAAI,IACR,SAAS,EAAE,UAAU,CACnB,iPAAiP,EACjP,KAAK,CAAC,CAAC,CAAC,+EAA+E,CAAC,CAAC,CAAC,EAAE,CAC7F,KAEA,QAAQ,CACF;QACR,QAAQ,CAAC,CAAC,CAAC,6BAAK,SAAS,EAAC,4CAA4C,IAAE,QAAQ,CAAO,CAAC,CAAC,CAAC,IAAI;QAC9F,KAAK,IAAI,SAAS,CAAC,CAAC,CAAC,CACpB,6BAAK,SAAS,EAAC,6BAA6B;YAC1C,6BACE,SAAS,EAAC,2BAA2B,EACrC,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,GAAG,EACf,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,4BAA4B;gBAElC,8BACE,CAAC,EAAC,0EAA0E,EAC5E,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GACtB,CACE;YAEN,2BAAG,SAAS,EAAC,sBAAsB,IAChC,SAAS,KAAK,gBAAgB,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,sBAAsB,CAClF,CACA,CACP,CAAC,CAAC,CAAC,IAAI,CACJ,CACP,CAAA;CAAA,CAAA"}
|
package/dist/esm/index.d.ts
CHANGED
|
@@ -51,4 +51,7 @@ import PHXGetActiveYearAndNextYear from './components/Func/getActiveAndNextSchoo
|
|
|
51
51
|
import { PHXDateRangePicker } from './components/DateRangePicker';
|
|
52
52
|
import PHXFetchAPI from './components/Func/serverQuery';
|
|
53
53
|
import { PBFMainWrap } from './components/PBFMainWrap';
|
|
54
|
-
|
|
54
|
+
import PieChart from './components/Chart/PieChart/PieChart';
|
|
55
|
+
import BarChart from './components/Chart/BarChart/BarChart';
|
|
56
|
+
import DonutChart from './components/Chart/DonutChart/DonutChart';
|
|
57
|
+
export { PHXButton, PHXCard, PHXSpinner, PHXMainWrap, PHXFormWrap, PHXHeaderBar, PHXTable, PHXInput, PHXSelect, PHXSelectBox, PHXRadio, PHXCheckbox, PHXFormStep, PHXFormTuition, PHXNotifications, PHXStep, PHXSkeleton, PHXFuncGetLoggedInfo, PHXClientQuery, PHXClientMutation, PHXTextarea, PHXModal, PHXTabs, PHXChoiceList, PHXDescriptionLists, PHXBadge, PHXLogin, PHXLoginSso, PHXBanner, PHXButtonGroup, PHXCombobox, PHXFormLayout, PHXHorizontalStack, PHXTextEditor, PHXUploadFile, PHXTableLogImportExport, PHXSearchResultList, PHXDatePicker, PHXLoginPn28, PHXEmptyRecord, PHXPagePermission, PHXTimePicker, PHXDropdown, PHXUploadAvatar, PHXGetHttpLinkConfig, PHXDateRangePicker, PHXUseDebounce, PHXResourceList, PHXGetCurrentYearWithTerm, PHXFetchAPI, PHXGetActiveYearAndNextYear, PHXLogUserActivity, PBFMainWrap, PieChart, BarChart, DonutChart, };
|
package/dist/esm/index.js
CHANGED
|
@@ -51,5 +51,8 @@ import PHXGetActiveYearAndNextYear from './components/Func/getActiveAndNextSchoo
|
|
|
51
51
|
import { PHXDateRangePicker } from './components/DateRangePicker';
|
|
52
52
|
import PHXFetchAPI from './components/Func/serverQuery';
|
|
53
53
|
import { PBFMainWrap } from './components/PBFMainWrap';
|
|
54
|
-
|
|
54
|
+
import PieChart from './components/Chart/PieChart/PieChart';
|
|
55
|
+
import BarChart from './components/Chart/BarChart/BarChart';
|
|
56
|
+
import DonutChart from './components/Chart/DonutChart/DonutChart';
|
|
57
|
+
export { PHXButton, PHXCard, PHXSpinner, PHXMainWrap, PHXFormWrap, PHXHeaderBar, PHXTable, PHXInput, PHXSelect, PHXSelectBox, PHXRadio, PHXCheckbox, PHXFormStep, PHXFormTuition, PHXNotifications, PHXStep, PHXSkeleton, PHXFuncGetLoggedInfo, PHXClientQuery, PHXClientMutation, PHXTextarea, PHXModal, PHXTabs, PHXChoiceList, PHXDescriptionLists, PHXBadge, PHXLogin, PHXLoginSso, PHXBanner, PHXButtonGroup, PHXCombobox, PHXFormLayout, PHXHorizontalStack, PHXTextEditor, PHXUploadFile, PHXTableLogImportExport, PHXSearchResultList, PHXDatePicker, PHXLoginPn28, PHXEmptyRecord, PHXPagePermission, PHXTimePicker, PHXDropdown, PHXUploadAvatar, PHXGetHttpLinkConfig, PHXDateRangePicker, PHXUseDebounce, PHXResourceList, PHXGetCurrentYearWithTerm, PHXFetchAPI, PHXGetActiveYearAndNextYear, PHXLogUserActivity, PBFMainWrap, PieChart, BarChart, DonutChart, };
|
|
55
58
|
//# sourceMappingURL=index.js.map
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,mCAAmC,CAAA;AACtE,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAA;AACvD,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAA;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAA;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAA;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAA;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAA;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAA;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAA;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAA;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAA;AACzD,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAA;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AACnD,OAAO,oBAAoB,MAAM,gCAAgC,CAAA;AACjE,OAAO,cAAc,MAAM,iCAAiC,CAAA;AAC5D,OAAO,iBAAiB,MAAM,oCAAoC,CAAA;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAA;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAA;AACvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAA;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAA;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAA;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAA;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAA;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AACnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,8BAA8B,CAAA;AACjE,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAA;AACvD,OAAO,EAAE,uBAAuB,EAAE,MAAM,mCAAmC,CAAA;AAC3E,OAAO,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAA;AACnE,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAA;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAA;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAA;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAA;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAA;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AACnD,OAAO,eAAe,MAAM,wCAAwC,CAAA;AACpE,OAAO,oBAAoB,MAAM,qCAAqC,CAAA;AACtE,OAAO,cAAc,MAAM,+BAA+B,CAAA;AAC1D,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAC3D,OAAO,yBAAyB,MAAM,iCAAiC,CAAA;AACvE,OAAO,2BAA2B,MAAM,8CAA8C,CAAA;AACtF,OAAO,EAAE,kBAAkB,EAAE,MAAM,8BAA8B,CAAA;AACjE,OAAO,WAAW,MAAM,+BAA+B,CAAA;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,QAAQ,MAAM,sCAAsC,CAAA;AAC3D,OAAO,QAAQ,MAAM,sCAAsC,CAAA;AAC3D,OAAO,UAAU,MAAM,0CAA0C,CAAA;AAEjE,OAAO,EACL,SAAS,EACT,OAAO,EACP,UAAU,EACV,WAAW,EACX,WAAW,EACX,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,QAAQ,EACR,WAAW,EACX,WAAW,EACX,cAAc,EACd,gBAAgB,EAChB,OAAO,EACP,WAAW,EACX,oBAAoB,EACpB,cAAc,EACd,iBAAiB,EACjB,WAAW,EACX,QAAQ,EACR,OAAO,EACP,aAAa,EACb,mBAAmB,EACnB,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,SAAS,EACT,cAAc,EACd,WAAW,EACX,aAAa,EACb,kBAAkB,EAClB,aAAa,EACb,aAAa,EACb,uBAAuB,EACvB,mBAAmB,EACnB,aAAa,EACb,YAAY,EACZ,cAAc,EACd,iBAAiB,EACjB,aAAa,EACb,WAAW,EACX,eAAe,EACf,oBAAoB,EACpB,kBAAkB,EAClB,cAAc,EACd,eAAe,EACf,yBAAyB,EACzB,WAAW,EACX,2BAA2B,EAC3B,kBAAkB,EAClB,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,UAAU,GACX,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "phx-react",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.610",
|
|
4
4
|
"description": "PHX REACT",
|
|
5
5
|
"main": "./dist/cjs/index.js",
|
|
6
6
|
"module": "./dist/esm/index.js",
|
|
@@ -99,7 +99,8 @@
|
|
|
99
99
|
"dependencies": {
|
|
100
100
|
"@lexical/code": "^0.12.0",
|
|
101
101
|
"axios": "^1.5.0",
|
|
102
|
-
"date-fns": "^2.30.0"
|
|
102
|
+
"date-fns": "^2.30.0",
|
|
103
|
+
"recharts": "^2.12.7"
|
|
103
104
|
},
|
|
104
105
|
"resolutions": {
|
|
105
106
|
"@types/mime": "3.0.4"
|