@pagamio/frontend-commons-lib/lib/dashboard-visuals/visuals/TreeMap.js

Pagamio library for Frontend reusable components like the form engine and table container

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;