From 13b5231b9c346cb664843863a6e75c69d5555a2d Mon Sep 17 00:00:00 2001
From: Adrenesis <adrenesis@gmail.com>
Date: Fri, 2 Oct 2020 12:08:52 +0200
Subject: [PATCH] Add an area to tell which side is aimed by the crusor

---
 flaskr/static/js/plots/sorted_emissions_inequality.js | 31 ++++++++++++++++++++++++++-----
 1 file changed, 26 insertions(+), 5 deletions(-)

diff --git a/flaskr/static/js/plots/sorted_emissions_inequality.js b/flaskr/static/js/plots/sorted_emissions_inequality.js
index 8ae1fb0..c128bf9 100644
--- a/flaskr/static/js/plots/sorted_emissions_inequality.js
+++ b/flaskr/static/js/plots/sorted_emissions_inequality.js
@@ -78,7 +78,7 @@ function draw_sorted_emissions_inequality(containerSelector, csvUrl) {
 
     }
 
-    function refreshCursorBoxes(event, xScale, yScale, barSettings, vertical, horizontal, tooltip) {
+    function refreshCursorBoxes(event, xScale, yScale, barSettings, vertical, horizontal, tooltip, selectedArea) {
         const x = d3.pointer(event)[0];
         const y = d3.pointer(event)[1];
         // var y = d3.event.pageY - document.getElementById(<id-of-your-svg>).getBoundingClientRect().y + 10
@@ -100,11 +100,13 @@ function draw_sorted_emissions_inequality(containerSelector, csvUrl) {
     ) {
             vertical.style("display", "none");
             horizontal.style("display", "none");
+            selectedArea.style("display", "none");
             tooltip.style("display", "none");
         }
         else {
             vertical.style("display", "inherit");
             horizontal.style("display", "inherit");
+            selectedArea.style("display", "inherit");
             tooltip.style("display", "inherit");
             let sliceCollision = getSliceCollision(xInGraph, yInGraph, barSettings);
             // console.log(sliceCollision);
@@ -112,7 +114,10 @@ function draw_sorted_emissions_inequality(containerSelector, csvUrl) {
                 if (sliceCollision.isXDriving) {
                     vertical.style("left", x + "px");
                     horizontal.style("top", yScale(sliceCollision.otherAxisLevel) + margin.top + "px");
-
+                    selectedArea.style("top", yScale(sliceCollision.otherAxisLevel) + margin.top + "px");
+                    selectedArea.style("height", yScale(0)  - yScale(sliceCollision.otherAxisLevel) + "px");
+                    selectedArea.style("left", xScale(0) + margin.left + "px");
+                    selectedArea.style("width", x - margin.left - xScale(0) + "px");
                     tooltip.text(
                         Math.round(xInGraph) +
                         "% of 🖘 attendees emitted " +
@@ -122,7 +127,10 @@ function draw_sorted_emissions_inequality(containerSelector, csvUrl) {
                 } else {
                     horizontal.style("top", y + "px");
                     vertical.style("left", xScale(sliceCollision.otherAxisLevel) + margin.left + "px");
-
+                    selectedArea.style("top", margin.top + "px");
+                    selectedArea.style("height", y - margin.top + "px");
+                    selectedArea.style("left", xScale(sliceCollision.otherAxisLevel) + margin.left + "px");
+                    selectedArea.style("width", xScale(100) - (xScale(sliceCollision.otherAxisLevel)) + "px");
                     tooltip.text(
                         Math.round(100.0 - sliceCollision.otherAxisLevel) +
                         "% of 🖙 attendees emitted " +
@@ -180,12 +188,25 @@ function draw_sorted_emissions_inequality(containerSelector, csvUrl) {
             .style("border", "1px solid grey")
             .style("background", "rgba(255, 255, 255, 0.7)");
 
+        let selectedArea = d3.select(containerSelector)
+            .append("div")
+            .attr("class", "no-pointer-events")
+            .style("display", "none")
+            .style("position", "absolute")
+            .style("z-index", "-50")
+            .style("width", "0px")
+            .style("height", (height) + "px")
+            .style("top", (margin.top) + "px")
+            .style("bottom", "30px")
+            .style("left", "0px")
+            .style("background", "rgba(60, 200, 60, 0.3)");
+
         d3.select(containerSelector)
             .on("mousemove", function (event) {
-                refreshCursorBoxes(event, xScale, yScale, barSettings, vertical, horizontal, tooltip);
+                refreshCursorBoxes(event, xScale, yScale, barSettings, vertical, horizontal, tooltip, selectedArea);
             })
             .on("mouseover", function (event) {
-                refreshCursorBoxes(event, xScale, yScale, barSettings, vertical, horizontal, tooltip);
+                refreshCursorBoxes(event, xScale, yScale, barSettings, vertical, horizontal, tooltip, selectedArea);
             });
     }
 
--
libgit2 0.21.2