@pagamio/frontend-commons-lib 0.8.175 → 0.8.183

package/lib/dashboard-visuals/visuals/HorizontalBarChart.d.ts

@@ -0,0 +1,50 @@
+import type { QueryProps } from 'src/shared/types';
+import type { ChartToolTipProps, DistributionChartTooltip, DistributionQueryProps, MetricData, StatisticsQueryProps, TableColumn, TooltipField } from '../types';
+export declare const sortMetricData: (data: MetricData[], valueKey: string, sortOrder?: "asc" | "desc") => MetricData[];
+interface ChartProps<TData extends {
+    id: string | number;
+}> {
+    title?: string;
+    colorScheme?: string[];
+    chartDetails?: {
+        columns?: any[];
+        data?: any[];
+    };
+    themeColor?: string;
+    className?: string;
+    url?: string;
+    query: QueryProps;
+    sortOrder?: 'asc' | 'desc';
+    tooltipValueFormat: string;
+    tooltipTitle?: string;
+    tooltipUnit?: string;
+    tooltipAdditionalFields?: TooltipField[];
+    currencyDisplaySymbol?: string;
+    metricDetailData: {
+        title: string;
+        topFiveChartTitle: string;
+        bottomFiveChartTitle: string;
+        statisticsUrl?: string;
+        itemStatisticsQuery: StatisticsQueryProps;
+        valueMetricsQuery: StatisticsQueryProps;
+        averageMetricsQuery: StatisticsQueryProps;
+        distributionMetricsQuery: DistributionQueryProps;
+        yAxisDataNameKey: string;
+        xAxisNameKey: string;
+        xAxisLabel: string;
+        yAxisLabel: string;
+        nameKey: string;
+        valueKey: string;
+        dataGridSearchKey: string;
+        dataGridColumns: TableColumn<TData>[];
+        dataSearchInputPlaceHolder: string;
+        chartToolTip: ChartToolTipProps;
+        detailsTableTitle?: string;
+        distributionChartTooltip: DistributionChartTooltip;
+    };
+    showDetailsModal?: boolean;
+}
+declare const HorizontalBarChart: <TData extends {
+    id: string | number;
+}>({ title, colorScheme, className, url, tooltipValueFormat, query, sortOrder, tooltipTitle, tooltipUnit, tooltipAdditionalFields, currencyDisplaySymbol, metricDetailData, showDetailsModal, ...props }: ChartProps<TData>) => import("react/jsx-runtime").JSX.Element;
+export default HorizontalBarChart;

package/lib/dashboard-visuals/visuals/HorizontalBarChart.js

