refactor the trends chart component and extract a reusable axis chart component

src/components/desktop/AxisChart.vue

@@ -0,0 +1,416 @@
+<template>
+    <v-chart autoresize class="axis-chart-container" :class="{ 'transition-in': skeleton }" :option="chartOptions"
+             @click="clickItem" @legendselectchanged="onLegendSelectChanged" />
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { useTheme } from 'vuetify';
+import type { ECElementEvent } from 'echarts/core';
+import type { CallbackDataParams } from 'echarts/types/dist/shared';
+
+import { useI18n } from '@/locales/helpers.ts';
+
+import { itemAndIndex } from '@/core/base.ts';
+import { TextDirection } from '@/core/text.ts';
+import type { ColorStyleValue } from '@/core/color.ts';
+import { ThemeType } from '@/core/theme.ts';
+
+import { DEFAULT_CHART_COLORS } from '@/consts/color.ts';
+
+import type { SortableTransactionStatisticDataItem } from '@/models/transaction.ts';
+
+import { isArray } from '@/lib/common.ts';
+import { getDisplayColor } from '@/lib/color.ts';
+import { sortStatisticsItems } from '@/lib/statistics.ts';
+
+export type AxisChartDisplayType = 'area' | 'column' | 'bubble';
+
+interface AxisChartDataItem {
+    id: string;
+    name: string;
+    itemStyle: {
+        color: ColorStyleValue;
+    };
+    selected: boolean;
+    type: string;
+    areaStyle?: object;
+    stack?: string;
+    symbolSize?: (data: number) => number;
+    animation: boolean;
+    data: number[];
+}
+
+interface AxisChartTooltipItem extends SortableTransactionStatisticDataItem {
+    readonly name: string;
+    readonly color: unknown;
+    readonly displayOrders: number[];
+    readonly totalAmount: number;
+}
+
+const props = defineProps<{
+    skeleton?: boolean;
+    type: AxisChartDisplayType;
+    stacked?: boolean;
+    sortingType: number;
+    showValue?: boolean;
+    showTotalAmountInTooltip?: boolean;
+    totalNameInTooltip?: string;
+    categoryTypeName: string;
+    allCategoryNames: string[];
+    items: Record<string, unknown>[];
+    idField?: string;
+    nameField: string;
+    valuesField: string;
+    colorField?: string;
+    hiddenField?: string;
+    displayOrdersField?: string;
+    translateName?: boolean;
+    amountValue?: boolean;
+    defaultCurrency?: string;
+    enableClickItem?: boolean;
+}>();
+
+const emit = defineEmits<{
+    (e: 'click', itemId: string, categoryIndex: number): void;
+}>();
+
+const theme = useTheme();
+
+const {
+    tt,
+    getCurrentLanguageTextDirection,
+    formatAmountToWesternArabicNumeralsWithoutDigitGrouping,
+    formatAmountToLocalizedNumeralsWithCurrency
+} = useI18n();
+
+const selectedLegends = ref<Record<string, boolean>>({});
+
+const textDirection = computed<TextDirection>(() => getCurrentLanguageTextDirection());
+const isDarkMode = computed<boolean>(() => theme.global.name.value === ThemeType.Dark);
+
+const itemsMap = computed<Record<string, Record<string, unknown>>>(() => {
+    const map: Record<string, Record<string, unknown>> = {};
+
+    for (const item of props.items) {
+        let id: string = '';
+
+        if (props.idField && item[props.idField]) {
+            id = item[props.idField] as string;
+        } else {
+            id = getItemName(item[props.nameField] as string);
+        }
+
+        const finalItem: Record<string, unknown> = {
+            [props.nameField]: item[props.nameField]
+        };
+
+        if (props.idField) {
+            finalItem[props.idField] = item[props.idField];
+        }
+
+        if (props.hiddenField) {
+            finalItem[props.hiddenField] = item[props.hiddenField];
+        }
+
+        if (props.displayOrdersField) {
+            finalItem[props.displayOrdersField] = item[props.displayOrdersField];
+        }
+
+        map[id] = finalItem;
+    }
+
+    return map;
+});
+
+const allSeries = computed<AxisChartDataItem[]>(() => {
+    const allSeries: AxisChartDataItem[] = [];
+    let maxAmount: number = 0;
+
+    for (const item of props.items) {
+        if (props.hiddenField && item[props.hiddenField]) {
+            continue;
+        }
+
+        if (!isArray(item[props.valuesField])) {
+            continue;
+        }
+
+        const allAmounts: number[] = item[props.valuesField] as number[];
+
+        if (props.type === 'bubble') {
+            for (const amount of allAmounts) {
+                if (amount > maxAmount) {
+                    maxAmount = amount;
+                }
+            }
+        }
+
+        const finalItem: AxisChartDataItem = {
+            id: (props.idField && item[props.idField]) ? item[props.idField] as string : getItemName(item[props.nameField] as string),
+            name: (props.idField && item[props.idField]) ? item[props.idField] as string : getItemName(item[props.nameField] as string),
+            itemStyle: {
+                color: getDisplayColor(props.colorField && item[props.colorField] ? item[props.colorField] as string : DEFAULT_CHART_COLORS[allSeries.length % DEFAULT_CHART_COLORS.length]),
+            },
+            selected: true,
+            type: 'line',
+            animation: !props.skeleton,
+            data: allAmounts
+        };
+
+        if (props.stacked) {
+            finalItem.stack = 'a';
+        } else if (props.idField && item[props.idField]) {
+            finalItem.stack = item[props.idField] as string;
+        }
+
+        if (props.type === 'area') {
+            finalItem.areaStyle = {};
+        } else if (props.type === 'column') {
+            finalItem.type = 'bar';
+        } else if (props.type === 'bubble') {
+            finalItem.type = 'scatter';
+            finalItem.symbolSize = (data: number): number => {
+                return Math.sqrt(data) / Math.sqrt(maxAmount) * 80 + 5;
+            }
+        }
+
+        allSeries.push(finalItem);
+    }
+
+    return allSeries;
+});
+
+const yAxisWidth = computed<number>(() => {
+    let maxValue = Number.MIN_SAFE_INTEGER;
+    let minValue = Number.MAX_SAFE_INTEGER;
+    let width = 90;
+
+    if (!allSeries.value || !allSeries.value.length) {
+        return width;
+    }
+
+    for (const series of allSeries.value) {
+        for (const value of series.data) {
+            if (value > maxValue) {
+                maxValue = value;
+            }
+
+            if (value < minValue) {
+                minValue = value;
+            }
+        }
+    }
+
+    const maxValueText = props.amountValue ? formatAmountToLocalizedNumeralsWithCurrency(maxValue, props.defaultCurrency) : maxValue.toString();
+    const minValueText = props.amountValue ? formatAmountToLocalizedNumeralsWithCurrency(minValue, props.defaultCurrency) : minValue.toString();
+    const maxLengthText = maxValueText.length > minValueText.length ? maxValueText : minValueText;
+
+    const canvas = document.createElement('canvas');
+    const context = canvas.getContext('2d');
+
+    if (context) {
+        context.font = '12px Arial';
+
+        const textMetrics = context.measureText(maxLengthText);
+        const actualWidth = Math.round(textMetrics.width) + 20;
+
+        if (actualWidth >= 200) {
+            width = 200;
+        } if (actualWidth > 90) {
+            width = actualWidth;
+        }
+    }
+
+    return width;
+});
+
+const chartOptions = computed<object>(() => {
+    return {
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'cross',
+                label: {
+                    backgroundColor: isDarkMode.value ? '#333' : '#fff',
+                    color: isDarkMode.value ? '#eee' : '#333'
+                },
+            },
+            backgroundColor: isDarkMode.value ? '#333' : '#fff',
+            borderColor: isDarkMode.value ? '#333' : '#fff',
+            textStyle: {
+                color: isDarkMode.value ? '#eee' : '#333'
+            },
+            formatter: (params: CallbackDataParams[]) => {
+                let tooltip = '';
+                let totalAmount = 0;
+                let actualDisplayItemCount = 0;
+                const displayItems: AxisChartTooltipItem[] = [];
+
+                for (const param of params) {
+                    const id = param.seriesId as string;
+                    const name = itemsMap.value[id] && props.nameField && itemsMap.value[id][props.nameField] ? getItemName(itemsMap.value[id][props.nameField] as string) : id;
+                    const color = param.color;
+                    const displayOrders = itemsMap.value[id] && props.displayOrdersField && itemsMap.value[id][props.displayOrdersField] ? itemsMap.value[id][props.displayOrdersField] as number[] : [0];
+                    const amount = param.data as number;
+
+                    displayItems.push({
+                        name: name,
+                        color: color,
+                        displayOrders: displayOrders,
+                        totalAmount: amount
+                    });
+
+                    totalAmount += amount;
+                }
+
+                sortStatisticsItems(displayItems, props.sortingType);
+
+                for (const item of displayItems) {
+                    if (displayItems.length === 1 || item.totalAmount !== 0) {
+                        const value = props.amountValue ? formatAmountToLocalizedNumeralsWithCurrency(item.totalAmount, props.defaultCurrency) : item.totalAmount.toString();
+                        tooltip += '<div><span class="chart-pointer" style="background-color: ' + item.color + '"></span>';
+                        tooltip += `<span>${item.name}</span><span class="ms-5" style="float: inline-end">${value}</span><br/>`;
+                        tooltip += '</div>';
+                        actualDisplayItemCount++;
+                    }
+                }
+
+                if (props.showTotalAmountInTooltip) {
+                    const displayTotalAmount = props.amountValue ? formatAmountToLocalizedNumeralsWithCurrency(totalAmount, props.defaultCurrency) : totalAmount.toString();
+                    tooltip = (actualDisplayItemCount > 0 ? '<div style="border-bottom: ' + (isDarkMode.value ? '#eee' : '#333') + ' dashed 1px">' : '<div></div>')
+                        + '<span class="chart-pointer" style="background-color: ' + (isDarkMode.value ? '#eee' : '#333') + '"></span>'
+                        + `<span>${props.totalNameInTooltip}</span><span class="ms-5" style="float: inline-end">${displayTotalAmount}</span><br/>`
+                        + '</div>' + tooltip;
+                }
+
+                if (params.length && params[0] && params[0].name) {
+                    tooltip = `${params[0].name}<br/>` + tooltip;
+                }
+
+                return tooltip;
+            }
+        },
+        legend: {
+            orient: 'horizontal',
+            type: 'scroll',
+            top: 0,
+            data: allSeries.value.map(item => item.name),
+            selected: selectedLegends.value,
+            textStyle: {
+                color: isDarkMode.value ? '#eee' : '#333'
+            },
+            formatter: (id: string) => {
+                return itemsMap.value[id] && props.nameField && itemsMap.value[id][props.nameField] ? getItemName(itemsMap.value[id][props.nameField] as string) : id;
+            }
+        },
+        grid: {
+            left: yAxisWidth.value,
+            right: 20,
+            bottom: 40
+        },
+        xAxis: [
+            {
+                type: 'category',
+                data: props.allCategoryNames,
+                inverse: textDirection.value === TextDirection.RTL,
+                axisLabel: {
+                    color: isDarkMode.value ? '#888' : '#666'
+                }
+            }
+        ],
+        yAxis: [
+            {
+                type: 'value',
+                axisLabel: {
+                    color: isDarkMode.value ? '#888' : '#666',
+                    formatter: (value: string) => {
+                        return props.amountValue ? formatAmountToLocalizedNumeralsWithCurrency(parseInt(value), props.defaultCurrency): value;
+                    }
+                },
+                axisPointer: {
+                    label: {
+                        formatter: (params: CallbackDataParams) => {
+                            return props.amountValue ? formatAmountToLocalizedNumeralsWithCurrency(Math.trunc(params.value as number), props.defaultCurrency) : params.value;
+                        }
+                    }
+                },
+                splitLine: {
+                    lineStyle: {
+                        color: isDarkMode.value ? '#4f4f4f' : '#e1e6f2',
+                    }
+                }
+            }
+        ],
+        series: allSeries.value
+    };
+});
+
+function getItemName(name: string): string {
+    return props.translateName ? tt(name) : name;
+}
+
+function clickItem(e: ECElementEvent): void {
+    if (!props.enableClickItem || e.componentType !== 'series') {
+        return;
+    }
+
+    const id = e.seriesId as string;
+    const item = itemsMap.value[id] as Record<string, unknown>;
+    const itemId = props.idField ? item[props.idField] as string : '';
+    const category = props.allCategoryNames[e.dataIndex];
+
+    if (!category) {
+        return;
+    }
+
+    emit('click', itemId, e.dataIndex);
+}
+
+function exportData(): { headers: string[], data: string[][] } {
+    const headers: string[] = [];
+    const data: string[][] = [];
+
+    headers.push(props.categoryTypeName);
+
+    for (const series of allSeries.value) {
+        const id = series.id;
+        const name = itemsMap.value[id] && props.nameField && itemsMap.value[id][props.nameField] ? getItemName(itemsMap.value[id][props.nameField] as string) : id;
+        headers.push(name);
+    }
+
+    for (const [categoryName, index] of itemAndIndex(props.allCategoryNames)) {
+        const row: string[] = [];
+        row.push(categoryName);
+        row.push(...allSeries.value.map(item => formatAmountToWesternArabicNumeralsWithoutDigitGrouping(item.data[index] ?? 0)));
+        data.push(row);
+    }
+
+    return {
+        headers: headers,
+        data: data
+    };
+}
+
+function onLegendSelectChanged(e: { selected: Record<string, boolean> }): void {
+    selectedLegends.value = e.selected;
+}
+
+defineExpose({
+    exportData
+});
+</script>
+
+<style scoped>
+.axis-chart-container {
+    width: 100%;
+    height: 720px;
+    margin-top: 10px;
+}
+
+@media (min-width: 600px) {
+    .axis-chart-container {
+        height: 790px;
+    }
+}
+</style>

