From cc4f9f14c9f617ac096946040c6e850df25b726b Mon Sep 17 00:00:00 2001
From: yooian <yooian03@gmail.com>
Date: Sat, 2 Nov 2024 04:14:22 -0700
Subject: [PATCH 1/2] Add tooltip popup on hover for pie chart

---
 app/views/_pie.html.erb    | 114 +++++++++++++++++++++++++------------
 app/views/_styles.html.erb |  15 +++++
 2 files changed, 92 insertions(+), 37 deletions(-)

diff --git a/app/views/_pie.html.erb b/app/views/_pie.html.erb
index c19e634..ce8182c 100644
--- a/app/views/_pie.html.erb
+++ b/app/views/_pie.html.erb
@@ -5,13 +5,17 @@
             <%- arc_y = 150 %>
             <%- cumulative_percent = 0 %>
             <%- cumulative_angle = -180 %>
+
             <%# Calculate arc coordinates to draw each slice %>
             <%- data.each_with_index do |object, index| %>
                 <%- cumulative_percent += object[:percent_value] %>
-                <path class="pie-slice" id="pie-slice-<%= index %>" d="M 150 150 L <%= arc_x %> <%= arc_y %> A 125 125 0 
-                    <%= object[:percent_value] > 0.5 ? 1 : 0 %> 1
-                    <%= 150 - 125 * Math.cos(2 * Math::PI * cumulative_percent) %> 
-                    <%= 150 - 125 * Math.sin(2 * Math::PI * cumulative_percent) %> Z" 
+                <path 
+                class="pie-slice" 
+                id="pie-slice-<%= index %>" 
+                d="M 150 150 L <%= arc_x %> <%= arc_y %> A 125 125 0 
+                                <%= object[:percent_value] > 0.5 ? 1 : 0 %> 1
+                                <%= 150 - 125 * Math.cos(2 * Math::PI * cumulative_percent) %> 
+                                <%= 150 - 125 * Math.sin(2 * Math::PI * cumulative_percent) %> Z" 
                 stroke="<%= object[:is_negative] == 1 ? object[:color] : 'White' %>" 
                 stroke-dasharray= '<%= object[:is_negative] == 1 ? 30 : 0 %>'
                 fill="<%= object[:is_negative] == 1 ? 'White' : object[:color] %>"
@@ -28,6 +32,27 @@
                     transform='rotate(<%= cumulative_angle %>, 150, 150)'/>
                 <%- cumulative_angle += 360 * object[:percent_value] %>
             <% end %>
+
+            <%# This generates the svg tooltips on top of the pie slices %> 
+            <%- data.each_with_index do |object, index| %>
+                <%- cumulative_percent += object[:percent_value] %>
+                <%- arc_x = 150 - 125 * Math.cos(2 * Math::PI * cumulative_percent) %>
+                <%- arc_y = 150 - 125 * Math.sin(2 * Math::PI * cumulative_percent) %>
+                
+                <%# Tooltip for each pie slice %>
+                <text class="pie-slice-tooltip" 
+                        id="pie-slice-tooltip-<%= index %>" 
+                        x="<%= arc_x * 0.5 %>" 
+                        y="<%= arc_y %>" 
+                        visibility="hidden"
+                        stroke="#000000;"
+                        stroke-width="1px;">
+                    <tspan style="fill: black;"><%= object[:name] %>:</tspan>
+                    <tspan style="fill: black;"><%= object[:value] %></tspan>
+                </text>
+
+                <%- cumulative_angle += 360 * object[:percent_value] %>
+            <% end %>
         </svg>
         <%# Pie chart key %>
         <div class="pie-key-flex-container">
@@ -42,43 +67,58 @@
 </div>
 
 <style>
-<%# Styling for hover effects between chart and key %>
+<%# Styling for tooltips %>
 <%- data.each_with_index do |object, index| %>
