Skip to content

Commit

Permalink
feat(voronoi): add support for layers
Browse files Browse the repository at this point in the history
  • Loading branch information
Raphaël Benitte authored and Raphaël Benitte committed Mar 26, 2019
1 parent 26dc32a commit c16ae70
Show file tree
Hide file tree
Showing 8 changed files with 390 additions and 79 deletions.
1 change: 1 addition & 0 deletions .storybook/config.js
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Expand Down
55 changes: 21 additions & 34 deletions packages/bar/stories/bar_00.stories.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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}
Expand All @@ -57,7 +53,7 @@ const BarComponent = (props) => {
fill="black"
style={{
fontWeight: 900,
fontSize: 15
fontSize: 15,
}}
>
{props.data.indexValue}
Expand All @@ -70,7 +66,7 @@ const BarComponent = (props) => {
fill={props.borderColor}
style={{
fontWeight: 400,
fontSize: 13
fontSize: 13,
}}
>
{props.data.value}
Expand All @@ -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)
Expand All @@ -136,10 +127,10 @@ const Sample = () => {
enableGridX
enableGridY={false}
axisTop={{
format: '~s'
format: '~s',
}}
axisBottom={{
format: '~s'
format: '~s',
}}
axisLeft={null}
padding={0.3}
Expand All @@ -153,8 +144,4 @@ const Sample = () => {
)
}

stories.add('Live Update', () => (
<Sample/>
))


stories.add('Live Update', () => <Sample />)
94 changes: 64 additions & 30 deletions packages/voronoi/src/Voronoi.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -15,7 +15,12 @@ const Voronoi = ({
delaunay,
voronoi,

data,
layers,

margin,
width,
height,
outerWidth,
outerHeight,

Expand All @@ -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>
Expand Down
12 changes: 12 additions & 0 deletions packages/voronoi/src/props.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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',
Expand Down
Loading

0 comments on commit c16ae70

Please sign in to comment.