From a8b6f9bdb171d0f1a99ba46bcd67c9ef60085bd7 Mon Sep 17 00:00:00 2001
From: Simon Reinisch <simon@reinisch.io>
Date: Tue, 14 Jan 2025 17:48:53 +0100
Subject: [PATCH] feat: highlight sankey chart when hovering dashboard tiles

closes #68
---
 src/app/pages/dashboard/overview/Overview.vue |  7 ++++--
 .../widgets/charts/DistributionChart.vue      | 25 +++++++++++++------
 .../charts/sankey-chart/SankeyChart.types.ts  |  2 ++
 .../charts/sankey-chart/SankeyChart.vue       | 18 +++++++++----
 .../widgets/header-panels/SummaryPanel.vue    |  2 +-
 .../header-panels/SummaryPanelChart.vue       |  5 ++--
 .../header-panels/SummaryPanels.types.ts      |  1 +
 .../widgets/header-panels/SummaryPanels.vue   | 11 ++++++++
 src/app/pages/dashboard/summary/Summary.vue   |  2 +-
 9 files changed, 53 insertions(+), 20 deletions(-)
 create mode 100644 src/app/pages/dashboard/overview/widgets/header-panels/SummaryPanels.types.ts

diff --git a/src/app/pages/dashboard/overview/Overview.vue b/src/app/pages/dashboard/overview/Overview.vue
index f2db4186..f48639c6 100644
--- a/src/app/pages/dashboard/overview/Overview.vue
+++ b/src/app/pages/dashboard/overview/Overview.vue
@@ -1,7 +1,8 @@
 <template>
   <div :class="$style.overview">
-    <SummaryPanels />
+    <SummaryPanels @hovered-panel="highlight = $event" />
     <AsyncComponent
+      :properties="{ highlight }"
       :show="media !== 'mobile'"
       :class="$style.chart"
       :import="() => import('./widgets/charts/DistributionChart.vue')"
@@ -11,10 +12,12 @@
 
 <script lang="ts" setup>
 import AsyncComponent from '@components/misc/async-component/AsyncComponent.vue';
-import { useMediaQuery } from '../../../../composables/useMediaQuery';
+import { useMediaQuery } from '@composables';
 import SummaryPanels from './widgets/header-panels/SummaryPanels.vue';
+import { ref } from 'vue';
 
 const media = useMediaQuery();
+const highlight = ref<string>();
 </script>
 
 <style lang="scss" module>
diff --git a/src/app/pages/dashboard/overview/widgets/charts/DistributionChart.vue b/src/app/pages/dashboard/overview/widgets/charts/DistributionChart.vue
index 5d5e030a..8731754e 100644
--- a/src/app/pages/dashboard/overview/widgets/charts/DistributionChart.vue
+++ b/src/app/pages/dashboard/overview/widgets/charts/DistributionChart.vue
@@ -15,6 +15,7 @@ import SankeyChart from './sankey-chart/SankeyChart.vue';
 
 const props = defineProps<{
   class?: ClassNames;
+  highlight?: 'income' | 'expenses';
 }>();
 
 const classes = computed(() => props.class);
