✨ global tooltip that follows mouse

app/index.html

@@ -201,6 +201,6 @@
   ga('send', 'pageview');
 </script>
 -->
-
+  <div class="global-tooltip"></div>
 </body>
 </html>

app/react-components/charts/BarChart.js

@@ -0,0 +1,104 @@
+// Vender
+import React from 'react';
+import * as d3 from 'd3';
+import ReactFauxDOM from 'react-faux-dom';
+import { compose, withState, pure } from 'recompose';
+
+// Custom
+import './style.css';
+let BarChart = (() => {
+  return ({ data, yAxis, styles, chart, setState }) => {
+    const el = ReactFauxDOM.createElement('div')
+
+    const margin = {top: 30, right: 50, bottom: 55, left: 30};
+    const bandWidth = 36;
+    const width = Object.keys(data).length * bandWidth + margin.left + margin.right;
+    const height = 200 - margin.top - margin.bottom;
+
+    const x = d3.scaleBand()
+    .domain(data.map(d => d.label))
+    .rangeRound([0, width])
+    .paddingInner(0.3)
+    .paddingOuter(0.5);
+
+    const y = d3.scaleLinear()
+    .range([height, 0])
+    .domain([0, d3.max(data, d => d.value)]);
+
+    const svg = d3.select(el)
+    .append("svg")
+      .attr("width", width + margin.left + margin.right)
+      .attr("height", height + margin.top + margin.bottom)
+    .append("g", "chart")
+      .attr("fill", "#fff")
+      .attr("transform",
+          "translate(" + margin.left + "," + margin.top + ")");
+
+    const yG = svg.append("g")
+      .call(d3.axisLeft(y)
+            .ticks(2)
+            .tickSize(-(width))
+            .tickSizeOuter(0)
+           );
+    yG.selectAll("path")
+    .style("stroke", "none");
+    yG.selectAll("line")
+    .style("stroke", (styles.yAxis || {stroke: 'black'}).stroke)
+    yG.selectAll("text")
+    .style("fill", (styles.yAxis || {textFill: 'black'}).textFill)
+
+    svg.append("text")
+      .attr("transform", "rotate(-90)")
+      .attr("y", 0 - margin.left)
+      .attr("x",0 - (height / 2))
+      .attr("dy", "1em")
+      .style("text-anchor", "middle")
+      .style("fontSize", "1rem")
+      .style("fontWeight", "300")
+      .attr("fill", (styles.yAxis || { textFill: 'black' }).textFill)
+      .text(yAxis.title || '');
+
+    const xG = svg.append("g")
+      .attr("transform", "translate(0," + height + ")")
+      .call(d3.axisBottom(x));
+      xG.selectAll("text")
+        .style("text-anchor", "end")
+        .attr("fill", (styles.xAxis || { textFill : 'black' }).textFill)
+        .attr("dx", "-1em")
+        .attr("dy", ".15em")
+        .attr("transform", "rotate(-45)")
+      xG.selectAll("path")
+        .style("stroke", (styles.xAxis || {stroke: 'black'}).stroke);
+      xG.selectAll("line")
+        .style("stroke", (styles.xAxis || {stroke: 'black'}).stroke);
+
+    const barG = svg.selectAll("g.chart")
+    .data(data)
+    .enter().append("g")
+    .attr("class", "bar-g");
+
+    barG.append("rect")
+      .attr("class", "bar")
+      .attr("fill", (styles.bars || { fill: 'steelblue'}).fill)
+      .attr("width", x.bandwidth())
+      .attr("y", (d) => y(d.value))
+      .attr("x", (d) => x(d.label))
+      .attr("height", (d) => height - y(d.value))
+      .on('mouseenter', d => {
+        d3.select('.global-tooltip')
+          .classed('active', true)
+          .text(`${d.value.toFixed(2)}%`);
+      })
+      .on('mouseleave', d => {
+        d3.select('.global-tooltip')
+          .classed('active', false)
+      });
+
+    return el.toReact();
+  }
+})();
+
+export default compose(
+  withState('chart', 'setState', <span />),
+  pure,
+)(BarChart);

app/scripts/app.ts

@@ -124,6 +124,15 @@ function appRun(gettextCatalog: any,
                 LocalStorageService: ILocalStorageService
                 ) {
 
+  // Make global tooltip always follow mouse
+
+  let globalTooltip = document.querySelector('.global-tooltip');
+
+  window.addEventListener('mousemove', event => {
+    globalTooltip.style.left = event.pageX + 'px';
+    globalTooltip.style.top = event.pageY - globalTooltip.offsetHeight - 15 + 'px';
+  });
+
   if (navigator.cookieEnabled && $cookies.get("GDC-Portal-Sha") !== config.commitHash) {
     $cookies.put("GDC-Portal-Sha", config.commitHash);
     [ "Projects-col", "Annotations-col", "Files-col", "Cases-col",

app/styles/tooltip.less

@@ -145,3 +145,44 @@
     visibility: hidden;
   }
 }
+
+.global-tooltip {
+  position: absolute;
+  padding: 6px;
+  color: rgb(61, 61, 61);
+  background: #ffffff;
+  border-radius: 6px;
+  font-size: 10px;
+  border: 2px solid #DEDEDE;
+  transform: translateX(-50%);
+  pointer-events: none;
+  visibility: hidden;
+}
+
+.global-tooltip.active {
+  visibility: visible;
+}
+
+.global-tooltip:before {
+  content: '';
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  margin-left: -12px;
+  width: 0; height: 0;
+  border-top: 12px solid #DEDEDE;
+  border-right: 12px solid transparent;
+  border-left: 12px solid transparent;
+}
+
+.global-tooltip:after {
+  content: '';
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  margin-left: -8px;
+  width: 0; height: 0;
+  border-top: 8px solid #FFFFFF;
+  border-right: 8px solid transparent;
+  border-left: 8px solid transparent;
+}