pagamio-frontend-commons-lib
Version:
Pagamio library for Frontend reusable components like the form engine and table container
95 lines (94 loc) • 4.24 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 } from '../utils';
const defaultSpeedometerColors = {
low: '#4CAF50', // Green
medium: '#FFC107', // Amber
high: '#F44336', // Red
};
const SpeedometerChart = ({ title, url = DashboardPaths.QUERY, query, colors = defaultSpeedometerColors, thresholds = { low: 30, medium: 70 }, chartDetails, tooltipValueFormat, tooltipTitle = 'Value', tooltipUnit = '%', tooltipAdditionalFields = [], metricDetailData, ...props }) => {
const getSpeedometerOptions = useCallback((data) => {
if (!data || data.length === 0)
return {};
// Extract the first item for single gauge display
const firstItem = data[0];
const name = firstItem[metricDetailData.nameKey];
const value = firstItem[metricDetailData.valueKey];
return {
tooltip: {
formatter: '{a} <br/>{b} : {c}%',
},
series: [
{
name: title,
type: 'gauge',
progress: {
show: true,
width: 18,
},
axisLine: {
lineStyle: {
width: 18,
color: [
[thresholds.low / 100, colors.low],
[thresholds.medium / 100, colors.medium],
[1, colors.high],
],
},
},
axisTick: {
show: false,
},
splitLine: {
length: 15,
lineStyle: {
width: 2,
color: '#999',
},
},
axisLabel: {
distance: 25,
color: '#999',
fontSize: 12,
},
anchor: {
show: true,
showAbove: true,
size: 25,
itemStyle: {
borderWidth: 10,
},
},
title: {
show: true,
fontSize: 14,
},
detail: {
valueAnimation: true,
fontSize: 30,
offsetCenter: [0, '70%'],
formatter: '{value}%',
color: 'inherit',
},
data: [
{
value: value,
name: name,
},
],
},
],
};
}, [colors, metricDetailData.nameKey, thresholds.low, thresholds.medium, title, metricDetailData.valueKey]);
return (_jsx(BaseChart, { url: url, query: query, chartDetails: chartDetails, getChartOptions: getSpeedometerOptions, detailsModalTitle: title ?? 'Speedometer Chart', topFivePerformingChartTitle: metricDetailData.topFiveChartTitle, bottomFivePerformingChartTitle: metricDetailData.bottomFiveChartTitle, tooltipValueFormat: tooltipValueFormat, tooltipTitle: tooltipTitle, tooltipUnit: tooltipUnit, tooltipAdditionalFields: tooltipAdditionalFields, ...metricDetailData, ...props, children: ({ metricData, tooltipFormatterFn }) => {
const chartOptions = getSpeedometerOptions(metricData);
// Add tooltip formatter from BaseChart
if (tooltipFormatterFn && chartOptions.tooltip) {
chartOptions.tooltip.formatter = tooltipFormatterFn;
}
return (_jsx("div", { className: "mt-4", children: _jsx(ReactECharts, { option: chartOptions, style: { height: '350px' } }) }));
} }));
};
export default SpeedometerChart;