add tree map chart in insights explorer

src/components/desktop/TreeMapChart.vue

@@ -0,0 +1,242 @@
+<template>
+    <v-chart autoresize :class="finalClass" :option="chartOptions" />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useTheme } from 'vuetify';
+import type { CallbackDataParams } from 'echarts/types/dist/shared';
+
+import { useI18n } from '@/locales/helpers.ts';
+
+import { itemAndIndex } from '@/core/base.ts';
+import type { ColorValue, ColorStyleValue } from '@/core/color.ts';
+import { ThemeType } from '@/core/theme.ts';
+import { DEFAULT_CHART_COLORS } from '@/consts/color.ts';
+
+import { isArray, isString, isNumber } from '@/lib/common.ts';
+import { getDisplayColor } from '@/lib/color.ts';
+
+interface TreeMapDataItem {
+    name: string;
+    value: number;
+    children?: TreeMapDataItem[];
+    itemStyle: {
+        color: ColorStyleValue;
+    };
+}
+
+const props = defineProps<{
+    class?: string;
+    skeleton?: boolean;
+    showValue?: boolean;
+    categoryTypeName: string;
+    allCategoryNames: string[];
+    items: Record<string, unknown>[];
+    nameField: string;
+    valuesField: string;
+    colorField?: string;
+    hiddenField?: string;
+    translateName?: boolean;
+    amountValue?: boolean;
+    percentValue?: boolean;
+    defaultCurrency?: string;
+}>();
+
+const theme = useTheme();
+
+const {
+    tt,
+    formatAmountToLocalizedNumeralsWithCurrency,
+    formatAmountToWesternArabicNumeralsWithoutDigitGrouping,
+    formatNumberToLocalizedNumerals,
+    formatPercentToLocalizedNumerals
+} = useI18n();
+
+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 += ' treemap-chart-container';
+    }
+
+    return finalClass;
+});
+
+const treeMapData = computed<TreeMapDataItem[]>(() => {
+    const ret: TreeMapDataItem[] = [];
+
+    for (const [item, seriesIndex] of itemAndIndex(props.items)) {
+        if (props.hiddenField && item[props.hiddenField]) {
+            continue;
+        }
+
+        if (!isArray(item[props.valuesField])) {
+            continue;
+        }
+
+        const color: ColorStyleValue = getDisplayColor((props.colorField && item[props.colorField]) ? item[props.colorField] as ColorValue : DEFAULT_CHART_COLORS[seriesIndex % DEFAULT_CHART_COLORS.length]);
+
+        const treeMapItem: TreeMapDataItem = {
+            name: getItemName(item[props.nameField] as string),
+            value: 0,
+            children: [],
+            itemStyle: {
+                color: color
+            }
+        };
+
+        const allAmounts: number[] = item[props.valuesField] as number[];
+
+        for (const [amount, categoryIndex] of itemAndIndex(allAmounts)) {
+            treeMapItem.value += amount;
+            treeMapItem.children?.push({
+                name: props.allCategoryNames[categoryIndex] ?? '',
+                value: amount,
+                itemStyle: {
+                    color: color
+                }
+            });
+        }
+
+        ret.push(treeMapItem);
+    }
+
+    return ret;
+});
+
+const chartOptions = computed<object>(() => {
+    return {
+        tooltip: {
+            backgroundColor: isDarkMode.value ? '#333' : '#fff',
+            borderColor: isDarkMode.value ? '#333' : '#fff',
+            textStyle: {
+                color: isDarkMode.value ? '#eee' : '#333'
+            },
+            formatter: (params: CallbackDataParams & { treePathInfo: { name: string, value: number }[] }) => {
+                if (!props.showValue || !params.name) {
+                    return '';
+                }
+
+                const rootValue = params.treePathInfo.length > 0 ? params.treePathInfo[0]?.value : 0;
+                const parentName = params.treePathInfo.length > 1 ? params.treePathInfo[params.treePathInfo.length - 2]?.name : undefined;
+                const parentValue = params.treePathInfo.length > 1 ? params.treePathInfo[params.treePathInfo.length - 2]?.value : undefined;
+                const parentDisplayValue = isNumber(parentValue) ? getDisplayValue(parentValue) : undefined;
+                const parentPercent = isNumber(parentValue) && isNumber(rootValue) && rootValue > 0 ? formatPercentToLocalizedNumerals(100.0 * parentValue / rootValue, 2, '<0.01') : undefined;
+
+                const name = params.name;
+                const displayValue = isNumber(params.value) ? getDisplayValue(params.value) : '';
+                const percent = isNumber(params.value) && isNumber(parentValue) && parentValue > 0 ? formatPercentToLocalizedNumerals(100.0 * params.value / parentValue, 2, '<0.01') : undefined;
+
+
+                let tooltip = `<tr><td><span class="chart-pointer" style="background-color: ${params.color}"></span><span>${name}</span></td>`
+                    + `<td><span class="ms-5">${displayValue}</span>`
+                    + (isString(percent) ? `<span class="ms-1">(${percent})</span>` : '')
+                    + `</td></tr>`;
+
+                if (isString(parentName) && isString(parentDisplayValue) && parentValue !== rootValue) {
+                    tooltip = `<tr><td><span class="chart-pointer" style="background-color: ${params.color}"></span><span>${parentName}</span></td>`
+                        + `<td><span class="ms-5">${parentDisplayValue}</span>`
+                        + (isString(parentPercent) ? `<span class="ms-1">(${parentPercent})</span>` : '')
+                        + `</td></tr>`
+                        + tooltip;
+                }
+
+                tooltip = `<table class="chart-tooltip-table"><tbody>` + tooltip + `</tbody></table>`;
+                return tooltip;
+            }
+        },
+        series: [
+            {
+                type: 'treemap',
+                animation: !props.skeleton,
+                nodeClick: false,
+                breadcrumb: {
+                    show: false
+                },
+                data: treeMapData.value,
+                levels: [
+                    {
+                        itemStyle: {
+                            gapWidth: 2
+                        }
+                    },
+                    {
+                        itemStyle: {
+                            gapWidth: 1
+                        }
+                    }
+                ]
+            }
+        ]
+    };
+});
+
+function getItemName(name: string): string {
+    return props.translateName ? tt(name) : name;
+}
+
+function getDisplayValue(value: number): string {
+    if (props.percentValue) {
+        return formatPercentToLocalizedNumerals(value, 2, '<0.01');
+    }
+
+    if (props.amountValue) {
+        return formatAmountToLocalizedNumeralsWithCurrency(value, props.defaultCurrency);
+    }
+
+    return formatNumberToLocalizedNumerals(value, 2);
+}
+
+function exportData(): { headers: string[], data: string[][] } {
+    const headers: string[] = [];
+    const data: string[][] = [];
+
+    headers.push(props.categoryTypeName);
+
+    for (const categoryName of props.allCategoryNames) {
+        headers.push(categoryName);
+    }
+
+    for (const item of treeMapData.value) {
+        const row: string[] = [];
+        row.push(item.name);
+
+        for (const child of item.children ?? []) {
+            row.push(formatAmountToWesternArabicNumeralsWithoutDigitGrouping(child.value));
+        }
+
+        data.push(row);
+    }
+
+    return {
+        headers: headers,
+        data: data
+    };
+}
+
+defineExpose({
+    exportData
+});
+</script>
+
+<style scoped>
+.treemap-chart-container {
+    width: 100%;
+    height: 560px;
+    margin-top: 10px;
+}
+
+@media (min-width: 600px) {
+    .treemap-chart-container {
+        height: 630px;
+    }
+}
+</style>