@@ -0,0 +1,131 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import ReactECharts from 'echarts-for-react';
+import { useCallback, useMemo, useState } from 'react';
+import Card from '../components/CardWrapper';
+import ChartDetailsModalWrapper from '../components/ChartDetailsModalWrapper';
+import ChartWrapper from '../components/ChartWrapper';
+import { useChartData } from '../hooks/useChartData';
+import { useTooltipFormatter } from '../hooks/useTooltipFormatter';
+import { DashboardPaths, processTooltipFields } from '../utils';
+import { createDistributionMetricOptions, getChartBarOptions } from '../utils/chartOptions';
+import { createTooltipFormatter } from '../utils/tooltipUtils';
+// Add sortMetricData function
+export const sortMetricData = (data, valueKey, sortOrder = 'desc') => {
+    return [...data].sort((a, b) => {
+        const aValue = Number(a[valueKey]) || 0;
+        const bValue = Number(b[valueKey]) || 0;
+        return sortOrder === 'asc' ? aValue - bValue : bValue - aValue;
+    });
+};
+const constructMetricData = (baseData, queryConfig, isEmpty, loading, error, refreshFn, currency) => ({
+    value: baseData?.[queryConfig.valueKey] ?? 0,
+    previousValue: queryConfig.previousValueKey ? (baseData?.[queryConfig.previousValueKey] ?? 0) : undefined,
+    change: baseData?.[queryConfig.changeKey] ?? 0,
+    title: queryConfig.title,
+    format: queryConfig.format,
+    isEmpty,
+    loading,
+    currency,
+    error,
+    refresh: () => {
+        refreshFn().catch(() => { });
+    },
+});
+const HorizontalBarChart = ({ title, colorScheme = ['#60A5FA', '#93C5FD'], className = '', url = DashboardPaths.QUERY, tooltipValueFormat, query, sortOrder = 'desc', tooltipTitle = 'Value', tooltipUnit = '', tooltipAdditionalFields = [], currencyDisplaySymbol, metricDetailData, showDetailsModal = true, ...props }) => {
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const { data: metricData = [], error, isEmpty, loading, refresh } = useChartData(url, query);
+    const statisticsUrl = metricDetailData?.statisticsUrl ?? DashboardPaths.METRICS;
+    const { data: fullMetricData = [], error: fullDataError, isEmpty: isfullMetricDataEmpty, loading: isLoadingFullMetricData, refresh: refreshFullMetricData, } = useChartData(url, {
+        ...query,
+        limit: undefined,
+    });
+    const useStatisticData = (queryProps) => {
+        const { data, error, isEmpty, loading, refresh } = useChartData(statisticsUrl, {
+            ...queryProps.query,
+        });
+        return { data, error, isEmpty, loading, refresh };
+    };
+    const { data: itemStatData, error: itemStatDataError, isEmpty: isitemStatMetricDataEmpty, loading: isLoadingItemStatlMetricData, refresh: refreshItemStatMetricData, } = useStatisticData(metricDetailData.itemStatisticsQuery);
+    const { data: valueStatData, error: valueStatDataError, isEmpty: isValueStatMetricDataEmpty, loading: isLoadingValueStatlMetricData, refresh: refreshValueStatMetricData, } = useStatisticData(metricDetailData.valueMetricsQuery);
+    const { data: averageStatData, error: averageStatDataError, isEmpty: isAverageStatMetricDataEmpty, loading: isLoadingAverageStatlMetricData, refresh: refreshAverageStatMetricData, } = useStatisticData(metricDetailData.averageMetricsQuery);
+    const { data: distributionStatData, error: distributionStatDataError, isEmpty: isDistributionStatMetricDataEmpty, loading: isLoadingDistributionStatlMetricData, refresh: refreshDistributionStatMetricData, } = useChartData(url, {
+        ...metricDetailData.distributionMetricsQuery.query,
+    });
+    const sortedMetricData = useMemo(() => sortMetricData(metricData, metricDetailData.valueKey, sortOrder), [metricData, metricDetailData.valueKey, sortOrder]);
+    const sortedFullMetricData = useMemo(() => sortMetricData(fullMetricData, metricDetailData.valueKey, sortOrder), [fullMetricData, metricDetailData.valueKey, sortOrder]);
+    const { processedTooltipFields, tooltipFormatterFn } = useTooltipFormatter(tooltipValueFormat, tooltipTitle, tooltipUnit, tooltipAdditionalFields, metricData, currencyDisplaySymbol);
+    const processedDistributionTooltipFields = useMemo(() => processTooltipFields(metricDetailData.distributionChartTooltip.tooltipAdditionalFields), [metricDetailData.distributionChartTooltip.tooltipAdditionalFields]);
+    const createChartOptions = useCallback((data, title, colorScheme, metricDetailData, tooltipConfig) => {
+        const currency = data?.[0]?.currency;
+        const formatterFn = tooltipConfig
+            ? createTooltipFormatter(tooltipValueFormat, tooltipConfig.tooltipTitle ?? tooltipTitle, tooltipConfig.tooltipUnit ?? tooltipUnit, tooltipConfig.tooltipFields ?? processedTooltipFields, tooltipConfig.data ?? data, currency, currencyDisplaySymbol)
+            : tooltipFormatterFn;
+        return getChartBarOptions({
+            title,
+            colorScheme,
+            yAxisDataNameKey: metricDetailData.yAxisDataNameKey,
+            xAxisNameKey: metricDetailData.xAxisNameKey,
+            xAxisLabel: metricDetailData.xAxisLabel,
+            yAxisLabel: metricDetailData.yAxisLabel,
+            chartToolTip: {
+                ...metricDetailData.chartToolTip,
+                formatter: formatterFn,
+            },
+            data,
+        });
+    }, [tooltipFormatterFn, tooltipTitle, tooltipUnit, processedTooltipFields]);
+    const createChartOptionsWithData = useCallback((data, tooltipConfig) => createChartOptions(data, title, colorScheme, metricDetailData, tooltipConfig), [title, colorScheme, metricDetailData, createChartOptions]);
+    const chartBarOptions = useMemo(() => createChartOptionsWithData(sortedMetricData), [sortedMetricData, createChartOptionsWithData]);
+    const fullChartOptions = useMemo(() => createChartOptionsWithData(sortedFullMetricData), [sortedFullMetricData, createChartOptionsWithData]);
+    const { topFiveItems, bottomFiveItems } = useMemo(() => {
+        if (!sortedFullMetricData.length) {
+            return {
+                topFiveItems: [],
+                bottomFiveItems: [],
+            };
+        }
+        const topFiveMetric = sortedFullMetricData.slice(0, 5);
+        const bottomFiveMetric = sortedFullMetricData.slice(-5).reverse();
+        return {
+            topFiveItems: createChartOptionsWithData(topFiveMetric, {
+                tooltipTitle: metricDetailData.topFiveChartTitle,
+                tooltipUnit,
+                tooltipFields: processedTooltipFields,
+                data: topFiveMetric,
+            }),
+            bottomFiveItems: createChartOptionsWithData(bottomFiveMetric, {
+                tooltipTitle: metricDetailData.bottomFiveChartTitle,
+                tooltipUnit,
+                tooltipFields: processedTooltipFields,
+                data: bottomFiveMetric,
+            }),
+        };
+    }, [sortedFullMetricData, createChartOptionsWithData, tooltipUnit, processedTooltipFields]);
+    const distributionMetricData = useMemo(() => {
+        return createDistributionMetricOptions({
+            distributionChartTooltip: metricDetailData.distributionChartTooltip,
+            distributionData: distributionStatData ?? [],
+            processedTooltipFields: processedDistributionTooltipFields,
+            xAxisDataValueKey: metricDetailData.distributionMetricsQuery.xAxisDataValueKey,
+            seriesDataValueKey: metricDetailData.distributionMetricsQuery.seriesDataValueKey,
+        });
+    }, [
+        distributionStatData,
+        metricDetailData.distributionMetricsQuery.seriesDataValueKey,
+        metricDetailData.distributionMetricsQuery.xAxisDataValueKey,
+        metricDetailData.distributionChartTooltip,
+        processedDistributionTooltipFields,
+    ]);
+    return (_jsxs(_Fragment, { children: [_jsx(Card, { title: title, ...props, onOpenDetails: metricData ? () => setIsModalOpen(true) : undefined, children: _jsx(ChartWrapper, { loading: loading, error: error, isEmpty: isEmpty, onRetry: refresh, children: _jsx("div", { className: "mt-[19px]", children: _jsx(ReactECharts, { option: chartBarOptions, style: { height: '100%', minHeight: '300px' }, className: "h-[300px] md:h-[400px]", opts: { renderer: 'canvas' }, notMerge: true }) }) }) }), showDetailsModal && (_jsx(ChartDetailsModalWrapper, { metricDetailData: metricDetailData, isModalOpen: isModalOpen, setIsModalOpen: setIsModalOpen, fullData: fullMetricData, columns: metricDetailData.dataGridColumns, error: fullDataError, isEmpty: isfullMetricDataEmpty, loading: isLoadingFullMetricData, detailsTableTitle: metricDetailData.detailsTableTitle, refresh: refreshFullMetricData, renderDetailsChart: fullMetricData.length <= 40, chartData: fullChartOptions, top5PerformingItems: topFiveItems, bottom5NonPerformingItems: bottomFiveItems, valueKey: metricDetailData.valueKey, dataGridQuery: query, searchKey: metricDetailData.dataGridSearchKey, searchInputPlaceHolder: metricDetailData.dataSearchInputPlaceHolder, itemMetricsData: constructMetricData(itemStatData, metricDetailData.itemStatisticsQuery, isitemStatMetricDataEmpty, isLoadingItemStatlMetricData, itemStatDataError, refreshItemStatMetricData, itemStatData?.additionalData?.currency ?? undefined), valueMetricsData: constructMetricData(valueStatData, metricDetailData.valueMetricsQuery, isValueStatMetricDataEmpty, isLoadingValueStatlMetricData, valueStatDataError, refreshValueStatMetricData, valueStatData?.additionalData?.currency ?? undefined), averageMetricsData: constructMetricData(averageStatData, metricDetailData.averageMetricsQuery, isAverageStatMetricDataEmpty, isLoadingAverageStatlMetricData, averageStatDataError, refreshAverageStatMetricData, averageStatData?.additionalData?.currency ?? undefined), distributionMetricsData: {
+                    data: distributionMetricData ?? [],
+                    title: metricDetailData.distributionMetricsQuery.title,
+                    isEmpty: isDistributionStatMetricDataEmpty,
+                    loading: isLoadingDistributionStatlMetricData,
+                    error: distributionStatDataError,
+                    refresh: () => {
+                        refreshDistributionStatMetricData().catch(() => { });
+                    },
+                    chartToolTip: metricDetailData.distributionMetricsQuery.chartToolTip,
+                }, topFivePerformingChartTitle: metricDetailData.topFiveChartTitle, bottomFivePerformingChartTitle: metricDetailData.bottomFiveChartTitle }))] }));
+};
+export default HorizontalBarChart;

