feat(voronoi): add support for layers

plouc · Mar 26, 2019 · c16ae70 · c16ae70
1 parent 26dc32a
commit c16ae70
Show file tree

Hide file tree

Showing 8 changed files with 390 additions and 79 deletions.
diff --git a/.storybook/config.js b/.storybook/config.js
@@ -63,6 +63,7 @@ function loadStories() {
     require('../packages/sunburst/stories/sunburst.stories')
     require('../packages/treemap/stories/treemap.stories')
     require('../packages/treemap/stories/treemapHtml.stories')
+    // require('../packages/voronoi/stories/voronoi.stories')
     require('../packages/waffle/stories/waffle.stories')
     require('../packages/waffle/stories/waffle-html.stories')
     require('../packages/waffle/stories/waffle-canvas.stories')

diff --git a/packages/bar/stories/bar_00.stories.js b/packages/bar/stories/bar_00.stories.js
@@ -17,17 +17,17 @@ const DataGenerator = (initialIndex, initialState) => {
 
                 return {
                     ...item,
-                    value: Math.round(item.value + Math.random() * (initialValue * .2))
+                    value: Math.round(item.value + Math.random() * (initialValue * 0.2)),
                 }
             })
         },
         getData: () => {
             return { index, state }
-        }
+        },
     }
 }
 
