add sunburst chart in insights explorer

src/components/desktop/HierarchyChart.vue

@@ -17,10 +17,12 @@ import { DEFAULT_CHART_COLORS } from '@/consts/color.ts';
 import { isArray, isString, isNumber } from '@/lib/common.ts';
 import { getDisplayColor } from '@/lib/color.ts';
 
-interface TreeMapDataItem {
+export type HierarchyChartDisplayType = 'treemap' | 'sunburst';
+
+interface HierarchyDataItem {
     name: string;
     value: number;
-    children?: TreeMapDataItem[];
+    children?: HierarchyDataItem[];
     itemStyle: {
         color: ColorStyleValue;
     };
@@ -29,6 +31,7 @@ interface TreeMapDataItem {
 const props = defineProps<{
     class?: string;
     skeleton?: boolean;
+    type: HierarchyChartDisplayType;
     showValue?: boolean;
     categoryTypeName: string;
     allCategoryNames: string[];
@@ -64,14 +67,14 @@ const finalClass = computed<string>(() => {
     if (props.class) {
         finalClass += ` ${props.class}`;
     } else {
-        finalClass += ' treemap-chart-container';
+        finalClass += ' hierarchy-chart-container';
     }
 
     return finalClass;
 });
 
-const treeMapData = computed<TreeMapDataItem[]>(() => {
+const hierarchyData = computed<HierarchyDataItem[]>(() => {
-    const ret: TreeMapDataItem[] = [];
+    const ret: HierarchyDataItem[] = [];
 
     for (const [item, seriesIndex] of itemAndIndex(props.items)) {
         if (props.hiddenField && item[props.hiddenField]) {
@@ -84,7 +87,7 @@ const treeMapData = computed<TreeMapDataItem[]>(() => {
 
         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 = {
+        const hierarchyItem: HierarchyDataItem = {
             name: getItemName(item[props.nameField] as string),
             value: 0,
             children: [],
@@ -96,8 +99,8 @@ const treeMapData = computed<TreeMapDataItem[]>(() => {
         const allAmounts: number[] = item[props.valuesField] as number[];
 
         for (const [amount, categoryIndex] of itemAndIndex(allAmounts)) {
-            treeMapItem.value += amount;
+            hierarchyItem.value += amount;
-            treeMapItem.children?.push({
+            hierarchyItem.children?.push({
                 name: props.allCategoryNames[categoryIndex] ?? '',
                 value: amount,
                 itemStyle: {
@@ -106,13 +109,49 @@ const treeMapData = computed<TreeMapDataItem[]>(() => {
             });
         }
 
-        ret.push(treeMapItem);
+        ret.push(hierarchyItem);
     }
 
     return ret;
 });
 
 const chartOptions = computed<object>(() => {
+    const seriesOptions: Record<string, unknown> = {
+        type: props.type,
+        width: '100%',
+        height: '100%',
+        right: 20,
+        top: 0,
+        bottom: 20,
+        data: hierarchyData.value,
+        levels: [
+            {
+                itemStyle: {
+                    gapWidth: 2
+                }
+            },
+            {
+                itemStyle: {
+                    gapWidth: 1
+                }
+            }
+        ],
+        animation: !props.skeleton,
+        nodeClick: false
+    };
+
+    if (props.type === 'treemap') {
+        seriesOptions['breadcrumb'] = {
+            show: false
+        };
+    } if (props.type === 'sunburst') {
+        seriesOptions['radius'] = [60, '95%'];
+        seriesOptions['itemStyle'] = {
+            borderRadius: 7,
+            borderWidth: 2
+        };
+    }
+
     return {
         tooltip: {
             backgroundColor: isDarkMode.value ? '#333' : '#fff',
@@ -153,34 +192,7 @@ const chartOptions = computed<object>(() => {
                 return tooltip;
             }
         },
-        series: [
+        series: [ seriesOptions ]
-            {
-                type: 'treemap',
-                animation: !props.skeleton,
-                nodeClick: false,
-                breadcrumb: {
-                    show: false
-                },
-                width: '100%',
-                height: '100%',
-                right: 20,
-                top: 0,
-                bottom: 20,
-                data: treeMapData.value,
-                levels: [
-                    {
-                        itemStyle: {
-                            gapWidth: 2
-                        }
-                    },
-                    {
-                        itemStyle: {
-                            gapWidth: 1
-                        }
-                    }
-                ]
-            }
-        ]
     };
 });
 
@@ -210,7 +222,7 @@ function exportData(): { headers: string[], data: string[][] } {
         headers.push(categoryName);
     }
 
-    for (const item of treeMapData.value) {
+    for (const item of hierarchyData.value) {
         const row: string[] = [];
         row.push(item.name);
 
@@ -233,14 +245,14 @@ defineExpose({
 </script>
 
 <style scoped>
-.treemap-chart-container {
+.hierarchy-chart-container {
     width: 100%;
     height: 560px;
     margin-top: 10px;
 }
 
 @media (min-width: 600px) {
-    .treemap-chart-container {
+    .hierarchy-chart-container {
         height: 630px;
     }
 }

src/core/explorer.ts

@@ -383,6 +383,7 @@ export enum TransactionExplorerChartTypeValue {
     BubbleGrouped = 'bubbleGrouped',
     Radar = 'radar',
     Treemap = 'treemap',
+    Sunburst = 'sunburst',
     Heatmap = 'heatmap',
     CalendarHeatmap = 'calendarHeatmap'
 }
@@ -401,6 +402,7 @@ export class TransactionExplorerChartType implements NameValue {
     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 Sunburst = new TransactionExplorerChartType('Sunburst Chart', TransactionExplorerChartTypeValue.Sunburst, 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

@@ -61,6 +61,7 @@ import {
     CandlestickChart,
     RadarChart,
     TreemapChart,
+    SunburstChart,
     HeatmapChart,
     SankeyChart
 } from 'echarts/charts';
@@ -116,7 +117,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 HierarchyChart from '@/components/desktop/HierarchyChart.vue';
 import HeatMapChart from '@/components/desktop/HeatMapChart.vue';
 import CalendarHeatMapChart from '@/components/desktop/CalendarHeatMapChart.vue';
 import RenameDialog from '@/components/desktop/RenameDialog.vue';
@@ -523,6 +524,7 @@ echarts.use([
     CandlestickChart,
     RadarChart,
     TreemapChart,
+    SunburstChart,
     HeatmapChart,
     SankeyChart,
     GridComponent,
@@ -571,7 +573,7 @@ app.component('PieChart', PieChartComponent);
 app.component('RadarChart', RadarChartComponent);
 app.component('AxisChart', AxisChart);
 app.component('TrendsChart', TrendsChart);
-app.component('TreeMapChart', TreeMapChart);
+app.component('HierarchyChart', HierarchyChart);
 app.component('HeatMapChart', HeatMapChart);
 app.component('CalendarHeatMapChart', CalendarHeatMapChart);
 app.component('RenameDialog', RenameDialog);

src/locales/de.json

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

src/locales/en.json

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

src/locales/es.json

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

src/locales/fr.json

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

src/locales/it.json

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

src/locales/ja.json

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

src/locales/kn.json

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

src/locales/ko.json

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

src/locales/nl.json

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

src/locales/pt_BR.json

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

src/locales/ru.json

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

src/locales/sl.json

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

src/locales/ta.json

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

src/locales/th.json

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

src/locales/tr.json

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

src/locales/uk.json

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

src/locales/vi.json

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

src/locales/zh_Hans.json

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

src/locales/zh_Hant.json

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

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

@@ -181,9 +181,10 @@
             v-else-if="!loading"
         />
     </v-card-text>
-    <v-card-text :class="{ 'readonly': loading }" v-else-if="currentExplorer.chartType === TransactionExplorerChartType.Treemap.value">
+    <v-card-text :class="{ 'readonly': loading }" v-else-if="TransactionExplorerChartType.valueOf(currentExplorer.chartType)?.seriesDimensionRequired && hierarchyChartDisplayType">
-        <tree-map-chart
+        <hierarchy-chart
             :skeleton="true"
+            :type="hierarchyChartDisplayType"
             :all-category-names="[]"
             :items="[]"
             category-type-name=""
@@ -191,8 +192,9 @@
             values-field="values"
             v-if="loading"
         />
-        <tree-map-chart
+        <hierarchy-chart
-            ref="treemapChart"
+            ref="hierarchyChart"
+            :type="hierarchyChartDisplayType"
             :show-value="true"
             :category-type-name="currentTransactionExplorerCategoryDimensionName"
             :all-category-names="categoriedNamesSortedByDisplayOrder"
@@ -256,7 +258,7 @@
 
 <script setup lang="ts">
 import AxisChart, { type AxisChartDisplayType } from '@/components/desktop/AxisChart.vue';
-import TreeMapChart from '@/components/desktop/TreeMapChart.vue';
+import HierarchyChart, { type HierarchyChartDisplayType } from '@/components/desktop/HierarchyChart.vue';
 import HeatMapChart from '@/components/desktop/HeatMapChart.vue';
 
 import { computed, useTemplateRef } from 'vue';
@@ -294,7 +296,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 HierarchyChartType = InstanceType<typeof HierarchyChart>;
 type HeatMapChartType = InstanceType<typeof HeatMapChart>;
 
 interface InsightsExplorerDataTableTabProps {
@@ -358,7 +360,7 @@ const userStore = useUserStore();
 const explorersStore = useExplorersStore();
 
 const axisChart = useTemplateRef<AxisChartType>('axisChart');
-const treemapChart = useTemplateRef<TreeMapChartType>('treemapChart');
+const hierarchyChart = useTemplateRef<HierarchyChartType>('hierarchyChart');
 const heatmapChart = useTemplateRef<HeatMapChartType>('heatmapChart');
 
 const defaultCurrency = computed<string>(() => userStore.currentUserDefaultCurrency);
@@ -597,6 +599,16 @@ const axisChartDisplayType = computed<AxisChartDisplayType | undefined>(() => {
     }
 });
 
+const hierarchyChartDisplayType = computed<HierarchyChartDisplayType | undefined>(() => {
+    if (currentExplorer.value.chartType === TransactionExplorerChartType.Treemap.value) {
+        return 'treemap';
+    } else if (currentExplorer.value.chartType === TransactionExplorerChartType.Sunburst.value) {
+        return 'sunburst';
+    } else {
+        return undefined;
+    }
+});
+
 const axisChartStacked = computed<boolean>(() => {
     return (currentExplorer.value.chartType === TransactionExplorerChartType.ColumnStacked.value
         || currentExplorer.value.chartType === TransactionExplorerChartType.Column100PercentStacked.value
@@ -960,8 +972,8 @@ 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) {
+    } else if (TransactionExplorerChartType.valueOf(currentExplorer.value.chartType)?.seriesDimensionRequired && hierarchyChartDisplayType.value) {
-        const results = treemapChart.value?.exportData();
+        const results = hierarchyChart.value?.exportData();
 
         if (!results) {
             return undefined;