feat(geo): init geo package

packages/geo/README.md

@@ -0,0 +1,15 @@
+# `@nivo/geo`
+
+[![version](https://img.shields.io/npm/v/@nivo/geo.svg?style=flat-square)](https://www.npmjs.com/package/@nivo/geo)
+
+## GeoMap
+
+[documentation](http://nivo.rocks/geo)
+
+![Map](./doc/geo.png)
+
+## MapCanvas
+
+[documentation](http://nivo.rocks/geo/canvas)
+
+![HeatmapCanvas](./doc/geo-canvas.png)

packages/geo/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@nivo/geo",
+  "version": "0.54.0",
+  "license": "MIT",
+  "author": {
+    "name": "Raphaël Benitte",
+    "url": "https://github.com/plouc"
+  },
+  "keywords": [
+    "nivo",
+    "dataviz",
+    "react",
+    "d3",
+    "charts",
+    "geo",
+    "map"
+  ],
+  "main": "./dist/nivo-geo.cjs.js",
+  "module": "./dist/nivo-geo.esm.js",
+  "files": [
+    "README.md",
+    "LICENSE.md",
+    "dist/",
+    "index.d.ts"
+  ],
+  "dependencies": {
+    "@nivo/core": "0.54.0",
+    "d3-geo": "^1.11.3",
+    "lodash": "^4.17.4",
+    "react-motion": "^0.5.2",
+    "recompose": "^0.30.0"
+  },
+  "peerDependencies": {
+    "prop-types": ">= 15.5.10 < 16.0.0",
+    "react": ">= 16.8.4 < 17.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/geo/src/Choropleth.js

@@ -0,0 +1,26 @@
+/*
+ * This file is part of the nivo project.
+ *
+ * Copyright 2016-present, Raphaël Benitte.
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+import React, { Component } from 'react'
+import { ChoroplethPropTypes } from './props'
+import GeoMap from './GeoMap'
+import { enhanceChoropleth } from './enhance'
+
+class Choropleth extends Component {
+    static propTypes = ChoroplethPropTypes
+
+    render() {
+        const {} = this.props
+
+        return <GeoMap {...this.props} />
+    }
+}
+
+Choropleth.displayName = 'Choropleth'
+
+export default enhanceChoropleth(Choropleth)

packages/geo/src/ChoroplethCanvas.js

@@ -0,0 +1,26 @@
+/*
+ * This file is part of the nivo project.
+ *
+ * Copyright 2016-present, Raphaël Benitte.
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+import React, { Component } from 'react'
+import { ChoroplethCanvasPropTypes } from './props'
+import GeoMapCanvas from './GeoMapCanvas'
+import { enhanceChoropleth } from './enhance'
+
+class ChoroplethCanvas extends Component {
+    static propTypes = ChoroplethCanvasPropTypes
+
+    render() {
+        const {} = this.props
+
+        return <GeoMapCanvas {...this.props} />
+    }
+}
+
+ChoroplethCanvas.displayName = 'ChoroplethCanvas'
+
+export default enhanceChoropleth(ChoroplethCanvas)

packages/geo/src/GeoGraticule.js

@@ -0,0 +1,37 @@
+/*
+ * This file is part of the nivo project.
+ *
+ * Copyright 2016-present, Raphaël Benitte.
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import pure from 'recompose/pure'
+
+class GeoGraticule extends Component {
+    static propTypes = {
+        pathHelper: PropTypes.func.isRequired,
+        graticule: PropTypes.func.isRequired,
+        lineWidth: PropTypes.number.isRequired,
+        lineColor: PropTypes.string.isRequired,
+    }
+
+    render() {
+        const { pathHelper, graticule, lineWidth, lineColor } = this.props
+
+        return (
+            <>
+                <path
+                    fill="none"
+                    strokeWidth={lineWidth}
+                    stroke={lineColor}
+                    d={pathHelper(graticule())}
+                />
+            </>
+        )
+    }
+}
+
+export default pure(GeoGraticule)

packages/geo/src/GeoMap.js

@@ -0,0 +1,139 @@
+/*
+ * This file is part of the nivo project.
+ *
+ * Copyright 2016-present, Raphaël Benitte.
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+import React, { Component, Fragment } from 'react'
+import { Container, SvgWrapper } from '@nivo/core'
+import { GeoMapPropTypes } from './props'
+import { enhanceGeoMap } from './enhance'
+import GeoGraticule from './GeoGraticule'
+import GeoMapFeature from './GeoMapFeature'
+
+class GeoMap extends Component {
+    static propTypes = GeoMapPropTypes
+
+    renderTooltip = (showTooltip, feature, event) => {
+        const { tooltip, theme } = this.props
+        if (!tooltip) return
+
+        const tooltipContent = tooltip(feature)
+        if (!tooltipContent) return
+
+        showTooltip(
+            <div style={theme.tooltip.container}>
+                <div>{tooltipContent}</div>
+            </div>,
+            event
+        )
+    }
+
+    handleMouseEnter = showTooltip => (feature, event) => {
+        const { isInteractive, onMouseEnter } = this.props
+        if (isInteractive !== true) return
+
+        this.renderTooltip(showTooltip, feature, event)
+        onMouseEnter(feature, event)
+    }
+
+    handleMouseMove = showTooltip => (feature, event) => {
+        const { isInteractive, onMouseMove } = this.props
+        if (isInteractive !== true) return
+
+        this.renderTooltip(showTooltip, feature, event)
+        onMouseMove(feature, event)
+    }
+
+    handleMouseLeave = hideTooltip => (feature, event) => {
+        const { isInteractive, onMouseLeave } = this.props
+        if (isInteractive !== true) return
+
+        hideTooltip()
+        onMouseLeave(feature, event)
+    }
+
+    handleClick = (feature, event) => {
+        const { isInteractive, onClick } = this.props
+        if (isInteractive !== true) return
+
+        onClick(feature, event)
+    }
+
+    render() {
+        const {
+            margin,
+            outerWidth,
+            outerHeight,
+            theme,
+            features,
+            pathHelper,
+            enableGraticule,
+            graticule,
+            graticuleLineWidth,
+            graticuleLineColor,
+            getFillColor,
+            getBorderWidth,
+            getBorderColor,
+            layers,
+            isInteractive,
+        } = this.props
+
+        return (
+            <Container isInteractive={isInteractive} theme={theme}>
+                {({ showTooltip, hideTooltip }) => (
+                    <SvgWrapper
+                        width={outerWidth}
+                        height={outerHeight}
+                        margin={margin}
+                        theme={theme}
+                    >
+                        {layers.map((layer, i) => {
+                            if (layer === 'graticule') {
+                                if (enableGraticule !== true) return null
+
+                                return (
+                                    <GeoGraticule
+                                        key="graticule"
+                                        pathHelper={pathHelper}
+                                        graticule={graticule}
+                                        lineWidth={graticuleLineWidth}
+                                        lineColor={graticuleLineColor}
+                                    />
+                                )
+                            }
+                            if (layer === 'features') {
+                                return (
+                                    <Fragment key="features">
+                                        {features.map(feature => (
+                                            <GeoMapFeature
+                                                key={feature.id}
+                                                feature={feature}
+                                                pathHelper={pathHelper}
+                                                fillColor={getFillColor(feature)}
+                                                borderWidth={getBorderWidth(feature)}
+                                                borderColor={getBorderColor(feature)}
+                                                onMouseEnter={this.handleMouseEnter(showTooltip)}
+                                                onMouseMove={this.handleMouseMove(showTooltip)}
+                                                onMouseLeave={this.handleMouseLeave(hideTooltip)}
+                                                onClick={this.handleClick}
+                                            />
+                                        ))}
+                                    </Fragment>
+                                )
+                            }
+
+                            return <Fragment key={i}>layer(this.props)</Fragment>
+                        })}
+                    </SvgWrapper>
+                )}
+            </Container>
+        )
+    }
+}
+
+GeoMap.displayName = 'GeoMap'
+
+export default enhanceGeoMap(GeoMap)