diff --git a/packages/vx-voronoi/Readme.md b/packages/vx-voronoi/Readme.md index 0b99073e3..b429ba9df 100644 --- a/packages/vx-voronoi/Readme.md +++ b/packages/vx-voronoi/Readme.md @@ -34,14 +34,14 @@ const points = Array(n).fill(null).map(() => ({ // width + height set an extent on the voronoi // x + y set relevant accessors depending on the shape of your data const voronoiLayout = voronoi({ - x: d => d.x, // maybe pass a scale here? + x: d => d.x, y: d => d.y, width, height, }); const voronoiDiagram = voronoiLayout(data); -const polygons = voronoiLayout.polygons(points); // equivalent to voronoiDiagram.polygons() +const polygons = voronoiDiagram.polygons(); // equivalent to voronoiLayout.polygons(points) return ( diff --git a/packages/vx-voronoi/package.json b/packages/vx-voronoi/package.json index 4ec15164c..4688db75f 100644 --- a/packages/vx-voronoi/package.json +++ b/packages/vx-voronoi/package.json @@ -5,6 +5,7 @@ "sideEffects": false, "main": "lib/index.js", "module": "esm/index.js", + "types": "lib/index.d.ts", "files": [ "lib", "esm" @@ -33,12 +34,14 @@ "access": "public" }, "dependencies": { - "@vx/group": "0.0.192", + "@types/classnames": "^2.2.9", + "@types/d3-voronoi": "^1.1.9", + "@types/react": "*", "classnames": "^2.2.5", "d3-voronoi": "^1.1.2", "prop-types": "^15.6.1" }, "peerDependencies": { - "react": "^15.0.0-0 || ^16.0.0-0" + "react": "^16.3.0-0" } } diff --git a/packages/vx-voronoi/src/components/VoronoiPolygon.jsx b/packages/vx-voronoi/src/components/VoronoiPolygon.jsx deleted file mode 100644 index 62f7a6c59..000000000 --- a/packages/vx-voronoi/src/components/VoronoiPolygon.jsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; -import cx from 'classnames'; -import PropTypes from 'prop-types'; - -VoronoiPolygon.propTypes = { - polygon: PropTypes.arrayOf(PropTypes.array), - className: PropTypes.string, - children: PropTypes.func, -}; - -export default function VoronoiPolygon({ polygon, className, children, ...restProps }) { - if (!polygon) return null; - const path = `M${polygon.join('L')}Z`; - if (children) return children({ path, polygon }); - return ; -} diff --git a/packages/vx-voronoi/src/components/VoronoiPolygon.tsx b/packages/vx-voronoi/src/components/VoronoiPolygon.tsx new file mode 100644 index 000000000..6a8793e50 --- /dev/null +++ b/packages/vx-voronoi/src/components/VoronoiPolygon.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import cx from 'classnames'; + +export type VoronoiPolygonProps = { + /** Override render function which is provided polygon and generated path. */ + children?: ({ path, polygon }: { path: string; polygon: [number, number][] }) => React.ReactNode; + /** className to apply to path element. */ + className?: string; + /** Array of coordinate arrays for the polygon (e.g., [[x,y], [x1,y1], ...]), used to generate polygon path. */ + polygon?: [number, number][]; +}; + +export default function VoronoiPolygon({ + polygon, + className, + children, + ...restProps +}: VoronoiPolygonProps & Omit, keyof VoronoiPolygonProps>) { + if (!polygon) return null; + const path = `M${polygon.join('L')}Z`; + if (children) return <>{children({ path, polygon })}; + + return ; +} diff --git a/packages/vx-voronoi/src/index.js b/packages/vx-voronoi/src/index.ts similarity index 100% rename from packages/vx-voronoi/src/index.js rename to packages/vx-voronoi/src/index.ts diff --git a/packages/vx-voronoi/src/voronoi.js b/packages/vx-voronoi/src/voronoi.js deleted file mode 100644 index 6adb113f9..000000000 --- a/packages/vx-voronoi/src/voronoi.js +++ /dev/null @@ -1,17 +0,0 @@ -// returns a d3 voronoi *layout*, for a voronoi *diagram* call `layout(data)` -// alternatively call layout.polygons(data), layout.triangles(data), layout.links(data) -import { voronoi as d3Voronoi } from 'd3-voronoi'; - -export default ({ width = 0, height = 0, x, y }) => { - const voronoi = d3Voronoi(); - - if (x) voronoi.x(x); - if (y) voronoi.y(y); - - voronoi.extent([ - [-1, -1], - [width + 1, height + 1], - ]); - - return voronoi; -}; diff --git a/packages/vx-voronoi/src/voronoi.ts b/packages/vx-voronoi/src/voronoi.ts new file mode 100644 index 000000000..4ab8280aa --- /dev/null +++ b/packages/vx-voronoi/src/voronoi.ts @@ -0,0 +1,28 @@ +import { voronoi as d3Voronoi } from 'd3-voronoi'; + +const CLIP_PADDING = 1; + +interface Config { + width?: number; + height?: number; + x?: (d: Datum) => number; + y?: (d: Datum) => number; +} + +/** + * Returns a configured d3 voronoi `layout`. calling `layout(data)` returns a voronoi *diagram*. + * Alternatively call `layout.polygons(data)`, `layout.triangles(data)`, `layout.links(data)` + */ +export default function getVoronoi({ width = 0, height = 0, x, y }: Config) { + const voronoi = d3Voronoi(); + + if (x) voronoi.x(x); + if (y) voronoi.y(y); + + voronoi.extent([ + [-CLIP_PADDING, -CLIP_PADDING], + [width + CLIP_PADDING, height + CLIP_PADDING], + ]); + + return voronoi; +} diff --git a/packages/vx-voronoi/test/VoronoiPolygon.test.jsx b/packages/vx-voronoi/test/VoronoiPolygon.test.tsx similarity index 90% rename from packages/vx-voronoi/test/VoronoiPolygon.test.jsx rename to packages/vx-voronoi/test/VoronoiPolygon.test.tsx index cacebc28e..1963cf052 100644 --- a/packages/vx-voronoi/test/VoronoiPolygon.test.jsx +++ b/packages/vx-voronoi/test/VoronoiPolygon.test.tsx @@ -4,9 +4,7 @@ import { shallow } from 'enzyme'; import { VoronoiPolygon } from '../src'; describe('', () => { - const data = [1, 2]; - const polygon = new Array(3).fill(null).map((_, i) => [i, i]); - polygon.data = data; + const polygon: [number, number][] = new Array(3).fill(null).map((_, i) => [i, i]); const props = { polygon }; diff --git a/packages/vx-voronoi/test/voronoi.test.js b/packages/vx-voronoi/test/voronoi.test.ts similarity index 72% rename from packages/vx-voronoi/test/voronoi.test.js rename to packages/vx-voronoi/test/voronoi.test.ts index 3fc4a772d..333ff6529 100644 --- a/packages/vx-voronoi/test/voronoi.test.js +++ b/packages/vx-voronoi/test/voronoi.test.ts @@ -6,13 +6,13 @@ describe('voronoi', () => { }); test('x param should set voronoi x', () => { - const x = () => 'x!!!'; + const x = () => 123; const v = voronoi({ x }); expect(v.x()).toEqual(x); }); test('y param should set voronoi y', () => { - const y = () => 'y!!!'; + const y = () => 123; const v = voronoi({ y }); expect(v.y()).toEqual(y); }); @@ -21,9 +21,9 @@ describe('voronoi', () => { const width = 17; const height = 99; const v = voronoi({ width, height }); - const [, [x1, y1]] = v.extent(); - - expect(x1).toEqual(width + 1); - expect(y1).toEqual(height + 1); + const extent = v.extent(); + const endCoord = extent![1]; + expect(endCoord[0]).toEqual(width + 1); + expect(endCoord[1]).toEqual(height + 1); }); });