src/core/explorer.ts

@@ -382,6 +382,7 @@ export enum TransactionExplorerChartTypeValue {
     Area100PercentStacked = 'area100%Stacked',
     BubbleGrouped = 'bubbleGrouped',
     Radar = 'radar',
+    Treemap = 'treemap',
     Heatmap = 'heatmap',
     CalendarHeatmap = 'calendarHeatmap'
 }
@@ -399,6 +400,7 @@ export class TransactionExplorerChartType implements NameValue {
     public static readonly AreaStacked = new TransactionExplorerChartType('Area Chart (Stacked)', TransactionExplorerChartTypeValue.AreaStacked, undefined, true, undefined);
     public static readonly Area100PercentStacked = new TransactionExplorerChartType('Area Chart (100% Stacked)', TransactionExplorerChartTypeValue.Area100PercentStacked, undefined, true, undefined);
     public static readonly BubbleGrouped = new TransactionExplorerChartType('Bubble Chart (Grouped)', TransactionExplorerChartTypeValue.BubbleGrouped, undefined, true, undefined);
+    public static readonly Treemap = new TransactionExplorerChartType('Treemap Chart', TransactionExplorerChartTypeValue.Treemap, undefined, true, undefined);
     public static readonly Heatmap = new TransactionExplorerChartType('Heatmap Chart', TransactionExplorerChartTypeValue.Heatmap, undefined, true, undefined);
     public static readonly CalendarHeatmap = new TransactionExplorerChartType('Calendar Heatmap Chart', TransactionExplorerChartTypeValue.CalendarHeatmap, TransactionExplorerDataDimensionType.DateTimeByYearMonthDay, false, ChartSortingType.DisplayOrder.type);
 

src/desktop-main.ts

@@ -60,6 +60,7 @@ import {
     BoxplotChart,
     CandlestickChart,
     RadarChart,
+    TreemapChart,
     HeatmapChart,
     SankeyChart
 } from 'echarts/charts';
@@ -115,6 +116,7 @@ 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 TreeMapChart from '@/components/desktop/TreeMapChart.vue';
 import HeatMapChart from '@/components/desktop/HeatMapChart.vue';
 import CalendarHeatMapChart from '@/components/desktop/CalendarHeatMapChart.vue';
 import RenameDialog from '@/components/desktop/RenameDialog.vue';
@@ -520,6 +522,7 @@ echarts.use([
     BoxplotChart,
     CandlestickChart,
     RadarChart,
+    TreemapChart,
     HeatmapChart,
     SankeyChart,
     GridComponent,
@@ -568,6 +571,7 @@ app.component('PieChart', PieChartComponent);
 app.component('RadarChart', RadarChartComponent);
 app.component('AxisChart', AxisChart);
 app.component('TrendsChart', TrendsChart);
+app.component('TreeMapChart', TreeMapChart);
 app.component('HeatMapChart', HeatMapChart);
 app.component('CalendarHeatMapChart', CalendarHeatMapChart);
 app.component('RenameDialog', RenameDialog);

src/locales/de.json

@@ -1603,6 +1603,7 @@
     "Area Chart (Stacked)": "Flächendiagramm (Gestapelt)",
     "Area Chart (100% Stacked)": "Flächendiagramm (100% Gestapelt)",
     "Bubble Chart (Grouped)": "Blasendiagramm (Gruppiert)",
+    "Treemap Chart": "Treemap Chart",
     "Heatmap Chart": "Heatmap Chart",
     "Calendar Heatmap Chart": "Calendar Heatmap Chart",
     "Sort by": "Sortieren nach",

src/locales/en.json

@@ -1603,6 +1603,7 @@
     "Area Chart (Stacked)": "Area Chart (Stacked)",
     "Area Chart (100% Stacked)": "Area Chart (100% Stacked)",
     "Bubble Chart (Grouped)": "Bubble Chart (Grouped)",
+    "Treemap Chart": "Treemap Chart",
     "Heatmap Chart": "Heatmap Chart",
     "Calendar Heatmap Chart": "Calendar Heatmap Chart",
     "Sort by": "Sort by",

src/locales/es.json

@@ -1603,6 +1603,7 @@
     "Area Chart (Stacked)": "Gráfico de área (apilado)",
     "Area Chart (100% Stacked)": "Gráfico de área (100 % apilado)",
     "Bubble Chart (Grouped)": "Gráfico de burbujas (agrupado)",
+    "Treemap Chart": "Treemap Chart",
     "Heatmap Chart": "Heatmap Chart",
     "Calendar Heatmap Chart": "Calendar Heatmap Chart",
     "Sort by": "Ordenar por",

src/locales/fr.json

@@ -1603,6 +1603,7 @@
     "Area Chart (Stacked)": "Area Chart (Stacked)",
     "Area Chart (100% Stacked)": "Area Chart (100% Stacked)",
     "Bubble Chart (Grouped)": "Bubble Chart (Grouped)",
+    "Treemap Chart": "Treemap Chart",
     "Heatmap Chart": "Heatmap Chart",
     "Calendar Heatmap Chart": "Calendar Heatmap Chart",
     "Sort by": "Trier par",

src/locales/it.json

@@ -1603,6 +1603,7 @@
     "Area Chart (Stacked)": "Area Chart (Stacked)",
     "Area Chart (100% Stacked)": "Area Chart (100% Stacked)",
     "Bubble Chart (Grouped)": "Bubble Chart (Grouped)",
+    "Treemap Chart": "Treemap Chart",
     "Heatmap Chart": "Heatmap Chart",
     "Calendar Heatmap Chart": "Calendar Heatmap Chart",
     "Sort by": "Ordina per",

src/locales/ja.json

@@ -1603,6 +1603,7 @@
     "Area Chart (Stacked)": "Area Chart (Stacked)",
     "Area Chart (100% Stacked)": "Area Chart (100% Stacked)",
     "Bubble Chart (Grouped)": "Bubble Chart (Grouped)",
+    "Treemap Chart": "Treemap Chart",
     "Heatmap Chart": "Heatmap Chart",
     "Calendar Heatmap Chart": "Calendar Heatmap Chart",
     "Sort by": "ソート順",

src/locales/kn.json

@@ -1603,6 +1603,7 @@
     "Area Chart (Stacked)": "Area Chart (Stacked)",
     "Area Chart (100% Stacked)": "Area Chart (100% Stacked)",
     "Bubble Chart (Grouped)": "Bubble Chart (Grouped)",
+    "Treemap Chart": "Treemap Chart",
     "Heatmap Chart": "Heatmap Chart",
     "Calendar Heatmap Chart": "Calendar Heatmap Chart",
     "Sort by": "ಇದರ ಪ್ರಕಾರ ವಿಂಗಡಿಸಿ",

src/locales/ko.json

@@ -1603,6 +1603,7 @@
     "Area Chart (Stacked)": "누적 영역 차트",
     "Area Chart (100% Stacked)": "100% 누적 영역 차트",
     "Bubble Chart (Grouped)": "그룹화된 버블 차트",
+    "Treemap Chart": "Treemap Chart",
     "Heatmap Chart": "Heatmap Chart",
     "Calendar Heatmap Chart": "Calendar Heatmap Chart",
     "Sort by": "정렬 기준",

src/locales/nl.json

@@ -1603,6 +1603,7 @@
     "Area Chart (Stacked)": "Area Chart (Stacked)",
     "Area Chart (100% Stacked)": "Area Chart (100% Stacked)",
     "Bubble Chart (Grouped)": "Bubble Chart (Grouped)",
+    "Treemap Chart": "Treemap Chart",
     "Heatmap Chart": "Heatmap Chart",
     "Calendar Heatmap Chart": "Calendar Heatmap Chart",
     "Sort by": "Sorteren op",

src/locales/pt_BR.json

@@ -1603,6 +1603,7 @@
     "Area Chart (Stacked)": "Gráfico de Área (Empilhado)",
     "Area Chart (100% Stacked)": "Gráfico de Área (100% Empilhado)",
     "Bubble Chart (Grouped)": "Gráfico de Bolhas (Agrupado)",
+    "Treemap Chart": "Treemap Chart",
     "Heatmap Chart": "Heatmap Chart",
     "Calendar Heatmap Chart": "Calendar Heatmap Chart",
     "Sort by": "Ordenar por",

src/locales/ru.json

@@ -1603,6 +1603,7 @@
     "Area Chart (Stacked)": "Диаграмма с областями (с накоплением)",
     "Area Chart (100% Stacked)": "Диаграмма с областями (с 100% накоплением)",
     "Bubble Chart (Grouped)": "Пузырьковая диаграмма (сгрупированная)",
+    "Treemap Chart": "Treemap Chart",
     "Heatmap Chart": "Heatmap Chart",
     "Calendar Heatmap Chart": "Calendar Heatmap Chart",
     "Sort by": "Сортировать по",

src/locales/sl.json

@@ -1603,6 +1603,7 @@
     "Area Chart (Stacked)": "Naložen ploskovni grafikon",
     "Area Chart (100% Stacked)": "100-odstotno naložen ploskovni grafikon",
     "Bubble Chart (Grouped)": "Grupiran mehurčni grafikon",
+    "Treemap Chart": "Treemap Chart",
     "Heatmap Chart": "Heatmap Chart",
     "Calendar Heatmap Chart": "Calendar Heatmap Chart",
     "Sort by": "Razvrsti po",

src/locales/ta.json

@@ -1603,6 +1603,7 @@
     "Area Chart (Stacked)": "பரப்பு வரைபடம் (அடுக்கப்பட்ட)",
     "Area Chart (100% Stacked)": "பரப்பு வரைபடம் (100% அடுக்கப்பட்ட)",
     "Bubble Chart (Grouped)": "குமிழி வரைபடம் (குழுவாக்கப்பட்ட)",
+    "Treemap Chart": "Treemap Chart",
     "Heatmap Chart": "Heatmap Chart",
     "Calendar Heatmap Chart": "Calendar Heatmap Chart",
     "Sort by": "இதன் வகை வரிசைப்படுத்து",

src/locales/th.json

@@ -1603,6 +1603,7 @@
     "Area Chart (Stacked)": "Area Chart (Stacked)",
     "Area Chart (100% Stacked)": "Area Chart (100% Stacked)",
     "Bubble Chart (Grouped)": "Bubble Chart (Grouped)",
+    "Treemap Chart": "Treemap Chart",
     "Heatmap Chart": "Heatmap Chart",
     "Calendar Heatmap Chart": "Calendar Heatmap Chart",
     "Sort by": "จัดเรียงตาม",

src/locales/tr.json

@@ -1603,6 +1603,7 @@
     "Area Chart (Stacked)": "Area Chart (Stacked)",
     "Area Chart (100% Stacked)": "Area Chart (100% Stacked)",
     "Bubble Chart (Grouped)": "Bubble Chart (Grouped)",
+    "Treemap Chart": "Treemap Chart",
     "Heatmap Chart": "Heatmap Chart",
     "Calendar Heatmap Chart": "Calendar Heatmap Chart",
     "Sort by": "Sıralama ölçütü",

src/locales/uk.json

@@ -1603,6 +1603,7 @@
     "Area Chart (Stacked)": "Area Chart (Stacked)",
     "Area Chart (100% Stacked)": "Area Chart (100% Stacked)",
     "Bubble Chart (Grouped)": "Bubble Chart (Grouped)",
+    "Treemap Chart": "Treemap Chart",
     "Heatmap Chart": "Heatmap Chart",
     "Calendar Heatmap Chart": "Calendar Heatmap Chart",
     "Sort by": "Сортувати за",

src/locales/vi.json

@@ -1603,6 +1603,7 @@
     "Area Chart (Stacked)": "Area Chart (Stacked)",
     "Area Chart (100% Stacked)": "Area Chart (100% Stacked)",
     "Bubble Chart (Grouped)": "Bubble Chart (Grouped)",
+    "Treemap Chart": "Treemap Chart",
     "Heatmap Chart": "Heatmap Chart",
     "Calendar Heatmap Chart": "Calendar Heatmap Chart",
     "Sort by": "Sắp xếp theo",

src/locales/zh_Hans.json

@@ -1603,6 +1603,7 @@
     "Area Chart (Stacked)": "面积图（堆叠）",
     "Area Chart (100% Stacked)": "面积图（100%堆叠）",
     "Bubble Chart (Grouped)": "气泡图（分组）",
+    "Treemap Chart": "矩形树图",
     "Heatmap Chart": "热力图",
     "Calendar Heatmap Chart": "日历热力图",
     "Sort by": "排序方式",

src/locales/zh_Hant.json

@@ -1603,6 +1603,7 @@
     "Area Chart (Stacked)": "面積圖（堆疊）",
     "Area Chart (100% Stacked)": "面積圖（100%堆疊）",
     "Bubble Chart (Grouped)": "氣泡圖（分組）",
+    "Treemap Chart": "矩形樹狀圖",
     "Heatmap Chart": "熱力圖",
     "Calendar Heatmap Chart": "日曆熱力圖",
     "Sort by": "排序方式",

src/views/desktop/insights/tabs/ExplorerChartTab.vue

@@ -181,6 +181,30 @@
             v-else-if="!loading"
         />
     </v-card-text>
+    <v-card-text :class="{ 'readonly': loading }" v-else-if="currentExplorer.chartType === TransactionExplorerChartType.Treemap.value">
+        <tree-map-chart
+            :skeleton="true"
+            :all-category-names="[]"
+            :items="[]"
+            category-type-name=""
+            name-field="name"
+            values-field="values"
+            v-if="loading"
+        />
+        <tree-map-chart
+            ref="treemapChart"
+            :show-value="true"
+            :category-type-name="currentTransactionExplorerCategoryDimensionName"
+            :all-category-names="categoriedNamesSortedByDisplayOrder"
+            :items="seriesDimensionTransactionExplorerData"
+            :amount-value="TransactionExplorerValueMetric.valueOf(currentExplorer.valueMetric)?.isAmount"
+            :percent-value="TransactionExplorerValueMetric.valueOf(currentExplorer.valueMetric)?.isPercent"
+            :default-currency="defaultCurrency"
+            name-field="name"
+            values-field="categoryValues"
+            v-else-if="!loading"
+        />
+    </v-card-text>
     <v-card-text :class="{ 'readonly': loading }" v-else-if="currentExplorer.chartType === TransactionExplorerChartType.Heatmap.value">
         <heat-map-chart
             :skeleton="true"
@@ -232,6 +256,7 @@
 
 <script setup lang="ts">
 import AxisChart, { type AxisChartDisplayType } from '@/components/desktop/AxisChart.vue';
+import TreeMapChart from '@/components/desktop/TreeMapChart.vue';
 import HeatMapChart from '@/components/desktop/HeatMapChart.vue';
 
 import { computed, useTemplateRef } from 'vue';
@@ -269,6 +294,7 @@ import { getCurrentDateTime, parseDateTimeFromString } from '@/lib/datetime.ts';
 import { sortStatisticsItems } from '@/lib/statistics.ts';
 
 type AxisChartType = InstanceType<typeof AxisChart>;
+type TreeMapChartType = InstanceType<typeof TreeMapChart>;
 type HeatMapChartType = InstanceType<typeof HeatMapChart>;
 
 interface InsightsExplorerDataTableTabProps {
@@ -332,6 +358,7 @@ const userStore = useUserStore();
 const explorersStore = useExplorersStore();
 
 const axisChart = useTemplateRef<AxisChartType>('axisChart');
+const treemapChart = useTemplateRef<TreeMapChartType>('treemapChart');
 const heatmapChart = useTemplateRef<HeatMapChartType>('heatmapChart');
 
 const defaultCurrency = computed<string>(() => userStore.currentUserDefaultCurrency);
@@ -933,6 +960,18 @@ function buildExportResults(): { headers: string[], data: string[][], supportedM
             data: results.data,
             supportedMermaidCharts: supportedMermaidCharts
         };
+    } else if (TransactionExplorerChartType.valueOf(currentExplorer.value.chartType)?.seriesDimensionRequired && currentExplorer.value.chartType === TransactionExplorerChartType.Treemap.value) {
+        const results = treemapChart.value?.exportData();
+
+        if (!results) {
+            return undefined;
+        }
+
+        return {
+            headers: results.headers,
+            data: results.data,
+            supportedMermaidCharts: undefined
+        };
     } else if (TransactionExplorerChartType.valueOf(currentExplorer.value.chartType)?.seriesDimensionRequired && currentExplorer.value.chartType === TransactionExplorerChartType.Heatmap.value) {
         const results = heatmapChart.value?.exportData();