package/lib/dashboard-visuals/visuals/ItemPerformanceCard.d.ts

@@ -0,0 +1,30 @@
+import type { QueryProps } from 'src/shared/types';
+import type { ChartToolTipProps, DistributionQueryProps, StatisticsQueryProps, TableColumn } from '../types';
+interface ItemPerformanceCardProps<TData extends {
+    id: string | number;
+}> {
+    title?: string;
+    query: QueryProps;
+    url?: string;
+    itemNameKey: string;
+    amountValueKey: string;
+    unitsValueKey: string;
+    metricDetailData?: {
+        statisticsUrl?: string;
+        itemStatisticsQuery: StatisticsQueryProps;
+        valueMetricsQuery: StatisticsQueryProps;
+        averageMetricsQuery: StatisticsQueryProps;
+        distributionMetricsQuery: DistributionQueryProps;
+        nameKey: string;
+        valueKey: string;
+        dataGridSearchKey: string;
+        dataGridColumns: TableColumn<TData>[];
+        dataSearchInputPlaceHolder: string;
+        chartToolTip?: ChartToolTipProps;
+        detailsTableTitle?: string;
+    };
+}
+declare const ItemPerformanceCard: <TData extends {
+    id: string | number;
+}>({ title, query, url, itemNameKey, amountValueKey, unitsValueKey, metricDetailData, }: ItemPerformanceCardProps<TData>) => import("react/jsx-runtime").JSX.Element;
+export default ItemPerformanceCard;

