diff --git a/src/disagg/DisaggGraphView.js b/src/disagg/DisaggGraphView.js index a50a9cac467066af78a62d1be5233396d069db98..43427b4d6786c8e294cb066bda69bfbb6a9e5f94 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 4205d25d713b8be2ce245a3194c6265a2f3dcfaf..caf6ea38c1bd9dcd6daeb3fb0dfea241f43689b7 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;