pagamio-frontend-commons-lib
Version:
Pagamio library for Frontend reusable components like the form engine and table container
106 lines (105 loc) • 5.47 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import ReactECharts from 'echarts-for-react';
import { useCallback } from 'react';
import BaseChart from '../components/BaseChart';
import { DashboardPaths, defaultColors } from '../utils';
const DonutChart = ({ title, url = DashboardPaths.QUERY, query, nameKey, valueKey, colors = defaultColors, tooltipValueFormat, chartDetails, tooltipTitle, tooltipUnit = '', tooltipAdditionalFields = [], showLabels = true, showTooltipMarker = true, metricDetailData, showDetailsModal = true, ...props }) => {
const formatChartData = useCallback((data) => {
if (!data?.length)
return { legendData: [], seriesData: [] };
const legendData = data.map((item) => item[nameKey]);
const seriesData = data.map((item) => {
const dataPoint = {
name: item[nameKey],
value: item[valueKey],
};
return dataPoint;
});
return { legendData, seriesData };
}, [nameKey, valueKey]);
const createChartOptions = useCallback((chartData) => {
return {
tooltip: {
trigger: 'item',
extraCssText: 'box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);',
backgroundColor: 'rgba(255, 255, 255, 0.9)',
textStyle: {
color: '#333',
},
borderWidth: 1,
borderColor: '#ddd',
appendToBody: true,
formatter: undefined,
},
legend: {
orient: 'horizontal',
bottom: 0,
left: 'center',
itemWidth: 15,
itemHeight: 10,
textStyle: {
fontSize: 12,
},
icon: 'rect',
pageIconSize: 12,
},
color: colors,
series: [
{
name: title,
type: 'pie',
radius: ['40%', '70%'],
center: ['50%', '45%'],
avoidLabelOverlap: false,
itemStyle: {
borderColor: '#fff',
borderWidth: 2,
},
label: {
show: showLabels,
position: 'outside',
formatter: '{b}',
fontSize: 12,
lineHeight: 15,
rich: {
b: {
fontSize: 12,
lineHeight: 15,
},
},
},
labelLine: {
show: showLabels,
length: 15,
length2: 10,
},
emphasis: {
label: {
show: true,
fontSize: 14,
fontWeight: 'bold',
},
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)',
},
},
data: chartData.seriesData,
},
],
};
}, [colors, showLabels, title]);
return (_jsx(BaseChart, { title: title, detailsModalTitle: metricDetailData.title, url: url, query: query, chartDetails: chartDetails, itemStatisticsQuery: metricDetailData.itemStatisticsQuery, valueMetricsQuery: metricDetailData.valueMetricsQuery, averageMetricsQuery: metricDetailData.averageMetricsQuery, distributionMetricsQuery: metricDetailData.distributionMetricsQuery, yAxisDataNameKey: metricDetailData.yAxisDataNameKey, xAxisNameKey: metricDetailData.xAxisNameKey, xAxisLabel: metricDetailData.xAxisLabel, yAxisLabel: metricDetailData.yAxisLabel, nameKey: metricDetailData.nameKey, valueKey: metricDetailData.valueKey, distributionChartTooltip: metricDetailData.distributionChartTooltip, dataGridSearchKey: metricDetailData.dataGridSearchKey, dataGridColumns: metricDetailData.dataGridColumns, dataSearchInputPlaceHolder: metricDetailData.dataSearchInputPlaceHolder, chartToolTip: metricDetailData.chartToolTip, detailsTableTitle: metricDetailData.detailsTableTitle, showDetailsModal: showDetailsModal, getChartOptions: (data) => createChartOptions(formatChartData(data)), topFivePerformingChartTitle: metricDetailData.topFiveChartTitle, bottomFivePerformingChartTitle: metricDetailData.bottomFiveChartTitle, tooltipValueFormat: tooltipValueFormat, tooltipTitle: tooltipTitle, tooltipUnit: tooltipUnit, tooltipAdditionalFields: tooltipAdditionalFields, ...props, children: ({ metricData, tooltipFormatterFn }) => {
const chartData = formatChartData(metricData);
const chartOptions = createChartOptions(chartData);
if (tooltipFormatterFn) {
chartOptions.tooltip = {
...chartOptions.tooltip,
formatter: tooltipFormatterFn,
};
}
return (_jsx("div", { className: "mt-4", children: _jsx(ReactECharts, { option: chartOptions, style: { height: '350px' } }) }));
} }));
};
export default DonutChart;