From 82d6a904c2fe68bd63b78c05413d2ffe19c98377 Mon Sep 17 00:00:00 2001
From: Yukiko Noda <yukiko8318@gmail.com>
Date: Tue, 25 Jun 2024 14:33:02 +0900
Subject: [PATCH] fix style heatmap, namedmap, piechart

---
 stanzas/heatmap/style.scss   | 57 +++++++++++++++++++++---------------
 stanzas/named-map/index.ts   | 11 ++++++-
 stanzas/named-map/style.scss | 33 ++++++++++++++-------
 stanzas/piechart/index.ts    | 10 +++++++
 stanzas/piechart/style.scss  | 18 ++++++++----
 5 files changed, 90 insertions(+), 39 deletions(-)

diff --git a/stanzas/heatmap/style.scss b/stanzas/heatmap/style.scss
index 50e017d0..d01a3030 100644
--- a/stanzas/heatmap/style.scss
+++ b/stanzas/heatmap/style.scss
@@ -1,34 +1,45 @@
 // Load the repository-wide global style here. The actual file is located at ../common.scss for details.
 @use "@/common.scss";
 
-.domain,
-.tick {
-  color: #333;
-}
-.text {
-  font-family: var(--togostanza-fonts-font_family);
-  font-size: calc(var(--togostanza-fonts-font_size_primary) * 1px);
-}
-.x-axis-label .tick .text,
-.y-axis-label .tick .text {
-  font-size: calc(var(--togostanza-fonts-font_size_secondary) * 1px);
-}
+svg {
+  .domain,
+  .tick {
+    color: #333;
+  }
+  .text {
+    font-family: var(--togostanza-fonts-font_family);
+    font-size: calc(var(--togostanza-fonts-font_size_primary) * 1px);
+  }
+  .x-axis-label .tick .text,
+  .y-axis-label .tick .text {
+    font-size: calc(var(--togostanza-fonts-font_size_secondary) * 1px);
+  }
 
-rect {
-  stroke: var(--togostanza-border-color);
-  stroke-width: calc(var(--togostanza-border-width) * 1px);
+  rect {
+    stroke: var(--togostanza-border-color);
+    stroke-width: calc(var(--togostanza-border-width) * 1px);
 
-  &:hover {
-    cursor: pointer;
-  }
+    &:hover {
+      cursor: pointer;
+    }
+
+    &.-selected {
+      opacity: 1 !important;
+    }
 
-  &.-fadeout {
-    opacity: var(--togostanza-fadeout-opacity);
-    transition: var(--togostanza-fadeout-transition);
+    &.-fadeout {
+      opacity: var(--togostanza-fadeout-opacity);
+      transition: var(--togostanza-fadeout-transition);
+    }
   }
 
-  &.-selected {
-    opacity: 1;
+  :has(.-selected) {
+    rect {
+      opacity: var(--togostanza-fadeout-opacity);
+      &:hover {
+        opacity: 1;
+      }
+    }
   }
 }
 
diff --git a/stanzas/named-map/index.ts b/stanzas/named-map/index.ts
index b8182cf7..f85e9162 100644
--- a/stanzas/named-map/index.ts
+++ b/stanzas/named-map/index.ts
@@ -205,7 +205,16 @@ export default class regionGeographicMap extends MetaStanza {
           .attr("data-tooltip", (d) => d[tooltipKey])
           .attr("fill", (d) =>
             switchProperty(d) ? setColor(d[areaColorValue]) : "#555"
-          );
+        );
+
+        pathGroup.on("mouseenter", function () {
+          const node = select(this);
+          pathGroup.classed("-fadeout", true);
+          node.classed("-fadeout", false);
+        });
+        pathGroup.on("mouseleave", function () {
+          pathGroup.classed("-fadeout", false);
+        });
 
         // Add event listener
         pathGroup.on("click", (e, d) => {
diff --git a/stanzas/named-map/style.scss b/stanzas/named-map/style.scss
index 54b3eea2..511bdeaf 100644
--- a/stanzas/named-map/style.scss
+++ b/stanzas/named-map/style.scss
@@ -2,20 +2,33 @@
 
 svg {
   padding: var(--togostanza-canvas-padding);
-}
 
-.path {
-  vector-effect: non-scaling-stroke;
-  stroke-width: calc(var(--togostanza-border-width) * 1px);
-  stroke: var(--togostanza-border-color);
+  .path {
+    vector-effect: non-scaling-stroke;
+    stroke-width: calc(var(--togostanza-border-width) * 1px);
+    stroke: var(--togostanza-border-color);
+
+    &:hover {
+      cursor: pointer;
+    }
+
+    &.-fadeout {
+      opacity: var(--togostanza-fadeout-opacity);
+      transition: var(--togostanza-fadeout-transition);
+    }
 
-  &:hover {
-    cursor: pointer;
+    &.-selected {
+      opacity: 1 !important;
+    }
   }
 
-  &.-selected {
-    stroke-width: 2px;
-    stroke: var(--togostanza-theme-selected_border_color);
+  :has(.-selected) {
+    .path {
+      opacity: var(--togostanza-fadeout-opacity);
+      &:hover {
+        opacity: 1;
+      }
+    }
   }
 }
 
diff --git a/stanzas/piechart/index.ts b/stanzas/piechart/index.ts
index c9d0ac86..20fa9b91 100644
--- a/stanzas/piechart/index.ts
+++ b/stanzas/piechart/index.ts
@@ -96,6 +96,16 @@ export default class Piechart extends MetaStanza {
         .attr("d", <any>arcGenerator)
         .attr("fill", (d) => d.data[colorSym]);
 
+
+        pieGroups.on("mouseenter", function () {
+          const node = select(this);
+          pieGroups.classed("-fadeout", true);
+          node.classed("-fadeout", false);
+        });
+        pieGroups.on("mouseleave", function () {
+          pieGroups.classed("-fadeout", false);
+        });
+
       pieGroups.on("click", (_, d) => {
         toggleSelectIds({
           selectedIds: this.selectedIds,
diff --git a/stanzas/piechart/style.scss b/stanzas/piechart/style.scss
index 622767ca..f6fd9a19 100644
--- a/stanzas/piechart/style.scss
+++ b/stanzas/piechart/style.scss
@@ -9,18 +9,26 @@ svg {
     stroke: var(--togostanza-border-color);
     stroke-width: 0.5px;
 
+    &:hover {
+      cursor: pointer;
+    }
+
     &.-fadeout {
       opacity: var(--togostanza-fadeout-opacity);
       transition: var(--togostanza-fadeout-transition);
     }
 
-    &:hover {
-      cursor: pointer;
+    &.-selected {
+      opacity: 1 !important;
     }
+  }
 
-    &.-selected {
-      stroke-width: 2px;
-      stroke: var(--togostanza-theme-selected_border_color);
+  :has(.-selected) {
+    path {
+      opacity: var(--togostanza-fadeout-opacity);
+      &:hover {
+        opacity: 1;
+      }
     }
   }
 }