package/lib/dashboard-visuals/visuals/ItemPerformanceCard.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Card from '../components/CardWrapper';
+import ChartWrapper from '../components/ChartWrapper';
+import { useChartData } from '../hooks/useChartData';
+import { DashboardPaths } from '../utils';
+// Format number with thousands separator
+const formatNumber = (num) => {
+    return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+};
+// Format currency in ZAR
+const formatCurrency = (amount) => {
+    return `R ${formatNumber(amount)}`;
+};
+const ItemPerformanceCard = ({ title, query, url = DashboardPaths.QUERY, itemNameKey, amountValueKey, unitsValueKey, metricDetailData, }) => {
+    const { data: metricData = [], error, isEmpty, loading, refresh } = useChartData(url, query);
+    const getRankBackground = (rank) => {
+        if (rank === 1)
+            return 'bg-core-add';
+        if (rank === 2)
+            return 'bg-blue-400';
+        return 'bg-amber-600';
+    };
+    return (_jsx(Card, { title: title, children: _jsx(ChartWrapper, { loading: loading, error: error, isEmpty: isEmpty, onRetry: refresh, children: _jsx("div", { className: "mt-[19px]", children: _jsx("div", { className: "space-y-4", children: metricData.map((item, index) => {
+                        const itemIndex = index + 1;
+                        return (_jsxs("div", { className: "flex flex-col sm:flex-row items-start sm:items-center gap-4 p-4 hover:bg-gray-50 rounded-lg transition-colors duration-200", children: [_jsx("div", { className: "flex-shrink-0", children: _jsx("span", { className: `
+                w-8 h-8 rounded-full flex items-center justify-center text-white font-semibold
+                ${getRankBackground(itemIndex)}
+              `, children: itemIndex }) }), _jsxs("div", { className: "flex-grow", children: [_jsx("h3", { className: "font-medium text-gray-900 mb-1", children: item[itemNameKey] }), _jsxs("div", { className: "flex justify-between text-sm", children: [_jsxs("div", { className: "text-gray-600", children: ["Revenue:", ' ', _jsx("span", { className: "font-semibold text-gray-900", children: formatCurrency(item[amountValueKey]) })] }), _jsxs("div", { className: "text-gray-600", children: ["Units: ", _jsx("span", { className: "font-semibold text-gray-900", children: formatNumber(item[unitsValueKey]) })] })] })] })] }, item.name));
+                    }) }) }) }) }));
+};
+export default ItemPerformanceCard;

package/lib/dashboard-visuals/visuals/LineChart.d.ts

