fix style heatmap, namedmap, piechart

togostanza · Jun 25, 2024 · 82d6a90 · 82d6a90
1 parent 803e9b6
commit 82d6a90
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 39 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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;
+      }
     }
   }
 }