@@ -54,13 +55,15 @@ const data = computed((): SankeyChartConfig => {
     labels.push({
       id: group.id,
       name: `${group.name} (${format(total)})`,
-      color: color(60 + 60 * (total / totalIncome))
+      color: color(60 + 60 * (total / totalIncome)),
+      muted: props.highlight === 'expenses'
     });
 
     links.push({
       target: income.id,
       source: group.id,
-      value: total
+      value: total,
+      muted: props.highlight === 'expenses'
     });
 
     for (let i = 0; i < group.budgets.length; i++) {
@@ -71,13 +74,15 @@ const data = computed((): SankeyChartConfig => {
         labels.push({
           id: budget.id,
           name: `${budget.name} (${format(total)})`,
-          color: color(60 + 60 * (total / totalIncome))
+          color: color(60 + 60 * (total / totalIncome)),
+          muted: props.highlight === 'expenses'
         });
 
         links.push({
           target: group.id,
           source: budget.id,
-          value: total
+          value: total,
+          muted: props.highlight === 'expenses'
         });
       }
     }
@@ -93,13 +98,15 @@ const data = computed((): SankeyChartConfig => {
     labels.push({
       id: group.id,
       name: `${group.name} (${format(total)})`,
-      color: color(60 * (1 - total / totalExpenses))
+      color: color(60 * (1 - total / totalExpenses)),
+      muted: props.highlight === 'income'
     });
 
     links.push({
       target: group.id,
       source: income.id,
-      value: total
+      value: total,
+      muted: props.highlight === 'income'
     });
 
     for (let i = 0; i < group.budgets.length; i++) {
@@ -111,13 +118,15 @@ const data = computed((): SankeyChartConfig => {
           id: budget.id,
           name: `${budget.name} (${format(total)})`,
           color: color(60 * (1 - total / totalExpenses)),
-          align: 'left'
+          align: 'left',
+          muted: props.highlight === 'income'
         });
 
         links.push({
           target: budget.id,
           source: group.id,
-          value: total
+          value: total,
+          muted: props.highlight === 'income'
         });
       }
     }
diff --git a/src/app/pages/dashboard/overview/widgets/charts/sankey-chart/SankeyChart.types.ts b/src/app/pages/dashboard/overview/widgets/charts/sankey-chart/SankeyChart.types.ts
index 3ec5182b..23e23686 100644
--- a/src/app/pages/dashboard/overview/widgets/charts/sankey-chart/SankeyChart.types.ts
+++ b/src/app/pages/dashboard/overview/widgets/charts/sankey-chart/SankeyChart.types.ts
@@ -2,12 +2,14 @@ export interface SankeyChartLink {
   source: string;
   target: string;
   value: number;
+  muted?: boolean;
 }
 
 export interface SankeyChartLabel {
   id: string;
   name: string;
   color: string;
+  muted?: boolean;
   align?: 'left' | 'right';
 }
 
diff --git a/src/app/pages/dashboard/overview/widgets/charts/sankey-chart/SankeyChart.vue b/src/app/pages/dashboard/overview/widgets/charts/sankey-chart/SankeyChart.vue
index bec4fed8..23f87849 100644
--- a/src/app/pages/dashboard/overview/widgets/charts/sankey-chart/SankeyChart.vue
+++ b/src/app/pages/dashboard/overview/widgets/charts/sankey-chart/SankeyChart.vue
@@ -48,6 +48,7 @@ const classes = computed(() => props.class);
 const options = computed(
   (): EChartsOption => ({
     animation: false,
+    silent: true,
     series: {
       type: 'sankey',
       label: {
@@ -65,20 +66,27 @@ const options = computed(
       nodeWidth: 7,
       left: 0,
       right: 0,
-      links: props.data.links,
+      links: props.data.links.map((v) => ({
+        ...v,
+        animation: true,
+        lineStyle: { opacity: v.muted ? 0.05 : 0.25 }
+      })),
       data: props.data.labels.map((v) => ({
         name: v.name,
         id: v.id,
-        itemStyle: { color: v.color },
+        itemStyle: {
+          color: v.color,
+          opacity: v.muted ? 0.25 : 1
+        },
         label:
           v.align === 'left'
             ? {
                 align: 'right',
+                opacity: v.muted ? 0.65 : 1,
                 padding: [0, 20, 0, 0]
               }
-            : undefined
-      })),
-      silent: true
+            : { opacity: v.muted ? 0.65 : 1 }
+      }))
     }
   })
 );
diff --git a/src/app/pages/dashboard/overview/widgets/header-panels/SummaryPanel.vue b/src/app/pages/dashboard/overview/widgets/header-panels/SummaryPanel.vue
index 5dac4f05..deae1a70 100644
--- a/src/app/pages/dashboard/overview/widgets/header-panels/SummaryPanel.vue
+++ b/src/app/pages/dashboard/overview/widgets/header-panels/SummaryPanel.vue
@@ -72,7 +72,7 @@ const element = computed(() => (props.to ? Link : 'div'));
   width: 100%;
   height: 100%;
   background: v-bind('theme.light.base');
-  transition: background var(--transition-m);
+  transition: background var(--transition-s);
 
   &.clickable:hover {
     background: v-bind('theme.light.dimmed');
diff --git a/src/app/pages/dashboard/overview/widgets/header-panels/SummaryPanelChart.vue b/src/app/pages/dashboard/overview/widgets/header-panels/SummaryPanelChart.vue
index df95a619..ca945f3a 100644
--- a/src/app/pages/dashboard/overview/widgets/header-panels/SummaryPanelChart.vue
+++ b/src/app/pages/dashboard/overview/widgets/header-panels/SummaryPanelChart.vue
@@ -5,9 +5,8 @@
 <script lang="ts" setup>
 import EChart from '@components/charts/echart/EChart.vue';
 import { ClassNames } from '@utils';
-import { GridComponentOption, LineSeriesOption } from 'echarts';
-import { LineChart } from 'echarts/charts';
-import { GridComponent } from 'echarts/components';
+import { GridComponentOption, GridComponent } from 'echarts/components';
+import { LineChart, LineSeriesOption } from 'echarts/charts';
 import * as echarts from 'echarts/core';
 import { SVGRenderer } from 'echarts/renderers';
 import { computed } from 'vue';
diff --git a/src/app/pages/dashboard/overview/widgets/header-panels/SummaryPanels.types.ts b/src/app/pages/dashboard/overview/widgets/header-panels/SummaryPanels.types.ts
new file mode 100644
index 00000000..886e3915
--- /dev/null
+++ b/src/app/pages/dashboard/overview/widgets/header-panels/SummaryPanels.types.ts
@@ -0,0 +1 @@
+export type HoveredPanel = 'income' | 'expenses';
diff --git a/src/app/pages/dashboard/overview/widgets/header-panels/SummaryPanels.vue b/src/app/pages/dashboard/overview/widgets/header-panels/SummaryPanels.vue
index 869069e4..07027079 100644
--- a/src/app/pages/dashboard/overview/widgets/header-panels/SummaryPanels.vue
+++ b/src/app/pages/dashboard/overview/widgets/header-panels/SummaryPanels.vue
@@ -6,6 +6,9 @@
       to="/income"
       :tooltip="t('page.dashboard.jumpToIncome', { year: state.activeYear })"
       :title="t('page.dashboard.income')"
+      @pointerenter="emit('hoveredPanel', 'income')"
+      @pointerleave="emit('hoveredPanel')"
+      @pointercancel="emit('hoveredPanel')"
     />
 
     <SummaryPanel
@@ -15,6 +18,9 @@
       :values="expenses"
       color="warning"
       :title="t('page.dashboard.expenses')"
+      @pointerenter="emit('hoveredPanel', 'expenses')"
+      @pointerleave="emit('hoveredPanel')"
+      @pointercancel="emit('hoveredPanel')"
     />
 
     <SummaryPanel
@@ -50,6 +56,11 @@ import { aggregate, ClassNames, subtract, sum } from '@utils';
 import { computed, ref, useCssModule } from 'vue';
 import { useI18n } from 'vue-i18n';
 import SummaryPanel from './SummaryPanel.vue';
+import { HoveredPanel } from '@app/pages/dashboard/overview/widgets/header-panels/SummaryPanels.types.ts';
+
+const emit = defineEmits<{
+  hoveredPanel: (panel?: HoveredPanel) => void;
+}>();
 
 const props = defineProps<{
   class?: ClassNames;
diff --git a/src/app/pages/dashboard/summary/Summary.vue b/src/app/pages/dashboard/summary/Summary.vue
index d15fc1a2..53fc8ff7 100644
--- a/src/app/pages/dashboard/summary/Summary.vue
+++ b/src/app/pages/dashboard/summary/Summary.vue
@@ -18,7 +18,7 @@ import { useDataStore } from '@store/state';
 import { totals } from '@store/state/utils/budgets';
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useMediaQuery } from '../../../../composables/useMediaQuery';
+import { useMediaQuery } from '@composables';
 import GroupsSummaryTable from './widgets/tables/GroupsSummaryTable.vue';
 import TotalsSummaryTable from './widgets/tables/TotalsSummaryTable.vue';