pagamio-frontend-commons-lib/lib/dashboard-visuals/visuals/DistributionChart.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';
const DistributionChart = ({ data, chartToolTip }) => {
    // Chart options
    const option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
            },
            ...chartToolTip,
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
        },
        xAxis: {
            type: 'category',
            data: data.map((item) => item.name),
            axisTick: {
                alignWithLabel: true,
            },
        },
        yAxis: {
            type: 'value',
        },
        series: [
            {
                name: 'Distribution',
                type: 'scatter',
                symbolSize: 10,
                data: data.map((item) => item.value),
                itemStyle: {
                    color: '#3B82F6',
                },
                emphasis: {
                    itemStyle: {
                        opacity: 1,
                    },
                },
            },
        ],
    };
    return (_jsx("div", { className: "w-full overflow-x-auto overflow-y-auto rounded-lg shadow-lg bg-white p-4", children: _jsx("div", { className: "min-w-[600px] w-full h-[400px]", children: _jsx(ReactECharts, { option: option, style: { height: '100%', width: '100%' }, className: "w-full h-full" }) }) }));
};
export default DistributionChart;