From e1ae81a800110683ce6de95debbbc7eddded3a8f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rapha=C3=ABl=20Benitte?= Date: Tue, 5 Dec 2017 02:59:40 +0900 Subject: [PATCH] feat(voronoi): improve voronoi (#93) --- .../charts/voronoi/ResponsiveVoronoi.js | 39 +--- src/components/charts/voronoi/Voronoi.js | 176 ++++++++---------- src/components/charts/voronoi/enhance.js | 17 ++ src/components/charts/voronoi/index.js | 1 + src/components/charts/voronoi/props.js | 44 +++++ 5 files changed, 146 insertions(+), 131 deletions(-) create mode 100644 src/components/charts/voronoi/enhance.js create mode 100644 src/components/charts/voronoi/props.js diff --git a/src/components/charts/voronoi/ResponsiveVoronoi.js b/src/components/charts/voronoi/ResponsiveVoronoi.js index 8904d7bad..ad41abcd4 100644 --- a/src/components/charts/voronoi/ResponsiveVoronoi.js +++ b/src/components/charts/voronoi/ResponsiveVoronoi.js @@ -6,37 +6,12 @@ * 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 React from 'react' +import ResponsiveWrapper from '../ResponsiveWrapper' import Voronoi from './Voronoi' -import Measure from 'react-measure' - -export default class ResponsiveVoronoi extends Component { - state = { - dimensions: { - width: -1, - height: -1, - }, - } - - render() { - const { width, height } = this.state.dimensions - - const shouldRender = width > 0 && height > 0 - return ( - { - this.setState({ dimensions: contentRect.bounds }) - }} - > - {({ measureRef }) => ( -
- {shouldRender && } -
- )} - - ) - } -} +export default props => ( + + {({ width, height }) => } + +) diff --git a/src/components/charts/voronoi/Voronoi.js b/src/components/charts/voronoi/Voronoi.js index 781f2ff14..a056133e5 100644 --- a/src/components/charts/voronoi/Voronoi.js +++ b/src/components/charts/voronoi/Voronoi.js @@ -7,114 +7,92 @@ * file that was distributed with this source code. */ -import React, { Component } from 'react' -import PropTypes from 'prop-types' -import { defaultMargin, defaultColorRange } from '../../../defaults' +import React from 'react' import { voronoi as VoronoiGenerator } from 'd3-voronoi' +import Container from '../Container' +import SvgWrapper from '../SvgWrapper' +import enhance from './enhance' +import { VoronoiPropTypes } from './props' -class Voronoi extends Component { - render() { - const { - data, - width: _width, - height: _height, - margin: _margin, - x, - y, - enableSites, - enableLinks, - enablePolygons, - borderWidth, - borderColor, - linkWidth, - linkColor, - } = this.props +const Voronoi = ({ + data, - const margin = Object.assign({}, defaultMargin, _margin) - const width = _width - margin.left - margin.right - const height = _height - margin.top - margin.bottom + // dimensions + margin, + width, + height, + outerWidth, + outerHeight, - const voronoi = VoronoiGenerator() - .x(d => d[x]) - .y(d => d[y]) - .extent([[0, 0], [width, height]]) + // features + enableSites, + enableLinks, + enablePolygons, - const polygons = voronoi.polygons(data) - const links = voronoi.links(data) + // styling + theme, + borderWidth, + borderColor, + linkWidth, + linkColor, + siteSize, + siteColor, +}) => { + const voronoi = VoronoiGenerator() + .x(d => d.x) + .y(d => d.y) + .extent([[0, 0], [width, height]]) - return ( - - + const polygons = voronoi.polygons(data) + const links = voronoi.links(data) + + return ( + + {({ showTooltip, hideTooltip }) => ( + {enableLinks && - links.map((l, i) => { - return ( - - ) - })} + links.map(l => ( + + ))} {enablePolygons && - polygons.map((p, i) => { - return ( - - ) - })} + polygons.map(p => ( + { + console.log(p.data) + }} + /> + ))} {enableSites && - data.map((d, i) => { - return ( - - ) - })} - - - ) - } -} - -Voronoi.propTypes = { - enableSites: PropTypes.bool.isRequired, - enableLinks: PropTypes.bool.isRequired, - enablePolygons: PropTypes.bool.isRequired, - x: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, - y: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, - colors: PropTypes.any.isRequired, - borderWidth: PropTypes.number.isRequired, - borderColor: PropTypes.string.isRequired, - linkWidth: PropTypes.number.isRequired, - linkColor: PropTypes.string.isRequired, + data.map(d => ( + + ))} + + )} + + ) } -Voronoi.defaultProps = { - enableSites: true, - enableLinks: true, - enablePolygons: true, - x: 0, - y: 1, - borderWidth: 1, - borderColor: '#000', - linkWidth: 1, - linkColor: '#bbb', - colors: defaultColorRange, -} +Voronoi.propTypes = VoronoiPropTypes -export default Voronoi +export default enhance(Voronoi) diff --git a/src/components/charts/voronoi/enhance.js b/src/components/charts/voronoi/enhance.js new file mode 100644 index 000000000..95474c0a6 --- /dev/null +++ b/src/components/charts/voronoi/enhance.js @@ -0,0 +1,17 @@ +/* + * 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 from 'react' +import compose from 'recompose/compose' +import defaultProps from 'recompose/defaultProps' +import pure from 'recompose/pure' +import { withTheme, withDimensions } from '../../../hocs' +import { VoronoiDefaultProps } from './props' + +export default Component => + compose(defaultProps(VoronoiDefaultProps), withTheme(), withDimensions(), pure)(Component) diff --git a/src/components/charts/voronoi/index.js b/src/components/charts/voronoi/index.js index 5ab68fa0f..73ef7b809 100644 --- a/src/components/charts/voronoi/index.js +++ b/src/components/charts/voronoi/index.js @@ -9,3 +9,4 @@ export { default as Voronoi } from './Voronoi' export { default as ResponsiveVoronoi } from './ResponsiveVoronoi' +export * from './props' diff --git a/src/components/charts/voronoi/props.js b/src/components/charts/voronoi/props.js new file mode 100644 index 000000000..15382debd --- /dev/null +++ b/src/components/charts/voronoi/props.js @@ -0,0 +1,44 @@ +/* + * 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 PropTypes from 'prop-types' + +export const VoronoiPropTypes = { + data: PropTypes.arrayOf( + PropTypes.shape({ + id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, + x: PropTypes.number.isRequired, + y: PropTypes.number.isRequired, + }) + ).isRequired, + enablePolygons: PropTypes.bool.isRequired, + enableSites: PropTypes.bool.isRequired, + enableLinks: PropTypes.bool.isRequired, + x: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, + y: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, + borderWidth: PropTypes.number.isRequired, + borderColor: PropTypes.string.isRequired, + linkWidth: PropTypes.number.isRequired, + linkColor: PropTypes.string.isRequired, + siteSize: PropTypes.number.isRequired, + siteColor: PropTypes.string.isRequired, +} + +export const VoronoiDefaultProps = { + enablePolygons: true, + enableSites: false, + enableLinks: false, + x: 0, + y: 1, + borderWidth: 2, + borderColor: '#000', + linkWidth: 1, + linkColor: '#bbb', + siteSize: 4, + siteColor: '#666', +}