@@ -0,0 +1,56 @@
+import type { QueryProps } from 'src/shared/types';
+import type { ChartToolTipProps, DistributionChartTooltip, DistributionQueryProps, StatisticsQueryProps, TableColumn, TooltipField } from '../types';
+interface LineChartProps<TData extends {
+    id: string | number;
+}> {
+    data: any;
+    title?: string;
+    colors?: string[];
+    url?: string;
+    xAxisLabel?: string;
+    yAxisLabel?: string;
+    chartDetails?: {
+        columns?: any[];
+        data?: any[];
+    };
+    query: QueryProps;
+    seriesDataNameKey: string;
+    seriesDataValueKey: string;
+    xAxisDataValueKey: string;
+    chartToolTip: ChartToolTipProps;
+    tooltipValueFormat: string;
+    tooltipTitle?: string;
+    tooltipUnit?: string;
+    tooltipAdditionalFields?: (string | TooltipField)[];
+    currencyDisplaySymbol?: string;
+    smooth?: boolean;
+    metricDetailData: {
+        statisticsUrl?: string;
+        title: string;
+        itemStatisticsQuery: StatisticsQueryProps;
+        valueMetricsQuery: StatisticsQueryProps;
+        averageMetricsQuery: StatisticsQueryProps;
+        distributionMetricsQuery: DistributionQueryProps;
+        yAxisDataNameKey: string;
+        xAxisNameKey: string;
+        xAxisLabel: string;
+        yAxisLabel: string;
+        nameKey: string;
+        valueKey: string;
+        dataGridSearchKey: string;
+        dataGridColumns: TableColumn<TData>[];
+        dataSearchInputPlaceHolder: string;
+        detailsTableTitle?: string;
+        chartToolTip?: ChartToolTipProps;
+        topFiveChartTitle?: string;
+        bottomFiveChartTitle?: string;
+        distributionChartTooltip: DistributionChartTooltip;
+    };
+    showDetailsModal?: boolean;
+    yAxisLabelFormatter?: (value: number) => string;
+    xAxisLabelFormatter?: (label: string) => string;
+}
+declare const LineChart: <TData extends {
+    id: string | number;
+}>({ query, data, title, xAxisLabel, yAxisLabel, url, tooltipValueFormat, xAxisDataValueKey, seriesDataNameKey, seriesDataValueKey, tooltipTitle, tooltipUnit, tooltipAdditionalFields, smooth, metricDetailData, showDetailsModal, yAxisLabelFormatter, xAxisLabelFormatter, ...props }: LineChartProps<TData>) => import("react/jsx-runtime").JSX.Element;
+export default LineChart;

package/lib/dashboard-visuals/visuals/LineChart.js

@@ -0,0 +1,80 @@
+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;

package/lib/dashboard-visuals/visuals/LineGraph.d.ts