-.pie-flex-container:has(#pie-slice-<%= index %>:hover) #pie-key-circle-<%= index %> {
-    stroke: <%= object[:color] %>;
-    r: 5%;
-	fill-opacity: 0.5;
-	transition: 0.05s all ease;
-}
-.pie-flex-container:has(#pie-slice-<%= index %>:hover) #pie-key-text-<%= index %> {
-    fill: <%= object[:color] %>;
-	transform: translateX(2.5%);
-	transition: 0.2s all ease;
-}
-.pie-flex-container:has(#pie-key-<%= index %>:hover) #pie-slice-<%= index %> {
-    fill-opacity: 0.8;
-	transform: translateX(0.1%);
-	transition: 0.25s all ease;
-}
-.pie-flex-container:has(#pie-key-<%= index %>:hover) #pie-slice-arc-<%= index %> {
-    fill-opacity: 0.8;
-	stroke-opacity: 0.3;
-	transition: 0.05s all ease;
-}
+    .pie-flex-container:has(#pie-slice-<%= index %>:hover) #pie-slice-tooltip-<%= index %> {
+        visibility: visible; /* Show tooltip on hover */
+	    opacity: 1; /* Fade in */
+        transform: translateY(-50%);
+        transition: 0.25s all ease;
+    }
+<% end %>
 
-#pie-key-<%= index %>:hover #pie-key-circle-<%= index %> {
-	stroke: <%= object[:color] %>;
-    r: 5%;
-	fill-opacity: 0.5;
-	transition: 0.05s all ease;
-}
+<%# Styling for hover effects between chart and key %>
+<%- data.each_with_index do |object, index| %>
+    .pie-flex-container:has(#pie-slice-<%= index %>:hover) #pie-key-circle-<%= index %> {
+        stroke: <%= object[:color] %>;
+        r: 5%;
+        fill-opacity: 0.5;
+        transition: 0.05s all ease;
+    }
+    .pie-flex-container:has(#pie-slice-<%= index %>:hover) #pie-key-text-<%= index %> {
+        fill: <%= object[:color] %>;
+        transform: translateX(2.5%);
+        transition: 0.2s all ease;
+    }
+    .pie-flex-container:has(#pie-key-<%= index %>:hover) #pie-slice-<%= index %> {
+        fill-opacity: 0.8;
+        transform: translateX(0.1%);
+        transition: 0.25s all ease;
+    }
+    .pie-flex-container:has(#pie-key-<%= index %>:hover) #pie-slice-arc-<%= index %> {
+        fill-opacity: 0.8;
+        stroke-opacity: 0.3;
+        transition: 0.05s all ease;
+    }
+    .pie-flex-container:has(#pie-key-<%= index %>:hover) #pie-slice-tooltip-<%= index %> {
+        visibility: visible; /* Show tooltip on hover */
+	    opacity: 1; /* Fade in */
+        transform: translateY(-50%);
+        transition: 0.25s all ease;
+    }
 
-#pie-key-<%= index %>:hover #pie-key-text-<%= index %> {
-    fill: <%= object[:color] %>;
-	transform: translateX(2.5%);
-	transition: 0.2s all ease;
-}
+    #pie-key-<%= index %>:hover #pie-key-circle-<%= index %> {
+        stroke: <%= object[:color] %>;
+        r: 5%;
+        fill-opacity: 0.5;
+        transition: 0.05s all ease;
+    }
 
+    #pie-key-<%= index %>:hover #pie-key-text-<%= index %> {
+        fill: <%= object[:color] %>;
+        transform: translateX(2.5%);
+        transition: 0.2s all ease;
+    }
 <% end %>
 
 </style>
diff --git a/app/views/_styles.html.erb b/app/views/_styles.html.erb
index 51abe6c..f81b704 100644
--- a/app/views/_styles.html.erb
+++ b/app/views/_styles.html.erb
@@ -156,6 +156,21 @@ h4.purechart {
 	min-height: 15px;
 }
 
+.pie-slice-tooltip {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+
+	padding: 8px;
+
+	background-color: #fff;
+	border-radius: 8px;
+	box-shadow: rgba(0, 0, 0, 0.25) 0px 10px 36px 0px, rgba(0, 0, 0, 0.15) 0px 0px 0px 1px;
+
+	opacity: 0;
+}
+
+
 .bar-chart-bar {
 	height: 16px;
 }

