From e5b893a9bdcbe623abdf50a85719362902b18b1d Mon Sep 17 00:00:00 2001
From: bclayton-usgs <bclayton@usgs.gov>
Date: Tue, 8 Sep 2020 08:48:07 -0600
Subject: [PATCH] add toltips

---
 src/disagg/DisaggGraphView.js | 63 ++++++++++++++++++++++++++++++++++-
 styles/_DisaggGraphView.scss  | 11 ++++++
 2 files changed, 73 insertions(+), 1 deletion(-)

diff --git a/src/disagg/DisaggGraphView.js b/src/disagg/DisaggGraphView.js
index a50a9ca..43427b4 100644
--- a/src/disagg/DisaggGraphView.js
+++ b/src/disagg/DisaggGraphView.js
@@ -2,6 +2,7 @@
 
 var Collection = require('../mvc/Collection'),
   d3 = require('d3'),
+  ClassList = require('../d3/util/ClassList'),
   D33dAxis = require('../d3/3d/D33dAxis'),
   D33dDisaggBin = require('./D33dDisaggBin'),
   D33dPath = require('../d3/3d/D33dPath'),
@@ -99,7 +100,7 @@ __calculateBounds = function (bindata) {
  *        selected Disaggregation object is displayed.
  */
 var DisaggGraphView = function (options) {
-  var _this, _initialize;
+  var _this, _initialize, _onPointOver, _onPointOut;
 
   _this = SelectedCollectionView(options);
 
@@ -574,6 +575,9 @@ var DisaggGraphView = function (options) {
           zScale: _this.zScale,
           εbins: εbins,
         });
+        d3.select(view.el)
+          .on('mouseover', () => _onPointOver(view, bin))
+          .on('mouseout', _onPointOut);
         _this.bins.push(view);
       });
     }
@@ -594,6 +598,63 @@ var DisaggGraphView = function (options) {
     oldBins = null;
   };
 
+  _onPointOver = function (disaggBinView, bin) {
+    var εbin = parseFloat(d3.event.target.parentNode.getAttribute('data-bin-index'));
+    var value = bin.εdata.find((data) => data.εbin === εbin).value;
+
+    var view = disaggBinView
+      .getData()
+      .items.find((view) => parseFloat(view.el.getAttribute('data-bin-index')) === εbin);
+    var coords = view.items[0].coords[0];
+    coords = _this.d33d.project(coords);
+
+    var path = d3.event.target;
+    ClassList.polyfill(path);
+    path.classList.add('mouseover');
+
+    _this.d33d.showTooltip(coords, [
+      {
+        class: 'title',
+        text: `Component: ${_this.model.get('component')}`,
+      },
+      [
+        { class: 'label', text: 'r: ' },
+        { class: 'value', text: `${bin.r} km` },
+      ],
+      [
+        { class: 'label', text: 'rBar: ' },
+        { class: 'value', text: bin.rBar },
+      ],
+      [
+        { class: 'label', text: 'm: ' },
+        { class: 'value', text: bin.m },
+      ],
+      [
+        { class: 'label', text: 'mBar: ' },
+        { class: 'value', text: bin.mBar },
+      ],
+      [
+        { class: 'label', text: 'εBar: ' },
+        { class: 'value', text: bin.εBar },
+      ],
+      [
+        { class: 'label', text: 'εbin: ' },
+        { class: 'value', text: εbin },
+      ],
+      [
+        { class: 'label', text: 'Value: ' },
+        { class: 'value', text: value.toExponential(4) },
+      ],
+    ]);
+  };
+
+  _onPointOut = function () {
+    var path = d3.event.target;
+    ClassList.polyfill(path);
+    path.classList.remove('mouseover');
+    _this.d33d.showTooltip(null, null);
+  };
+
   /**
    * Custom legend rendering function for wrapped D33dView.
    *
diff --git a/styles/_DisaggGraphView.scss b/styles/_DisaggGraphView.scss
index 4205d25..caf6ea3 100644
--- a/styles/_DisaggGraphView.scss
+++ b/styles/_DisaggGraphView.scss
@@ -1,4 +1,15 @@
 .DisaggGraphView {
+  .tooltip-content {
+    .title {
+      font-size: 12px;
+    }
+
+    .label,
+    .value {
+      font-size: 10px;
+    }
+  }
+
   .axis {
     path {
       stroke: #999;
-- 
GitLab