Merge pull request #512 from hshoff/chris--typescript-vx-voronoi

typescript(vx-voronoi): re-write package in TypeScript

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 (
   <svg>

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"
   }
 }

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<React.SVGProps<SVGPathElement>, keyof VoronoiPolygonProps>) {
+  if (!polygon) return null;
+  const path = `M${polygon.join('L')}Z`;
+  if (children) return <>{children({ path, polygon })}</>;
+
+  return <path className={cx('vx-voronoi-polygon', className)} d={path} {...restProps} />;
+}

packages/vx-voronoi/src/voronoi.ts

@@ -0,0 +1,28 @@
+import { voronoi as d3Voronoi } from 'd3-voronoi';
+
+const CLIP_PADDING = 1;
+
+interface Config<Datum> {
+  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<Datum>({ width = 0, height = 0, x, y }: Config<Datum>) {
+  const voronoi = d3Voronoi<Datum>();
+
+  if (x) voronoi.x(x);
+  if (y) voronoi.y(y);
+
+  voronoi.extent([
+    [-CLIP_PADDING, -CLIP_PADDING],
+    [width + CLIP_PADDING, height + CLIP_PADDING],
+  ]);
+
+  return voronoi;
+}

packages/vx-voronoi/test/VoronoiPolygon.test.jsx → packages/vx-voronoi/test/VoronoiPolygon.test.tsx

@@ -4,9 +4,7 @@ import { shallow } from 'enzyme';
 import { VoronoiPolygon } from '../src';
 
 describe('<VoronoiPolygon />', () => {
-  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 };
 

packages/vx-voronoi/test/voronoi.test.js → 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);
   });
 });