From 34deb4aa376800a25d6e7ee1af63dbc439a2c7e3 Mon Sep 17 00:00:00 2001
From: yooian <yooian03@gmail.com>
Date: Sat, 2 Nov 2024 04:50:29 -0700
Subject: [PATCH 2/2] Add white tooltip background and text color

---
 app/views/_pie.html.erb | 43 ++++++++++++++++++++++++++++++++---------
 1 file changed, 34 insertions(+), 9 deletions(-)

diff --git a/app/views/_pie.html.erb b/app/views/_pie.html.erb
index ce8182c..5138924 100644
--- a/app/views/_pie.html.erb
+++ b/app/views/_pie.html.erb
@@ -39,16 +39,29 @@
                 <%- arc_x = 150 - 125 * Math.cos(2 * Math::PI * cumulative_percent) %>
                 <%- arc_y = 150 - 125 * Math.sin(2 * Math::PI * cumulative_percent) %>
                 
+                <%# Background rectangle for the tooltip %>
+                <%# x - 5 is padding before the text, y - 15 is half the height, width + 1 is padding, *8px per char, +5 is for the x padding %>
+                <rect class="pie-slice-rect"
+                    id="pie-slice-rect-<%= index %>"
+                    x="<%= arc_x * 0.5 - 5%>"
+                    y="<%= arc_y - 15 %>"
+                    width="<%= (object[:name].length + object[:value].to_s.length + 1) * 8 + 5 %>" 
+                    height="30" 
+                    fill="white"
+                    stroke="gray"
+                    stroke-opacity="40%"
+                    stroke-width="1px"
+                    rx="5" ry="5" 
+                    visibility="hidden"
+                    pointer-events="none"/>
+
                 <%# Tooltip for each pie slice %>
                 <text class="pie-slice-tooltip" 
                         id="pie-slice-tooltip-<%= index %>" 
                         x="<%= arc_x * 0.5 %>" 
-                        y="<%= arc_y %>" 
-                        visibility="hidden"
-                        stroke="#000000;"
-                        stroke-width="1px;">
-                    <tspan style="fill: black;"><%= object[:name] %>:</tspan>
-                    <tspan style="fill: black;"><%= object[:value] %></tspan>
+                        y="<%= arc_y %>">
+                    <tspan style="fill: <%= object[:color] %>;" pointer-events="none"><%= object[:name] %>:</tspan>
+                    <tspan style="fill: black;" pointer-events="none"><%= object[:value] %></tspan>
                 </text>
 
                 <%- cumulative_angle += 360 * object[:percent_value] %>
@@ -70,11 +83,17 @@
 <%# Styling for tooltips %>
 <%- data.each_with_index do |object, index| %>
     .pie-flex-container:has(#pie-slice-<%= index %>:hover) #pie-slice-tooltip-<%= index %> {
-        visibility: visible; /* Show tooltip on hover */
+        visibility: visible;
 	    opacity: 1; /* Fade in */
         transform: translateY(-50%);
         transition: 0.25s all ease;
     }
+    .pie-flex-container:has(#pie-slice-<%= index %>:hover) #pie-slice-rect-<%= index %> {
+        visibility: visible;
+	    opacity: 1;
+        transform: translateY(-5%);
+        transition: 0.25s all ease;
+    }
 <% end %>
 
 <%# Styling for hover effects between chart and key %>
@@ -101,11 +120,17 @@
         transition: 0.05s all ease;
     }
     .pie-flex-container:has(#pie-key-<%= index %>:hover) #pie-slice-tooltip-<%= index %> {
-        visibility: visible; /* Show tooltip on hover */
-	    opacity: 1; /* Fade in */
+        visibility: visible;
+	    opacity: 1;
         transform: translateY(-50%);
         transition: 0.25s all ease;
     }
+    .pie-flex-container:has(#pie-key-<%= index %>:hover) #pie-slice-rect-<%= index %> {
+        visibility: visible;
+	    opacity: 1;
+        transform: translateY(-5%);
+        transition: 0.25s all ease;
+    }
 
     #pie-key-<%= index %>:hover #pie-key-circle-<%= index %> {
         stroke: <%= object[:color] %>;