Merge pull request #24 from ramosquito5/master

Heat Map!

Author: VictorCazanave

.gitignore

@@ -3,3 +3,4 @@ node_modules
 lib
 dist
 coverage
+.vscode

README.md

@@ -122,7 +122,7 @@ ReactDOM.render(
 | map | object | **required** | Describe SVG map to display. See [maps section](#maps) for more details. |
 | className | string | `'svg-map'` | CSS class of `<svg>`. |
 | role | string | `'none'` | ARIA role of `<svg>`. |
-| locationClassName | string | `'svg-map__location'` | CSS class of each `<path>`. |
+| locationClassName | string or function | `'svg-map__location'` | CSS class of each `<path>`. |
 | locationTabIndex | string or function | `'0'` | Tabindex each `<path>`. |
 | locationRole | string | `'none'` | ARIA role of each `<path>`. |
 | onLocationMouseOver | function |  | Invoked when the user puts the mouse over a location. |
@@ -136,6 +136,7 @@ ReactDOM.render(
 | tabIndex | string | `'0'` | **DEPRECATED:** Although this property still works, it has been replaced by `locationTabIndex` and will be removed in next major version. |
 | type | string | `'none'` | **DEPRECATED:** Although this property still works, it has been replaced by `locationRole` and will be removed in next major version. |
 
+
 ### CheckboxSVGMap
 
 | Prop | Type | Default | Description |
@@ -326,8 +327,8 @@ You can modify existing maps or create your own.
 #### Modify a map
 
 1. Import the map to modify.
-1. Create a new object from this map.
-1. Pass this new object as `map` prop of `<SVGMap />` component.
+2. Create a new object from this map.
+3. Pass this new object as `map` prop of `<SVGMap />` component.
 
 ```javascript
 import React from 'react';

__tests__/__snapshots__/svg-map.test.js.snap

@@ -2248,6 +2248,34 @@ exports[`SVGMap component Maps displays map of Utah 1`] = `
 </svg>
 `;
 
+exports[`SVGMap component Properties displays heat map with custom location css 1`] = `
+<svg
+  aria-label="label"
+  className="className"
+  role="role"
+  viewBox="viewBox"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    aria-checked="isLocationSelected"
+    aria-label="name"
+    className="svg-map__location heat0"
+    d="path"
+    id="id"
+    name="name"
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseMove={[Function]}
+    onMouseOut={[Function]}
+    onMouseOver={[Function]}
+    role="locationRole"
+    tabIndex="locationTabIndex"
+  />
+</svg>
+`;
+
 exports[`SVGMap component Properties displays map with custom props 1`] = `
 <svg
   aria-label="label"

__tests__/svg-map.test.js

@@ -45,8 +45,35 @@ describe('SVGMap component', () => {
 
 			expect(tree).toMatchSnapshot();
 		});
+
+		test('displays heat map with custom location css', () => {
+			const eventHandler = () => 'eventHandler';
+			const isLocationSelected = () => 'isLocationSelected';
+			const generateHeat = () => 'svg-map__location heat0';
+			const component = renderer.create(
+				<SVGMap map={map}
+					className="className"
+					role="role"
+					locationTabIndex="locationTabIndex"
+					locationRole="locationRole"
+					onLocationMouseOver={eventHandler}
+					onLocationMouseOut={eventHandler}
+					onLocationMouseMove={eventHandler}
+					onLocationClick={eventHandler}
+					onLocationKeyDown={eventHandler}
+					onLocationFocus={eventHandler}
+					onLocationBlur={eventHandler}
+					isLocationSelected={isLocationSelected}
+					locationClassName={generateHeat}
+				/>
+			);
+			const tree = component.toJSON();
+
+			expect(tree).toMatchSnapshot();
+		});
 	});
 
+
 	describe('Maps', () => {
 		test('displays map of Australia', () => {
 			const component = renderer.create(<SVGMap map={Australia} />);

examples/src/components/examples-app.jsx

@@ -3,6 +3,7 @@ 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 './examples-app.scss';
 
 class ExamplesApp extends React.Component {
@@ -20,6 +21,7 @@ class ExamplesApp extends React.Component {
 				<CheckboxMap />
 				<LinkMap />
 				<TooltipMap />
+				<HeatMap />
 			</section>
 		);
 	}

examples/src/components/examples-app.scss

@@ -51,6 +51,19 @@
 
 			&--usa {
 				width: 800px; // USA needs more space	for tooltip
+				.svg-map{
+					&__location {
+						&.heat1{
+							opacity:0.8;
+						}
+						&.heat2{
+							opacity:0.6;
+						}
+						&.heat3{
+							opacity:0.4;
+						}
+					}
+				}
 			}
 
 			&__tooltip {

examples/src/components/heat-map.jsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { SVGMap, USA } from '../../../src/';
+import { getLocationName } from '../utils';
+import '../../../src/svg-map.scss';
+
+class HeatMap extends React.Component {
+	constructor(props) {
+		super(props);
+
+		this.state = {
+			pointedLocation: null,
+			tooltipStyle: {
+				display: 'none'
+			}
+		};
+
+		this.handleLocationMouseOver = this.handleLocationMouseOver.bind(this);
+		this.handleLocationMouseOut = this.handleLocationMouseOut.bind(this);
+		this.handleLocationMouseMove = this.handleLocationMouseMove.bind(this);
+	}
+
+	handleLocationMouseOver(event) {
+		const pointedLocation = getLocationName(event);
+		this.setState({ pointedLocation });
+	}
+
+	handleLocationMouseOut() {
+		this.setState({ pointedLocation: null, tooltipStyle: { display: 'none' } });
+	}
+
+	handleLocationMouseMove(event) {
+		const tooltipStyle = {
+			display: 'block',
+			top: event.clientY + 10,
+			left: event.clientX - 100
+		};
+		this.setState({ tooltipStyle });
+	}
+
+	generateHeat(location, index) {
+		return 'svg-map__location heat' + (index % 4);
+	}
+
+	render() {
+		return (
+			<article className="examples__block">
+				<h2 className="examples__block__title">
+					USA SVG map with tooltips and a heat map
+				</h2>
+				<div className="examples__block__map examples__block__map--usa">
+					<SVGMap
+						map={USA}
+						onLocationMouseOver={this.handleLocationMouseOver}
+						onLocationMouseOut={this.handleLocationMouseOut}
+						onLocationMouseMove={this.handleLocationMouseMove}
+						locationClassName={this.generateHeat}
+					/>
+					<div className="examples__block__map__tooltip" style={this.state.tooltipStyle}>
+						{this.state.pointedLocation}
+					</div>
+				</div>
+			</article>
+		);
+	}
+}
+
+export default HeatMap;

package-lock.json

@@ -79,4 +79,4 @@
 			"src/*.jsx"
 		]
 	}
-}
+}