Koala - Sankey chart add third column to account for consumers/counter in/out of HV

packages/modules/web_themes/koala/source/src/components/ChartCarousel.vue

@@ -23,7 +23,10 @@
     <template v-slot:control>
       <q-carousel-control position="bottom-left">
         <q-btn
-          v-if="currentSlide === 'history_chart'"
+          v-if="
+            currentSlide === 'history_chart' ||
+            (currentSlide === 'sankey_chart' && sankeyCompact)
+          "
           size="sm"
           push
           class="q-mr-sm legend-button-text"
@@ -54,6 +57,7 @@ import DailyTotals from './charts/dailyTotals/DailyTotals.vue';
 import SankeyChart from './charts/sankeyChart/SankeyChart.vue';
 import { useLocalDataStore } from 'src/stores/localData-store';
 import { useMqttStore } from 'src/stores/mqtt-store';
+import { useSankeyData } from './charts/sankeyChart/useSankeyData';
 
 const mqttStore = useMqttStore();
 
@@ -67,6 +71,7 @@ const toggleLegend = () => {
   localDataStore.toggleLegendVisibility();
 };
 const legendVisible = computed(() => localDataStore.legendVisible);
+const { compact: sankeyCompact } = useSankeyData();
 const fullscreen = ref(false);
 
 const carouselKey = computed(() =>

packages/modules/web_themes/koala/source/src/components/charts/sankeyChart/SankeyChart.vue

@@ -12,6 +12,19 @@
         Aktuell kein Energiefluss
       </div>
     </div>
+    <div
+      v-if="compact && showLegend && hasFlows"
+      class="legend-wrapper row wrap justify-center q-mt-sm"
+    >
+      <div
+        v-for="item in legendItems"
+        :key="item.id"
+        class="legend-item row items-center no-wrap text-caption"
+      >
+        <span class="legend-swatch" :style="{ backgroundColor: item.color }" />
+        {{ item.label }}
+      </div>
+    </div>
   </div>
 </template>
 
@@ -26,6 +39,7 @@ import type { SankeyDataPoint } from 'chartjs-chart-sankey';
 import { useSankeyData } from './useSankeyData';
 import { useSankeyHover } from './useSankeyHover';
 import { createFlowLabels } from './sankey-flow-labels';
+import { NODE_HOUSE, NODE_HOUSE_REST } from './energy-allocation';
 
 // A typed sankey component (like vue-chartjs's built-in Line/Bar) so the
 // `data`/`options` props are fixed to 'sankey' instead of the whole ChartType
@@ -43,11 +57,12 @@ const ChartjsSankey = createTypedChart('sankey', [
 
 defineOptions({ name: 'SankeyChart' });
 
-// Accepted for parity with the other carousel charts; not used here.
+// The legend is only shown in compact mode, where node names are hidden.
+// When chart has three columns.
 defineProps<{ showLegend?: boolean }>();
 
 const $q = useQuasar();
-const { allocation, colorForNode, labelColor } = useSankeyData();
+const { allocation, compact, colorForNode, labelColor } = useSankeyData();
 
 const hasFlows = computed(() => allocation.value.edges.length > 0);
 
@@ -78,38 +93,55 @@ const flowLabels = createFlowLabels({
 });
 const chartPlugins = [hoverPlugin, flowLabels.plugin];
 
+// Assign a per-column priority from node power.
+// Sources descending (largest on top).
+// Sinks ascending (largest on the bottom). When the household splits into a
+// third column it goes on top instead, level with its parts, so the split
+// does not have to cross the other sinks.
+// House parts descending, the remainder last.
+const nodePriority = computed(() => {
+  const { sources, sinks, houseParts } = allocation.value;
+  const houseSplit = houseParts.length > 0;
+  const priority: Record<string, number> = {};
+  [...sources]
+    .sort((a, b) => b.power - a.power)
+    .forEach((node, index) => {
+      priority[node.id] = index;
+    });
+  [...sinks]
+    .sort((a, b) => a.power - b.power)
+    .forEach((node, index) => {
+      priority[node.id] = houseSplit && node.id === NODE_HOUSE ? -1 : index;
+    });
+  [...houseParts]
+    .sort((a, b) =>
+      a.id === NODE_HOUSE_REST
+        ? 1
+        : b.id === NODE_HOUSE_REST
+          ? -1
+          : b.power - a.power,
+    )
+    .forEach((node, index) => {
+      priority[node.id] = index;
+    });
+  return priority;
+});
+
 const chartData = computed<ChartData<'sankey'>>(() => {
   // Reference the theme so a light/dark toggle rebuilds data and re-resolves
   // the CSS color variables.
   void $q.dark.isActive;
-
   // Reading the hover state here (rather than in the color callbacks, which
   // Chart.js calls later) is what makes this recompute on every hover change.
   const flowColor = focusColors();
-
-  const { edges, nodes, sources, sinks } = allocation.value;
+  const { edges, nodes } = allocation.value;
   const labels: Record<string, string> = {};
   const columns: Record<string, number> = {};
   for (const node of nodes) {
     labels[node.id] = node.label;
-    columns[node.id] = sources.some((source) => source.id === node.id) ? 0 : 1;
+    columns[node.id] = node.column;
   }
 
-  // Assign a per-column priority from node power.
-  // Sources descending (largest on top).
-  // Sinks ascending (largest on the bottom).
-  const priority: Record<string, number> = {};
-  [...sources]
-    .sort((a, b) => b.power - a.power)
-    .forEach((node, index) => {
-      priority[node.id] = index;
-    });
-  [...sinks]
-    .sort((a, b) => a.power - b.power)
-    .forEach((node, index) => {
-      priority[node.id] = index;
-    });
-
   const textColor = labelColor();
 
   return {
@@ -123,7 +155,7 @@ const chartData = computed<ChartData<'sankey'>>(() => {
         })),
         labels,
         column: columns,
-        priority,
+        priority: nodePriority.value,
         colorFrom: (ctx) =>
           flowColor(
             (ctx.raw as SankeyDataPoint | undefined)?.from ?? '',
@@ -137,14 +169,29 @@ const chartData = computed<ChartData<'sankey'>>(() => {
         colorMode: 'gradient',
         borderWidth: 0,
         color: textColor,
-        nodeLabels: { color: textColor },
+        nodeLabels: { color: textColor, display: !compact.value },
         nodeWidth: 16,
         nodePadding: 12,
       },
     ],
   };
 });
 
+const legendItems = computed(() => {
+  void $q.dark.isActive;
+  const priority = nodePriority.value;
+  return [...allocation.value.nodes]
+    .sort(
+      (a, b) =>
+        a.column - b.column || (priority[a.id] ?? 0) - (priority[b.id] ?? 0),
+    )
+    .map((node) => ({
+      id: node.id,
+      label: node.label,
+      color: colorForNode(node.id),
+    }));
+});
+
 const chartOptions = computed<ChartOptions<'sankey'>>(() => ({
   responsive: true,
   maintainAspectRatio: false,
@@ -184,6 +231,19 @@ const chartOptions = computed<ChartOptions<'sankey'>>(() => ({
   height: 100% !important;
 }
 
+.legend-wrapper {
+  flex: 0 0 auto;
+  gap: 2px 10px;
+}
+
+.legend-swatch {
+  width: 10px;
+  height: 10px;
+  border-radius: 2px;
+  margin-right: 4px;
+  flex: 0 0 auto;
+}
+
 .sankey-empty {
   height: 100%;
   display: flex;