From 4c97297fdf869be88dfd1b33f0a1f14a44c747c0 Mon Sep 17 00:00:00 2001
From: Jack Tregurtha <jacktregurtha@gmail.com>
Date: Fri, 13 Dec 2024 13:38:13 -0500
Subject: [PATCH] Enable showing segment labels only on hover

---
 src/core/config/index.js |  7 +++++++
 src/core/render/index.js | 21 ++++++++++++++++++++-
 src/index.d.ts           |  2 ++
 3 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/src/core/config/index.js b/src/core/config/index.js
index dd25d98..a864d99 100644
--- a/src/core/config/index.js
+++ b/src/core/config/index.js
@@ -33,6 +33,10 @@ export const DEFAULT_PROPS = {
   // custom segment labels
   customSegmentLabels: [],
 
+
+  // show custom segment labels only on hover
+  showSegmentLabelsOnlyOnHover: false,
+
   // color strings
   needleColor: 'steelblue',
   startColor: '#FF471A',
@@ -117,6 +121,9 @@ export const getConfig = ({ PROPS, parentWidth, parentHeight }) => {
     // custom segment labels
     customSegmentLabels: PROPS.customSegmentLabels,
 
+    // show custom segment labels only on hover
+    showSegmentLabelsOnlyOnHover: PROPS.showSegmentLabelsOnlyOnHover,
+
     // max segment labels
     maxSegmentLabels: calculateSegmentLabelCount({
       maxSegmentLabelCount: PROPS.maxSegmentLabels,
diff --git a/src/core/render/index.js b/src/core/render/index.js
index 4947e51..66d2798 100644
--- a/src/core/render/index.js
+++ b/src/core/render/index.js
@@ -219,7 +219,26 @@ function _renderCustomSegmentLabels({
 
   const position = outerRadius - (outerRadius - innerRadius) / 2
 
-  let lg = svg.append('g').attr('class', 'label').attr('transform', centerTx)
+  let lg;
+  if (config.showSegmentLabelsOnlyOnHover) {
+    lg = svg.append('g')
+      .attr('class', 'label custom-segment-labels')
+      .attr('transform', centerTx)
+      .style('opacity', 0) // Start with labels hidden
+
+    // Add hover events to the parent SVG
+    svg
+      .on('mouseenter', () => {
+        lg.style('opacity', 1)
+          .style('transition', 'opacity 0.2s ease-in-out')
+      })
+      .on('mouseleave', () => {
+        lg.style('opacity', 0)
+          .style('transition', 'opacity 0.2s ease-in-out')
+      })
+  } else {
+    lg = svg.append('g').attr('class', 'label').attr('transform', centerTx)
+  }
 
   lg.selectAll('text')
     .data(customSegmentLabels)
diff --git a/src/index.d.ts b/src/index.d.ts
index 7d3b6ec..c5bee71 100644
--- a/src/index.d.ts
+++ b/src/index.d.ts
@@ -82,6 +82,8 @@ declare module 'react-d3-speedometer' {
 
     customSegmentLabels?: CustomSegmentLabel[]
 
+    showSegmentLabelsOnlyOnHover?: boolean
+
     labelFontSize?: string
     valueTextFontSize?: string
     valueTextFontWeight?: string