insights explorer supports axis chart

2026-05-14 06:57:35 +08:00 · 2026-01-11 02:45:46 +08:00
parent 1a0630846d
commit ee9b281919
6 changed files with 347 additions and 61 deletions
@@ -1,5 +1,5 @@
 <template>
-    <v-chart autoresize class="axis-chart-container" :class="{ 'transition-in': skeleton }" :option="chartOptions"
+    <v-chart autoresize :class="finalClass" :option="chartOptions"
             @click="clickItem" @legendselectchanged="onLegendSelectChanged" />
 </template>

@@ -24,7 +24,7 @@ import { isArray } from '@/lib/common.ts';
 import { getDisplayColor } from '@/lib/color.ts';
 import { sortStatisticsItems } from '@/lib/statistics.ts';

-export type AxisChartDisplayType = 'area' | 'column' | 'bubble';
+export type AxisChartDisplayType = 'line' | 'area' | 'column' | 'bubble';

 interface AxisChartDataItem {
    id: string;
@@ -49,9 +49,11 @@ interface AxisChartTooltipItem extends SortableTransactionStatisticDataItem {
 }

 const props = defineProps<{
+    class?: string;
    skeleton?: boolean;
    type: AxisChartDisplayType;
    stacked?: boolean;
+    oneHundredPercentStacked?: boolean;
    sortingType: number;
    showValue?: boolean;
    showTotalAmountInTooltip?: boolean;
@@ -72,7 +74,7 @@ const props = defineProps<{
 }>();

 const emit = defineEmits<{
-    (e: 'click', itemId: string, categoryIndex: number): void;
+    (e: 'click', itemId: string, categoryIndex: number, item: Record<string, unknown>): void;
 }>();

 const theme = useTheme();
@@ -81,13 +83,29 @@ const {
    tt,
    getCurrentLanguageTextDirection,
    formatAmountToWesternArabicNumeralsWithoutDigitGrouping,
-    formatAmountToLocalizedNumeralsWithCurrency
+    formatAmountToLocalizedNumeralsWithCurrency,
+    formatPercentToLocalizedNumerals
 } = useI18n();

 const selectedLegends = ref<Record<string, boolean>>({});

 const textDirection = computed<TextDirection>(() => getCurrentLanguageTextDirection());
 const isDarkMode = computed<boolean>(() => theme.global.name.value === ThemeType.Dark);
+const finalClass = computed<string>(() => {
+    let finalClass = '';
+
+    if (props.skeleton) {
+        finalClass += 'transition-in';
+    }
+
+    if (props.class) {
+        finalClass += ` ${props.class}`;
+    } else {
+        finalClass += ' axis-chart-container';
+    }
+
+    return finalClass;
+});

 const itemsMap = computed<Record<string, Record<string, unknown>>>(() => {
    const map: Record<string, Record<string, unknown>> = {};
@@ -125,7 +143,8 @@ const itemsMap = computed<Record<string, Record<string, unknown>>>(() => {

 const allSeries = computed<AxisChartDataItem[]>(() => {
    const allSeries: AxisChartDataItem[] = [];
-    let maxAmount: number = 0;
+    const categoryTotalAmount: Record<number, number> = {};
+    let maxAmountOfAllData: number = 0;

    for (const item of props.items) {
        if (props.hiddenField && item[props.hiddenField]) {
@@ -138,11 +157,32 @@ const allSeries = computed<AxisChartDataItem[]>(() => {

        const allAmounts: number[] = item[props.valuesField] as number[];

-        if (props.type === 'bubble') {
-            for (const amount of allAmounts) {
-                if (amount > maxAmount) {
-                    maxAmount = amount;
-                }
+        for (const [amount, categoryIndex] of itemAndIndex(allAmounts)) {
+            let totalAmount: number = categoryTotalAmount[categoryIndex] ?? 0;
+            totalAmount += amount;
+            categoryTotalAmount[categoryIndex] = totalAmount;
+
+            if (amount > maxAmountOfAllData) {
+                maxAmountOfAllData = amount;
+            }
+        }
+    }
+
+    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.oneHundredPercentStacked) {
+            for (const [amount, categoryIndex] of itemAndIndex(allAmounts)) {
+                const totalAmount: number = categoryTotalAmount[categoryIndex] ?? 0;
+                allAmounts[categoryIndex] = totalAmount !== 0 ? amount * 100.0 / totalAmount : 0;
            }
        }

@@ -164,14 +204,16 @@ const allSeries = computed<AxisChartDataItem[]>(() => {
            finalItem.stack = item[props.idField] as string;
        }

-        if (props.type === 'area') {
+        if (props.type === 'line') {
+            finalItem.areaStyle = undefined;
+        } else 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;
+                return Math.sqrt(data) / Math.sqrt(maxAmountOfAllData) * 80 + 5;
            }
        }

@@ -202,8 +244,8 @@ const yAxisWidth = computed<number>(() => {
        }
    }

-    const maxValueText = props.amountValue ? formatAmountToLocalizedNumeralsWithCurrency(maxValue, props.defaultCurrency) : maxValue.toString();
-    const minValueText = props.amountValue ? formatAmountToLocalizedNumeralsWithCurrency(minValue, props.defaultCurrency) : minValue.toString();
+    const maxValueText = getDisplayValue(maxValue);
+    const minValueText = getDisplayValue(minValue);
    const maxLengthText = maxValueText.length > minValueText.length ? maxValueText : minValueText;

    const canvas = document.createElement('canvas');
@@ -268,7 +310,7 @@ const chartOptions = computed<object>(() => {

                for (const item of displayItems) {
                    if (displayItems.length === 1 || item.totalAmount !== 0) {
-                        const value = props.amountValue ? formatAmountToLocalizedNumeralsWithCurrency(item.totalAmount, props.defaultCurrency) : item.totalAmount.toString();
+                        const value = getDisplayValue(item.totalAmount);
                        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>';
@@ -276,8 +318,8 @@ const chartOptions = computed<object>(() => {
                    }
                }

-                if (props.showTotalAmountInTooltip) {
-                    const displayTotalAmount = props.amountValue ? formatAmountToLocalizedNumeralsWithCurrency(totalAmount, props.defaultCurrency) : totalAmount.toString();
+                if (props.showTotalAmountInTooltip && !props.oneHundredPercentStacked) {
+                    const displayTotalAmount = getDisplayValue(totalAmount);
                    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/>`
@@ -322,16 +364,18 @@ const chartOptions = computed<object>(() => {
        yAxis: [
            {
                type: 'value',
+                min: props.oneHundredPercentStacked ? 0 : undefined,
+                max: props.oneHundredPercentStacked ? 100 : undefined,
                axisLabel: {
                    color: isDarkMode.value ? '#888' : '#666',
                    formatter: (value: string) => {
-                        return props.amountValue ? formatAmountToLocalizedNumeralsWithCurrency(parseInt(value), props.defaultCurrency): value;
+                        return getDisplayValue(parseInt(value));
                    }
                },
                axisPointer: {
                    label: {
                        formatter: (params: CallbackDataParams) => {
-                            return props.amountValue ? formatAmountToLocalizedNumeralsWithCurrency(Math.trunc(params.value as number), props.defaultCurrency) : params.value;
+                            return getDisplayValue(Math.trunc(params.value as number));
                        }
                    }
                },
@@ -350,6 +394,18 @@ function getItemName(name: string): string {
    return props.translateName ? tt(name) : name;
 }

+function getDisplayValue(value: number): string {
+    if (props.oneHundredPercentStacked) {
+        return formatPercentToLocalizedNumerals(value, 2, '&lt;0.01');
+    }
+
+    if (props.amountValue) {
+        return formatAmountToLocalizedNumeralsWithCurrency(value, props.defaultCurrency);
+    }
+
+    return value.toString();
+}
+
 function clickItem(e: ECElementEvent): void {
    if (!props.enableClickItem || e.componentType !== 'series') {
        return;
@@ -364,7 +420,7 @@ function clickItem(e: ECElementEvent): void {
        return;
    }

-    emit('click', itemId, e.dataIndex);
+    emit('click', itemId, e.dataIndex, item);
 }

 function exportData(): { headers: string[], data: string[][] } {
@@ -404,13 +460,13 @@ defineExpose({
 <style scoped>
 .axis-chart-container {
    width: 100%;
-    height: 720px;
+    height: 560px;
    margin-top: 10px;
 }

@media (min-width: 600px) {
    .axis-chart-container {
-        height: 790px;
+        height: 630px;
    }
 }
 </style>
@@ -1,5 +1,5 @@
 <template>
-    <axis-chart ref="axisChart" values-field="values"
+    <axis-chart class="trends-chart-container" ref="axisChart" values-field="values"
                :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')"
@@ -289,3 +289,17 @@ 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>
@@ -146,6 +146,13 @@ export class TransactionExplorerChartType implements NameValue {

    public static readonly Pie = new TransactionExplorerChartType('Pie Chart', TransactionExplorerChartTypeValue.Pie, false);
    public static readonly Radar = new TransactionExplorerChartType('Radar Chart', TransactionExplorerChartTypeValue.Radar, false);
+    public static readonly ColumnStacked = new TransactionExplorerChartType('Column Chart (Stacked)', TransactionExplorerChartTypeValue.ColumnStacked, true);
+    public static readonly Column100PercentStacked = new TransactionExplorerChartType('Column Chart (100% Stacked)', TransactionExplorerChartTypeValue.Column100PercentStacked, true);
+    public static readonly ColumnGrouped = new TransactionExplorerChartType('Column Chart (Grouped)', TransactionExplorerChartTypeValue.ColumnGrouped, true);
+    public static readonly LineGrouped = new TransactionExplorerChartType('Line Chart (Grouped)', TransactionExplorerChartTypeValue.LineGrouped, true);
+    public static readonly AreaStacked = new TransactionExplorerChartType('Area Chart (Stacked)', TransactionExplorerChartTypeValue.AreaStacked, true);
+    public static readonly Area100PercentStacked = new TransactionExplorerChartType('Area Chart (100% Stacked)', TransactionExplorerChartTypeValue.Area100PercentStacked, true);
+    public static readonly BubbleGrouped = new TransactionExplorerChartType('Bubble Chart (Grouped)', TransactionExplorerChartTypeValue.BubbleGrouped, true);

    public static readonly Default = TransactionExplorerChartType.Pie;

@@ -87,14 +87,14 @@ export interface CategoriedInfo {
 }

 export interface CategoriedTransactions extends CategoriedInfo {
-    trasactions: Record<string, SeriesedTransactions>;
+    trasactions: Record<string, SeriesTransactions>;
 }

 export interface CategoriedTransactionExplorerData extends CategoriedInfo {
    data: CategoriedTransactionExplorerDataItem[];
 }

-export interface SeriesedInfo {
+export interface SeriesInfo {
    seriesName: string;
    seriesNameNeedI18n?: boolean;
    seriesNameI18nParameters?: Record<string, string>;
@@ -103,11 +103,11 @@ export interface SeriesedInfo {
    seriesDisplayOrders: number[];
 }

-export interface SeriesedTransactions extends SeriesedInfo {
+export interface SeriesTransactions extends SeriesInfo {
    trasactions: TransactionInsightDataItem[];
 }

-export interface CategoriedTransactionExplorerDataItem extends SeriesedInfo {
+export interface CategoriedTransactionExplorerDataItem extends SeriesInfo {
    value: number;
 }

@@ -396,23 +396,23 @@ export const useExplorersStore = defineStore('explorers', () => {
            categoriedDataMap[categoriedInfo.categoryId] = categoriedData;
        }

-        const seriesedInfo = getDataCategoryInfo(timezoneUsedForDateRange, seriesDemension, queryName, queryIndex, transaction);
-        let seriesedData = categoriedData.trasactions[seriesedInfo.categoryId];
+        const seriesInfo = getDataCategoryInfo(timezoneUsedForDateRange, seriesDemension, queryName, queryIndex, transaction);
+        let seriesData = categoriedData.trasactions[seriesInfo.categoryId];

-        if (!seriesedData) {
-            seriesedData = {
-                seriesName: seriesedInfo.categoryName,
-                seriesNameNeedI18n: seriesedInfo.categoryNameNeedI18n,
-                seriesNameI18nParameters: seriesedInfo.categoryNameI18nParameters,
-                seriesId: seriesedInfo.categoryId,
-                seriesIdType: seriesedInfo.categoryIdType,
-                seriesDisplayOrders: seriesedInfo.categoryDisplayOrders,
+        if (!seriesData) {
+            seriesData = {
+                seriesName: seriesInfo.categoryName,
+                seriesNameNeedI18n: seriesInfo.categoryNameNeedI18n,
+                seriesNameI18nParameters: seriesInfo.categoryNameI18nParameters,
+                seriesId: seriesInfo.categoryId,
+                seriesIdType: seriesInfo.categoryIdType,
+                seriesDisplayOrders: seriesInfo.categoryDisplayOrders,
                trasactions: []
            };
-            categoriedData.trasactions[seriesedInfo.categoryId] = seriesedData;
+            categoriedData.trasactions[seriesInfo.categoryId] = seriesData;
        }

-        seriesedData.trasactions.push(transaction);
+        seriesData.trasactions.push(transaction);
    }

    function loadInsightsExplorerList(explorers: InsightsExplorerBasicInfo[]): void {
@@ -633,18 +633,17 @@ export const useExplorersStore = defineStore('explorers', () => {

        for (const categoriedTransactions of values(categoriedDataMap)) {
            const dataItems: CategoriedTransactionExplorerDataItem[] = [];
-            let allSeriesedTransactions: Record<string, SeriesedTransactions> = categoriedTransactions.trasactions;
+            let allSeriesTransactions: Record<string, SeriesTransactions> = categoriedTransactions.trasactions;

-            // merge all series into one for pie/radar chart
-            if (chartType === TransactionExplorerChartType.Pie || chartType === TransactionExplorerChartType.Radar) {
+            if (!chartType.seriesDimensionRequired) {
                const transactions: TransactionInsightDataItem[] = [];

-                for (const seriesedTransactions of values(categoriedTransactions.trasactions)) {
-                    transactions.push(...seriesedTransactions.trasactions);
+                for (const seriesTransactions of values(categoriedTransactions.trasactions)) {
+                    transactions.push(...seriesTransactions.trasactions);
                }

-                allSeriesedTransactions = {};
-                allSeriesedTransactions['none'] = {
+                allSeriesTransactions = {};
+                allSeriesTransactions['none'] = {
                    seriesName: valueMetric?.name ?? 'Unknown',
                    seriesNameNeedI18n: true,
                    seriesId: 'none',
@@ -654,13 +653,13 @@ export const useExplorersStore = defineStore('explorers', () => {
                };
            }

-            for (const seriesedTransactions of values(allSeriesedTransactions)) {
+            for (const seriesTransactions of values(allSeriesTransactions)) {
                const allSourceAmountsInDefaultCurrency: number[] = [];
                let totalSourceAmountSumInDefaultCurrency: number = 0;
                let minimumSourceAmountInDefaultCurrency: number = Number.MAX_SAFE_INTEGER;
                let maximumSourceAmountInDefaultCurrency: number = Number.MIN_SAFE_INTEGER;

-                for (const transaction of seriesedTransactions.trasactions) {
+                for (const transaction of seriesTransactions.trasactions) {
                    let amountInDefaultCurrency: number = transaction.sourceAmount;

                    if (transaction.sourceAccount.currency !== defaultCurrency) {
@@ -707,12 +706,12 @@ export const useExplorersStore = defineStore('explorers', () => {
                }

                dataItems.push({
-                    seriesName: seriesedTransactions.seriesName,
-                    seriesNameNeedI18n: seriesedTransactions.seriesNameNeedI18n,
-                    seriesNameI18nParameters: seriesedTransactions.seriesNameI18nParameters,
-                    seriesId: seriesedTransactions.seriesId,
-                    seriesIdType: seriesedTransactions.seriesIdType,
-                    seriesDisplayOrders: seriesedTransactions.seriesDisplayOrders,
+                    seriesName: seriesTransactions.seriesName,
+                    seriesNameNeedI18n: seriesTransactions.seriesNameNeedI18n,
+                    seriesNameI18nParameters: seriesTransactions.seriesNameI18nParameters,
+                    seriesId: seriesTransactions.seriesId,
+                    seriesIdType: seriesTransactions.seriesIdType,
+                    seriesDisplayOrders: seriesTransactions.seriesDisplayOrders,
                    value: value
                });
            }
@@ -763,6 +763,10 @@ watch(() => display.mdAndUp.value, (newValue) => {
 });

 watch(activeTab, () => {
+    if (initing.value || loading.value) {
+        return;
+    }
+
    router.push(getFilterLinkUrl());
 });

@@ -23,7 +23,8 @@
                        :disabled="loading || disabled"
                        :label="tt('Axis / Category')"
                        :items="allTransactionExplorerDataDimensions"
-                        v-model="currentExplorer.categoryDimension"
+                        :model-value="currentExplorer.categoryDimension"
+                        @update:model-value="updateCategoryDimensionType"
                    />
                    <v-select
                        class="flex-0-0"
@@ -83,7 +84,6 @@
            id-field="id"
            name-field="name"
            value-field="value"
-            color-field="color"
            v-if="loading"
        />
        <pie-chart
@@ -100,7 +100,7 @@
            @click="onClickPieChartItem"
        />
    </v-card-text>
-    <v-card-text :class="{ 'readonly': loading }" v-if="currentExplorer.chartType === TransactionExplorerChartType.Radar.value">
+    <v-card-text :class="{ 'readonly': loading }" v-else-if="currentExplorer.chartType === TransactionExplorerChartType.Radar.value">
        <radar-chart
            :items="[
                {name: '---', value: 10},
@@ -127,10 +127,47 @@
            v-else-if="!loading"
        />
    </v-card-text>
+    <v-card-text :class="{ 'readonly': loading }" v-else-if="TransactionExplorerChartType.valueOf(currentExplorer.chartType)?.seriesDimensionRequired && axisChartDisplayType">
+        <axis-chart
+            :skeleton="true"
+            :type="axisChartDisplayType"
+            :sorting-type="currentExplorer.chartSortingType"
+            :all-category-names="[]"
+            :items="[]"
+            category-type-name=""
+            name-field="name"
+            values-field="values"
+            v-if="loading"
+        />
+        <axis-chart
+            ref="axisChart"
+            :type="axisChartDisplayType"
+            :stacked="axisChartStacked"
+            :one-hundred-percent-stacked="axisChart100PercentStacked"
+            :sorting-type="currentExplorer.chartSortingType"
+            :show-value="true"
+            :show-total-amount-in-tooltip="true"
+            :total-name-in-tooltip="currentExplorer.valueMetric === TransactionExplorerValueMetric.TransactionCount.value ? tt('Total Transactions') : tt('Total Amount')"
+            :category-type-name="currentTransactionExplorerCategoryDimensionName"
+            :all-category-names="categoriedNamesSortedByDisplayOrder"
+            :items="seriesDimensionTransactionExplorerData"
+            :amount-value="currentExplorer.valueMetric !== TransactionExplorerValueMetric.TransactionCount.value"
+            :default-currency="defaultCurrency"
+            :enable-click-item="true"
+            id-field="id"
+            name-field="name"
+            values-field="categoryValues"
+            display-orders-field="displayOrders"
+            @click="onClickTrendChartItem"
+            v-else-if="!loading"
+        />
+    </v-card-text>
 </template>

 <script setup lang="ts">
-import { computed } from 'vue';
+import AxisChart, { type AxisChartDisplayType } from '@/components/desktop/AxisChart.vue';
+
+import { computed, useTemplateRef } from 'vue';
 import { useRouter } from 'vue-router';

 import { useI18n } from '@/locales/helpers.ts';
@@ -138,13 +175,16 @@ import { useI18n } from '@/locales/helpers.ts';
 import { useUserStore } from '@/stores/user.ts';
 import {
    type CategoriedInfo,
-    type SeriesedInfo,
+    type CategoriedTransactionExplorerData,
+    type SeriesInfo,
+    type CategoriedTransactionExplorerDataItem,
    TransactionExplorerDimensionType,
    useExplorersStore
 } from '@/stores/explorer.ts';

 import { type NameValue, type TypeAndDisplayName } from '@/core/base.ts';
 import { Month, WeekDay } from '@/core/datetime.ts';
+import { ChartSortingType } from '@/core/statistics.ts';
 import {
    TransactionExplorerChartType,
    TransactionExplorerDataDimensionType,
@@ -155,10 +195,12 @@ import {
 import { type SortableTransactionStatisticDataItem } from '@/models/transaction.ts';
 import type { InsightsExplorer } from '@/models/explorer.ts';

-import { isDefined } from '@/lib/common.ts';
+import { isDefined, findNameByValue } from '@/lib/common.ts';
 import { parseDateTimeFromString } from '@/lib/datetime.ts';
 import { sortStatisticsItems } from '@/lib/statistics.ts';

+type AxisChartType = InstanceType<typeof AxisChart>;
+
 interface InsightsExplorerDataTableTabProps {
    loading?: boolean;
    disabled?: boolean;
@@ -172,6 +214,22 @@ interface CategoryDimensionData extends SortableTransactionStatisticDataItem {
    totalAmount: number;
 }

+interface SortableCategoriedTransactionExplorerDataItem extends SortableTransactionStatisticDataItem {
+    name: string;
+    displayOrders: number[];
+    totalAmount: number;
+    originalItem: CategoriedTransactionExplorerData;
+}
+
+interface SeriesDimensionData extends SortableTransactionStatisticDataItem, Record<string, unknown> {
+    id: string;
+    dimension: TransactionExplorerDimensionType;
+    name: string;
+    displayOrders: number[];
+    categoryValues: number[];
+    totalAmount: number;
+}
+
 defineProps<InsightsExplorerDataTableTabProps>();

 const router = useRouter();
@@ -199,12 +257,15 @@ const {
 const userStore = useUserStore();
 const explorersStore = useExplorersStore();

+const axisChart = useTemplateRef<AxisChartType>('axisChart');
+
 const defaultCurrency = computed<string>(() => userStore.currentUserDefaultCurrency);

 const allTransactionExplorerDataDimensions = computed<NameValue[]>(() => getAllTransactionExplorerDataDimensions());
 const allTransactionExplorerValueMetrics = computed<NameValue[]>(() => getAllTransactionExplorerValueMetrics());
 const allTransactionExplorerChartTypes = computed<NameValue[]>(() => getAllTransactionExplorerChartTypes());
 const allTransactionExplorerChartSortingTypes = computed<TypeAndDisplayName[]>(() => getAllStatisticsSortingTypes());
+const currentTransactionExplorerCategoryDimensionName = computed<string>(() => findNameByValue(allTransactionExplorerDataDimensions.value, currentExplorer.value.categoryDimension) ?? tt('Unknown'));

 const currentExplorer = computed<InsightsExplorer>(() => explorersStore.currentInsightsExplorer);

@@ -242,7 +303,128 @@ const categoryDimensionTransactionExplorerData = computed<CategoryDimensionData[
    return result;
 });

-function getCategoriedDataDisplayName(info: CategoriedInfo | SeriesedInfo): string {
+const categoriedDataSortedByDisplayOrder = computed<SortableCategoriedTransactionExplorerDataItem[]>(() => {
+    if (!explorersStore.categoriedTransactionExplorerData || !explorersStore.categoriedTransactionExplorerData.length) {
+        return [];
+    }
+
+    const result: SortableCategoriedTransactionExplorerDataItem[] = [];
+
+    for (const categoriedData of explorersStore.categoriedTransactionExplorerData) {
+        result.push({
+            name: getCategoriedDataDisplayName(categoriedData),
+            displayOrders: categoriedData.categoryDisplayOrders,
+            totalAmount: 0,
+            originalItem: categoriedData
+        });
+    }
+
+    sortStatisticsItems(result, ChartSortingType.DisplayOrder.type);
+
+    return result;
+});
+
+const categoriedNamesSortedByDisplayOrder = computed<string[]>(() => {
+    if (!categoriedDataSortedByDisplayOrder.value || !categoriedDataSortedByDisplayOrder.value.length) {
+        return [];
+    }
+
+    const result: string[] = [];
+
+    for (const categoriedData of categoriedDataSortedByDisplayOrder.value) {
+        result.push(categoriedData.name);
+    }
+
+    return result;
+});
+
+const seriesDimensionTransactionExplorerData = computed<SeriesDimensionData[]>(() => {
+    if (!TransactionExplorerChartType.valueOf(currentExplorer.value.chartType)?.seriesDimensionRequired) {
+        return [];
+    }
+
+    if (!explorersStore.categoriedTransactionExplorerData || !explorersStore.categoriedTransactionExplorerData.length) {
+        return [];
+    }
+
+    const result: SeriesDimensionData[] = [];
+    const seriesDimensionDataMap: Record<string, SeriesDimensionData> = {};
+
+    for (const categoriedData of explorersStore.categoriedTransactionExplorerData) {
+        for (const seriesData of categoriedData.data) {
+            const displayName = getCategoriedDataDisplayName(seriesData);
+            let seriesDimensionData: SeriesDimensionData | undefined = seriesDimensionDataMap[seriesData.seriesId];
+
+            if (!seriesDimensionData) {
+                seriesDimensionData = {
+                    id: seriesData.seriesId,
+                    dimension: seriesData.seriesIdType,
+                    name: displayName,
+                    displayOrders: seriesData.seriesDisplayOrders,
+                    categoryValues: [],
+                    totalAmount: 0
+                };
+
+                seriesDimensionDataMap[seriesData.seriesId] = seriesDimensionData;
+                result.push(seriesDimensionData);
+            }
+        }
+    }
+
+    for (const categoriedData of categoriedDataSortedByDisplayOrder.value) {
+        const seriesDataMap: Record<string, CategoriedTransactionExplorerDataItem> = {};
+
+        for (const seriesData of categoriedData.originalItem.data) {
+            seriesDataMap[seriesData.seriesId] = seriesData;
+        }
+
+        for (const seriesDimensionData of result) {
+            const seriesData = seriesDataMap[seriesDimensionData.id];
+
+            if (isDefined(seriesData)) {
+                seriesDimensionData.categoryValues.push(seriesData.value);
+                seriesDimensionData.totalAmount += seriesData.value;
+            } else {
+                seriesDimensionData.categoryValues.push(0);
+            }
+        }
+    }
+
+    sortStatisticsItems(result, currentExplorer.value.chartSortingType);
+
+    return result;
+});
+
+const axisChartDisplayType = computed<AxisChartDisplayType | undefined>(() => {
+    if (currentExplorer.value.chartType === TransactionExplorerChartType.ColumnStacked.value
+        || currentExplorer.value.chartType === TransactionExplorerChartType.Column100PercentStacked.value
+        || currentExplorer.value.chartType === TransactionExplorerChartType.ColumnGrouped.value) {
+        return 'column';
+    } else if (currentExplorer.value.chartType === TransactionExplorerChartType.LineGrouped.value) {
+        return 'line';
+    } else if (currentExplorer.value.chartType === TransactionExplorerChartType.AreaStacked.value
+        || currentExplorer.value.chartType === TransactionExplorerChartType.Area100PercentStacked.value) {
+        return 'area';
+    } else if (currentExplorer.value.chartType === TransactionExplorerChartType.BubbleGrouped.value) {
+        return 'bubble';
+    } else {
+        return undefined;
+    }
+});
+
+const axisChartStacked = computed<boolean>(() => {
+    return (currentExplorer.value.chartType === TransactionExplorerChartType.ColumnStacked.value
+        || currentExplorer.value.chartType === TransactionExplorerChartType.Column100PercentStacked.value
+        || currentExplorer.value.chartType === TransactionExplorerChartType.AreaStacked.value
+        || currentExplorer.value.chartType === TransactionExplorerChartType.Area100PercentStacked.value);
+});
+
+const axisChart100PercentStacked = computed<boolean>(() => {
+    return (currentExplorer.value.chartType === TransactionExplorerChartType.Column100PercentStacked.value
+        || currentExplorer.value.chartType === TransactionExplorerChartType.Area100PercentStacked.value);
+});
+
+function getCategoriedDataDisplayName(info: CategoriedInfo | SeriesInfo): string {
    let name: string = '';
    let needI18n: boolean | undefined = false;
    let i18nParameters: Record<string, unknown> | undefined = undefined;
@@ -315,6 +497,16 @@ function getCategoriedDataDisplayName(info: CategoriedInfo | SeriesedInfo): stri
    return displayName;
 }

+function updateCategoryDimensionType(dimensionType: TransactionExplorerDataDimensionType): void {
+    if (currentExplorer.value.categoryDimension !== dimensionType) {
+        currentExplorer.value.categoryDimension = dimensionType;
+    }
+
+    if (currentExplorer.value.seriesDimension === currentExplorer.value.categoryDimension) {
+        currentExplorer.value.seriesDimension = TransactionExplorerDataDimension.None.value;
+    }
+}
+
 function onClickPieChartItem(item: Record<string, unknown>): void {
    if (!item || !('id' in item) || !('dimension' in item)) {
        return;
@@ -328,6 +520,18 @@ function onClickPieChartItem(item: Record<string, unknown>): void {
    }
 }

+function onClickTrendChartItem(itemId: string, categoryIndex: number): void {
+    const categoryData = categoriedDataSortedByDisplayOrder.value[categoryIndex];
+
+    if (categoryData) {
+        const params: string = explorersStore.getTransactionListPageParams(categoryData.originalItem.categoryIdType, categoryData.originalItem.categoryId);
+
+        if (params && categoryData.originalItem.categoryId !== 'none' && categoryData.originalItem.categoryId !== 'unknown') {
+            router.push(`/transaction/list?${params}`);
+        }
+    }
+}
+
 function buildExportResults(): { headers: string[], data: string[][] } | undefined {
    if (currentExplorer.value.chartType === TransactionExplorerChartType.Pie.value || currentExplorer.value.chartType === TransactionExplorerChartType.Radar.value) {
        const valueMetric = TransactionExplorerValueMetric.valueOf(currentExplorer.value.valueMetric);
@@ -342,6 +546,8 @@ function buildExportResults(): { headers: string[], data: string[][] } | undefin
                valueMetric?.isAmount ? formatAmountToWesternArabicNumeralsWithoutDigitGrouping(data.totalAmount) : data.totalAmount.toString(10)
            ])
        };
+    } else if (TransactionExplorerChartType.valueOf(currentExplorer.value.chartType)?.seriesDimensionRequired && axisChartDisplayType.value) {
+        return axisChart.value?.exportData();
    } else {
        return undefined;
    }