src/components/desktop/TrendsChart.vue

@@ -1,13 +1,23 @@
 <template>
-    <v-chart autoresize class="trends-chart-container" :class="{ 'transition-in': skeleton }" :option="chartOptions"
+    <axis-chart ref="axisChart" values-field="values"
-             @click="clickItem" @legendselectchanged="onLegendSelectChanged" />
+                :skeleton="skeleton" :type="chartDisplayType" :stacked="stacked" :sorting-type="sortingType"
+                :show-value="showValue"
+                :show-total-amount-in-tooltip="showTotalAmountInTooltip" :total-name-in-tooltip="tt('Total Amount')"
+                :category-type-name="tt('Date')" :all-category-names="allDisplayDateRanges" :items="allSeriesData"
+                :id-field="idField" :name-field="nameField" :color-field="colorField" :hidden-field="hiddenField"
+                :display-orders-field="displayOrdersField"
+                :translate-name="translateName"
+                :amount-value="true" :default-currency="defaultCurrency"
+                :enable-click-item="enableClickItem"
+                @click="clickItem"
+                v-if="chartDisplayType"
+    />
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue';
+import AxisChart, { type AxisChartDisplayType } from './AxisChart.vue';
-import { useTheme } from 'vuetify';
+
-import type { ECElementEvent } from 'echarts/core';
+import { computed, useTemplateRef } from 'vue';
-import type { CallbackDataParams } from 'echarts/types/dist/shared';
 
 import { useI18n } from '@/locales/helpers.ts';
 import {
@@ -19,29 +29,18 @@ import {
 
 import { useUserStore } from '@/stores/user.ts';
 
-import { itemAndIndex } from '@/core/base.ts';
-import { TextDirection } from '@/core/text.ts';
 import {
     type Year1BasedMonth,
     type YearMonthDay,
     DateRangeScene
 } from '@/core/datetime.ts';
-import type { ColorStyleValue } from '@/core/color.ts';
-import { ThemeType } from '@/core/theme.ts';
 import {
     ChartDataAggregationType,
     TrendChartType,
     ChartDateAggregationType
 } from '@/core/statistics.ts';
 
-import { DEFAULT_CHART_COLORS } from '@/consts/color.ts';
+import { isArray, isNumber } from '@/lib/common.ts';
-
-import type { SortableTransactionStatisticDataItem } from '@/models/transaction.ts';
-
-import {
-    isArray,
-    isNumber
-} from '@/lib/common.ts';
 import {
     parseDateTimeFromUnixTime,
     getYearMonthFirstUnixTime,
@@ -49,12 +48,8 @@ import {
     getDateTypeByDateRange,
     getFiscalYearFromUnixTime
 } from '@/lib/datetime.ts';
-import {
+
-    getDisplayColor
+type AxisChartType = InstanceType<typeof AxisChart>;
-} from '@/lib/color.ts';
-import {
-    sortStatisticsItems
-} from '@/lib/statistics.ts';
 
 interface DesktopTrendsChartProps<T extends TrendsChartDateType> extends CommonTrendsChartProps<T> {
     skeleton?: boolean;
@@ -63,89 +58,37 @@ interface DesktopTrendsChartProps<T extends TrendsChartDateType> extends CommonT
     showTotalAmountInTooltip?: boolean;
 }
 
-interface TrendsChartDataItem {
-    id: string;
-    name: string;
-    itemStyle: {
-        color: ColorStyleValue;
-    };
-    selected: boolean;
-    type: string;
-    areaStyle?: object;
-    stack?: string;
-    symbolSize?: (data: number) => number;
-    animation: boolean;
-    data: number[];
-}
-
-interface TrendsChartTooltipItem extends SortableTransactionStatisticDataItem {
-    readonly name: string;
-    readonly color: unknown;
-    readonly displayOrders: number[];
-    readonly totalAmount: number;
-}
-
 const props = defineProps<DesktopTrendsChartProps<TrendsChartDateType>>();
 
 const emit = defineEmits<{
     (e: 'click', value: TrendsBarChartClickEvent): void;
 }>();
 
-const theme = useTheme();
-
 const {
     tt,
-    getCurrentLanguageTextDirection,
     formatDateTimeToShortDate,
     formatDateTimeToGregorianLikeShortYear,
     formatDateTimeToGregorianLikeShortYearMonth,
     formatYearQuarterToGregorianLikeYearQuarter,
-    formatDateTimeToGregorianLikeFiscalYear,
+    formatDateTimeToGregorianLikeFiscalYear
-    formatAmountToWesternArabicNumeralsWithoutDigitGrouping,
-    formatAmountToLocalizedNumeralsWithCurrency
 } = useI18n();
 
-const { allDateRanges, getItemName } = useTrendsChartBase(props);
+const { allDateRanges } = useTrendsChartBase(props);
 
 const userStore = useUserStore();
 
-const selectedLegends = ref<Record<string, boolean>>({});
+const axisChart = useTemplateRef<AxisChartType>('axisChart');
 
-const textDirection = computed<TextDirection>(() => getCurrentLanguageTextDirection());
+const chartDisplayType = computed<AxisChartDisplayType | undefined>(() => {
-const isDarkMode = computed<boolean>(() => theme.global.name.value === ThemeType.Dark);
+    if (props.type === TrendChartType.Area.type) {
-
+        return 'area';
-const itemsMap = computed<Record<string, Record<string, unknown>>>(() => {
+    } else if (props.type === TrendChartType.Column.type) {
-    const map: Record<string, Record<string, unknown>> = {};
+        return 'column';
-
+    } else if (props.type === TrendChartType.Bubble.type) {
-    for (const item of props.items) {
+        return 'bubble';
-        let id: string = '';
+    } else {
-
+        return undefined;
-        if (props.idField && item[props.idField]) {
-            id = item[props.idField] as string;
-        } else {
-            id = getItemName(item[props.nameField] as string);
-        }
-
-        const finalItem: Record<string, unknown> = {
-            [props.nameField]: item[props.nameField]
-        };
-
-        if (props.idField) {
-            finalItem[props.idField] = item[props.idField];
-        }
-
-        if (props.hiddenField) {
-            finalItem[props.hiddenField] = item[props.hiddenField];
-        }
-
-        if (props.displayOrdersField) {
-            finalItem[props.displayOrdersField] = item[props.displayOrdersField];
-        }
-
-        map[id] = finalItem;
     }
-
-    return map;
 });
 
 const allDisplayDateRanges = computed<string[]>(() => {
@@ -170,15 +113,36 @@ const allDisplayDateRanges = computed<string[]>(() => {
     return allDisplayDateRanges;
 });
 
-const allSeries = computed<TrendsChartDataItem[]>(() => {
+const allSeriesData = computed<Record<string, unknown>[]>(() => {
-    const allSeries: TrendsChartDataItem[] = [];
+    const result: Record<string, unknown>[] = [];
-    let maxAmount: number = 0;
 
-    for (const [item, index] of itemAndIndex(props.items)) {
+    for (const item of props.items) {
         if (props.hiddenField && item[props.hiddenField]) {
             continue;
         }
 
+        const finalItem: Record<string, unknown> = {};
+
+        if (props.idField) {
+            finalItem[props.idField] = item[props.idField];
+        }
+
+        if (props.nameField) {
+            finalItem[props.nameField] = item[props.nameField];
+        }
+
+        if (props.colorField) {
+            finalItem[props.colorField] = item[props.colorField];
+        }
+
+        if (props.hiddenField) {
+            finalItem[props.hiddenField] = item[props.hiddenField];
+        }
+
+        if (props.displayOrdersField) {
+            finalItem[props.displayOrdersField] = item[props.displayOrdersField];
+        }
+
         const allAmounts: number[] = [];
         const dateRangeAmountMap: Record<string, (Year1BasedMonth | YearMonthDay)[]> = {};
 
@@ -255,223 +219,18 @@ const allSeries = computed<TrendsChartDataItem[]>(() => {
                 }
             }
 
-            if (amount > maxAmount) {
-                maxAmount = amount;
-            }
-
             allAmounts.push(amount);
         }
 
-        const finalItem: TrendsChartDataItem = {
+        finalItem['values'] = allAmounts;
-            id: (props.idField && item[props.idField]) ? item[props.idField] as string : getItemName(item[props.nameField] as string),
+        result.push(finalItem);
-            name: (props.idField && item[props.idField]) ? item[props.idField] as string : getItemName(item[props.nameField] as string),
-            itemStyle: {
-                color: getDisplayColor(props.colorField && item[props.colorField] ? item[props.colorField] as string : DEFAULT_CHART_COLORS[index % DEFAULT_CHART_COLORS.length]),
-            },
-            selected: true,
-            type: 'line',
-            animation: !props.skeleton,
-            data: allAmounts
-        };
-
-        if (props.stacked) {
-            finalItem.stack = 'a';
-        } else if (props.idField && item[props.idField]) {
-            finalItem.stack = item[props.idField] as string;
-        }
-
-        if (props.type === TrendChartType.Area.type) {
-            finalItem.areaStyle = {};
-        } else if (props.type === TrendChartType.Column.type) {
-            finalItem.type = 'bar';
-        } else if (props.type === TrendChartType.Bubble.type) {
-            finalItem.type = 'scatter';
-            finalItem.symbolSize = (data: number): number => {
-                return Math.sqrt(data) / Math.sqrt(maxAmount) * 80 + 5;
-            }
-        }
-
-        allSeries.push(finalItem);
     }
 
-    return allSeries;
+    return result;
 });
 
-const yAxisWidth = computed<number>(() => {
+function clickItem(itemId: string, categoryIndex: number): void {
-    let maxValue = Number.MIN_SAFE_INTEGER;
+    const dateRange = allDateRanges.value[categoryIndex];
-    let minValue = Number.MAX_SAFE_INTEGER;
-    let width = 90;
-
-    if (!allSeries.value || !allSeries.value.length) {
-        return width;
-    }
-
-
-    for (const series of allSeries.value) {
-        for (const value of series.data) {
-            if (value > maxValue) {
-                maxValue = value;
-            }
-
-            if (value < minValue) {
-                minValue = value;
-            }
-        }
-    }
-
-    const maxValueText = formatAmountToLocalizedNumeralsWithCurrency(maxValue, props.defaultCurrency);
-    const minValueText = formatAmountToLocalizedNumeralsWithCurrency(minValue, props.defaultCurrency);
-    const maxLengthText = maxValueText.length > minValueText.length ? maxValueText : minValueText;
-
-    const canvas = document.createElement('canvas');
-    const context = canvas.getContext('2d');
-
-    if (context) {
-        context.font = '12px Arial';
-
-        const textMetrics = context.measureText(maxLengthText);
-        const actualWidth = Math.round(textMetrics.width) + 20;
-
-        if (actualWidth >= 200) {
-            width = 200;
-        } if (actualWidth > 90) {
-            width = actualWidth;
-        }
-    }
-
-    return width;
-});
-
-const chartOptions = computed<object>(() => {
-    return {
-        tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-                type: 'cross',
-                label: {
-                    backgroundColor: isDarkMode.value ? '#333' : '#fff',
-                    color: isDarkMode.value ? '#eee' : '#333'
-                },
-            },
-            backgroundColor: isDarkMode.value ? '#333' : '#fff',
-            borderColor: isDarkMode.value ? '#333' : '#fff',
-            textStyle: {
-                color: isDarkMode.value ? '#eee' : '#333'
-            },
-            formatter: (params: CallbackDataParams[]) => {
-                let tooltip = '';
-                let totalAmount = 0;
-                let actualDisplayItemCount = 0;
-                const displayItems: TrendsChartTooltipItem[] = [];
-
-                for (const param of params) {
-                    const id = param.seriesId as string;
-                    const name = itemsMap.value[id] && props.nameField && itemsMap.value[id][props.nameField] ? getItemName(itemsMap.value[id][props.nameField] as string) : id;
-                    const color = param.color;
-                    const displayOrders = itemsMap.value[id] && props.displayOrdersField && itemsMap.value[id][props.displayOrdersField] ? itemsMap.value[id][props.displayOrdersField] as number[] : [0];
-                    const amount = param.data as number;
-
-                    displayItems.push({
-                        name: name,
-                        color: color,
-                        displayOrders: displayOrders,
-                        totalAmount: amount
-                    });
-
-                    totalAmount += amount;
-                }
-
-                sortStatisticsItems(displayItems, props.sortingType);
-
-                for (const item of displayItems) {
-                    if (displayItems.length === 1 || item.totalAmount !== 0) {
-                        const value = formatAmountToLocalizedNumeralsWithCurrency(item.totalAmount, props.defaultCurrency);
-                        tooltip += '<div><span class="chart-pointer" style="background-color: ' + item.color + '"></span>';
-                        tooltip += `<span>${item.name}</span><span class="ms-5" style="float: inline-end">${value}</span><br/>`;
-                        tooltip += '</div>';
-                        actualDisplayItemCount++;
-                    }
-                }
-
-                if (props.showTotalAmountInTooltip) {
-                    const displayTotalAmount = formatAmountToLocalizedNumeralsWithCurrency(totalAmount, props.defaultCurrency);
-                    tooltip = (actualDisplayItemCount > 0 ? '<div style="border-bottom: ' + (isDarkMode.value ? '#eee' : '#333') + ' dashed 1px">' : '<div></div>')
-                        + '<span class="chart-pointer" style="background-color: ' + (isDarkMode.value ? '#eee' : '#333') + '"></span>'
-                        + `<span>${tt('Total Amount')}</span><span class="ms-5" style="float: inline-end">${displayTotalAmount}</span><br/>`
-                        + '</div>' + tooltip;
-                }
-
-                if (params.length && params[0] && params[0].name) {
-                    tooltip = `${params[0].name}<br/>` + tooltip;
-                }
-
-                return tooltip;
-            }
-        },
-        legend: {
-            orient: 'horizontal',
-            type: 'scroll',
-            top: 0,
-            data: allSeries.value.map(item => item.name),
-            selected: selectedLegends.value,
-            textStyle: {
-                color: isDarkMode.value ? '#eee' : '#333'
-            },
-            formatter: (id: string) => {
-                return itemsMap.value[id] && props.nameField && itemsMap.value[id][props.nameField] ? getItemName(itemsMap.value[id][props.nameField] as string) : id;
-            }
-        },
-        grid: {
-            left: yAxisWidth.value,
-            right: 20,
-            bottom: 40
-        },
-        xAxis: [
-            {
-                type: 'category',
-                data: allDisplayDateRanges.value,
-                inverse: textDirection.value === TextDirection.RTL,
-                axisLabel: {
-                    color: isDarkMode.value ? '#888' : '#666'
-                }
-            }
-        ],
-        yAxis: [
-            {
-                type: 'value',
-                axisLabel: {
-                    color: isDarkMode.value ? '#888' : '#666',
-                    formatter: (value: string) => {
-                        return formatAmountToLocalizedNumeralsWithCurrency(parseInt(value), props.defaultCurrency);
-                    }
-                },
-                axisPointer: {
-                    label: {
-                        formatter: (params: CallbackDataParams) => {
-                            return formatAmountToLocalizedNumeralsWithCurrency(Math.trunc(params.value as number), props.defaultCurrency);
-                        }
-                    }
-                },
-                splitLine: {
-                    lineStyle: {
-                        color: isDarkMode.value ? '#4f4f4f' : '#e1e6f2',
-                    }
-                }
-            }
-        ],
-        series: allSeries.value
-    };
-});
-
-function clickItem(e: ECElementEvent): void {
-    if (!props.enableClickItem || e.componentType !== 'series') {
-        return;
-    }
-
-    const id = e.seriesId as string;
-    const item = itemsMap.value[id] as Record<string, unknown>;
-    const itemId = props.idField ? item[props.idField] as string : '';
-    const dateRange = allDateRanges.value[e.dataIndex];
 
     if (!dateRange) {
         return;
@@ -523,49 +282,10 @@ function clickItem(e: ECElementEvent): void {
 }
 
 function exportData(): { headers: string[], data: string[][] } {
-    const headers: string[] = [];
+    return axisChart.value?.exportData() ?? { headers: [], data: [] };
-    const data: string[][] = [];
-
-    headers.push(tt('Date'));
-
-    for (const series of allSeries.value) {
-        const id = series.id;
-        const name = itemsMap.value[id] && props.nameField && itemsMap.value[id][props.nameField] ? getItemName(itemsMap.value[id][props.nameField] as string) : id;
-        headers.push(name);
-    }
-
-    for (const [displayDateRange, index] of itemAndIndex(allDisplayDateRanges.value)) {
-        const row: string[] = [];
-        row.push(displayDateRange);
-        row.push(...allSeries.value.map(item => formatAmountToWesternArabicNumeralsWithoutDigitGrouping(item.data[index] ?? 0)));
-        data.push(row);
-    }
-
-    return {
-        headers: headers,
-        data: data
-    };
-}
-
-function onLegendSelectChanged(e: { selected: Record<string, boolean> }): void {
-    selectedLegends.value = e.selected;
 }
 
 defineExpose({
     exportData
 })
 </script>
-
-<style scoped>
-.trends-chart-container {
-    width: 100%;
-    height: 720px;
-    margin-top: 10px;
-}
-
-@media (min-width: 600px) {
-    .trends-chart-container {
-        height: 790px;
-    }
-}
-</style>

src/desktop-main.ts

@@ -100,6 +100,7 @@ import ConfirmDialog from '@/components/desktop/ConfirmDialog.vue';
 import SnackBar from '@/components/desktop/SnackBar.vue';
 import PieChartComponent from '@/components/desktop/PieChart.vue';
 import RadarChartComponent from '@/components/desktop/RadarChart.vue';
+import AxisChart from '@/components/desktop/AxisChart.vue';
 import TrendsChart from '@/components/desktop/TrendsChart.vue';
 import DateRangeSelectionDialog from '@/components/desktop/DateRangeSelectionDialog.vue';
 import MonthSelectionDialog from '@/components/desktop/MonthSelectionDialog.vue';
@@ -544,6 +545,7 @@ app.component('ConfirmDialog', ConfirmDialog);
 app.component('SnackBar', SnackBar);
 app.component('PieChart', PieChartComponent);
 app.component('RadarChart', RadarChartComponent);
+app.component('AxisChart', AxisChart);
 app.component('TrendsChart', TrendsChart);
 app.component('DateRangeSelectionDialog', DateRangeSelectionDialog);
 app.component('MonthSelectionDialog', MonthSelectionDialog);