-const BarComponent = (props) => {
+const BarComponent = props => {
     return (
         <g transform={`translate(${props.x},${props.y})`}>
             <rect
@@ -37,17 +37,13 @@ const BarComponent = (props) => {
                 height={props.height}
                 fill="rgba(0, 0, 0, .07)"
             />
-            <rect
-                width={props.width}
-                height={props.height}
-                fill={props.color}
-            />
+            <rect width={props.width} height={props.height} fill={props.color} />
             <rect
                 x={props.width - 5}
                 width={5}
                 height={props.height}
                 fill={props.borderColor}
-                fillOpacity={.2}
+                fillOpacity={0.2}
             />
             <text
                 x={props.width - 16}
@@ -57,7 +53,7 @@ const BarComponent = (props) => {
                 fill="black"
                 style={{
                     fontWeight: 900,
-                    fontSize: 15
+                    fontSize: 15,
                 }}
             >
                 {props.data.indexValue}
@@ -70,7 +66,7 @@ const BarComponent = (props) => {
                 fill={props.borderColor}
                 style={{
                     fontWeight: 400,
-                    fontSize: 13
+                    fontSize: 13,
                 }}
             >
                 {props.data.value}
@@ -91,27 +87,22 @@ const BarComponent = (props) => {
 
 const dataGenerator = DataGenerator(1900, [
     { id: 'Tokyo', value: 10000000 },
-    { id: 'Osaka', value:  9000000 },
-    { id: 'Nara', value:   8000000 },
-    { id: 'Kyoto', value:  7000000 },
-    { id: 'Kobe', value:    5000000 },
+    { id: 'Osaka', value: 9000000 },
+    { id: 'Nara', value: 8000000 },
+    { id: 'Kyoto', value: 7000000 },
+    { id: 'Kobe', value: 5000000 },
     { id: 'Sapporo', value: 3000000 },
 ])
 
 const Sample = () => {
     const [current, setCurrent] = useState(0)
-    useEffect(
-        () => {
-            const timer = setTimeout(
-                () => {
-                    dataGenerator.increment()
-                    setCurrent(current + 1)
-                }, 1400
-            )
-            return () => clearTimeout(timer)
-        },
-        [current, setCurrent]
-    )
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            dataGenerator.increment()
+            setCurrent(current + 1)
+        }, 1400)
+        return () => clearTimeout(timer)
+    }, [current, setCurrent])
 
     const yearData = dataGenerator.getData()
     const barData = [...yearData.state].sort((a, b) => a.value - b.value)
@@ -136,10 +127,10 @@ const Sample = () => {
                 enableGridX
                 enableGridY={false}
                 axisTop={{
-                    format: '~s'
+                    format: '~s',
                 }}
                 axisBottom={{
-                    format: '~s'
+                    format: '~s',
                 }}
                 axisLeft={null}
                 padding={0.3}
@@ -153,8 +144,4 @@ const Sample = () => {
     )
 }
 
-stories.add('Live Update', () => (
-    <Sample/>
-))
-
-
+stories.add('Live Update', () => <Sample />)
diff --git a/packages/voronoi/src/Voronoi.js b/packages/voronoi/src/Voronoi.js
@@ -6,7 +6,7 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  */
-import React from 'react'
+import React, { Fragment } from 'react'
 import { Container, SvgWrapper } from '@nivo/core'
 import enhance from './enhance'
 import { VoronoiPropTypes } from './props'
@@ -15,7 +15,12 @@ const Voronoi = ({
     delaunay,
     voronoi,
 
+    data,
+    layers,
+
     margin,
+    width,
+    height,
     outerWidth,
     outerHeight,
 
@@ -33,39 +38,68 @@ const Voronoi = ({
 
     theme,
 }) => {
+    const context = {
+        width,
+        height,
+        data,
+        delaunay,
+        voronoi,
+    }
+
+    const layerById = {
+        bounds: (
+            <path
+                key="bounds"
+                fill="none"
+                stroke={cellLineColor}
+                strokeWidth={cellLineWidth}
+                d={voronoi.renderBounds()}
+            />
+        ),
+    }
+    if (enableLinks === true) {
+        layerById.links = (
+            <path
+                key="links"
+                stroke={linkLineColor}
+                strokeWidth={linkLineWidth}
+                fill="none"
+                d={delaunay.render()}
+            />
+        )
+    }
+    if (enableCells === true) {
+        layerById.cells = (
+            <path
+                key="cells"
+                d={voronoi.render()}
+                fill="none"
+                stroke={cellLineColor}
+                strokeWidth={cellLineWidth}
+            />
+        )
+    }
+    if (enablePoints === true) {
+        layerById.points = (
+            <path
+                key="points"
+                stroke="none"
+                fill={pointColor}
+                d={delaunay.renderPoints(undefined, pointSize / 2)}
+            />
+        )
+    }
+
     return (
         <Container isInteractive={false} theme={theme}>
             {(/*{ showTooltip, hideTooltip }*/) => (
                 <SvgWrapper width={outerWidth} height={outerHeight} margin={margin} theme={theme}>
-                    {enableLinks && (
-                        <path
-                            stroke={linkLineColor}
-                            strokeWidth={linkLineWidth}
-                            fill="none"
-                            d={delaunay.render()}
-                        />
-                    )}
-                    {enableCells && (
-                        <path
-                            d={voronoi.render()}
-                            fill="none"
-                            stroke={cellLineColor}
-                            strokeWidth={cellLineWidth}
-                        />
-                    )}
-                    {enablePoints && (
-                        <path
-                            stroke="none"
-                            fill={pointColor}
-                            d={delaunay.renderPoints(undefined, pointSize / 2)}
-                        />
-                    )}
-                    <path
-                        fill="none"
-                        stroke={cellLineColor}
-                        strokeWidth={cellLineWidth}
-                        d={voronoi.renderBounds()}
-                    />
+                    {layers.map((layer, i) => {
+                        if (typeof layer === 'function') {
+                            return <Fragment key={i}>{layer(context)}</Fragment>
+                        }
+                        return layerById[layer]
+                    })}
                 </SvgWrapper>
             )}
         </Container>

diff --git a/packages/voronoi/src/props.js b/packages/voronoi/src/props.js
@@ -20,6 +20,13 @@ export const VoronoiPropTypes = {
     xDomain: PropTypes.arrayOf(PropTypes.number).isRequired,
     yDomain: PropTypes.arrayOf(PropTypes.number).isRequired,
 
+    layers: PropTypes.arrayOf(
+        PropTypes.oneOfType([
+            PropTypes.oneOf(['links', 'cells', 'points', 'bounds']),
+            PropTypes.func,
+        ])
+    ).isRequired,
+
     enableLinks: PropTypes.bool.isRequired,
     linkLineWidth: PropTypes.number.isRequired,
     linkLineColor: PropTypes.string.isRequired,
@@ -37,6 +44,11 @@ export const VoronoiPropTypes = {
 }
 
 export const VoronoiDefaultProps = {
+    xDomain: [0, 1],
+    yDomain: [0, 1],
+
+    layers: ['links', 'cells', 'points', 'bounds'],
+
     enableLinks: false,
     linkLineWidth: 1,
     linkLineColor: '#bbb',