phx-react
Version:
PHX REACT
129 lines • 12.5 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importStar(require("react"));
const recharts_1 = require("recharts");
function PHXBarChart(props) {
const { data, dataKeyLineChart, colorLineChart, dataKeyChartA, dataKeyChartB, xAxisKey, yAxisRightKey, domain, nameLineChart, nameLegendChartSingle, hiddenLineChart, doubleColumnInRow, barSize, nameColumnDouble, chartType, radiusChart, chartColumnA, chartColumnB, } = props;
const [hoveredBar, setHoveredBar] = (0, react_1.useState)(null);
const onMouseEnter = (value) => {
setHoveredBar(value.tooltipPayload[0].name);
};
const onMouseLeave = () => {
setHoveredBar(null);
};
const CustomToolLegend = (propsTooltip) => {
const { payload } = propsTooltip;
// gộp những item có label name giống nhau thành 1
const aggregatedItems = {};
payload.forEach((item) => {
var _a;
const name = (_a = item === null || item === void 0 ? void 0 : item.payload) === null || _a === void 0 ? void 0 : _a.name;
if (!aggregatedItems[name]) {
aggregatedItems[name] = {
...item,
count: 1,
};
}
else {
aggregatedItems[name].count++;
}
});
const aggregatedItemsArray = Object.values(aggregatedItems);
return (react_1.default.createElement("div", { className: `custom-legend ${chartType === 'single-column' ? 'mt-2 mr-11 ml-8 mb-2' : 'mt-4'}` },
react_1.default.createElement("div", { className: 'flex flex-wrap md:justify-end sm:justify-start gap-2' }, aggregatedItemsArray === null || aggregatedItemsArray === void 0 ? void 0 : aggregatedItemsArray.map((item) => (react_1.default.createElement("div", { key: item.id, className: 'p-1 rounded-md' },
react_1.default.createElement("div", { style: {
display: 'flex',
alignItems: 'center',
opacity: !hoveredBar ? 1 : hoveredBar === item.payload.name ? 1 : 0.5,
} },
react_1.default.createElement("div", { className: 'rounded w-[14px] h-[14px] flex items-center', style: {
background: `linear-gradient(${item.color}, ${item.color})`,
} }),
react_1.default.createElement("p", { className: 'ml-1 mr-1 text-xs text-[#999]' }, item === null || item === void 0 ? void 0 : item.payload.name))))))));
};
const CustomToolTip = (propsTooltip) => {
var _a, _b, _c, _d;
const { active, payload } = propsTooltip;
if (!active || !payload || payload.length === 0) {
return null;
}
const groupedItems = {};
payload.forEach((item) => {
const name = item.name;
if (!groupedItems[name]) {
groupedItems[name] = item;
}
});
const groupedItemsArray = Object.values(groupedItems);
return (react_1.default.createElement("div", { className: 'bg-gray-100 m-2.5 w-40 p-0.5 rounded-lg' }, chartType === 'single-column' ? (react_1.default.createElement("div", { className: 'flex justify-between' },
react_1.default.createElement("p", { className: 'ml-2 py-1' }, (_b = (_a = groupedItemsArray[0]) === null || _a === void 0 ? void 0 : _a.payload) === null || _b === void 0 ? void 0 : _b.name),
groupedItemsArray.map((item) => (react_1.default.createElement("p", { key: item.id, className: 'py-1 mr-2' }, item.payload.amt))))) : (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("div", { className: 'ml-2 mt-2' }, (_d = (_c = groupedItemsArray[0]) === null || _c === void 0 ? void 0 : _c.payload) === null || _d === void 0 ? void 0 : _d.name),
groupedItemsArray.map((item) => (react_1.default.createElement("div", { key: item.id, className: 'flex p-1.5 mt-1' },
react_1.default.createElement("div", { className: `
rounded w-4 h-4 bg-gradient-to-r flex items-center justify-center
${item.color}
${item.color}
${hoveredBar === item.name ? 'opacity-100' : 'opacity-50'}
`, style: {
background: `linear-gradient(${item.color}, ${item.color})`,
} }),
react_1.default.createElement("div", { className: `ml-2 ${hoveredBar === item.name ? 'opacity-100' : 'opacity-50'}` }, item.name),
react_1.default.createElement("div", { className: `ml-auto ${hoveredBar === item.name ? 'opacity-100' : 'opacity-50'}` }, item.payload.amt))))))));
};
const columns = chartColumnA === null || chartColumnA === void 0 ? void 0 : chartColumnA.map((item) => ({ ...item }));
const columnsPageB = chartColumnB === null || chartColumnB === void 0 ? void 0 : chartColumnB.map((item) => ({ ...item }));
const handleBoderChart = (index, chartColumn) => {
const chartIndex = index === chartColumn.length - 1 ? radiusChart !== null && radiusChart !== void 0 ? radiusChart : [6, 6, 0, 0] : [0, 0, 0, 0];
return chartIndex;
};
return (react_1.default.createElement("div", { className: `${chartType === 'single-column' ? 'min-w-[1200px]' : ''}` },
react_1.default.createElement(recharts_1.ResponsiveContainer, { height: 500, width: '100%' },
react_1.default.createElement(recharts_1.ComposedChart, { barGap: 20, data: data, height: 300, width: 500 },
react_1.default.createElement(recharts_1.CartesianGrid, { strokeDasharray: '3 3', vertical: false }),
react_1.default.createElement(recharts_1.XAxis, { axisLine: false, dataKey: xAxisKey !== null && xAxisKey !== void 0 ? xAxisKey : 'name' }),
react_1.default.createElement(recharts_1.YAxis, { axisLine: false }),
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 }),
react_1.default.createElement(recharts_1.Tooltip, { content: react_1.default.createElement(CustomToolTip, null) }),
react_1.default.createElement(recharts_1.Legend, { content: react_1.default.createElement(CustomToolLegend, null) }),
chartType === 'one-to-many' && (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(recharts_1.Bar, { barSize: barSize, dataKey: dataKeyChartA !== null && dataKeyChartA !== void 0 ? dataKeyChartA : 'pv', onMouseEnter: (value) => onMouseEnter(value), fill: '#dd75c1', name: 'name' },
react_1.default.createElement(recharts_1.Cell, { fill: '#dd75c1' })), columnsPageB === null || columnsPageB === void 0 ? void 0 :
columnsPageB.map((item, index) => (react_1.default.createElement(recharts_1.Bar, { key: `bar-pageB-${index}`, onMouseEnter: (value) => onMouseEnter(value), onMouseLeave: onMouseLeave, barSize: barSize, dataKey: dataKeyChartB !== null && dataKeyChartB !== void 0 ? dataKeyChartB : 'amt', fill: item.color, name: item.name, position: { x: 30 },
// @ts-ignore
radius: handleBoderChart(index, columnsPageB), stackId: 'stackB' },
react_1.default.createElement(recharts_1.Cell, { key: `cell-pageB-${index}`, fill: item.color })))))),
chartType === 'many-to-one' && (react_1.default.createElement(react_1.default.Fragment, null, columnsPageB === null || columnsPageB === void 0 ? void 0 :
columnsPageB.map((item, index) => (react_1.default.createElement(recharts_1.Bar, { key: `bar-pageB-${index}`, onMouseEnter: (value) => onMouseEnter(value), onMouseLeave: onMouseLeave, barSize: barSize, dataKey: 'pv', fill: item.color, name: item.name, position: { x: 30 },
// @ts-ignore
radius: handleBoderChart(index, columnsPageB), stackId: 'stackB' },
react_1.default.createElement(recharts_1.Cell, { key: `cell-pageB-${index}`, fill: item.color })))),
react_1.default.createElement(recharts_1.Bar, { onMouseEnter: (value) => onMouseEnter(value), onMouseLeave: onMouseLeave, barSize: barSize, dataKey: dataKeyChartB !== null && dataKeyChartB !== void 0 ? dataKeyChartB : 'uv', fill: '#dd75c1', name: 'name' },
react_1.default.createElement(recharts_1.Cell, { fill: '#dd75c1' })))),
chartType === 'single' && (
// @ts-ignore
react_1.default.createElement(recharts_1.Bar, { onMouseEnter: (value) => onMouseEnter(value), onMouseLeave: onMouseLeave, barSize: barSize, dataKey: dataKeyChartB !== null && dataKeyChartB !== void 0 ? dataKeyChartB : 'pv', fill: '#dd75c1', name: 'name' },
react_1.default.createElement(recharts_1.Cell, { fill: '#dd75c1' }))),
chartType === 'single-column' && (react_1.default.createElement(recharts_1.Bar, { onMouseEnter: (value) => onMouseEnter(value), onMouseLeave: onMouseLeave, barSize: barSize, dataKey: dataKeyChartB !== null && dataKeyChartB !== void 0 ? dataKeyChartB : 'pv', fill: '#7857FF', name: nameLegendChartSingle, radius: [6, 6, 0, 0] },
react_1.default.createElement(recharts_1.Cell, { fill: '#7857FF' }))),
chartType === 'double' && (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(recharts_1.Bar, { onMouseEnter: (value) => onMouseEnter(value), onMouseLeave: onMouseLeave, barSize: barSize, dataKey: dataKeyChartB !== null && dataKeyChartB !== void 0 ? dataKeyChartB : 'pv', fill: '#dd75c1', name: 'name' },
react_1.default.createElement(recharts_1.Cell, { fill: '#dd75c1' })),
doubleColumnInRow && (
// @ts-ignore
react_1.default.createElement(recharts_1.Bar, { onMouseEnter: (value) => onMouseEnter(value), onMouseLeave: onMouseLeave, barSize: barSize, dataKey: dataKeyChartB !== null && dataKeyChartB !== void 0 ? dataKeyChartB : 'uv', fill: '#8868ee', name: nameColumnDouble },
react_1.default.createElement(recharts_1.Cell, { fill: '#8868ee' }))))),
chartType === 'many-to-many' && (react_1.default.createElement(react_1.default.Fragment, null, columns === null || columns === void 0 ? void 0 :
columns.map((item, index) => (react_1.default.createElement(recharts_1.Bar, { key: `bar-pageA-${index}`, onMouseEnter: (value) => onMouseEnter(value), onMouseLeave: onMouseLeave, barSize: barSize, dataKey: dataKeyChartB !== null && dataKeyChartB !== void 0 ? dataKeyChartB : 'uv', fill: item.color, name: item.name, position: { x: 30 },
// @ts-ignore
radius: handleBoderChart(index, columns), stackId: 'stackA' },
react_1.default.createElement(recharts_1.Cell, { key: `cell-pageA-${index}`, fill: item.color })))), columnsPageB === null || columnsPageB === void 0 ? void 0 :
columnsPageB.map((item, index) => (react_1.default.createElement(recharts_1.Bar, { key: `bar-pageB-${index}`, onMouseEnter: (value) => onMouseEnter(value), onMouseLeave: onMouseLeave, barSize: barSize, dataKey: dataKeyChartB !== null && dataKeyChartB !== void 0 ? dataKeyChartB : 'pv', fill: item.color, name: item.name, position: { x: 30 },
// @ts-ignore
radius: handleBoderChart(index, columnsPageB), stackId: 'stackB' },
react_1.default.createElement(recharts_1.Cell, { key: `cell-pageB-${index}`, fill: item.color })))))),
!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' }))))));
}
exports.default = PHXBarChart;
//# sourceMappingURL=BarChart.js.map