From 346339a365ef8b8bbeccfca1e1dcdbf0f1622b49 Mon Sep 17 00:00:00 2001
From: Claus Hagen <cshagen@hagens.ch>
Date: Sat, 28 Mar 2026 12:20:40 +0100
Subject: [PATCH 1/3] fix popups in powergraph

---
 .../colors/source/src/assets/css/style.css    |  4 ---
 .../components/powerGraph/PgToolTipItem.vue   | 11 +++++++-
 .../components/powerGraph/PgToolTipLine.vue   |  2 +-
 .../src/components/powerGraph/PgToolTips.vue  | 27 ++++++++++++++-----
 4 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/packages/modules/web_themes/colors/source/src/assets/css/style.css b/packages/modules/web_themes/colors/source/src/assets/css/style.css
index 5b975bbda9..79fcac965e 100644
--- a/packages/modules/web_themes/colors/source/src/assets/css/style.css
+++ b/packages/modules/web_themes/colors/source/src/assets/css/style.css
@@ -416,7 +416,3 @@ swiper-slide {
 option {
 	color: blue;
 }
-.ttarea .ttmessage {visibility: hidden}
-.ttarea:hover  .ttmessage {
-    visibility: visible;
-}
diff --git a/packages/modules/web_themes/colors/source/src/components/powerGraph/PgToolTipItem.vue b/packages/modules/web_themes/colors/source/src/components/powerGraph/PgToolTipItem.vue
index 35cd62af45..230de40b59 100755
--- a/packages/modules/web_themes/colors/source/src/components/powerGraph/PgToolTipItem.vue
+++ b/packages/modules/web_themes/colors/source/src/components/powerGraph/PgToolTipItem.vue
@@ -7,7 +7,9 @@
 			fill="var(--color-bg)"
 			opacity="90%"
 			stroke="var(--color-menu)"
+			stroke-width="1"
 		/>
+
 		<text
 			text-anchor="start"
 			x="5"
@@ -133,7 +135,14 @@ const props = defineProps<{
 //	return Object.values(props.entry).filter((v) => v > 0).length
 //}
 function height() {
-	return Object.values(props.entry).filter((v) => v > 0).length * 18 + 40
+	return (
+		Object.entries(props.entry).filter(
+			([k, v]) =>
+				k != 'selfUsage' && !k.startsWith('soc') && v != null && v > 0,
+		).length *
+			20 +
+		2
+	)
 }
 function pvs() {
 	return Object.entries(props.entry)
diff --git a/packages/modules/web_themes/colors/source/src/components/powerGraph/PgToolTipLine.vue b/packages/modules/web_themes/colors/source/src/components/powerGraph/PgToolTipLine.vue
index c731c4efa7..69e619ecde 100755
--- a/packages/modules/web_themes/colors/source/src/components/powerGraph/PgToolTipLine.vue
+++ b/packages/modules/web_themes/colors/source/src/components/powerGraph/PgToolTipLine.vue
@@ -8,7 +8,7 @@
 	>
 		{{ name ? name : masterData[cat].icon }} &nbsp;
 	</tspan>
-	<tspan text-anchor="end" :x="width - indent">
+	<tspan text-anchor="end" :x="width - 5">
 		<FormatWatt v-if="cat != 'price' && props.power > 0" :watt="power * 1000" />
 		<tspan v-if="cat === 'price'">{{ formatPrice(props.power) }}</tspan>
 	</tspan>
diff --git a/packages/modules/web_themes/colors/source/src/components/powerGraph/PgToolTips.vue b/packages/modules/web_themes/colors/source/src/components/powerGraph/PgToolTips.vue
index dcd3274368..3e38e46007 100755
--- a/packages/modules/web_themes/colors/source/src/components/powerGraph/PgToolTips.vue
+++ b/packages/modules/web_themes/colors/source/src/components/powerGraph/PgToolTips.vue
@@ -4,7 +4,20 @@
 		:origin="autozoom"
 		:transform="'translate(' + margin.left + ',' + margin.top + ')'"
 	>
-		<g v-for="d in data" :key="d.date" class="ttarea">
+		<g v-for="d in data" :key="d.date" class="ttitems">
+			<PgToolTipItem
+				v-if="popupToShow == d.date"
+				:entry="d"
+				:boxwidth="boxwidth"
+				:x-scale="xScale2"
+			></PgToolTipItem>
+		</g>
+		<g
+			v-for="d in data"
+			:key="d.date"
+			class="ttarea"
+			@mouseleave="popupToShow = 0"
+		>
 			<rect
 				:x="xScale(d.date)"
 				y="0"
@@ -13,18 +26,14 @@
 				:width="graphData.data.length > 0 ? width / graphData.data.length : 0"
 				opacity="1%"
 				fill="var(--color-charging)"
+				@mouseover="showPopup(d.date)"
 			></rect>
-			<PgToolTipItem
-				:entry="d"
-				:boxwidth="boxwidth"
-				:x-scale="xScale2"
-			></PgToolTipItem>
 		</g>
 	</g>
 </template>
 <script setup lang="ts">
 import { extent, scaleTime, scaleUtc, select } from 'd3'
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { graphData, zoomedRange, type GraphDataItem } from './model'
 import PgToolTipItem from './PgToolTipItem.vue'
 
@@ -35,6 +44,7 @@ const props = defineProps<{
 	data: GraphDataItem[]
 }>()
 const boxwidth = 140
+const popupToShow = ref(0)
 const xScale = computed(() => {
 	const e = extent(props.data, (d) => new Date(d.date))
 	if (e[0] && e[1]) {
@@ -73,5 +83,8 @@ const autozoom = computed(() => {
 	}
 	return 'PgToolTips.vue:autozoom'
 })
+function showPopup(d: number) {
+	popupToShow.value = d
+}
 </script>
 <style scoped></style>

From 67e524792083b11c196a4b9693867d1db088aa75 Mon Sep 17 00:00:00 2001
From: Claus Hagen <cshagen@hagens.ch>
Date: Sat, 28 Mar 2026 12:38:13 +0100
Subject: [PATCH 2/3] undo css modification

---
 .../modules/web_themes/colors/source/src/assets/css/style.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/modules/web_themes/colors/source/src/assets/css/style.css b/packages/modules/web_themes/colors/source/src/assets/css/style.css
index 79fcac965e..e9bc7fd0ee 100644
--- a/packages/modules/web_themes/colors/source/src/assets/css/style.css
+++ b/packages/modules/web_themes/colors/source/src/assets/css/style.css
@@ -416,3 +416,7 @@ swiper-slide {
 option {
 	color: blue;
 }
+.ttarea .ttmessage {visibility: hidden;}
+.ttarea:hover  .ttmessage {
+    visibility: visible;
+}

From 4ca7a60fa098b25120e67e3b47434a878e583e99 Mon Sep 17 00:00:00 2001
From: Claus Hagen <cshagen@hagens.ch>
Date: Sat, 28 Mar 2026 12:53:03 +0100
Subject: [PATCH 3/3] correct pirce display in popup

---
 .../src/components/powerGraph/PgToolTipItem.vue       | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/packages/modules/web_themes/colors/source/src/components/powerGraph/PgToolTipItem.vue b/packages/modules/web_themes/colors/source/src/components/powerGraph/PgToolTipItem.vue
index 230de40b59..4dd4b933da 100755
--- a/packages/modules/web_themes/colors/source/src/components/powerGraph/PgToolTipItem.vue
+++ b/packages/modules/web_themes/colors/source/src/components/powerGraph/PgToolTipItem.vue
@@ -107,7 +107,7 @@
 				:width="boxwidth"
 			/>
 			<PgToolTipLine
-				v-if="globalConfig.showPrices"
+				v-if="etData.active"
 				cat="price"
 				:indent="5"
 				:power="entry.price"
@@ -122,7 +122,7 @@
 import type { ScaleTime } from 'd3'
 import { timeFormat } from 'd3'
 import { itemNames, type GraphDataItem } from './model'
-import { globalConfig } from '@/assets/js/themeConfig'
+import { etData } from '@/components/priceChart/model'
 import PgToolTipLine from './PgToolTipLine.vue'
 
 const props = defineProps<{
@@ -131,17 +131,12 @@ const props = defineProps<{
 	xScale: ScaleTime<number, number>
 }>()
 
-//function linecount() {
-//	return Object.values(props.entry).filter((v) => v > 0).length
-//}
 function height() {
 	return (
 		Object.entries(props.entry).filter(
 			([k, v]) =>
 				k != 'selfUsage' && !k.startsWith('soc') && v != null && v > 0,
-		).length *
-			20 +
-		2
+		).length * 20 + 2
 	)
 }
 function pvs() {