Add hovering example for heatmap series (#1078)

* add hovering example * add hovering example to the labeled heatmap as well * respond to comments
uber · Jan 1, 2019 · 883e78f · 883e78f
1 parent 70e4f6f
commit 883e78f
Show file tree

Hide file tree

Showing 4 changed files with 206 additions and 49 deletions.
diff --git a/showcase/plot/heatmap-chart.js b/showcase/plot/heatmap-chart.js
@@ -18,32 +18,42 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import React from 'react';
+import React, {Component} from 'react';
 
-import {XYPlot, XAxis, YAxis, HeatmapSeries} from 'index';
+import {XYPlot, XAxis, YAxis, HeatmapSeries, Hint} from 'index';
 
-export default function Example(props) {
-  return (
-    <XYPlot width={300} height={300}>
-      <XAxis />
-      <YAxis />
-      <HeatmapSeries
-        className="heatmap-series-example"
-        data={[
-          {x: 1, y: 0, color: 10},
-          {x: 1, y: 5, color: 10},
-          {x: 1, y: 10, color: 6},
-          {x: 1, y: 15, color: 7},
-          {x: 2, y: 0, color: 12},
-          {x: 2, y: 5, color: 2},
-          {x: 2, y: 10, color: 1},
-          {x: 2, y: 15, color: 12},
-          {x: 3, y: 0, color: 9},
-          {x: 3, y: 5, color: 2},
-          {x: 3, y: 10, color: 6},
-          {x: 3, y: 15, color: 12}
-        ]}
-      />
-    </XYPlot>
-  );
+export default class HeatmapChart extends Component {
+  state = {
+    value: false
+  };
+
+  render() {
+    const {value} = this.state;
+    return (
+      <XYPlot width={300} height={300}>
+        <XAxis />
+        <YAxis />
+        <HeatmapSeries
+          className="heatmap-series-example"
+          onValueMouseOver={v => this.setState({value: v})}
+          onSeriesMouseOut={v => this.setState({value: false})}
+          data={[
+            {x: 1, y: 0, color: 10},
+            {x: 1, y: 5, color: 10},
+            {x: 1, y: 10, color: 6},
+            {x: 1, y: 15, color: 7},
+            {x: 2, y: 0, color: 12},
+            {x: 2, y: 5, color: 2},
+            {x: 2, y: 10, color: 1},
+            {x: 2, y: 15, color: 12},
+            {x: 3, y: 0, color: 9},
+            {x: 3, y: 5, color: 2},
+            {x: 3, y: 10, color: 6},
+            {x: 3, y: 15, color: 12}
+          ]}
+        />
+        {value !== false && <Hint value={value} />}
+      </XYPlot>
+    );
+  }
 }
diff --git a/showcase/plot/labeled-heatmap.js b/showcase/plot/labeled-heatmap.js
@@ -18,10 +18,10 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import React from 'react';
+import React, {Component} from 'react';
 import {scaleLinear} from 'd3-scale';
 
-import {XYPlot, XAxis, YAxis, HeatmapSeries, LabelSeries} from 'index';
+import {XYPlot, XAxis, YAxis, HeatmapSeries, LabelSeries, Hint} from 'index';
 
 const alphabet = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'];
 const data = alphabet.reduce((acc, letter1, idx) => {
@@ -41,20 +41,27 @@ const {min, max} = data.reduce(
   {min: Infinity, max: -Infinity}
 );
 
-export default function LabeledHeatmap() {
-  const exampleColorScale = scaleLinear()
+export default class LabeledHeatmap extends Component {
+  state = {
+    value: false
+  };
+
+  render () {
+    const {value} = this.state;
+    const exampleColorScale = scaleLinear()
     .domain([min, (min + max) / 2, max])
     .range(['orange', 'white', 'cyan']);
-  return (
-    <XYPlot
-      xType="ordinal"
-      xDomain={alphabet.map(letter => `${letter}1`)}
-      yType="ordinal"
-      yDomain={alphabet.map(letter => `${letter}2`).reverse()}
-      margin={50}
-      width={500}
-      height={500}
-    >
+
+    return (
+      <XYPlot
+        xType="ordinal"
+        xDomain={alphabet.map(letter => `${letter}1`)}
+        yType="ordinal"
+        yDomain={alphabet.map(letter => `${letter}2`).reverse()}
+        margin={50}
+        width={500}
+        height={500}
+        >
       <XAxis orientation="top" />
       <YAxis />
       <HeatmapSeries
@@ -70,13 +77,18 @@ export default function LabeledHeatmap() {
         }}
         className="heatmap-series-example"
         data={data}
-      />
+        onValueMouseOver={v => this.setState({value: v})}
+        onSeriesMouseOut={v => this.setState({value: false})}
+        />
       <LabelSeries
+        style={{pointerEvents: 'none'}}
         data={data}
         labelAnchorX="middle"
         labelAnchorY="baseline"
         getLabel={d => `${d.color}`}
-      />
-    </XYPlot>
-  );
+        />
+      {value !== false && <Hint value={value} />}
+      </XYPlot>
+    );
+  }
 }
diff --git a/showcase/radial-chart/donut-chart.js b/showcase/radial-chart/donut-chart.js
@@ -47,7 +47,7 @@ export default class SimpleRadialChart extends Component {
         height={300}
         padAngle={0.04}
       >
-        {value && <Hint value={value} />}
+        {value !== false && <Hint value={value} />}
       </RadialChart>
     );
   }