phx-react
Version:
PHX REACT
146 lines • 11.8 kB
JavaScript
import { __assign } from "tslib";
import React, { useState } from 'react';
import { Bar, ComposedChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis, Cell, Line, } from 'recharts';
function PHXBarChart(props) {
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;
var _a = useState(null), hoveredBar = _a[0], setHoveredBar = _a[1];
var onMouseEnter = function (value) {
setHoveredBar(value.tooltipPayload[0].name);
};
var onMouseLeave = function () {
setHoveredBar(null);
};
var CustomToolLegend = function (propsTooltip) {
var payload = propsTooltip.payload;
// gộp những item có label name giống nhau thành 1
var aggregatedItems = {};
payload.forEach(function (item) {
var _a;
var name = (_a = item === null || item === void 0 ? void 0 : item.payload) === null || _a === void 0 ? void 0 : _a.name;
if (!aggregatedItems[name]) {
aggregatedItems[name] = __assign(__assign({}, item), { count: 1 });
}
else {
aggregatedItems[name].count++;
}
});
var aggregatedItemsArray = Object.values(aggregatedItems);
return (React.createElement("div", { className: 'custom-legend mt-4' },
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: {
backgroundColor: '#F6F6F7',
padding: 5,
borderRadius: '5px'
} },
React.createElement("div", { style: {
display: 'flex',
alignItems: 'center',
opacity: !hoveredBar ? 1 : hoveredBar === item.payload.name ? 1 : 0.5
} },
React.createElement("div", { style: {
borderRadius: '4px',
width: '18px',
height: '18px',
background: "linear-gradient(".concat(item.color, ", ").concat(item.color, ")"),
alignItems: 'center',
alignContent: 'center'
} }),
React.createElement("p", { style: {
marginLeft: '10px',
fontSize: '14px',
marginRight: 4
} }, item === null || item === void 0 ? void 0 : item.payload.name)))); }))));
};
var CustomToolTip = function (propsTooltip) {
var _a, _b;
var active = propsTooltip.active, payload = propsTooltip.payload;
if (!active || !payload || payload.length === 0) {
return null;
}
var groupedItems = {};
payload.forEach(function (item) {
var name = item.name;
if (!groupedItems[name]) {
groupedItems[name] = item;
}
});
var groupedItemsArray = Object.values(groupedItems);
return (React.createElement("div", { style: {
backgroundColor: '#f5f5f5',
margin: 10,
width: '10rem',
padding: 3,
borderRadius: 8
} },
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),
groupedItemsArray.map(function (item) { return (React.createElement("div", { key: item.id, style: {
display: 'flex',
padding: 5,
marginTop: 4
} },
React.createElement("div", { style: {
borderRadius: '4px',
width: '18px',
height: '18px',
background: "linear-gradient(".concat(item.color, ", ").concat(item.color, ")"),
alignItems: 'center',
alignContent: 'center',
opacity: hoveredBar === item.name ? 1 : 0.5
} }),
React.createElement("div", { className: 'ml-2', style: { opacity: hoveredBar === item.name ? 1 : 0.5 } }, item.name),
React.createElement("div", { style: {
marginLeft: 'auto',
opacity: hoveredBar === item.name ? 1 : 0.5
} }, item.payload.amt))); })));
};
var columns = chartColumnA === null || chartColumnA === void 0 ? void 0 : chartColumnA.map(function (item) { return (__assign({}, item)); });
var columnsPageB = chartColumnB === null || chartColumnB === void 0 ? void 0 : chartColumnB.map(function (item) { return (__assign({}, item)); });
var handleBoderChart = function (index, chartColumn) {
var chartIndex = index === chartColumn.length - 1 ? radiusChart !== null && radiusChart !== void 0 ? radiusChart : [6, 6, 0, 0] : [0, 0, 0, 0];
return chartIndex;
};
return (React.createElement(ResponsiveContainer, { height: 500, width: '100%' },
React.createElement(ComposedChart, { barGap: 20, data: data, height: 300, width: 500 },
React.createElement(CartesianGrid, { strokeDasharray: '3 3', vertical: false }),
React.createElement(XAxis, { axisLine: false, dataKey: xAxisKey !== null && xAxisKey !== void 0 ? xAxisKey : 'name' }),
React.createElement(YAxis, { axisLine: false }),
React.createElement(YAxis, { axisLine: false, dataKey: yAxisRightKey !== null && yAxisRightKey !== void 0 ? yAxisRightKey : 'yAxisRight', domain: domain, minTickGap: 20, orientation: 'right', tickCount: 5, yAxisId: 2 }),
React.createElement(Tooltip, { content: React.createElement(CustomToolTip, null) }),
React.createElement(Legend, { content: React.createElement(CustomToolLegend, null) }),
chartType === 'one-to-many' && (React.createElement(React.Fragment, null,
React.createElement(Bar, { barSize: barSize, dataKey: dataKeyChartA !== null && dataKeyChartA !== void 0 ? dataKeyChartA : 'pv', onMouseEnter: function (value) { return onMouseEnter(value); }, fill: '#dd75c1', name: 'name' },
React.createElement(Cell, { fill: '#dd75c1' })), columnsPageB === null || columnsPageB === void 0 ? void 0 :
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 },
// @ts-ignore
radius: handleBoderChart(index, columnsPageB), stackId: 'stackB' },
React.createElement(Cell, { key: "cell-pageB-".concat(index), fill: item.color }))); }))),
chartType === 'many-to-one' && (React.createElement(React.Fragment, null, columnsPageB === null || columnsPageB === void 0 ? void 0 :
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 },
// @ts-ignore
radius: handleBoderChart(index, columnsPageB), stackId: 'stackB' },
React.createElement(Cell, { key: "cell-pageB-".concat(index), fill: item.color }))); }),
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' },
React.createElement(Cell, { fill: '#dd75c1' })))),
chartType === 'single' && (
// @ts-ignore
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' },
React.createElement(Cell, { fill: '#dd75c1' }))),
chartType === 'double' && (React.createElement(React.Fragment, null,
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' },
React.createElement(Cell, { fill: '#dd75c1' })),
doubleColumnInRow && (
// @ts-ignore
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 },
React.createElement(Cell, { fill: '#8868ee' }))))),
chartType === 'many-to-many' && (React.createElement(React.Fragment, null, columns === null || columns === void 0 ? void 0 :
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 },
// @ts-ignore
radius: handleBoderChart(index, columns), stackId: 'stackA' },
React.createElement(Cell, { key: "cell-pageA-".concat(index), fill: item.color }))); }), columnsPageB === null || columnsPageB === void 0 ? void 0 :
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 },
// @ts-ignore
radius: handleBoderChart(index, columnsPageB), stackId: 'stackB' },
React.createElement(Cell, { key: "cell-pageB-".concat(index), fill: item.color }))); }))),
!hiddenLineChart && (React.createElement(Line, { type: 'monotone', name: nameLineChart, dataKey: dataKeyLineChart !== null && dataKeyLineChart !== void 0 ? dataKeyLineChart : 'lineChart', stroke: colorLineChart !== null && colorLineChart !== void 0 ? colorLineChart : '#ff7300' })))));
}
export default PHXBarChart;
//# sourceMappingURL=BarChart.js.map