pagamio-frontend-commons-lib
Version:
Pagamio library for Frontend reusable components like the form engine and table container
81 lines (80 loc) • 4.79 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import dayjs from 'dayjs';
import { useCallback } from 'react';
import BaseChart from '../components/BaseChart';
import ChartFormatter from '../components/ChartFormatter';
import { DashboardPaths, defaultColors } from '../utils';
const LineChart = ({ query, data, title, xAxisLabel, yAxisLabel, url = DashboardPaths.QUERY, tooltipValueFormat, xAxisDataValueKey, seriesDataNameKey, seriesDataValueKey, tooltipTitle = 'Value', tooltipUnit = '', tooltipAdditionalFields = [], smooth = false, metricDetailData, showDetailsModal = true, yAxisLabelFormatter, xAxisLabelFormatter, ...props }) => {
const createChartOptions = useCallback(() => {
return {
tooltip: {
trigger: 'item',
axisPointer: { type: 'shadow' },
backgroundColor: '#fff',
borderColor: '#ddd',
textStyle: {
color: '#333',
},
formatter: Function,
extraCssText: 'box-shadow: 0 2px 8px rgba(0,0,0,0.1);',
...props.chartToolTip,
},
xAxis: {
type: 'category',
name: xAxisLabel,
nameLocation: 'middle',
nameGap: 30,
nameTextStyle: {
color: '#666',
fontSize: 12,
fontWeight: 'bold',
},
axisLabel: {
formatter: xAxisLabelFormatter ||
((value) => {
const date = dayjs(value);
return date.format('MMM DD HH:mm');
}),
rotate: 45,
},
},
yAxis: {
type: 'value',
name: yAxisLabel,
nameLocation: 'middle',
nameGap: 35,
nameTextStyle: {
color: '#666',
fontSize: 12,
fontWeight: 'bold',
},
...(yAxisLabelFormatter && {
axisLabel: {
formatter: yAxisLabelFormatter,
},
}),
},
color: props.colors ?? defaultColors[0],
};
}, [props.chartToolTip, props.colors, xAxisLabel, yAxisLabel, yAxisLabelFormatter, xAxisLabelFormatter]);
const getSymbolConfig = useCallback(() => {
return {
color: props.colors?.[0],
borderColor: props.colors?.[0] ?? defaultColors[0],
};
}, [props.colors]);
const getChartOptions = useCallback(() => {
const chartOptions = createChartOptions();
return chartOptions;
}, [createChartOptions]);
return (_jsx(BaseChart, { title: title, detailsModalTitle: metricDetailData.title ?? '', url: url, query: query, chartDetails: props.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, detailsTableTitle: metricDetailData.detailsTableTitle, getChartOptions: getChartOptions, distributionChartTooltip: metricDetailData.distributionChartTooltip, tooltipValueFormat: tooltipValueFormat, tooltipTitle: tooltipTitle, tooltipUnit: tooltipUnit, tooltipAdditionalFields: tooltipAdditionalFields, topFivePerformingChartTitle: metricDetailData.topFiveChartTitle, bottomFivePerformingChartTitle: metricDetailData.bottomFiveChartTitle, showDetailsModal: showDetailsModal, ...props, children: ({ metricData, tooltipFormatterFn }) => {
const chartOptions = createChartOptions();
// Add tooltip formatter from BaseChart
if (tooltipFormatterFn) {
chartOptions.tooltip.formatter = tooltipFormatterFn;
}
const symbolConfig = getSymbolConfig();
return (_jsx(ChartFormatter, { metricData: metricData, xAxisDataValueKey: xAxisDataValueKey, seriesDataNameKey: seriesDataNameKey, seriesDataValueKey: seriesDataValueKey, chartType: "line", chartOptions: chartOptions, smooth: smooth, symbolConfig: symbolConfig }));
} }));
};
export default LineChart;