pagamio-frontend-commons-lib
Version:
Pagamio library for Frontend reusable components like the form engine and table container
46 lines (45 loc) • 2.45 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, getSeriesData } from '../utils';
const TreeMap = ({ title, chartDetails, url = DashboardPaths.QUERY, query, nameKey, valueKey, colors, tooltipTitle = 'Value', tooltipValueFormat, tooltipUnit = '', tooltipAdditionalFields = [], metricDetailData, showDetailsModal = true, ...props }) => {
const formatChartData = useCallback((data) => {
if (data && data.length > 0) {
const { seriesData } = getSeriesData(data, nameKey, valueKey);
return { seriesData };
}
return { seriesData: [] };
}, [nameKey, valueKey]);
const createChartOptions = useCallback((data) => {
const { seriesData } = formatChartData(data);
return {
tooltip: {
trigger: 'item',
formatter: undefined,
},
color: colors || defaultColors,
series: [
{
name: title,
type: 'treemap',
data: seriesData,
label: {
show: true,
formatter: '{b}',
},
roam: false,
},
],
};
}, [colors, title, formatChartData]);
return (_jsx(BaseChart, { detailsModalTitle: metricDetailData.title, url: url, query: query, chartDetails: chartDetails, getChartOptions: createChartOptions, topFivePerformingChartTitle: metricDetailData.topFiveChartTitle, bottomFivePerformingChartTitle: metricDetailData.bottomFiveChartTitle, tooltipValueFormat: tooltipValueFormat, tooltipTitle: tooltipTitle, tooltipUnit: tooltipUnit, tooltipAdditionalFields: tooltipAdditionalFields, showDetailsModal: showDetailsModal, ...metricDetailData, ...props, children: ({ metricData, tooltipFormatterFn }) => {
const options = createChartOptions(metricData);
// Add tooltip formatter from BaseChart
if (tooltipFormatterFn && options.tooltip) {
options.tooltip.formatter = tooltipFormatterFn;
}
return (_jsx("div", { className: "mt-4", children: _jsx(ReactECharts, { option: options, style: { height: '350px' } }) }));
} }));
};
export default TreeMap;