mirror/ezbookkeeping
1
0
Fork 0
mirror of https://github.com/mayswind/ezbookkeeping.git synced 2026-05-14 06:57:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

add sunburst chart in insights explorer

Browse Source
This commit is contained in:
MaysWind
2026-04-24 00:01:09 +08:00
parent 0c427e9857
commit 1d5a6562f3
23 changed files with 98 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/desktop/TreeMapChart.vue → src/components/desktop/HierarchyChart.vue
+52 -40
View File
@@ -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 ret: TreeMapDataItem[] = [];
const hierarchyData = computed<HierarchyDataItem[]>(() => {
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;
treeMapItem.children?.push({
hierarchyItem.value += amount;
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: [
{
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
}
}
]
}
]
series: [ seriesOptions ]
};
});
@@ -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
+2
View File
@@ -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
+4 -2
View File
@@ -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
+1
View File
@@ -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
+1
View File
@@ -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
+1
View File
@@ -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
+1
View File
@@ -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
+1
View File
@@ -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
+1
View File
@@ -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
+1
View File
@@ -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
+1
View File
@@ -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
+1
View File
@@ -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
+1
View File
@@ -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
+1
View File
@@ -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
+1
View File
@@ -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
+1
View File
@@ -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
+1
View File
@@ -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
+1
View File
@@ -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
+1
View File
@@ -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
+1
View File
@@ -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
+1
View File
@@ -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
+1
View File
@@ -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
+21 -9
View File
@@ -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">
<tree-map-chart
<v-card-text :class="{ 'readonly': loading }" v-else-if="TransactionExplorerChartType.valueOf(currentExplorer.chartType)?.seriesDimensionRequired && hierarchyChartDisplayType">
<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
ref="treemapChart"
<hierarchy-chart
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) {
const results = treemapChart.value?.exportData();
} else if (TransactionExplorerChartType.valueOf(currentExplorer.value.chartType)?.seriesDimensionRequired && hierarchyChartDisplayType.value) {
const results = hierarchyChart.value?.exportData();
if (!results) {
return undefined;