diff --git a/src/components/desktop/AccountAndCategorySankeyChart.vue b/src/components/desktop/AccountAndCategorySankeyChart.vue index bd1963ab..f08077ce 100644 --- a/src/components/desktop/AccountAndCategorySankeyChart.vue +++ b/src/components/desktop/AccountAndCategorySankeyChart.vue @@ -56,6 +56,7 @@ interface SankeyChartNodeItem extends SortableTransactionStatisticDataItem { displayName: string; displayOrders: number[]; totalAmount: number; + percent?: number; depth: number; } @@ -85,7 +86,10 @@ const emit = defineEmits<{ const theme = useTheme(); -const { formatAmountToLocalizedNumeralsWithCurrency } = useI18n(); +const { + formatAmountToLocalizedNumeralsWithCurrency, + formatPercentToLocalizedNumerals +} = useI18n(); const userStore = useUserStore(); @@ -331,7 +335,16 @@ const chartOptions = computed(() => { const dataItem = params.data as SankeyChartNodeItem; const value = dataItem.totalAmount; const displayValue = formatAmountToLocalizedNumeralsWithCurrency(value, props.defaultCurrency); - return `
${dataItem.displayName}${displayValue}
`; + + let tooltip = `
${dataItem.displayName}`; + + if (isNumber(dataItem.percent)) { + const displayPercent = formatPercentToLocalizedNumerals(dataItem.percent, 2, '<0.01'); + tooltip += `(${displayPercent})`; + } + + tooltip += `${displayValue}
`; + return tooltip; } else if (params.dataType === 'edge') { const dataItem = params.data as SankeyChartLinkItem; const value = isNumber(params.value) ? params.value as number : 0; @@ -477,8 +490,13 @@ function updateLinkItem(linksMap: Record, { sourceI function addFinalSortedNodeItems(nodesMap: Record, allNodesArray: SankeyChartNodeItem[]): void { const nodesArray: SankeyChartNodeItem[] = []; + let totalAmount = 0; for (const node of values(nodesMap)) { + if (node.totalAmount > 0) { + totalAmount += node.totalAmount; + } + nodesArray.push(node); } @@ -486,6 +504,7 @@ function addFinalSortedNodeItems(nodesMap: Record, for (const node of nodesArray) { node.name = node.nameId; + node.percent = node.totalAmount > 0 && totalAmount > 0 ? (node.totalAmount / totalAmount) * 100 : undefined; } allNodesArray.push(...nodesArray);