@pagamio/frontend-commons-lib
Version:
Pagamio library for Frontend reusable components like the form engine and table container
54 lines (53 loc) • 3.56 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 defaultGaugeColors = {
low: '#F44336', // Red
medium: '#FFC107', // Amber
high: '#4CAF50', // Green
};
const GaugeChart = ({ title, url = DashboardPaths.QUERY, query, nameKey, valueKey, colors = defaultGaugeColors, chartDetails, tooltipValueFormat, tooltipTitle = 'Value', tooltipUnit = '', tooltipAdditionalFields = [], metricDetailData, showDetailsModal = true, ...props }) => {
const getGaugeOptions = useCallback((data, tooltipFormatter) => {
if (!data || data.length === 0)
return {};
// Extract the first item for single gauge display
const firstItem = data[0];
const name = firstItem[nameKey];
const value = firstItem[valueKey];
return {
tooltip: {
formatter: tooltipFormatter || `{a} <br/>{b} : {c}%`,
},
series: [
{
name: title,
type: 'gauge',
detail: { formatter: '{value}%' },
data: [{ value, name }],
axisLine: {
lineStyle: {
width: 30,
color: [
[0.33, colors.low],
[0.66, colors.medium],
[1, colors.high],
],
},
},
pointer: {
itemStyle: {
color: 'auto',
},
},
},
],
};
}, [colors, nameKey, title, valueKey]);
return (_jsx(BaseChart, { title: title, detailsModalTitle: metricDetailData.title, url: url, query: query, chartDetails: chartDetails, itemStatisticsQuery: metricDetailData.itemStatisticsQuery, valueMetricsQuery: metricDetailData.valueMetricsQuery, averageMetricsQuery: metricDetailData.averageMetricsQuery, distributionMetricsQuery: metricDetailData.distributionMetricsQuery, yAxisDataNameKey: metricDetailData.yAxisDataNameKey, xAxisNameKey: metricDetailData.xAxisNameKey, xAxisLabel: metricDetailData.xAxisLabel, yAxisLabel: metricDetailData.yAxisLabel, nameKey: metricDetailData.nameKey, valueKey: metricDetailData.valueKey, dataGridSearchKey: metricDetailData.dataGridSearchKey, dataGridColumns: metricDetailData.dataGridColumns, dataSearchInputPlaceHolder: metricDetailData.dataSearchInputPlaceHolder, chartToolTip: metricDetailData.chartToolTip, detailsTableTitle: metricDetailData.detailsTableTitle, getChartOptions: getGaugeOptions, distributionChartTooltip: metricDetailData.distributionChartTooltip, tooltipValueFormat: tooltipValueFormat, tooltipTitle: tooltipTitle, tooltipUnit: tooltipUnit, tooltipAdditionalFields: tooltipAdditionalFields, topFivePerformingChartTitle: metricDetailData.topFiveChartTitle, bottomFivePerformingChartTitle: metricDetailData.bottomFiveChartTitle, showDetailsModal: showDetailsModal, ...props, children: ({ metricData, tooltipFormatterFn }) => {
const gaugeOptions = getGaugeOptions(metricData, tooltipFormatterFn);
return (_jsx("div", { className: "mt-4", children: _jsx(ReactECharts, { option: gaugeOptions, style: { height: '350px' } }) }));
} }));
};
export default GaugeChart;