[Examples] Merge HeatMap and TooltipMap

VictorCazanave · Apr 13, 2019 · 645951a · 645951a
1 parent 3ff1c35
commit 645951a
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 19 deletions.
diff --git a/examples/src/components/examples-app.jsx b/examples/src/components/examples-app.jsx
@@ -2,8 +2,7 @@ import React from 'react';
 import CheckboxMap from './checkbox-map';
 import RadioMap from './radio-map';
 import LinkMap from './link-map';
-import TooltipMap from './tooltip-map';
-import HeatMap from './heat-map';
+import TooltipHeatMap from './tooltip-heat-map';
 import './examples-app.scss';
 
 class ExamplesApp extends React.Component {
@@ -20,8 +19,7 @@ class ExamplesApp extends React.Component {
 				<RadioMap />
 				<CheckboxMap />
 				<LinkMap />
-				<TooltipMap />
-				<HeatMap />
+				<TooltipHeatMap />
 			</section>
 		);
 	}

diff --git a/examples/src/components/examples-app.scss b/examples/src/components/examples-app.scss
@@ -51,17 +51,27 @@
 
 			&--usa {
 				width: 800px; // USA needs more space	for tooltip
-				.svg-map{
-					&__location {
-						&.heat1{
-							opacity:0.8;
-						}
-						&.heat2{
-							opacity:0.6;
-						}
-						&.heat3{
-							opacity:0.4;
-						}
+
+				.svg-map__location {
+					&--heat0 {
+						fill: blue;
+					}
+
+					&--heat1 {
+						fill: lightblue;
+					}
+
+					&--heat2 {
+						fill: orange;
+					}
+
+					&--heat3 {
+						fill: red;
+					}
+
+					&:focus,
+					&:hover {
+						opacity: 0.75;
 					}
 				}
 			}

diff --git a/examples/src/components/tooltip-map.jsx → examples/src/components/tooltip-heat-map.jsx b/examples/src/components/tooltip-map.jsx → examples/src/components/tooltip-heat-map.jsx
@@ -1,9 +1,9 @@
 import React from 'react';
-import { SVGMap, USA } from '../../../src/';
+import { SVGMap, USA } from '../../../src';
 import { getLocationName } from '../utils';
 import '../../../src/svg-map.scss';
 
-class TooltipMap extends React.Component {
+class TooltipHeatMap extends React.Component {
 	constructor(props) {
 		super(props);
 
@@ -37,15 +37,21 @@ class TooltipMap extends React.Component {
 		this.setState({ tooltipStyle });
 	}
 
+	getLocationClassName(location, index) {
+		// Generate random heat map
+		return `svg-map__location svg-map__location--heat${index % 4}`;
+	}
+
 	render() {
 		return (
 			<article className="examples__block">
 				<h2 className="examples__block__title">
-					USA SVG map with tooltips
+					USA SVG heat map with tooltips
 				</h2>
 				<div className="examples__block__map examples__block__map--usa">
 					<SVGMap
 						map={USA}
+						locationClassName={this.getLocationClassName}
 						onLocationMouseOver={this.handleLocationMouseOver}
 						onLocationMouseOut={this.handleLocationMouseOut}
 						onLocationMouseMove={this.handleLocationMouseMove} />
@@ -58,4 +64,4 @@ class TooltipMap extends React.Component {
 	}
 }
 
-export default TooltipMap;
+export default TooltipHeatMap;