pagamio-frontend-commons-lib
Version:
Pagamio library for Frontend reusable components like the form engine and table container
120 lines (119 loc) • 5.02 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import ReactECharts from 'echarts-for-react';
import { useMemo } from 'react';
import Card from '../components/CardWrapper';
import ChartWrapper from '../components/ChartWrapper';
import { useChartData } from '../hooks/useChartData';
import { DashboardPaths } from '../utils';
// Default colors match your image
const defaultColors = ['#6E7CF9', '#FFD572', '#8ADE89']; // Blue, Yellow, Green
const MultiGaugeChart = ({ title, url = DashboardPaths.QUERY, query, nameKey, valueKey, limit = 3, colors = defaultColors, chartDetails, showScaleLabels = true, metricDetailData, ...props }) => {
const { data: metricData = [], error, isEmpty, loading, refresh } = useChartData(url, query);
const chartOptions = useMemo(() => {
if (!metricData || metricData.length === 0)
return {};
// Transform data into gauge data format
const gaugeData = metricData.map((item, index) => {
const value = item[valueKey];
const name = item[nameKey];
// Calculate vertical positioning
const basePosition = -30 + index * 30; // -30%, 0%, 30%
const detailPosition = -20 + index * 30; // -20%, 10%, 40%
return {
value: value,
name: name,
title: {
offsetCenter: ['0%', `${basePosition}%`],
},
detail: {
valueAnimation: true,
offsetCenter: ['0%', `${detailPosition}%`],
formatter: '{value}%',
color: colors[index % colors.length],
backgroundColor: '#fff',
borderRadius: 10,
padding: [2, 4],
borderColor: colors[index % colors.length],
borderWidth: 1,
},
itemStyle: {
color: colors[index % colors.length],
},
};
});
return {
backgroundColor: 'transparent',
series: [
{
type: 'gauge',
startAngle: 90,
endAngle: -270,
pointer: {
show: false,
},
progress: {
show: true,
overlap: false,
roundCap: true,
clip: false,
itemStyle: {
borderWidth: 1,
borderColor: '#464646',
},
},
axisLine: {
lineStyle: {
width: 40,
color: [[1, 'rgba(220, 226, 240, 0.6)']], // Light blue/gray background
},
},
splitLine: {
show: showScaleLabels,
distance: 0,
length: 10,
lineStyle: {
width: 1,
color: 'rgba(100, 100, 100, 0.4)',
},
},
axisTick: {
show: showScaleLabels,
distance: 0,
length: 5,
lineStyle: {
width: 1,
color: 'rgba(100, 100, 100, 0.4)',
},
},
axisLabel: {
show: showScaleLabels,
distance: 15,
fontSize: 10,
color: '#999',
formatter: function (value) {
return value + '%';
},
},
data: gaugeData,
title: {
fontSize: 14,
color: '#333',
},
detail: {
width: 50,
height: 14,
fontSize: 14,
color: 'inherit',
borderColor: 'inherit',
borderRadius: 20,
borderWidth: 1,
formatter: '{value}%',
},
radius: '90%',
},
],
};
}, [colors, metricData, nameKey, showScaleLabels, valueKey]);
return (_jsx(Card, { title: title, ...props, children: _jsx(ChartWrapper, { loading: loading, error: error, isEmpty: isEmpty, onRetry: refresh, children: _jsx("div", { className: "mt-[12px] flex justify-center", children: _jsx(ReactECharts, { option: chartOptions, style: { height: '400px', width: '100%' } }) }) }) }));
};
export default MultiGaugeChart;