@@ -0,0 +1,50 @@
+import type { QueryProps } from 'src/shared/types';
+import type { ChartToolTipProps, DistributionChartTooltip, DistributionQueryProps, StatisticsQueryProps, TableColumn, TooltipField } from '../types';
+interface LineGraphProps<TData extends {
+    id: string | number;
+}> {
+    title: string;
+    yAxisLabel: string;
+    xAxisLabel?: string;
+    color?: string;
+    className?: string;
+    xAxisDataKey: string;
+    yAxisDataKey: string;
+    categoryDataKey: string;
+    url?: string;
+    query: QueryProps;
+    chartToolTip: ChartToolTipProps;
+    tooltipValueFormat: string;
+    tooltipTitle?: string;
+    tooltipUnit?: string;
+    seriesName?: string;
+    tooltipAdditionalFields?: (string | TooltipField)[];
+    yAxisLabelFormatter?: (value: number) => string;
+    metricDetailData: {
+        title: string;
+        statisticsUrl?: string;
+        itemStatisticsQuery: StatisticsQueryProps;
+        valueMetricsQuery: StatisticsQueryProps;
+        averageMetricsQuery: StatisticsQueryProps;
+        distributionMetricsQuery: DistributionQueryProps;
+        yAxisDataNameKey: string;
+        xAxisNameKey: string;
+        xAxisLabel: string;
+        yAxisLabel: string;
+        nameKey: string;
+        valueKey: string;
+        dataGridSearchKey: string;
+        dataGridColumns: TableColumn<TData>[];
+        dataSearchInputPlaceHolder: string;
+        detailsTableTitle?: string;
+        topFiveChartTitle: string;
+        bottomFiveChartTitle: string;
+        distributionChartTooltip: DistributionChartTooltip;
+    };
+}
+declare const LineGraph: <TData extends {
+    id: string | number;
+}>({ title, yAxisLabel, xAxisLabel, color, className, xAxisDataKey, yAxisDataKey, categoryDataKey, url, query, chartToolTip, tooltipValueFormat, tooltipTitle, tooltipUnit, tooltipAdditionalFields, yAxisLabelFormatter, metricDetailData, showDetailsModal, ...props }: LineGraphProps<TData> & {
+    showDetailsModal?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+export default LineGraph;

package/lib/dashboard-visuals/visuals/LineGraph.js

@@ -0,0 +1,189 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import ReactECharts from 'echarts-for-react';
+import { useCallback, useMemo, useState } from 'react';
+import Card from '../components/CardWrapper';
+import ChartDetailsModal from '../components/ChartDetailsModal';
+import ChartWrapper from '../components/ChartWrapper';
+import { useChartData } from '../hooks/useChartData';
+import { DashboardPaths } from '../utils';
+import { createDistributionMetricOptions, getChartBarOptions, getLineGraphOptions } from '../utils/chartOptions';
+import { createTooltipFormatter, processTooltipFields } from '../utils/tooltipUtils';
+const LineGraph = ({ title, yAxisLabel, xAxisLabel, color = '#60A5FA', className = '', xAxisDataKey, yAxisDataKey, categoryDataKey, url = DashboardPaths.QUERY, query, chartToolTip, tooltipValueFormat, tooltipTitle = 'Value', tooltipUnit = '', tooltipAdditionalFields = [], yAxisLabelFormatter, metricDetailData, showDetailsModal = true, ...props }) => {
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const { data: metricData = [], error, isEmpty, loading, refresh } = useChartData(url, query);
+    const processData = useCallback((data) => {
+        return data.map((item) => ({
+            name: item[xAxisDataKey],
+            value: item[yAxisDataKey],
+            category: item[categoryDataKey],
+        }));
+    }, [xAxisDataKey, yAxisDataKey, categoryDataKey]);
+    const processLineGraphData = (data) => {
+        const groupedData = {};
+        data.forEach((transaction) => {
+            const category = transaction[categoryDataKey] ?? props.seriesName ?? xAxisLabel;
+            if (!groupedData[category]) {
+                groupedData[category] = [];
+            }
+            groupedData[category].push({
+                date: transaction[xAxisDataKey],
+                value: transaction[yAxisDataKey],
+            });
+        });
+        return Object.entries(groupedData).map(([name, data]) => ({
+            name,
+            data,
+        }));
+    };
+    const statisticsUrl = metricDetailData?.statisticsUrl ?? DashboardPaths.METRICS;
+    const statisticsHooks = {
+        item: useChartData(statisticsUrl, {
+            ...metricDetailData.itemStatisticsQuery.query,
+        }),
+        value: useChartData(statisticsUrl, {
+            ...metricDetailData.valueMetricsQuery.query,
+        }),
+        average: useChartData(statisticsUrl, {
+            ...metricDetailData.averageMetricsQuery.query,
+        }),
+        distribution: useChartData(url, {
+            ...metricDetailData.distributionMetricsQuery.query,
+        }),
+    };
+    const processedTooltipFields = useMemo(() => processTooltipFields(tooltipAdditionalFields), [tooltipAdditionalFields]);
+    const processedDistributionTooltipFields = useMemo(() => processTooltipFields(metricDetailData.distributionChartTooltip.tooltipAdditionalFields), [metricDetailData.distributionChartTooltip.tooltipAdditionalFields]);
+    const createTooltipConfig = useCallback((tooltipOverrides) => ({
+        tooltipTitle: tooltipOverrides?.tooltipTitle ?? tooltipTitle,
+        tooltipUnit: tooltipOverrides?.tooltipUnit ?? tooltipUnit,
+        tooltipFields: tooltipOverrides?.tooltipFields?.map((field) => ({
+            ...field,
+            label: field.label ?? '',
+            toolTipkey: field.toolTipkey ?? '',
+            valueKey: field.valueKey ?? '',
+            nameKey: field.nameKey ?? '',
+            suffix: field.suffix ?? '',
+            format: field.format ?? 'number',
+            formatter: field.formatter ?? ((value) => String(value)),
+        })) ?? processedTooltipFields,
+        data: tooltipOverrides?.data,
+    }), [tooltipTitle, tooltipUnit, processedTooltipFields]);
+    const createChartOptions = useCallback((data, config) => {
+        const currency = data?.[0]?.currency;
+        const tooltipSettings = createTooltipConfig(config.tooltipConfig);
+        const formatterFn = createTooltipFormatter(tooltipValueFormat, tooltipSettings.tooltipTitle, tooltipSettings.tooltipUnit, tooltipSettings.tooltipFields, tooltipSettings.data ?? data, currency);
+        if (config.processLineGraphOptions) {
+            return getLineGraphOptions({
+                title: config.title,
+                yAxisLabel: yAxisLabel,
+                chartToolTip: {
+                    ...chartToolTip,
+                    formatter: formatterFn,
+                },
+                data,
+                yAxisLabelFormatter,
+            });
+        }
+        else {
+            return getChartBarOptions({
+                title: config.title,
+                yAxisDataNameKey: metricDetailData.yAxisDataNameKey,
+                xAxisNameKey: metricDetailData.xAxisNameKey,
+                xAxisLabel: metricDetailData.xAxisLabel,
+                yAxisLabel: metricDetailData.yAxisLabel,
+                chartToolTip: {
+                    ...chartToolTip,
+                    formatter: formatterFn,
+                },
+                data,
+            });
+        }
+    }, [createTooltipConfig, tooltipValueFormat, color, metricDetailData, chartToolTip]);
+    const fullDataHook = useChartData(url, {
+        ...query,
+        limit: undefined,
+    });
+    const lineChartSeriesData = useMemo(() => processLineGraphData(metricData ?? []), [metricData]);
+    const chartBarOptions = useMemo(() => createChartOptions(lineChartSeriesData, { title, processLineGraphOptions: true }), [metricData]);
+    const fullChartSeriesData = useMemo(() => processData(fullDataHook.data ?? []), [fullDataHook.data]);
+    const fullChartOptions = createChartOptions(fullChartSeriesData, { title, processLineGraphOptions: false });
+    const { topFiveItems, bottomFiveItems } = useMemo(() => {
+        if (!fullDataHook.data?.length) {
+            return {
+                topFiveItems: getChartBarOptions({
+                    data: [],
+                    title: metricDetailData.topFiveChartTitle,
+                    yAxisDataNameKey: metricDetailData.xAxisNameKey,
+                    xAxisNameKey: metricDetailData.yAxisDataNameKey,
+                    xAxisLabel: metricDetailData.yAxisLabel,
+                    yAxisLabel: metricDetailData.xAxisLabel,
+                    chartToolTip,
+                }),
+                bottomFiveItems: getChartBarOptions({
+                    data: [],
+                    title: metricDetailData.bottomFiveChartTitle,
+                    yAxisDataNameKey: metricDetailData.xAxisNameKey,
+                    xAxisNameKey: metricDetailData.yAxisDataNameKey,
+                    xAxisLabel: metricDetailData.yAxisLabel,
+                    yAxisLabel: metricDetailData.xAxisLabel,
+                    chartToolTip,
+                }),
+            };
+        }
+        const topFiveMetric = fullDataHook.data.slice(0, 5);
+        const bottomFiveMetric = fullDataHook.data.slice(-5).reverse();
+        return {
+            topFiveItems: createChartOptions(topFiveMetric, {
+                title: metricDetailData.topFiveChartTitle,
+                tooltipConfig: { tooltipTitle: metricDetailData.topFiveChartTitle },
+                processLineGraphOptions: false,
+            }),
+            bottomFiveItems: createChartOptions(bottomFiveMetric, {
+                title: metricDetailData.bottomFiveChartTitle,
+                tooltipConfig: { tooltipTitle: metricDetailData.bottomFiveChartTitle },
+                processLineGraphOptions: false,
+            }),
+        };
+    }, [fullDataHook, createChartOptions, metricDetailData, processData, color, chartToolTip]);
+    const distributionMetricData = useMemo(() => {
+        return createDistributionMetricOptions({
+            distributionChartTooltip: metricDetailData.distributionChartTooltip,
+            distributionData: statisticsHooks.distribution.data ?? [],
+            processedTooltipFields: processedDistributionTooltipFields,
+            xAxisDataValueKey: metricDetailData.distributionMetricsQuery.xAxisDataValueKey,
+            seriesDataValueKey: metricDetailData.distributionMetricsQuery.seriesDataValueKey,
+        });
+    }, [
+        statisticsHooks.distribution.data,
+        metricDetailData.distributionMetricsQuery.seriesDataValueKey,
+        metricDetailData.distributionMetricsQuery.xAxisDataValueKey,
+        metricDetailData.distributionChartTooltip,
+        processedDistributionTooltipFields,
+    ]);
+    const createMetricsData = useCallback((hook, query) => ({
+        value: hook.data?.[query.valueKey] ?? 0,
+        previousValue: query.previousValueKey ? (hook.data?.[query.previousValueKey] ?? 0) : undefined,
+        change: hook.data?.[query.changeKey] ?? 0,
+        title: query.title,
+        format: query.format,
+        isEmpty: hook.isEmpty,
+        loading: hook.loading,
+        error: hook.error,
+        currency: hook.data?.additionalData?.currency,
+        refresh: () => hook.refresh().catch(() => { }),
+    }), []);
+    const metricsData = useMemo(() => ({
+        item: createMetricsData(statisticsHooks.item, metricDetailData.itemStatisticsQuery),
+        value: createMetricsData(statisticsHooks.value, metricDetailData.valueMetricsQuery),
+        average: createMetricsData(statisticsHooks.average, metricDetailData.averageMetricsQuery),
+    }), [createMetricsData, statisticsHooks, metricDetailData]);
+    return (_jsxs(_Fragment, { children: [_jsx(Card, { title: title, ...props, onOpenDetails: metricData ? () => setIsModalOpen(true) : undefined, children: _jsx(ChartWrapper, { loading: loading, error: error, isEmpty: isEmpty, onRetry: refresh, children: _jsx("div", { className: "mt-[19px]", children: _jsx(ReactECharts, { option: chartBarOptions, style: { height: '350px' } }) }) }) }), showDetailsModal && (_jsx(ChartDetailsModal, { title: metricDetailData.title, isOpen: isModalOpen, onClose: () => setIsModalOpen(false), data: fullDataHook.data ?? [], columns: metricDetailData.dataGridColumns, error: fullDataHook.error, isEmpty: fullDataHook.isEmpty, loading: fullDataHook.loading, detailsTableTitle: metricDetailData.detailsTableTitle, refresh: fullDataHook.refresh, renderDetailsChart: fullDataHook.data ? fullDataHook.data.length <= 40 : false, chartData: fullChartOptions, top5PerformingItems: topFiveItems, bottom5NonPerformingItems: bottomFiveItems, valueKey: metricDetailData.valueKey, dataGridQuery: query, searchKey: metricDetailData.dataGridSearchKey, searchInputPlaceHolder: metricDetailData.dataSearchInputPlaceHolder, itemMetricsData: metricsData.item, valueMetricsData: metricsData.value, averageMetricsData: metricsData.average, distributionMetricsData: {
+                    data: distributionMetricData ?? [],
+                    title: metricDetailData.distributionMetricsQuery.title,
+                    isEmpty: statisticsHooks.distribution.isEmpty,
+                    loading: statisticsHooks.distribution.loading,
+                    error: statisticsHooks.distribution.error,
+                    refresh: () => statisticsHooks.distribution.refresh().catch(() => { }),
+                    chartToolTip: metricDetailData.distributionMetricsQuery.chartToolTip,
+                } }))] }));
+};
+export default LineGraph;

package/lib/dashboard-visuals/visuals/MetricSummaryCard.d.ts

@@ -0,0 +1,14 @@
+import type { ApiErrorResponse } from '../../api';
+interface MetricSummaryCardProps {
+    title: string;
+    format: string;
+    value: number;
+    previousValue?: number;
+    loading: boolean;
+    isEmpty: boolean;
+    currency?: string;
+    error?: ApiErrorResponse;
+    refresh: () => void;
+}
+declare const MetricSummaryCard: ({ title, format, value, previousValue, loading, isEmpty, currency, error, refresh, }: MetricSummaryCardProps) => import("react/jsx-runtime").JSX.Element;
+export default MetricSummaryCard;

package/lib/dashboard-visuals/visuals/MetricSummaryCard.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Card from '../components/CardWrapper';
+import ChartWrapper from '../components/ChartWrapper';
+import { formatValue } from '../utils';
+const MetricSummaryCard = ({ title, format, value, previousValue, loading, isEmpty, currency, error, refresh, }) => {
+    return (_jsx(Card, { title: title, children: _jsx(ChartWrapper, { loading: loading, error: error, isEmpty: isEmpty, onRetry: refresh, children: _jsx("div", { className: "flex justify-between", style: { height: '50px' }, children: _jsxs("div", { children: [_jsx("div", { className: "text-xl font-400", children: formatValue(value, format, { currency, locale: 'en-US' }) }), previousValue !== undefined && (_jsxs("div", { className: "text-gray-400 text-sm", children: ["Prev: ", formatValue(previousValue, format, { currency, locale: 'en-US' })] }))] }) }) }) }));
+};
+export default MetricSummaryCard;