From fc9fcf251ca83d8755a75fe006ceb06bee7d5b0d Mon Sep 17 00:00:00 2001 From: Chris Williams Date: Tue, 17 Sep 2019 21:24:27 -0700 Subject: [PATCH 01/22] typescript(vx-shape): *.jsx? => *.tsx? --- packages/vx-shape/package.json | 6 ++++++ packages/vx-shape/src/{index.js => index.ts} | 0 packages/vx-shape/src/shapes/{Arc.jsx => Arc.tsx} | 0 packages/vx-shape/src/shapes/{Area.jsx => Area.tsx} | 0 .../vx-shape/src/shapes/{AreaClosed.jsx => AreaClosed.tsx} | 0 .../vx-shape/src/shapes/{AreaStack.jsx => AreaStack.tsx} | 0 packages/vx-shape/src/shapes/{Bar.jsx => Bar.tsx} | 0 packages/vx-shape/src/shapes/{BarGroup.jsx => BarGroup.tsx} | 0 .../{BarGroupHorizontal.jsx => BarGroupHorizontal.tsx} | 0 packages/vx-shape/src/shapes/{BarStack.jsx => BarStack.tsx} | 0 .../{BarStackHorizontal.jsx => BarStackHorizontal.tsx} | 0 packages/vx-shape/src/shapes/{Circle.jsx => Circle.tsx} | 0 packages/vx-shape/src/shapes/{Line.jsx => Line.tsx} | 0 packages/vx-shape/src/shapes/{LinePath.jsx => LinePath.tsx} | 0 .../vx-shape/src/shapes/{LineRadial.jsx => LineRadial.tsx} | 0 packages/vx-shape/src/shapes/{Pie.jsx => Pie.tsx} | 0 packages/vx-shape/src/shapes/{Polygon.jsx => Polygon.tsx} | 0 packages/vx-shape/src/shapes/{Stack.jsx => Stack.tsx} | 0 .../{LinkHorizontalCurve.jsx => LinkHorizontalCurve.tsx} | 0 .../link/curve/{LinkRadialCurve.jsx => LinkRadialCurve.tsx} | 0 .../curve/{LinkVerticalCurve.jsx => LinkVerticalCurve.tsx} | 0 .../diagonal/{LinkHorizontal.jsx => LinkHorizontal.tsx} | 0 .../shapes/link/diagonal/{LinkRadial.jsx => LinkRadial.tsx} | 0 .../link/diagonal/{LinkVertical.jsx => LinkVertical.tsx} | 0 .../line/{LinkHorizontalLine.jsx => LinkHorizontalLine.tsx} | 0 .../link/line/{LinkRadialLine.jsx => LinkRadialLine.tsx} | 0 .../line/{LinkVerticalLine.jsx => LinkVerticalLine.tsx} | 0 .../step/{LinkHorizontalStep.jsx => LinkHorizontalStep.tsx} | 0 .../link/step/{LinkRadialStep.jsx => LinkRadialStep.tsx} | 0 .../step/{LinkVerticalStep.jsx => LinkVerticalStep.tsx} | 0 .../vx-shape/src/util/{objHasMethod.js => objHasMethod.ts} | 0 .../vx-shape/src/util/{stackOffset.js => stackOffset.ts} | 0 packages/vx-shape/src/util/{stackOrder.js => stackOrder.ts} | 0 .../vx-shape/src/util/{trigonometry.js => trigonometry.ts} | 0 packages/vx-shape/test/{Arc.test.jsx => Arc.test.tsx} | 0 packages/vx-shape/test/{Area.test.jsx => Area.test.tsx} | 0 .../test/{AreaClosed.test.jsx => AreaClosed.test.tsx} | 0 .../test/{AreaStack.test.jsx => AreaStack.test.tsx} | 0 packages/vx-shape/test/{Bar.test.jsx => Bar.test.tsx} | 0 .../vx-shape/test/{BarGroup.test.jsx => BarGroup.test.tsx} | 0 ...GroupHorizontal.test.jsx => BarGroupHorizontal.test.tsx} | 0 .../vx-shape/test/{BarStack.test.jsx => BarStack.test.tsx} | 0 ...StackHorizontal.test.jsx => BarStackHorizontal.test.tsx} | 0 packages/vx-shape/test/{Circle.test.jsx => Circle.test.tsx} | 0 packages/vx-shape/test/{Line.test.jsx => Line.test.tsx} | 0 .../vx-shape/test/{LinePath.test.jsx => LinePath.test.tsx} | 0 .../test/{LineRadial.test.jsx => LineRadial.test.tsx} | 0 .../{LinkHorizontal.test.jsx => LinkHorizontal.test.tsx} | 0 .../test/{LinkRadial.test.jsx => LinkRadial.test.tsx} | 0 .../test/{LinkVertical.test.jsx => LinkVertical.test.tsx} | 0 packages/vx-shape/test/{Pie.test.jsx => Pie.test.tsx} | 0 .../vx-shape/test/{Polygon.test.jsx => Polygon.test.tsx} | 0 packages/vx-shape/test/{Stack.test.jsx => Stack.test.tsx} | 0 .../test/{stackOffset.test.js => stackOffset.test.ts} | 0 .../test/{stackOrder.test.js => stackOrder.test.ts} | 0 55 files changed, 6 insertions(+) rename packages/vx-shape/src/{index.js => index.ts} (100%) rename packages/vx-shape/src/shapes/{Arc.jsx => Arc.tsx} (100%) rename packages/vx-shape/src/shapes/{Area.jsx => Area.tsx} (100%) rename packages/vx-shape/src/shapes/{AreaClosed.jsx => AreaClosed.tsx} (100%) rename packages/vx-shape/src/shapes/{AreaStack.jsx => AreaStack.tsx} (100%) rename packages/vx-shape/src/shapes/{Bar.jsx => Bar.tsx} (100%) rename packages/vx-shape/src/shapes/{BarGroup.jsx => BarGroup.tsx} (100%) rename packages/vx-shape/src/shapes/{BarGroupHorizontal.jsx => BarGroupHorizontal.tsx} (100%) rename packages/vx-shape/src/shapes/{BarStack.jsx => BarStack.tsx} (100%) rename packages/vx-shape/src/shapes/{BarStackHorizontal.jsx => BarStackHorizontal.tsx} (100%) rename packages/vx-shape/src/shapes/{Circle.jsx => Circle.tsx} (100%) rename packages/vx-shape/src/shapes/{Line.jsx => Line.tsx} (100%) rename packages/vx-shape/src/shapes/{LinePath.jsx => LinePath.tsx} (100%) rename packages/vx-shape/src/shapes/{LineRadial.jsx => LineRadial.tsx} (100%) rename packages/vx-shape/src/shapes/{Pie.jsx => Pie.tsx} (100%) rename packages/vx-shape/src/shapes/{Polygon.jsx => Polygon.tsx} (100%) rename packages/vx-shape/src/shapes/{Stack.jsx => Stack.tsx} (100%) rename packages/vx-shape/src/shapes/link/curve/{LinkHorizontalCurve.jsx => LinkHorizontalCurve.tsx} (100%) rename packages/vx-shape/src/shapes/link/curve/{LinkRadialCurve.jsx => LinkRadialCurve.tsx} (100%) rename packages/vx-shape/src/shapes/link/curve/{LinkVerticalCurve.jsx => LinkVerticalCurve.tsx} (100%) rename packages/vx-shape/src/shapes/link/diagonal/{LinkHorizontal.jsx => LinkHorizontal.tsx} (100%) rename packages/vx-shape/src/shapes/link/diagonal/{LinkRadial.jsx => LinkRadial.tsx} (100%) rename packages/vx-shape/src/shapes/link/diagonal/{LinkVertical.jsx => LinkVertical.tsx} (100%) rename packages/vx-shape/src/shapes/link/line/{LinkHorizontalLine.jsx => LinkHorizontalLine.tsx} (100%) rename packages/vx-shape/src/shapes/link/line/{LinkRadialLine.jsx => LinkRadialLine.tsx} (100%) rename packages/vx-shape/src/shapes/link/line/{LinkVerticalLine.jsx => LinkVerticalLine.tsx} (100%) rename packages/vx-shape/src/shapes/link/step/{LinkHorizontalStep.jsx => LinkHorizontalStep.tsx} (100%) rename packages/vx-shape/src/shapes/link/step/{LinkRadialStep.jsx => LinkRadialStep.tsx} (100%) rename packages/vx-shape/src/shapes/link/step/{LinkVerticalStep.jsx => LinkVerticalStep.tsx} (100%) rename packages/vx-shape/src/util/{objHasMethod.js => objHasMethod.ts} (100%) rename packages/vx-shape/src/util/{stackOffset.js => stackOffset.ts} (100%) rename packages/vx-shape/src/util/{stackOrder.js => stackOrder.ts} (100%) rename packages/vx-shape/src/util/{trigonometry.js => trigonometry.ts} (100%) rename packages/vx-shape/test/{Arc.test.jsx => Arc.test.tsx} (100%) rename packages/vx-shape/test/{Area.test.jsx => Area.test.tsx} (100%) rename packages/vx-shape/test/{AreaClosed.test.jsx => AreaClosed.test.tsx} (100%) rename packages/vx-shape/test/{AreaStack.test.jsx => AreaStack.test.tsx} (100%) rename packages/vx-shape/test/{Bar.test.jsx => Bar.test.tsx} (100%) rename packages/vx-shape/test/{BarGroup.test.jsx => BarGroup.test.tsx} (100%) rename packages/vx-shape/test/{BarGroupHorizontal.test.jsx => BarGroupHorizontal.test.tsx} (100%) rename packages/vx-shape/test/{BarStack.test.jsx => BarStack.test.tsx} (100%) rename packages/vx-shape/test/{BarStackHorizontal.test.jsx => BarStackHorizontal.test.tsx} (100%) rename packages/vx-shape/test/{Circle.test.jsx => Circle.test.tsx} (100%) rename packages/vx-shape/test/{Line.test.jsx => Line.test.tsx} (100%) rename packages/vx-shape/test/{LinePath.test.jsx => LinePath.test.tsx} (100%) rename packages/vx-shape/test/{LineRadial.test.jsx => LineRadial.test.tsx} (100%) rename packages/vx-shape/test/{LinkHorizontal.test.jsx => LinkHorizontal.test.tsx} (100%) rename packages/vx-shape/test/{LinkRadial.test.jsx => LinkRadial.test.tsx} (100%) rename packages/vx-shape/test/{LinkVertical.test.jsx => LinkVertical.test.tsx} (100%) rename packages/vx-shape/test/{Pie.test.jsx => Pie.test.tsx} (100%) rename packages/vx-shape/test/{Polygon.test.jsx => Polygon.test.tsx} (100%) rename packages/vx-shape/test/{Stack.test.jsx => Stack.test.tsx} (100%) rename packages/vx-shape/test/{stackOffset.test.js => stackOffset.test.ts} (100%) rename packages/vx-shape/test/{stackOrder.test.js => stackOrder.test.ts} (100%) diff --git a/packages/vx-shape/package.json b/packages/vx-shape/package.json index 44789baf9..4e8aafd89 100644 --- a/packages/vx-shape/package.json +++ b/packages/vx-shape/package.json @@ -5,6 +5,7 @@ "sideEffects": false, "main": "lib/index.js", "module": "esm/index.js", + "types": "lib/index.d.ts", "repository": "https://github.com/hshoff/vx", "files": [ "lib", @@ -23,6 +24,10 @@ "author": "@hshoff", "license": "MIT", "dependencies": { + "@types/classnames": "^2.2.9", + "@types/d3-path": "^1.0.8", + "@types/d3-shape": "^1.3.1", + "@types/react": "*", "@vx/curve": "0.0.192", "@vx/group": "0.0.192", "@vx/point": "0.0.192", @@ -38,6 +43,7 @@ "access": "public" }, "devDependencies": { + "@types/d3-hierarchy": "^1.1.6", "d3-hierarchy": "^1.1.8" } } diff --git a/packages/vx-shape/src/index.js b/packages/vx-shape/src/index.ts similarity index 100% rename from packages/vx-shape/src/index.js rename to packages/vx-shape/src/index.ts diff --git a/packages/vx-shape/src/shapes/Arc.jsx b/packages/vx-shape/src/shapes/Arc.tsx similarity index 100% rename from packages/vx-shape/src/shapes/Arc.jsx rename to packages/vx-shape/src/shapes/Arc.tsx diff --git a/packages/vx-shape/src/shapes/Area.jsx b/packages/vx-shape/src/shapes/Area.tsx similarity index 100% rename from packages/vx-shape/src/shapes/Area.jsx rename to packages/vx-shape/src/shapes/Area.tsx diff --git a/packages/vx-shape/src/shapes/AreaClosed.jsx b/packages/vx-shape/src/shapes/AreaClosed.tsx similarity index 100% rename from packages/vx-shape/src/shapes/AreaClosed.jsx rename to packages/vx-shape/src/shapes/AreaClosed.tsx diff --git a/packages/vx-shape/src/shapes/AreaStack.jsx b/packages/vx-shape/src/shapes/AreaStack.tsx similarity index 100% rename from packages/vx-shape/src/shapes/AreaStack.jsx rename to packages/vx-shape/src/shapes/AreaStack.tsx diff --git a/packages/vx-shape/src/shapes/Bar.jsx b/packages/vx-shape/src/shapes/Bar.tsx similarity index 100% rename from packages/vx-shape/src/shapes/Bar.jsx rename to packages/vx-shape/src/shapes/Bar.tsx diff --git a/packages/vx-shape/src/shapes/BarGroup.jsx b/packages/vx-shape/src/shapes/BarGroup.tsx similarity index 100% rename from packages/vx-shape/src/shapes/BarGroup.jsx rename to packages/vx-shape/src/shapes/BarGroup.tsx diff --git a/packages/vx-shape/src/shapes/BarGroupHorizontal.jsx b/packages/vx-shape/src/shapes/BarGroupHorizontal.tsx similarity index 100% rename from packages/vx-shape/src/shapes/BarGroupHorizontal.jsx rename to packages/vx-shape/src/shapes/BarGroupHorizontal.tsx diff --git a/packages/vx-shape/src/shapes/BarStack.jsx b/packages/vx-shape/src/shapes/BarStack.tsx similarity index 100% rename from packages/vx-shape/src/shapes/BarStack.jsx rename to packages/vx-shape/src/shapes/BarStack.tsx diff --git a/packages/vx-shape/src/shapes/BarStackHorizontal.jsx b/packages/vx-shape/src/shapes/BarStackHorizontal.tsx similarity index 100% rename from packages/vx-shape/src/shapes/BarStackHorizontal.jsx rename to packages/vx-shape/src/shapes/BarStackHorizontal.tsx diff --git a/packages/vx-shape/src/shapes/Circle.jsx b/packages/vx-shape/src/shapes/Circle.tsx similarity index 100% rename from packages/vx-shape/src/shapes/Circle.jsx rename to packages/vx-shape/src/shapes/Circle.tsx diff --git a/packages/vx-shape/src/shapes/Line.jsx b/packages/vx-shape/src/shapes/Line.tsx similarity index 100% rename from packages/vx-shape/src/shapes/Line.jsx rename to packages/vx-shape/src/shapes/Line.tsx diff --git a/packages/vx-shape/src/shapes/LinePath.jsx b/packages/vx-shape/src/shapes/LinePath.tsx similarity index 100% rename from packages/vx-shape/src/shapes/LinePath.jsx rename to packages/vx-shape/src/shapes/LinePath.tsx diff --git a/packages/vx-shape/src/shapes/LineRadial.jsx b/packages/vx-shape/src/shapes/LineRadial.tsx similarity index 100% rename from packages/vx-shape/src/shapes/LineRadial.jsx rename to packages/vx-shape/src/shapes/LineRadial.tsx diff --git a/packages/vx-shape/src/shapes/Pie.jsx b/packages/vx-shape/src/shapes/Pie.tsx similarity index 100% rename from packages/vx-shape/src/shapes/Pie.jsx rename to packages/vx-shape/src/shapes/Pie.tsx diff --git a/packages/vx-shape/src/shapes/Polygon.jsx b/packages/vx-shape/src/shapes/Polygon.tsx similarity index 100% rename from packages/vx-shape/src/shapes/Polygon.jsx rename to packages/vx-shape/src/shapes/Polygon.tsx diff --git a/packages/vx-shape/src/shapes/Stack.jsx b/packages/vx-shape/src/shapes/Stack.tsx similarity index 100% rename from packages/vx-shape/src/shapes/Stack.jsx rename to packages/vx-shape/src/shapes/Stack.tsx diff --git a/packages/vx-shape/src/shapes/link/curve/LinkHorizontalCurve.jsx b/packages/vx-shape/src/shapes/link/curve/LinkHorizontalCurve.tsx similarity index 100% rename from packages/vx-shape/src/shapes/link/curve/LinkHorizontalCurve.jsx rename to packages/vx-shape/src/shapes/link/curve/LinkHorizontalCurve.tsx diff --git a/packages/vx-shape/src/shapes/link/curve/LinkRadialCurve.jsx b/packages/vx-shape/src/shapes/link/curve/LinkRadialCurve.tsx similarity index 100% rename from packages/vx-shape/src/shapes/link/curve/LinkRadialCurve.jsx rename to packages/vx-shape/src/shapes/link/curve/LinkRadialCurve.tsx diff --git a/packages/vx-shape/src/shapes/link/curve/LinkVerticalCurve.jsx b/packages/vx-shape/src/shapes/link/curve/LinkVerticalCurve.tsx similarity index 100% rename from packages/vx-shape/src/shapes/link/curve/LinkVerticalCurve.jsx rename to packages/vx-shape/src/shapes/link/curve/LinkVerticalCurve.tsx diff --git a/packages/vx-shape/src/shapes/link/diagonal/LinkHorizontal.jsx b/packages/vx-shape/src/shapes/link/diagonal/LinkHorizontal.tsx similarity index 100% rename from packages/vx-shape/src/shapes/link/diagonal/LinkHorizontal.jsx rename to packages/vx-shape/src/shapes/link/diagonal/LinkHorizontal.tsx diff --git a/packages/vx-shape/src/shapes/link/diagonal/LinkRadial.jsx b/packages/vx-shape/src/shapes/link/diagonal/LinkRadial.tsx similarity index 100% rename from packages/vx-shape/src/shapes/link/diagonal/LinkRadial.jsx rename to packages/vx-shape/src/shapes/link/diagonal/LinkRadial.tsx diff --git a/packages/vx-shape/src/shapes/link/diagonal/LinkVertical.jsx b/packages/vx-shape/src/shapes/link/diagonal/LinkVertical.tsx similarity index 100% rename from packages/vx-shape/src/shapes/link/diagonal/LinkVertical.jsx rename to packages/vx-shape/src/shapes/link/diagonal/LinkVertical.tsx diff --git a/packages/vx-shape/src/shapes/link/line/LinkHorizontalLine.jsx b/packages/vx-shape/src/shapes/link/line/LinkHorizontalLine.tsx similarity index 100% rename from packages/vx-shape/src/shapes/link/line/LinkHorizontalLine.jsx rename to packages/vx-shape/src/shapes/link/line/LinkHorizontalLine.tsx diff --git a/packages/vx-shape/src/shapes/link/line/LinkRadialLine.jsx b/packages/vx-shape/src/shapes/link/line/LinkRadialLine.tsx similarity index 100% rename from packages/vx-shape/src/shapes/link/line/LinkRadialLine.jsx rename to packages/vx-shape/src/shapes/link/line/LinkRadialLine.tsx diff --git a/packages/vx-shape/src/shapes/link/line/LinkVerticalLine.jsx b/packages/vx-shape/src/shapes/link/line/LinkVerticalLine.tsx similarity index 100% rename from packages/vx-shape/src/shapes/link/line/LinkVerticalLine.jsx rename to packages/vx-shape/src/shapes/link/line/LinkVerticalLine.tsx diff --git a/packages/vx-shape/src/shapes/link/step/LinkHorizontalStep.jsx b/packages/vx-shape/src/shapes/link/step/LinkHorizontalStep.tsx similarity index 100% rename from packages/vx-shape/src/shapes/link/step/LinkHorizontalStep.jsx rename to packages/vx-shape/src/shapes/link/step/LinkHorizontalStep.tsx diff --git a/packages/vx-shape/src/shapes/link/step/LinkRadialStep.jsx b/packages/vx-shape/src/shapes/link/step/LinkRadialStep.tsx similarity index 100% rename from packages/vx-shape/src/shapes/link/step/LinkRadialStep.jsx rename to packages/vx-shape/src/shapes/link/step/LinkRadialStep.tsx diff --git a/packages/vx-shape/src/shapes/link/step/LinkVerticalStep.jsx b/packages/vx-shape/src/shapes/link/step/LinkVerticalStep.tsx similarity index 100% rename from packages/vx-shape/src/shapes/link/step/LinkVerticalStep.jsx rename to packages/vx-shape/src/shapes/link/step/LinkVerticalStep.tsx diff --git a/packages/vx-shape/src/util/objHasMethod.js b/packages/vx-shape/src/util/objHasMethod.ts similarity index 100% rename from packages/vx-shape/src/util/objHasMethod.js rename to packages/vx-shape/src/util/objHasMethod.ts diff --git a/packages/vx-shape/src/util/stackOffset.js b/packages/vx-shape/src/util/stackOffset.ts similarity index 100% rename from packages/vx-shape/src/util/stackOffset.js rename to packages/vx-shape/src/util/stackOffset.ts diff --git a/packages/vx-shape/src/util/stackOrder.js b/packages/vx-shape/src/util/stackOrder.ts similarity index 100% rename from packages/vx-shape/src/util/stackOrder.js rename to packages/vx-shape/src/util/stackOrder.ts diff --git a/packages/vx-shape/src/util/trigonometry.js b/packages/vx-shape/src/util/trigonometry.ts similarity index 100% rename from packages/vx-shape/src/util/trigonometry.js rename to packages/vx-shape/src/util/trigonometry.ts diff --git a/packages/vx-shape/test/Arc.test.jsx b/packages/vx-shape/test/Arc.test.tsx similarity index 100% rename from packages/vx-shape/test/Arc.test.jsx rename to packages/vx-shape/test/Arc.test.tsx diff --git a/packages/vx-shape/test/Area.test.jsx b/packages/vx-shape/test/Area.test.tsx similarity index 100% rename from packages/vx-shape/test/Area.test.jsx rename to packages/vx-shape/test/Area.test.tsx diff --git a/packages/vx-shape/test/AreaClosed.test.jsx b/packages/vx-shape/test/AreaClosed.test.tsx similarity index 100% rename from packages/vx-shape/test/AreaClosed.test.jsx rename to packages/vx-shape/test/AreaClosed.test.tsx diff --git a/packages/vx-shape/test/AreaStack.test.jsx b/packages/vx-shape/test/AreaStack.test.tsx similarity index 100% rename from packages/vx-shape/test/AreaStack.test.jsx rename to packages/vx-shape/test/AreaStack.test.tsx diff --git a/packages/vx-shape/test/Bar.test.jsx b/packages/vx-shape/test/Bar.test.tsx similarity index 100% rename from packages/vx-shape/test/Bar.test.jsx rename to packages/vx-shape/test/Bar.test.tsx diff --git a/packages/vx-shape/test/BarGroup.test.jsx b/packages/vx-shape/test/BarGroup.test.tsx similarity index 100% rename from packages/vx-shape/test/BarGroup.test.jsx rename to packages/vx-shape/test/BarGroup.test.tsx diff --git a/packages/vx-shape/test/BarGroupHorizontal.test.jsx b/packages/vx-shape/test/BarGroupHorizontal.test.tsx similarity index 100% rename from packages/vx-shape/test/BarGroupHorizontal.test.jsx rename to packages/vx-shape/test/BarGroupHorizontal.test.tsx diff --git a/packages/vx-shape/test/BarStack.test.jsx b/packages/vx-shape/test/BarStack.test.tsx similarity index 100% rename from packages/vx-shape/test/BarStack.test.jsx rename to packages/vx-shape/test/BarStack.test.tsx diff --git a/packages/vx-shape/test/BarStackHorizontal.test.jsx b/packages/vx-shape/test/BarStackHorizontal.test.tsx similarity index 100% rename from packages/vx-shape/test/BarStackHorizontal.test.jsx rename to packages/vx-shape/test/BarStackHorizontal.test.tsx diff --git a/packages/vx-shape/test/Circle.test.jsx b/packages/vx-shape/test/Circle.test.tsx similarity index 100% rename from packages/vx-shape/test/Circle.test.jsx rename to packages/vx-shape/test/Circle.test.tsx diff --git a/packages/vx-shape/test/Line.test.jsx b/packages/vx-shape/test/Line.test.tsx similarity index 100% rename from packages/vx-shape/test/Line.test.jsx rename to packages/vx-shape/test/Line.test.tsx diff --git a/packages/vx-shape/test/LinePath.test.jsx b/packages/vx-shape/test/LinePath.test.tsx similarity index 100% rename from packages/vx-shape/test/LinePath.test.jsx rename to packages/vx-shape/test/LinePath.test.tsx diff --git a/packages/vx-shape/test/LineRadial.test.jsx b/packages/vx-shape/test/LineRadial.test.tsx similarity index 100% rename from packages/vx-shape/test/LineRadial.test.jsx rename to packages/vx-shape/test/LineRadial.test.tsx diff --git a/packages/vx-shape/test/LinkHorizontal.test.jsx b/packages/vx-shape/test/LinkHorizontal.test.tsx similarity index 100% rename from packages/vx-shape/test/LinkHorizontal.test.jsx rename to packages/vx-shape/test/LinkHorizontal.test.tsx diff --git a/packages/vx-shape/test/LinkRadial.test.jsx b/packages/vx-shape/test/LinkRadial.test.tsx similarity index 100% rename from packages/vx-shape/test/LinkRadial.test.jsx rename to packages/vx-shape/test/LinkRadial.test.tsx diff --git a/packages/vx-shape/test/LinkVertical.test.jsx b/packages/vx-shape/test/LinkVertical.test.tsx similarity index 100% rename from packages/vx-shape/test/LinkVertical.test.jsx rename to packages/vx-shape/test/LinkVertical.test.tsx diff --git a/packages/vx-shape/test/Pie.test.jsx b/packages/vx-shape/test/Pie.test.tsx similarity index 100% rename from packages/vx-shape/test/Pie.test.jsx rename to packages/vx-shape/test/Pie.test.tsx diff --git a/packages/vx-shape/test/Polygon.test.jsx b/packages/vx-shape/test/Polygon.test.tsx similarity index 100% rename from packages/vx-shape/test/Polygon.test.jsx rename to packages/vx-shape/test/Polygon.test.tsx diff --git a/packages/vx-shape/test/Stack.test.jsx b/packages/vx-shape/test/Stack.test.tsx similarity index 100% rename from packages/vx-shape/test/Stack.test.jsx rename to packages/vx-shape/test/Stack.test.tsx diff --git a/packages/vx-shape/test/stackOffset.test.js b/packages/vx-shape/test/stackOffset.test.ts similarity index 100% rename from packages/vx-shape/test/stackOffset.test.js rename to packages/vx-shape/test/stackOffset.test.ts diff --git a/packages/vx-shape/test/stackOrder.test.js b/packages/vx-shape/test/stackOrder.test.ts similarity index 100% rename from packages/vx-shape/test/stackOrder.test.js rename to packages/vx-shape/test/stackOrder.test.ts From 769bb4916d58108fb0cd100abc64f93a22fc2198 Mon Sep 17 00:00:00 2001 From: Chris Williams Date: Thu, 19 Sep 2019 13:13:31 -0700 Subject: [PATCH 02/22] typescript: mid-re-write --- packages/vx-shape/.notes | 1 + packages/vx-shape/package.json | 1 + packages/vx-shape/src/shapes/Arc.tsx | 68 ++++++----- packages/vx-shape/src/shapes/Area.tsx | 58 ++++++---- packages/vx-shape/src/shapes/AreaClosed.tsx | 54 +++++---- packages/vx-shape/src/shapes/AreaStack.tsx | 70 ++++++----- packages/vx-shape/src/shapes/Bar.tsx | 15 ++- packages/vx-shape/src/shapes/BarGroup.tsx | 105 ++++------------- .../src/shapes/BarGroupHorizontal.tsx | 41 ++++--- packages/vx-shape/src/shapes/BarStack.tsx | 53 +++++---- .../src/shapes/BarStackHorizontal.tsx | 53 +++++---- packages/vx-shape/src/shapes/Circle.tsx | 15 ++- packages/vx-shape/src/shapes/Line.tsx | 32 +++-- packages/vx-shape/src/shapes/LinePath.tsx | 98 ++++++++-------- packages/vx-shape/src/shapes/LineRadial.tsx | 34 +++--- packages/vx-shape/src/shapes/Pie.tsx | 109 ++++++++++++------ packages/vx-shape/src/shapes/Polygon.tsx | 45 +++++--- packages/vx-shape/src/shapes/Stack.tsx | 106 +++++++++++------ .../shapes/link/curve/LinkHorizontalCurve.tsx | 54 ++++++--- .../src/shapes/link/curve/LinkRadialCurve.tsx | 54 ++++++--- .../shapes/link/curve/LinkVerticalCurve.tsx | 54 ++++++--- .../shapes/link/diagonal/LinkHorizontal.tsx | 51 +++++--- .../src/shapes/link/diagonal/LinkRadial.tsx | 51 +++++--- .../src/shapes/link/diagonal/LinkVertical.tsx | 51 +++++--- .../shapes/link/line/LinkHorizontalLine.tsx | 51 +++++--- .../src/shapes/link/line/LinkRadialLine.tsx | 51 +++++--- .../src/shapes/link/line/LinkVerticalLine.tsx | 51 +++++--- .../shapes/link/step/LinkHorizontalStep.tsx | 54 ++++++--- .../src/shapes/link/step/LinkRadialStep.tsx | 51 +++++--- .../src/shapes/link/step/LinkVerticalStep.tsx | 54 ++++++--- packages/vx-shape/src/util/objHasMethod.ts | 7 +- packages/vx-shape/src/util/stackOffset.ts | 4 +- packages/vx-shape/src/util/stackOrder.ts | 4 +- packages/vx-shape/src/util/trigonometry.ts | 2 +- 34 files changed, 957 insertions(+), 645 deletions(-) create mode 100644 packages/vx-shape/.notes diff --git a/packages/vx-shape/.notes b/packages/vx-shape/.notes new file mode 100644 index 000000000..a31ca274b --- /dev/null +++ b/packages/vx-shape/.notes @@ -0,0 +1 @@ +Arc.centroid prop removed \ No newline at end of file diff --git a/packages/vx-shape/package.json b/packages/vx-shape/package.json index 4e8aafd89..63b525e0a 100644 --- a/packages/vx-shape/package.json +++ b/packages/vx-shape/package.json @@ -26,6 +26,7 @@ "dependencies": { "@types/classnames": "^2.2.9", "@types/d3-path": "^1.0.8", + "@types/d3-scale": "^2.1.1", "@types/d3-shape": "^1.3.1", "@types/react": "*", "@vx/curve": "0.0.192", diff --git a/packages/vx-shape/src/shapes/Arc.tsx b/packages/vx-shape/src/shapes/Arc.tsx index 125444f06..56cf5f95a 100644 --- a/packages/vx-shape/src/shapes/Arc.tsx +++ b/packages/vx-shape/src/shapes/Arc.tsx @@ -1,27 +1,35 @@ import React from 'react'; import cx from 'classnames'; -import PropTypes from 'prop-types'; -import { arc as d3Arc } from 'd3-shape'; +import { arc as d3Arc, Arc as ArcType } from 'd3-shape'; -Arc.propTypes = { - className: PropTypes.string, - data: PropTypes.any, - children: PropTypes.func, - innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), - centroid: PropTypes.oneOfType([PropTypes.func, PropTypes.number]), - innerRadius: PropTypes.oneOfType([PropTypes.func, PropTypes.number]), - outerRadius: PropTypes.oneOfType([PropTypes.func, PropTypes.number]), - cornerRadius: PropTypes.oneOfType([PropTypes.func, PropTypes.number]), - startAngle: PropTypes.oneOfType([PropTypes.func, PropTypes.number]), - endAngle: PropTypes.oneOfType([PropTypes.func, PropTypes.number]), - padAngle: PropTypes.oneOfType([PropTypes.func, PropTypes.number]), - padRadius: PropTypes.oneOfType([PropTypes.func, PropTypes.number]), +export type ArcProps = { + /** className applied to path element. */ + className?: string; + /** A Datum for which to generate an arc. */ + data?: Datum; + /** Override render function override which is passed the configured arc generator as input. */ + children?: (args: { path: ArcType }) => React.ReactNode; + /** React RefObject passed to the path element. */ + innerRef?: React.Ref; + /** Number or accessor function which returns a number, which defines the arc innerRadius. */ + innerRadius?: (d: Datum) => number | number; + /** Number or accessor function which returns a number, which defines the arc outerRadius. */ + outerRadius?: (d: Datum) => number | number; + /** Number or accessor function which returns a number, which defines the arc cornerRadius. */ + cornerRadius?: (d: Datum) => number | number; + /** Number or accessor function which returns a number, which defines the arc startAngle. */ + startAngle?: (d: Datum) => number | number; + /** Number or accessor function which returns a number, which defines the arc endAngle. */ + endAngle?: (d: Datum) => number | number; + /** Number or accessor function which returns a number, which defines the arc padAngle. */ + padAngle?: (d: Datum) => number | number; + /** Number or accessor function which returns a number, which defines the arc padRadius. */ + padRadius?: (d: Datum) => number | number; }; -export default function Arc({ +export default function Arc({ className, data, - centroid, innerRadius, outerRadius, cornerRadius, @@ -32,16 +40,20 @@ export default function Arc({ children, innerRef, ...restProps -}) { - const arc = d3Arc(); - if (centroid) arc.centroid(centroid); - if (innerRadius !== undefined) arc.innerRadius(innerRadius); - if (outerRadius !== undefined) arc.outerRadius(outerRadius); - if (cornerRadius !== undefined) arc.cornerRadius(cornerRadius); - if (startAngle !== undefined) arc.startAngle(startAngle); - if (endAngle !== undefined) arc.endAngle(endAngle); - if (padAngle !== undefined) arc.padAngle(padAngle); - if (padRadius !== undefined) arc.padRadius(padRadius); +}: ArcProps & React.SVGProps) { + const arc = d3Arc(); + if (innerRadius != null) arc.innerRadius(innerRadius); + if (outerRadius != null) arc.outerRadius(outerRadius); + if (cornerRadius != null) arc.cornerRadius(cornerRadius); + if (startAngle != null) arc.startAngle(startAngle); + if (endAngle != null) arc.endAngle(endAngle); + if (padAngle != null) arc.padAngle(padAngle); + if (padRadius != null) arc.padRadius(padRadius); if (children) return children({ path: arc }); - return ; + + return ( + data && ( + + ) + ); } diff --git a/packages/vx-shape/src/shapes/Area.tsx b/packages/vx-shape/src/shapes/Area.tsx index 497682006..8e7b80c99 100644 --- a/packages/vx-shape/src/shapes/Area.tsx +++ b/packages/vx-shape/src/shapes/Area.tsx @@ -1,24 +1,37 @@ import React from 'react'; import cx from 'classnames'; -import PropTypes from 'prop-types'; -import { area } from 'd3-shape'; +import { area, Area as AreaType, CurveFactory } from 'd3-shape'; -Area.propTypes = { - children: PropTypes.func, - className: PropTypes.string, - data: PropTypes.any, - defined: PropTypes.func, - curve: PropTypes.func, - innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), - x: PropTypes.oneOfType([PropTypes.func, PropTypes.number]), - x0: PropTypes.oneOfType([PropTypes.func, PropTypes.number]), - x1: PropTypes.oneOfType([PropTypes.func, PropTypes.number]), - y: PropTypes.oneOfType([PropTypes.func, PropTypes.number]), - y0: PropTypes.oneOfType([PropTypes.func, PropTypes.number]), - y1: PropTypes.oneOfType([PropTypes.func, PropTypes.number]), +type Accessor = (datum: Datum, index: number, data: Datum[]) => number; + +export type AreaProps = { + /** Override render function override which is passed the configured area generator as input. */ + children?: (args: { path: AreaType }) => React.ReactNode; + /** Classname applied to path element. */ + className?: string; + /** Array of data for which to generate an area shape. */ + data?: Datum[]; + /** The defined accessor for the shape. The final area shape includes all points for which this function returns true. By default all points are defined. */ + defined?: (datum: Datum, index: number, data: Datum[]) => boolean; + /** Sets the curve factory (from @vx/curve or d3-curve) for the area generator. Defaults to curveLinear. */ + curve?: CurveFactory; + /** React RefObject passed to the path element. */ + innerRef?: React.Ref; + /** Sets the x0 accessor function, and sets x1 to null. */ + x?: Accessor; + /** Specifies the x0 accessor function which defaults to d => d[0]. */ + x0?: Accessor; + /** Specifies the x1 accessor function which defaults to null. */ + x1?: Accessor; + /** Sets the y0 accessor function, and sets y1 to null. */ + y?: Accessor; + /** Specifies the y0 accessor function which defaults to d => 0. */ + y0?: Accessor; + /** Specifies the y1 accessor function which defaults to d => d[1]. */ + y1?: Accessor; }; -export default function Area({ +export default function Area({ children, x, x0, @@ -26,14 +39,14 @@ export default function Area({ y, y0, y1, - data, + data = [], defined = () => true, className, curve, innerRef, ...restProps -}) { - const path = area(); +}: AreaProps & React.SVGProps) { + const path = area(); if (x) path.x(x); if (x0) path.x0(x0); if (x1) path.x1(x1); @@ -45,7 +58,12 @@ export default function Area({ if (children) return children({ path }); return ( - + ); } diff --git a/packages/vx-shape/src/shapes/AreaClosed.tsx b/packages/vx-shape/src/shapes/AreaClosed.tsx index 03800cf25..a24686a56 100644 --- a/packages/vx-shape/src/shapes/AreaClosed.tsx +++ b/packages/vx-shape/src/shapes/AreaClosed.tsx @@ -1,25 +1,33 @@ import React from 'react'; import cx from 'classnames'; -import PropTypes from 'prop-types'; import { area } from 'd3-shape'; +import { AreaProps } from './Area'; -AreaClosed.propTypes = { - children: PropTypes.func, - className: PropTypes.string, - data: PropTypes.any, - defined: PropTypes.func, - curve: PropTypes.func, - yScale: PropTypes.func, - innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), - x: PropTypes.oneOfType([PropTypes.func, PropTypes.number]), - y: PropTypes.oneOfType([PropTypes.func, PropTypes.number]), - x0: PropTypes.oneOfType([PropTypes.func, PropTypes.number]), - x1: PropTypes.oneOfType([PropTypes.func, PropTypes.number]), - y1: PropTypes.oneOfType([PropTypes.func, PropTypes.number]), - y0: PropTypes.oneOfType([PropTypes.func, PropTypes.number]), -}; +/** @TODO may need to revisit this. */ +interface ScaleType { + (): any; + range(): [number, number]; +} + +export type AreaClosedProps = { + yScale: ScaleType; +} & Pick< + AreaProps, + | 'className' + | 'innerRef' + | 'children' + | 'curve' + | 'defined' + | 'data' + | 'x' + | 'x0' + | 'x1' + | 'y' + | 'y0' + | 'y1' +>; -export default function AreaClosed({ +export default function AreaClosed({ x, x0, x1, @@ -27,21 +35,25 @@ export default function AreaClosed({ y1, y0, yScale, - data, + data = [], defined = () => true, className, curve, innerRef, children, ...restProps -}) { - const path = area(); +}: AreaClosedProps & React.SVGProps) { + const path = area(); if (x) path.x(x); if (x0) path.x0(x0); if (x1) path.x1(x1); if (y0) { path.y0(y0); } else { + /** + * by default set the baseline to the first element of the yRange + * @TODO take the minimum instead? + */ path.y0(yScale.range()[0]); } if (y && !y1) path.y1(y); @@ -53,7 +65,7 @@ export default function AreaClosed({ ); diff --git a/packages/vx-shape/src/shapes/AreaStack.tsx b/packages/vx-shape/src/shapes/AreaStack.tsx index 58782b6fa..794756aac 100644 --- a/packages/vx-shape/src/shapes/AreaStack.tsx +++ b/packages/vx-shape/src/shapes/AreaStack.tsx @@ -1,30 +1,29 @@ import React from 'react'; import cx from 'classnames'; -import PropTypes from 'prop-types'; -import Stack from './Stack'; +import Stack, { StackProps } from './Stack'; -AreaStack.propTypes = { - className: PropTypes.string, - top: PropTypes.number, - left: PropTypes.number, - keys: PropTypes.array, - data: PropTypes.array, - curve: PropTypes.func, - color: PropTypes.func, - children: PropTypes.func, - x: PropTypes.oneOfType([PropTypes.func, PropTypes.number]), - x0: PropTypes.oneOfType([PropTypes.func, PropTypes.number]), - x1: PropTypes.oneOfType([PropTypes.func, PropTypes.number]), - y: PropTypes.oneOfType([PropTypes.func, PropTypes.number]), - y0: PropTypes.oneOfType([PropTypes.func, PropTypes.number]), - y1: PropTypes.oneOfType([PropTypes.func, PropTypes.number]), - value: PropTypes.oneOfType([PropTypes.func, PropTypes.number]), - defined: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]), - order: PropTypes.oneOfType([PropTypes.func, PropTypes.array, PropTypes.string]), - offset: PropTypes.oneOfType([PropTypes.func, PropTypes.array, PropTypes.string]), -}; +export type AreaStackProps = Pick< + StackProps, + | 'className' + | 'top' + | 'left' + | 'keys' + | 'data' + | 'curve' + | 'defined' + | 'x' + | 'x0' + | 'x1' + | 'y0' + | 'y1' + | 'value' + | 'order' + | 'offset' + | 'color' + | 'children' +>; -export default function AreaStack({ +export default function AreaStack({ className, top, left, @@ -43,7 +42,7 @@ export default function AreaStack({ color, children, ...restProps -}) { +}: AreaStackProps & React.SVGProps) { return ( {children || - (({ stacks, path }) => { - return stacks.map((series, i) => { - return ( - - ); - }); - })} + (({ stacks, path }) => + stacks.map((series: $TSFixMe, i: $TSFixMe) => ( + + )))} ); } diff --git a/packages/vx-shape/src/shapes/Bar.tsx b/packages/vx-shape/src/shapes/Bar.tsx index f2de1b495..7ad1efacf 100644 --- a/packages/vx-shape/src/shapes/Bar.tsx +++ b/packages/vx-shape/src/shapes/Bar.tsx @@ -1,12 +1,17 @@ import React from 'react'; import cx from 'classnames'; -import PropTypes from 'prop-types'; -Bar.propTypes = { - className: PropTypes.string, - innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), +export type BarProps = { + /** className to apply to rect element. */ + className?: string; + /** reference to rect element. */ + innerRef?: React.Ref; }; -export default function Bar({ className, innerRef, ...restProps }) { +export default function Bar({ + className, + innerRef, + ...restProps +}: BarProps & React.SVGProps) { return ; } diff --git a/packages/vx-shape/src/shapes/BarGroup.tsx b/packages/vx-shape/src/shapes/BarGroup.tsx index 0a017e3d9..80cdb9f0a 100644 --- a/packages/vx-shape/src/shapes/BarGroup.tsx +++ b/packages/vx-shape/src/shapes/BarGroup.tsx @@ -1,90 +1,30 @@ import React from 'react'; -import PropTypes from 'prop-types'; import cx from 'classnames'; import { Group } from '@vx/group'; import objHasMethod from '../util/objHasMethod'; import Bar from './Bar'; -BarGroup.propTypes = { - /** - * An array of bar group objects. - */ - data: PropTypes.array.isRequired, - /** - * ```js - * x0(barGroup) - * ``` - * An accessor function that returns the `x0` value for each datum in *props*.**data**. - */ - x0: PropTypes.func.isRequired, - /** - * ```js - * x0Scale(x0(barGroup)) - * ``` - * A scale function that returns the x position of the bar group. - */ - x0Scale: PropTypes.func.isRequired, - /** - * ```js - * x1Scale(key) - * ``` - * A scale function that returns the x position of the bar within a bar group. - */ - x1Scale: PropTypes.func.isRequired, - /** - * ```js - * yScale(value) - * ``` - * A scale function that retuns the y position of the bar within a bar group. `value` is the value of the `key` in the bar group. - */ - yScale: PropTypes.func.isRequired, - /** - * ```js - * color(key, barIndex) - * ``` - * A function that returns color for each bar within a bar group. - */ - color: PropTypes.func.isRequired, - /** - * An array of strings containing the key for each bar group. Each bar within a bar group will follow the order of this array. - */ - keys: PropTypes.array.isRequired, - /** - * Height is used to align the bottom of the the bars. barHeight = height - yScale(bar.value), where bar.y = yScale(bar.value). - */ - height: PropTypes.number.isRequired, - /** - * Add a class name to the containing `` element. - */ - className: PropTypes.string, - /** - * A top pixel offset applied to the entire bar group. - */ - top: PropTypes.number, - /** - * A left pixel offset applied to the entire bar group. - */ - left: PropTypes.number, - /** - * A function that returns a react component. Useful for generating the bar group data with full control over what is rendered. The functions first argument will be the bar groups data as an array of objects with the following properties: - * - * - `index` - the index of the group based on *props*.**data** array. - * - `x0` - the position of the group based on *props*.**x0** & *props*.**x0Scale**. - * - `bars` - array of objects, ordered by *props*.**keys**, with the following properties: - * + `index` - the index of the bar for the current group. - * + `key` - the key of the bar. - * + `width` - the width of the bar. This will be `x1Scale.bandwidth()`. If `x1Scale` does not have a bandwidth property, then it becomes: - * ```js - * x1Range = x1Scale.range(); - * x1Domain = x1Scale.domain(); - * barWidth = Math.abs(x1Range[x1Range.length - 1] - x1Range[0]) / x1Domain.length - * ``` - * + `height` - the height of the bar. - * + `x` - the x position of the bar. - * + `y` - the y position of the bar. - * + `color` - the color of the bar. - */ - children: PropTypes.func, +type Props = { + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. + data: $TSFixMe[]; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + x0: $TSFixMeFunction; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + x0Scale: $TSFixMeFunction; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + x1Scale: $TSFixMeFunction; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + yScale: $TSFixMeFunction; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + color: $TSFixMeFunction; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. + keys: $TSFixMe[]; + height: number; + className?: string; + top?: number; + left?: number; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + children?: $TSFixMeFunction; }; /** @@ -139,7 +79,7 @@ export default function BarGroup({ height, children, ...restProps -}) { +}: Props) { const x1Range = x1Scale.range(); const x1Domain = x1Scale.domain(); @@ -176,6 +116,7 @@ export default function BarGroup({ {barGroup.bars.map(bar => { return ( + // @ts-ignore ts-migrate(2322) FIXME: Property 'x' does not exist on type 'IntrinsicAttr... Remove this comment to see the full error message {barGroup.bars.map(bar => { return ( + // @ts-ignore ts-migrate(2322) FIXME: Property 'x' does not exist on type 'IntrinsicAttr... Remove this comment to see the full error message d[0], - y1 = d => d[1], + y0 = (d: $TSFixMe) => d[0], + y1 = (d: $TSFixMe) => d[1], xScale, yScale, color, @@ -43,7 +55,7 @@ export default function BarStack({ offset, children, ...restProps -}) { +}: Props) { const stack = d3stack(); if (keys) stack.keys(keys); if (value) stack.value(value); @@ -90,6 +102,7 @@ export default function BarStack({ {barStacks.map(barStack => { return barStack.bars.map(bar => { return ( + // @ts-ignore ts-migrate(2322) FIXME: Property 'x' does not exist on type 'IntrinsicAttr... Remove this comment to see the full error message d[0], - x1 = d => d[1], + x0 = (d: $TSFixMe) => d[0], + x1 = (d: $TSFixMe) => d[1], xScale, yScale, color, @@ -43,7 +55,7 @@ export default function BarStackHorizontal({ offset, children, ...restProps -}) { +}: Props) { const stack = d3stack(); if (keys) stack.keys(keys); if (value) stack.value(value); @@ -90,6 +102,7 @@ export default function BarStackHorizontal({ {barStacks.map(barStack => { return barStack.bars.map(bar => { return ( + // @ts-ignore ts-migrate(2322) FIXME: Property 'x' does not exist on type 'IntrinsicAttr... Remove this comment to see the full error message ; }; -export default function Circle({ className, innerRef, ...restProps }) { +export default function Circle({ + className, + innerRef, + ...restProps +}: CircleProps & React.SVGProps) { return ; } diff --git a/packages/vx-shape/src/shapes/Line.tsx b/packages/vx-shape/src/shapes/Line.tsx index 9ac3b41d1..c42c3e448 100644 --- a/packages/vx-shape/src/shapes/Line.tsx +++ b/packages/vx-shape/src/shapes/Line.tsx @@ -1,24 +1,32 @@ import React from 'react'; import cx from 'classnames'; -import PropTypes from 'prop-types'; -import { Point } from '@vx/point'; -Line.propTypes = { - className: PropTypes.string, - innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), - fill: PropTypes.string, - from: PropTypes.shape({ x: PropTypes.number, y: PropTypes.number }), - to: PropTypes.shape({ x: PropTypes.number, y: PropTypes.number }), +interface Point { + x?: number; + y?: number; +} + +export type LineProps = { + /** className to apply to line element. */ + className?: string; + /** reference to line element. */ + innerRef?: React.Ref; + /** fill color applied to line element. */ + fill?: string; + /** Starting x,y point of the line. */ + from?: Point; + /** Ending x,y point of the line. */ + to?: Point; }; export default function Line({ - from = new Point({ x: 0, y: 0 }), - to = new Point({ x: 1, y: 1 }), + from = { x: 0, y: 0 }, + to = { x: 1, y: 1 }, fill = 'transparent', - className = '', + className, innerRef, ...restProps -}) { +}: LineProps & Omit, 'from' | 'to'>) { return ( true, - ...restProps -}) { - const path = line(); - if (x) path.x(x); - if (y) path.y(y); - if (defined) path.defined(defined); - if (curve) path.curve(curve); - if (children) return children({ path }); - return ( - - ); -} +import React from 'react'; +import cx from 'classnames'; +import { line, Line as LineType, CurveFactory } from 'd3-shape'; + +export type LinePathProps = { + /** Array of data for which to generate a line shape. */ + data?: Datum[]; + /** Sets the curve factory (from @vx/curve or d3-curve) for the area generator. Defaults to curveLinear. */ + curve?: CurveFactory; + /** React RefObject passed to the path element. */ + innerRef?: React.Ref; + /** The defined accessor for the shape. The final line shape includes all points for which this function returns true. By default all points are defined. */ + defined?: (datum: Datum, index: number, data: Datum[]) => boolean; + /** Given a datum, returns the x value. Defaults to d[0]. */ + x?: (datum: Datum, index: number, data: Datum[]) => number; + /** Given a datum, returns the y value. Defaults to d[1]. */ + y?: (datum: Datum, index: number, data: Datum[]) => number; + /** Override render function override which is passed the configured path generator as input. */ + children?: (args: { path: LineType }) => React.ReactNode; + /** Fill color of the path element. */ + fill?: string; + /** className applied to path element. */ + className?: string; +}; + +export default function LinePath({ + children, + data = [], + x, + y, + fill = 'transparent', + className, + curve, + innerRef, + defined = () => true, + ...restProps +}: LinePathProps & React.SVGProps) { + const path = line(); + if (x) path.x(x); + if (y) path.y(y); + if (defined) path.defined(defined); + if (curve) path.curve(curve); + if (children) return children({ path }); + return ( + + ); +} diff --git a/packages/vx-shape/src/shapes/LineRadial.tsx b/packages/vx-shape/src/shapes/LineRadial.tsx index bcfc17445..8c9fd287f 100644 --- a/packages/vx-shape/src/shapes/LineRadial.tsx +++ b/packages/vx-shape/src/shapes/LineRadial.tsx @@ -1,33 +1,33 @@ import React from 'react'; import cx from 'classnames'; -import PropTypes from 'prop-types'; -import { radialLine } from 'd3-shape'; +import { radialLine, RadialLine } from 'd3-shape'; +import { LinePathProps } from './LinePath'; -LineRadial.propTypes = { - className: PropTypes.string, - children: PropTypes.func, - curve: PropTypes.func, - data: PropTypes.any, - defined: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]), - fill: PropTypes.string, - angle: PropTypes.oneOfType([PropTypes.func, PropTypes.number]), - radius: PropTypes.oneOfType([PropTypes.func, PropTypes.number]), - innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), +export type LineRadialProps = Pick< + LinePathProps, + 'className' | 'curve' | 'data' | 'defined' | 'fill' | 'innerRef' +> & { + /** Override render function override which is passed the configured path generator as input. */ + children?: (args: { path: RadialLine }) => React.ReactNode; + /** Returns the angle value in radians for a given Datum, with 0 at -y (12 o’clock). */ + angle?: (datum: Datum, index: number, data: Datum[]) => number; + /** Returns the radius value in radians for a given Datum, with 0 at the center. */ + radius?: (datum: Datum, index: number, data: Datum[]) => number; }; -export default function LineRadial({ +export default function LineRadial({ className, angle, radius, defined, curve, - data, + data = [], innerRef, children, fill = 'transparent', ...restProps -}) { - const path = radialLine(); +}: LineRadialProps & React.SVGProps) { + const path = radialLine(); if (angle) path.angle(angle); if (radius) path.radius(radius); if (defined) path.defined(defined); @@ -37,7 +37,7 @@ export default function LineRadial({ diff --git a/packages/vx-shape/src/shapes/Pie.tsx b/packages/vx-shape/src/shapes/Pie.tsx index 8d21a06e5..ae2d0102e 100644 --- a/packages/vx-shape/src/shapes/Pie.tsx +++ b/packages/vx-shape/src/shapes/Pie.tsx @@ -1,33 +1,70 @@ import React from 'react'; import cx from 'classnames'; -import PropTypes from 'prop-types'; import { Group } from '@vx/group'; -import { arc as d3Arc, pie as d3Pie } from 'd3-shape'; +import { arc as d3Arc, Arc as ArcType, PieArcDatum, pie as d3Pie, Pie as PieType } from 'd3-shape'; -Pie.propTypes = { - className: PropTypes.string, - top: PropTypes.number, - left: PropTypes.number, - data: PropTypes.array, - centroid: PropTypes.oneOfType([PropTypes.func, PropTypes.number]), - innerRadius: PropTypes.oneOfType([PropTypes.func, PropTypes.number]), - outerRadius: PropTypes.oneOfType([PropTypes.func, PropTypes.number]), - cornerRadius: PropTypes.oneOfType([PropTypes.func, PropTypes.number]), - startAngle: PropTypes.oneOfType([PropTypes.func, PropTypes.number]), - endAngle: PropTypes.oneOfType([PropTypes.func, PropTypes.number]), - padAngle: PropTypes.oneOfType([PropTypes.func, PropTypes.number]), - padRadius: PropTypes.oneOfType([PropTypes.func, PropTypes.number]), - pieValue: PropTypes.oneOfType([PropTypes.func, PropTypes.number]), - pieSort: PropTypes.func, - pieSortValues: PropTypes.func, - children: PropTypes.func, +type NumberAccessor = (d: Datum) => number; + +export type PieProps = { + /** className applied to path element. */ + className?: string; + /** Top offset of rendered Pie. */ + top?: number; + /** Left offset of rendered Pie. */ + left?: number; + /** Array of data to generate a Pie for. */ + data?: Datum[]; + /** Invoked for each datum, returns the value for a given Pie segment/arc datum. */ + pieValue?: NumberAccessor; + /** Comparator function to sort *arcs* different from input data order. Overridden by pieSortValues if defined. */ + pieSort?: (a: Datum, b: Datum) => number; + /** Comparator function to sort arc *values* different from input data order. Overrides pieSort if defined. */ + pieSortValues?: (a: number, b: number) => number; + /** Optional render function invoked for each Datum to render something (e.g., a Label) at each pie centroid. */ + centroid?: (xyCoords: [number, number], arc: PieArcDatum) => React.ReactNode; + /** Inner radius of the Arc shape. */ + innerRadius?: NumberAccessor | number; + /** Inner radius of the Arc shape. */ + outerRadius?: NumberAccessor | number; + /** Inner radius of the Arc shape. */ + cornerRadius?: NumberAccessor | number; + /** Padding radius of the Arc shape, which determines the fixed linear distance separating adjacent arcs. */ + padRadius?: NumberAccessor | number; + /** Returns the start angle of the overall Pie shape (the first value starts at startAngle), with 0 at -y (12 o’clock) and positive angles proceeding clockwise. */ + startAngle?: NumberAccessor | number; + /** Returns the end angle of the overall Pie shape (the last value ends at endAngle), with 0 at -y (12 o’clock) and positive angles proceeding clockwise. */ + endAngle?: NumberAccessor | number; + /** Padding angle of the Pie shape, which sets a fixed linear distance separating adjacent arcs. */ + padAngle?: NumberAccessor | number; + /** Override render function override which is passed the configured arc generator as input. */ + children?: (args: { + path: ArcType; + arcs: PieArcDatum[]; + pie: PieType; + }) => React.ReactNode; }; -export default function Pie({ +class PieChart { + public innerRadius(num: number): void {} + public innerRadius(func: (d: DataShape) => number): void {} +} + +type Datum = { value: number }; +const pie = new PieChart(); + +pie.innerRadius(); // error +pie.innerRadius(123); // okay +pie.innerRadius((d: Datum) => d.value); // okay + +const asProp1 = (_: number) => pie.innerRadius(_); // okay +const asProp2 = (_: Datum) => pie.innerRadius(_); // okay +const asProp3 = (_: number | Datum) => pie.innerRadius(_); // okay + +export default function Pie({ className, top, left, - data, + data = [], centroid, innerRadius = 0, outerRadius, @@ -41,17 +78,17 @@ export default function Pie({ pieValue, children, ...restProps -}) { - const path = d3Arc(); - if (innerRadius != null) path.innerRadius(innerRadius); - if (outerRadius != null) path.outerRadius(outerRadius); +}: PieProps & React.SVGProps) { + const path = d3Arc(); + if (innerRadius != null) path.innerRadius(innerRadius as number); + if (outerRadius != null) path.outerRadius(outerRadius as NumberAccessor); if (cornerRadius != null) path.cornerRadius(cornerRadius); if (padRadius != null) path.padRadius(padRadius); - const pie = d3Pie(); - if (pieSort !== undefined) pie.sort(pieSort); - if (pieSortValues !== undefined) pie.sortValues(pieSortValues); - if (pieValue !== undefined) pie.value(pieValue); + const pie = d3Pie(); + if (pieSort != null) pie.sort(pieSort); + if (pieSortValues != null) pie.sortValues(pieSortValues); + if (pieValue != null) pie.value(pieValue); if (padAngle != null) pie.padAngle(padAngle); if (startAngle != null) pie.startAngle(startAngle); if (endAngle != null) pie.endAngle(endAngle); @@ -62,14 +99,12 @@ export default function Pie({ return ( - {arcs.map((arc, i) => { - return ( - - - {centroid && centroid(path.centroid(arc), arc)} - - ); - })} + {arcs.map((arc, i) => ( + + + {centroid && centroid(path.centroid(arc), arc)} + + ))} ); } diff --git a/packages/vx-shape/src/shapes/Polygon.tsx b/packages/vx-shape/src/shapes/Polygon.tsx index 12098b133..22bd618fa 100644 --- a/packages/vx-shape/src/shapes/Polygon.tsx +++ b/packages/vx-shape/src/shapes/Polygon.tsx @@ -1,20 +1,16 @@ import React from 'react'; -import PropTypes from 'prop-types'; import cx from 'classnames'; import { Point } from '@vx/point'; import { degreesToRadians } from '../util/trigonometry'; -Polygon.propTypes = { - sides: PropTypes.number.isRequired, - size: PropTypes.number.isRequired, - className: PropTypes.string, - rotate: PropTypes.number, - children: PropTypes.func, - innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), - center: PropTypes.shape({ x: PropTypes.number, y: PropTypes.number }), -}; - -export const getPoint = ({ sides, size, center, rotate, side }) => { +export const getPoint = ({ + sides, + size, + center, + rotate, + side, +}: // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. +$TSFixMe) => { const degrees = (360 / sides) * side - rotate; const radians = degreesToRadians(degrees); @@ -24,7 +20,13 @@ export const getPoint = ({ sides, size, center, rotate, side }) => { }); }; -export const getPoints = ({ sides, size, center, rotate }) => +export const getPoints = ({ + sides, + size, + center, + rotate, +}: // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. +$TSFixMe) => new Array(sides).fill(0).map((_, side) => getPoint({ sides, @@ -35,6 +37,21 @@ export const getPoints = ({ sides, size, center, rotate }) => }), ); +type Props = { + sides: number; + size: number; + className?: string; + rotate?: number; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + children?: $TSFixMeFunction; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + innerRef?: $TSFixMeFunction | $TSFixMe; + center?: { + x?: number; + y?: number; + }; +}; + export default function Polygon({ sides, size = 25, @@ -44,7 +61,7 @@ export default function Polygon({ children, innerRef, ...restProps -}) { +}: Props) { const points = getPoints({ sides, size, diff --git a/packages/vx-shape/src/shapes/Stack.tsx b/packages/vx-shape/src/shapes/Stack.tsx index 321837afc..ab3176129 100644 --- a/packages/vx-shape/src/shapes/Stack.tsx +++ b/packages/vx-shape/src/shapes/Stack.tsx @@ -1,33 +1,65 @@ import React from 'react'; import cx from 'classnames'; -import PropTypes from 'prop-types'; import { Group } from '@vx/group'; -import { area, stack as d3stack } from 'd3-shape'; -import stackOrder from '../util/stackOrder'; -import stackOffset from '../util/stackOffset'; +import { + area, + Area as AreaType, + stack as d3stack, + Stack as StackType, + CurveFactory, + SeriesPoint, +} from 'd3-shape'; -Stack.propTypes = { - data: PropTypes.array.isRequired, - className: PropTypes.string, - top: PropTypes.number, - left: PropTypes.number, - curve: PropTypes.func, - color: PropTypes.func, - keys: PropTypes.array, - children: PropTypes.func, - x: PropTypes.oneOfType([PropTypes.func, PropTypes.number]), - x0: PropTypes.oneOfType([PropTypes.func, PropTypes.number]), - x1: PropTypes.oneOfType([PropTypes.func, PropTypes.number]), - y: PropTypes.oneOfType([PropTypes.func, PropTypes.number]), - y0: PropTypes.oneOfType([PropTypes.func, PropTypes.number]), - y1: PropTypes.oneOfType([PropTypes.func, PropTypes.number]), - value: PropTypes.oneOfType([PropTypes.func, PropTypes.number]), - defined: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]), - order: PropTypes.oneOfType([PropTypes.func, PropTypes.array, PropTypes.string]), - offset: PropTypes.oneOfType([PropTypes.func, PropTypes.array, PropTypes.string]), +import stackOrder, { STACK_ORDERS } from '../util/stackOrder'; +import stackOffset, { STACK_OFFSETS } from '../util/stackOffset'; + +type Accessor = (datum: Datum, index: number, data: Datum[]) => number; +type Key = string; + +export type StackProps = { + /** Array of data for which to generate a stack. */ + data: Datum[]; + /** className applied to path element. */ + className?: string; + /** Top offset of rendered Stack. */ + top?: number; + /** Left offset of rendered Stack. */ + left?: number; + /** Sets the curve factory (from @vx/curve or d3-curve) for the area generator. Defaults to curveLinear. */ + curve?: CurveFactory; + /** Returns a color for a given stack key and index. */ + color?: (key: Key, index: number) => string; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. + keys?: Key[]; + /** Override render function override which is passed the configured arc generator as input. */ + children?: (args: { + stacks: any; + path: AreaType>; + stack: StackType; + }) => React.ReactNode; + /** Sets the x0 accessor function, and sets x1 to null. */ + x?: Accessor>; + /** Specifies the x0 accessor function which defaults to d => d[0]. */ + x0?: Accessor>; + /** Specifies the x1 accessor function which defaults to null. */ + x1?: Accessor>; + /** Sets the y0 accessor function, and sets y1 to null. */ + y?: Accessor>; + /** Specifies the y0 accessor function which defaults to d => 0. */ + y0?: Accessor>; + /** Specifies the y1 accessor function which defaults to d => d[1]. */ + y1?: Accessor>; + /** Sets the value accessor for a Datum, which defaults to d[key]. */ + value?: (d: Datum, key: string) => number; + /** The defined accessor for the shape. The final area shape includes all points for which this function returns true. By default all points are defined. */ + defined?: (datum: SeriesPoint, index: number, data: SeriesPoint[]) => boolean; + /** Sets the stack order to the pre-defined d3 function, see https://github.com/d3/d3-shape#stack_order. */ + order?: keyof typeof STACK_ORDERS; + /** Sets the stack offset to the pre-defined d3 offset, see https://github.com/d3/d3-shape#stack_offset. */ + offset?: keyof typeof STACK_OFFSETS; }; -export default function Stack({ +export default function Stack({ className, top, left, @@ -46,14 +78,14 @@ export default function Stack({ color, children, ...restProps -}) { - const stack = d3stack(); +}: StackProps & React.SVGProps) { + const stack = d3stack(); if (keys) stack.keys(keys); if (value) stack.value(value); if (order) stack.order(stackOrder(order)); if (offset) stack.offset(stackOffset(offset)); - const path = area(); + const path = area>(); if (x) path.x(x); if (x0) path.x0(x0); if (x1) path.x1(x1); @@ -68,17 +100,15 @@ export default function Stack({ return ( - {stacks.map((series, i) => { - return ( - - ); - })} + {stacks.map((series, i) => ( + + ))} ); } diff --git a/packages/vx-shape/src/shapes/link/curve/LinkHorizontalCurve.tsx b/packages/vx-shape/src/shapes/link/curve/LinkHorizontalCurve.tsx index 170848996..ad51d8181 100644 --- a/packages/vx-shape/src/shapes/link/curve/LinkHorizontalCurve.tsx +++ b/packages/vx-shape/src/shapes/link/curve/LinkHorizontalCurve.tsx @@ -1,10 +1,17 @@ import React from 'react'; import cx from 'classnames'; -import PropTypes from 'prop-types'; import { path as d3Path } from 'd3-path'; -export function pathHorizontalCurve({ source, target, x, y, percent }) { - return data => { +export function pathHorizontalCurve({ + source, + target, + x, + y, + percent, +}: // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. +$TSFixMe) { + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. + return (data: $TSFixMe) => { const sourceData = source(data); const targetData = target(data); @@ -26,32 +33,41 @@ export function pathHorizontalCurve({ source, target, x, y, percent }) { }; } -LinkHorizontalCurve.propTypes = { - className: PropTypes.string, - innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), - percent: PropTypes.number, - x: PropTypes.func, - y: PropTypes.func, - source: PropTypes.func, - target: PropTypes.func, - path: PropTypes.func, - children: PropTypes.func, - data: PropTypes.any, +type Props = { + className?: string; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + innerRef?: $TSFixMeFunction | $TSFixMe; + percent?: number; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + x?: $TSFixMeFunction; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + y?: $TSFixMeFunction; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + source?: $TSFixMeFunction; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + target?: $TSFixMeFunction; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + path?: $TSFixMeFunction; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + children?: $TSFixMeFunction; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. + data?: $TSFixMe; }; +// @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. export default function LinkHorizontalCurve({ className, innerRef, data, path, - x = d => d.y, - y = d => d.x, - source = d => d.source, - target = d => d.target, + x = (d: $TSFixMe) => d.y, + y = (d: $TSFixMe) => d.x, + source = (d: $TSFixMe) => d.source, + target = (d: $TSFixMe) => d.target, percent = 0.2, children, ...restProps -}) { +}: Props) { const pathGen = path || pathHorizontalCurve({ source, target, x, y, percent }); if (children) return children({ path }); return ( diff --git a/packages/vx-shape/src/shapes/link/curve/LinkRadialCurve.tsx b/packages/vx-shape/src/shapes/link/curve/LinkRadialCurve.tsx index b0c44bada..13816e776 100644 --- a/packages/vx-shape/src/shapes/link/curve/LinkRadialCurve.tsx +++ b/packages/vx-shape/src/shapes/link/curve/LinkRadialCurve.tsx @@ -1,10 +1,17 @@ import React from 'react'; import cx from 'classnames'; -import PropTypes from 'prop-types'; import { path as d3Path } from 'd3-path'; -export function pathRadialCurve({ source, target, x, y, percent }) { - return data => { +export function pathRadialCurve({ + source, + target, + x, + y, + percent, +}: // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. +$TSFixMe) { + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. + return (data: $TSFixMe) => { const sourceData = source(data); const targetData = target(data); @@ -36,32 +43,41 @@ export function pathRadialCurve({ source, target, x, y, percent }) { }; } -LinkRadialCurve.propTypes = { - innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), - percent: PropTypes.number, - x: PropTypes.func, - y: PropTypes.func, - source: PropTypes.func, - target: PropTypes.func, - path: PropTypes.func, - children: PropTypes.func, - className: PropTypes.string, - data: PropTypes.any, +type Props = { + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + innerRef?: $TSFixMeFunction | $TSFixMe; + percent?: number; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + x?: $TSFixMeFunction; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + y?: $TSFixMeFunction; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + source?: $TSFixMeFunction; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + target?: $TSFixMeFunction; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + path?: $TSFixMeFunction; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + children?: $TSFixMeFunction; + className?: string; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. + data?: $TSFixMe; }; +// @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. export default function LinkRadialCurve({ className, innerRef, data, path, - x = d => d.x, - y = d => d.y, - source = d => d.source, - target = d => d.target, + x = (d: $TSFixMe) => d.x, + y = (d: $TSFixMe) => d.y, + source = (d: $TSFixMe) => d.source, + target = (d: $TSFixMe) => d.target, percent = 0.2, children, ...restProps -}) { +}: Props) { const pathGen = path || pathRadialCurve({ source, target, x, y, percent }); if (children) return children({ path }); return ( diff --git a/packages/vx-shape/src/shapes/link/curve/LinkVerticalCurve.tsx b/packages/vx-shape/src/shapes/link/curve/LinkVerticalCurve.tsx index 5d9a3b6a7..8b6820d3f 100644 --- a/packages/vx-shape/src/shapes/link/curve/LinkVerticalCurve.tsx +++ b/packages/vx-shape/src/shapes/link/curve/LinkVerticalCurve.tsx @@ -1,10 +1,17 @@ import React from 'react'; import cx from 'classnames'; -import PropTypes from 'prop-types'; import { path as d3Path } from 'd3-path'; -export function pathVerticalCurve({ source, target, x, y, percent }) { - return data => { +export function pathVerticalCurve({ + source, + target, + x, + y, + percent, +}: // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. +$TSFixMe) { + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. + return (data: $TSFixMe) => { const sourceData = source(data); const targetData = target(data); @@ -26,32 +33,41 @@ export function pathVerticalCurve({ source, target, x, y, percent }) { }; } -LinkVerticalCurve.propTypes = { - innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), - percent: PropTypes.number, - x: PropTypes.func, - y: PropTypes.func, - source: PropTypes.func, - target: PropTypes.func, - path: PropTypes.func, - children: PropTypes.func, - data: PropTypes.any, - className: PropTypes.string, +type Props = { + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + innerRef?: $TSFixMeFunction | $TSFixMe; + percent?: number; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + x?: $TSFixMeFunction; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + y?: $TSFixMeFunction; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + source?: $TSFixMeFunction; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + target?: $TSFixMeFunction; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + path?: $TSFixMeFunction; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + children?: $TSFixMeFunction; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. + data?: $TSFixMe; + className?: string; }; +// @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. export default function LinkVerticalCurve({ className, innerRef, data, path, - x = d => d.x, - y = d => d.y, - source = d => d.source, - target = d => d.target, + x = (d: $TSFixMe) => d.x, + y = (d: $TSFixMe) => d.y, + source = (d: $TSFixMe) => d.source, + target = (d: $TSFixMe) => d.target, percent = 0.2, children, ...restProps -}) { +}: Props) { const pathGen = path || pathVerticalCurve({ source, target, x, y, percent }); if (children) return children({ path }); return ( diff --git a/packages/vx-shape/src/shapes/link/diagonal/LinkHorizontal.tsx b/packages/vx-shape/src/shapes/link/diagonal/LinkHorizontal.tsx index 92bd3c31b..c35de8af7 100644 --- a/packages/vx-shape/src/shapes/link/diagonal/LinkHorizontal.tsx +++ b/packages/vx-shape/src/shapes/link/diagonal/LinkHorizontal.tsx @@ -1,10 +1,16 @@ import React from 'react'; import cx from 'classnames'; -import PropTypes from 'prop-types'; import { linkHorizontal } from 'd3-shape'; -export function pathHorizontalDiagonal({ source, target, x, y }) { - return data => { +export function pathHorizontalDiagonal({ + source, + target, + x, + y, +}: // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. +$TSFixMe) { + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. + return (data: $TSFixMe) => { const link = linkHorizontal(); link.x(x); link.y(y); @@ -14,30 +20,39 @@ export function pathHorizontalDiagonal({ source, target, x, y }) { }; } -LinkHorizontal.propTypes = { - innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), - x: PropTypes.func, - y: PropTypes.func, - source: PropTypes.func, - target: PropTypes.func, - path: PropTypes.func, - children: PropTypes.func, - className: PropTypes.string, - data: PropTypes.any, +type Props = { + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + innerRef?: $TSFixMeFunction | $TSFixMe; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + x?: $TSFixMeFunction; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + y?: $TSFixMeFunction; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + source?: $TSFixMeFunction; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + target?: $TSFixMeFunction; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + path?: $TSFixMeFunction; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + children?: $TSFixMeFunction; + className?: string; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. + data?: $TSFixMe; }; +// @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. export default function LinkHorizontal({ className, innerRef, data, path, - x = d => d.y, - y = d => d.x, - source = d => d.source, - target = d => d.target, + x = (d: $TSFixMe) => d.y, + y = (d: $TSFixMe) => d.x, + source = (d: $TSFixMe) => d.source, + target = (d: $TSFixMe) => d.target, children, ...restProps -}) { +}: Props) { const pathGen = path || pathHorizontalDiagonal({ source, target, x, y }); if (children) return children({ path }); return ( diff --git a/packages/vx-shape/src/shapes/link/diagonal/LinkRadial.tsx b/packages/vx-shape/src/shapes/link/diagonal/LinkRadial.tsx index d2507566f..9092dd5f9 100644 --- a/packages/vx-shape/src/shapes/link/diagonal/LinkRadial.tsx +++ b/packages/vx-shape/src/shapes/link/diagonal/LinkRadial.tsx @@ -1,10 +1,16 @@ import React from 'react'; import cx from 'classnames'; -import PropTypes from 'prop-types'; import { linkRadial } from 'd3-shape'; -export function pathRadialDiagonal({ source, target, angle, radius }) { - return data => { +export function pathRadialDiagonal({ + source, + target, + angle, + radius, +}: // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. +$TSFixMe) { + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. + return (data: $TSFixMe) => { const link = linkRadial(); link.angle(angle); link.radius(radius); @@ -14,30 +20,39 @@ export function pathRadialDiagonal({ source, target, angle, radius }) { }; } -LinkRadial.propTypes = { - innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), - angle: PropTypes.func, - radius: PropTypes.func, - source: PropTypes.func, - target: PropTypes.func, - path: PropTypes.func, - children: PropTypes.func, - className: PropTypes.string, - data: PropTypes.any, +type Props = { + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + innerRef?: $TSFixMeFunction | $TSFixMe; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + angle?: $TSFixMeFunction; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + radius?: $TSFixMeFunction; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + source?: $TSFixMeFunction; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + target?: $TSFixMeFunction; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + path?: $TSFixMeFunction; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + children?: $TSFixMeFunction; + className?: string; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. + data?: $TSFixMe; }; +// @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. export default function LinkRadial({ className, innerRef, data, path, - angle = d => d.x, - radius = d => d.y, - source = d => d.source, - target = d => d.target, + angle = (d: $TSFixMe) => d.x, + radius = (d: $TSFixMe) => d.y, + source = (d: $TSFixMe) => d.source, + target = (d: $TSFixMe) => d.target, children, ...restProps -}) { +}: Props) { const pathGen = path || pathRadialDiagonal({ source, target, angle, radius }); if (children) return children({ path }); return ( diff --git a/packages/vx-shape/src/shapes/link/diagonal/LinkVertical.tsx b/packages/vx-shape/src/shapes/link/diagonal/LinkVertical.tsx index 0f3d3bb4d..8b1db223a 100644 --- a/packages/vx-shape/src/shapes/link/diagonal/LinkVertical.tsx +++ b/packages/vx-shape/src/shapes/link/diagonal/LinkVertical.tsx @@ -1,10 +1,16 @@ import React from 'react'; import cx from 'classnames'; -import PropTypes from 'prop-types'; import { linkVertical } from 'd3-shape'; -export function pathVerticalDiagonal({ source, target, x, y }) { - return data => { +export function pathVerticalDiagonal({ + source, + target, + x, + y, +}: // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. +$TSFixMe) { + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. + return (data: $TSFixMe) => { const link = linkVertical(); link.x(x); link.y(y); @@ -14,30 +20,39 @@ export function pathVerticalDiagonal({ source, target, x, y }) { }; } -LinkVertical.propTypes = { - innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), - x: PropTypes.func, - y: PropTypes.func, - source: PropTypes.func, - target: PropTypes.func, - path: PropTypes.func, - className: PropTypes.string, - children: PropTypes.func, - data: PropTypes.any, +type Props = { + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + innerRef?: $TSFixMeFunction | $TSFixMe; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + x?: $TSFixMeFunction; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + y?: $TSFixMeFunction; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + source?: $TSFixMeFunction; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + target?: $TSFixMeFunction; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + path?: $TSFixMeFunction; + className?: string; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + children?: $TSFixMeFunction; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. + data?: $TSFixMe; }; +// @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. export default function LinkVertical({ className, innerRef, data, path, - x = d => d.x, - y = d => d.y, - source = d => d.source, - target = d => d.target, + x = (d: $TSFixMe) => d.x, + y = (d: $TSFixMe) => d.y, + source = (d: $TSFixMe) => d.source, + target = (d: $TSFixMe) => d.target, children, ...restProps -}) { +}: Props) { const pathGen = path || pathVerticalDiagonal({ source, target, x, y }); if (children) return children({ path }); return ( diff --git a/packages/vx-shape/src/shapes/link/line/LinkHorizontalLine.tsx b/packages/vx-shape/src/shapes/link/line/LinkHorizontalLine.tsx index fcf705474..5f06646a9 100644 --- a/packages/vx-shape/src/shapes/link/line/LinkHorizontalLine.tsx +++ b/packages/vx-shape/src/shapes/link/line/LinkHorizontalLine.tsx @@ -1,10 +1,16 @@ import React from 'react'; import cx from 'classnames'; -import PropTypes from 'prop-types'; import { path as d3Path } from 'd3-path'; -export function pathHorizontalLine({ source, target, x, y }) { - return data => { +export function pathHorizontalLine({ + source, + target, + x, + y, +}: // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. +$TSFixMe) { + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. + return (data: $TSFixMe) => { const sourceData = source(data); const targetData = target(data); @@ -21,30 +27,39 @@ export function pathHorizontalLine({ source, target, x, y }) { }; } -LinkHorizontalLine.propTypes = { - innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), - path: PropTypes.func, - x: PropTypes.func, - y: PropTypes.func, - source: PropTypes.func, - target: PropTypes.func, - children: PropTypes.func, - className: PropTypes.string, - data: PropTypes.any, +type Props = { + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + innerRef?: $TSFixMeFunction | $TSFixMe; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + path?: $TSFixMeFunction; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + x?: $TSFixMeFunction; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + y?: $TSFixMeFunction; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + source?: $TSFixMeFunction; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + target?: $TSFixMeFunction; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + children?: $TSFixMeFunction; + className?: string; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. + data?: $TSFixMe; }; +// @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. export default function LinkHorizontalLine({ className, innerRef, data, path, - x = d => d.y, - y = d => d.x, - source = d => d.source, - target = d => d.target, + x = (d: $TSFixMe) => d.y, + y = (d: $TSFixMe) => d.x, + source = (d: $TSFixMe) => d.source, + target = (d: $TSFixMe) => d.target, children, ...restProps -}) { +}: Props) { const pathGen = path || pathHorizontalLine({ source, target, x, y }); if (children) return children({ path }); return ( diff --git a/packages/vx-shape/src/shapes/link/line/LinkRadialLine.tsx b/packages/vx-shape/src/shapes/link/line/LinkRadialLine.tsx index 367756a91..8cd21ad18 100644 --- a/packages/vx-shape/src/shapes/link/line/LinkRadialLine.tsx +++ b/packages/vx-shape/src/shapes/link/line/LinkRadialLine.tsx @@ -1,10 +1,16 @@ import React from 'react'; import cx from 'classnames'; -import PropTypes from 'prop-types'; import { path as d3Path } from 'd3-path'; -export function pathRadialLine({ source, target, x, y }) { - return data => { +export function pathRadialLine({ + source, + target, + x, + y, +}: // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. +$TSFixMe) { + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. + return (data: $TSFixMe) => { const sourceData = source(data); const targetData = target(data); @@ -26,30 +32,39 @@ export function pathRadialLine({ source, target, x, y }) { }; } -LinkRadialStep.propTypes = { - innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), - path: PropTypes.func, - x: PropTypes.func, - y: PropTypes.func, - source: PropTypes.func, - target: PropTypes.func, - children: PropTypes.func, - className: PropTypes.string, - data: PropTypes.any, +type Props = { + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + innerRef?: $TSFixMeFunction | $TSFixMe; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + path?: $TSFixMeFunction; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + x?: $TSFixMeFunction; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + y?: $TSFixMeFunction; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + source?: $TSFixMeFunction; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + target?: $TSFixMeFunction; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + children?: $TSFixMeFunction; + className?: string; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. + data?: $TSFixMe; }; +// @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. export default function LinkRadialStep({ className, innerRef, data, path, - x = d => d.x, - y = d => d.y, - source = d => d.source, - target = d => d.target, + x = (d: $TSFixMe) => d.x, + y = (d: $TSFixMe) => d.y, + source = (d: $TSFixMe) => d.source, + target = (d: $TSFixMe) => d.target, children, ...restProps -}) { +}: Props) { const pathGen = path || pathRadialLine({ source, target, x, y }); if (children) return children({ path }); return ( diff --git a/packages/vx-shape/src/shapes/link/line/LinkVerticalLine.tsx b/packages/vx-shape/src/shapes/link/line/LinkVerticalLine.tsx index bfc1912b3..eebbf5c1d 100644 --- a/packages/vx-shape/src/shapes/link/line/LinkVerticalLine.tsx +++ b/packages/vx-shape/src/shapes/link/line/LinkVerticalLine.tsx @@ -1,10 +1,16 @@ import React from 'react'; import cx from 'classnames'; -import PropTypes from 'prop-types'; import { path as d3Path } from 'd3-path'; -export function pathVerticalLine({ source, target, x, y }) { - return data => { +export function pathVerticalLine({ + source, + target, + x, + y, +}: // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. +$TSFixMe) { + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. + return (data: $TSFixMe) => { const sourceData = source(data); const targetData = target(data); @@ -21,30 +27,39 @@ export function pathVerticalLine({ source, target, x, y }) { }; } -LinkVerticalLine.propTypes = { - innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), - path: PropTypes.func, - x: PropTypes.func, - y: PropTypes.func, - source: PropTypes.func, - target: PropTypes.func, - children: PropTypes.func, - className: PropTypes.string, - data: PropTypes.any, +type Props = { + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + innerRef?: $TSFixMeFunction | $TSFixMe; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + path?: $TSFixMeFunction; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + x?: $TSFixMeFunction; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + y?: $TSFixMeFunction; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + source?: $TSFixMeFunction; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + target?: $TSFixMeFunction; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + children?: $TSFixMeFunction; + className?: string; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. + data?: $TSFixMe; }; +// @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. export default function LinkVerticalLine({ className, innerRef, data, path, - x = d => d.x, - y = d => d.y, - source = d => d.source, - target = d => d.target, + x = (d: $TSFixMe) => d.x, + y = (d: $TSFixMe) => d.y, + source = (d: $TSFixMe) => d.source, + target = (d: $TSFixMe) => d.target, children, ...restProps -}) { +}: Props) { const pathGen = path || pathVerticalLine({ source, target, x, y }); if (children) return children({ path }); return ( diff --git a/packages/vx-shape/src/shapes/link/step/LinkHorizontalStep.tsx b/packages/vx-shape/src/shapes/link/step/LinkHorizontalStep.tsx index b56505c39..f37f2bfd2 100644 --- a/packages/vx-shape/src/shapes/link/step/LinkHorizontalStep.tsx +++ b/packages/vx-shape/src/shapes/link/step/LinkHorizontalStep.tsx @@ -1,10 +1,17 @@ import React from 'react'; import cx from 'classnames'; -import PropTypes from 'prop-types'; import { path as d3Path } from 'd3-path'; -export function pathHorizontalStep({ source, target, x, y, percent }) { - return data => { +export function pathHorizontalStep({ + source, + target, + x, + y, + percent, +}: // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. +$TSFixMe) { + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. + return (data: $TSFixMe) => { const sourceData = source(data); const targetData = target(data); @@ -23,32 +30,41 @@ export function pathHorizontalStep({ source, target, x, y, percent }) { }; } -LinkHorizontalStep.propTypes = { - innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), - percent: PropTypes.number, - x: PropTypes.func, - y: PropTypes.func, - source: PropTypes.func, - target: PropTypes.func, - path: PropTypes.func, - children: PropTypes.func, - className: PropTypes.string, - data: PropTypes.any, +type Props = { + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + innerRef?: $TSFixMeFunction | $TSFixMe; + percent?: number; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + x?: $TSFixMeFunction; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + y?: $TSFixMeFunction; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + source?: $TSFixMeFunction; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + target?: $TSFixMeFunction; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + path?: $TSFixMeFunction; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + children?: $TSFixMeFunction; + className?: string; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. + data?: $TSFixMe; }; +// @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. export default function LinkHorizontalStep({ className, innerRef, data, path, percent = 0.5, - x = d => d.y, - y = d => d.x, - source = d => d.source, - target = d => d.target, + x = (d: $TSFixMe) => d.y, + y = (d: $TSFixMe) => d.x, + source = (d: $TSFixMe) => d.source, + target = (d: $TSFixMe) => d.target, children, ...restProps -}) { +}: Props) { const pathGen = path || pathHorizontalStep({ source, target, x, y, percent }); if (children) return children({ path }); return ( diff --git a/packages/vx-shape/src/shapes/link/step/LinkRadialStep.tsx b/packages/vx-shape/src/shapes/link/step/LinkRadialStep.tsx index b628acba1..9e9bf31e8 100644 --- a/packages/vx-shape/src/shapes/link/step/LinkRadialStep.tsx +++ b/packages/vx-shape/src/shapes/link/step/LinkRadialStep.tsx @@ -1,9 +1,15 @@ import React from 'react'; import cx from 'classnames'; -import PropTypes from 'prop-types'; -export function pathRadialStep({ source, target, x, y }) { - return data => { +export function pathRadialStep({ + source, + target, + x, + y, +}: // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. +$TSFixMe) { + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. + return (data: $TSFixMe) => { const sourceData = source(data); const targetData = target(data); @@ -31,30 +37,39 @@ export function pathRadialStep({ source, target, x, y }) { }; } -LinkRadialStep.propTypes = { - innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), - x: PropTypes.func, - y: PropTypes.func, - source: PropTypes.func, - target: PropTypes.func, - path: PropTypes.func, - children: PropTypes.func, - className: PropTypes.string, - data: PropTypes.any, +type Props = { + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + innerRef?: $TSFixMeFunction | $TSFixMe; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + x?: $TSFixMeFunction; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + y?: $TSFixMeFunction; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + source?: $TSFixMeFunction; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + target?: $TSFixMeFunction; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + path?: $TSFixMeFunction; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + children?: $TSFixMeFunction; + className?: string; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. + data?: $TSFixMe; }; +// @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. export default function LinkRadialStep({ className, innerRef, data, path, - x = d => d.x, - y = d => d.y, - source = d => d.source, - target = d => d.target, + x = (d: $TSFixMe) => d.x, + y = (d: $TSFixMe) => d.y, + source = (d: $TSFixMe) => d.source, + target = (d: $TSFixMe) => d.target, children, ...restProps -}) { +}: Props) { const pathGen = path || pathRadialStep({ source, target, x, y }); if (children) return children({ path }); return ( diff --git a/packages/vx-shape/src/shapes/link/step/LinkVerticalStep.tsx b/packages/vx-shape/src/shapes/link/step/LinkVerticalStep.tsx index a30cc1d9b..787fc1a3f 100644 --- a/packages/vx-shape/src/shapes/link/step/LinkVerticalStep.tsx +++ b/packages/vx-shape/src/shapes/link/step/LinkVerticalStep.tsx @@ -1,10 +1,17 @@ import React from 'react'; import cx from 'classnames'; -import PropTypes from 'prop-types'; import { path as d3Path } from 'd3-path'; -export function pathVerticalStep({ source, target, x, y, percent }) { - return data => { +export function pathVerticalStep({ + source, + target, + x, + y, + percent, +}: // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. +$TSFixMe) { + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. + return (data: $TSFixMe) => { const sourceData = source(data); const targetData = target(data); @@ -23,32 +30,41 @@ export function pathVerticalStep({ source, target, x, y, percent }) { }; } -LinkVerticalStep.propTypes = { - innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), - percent: PropTypes.number, - x: PropTypes.func, - y: PropTypes.func, - source: PropTypes.func, - target: PropTypes.func, - path: PropTypes.func, - children: PropTypes.func, - className: PropTypes.string, - data: PropTypes.any, +type Props = { + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + innerRef?: $TSFixMeFunction | $TSFixMe; + percent?: number; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + x?: $TSFixMeFunction; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + y?: $TSFixMeFunction; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + source?: $TSFixMeFunction; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + target?: $TSFixMeFunction; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + path?: $TSFixMeFunction; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. + children?: $TSFixMeFunction; + className?: string; + // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. + data?: $TSFixMe; }; +// @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. export default function LinkVerticalStep({ className, innerRef, data, path, percent = 0.5, - x = d => d.x, - y = d => d.y, - source = d => d.source, - target = d => d.target, + x = (d: $TSFixMe) => d.x, + y = (d: $TSFixMe) => d.y, + source = (d: $TSFixMe) => d.source, + target = (d: $TSFixMe) => d.target, children, ...restProps -}) { +}: Props) { const pathGen = path || pathVerticalStep({ source, target, x, y, percent }); if (children) return children({ path }); return ( diff --git a/packages/vx-shape/src/util/objHasMethod.ts b/packages/vx-shape/src/util/objHasMethod.ts index d7a949041..cd30b4571 100644 --- a/packages/vx-shape/src/util/objHasMethod.ts +++ b/packages/vx-shape/src/util/objHasMethod.ts @@ -1,3 +1,6 @@ -export default function objHasMethod(obj, funcName) { - return !!obj[funcName] && typeof obj[funcName] === 'function'; +export default function objHasMethod( + obj: T, + funcName: string, +) { + return funcName in obj && typeof obj[funcName] === 'function'; } diff --git a/packages/vx-shape/src/util/stackOffset.ts b/packages/vx-shape/src/util/stackOffset.ts index 946307278..5e0c6d2e5 100644 --- a/packages/vx-shape/src/util/stackOffset.ts +++ b/packages/vx-shape/src/util/stackOffset.ts @@ -16,6 +16,6 @@ export const STACK_OFFSETS = { export const STACK_OFFSET_NAMES = Object.keys(STACK_OFFSETS); -export default function stackOffset(offset) { - return STACK_OFFSETS[offset] || STACK_OFFSETS.none; +export default function stackOffset(offset?: keyof typeof STACK_OFFSETS) { + return (offset && STACK_OFFSETS[offset]) || STACK_OFFSETS.none; } diff --git a/packages/vx-shape/src/util/stackOrder.ts b/packages/vx-shape/src/util/stackOrder.ts index 24c1fa671..d3c0bbbc3 100644 --- a/packages/vx-shape/src/util/stackOrder.ts +++ b/packages/vx-shape/src/util/stackOrder.ts @@ -16,6 +16,6 @@ export const STACK_ORDERS = { export const STACK_ORDER_NAMES = Object.keys(STACK_ORDERS); -export default function stackOrder(order) { - return STACK_ORDERS[order] || STACK_ORDERS.none; +export default function stackOrder(order?: keyof typeof STACK_ORDERS) { + return (order && STACK_ORDERS[order]) || STACK_ORDERS.none; } diff --git a/packages/vx-shape/src/util/trigonometry.ts b/packages/vx-shape/src/util/trigonometry.ts index 3b1eabce4..fe373bdb1 100644 --- a/packages/vx-shape/src/util/trigonometry.ts +++ b/packages/vx-shape/src/util/trigonometry.ts @@ -1 +1 @@ -export const degreesToRadians = degrees => (Math.PI / 180) * degrees; +export const degreesToRadians = (degrees: number) => (Math.PI / 180) * degrees; From ed1354532dd1c1a4cd070e83845fb9de18628a48 Mon Sep 17 00:00:00 2001 From: Chris Williams Date: Thu, 19 Sep 2019 18:58:24 -0700 Subject: [PATCH 03/22] typescript(vx-shape): fix method override types, convert links OMG KILL ME --- packages/vx-shape/.notes | 6 ++- packages/vx-shape/src/shapes/Arc.tsx | 34 ++++++------ packages/vx-shape/src/shapes/Area.tsx | 2 +- packages/vx-shape/src/shapes/LinePath.tsx | 2 +- packages/vx-shape/src/shapes/LineRadial.tsx | 2 +- packages/vx-shape/src/shapes/Pie.tsx | 41 +++++--------- packages/vx-shape/src/shapes/Polygon.tsx | 44 ++++++++------- packages/vx-shape/src/shapes/Stack.tsx | 2 +- .../shapes/link/curve/LinkHorizontalCurve.tsx | 54 +++++++------------ .../src/shapes/link/curve/LinkRadialCurve.tsx | 52 ++++++------------ .../shapes/link/curve/LinkVerticalCurve.tsx | 52 ++++++------------ .../shapes/link/diagonal/LinkHorizontal.tsx | 49 ++++++----------- .../src/shapes/link/diagonal/LinkRadial.tsx | 52 +++++++----------- .../src/shapes/link/diagonal/LinkVertical.tsx | 48 +++++------------ .../shapes/link/line/LinkHorizontalLine.tsx | 44 +++++---------- .../src/shapes/link/line/LinkRadialLine.tsx | 42 ++++----------- .../src/shapes/link/line/LinkVerticalLine.tsx | 42 ++++----------- .../shapes/link/step/LinkHorizontalStep.tsx | 48 ++++++----------- .../src/shapes/link/step/LinkRadialStep.tsx | 49 ++++++----------- .../src/shapes/link/step/LinkVerticalStep.tsx | 48 ++++++----------- packages/vx-shape/src/shapes/link/types.ts | 35 ++++++++++++ .../src/util/setNumberOrNumberAccessor.ts | 13 +++++ 22 files changed, 290 insertions(+), 471 deletions(-) create mode 100644 packages/vx-shape/src/shapes/link/types.ts create mode 100644 packages/vx-shape/src/util/setNumberOrNumberAccessor.ts diff --git a/packages/vx-shape/.notes b/packages/vx-shape/.notes index a31ca274b..ebbcbe512 100644 --- a/packages/vx-shape/.notes +++ b/packages/vx-shape/.notes @@ -1 +1,5 @@ -Arc.centroid prop removed \ No newline at end of file +Arc.centroid prop removed + +removed @vx/point dep. + +remove duplicate code for links \ No newline at end of file diff --git a/packages/vx-shape/src/shapes/Arc.tsx b/packages/vx-shape/src/shapes/Arc.tsx index 56cf5f95a..c92118661 100644 --- a/packages/vx-shape/src/shapes/Arc.tsx +++ b/packages/vx-shape/src/shapes/Arc.tsx @@ -1,30 +1,31 @@ import React from 'react'; import cx from 'classnames'; import { arc as d3Arc, Arc as ArcType } from 'd3-shape'; +import setNumOrAccessor, { NumberAccessor } from '../util/setNumberOrNumberAccessor'; export type ArcProps = { /** className applied to path element. */ className?: string; /** A Datum for which to generate an arc. */ data?: Datum; - /** Override render function override which is passed the configured arc generator as input. */ + /** Override render function which is passed the configured arc generator as input. */ children?: (args: { path: ArcType }) => React.ReactNode; - /** React RefObject passed to the path element. */ + /** React ref to the path element. */ innerRef?: React.Ref; /** Number or accessor function which returns a number, which defines the arc innerRadius. */ - innerRadius?: (d: Datum) => number | number; + innerRadius?: NumberAccessor | number; /** Number or accessor function which returns a number, which defines the arc outerRadius. */ - outerRadius?: (d: Datum) => number | number; + outerRadius?: NumberAccessor | number; /** Number or accessor function which returns a number, which defines the arc cornerRadius. */ - cornerRadius?: (d: Datum) => number | number; + cornerRadius?: NumberAccessor | number; /** Number or accessor function which returns a number, which defines the arc startAngle. */ - startAngle?: (d: Datum) => number | number; + startAngle?: NumberAccessor | number; /** Number or accessor function which returns a number, which defines the arc endAngle. */ - endAngle?: (d: Datum) => number | number; + endAngle?: NumberAccessor | number; /** Number or accessor function which returns a number, which defines the arc padAngle. */ - padAngle?: (d: Datum) => number | number; + padAngle?: NumberAccessor | number; /** Number or accessor function which returns a number, which defines the arc padRadius. */ - padRadius?: (d: Datum) => number | number; + padRadius?: NumberAccessor | number; }; export default function Arc({ @@ -42,13 +43,14 @@ export default function Arc({ ...restProps }: ArcProps & React.SVGProps) { const arc = d3Arc(); - if (innerRadius != null) arc.innerRadius(innerRadius); - if (outerRadius != null) arc.outerRadius(outerRadius); - if (cornerRadius != null) arc.cornerRadius(cornerRadius); - if (startAngle != null) arc.startAngle(startAngle); - if (endAngle != null) arc.endAngle(endAngle); - if (padAngle != null) arc.padAngle(padAngle); - if (padRadius != null) arc.padRadius(padRadius); + if (innerRadius != null) setNumOrAccessor(arc.innerRadius, innerRadius); + if (outerRadius != null) setNumOrAccessor(arc.outerRadius, outerRadius); + if (cornerRadius != null) setNumOrAccessor(arc.cornerRadius, cornerRadius); + if (startAngle != null) setNumOrAccessor(arc.startAngle, startAngle); + if (endAngle != null) setNumOrAccessor(arc.endAngle, endAngle); + if (padAngle != null) setNumOrAccessor(arc.padAngle, padAngle); + if (padRadius != null) setNumOrAccessor(arc.padRadius, padRadius); + if (children) return children({ path: arc }); return ( diff --git a/packages/vx-shape/src/shapes/Area.tsx b/packages/vx-shape/src/shapes/Area.tsx index 8e7b80c99..6d6692249 100644 --- a/packages/vx-shape/src/shapes/Area.tsx +++ b/packages/vx-shape/src/shapes/Area.tsx @@ -5,7 +5,7 @@ import { area, Area as AreaType, CurveFactory } from 'd3-shape'; type Accessor = (datum: Datum, index: number, data: Datum[]) => number; export type AreaProps = { - /** Override render function override which is passed the configured area generator as input. */ + /** Override render function which is passed the configured area generator as input. */ children?: (args: { path: AreaType }) => React.ReactNode; /** Classname applied to path element. */ className?: string; diff --git a/packages/vx-shape/src/shapes/LinePath.tsx b/packages/vx-shape/src/shapes/LinePath.tsx index 29537b2e7..bee06a9cc 100644 --- a/packages/vx-shape/src/shapes/LinePath.tsx +++ b/packages/vx-shape/src/shapes/LinePath.tsx @@ -15,7 +15,7 @@ export type LinePathProps = { x?: (datum: Datum, index: number, data: Datum[]) => number; /** Given a datum, returns the y value. Defaults to d[1]. */ y?: (datum: Datum, index: number, data: Datum[]) => number; - /** Override render function override which is passed the configured path generator as input. */ + /** Override render function which is passed the configured path generator as input. */ children?: (args: { path: LineType }) => React.ReactNode; /** Fill color of the path element. */ fill?: string; diff --git a/packages/vx-shape/src/shapes/LineRadial.tsx b/packages/vx-shape/src/shapes/LineRadial.tsx index 8c9fd287f..157159075 100644 --- a/packages/vx-shape/src/shapes/LineRadial.tsx +++ b/packages/vx-shape/src/shapes/LineRadial.tsx @@ -7,7 +7,7 @@ export type LineRadialProps = Pick< LinePathProps, 'className' | 'curve' | 'data' | 'defined' | 'fill' | 'innerRef' > & { - /** Override render function override which is passed the configured path generator as input. */ + /** Override render function which is passed the configured path generator as input. */ children?: (args: { path: RadialLine }) => React.ReactNode; /** Returns the angle value in radians for a given Datum, with 0 at -y (12 o’clock). */ angle?: (datum: Datum, index: number, data: Datum[]) => number; diff --git a/packages/vx-shape/src/shapes/Pie.tsx b/packages/vx-shape/src/shapes/Pie.tsx index ae2d0102e..ea06ccde3 100644 --- a/packages/vx-shape/src/shapes/Pie.tsx +++ b/packages/vx-shape/src/shapes/Pie.tsx @@ -2,8 +2,7 @@ import React from 'react'; import cx from 'classnames'; import { Group } from '@vx/group'; import { arc as d3Arc, Arc as ArcType, PieArcDatum, pie as d3Pie, Pie as PieType } from 'd3-shape'; - -type NumberAccessor = (d: Datum) => number; +import setNumOrAccessor, { NumberAccessor } from '../util/setNumberOrNumberAccessor'; export type PieProps = { /** className applied to path element. */ @@ -36,30 +35,14 @@ export type PieProps = { endAngle?: NumberAccessor | number; /** Padding angle of the Pie shape, which sets a fixed linear distance separating adjacent arcs. */ padAngle?: NumberAccessor | number; - /** Override render function override which is passed the configured arc generator as input. */ + /** Render function override which is passed the configured arc generator as input. */ children?: (args: { - path: ArcType; + path: ArcType>; arcs: PieArcDatum[]; pie: PieType; }) => React.ReactNode; }; -class PieChart { - public innerRadius(num: number): void {} - public innerRadius(func: (d: DataShape) => number): void {} -} - -type Datum = { value: number }; -const pie = new PieChart(); - -pie.innerRadius(); // error -pie.innerRadius(123); // okay -pie.innerRadius((d: Datum) => d.value); // okay - -const asProp1 = (_: number) => pie.innerRadius(_); // okay -const asProp2 = (_: Datum) => pie.innerRadius(_); // okay -const asProp3 = (_: number | Datum) => pie.innerRadius(_); // okay - export default function Pie({ className, top, @@ -79,22 +62,22 @@ export default function Pie({ children, ...restProps }: PieProps & React.SVGProps) { - const path = d3Arc(); - if (innerRadius != null) path.innerRadius(innerRadius as number); - if (outerRadius != null) path.outerRadius(outerRadius as NumberAccessor); - if (cornerRadius != null) path.cornerRadius(cornerRadius); - if (padRadius != null) path.padRadius(padRadius); + const path = d3Arc>(); + + if (innerRadius != null) setNumOrAccessor(path.innerRadius, innerRadius); + if (outerRadius != null) setNumOrAccessor(path.outerRadius, outerRadius); + if (cornerRadius != null) setNumOrAccessor(path.cornerRadius, cornerRadius); + if (padRadius != null) setNumOrAccessor(path.padRadius, padRadius); const pie = d3Pie(); if (pieSort != null) pie.sort(pieSort); if (pieSortValues != null) pie.sortValues(pieSortValues); if (pieValue != null) pie.value(pieValue); - if (padAngle != null) pie.padAngle(padAngle); - if (startAngle != null) pie.startAngle(startAngle); - if (endAngle != null) pie.endAngle(endAngle); + if (padAngle != null) setNumOrAccessor(pie.padAngle, padAngle); + if (startAngle != null) setNumOrAccessor(pie.startAngle, startAngle); + if (endAngle != null) setNumOrAccessor(pie.endAngle, endAngle); const arcs = pie(data); - if (children) return children({ arcs, path, pie }); return ( diff --git a/packages/vx-shape/src/shapes/Polygon.tsx b/packages/vx-shape/src/shapes/Polygon.tsx index 22bd618fa..724cb30be 100644 --- a/packages/vx-shape/src/shapes/Polygon.tsx +++ b/packages/vx-shape/src/shapes/Polygon.tsx @@ -1,23 +1,23 @@ import React from 'react'; import cx from 'classnames'; -import { Point } from '@vx/point'; import { degreesToRadians } from '../util/trigonometry'; +const DEFAULT_CENTER = { x: 0, y: 0 }; + export const getPoint = ({ sides, size, - center, - rotate, + center = DEFAULT_CENTER, + rotate = 0, side, -}: // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. -$TSFixMe) => { +}: { side: number } & Pick) => { const degrees = (360 / sides) * side - rotate; const radians = degreesToRadians(degrees); - return new Point({ + return { x: center.x + size * Math.cos(radians), y: center.y + size * Math.sin(radians), - }); + }; }; export const getPoints = ({ @@ -25,8 +25,7 @@ export const getPoints = ({ size, center, rotate, -}: // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. -$TSFixMe) => +}: Pick) => new Array(sides).fill(0).map((_, side) => getPoint({ sides, @@ -37,37 +36,42 @@ $TSFixMe) => }), ); -type Props = { +type PolygonProps = { + /** Number of polygon sides. */ sides: number; + /** Size of the shape. */ size: number; + /** className to apply to polygon element. */ className?: string; + /** Rotation transform to apply to polygon. */ rotate?: number; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - children?: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - innerRef?: $TSFixMeFunction | $TSFixMe; + /** Render function override which is passed the generated polygon points. */ + children?: (args: { points: [number, number][] }) => React.ReactNode; + /** Reference to polygon element. */ + innerRef?: React.Ref; + /** Polygon center position. */ center?: { - x?: number; - y?: number; + x: number; + y: number; }; }; export default function Polygon({ sides, size = 25, - center = new Point({ x: 0, y: 0 }), + center = DEFAULT_CENTER, rotate = 0, className, children, innerRef, ...restProps -}: Props) { - const points = getPoints({ +}: PolygonProps & React.SVGProps) { + const points: [number, number][] = getPoints({ sides, size, center, rotate, - }).map(p => p.toArray()); + }).map(({ x, y }) => [x, y]); if (children) return children({ points }); diff --git a/packages/vx-shape/src/shapes/Stack.tsx b/packages/vx-shape/src/shapes/Stack.tsx index ab3176129..ca7c9264e 100644 --- a/packages/vx-shape/src/shapes/Stack.tsx +++ b/packages/vx-shape/src/shapes/Stack.tsx @@ -31,7 +31,7 @@ export type StackProps = { color?: (key: Key, index: number) => string; // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. keys?: Key[]; - /** Override render function override which is passed the configured arc generator as input. */ + /** Override render function which is passed the configured arc generator as input. */ children?: (args: { stacks: any; path: AreaType>; diff --git a/packages/vx-shape/src/shapes/link/curve/LinkHorizontalCurve.tsx b/packages/vx-shape/src/shapes/link/curve/LinkHorizontalCurve.tsx index ad51d8181..ce99d588a 100644 --- a/packages/vx-shape/src/shapes/link/curve/LinkHorizontalCurve.tsx +++ b/packages/vx-shape/src/shapes/link/curve/LinkHorizontalCurve.tsx @@ -1,19 +1,18 @@ import React from 'react'; import cx from 'classnames'; import { path as d3Path } from 'd3-path'; +import { SharedLinkProps, AccessorProps } from '../types'; -export function pathHorizontalCurve({ +export function pathHorizontalCurve({ source, target, x, y, percent, -}: // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. -$TSFixMe) { - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. - return (data: $TSFixMe) => { - const sourceData = source(data); - const targetData = target(data); +}: Required> & { percent: number }) { + return (link: Link) => { + const sourceData = source(link); + const targetData = target(link); const sx = x(sourceData); const sy = y(sourceData); @@ -33,41 +32,24 @@ $TSFixMe) { }; } -type Props = { - className?: string; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - innerRef?: $TSFixMeFunction | $TSFixMe; - percent?: number; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - x?: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - y?: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - source?: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - target?: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - path?: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - children?: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. - data?: $TSFixMe; -}; +export type LinkHorizontalCurveProps = AccessorProps & + SharedLinkProps & { + percent?: number; + }; -// @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. -export default function LinkHorizontalCurve({ +export default function LinkHorizontalCurve({ className, - innerRef, + children, data, + innerRef, path, - x = (d: $TSFixMe) => d.y, - y = (d: $TSFixMe) => d.x, - source = (d: $TSFixMe) => d.source, - target = (d: $TSFixMe) => d.target, percent = 0.2, - children, + x = (n: any) => n && n.x, + y = (n: any) => n && n.y, + source = (l: any) => l && l.source, + target = (l: any) => l && l.target, ...restProps -}: Props) { +}: LinkHorizontalCurveProps) { const pathGen = path || pathHorizontalCurve({ source, target, x, y, percent }); if (children) return children({ path }); return ( diff --git a/packages/vx-shape/src/shapes/link/curve/LinkRadialCurve.tsx b/packages/vx-shape/src/shapes/link/curve/LinkRadialCurve.tsx index 13816e776..39fdb36eb 100644 --- a/packages/vx-shape/src/shapes/link/curve/LinkRadialCurve.tsx +++ b/packages/vx-shape/src/shapes/link/curve/LinkRadialCurve.tsx @@ -1,19 +1,18 @@ import React from 'react'; import cx from 'classnames'; import { path as d3Path } from 'd3-path'; +import { SharedLinkProps, AccessorProps } from '../types'; -export function pathRadialCurve({ +export function pathRadialCurve({ source, target, x, y, percent, -}: // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. -$TSFixMe) { - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. - return (data: $TSFixMe) => { - const sourceData = source(data); - const targetData = target(data); +}: Required> & { percent: number }) { + return (link: Link) => { + const sourceData = source(link); + const targetData = target(link); const sa = x(sourceData) - Math.PI / 2; const sr = y(sourceData); @@ -43,41 +42,24 @@ $TSFixMe) { }; } -type Props = { - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - innerRef?: $TSFixMeFunction | $TSFixMe; +export type LinkRadialCurveProps = { percent?: number; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - x?: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - y?: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - source?: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - target?: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - path?: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - children?: $TSFixMeFunction; - className?: string; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. - data?: $TSFixMe; -}; +} & AccessorProps & + SharedLinkProps; -// @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. -export default function LinkRadialCurve({ +export default function LinkRadialCurve({ className, - innerRef, + children, data, + innerRef, path, - x = (d: $TSFixMe) => d.x, - y = (d: $TSFixMe) => d.y, - source = (d: $TSFixMe) => d.source, - target = (d: $TSFixMe) => d.target, percent = 0.2, - children, + x = (n: any) => n && n.x, + y = (n: any) => n && n.y, + source = (l: any) => l && l.source, + target = (l: any) => l && l.target, ...restProps -}: Props) { +}: LinkRadialCurveProps) { const pathGen = path || pathRadialCurve({ source, target, x, y, percent }); if (children) return children({ path }); return ( diff --git a/packages/vx-shape/src/shapes/link/curve/LinkVerticalCurve.tsx b/packages/vx-shape/src/shapes/link/curve/LinkVerticalCurve.tsx index 8b6820d3f..fb7f50c98 100644 --- a/packages/vx-shape/src/shapes/link/curve/LinkVerticalCurve.tsx +++ b/packages/vx-shape/src/shapes/link/curve/LinkVerticalCurve.tsx @@ -1,19 +1,18 @@ import React from 'react'; import cx from 'classnames'; import { path as d3Path } from 'd3-path'; +import { SharedLinkProps, AccessorProps } from '../types'; -export function pathVerticalCurve({ +export function pathVerticalCurve({ source, target, x, y, percent, -}: // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. -$TSFixMe) { - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. - return (data: $TSFixMe) => { - const sourceData = source(data); - const targetData = target(data); +}: Required> & { percent: number }) { + return (link: Link) => { + const sourceData = source(link); + const targetData = target(link); const sx = x(sourceData); const sy = y(sourceData); @@ -33,41 +32,24 @@ $TSFixMe) { }; } -type Props = { - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - innerRef?: $TSFixMeFunction | $TSFixMe; +export type LinkVerticalCurveProps = { percent?: number; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - x?: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - y?: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - source?: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - target?: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - path?: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - children?: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. - data?: $TSFixMe; - className?: string; -}; +} & AccessorProps & + SharedLinkProps; -// @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. -export default function LinkVerticalCurve({ +export default function LinkVerticalCurve({ className, - innerRef, + children, data, + innerRef, path, - x = (d: $TSFixMe) => d.x, - y = (d: $TSFixMe) => d.y, - source = (d: $TSFixMe) => d.source, - target = (d: $TSFixMe) => d.target, percent = 0.2, - children, + x = (n: any) => n && n.x, + y = (n: any) => n && n.y, + source = (l: any) => l && l.source, + target = (l: any) => l && l.target, ...restProps -}: Props) { +}: LinkVerticalCurveProps) { const pathGen = path || pathVerticalCurve({ source, target, x, y, percent }); if (children) return children({ path }); return ( diff --git a/packages/vx-shape/src/shapes/link/diagonal/LinkHorizontal.tsx b/packages/vx-shape/src/shapes/link/diagonal/LinkHorizontal.tsx index c35de8af7..a81bee0e9 100644 --- a/packages/vx-shape/src/shapes/link/diagonal/LinkHorizontal.tsx +++ b/packages/vx-shape/src/shapes/link/diagonal/LinkHorizontal.tsx @@ -1,17 +1,16 @@ import React from 'react'; import cx from 'classnames'; import { linkHorizontal } from 'd3-shape'; +import { SharedLinkProps, AccessorProps } from '../types'; -export function pathHorizontalDiagonal({ +export function pathHorizontalDiagonal({ source, target, x, y, -}: // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. -$TSFixMe) { - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. - return (data: $TSFixMe) => { - const link = linkHorizontal(); +}: Required>) { + return (data: Link) => { + const link = linkHorizontal(); link.x(x); link.y(y); link.source(source); @@ -20,39 +19,21 @@ $TSFixMe) { }; } -type Props = { - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - innerRef?: $TSFixMeFunction | $TSFixMe; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - x?: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - y?: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - source?: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - target?: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - path?: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - children?: $TSFixMeFunction; - className?: string; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. - data?: $TSFixMe; -}; +export type LinkHorizontalDiagonalProps = AccessorProps & + SharedLinkProps; -// @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. -export default function LinkHorizontal({ +export default function LinkHorizontalDiagonal({ className, - innerRef, + children, data, + innerRef, path, - x = (d: $TSFixMe) => d.y, - y = (d: $TSFixMe) => d.x, - source = (d: $TSFixMe) => d.source, - target = (d: $TSFixMe) => d.target, - children, + x = (n: any) => n && n.x, + y = (n: any) => n && n.y, + source = (l: any) => l && l.source, + target = (l: any) => l && l.target, ...restProps -}: Props) { +}: LinkHorizontalDiagonalProps) { const pathGen = path || pathHorizontalDiagonal({ source, target, x, y }); if (children) return children({ path }); return ( diff --git a/packages/vx-shape/src/shapes/link/diagonal/LinkRadial.tsx b/packages/vx-shape/src/shapes/link/diagonal/LinkRadial.tsx index 9092dd5f9..6480119ea 100644 --- a/packages/vx-shape/src/shapes/link/diagonal/LinkRadial.tsx +++ b/packages/vx-shape/src/shapes/link/diagonal/LinkRadial.tsx @@ -1,17 +1,16 @@ import React from 'react'; import cx from 'classnames'; import { linkRadial } from 'd3-shape'; +import { SharedLinkProps, RadialAccessorProps } from '../types'; -export function pathRadialDiagonal({ +export function pathRadialDiagonal({ source, target, angle, radius, -}: // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. -$TSFixMe) { - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. - return (data: $TSFixMe) => { - const link = linkRadial(); +}: Required>) { + return (data: Link) => { + const link = linkRadial(); link.angle(angle); link.radius(radius); link.source(source); @@ -20,39 +19,24 @@ $TSFixMe) { }; } -type Props = { - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - innerRef?: $TSFixMeFunction | $TSFixMe; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - angle?: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - radius?: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - source?: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - target?: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - path?: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - children?: $TSFixMeFunction; - className?: string; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. - data?: $TSFixMe; -}; +type LinkRadialDiagonalProps = { + angle: (node: Node) => number; + radius: (node: Node) => number; +} & RadialAccessorProps & + SharedLinkProps; -// @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. -export default function LinkRadial({ +export default function LinkRadialDiagonal({ className, - innerRef, + children, data, + innerRef, path, - angle = (d: $TSFixMe) => d.x, - radius = (d: $TSFixMe) => d.y, - source = (d: $TSFixMe) => d.source, - target = (d: $TSFixMe) => d.target, - children, + angle = (n: any) => n.x, + radius = (n: any) => n.y, + source = (n: any) => n.source, + target = (n: any) => n.target, ...restProps -}: Props) { +}: LinkRadialDiagonalProps) { const pathGen = path || pathRadialDiagonal({ source, target, angle, radius }); if (children) return children({ path }); return ( diff --git a/packages/vx-shape/src/shapes/link/diagonal/LinkVertical.tsx b/packages/vx-shape/src/shapes/link/diagonal/LinkVertical.tsx index 8b1db223a..f9cf3915b 100644 --- a/packages/vx-shape/src/shapes/link/diagonal/LinkVertical.tsx +++ b/packages/vx-shape/src/shapes/link/diagonal/LinkVertical.tsx @@ -1,17 +1,16 @@ import React from 'react'; import cx from 'classnames'; import { linkVertical } from 'd3-shape'; +import { SharedLinkProps, AccessorProps } from '../types'; -export function pathVerticalDiagonal({ +export function pathVerticalDiagonal({ source, target, x, y, -}: // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. -$TSFixMe) { - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. - return (data: $TSFixMe) => { - const link = linkVertical(); +}: Required>) { + return (data: Link) => { + const link = linkVertical(); link.x(x); link.y(y); link.source(source); @@ -20,39 +19,20 @@ $TSFixMe) { }; } -type Props = { - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - innerRef?: $TSFixMeFunction | $TSFixMe; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - x?: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - y?: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - source?: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - target?: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - path?: $TSFixMeFunction; - className?: string; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - children?: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. - data?: $TSFixMe; -}; +type LinkVerticalDiagonalProps = AccessorProps & SharedLinkProps; -// @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. -export default function LinkVertical({ +export default function LinkVerticalDiagonal({ className, - innerRef, + children, data, + innerRef, path, - x = (d: $TSFixMe) => d.x, - y = (d: $TSFixMe) => d.y, - source = (d: $TSFixMe) => d.source, - target = (d: $TSFixMe) => d.target, - children, + x = (d: any) => d.x, + y = (d: any) => d.y, + source = (d: any) => d.source, + target = (d: any) => d.target, ...restProps -}: Props) { +}: LinkVerticalDiagonalProps) { const pathGen = path || pathVerticalDiagonal({ source, target, x, y }); if (children) return children({ path }); return ( diff --git a/packages/vx-shape/src/shapes/link/line/LinkHorizontalLine.tsx b/packages/vx-shape/src/shapes/link/line/LinkHorizontalLine.tsx index 5f06646a9..5fda231ce 100644 --- a/packages/vx-shape/src/shapes/link/line/LinkHorizontalLine.tsx +++ b/packages/vx-shape/src/shapes/link/line/LinkHorizontalLine.tsx @@ -1,16 +1,15 @@ import React from 'react'; import cx from 'classnames'; import { path as d3Path } from 'd3-path'; +import { SharedLinkProps, AccessorProps } from '../types'; -export function pathHorizontalLine({ +export function pathHorizontalLine({ source, target, x, y, -}: // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. -$TSFixMe) { - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. - return (data: $TSFixMe) => { +}: Required>) { + return (data: Link) => { const sourceData = source(data); const targetData = target(data); @@ -27,39 +26,20 @@ $TSFixMe) { }; } -type Props = { - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - innerRef?: $TSFixMeFunction | $TSFixMe; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - path?: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - x?: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - y?: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - source?: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - target?: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - children?: $TSFixMeFunction; - className?: string; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. - data?: $TSFixMe; -}; +export type LinkHorizontalLineProps = AccessorProps & SharedLinkProps; -// @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. -export default function LinkHorizontalLine({ +export default function LinkHorizontalLine({ className, + children, innerRef, data, path, - x = (d: $TSFixMe) => d.y, - y = (d: $TSFixMe) => d.x, - source = (d: $TSFixMe) => d.source, - target = (d: $TSFixMe) => d.target, - children, + x = (d: any) => d.y, + y = (d: any) => d.x, + source = (d: any) => d.source, + target = (d: any) => d.target, ...restProps -}: Props) { +}: LinkHorizontalLineProps) { const pathGen = path || pathHorizontalLine({ source, target, x, y }); if (children) return children({ path }); return ( diff --git a/packages/vx-shape/src/shapes/link/line/LinkRadialLine.tsx b/packages/vx-shape/src/shapes/link/line/LinkRadialLine.tsx index 8cd21ad18..fcdfc4c71 100644 --- a/packages/vx-shape/src/shapes/link/line/LinkRadialLine.tsx +++ b/packages/vx-shape/src/shapes/link/line/LinkRadialLine.tsx @@ -1,16 +1,15 @@ import React from 'react'; import cx from 'classnames'; import { path as d3Path } from 'd3-path'; +import { SharedLinkProps, AccessorProps } from '../types'; -export function pathRadialLine({ +export function pathRadialLine({ source, target, x, y, -}: // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. -$TSFixMe) { - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. - return (data: $TSFixMe) => { +}: Required>) { + return (data: Link) => { const sourceData = source(data); const targetData = target(data); @@ -32,39 +31,20 @@ $TSFixMe) { }; } -type Props = { - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - innerRef?: $TSFixMeFunction | $TSFixMe; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - path?: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - x?: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - y?: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - source?: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - target?: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - children?: $TSFixMeFunction; - className?: string; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. - data?: $TSFixMe; -}; +export type LinkRadialLineProps = AccessorProps & SharedLinkProps; -// @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. -export default function LinkRadialStep({ +export default function LinkRadialLine({ className, innerRef, data, path, - x = (d: $TSFixMe) => d.x, - y = (d: $TSFixMe) => d.y, - source = (d: $TSFixMe) => d.source, - target = (d: $TSFixMe) => d.target, + x = (d: any) => d.x, + y = (d: any) => d.y, + source = (d: any) => d.source, + target = (d: any) => d.target, children, ...restProps -}: Props) { +}: LinkRadialLineProps) { const pathGen = path || pathRadialLine({ source, target, x, y }); if (children) return children({ path }); return ( diff --git a/packages/vx-shape/src/shapes/link/line/LinkVerticalLine.tsx b/packages/vx-shape/src/shapes/link/line/LinkVerticalLine.tsx index eebbf5c1d..ce4bccda3 100644 --- a/packages/vx-shape/src/shapes/link/line/LinkVerticalLine.tsx +++ b/packages/vx-shape/src/shapes/link/line/LinkVerticalLine.tsx @@ -1,16 +1,15 @@ import React from 'react'; import cx from 'classnames'; import { path as d3Path } from 'd3-path'; +import { SharedLinkProps, AccessorProps } from '../types'; -export function pathVerticalLine({ +export function pathVerticalLine({ source, target, x, y, -}: // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. -$TSFixMe) { - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. - return (data: $TSFixMe) => { +}: Required>) { + return (data: Link) => { const sourceData = source(data); const targetData = target(data); @@ -27,39 +26,20 @@ $TSFixMe) { }; } -type Props = { - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - innerRef?: $TSFixMeFunction | $TSFixMe; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - path?: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - x?: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - y?: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - source?: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - target?: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - children?: $TSFixMeFunction; - className?: string; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. - data?: $TSFixMe; -}; +export type LinkVerticalLineProps = AccessorProps & SharedLinkProps; -// @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. -export default function LinkVerticalLine({ +export default function LinkVerticalLine({ className, innerRef, data, path, - x = (d: $TSFixMe) => d.x, - y = (d: $TSFixMe) => d.y, - source = (d: $TSFixMe) => d.source, - target = (d: $TSFixMe) => d.target, + x = (d: any) => d.x, + y = (d: any) => d.y, + source = (d: any) => d.source, + target = (d: any) => d.target, children, ...restProps -}: Props) { +}: LinkVerticalLineProps) { const pathGen = path || pathVerticalLine({ source, target, x, y }); if (children) return children({ path }); return ( diff --git a/packages/vx-shape/src/shapes/link/step/LinkHorizontalStep.tsx b/packages/vx-shape/src/shapes/link/step/LinkHorizontalStep.tsx index f37f2bfd2..9ae24fecf 100644 --- a/packages/vx-shape/src/shapes/link/step/LinkHorizontalStep.tsx +++ b/packages/vx-shape/src/shapes/link/step/LinkHorizontalStep.tsx @@ -1,19 +1,18 @@ import React from 'react'; import cx from 'classnames'; import { path as d3Path } from 'd3-path'; +import { SharedLinkProps, AccessorProps } from '../types'; -export function pathHorizontalStep({ +export function pathHorizontalStep({ source, target, x, y, percent, -}: // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. -$TSFixMe) { - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. - return (data: $TSFixMe) => { - const sourceData = source(data); - const targetData = target(data); +}: Required> & { percent: number }) { + return (link: Link) => { + const sourceData = source(link); + const targetData = target(link); const sx = x(sourceData); const sy = y(sourceData); @@ -30,41 +29,24 @@ $TSFixMe) { }; } -type Props = { - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - innerRef?: $TSFixMeFunction | $TSFixMe; +type LinkHorizontalStepProps = { percent?: number; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - x?: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - y?: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - source?: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - target?: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - path?: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - children?: $TSFixMeFunction; - className?: string; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. - data?: $TSFixMe; -}; +} & AccessorProps & + SharedLinkProps; -// @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. -export default function LinkHorizontalStep({ +export default function LinkHorizontalStep({ className, innerRef, data, path, percent = 0.5, - x = (d: $TSFixMe) => d.y, - y = (d: $TSFixMe) => d.x, - source = (d: $TSFixMe) => d.source, - target = (d: $TSFixMe) => d.target, + x = (d: any) => d.y, + y = (d: any) => d.x, + source = (d: any) => d.source, + target = (d: any) => d.target, children, ...restProps -}: Props) { +}: LinkHorizontalStepProps) { const pathGen = path || pathHorizontalStep({ source, target, x, y, percent }); if (children) return children({ path }); return ( diff --git a/packages/vx-shape/src/shapes/link/step/LinkRadialStep.tsx b/packages/vx-shape/src/shapes/link/step/LinkRadialStep.tsx index 9e9bf31e8..5a48e7d85 100644 --- a/packages/vx-shape/src/shapes/link/step/LinkRadialStep.tsx +++ b/packages/vx-shape/src/shapes/link/step/LinkRadialStep.tsx @@ -1,17 +1,16 @@ import React from 'react'; import cx from 'classnames'; +import { SharedLinkProps, AccessorProps } from '../types'; -export function pathRadialStep({ +export function pathRadialStep({ source, target, x, y, -}: // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. -$TSFixMe) { - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. - return (data: $TSFixMe) => { - const sourceData = source(data); - const targetData = target(data); +}: Required>) { + return (link: Link) => { + const sourceData = source(link); + const targetData = target(link); const sx = x(sourceData); const sy = y(sourceData); @@ -37,39 +36,23 @@ $TSFixMe) { }; } -type Props = { - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - innerRef?: $TSFixMeFunction | $TSFixMe; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - x?: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - y?: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - source?: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - target?: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - path?: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - children?: $TSFixMeFunction; - className?: string; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. - data?: $TSFixMe; -}; +type LinkRadialStepProps = { + percent?: number; +} & AccessorProps & + SharedLinkProps; -// @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. -export default function LinkRadialStep({ +export default function LinkRadialStep({ className, innerRef, data, path, - x = (d: $TSFixMe) => d.x, - y = (d: $TSFixMe) => d.y, - source = (d: $TSFixMe) => d.source, - target = (d: $TSFixMe) => d.target, + x = (d: any) => d.x, + y = (d: any) => d.y, + source = (d: any) => d.source, + target = (d: any) => d.target, children, ...restProps -}: Props) { +}: LinkRadialStepProps) { const pathGen = path || pathRadialStep({ source, target, x, y }); if (children) return children({ path }); return ( diff --git a/packages/vx-shape/src/shapes/link/step/LinkVerticalStep.tsx b/packages/vx-shape/src/shapes/link/step/LinkVerticalStep.tsx index 787fc1a3f..16c8ee9a7 100644 --- a/packages/vx-shape/src/shapes/link/step/LinkVerticalStep.tsx +++ b/packages/vx-shape/src/shapes/link/step/LinkVerticalStep.tsx @@ -1,19 +1,18 @@ import React from 'react'; import cx from 'classnames'; import { path as d3Path } from 'd3-path'; +import { SharedLinkProps, AccessorProps } from '../types'; -export function pathVerticalStep({ +export function pathVerticalStep({ source, target, x, y, percent, -}: // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. -$TSFixMe) { - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. - return (data: $TSFixMe) => { - const sourceData = source(data); - const targetData = target(data); +}: Required> & { percent: number }) { + return (link: Link) => { + const sourceData = source(link); + const targetData = target(link); const sx = x(sourceData); const sy = y(sourceData); @@ -30,41 +29,24 @@ $TSFixMe) { }; } -type Props = { - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - innerRef?: $TSFixMeFunction | $TSFixMe; +type LinkVerticalStepProps = { percent?: number; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - x?: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - y?: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - source?: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - target?: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - path?: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - children?: $TSFixMeFunction; - className?: string; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. - data?: $TSFixMe; -}; +} & AccessorProps & + SharedLinkProps; -// @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. -export default function LinkVerticalStep({ +export default function LinkVerticalStep({ className, innerRef, data, path, percent = 0.5, - x = (d: $TSFixMe) => d.x, - y = (d: $TSFixMe) => d.y, - source = (d: $TSFixMe) => d.source, - target = (d: $TSFixMe) => d.target, + x = (d: any) => d.x, + y = (d: any) => d.y, + source = (d: any) => d.source, + target = (d: any) => d.target, children, ...restProps -}: Props) { +}: LinkVerticalStepProps) { const pathGen = path || pathVerticalStep({ source, target, x, y, percent }); if (children) return children({ path }); return ( diff --git a/packages/vx-shape/src/shapes/link/types.ts b/packages/vx-shape/src/shapes/link/types.ts new file mode 100644 index 000000000..e75f6f567 --- /dev/null +++ b/packages/vx-shape/src/shapes/link/types.ts @@ -0,0 +1,35 @@ +export type AccessorProps = { + /** Given a node, returns its x coordinate. */ + x?: (node: Node) => number; + /** Given a node, returns its y coordinate. */ + y?: (node: Node) => number; + /** Given a link, returns the source node. */ + source?: (link: Link) => Node; + /** Given a link, returns the target node. */ + target?: (link: Link) => Node; +}; + +export type RadialAccessorProps = Pick< + AccessorProps, + 'source' | 'target' +> & { + /** Given a node, returns its x coordinate. */ + angle?: (node: Node) => number; + /** Given a node, returns its y coordinate. */ + radius?: (node: Node) => number; +}; + +type PathType = (link: Link) => string; + +export type SharedLinkProps = { + /** className applied to path element. */ + className?: string; + /** React ref to the path element. */ + innerRef?: React.Ref; + /** Path generator, given a link returns a path d attribute string */ + path: PathType; + /** Render function override which is passed the configured path generator as input. */ + children?: (args: { path: PathType }) => NonNullable; + /** Datum for which to render a link. */ + data: Link; +} & Omit, 'x' | 'y' | 'source' | 'target' | 'angle' | 'radius'>; diff --git a/packages/vx-shape/src/util/setNumberOrNumberAccessor.ts b/packages/vx-shape/src/util/setNumberOrNumberAccessor.ts new file mode 100644 index 000000000..e504a07f2 --- /dev/null +++ b/packages/vx-shape/src/util/setNumberOrNumberAccessor.ts @@ -0,0 +1,13 @@ +export type NumberAccessor = (d: Datum) => number; + +/** + * This is a workaround for TypeScript not inferring the correct + * method overload/signature for some d3 shape methods. + */ +export default function setNumberOrNumberAccessor( + func: (d: number | NumberAccessor) => void, + value: number | NumberAccessor, +) { + if (typeof value === 'number') func(value); + else func(value); +} From 3768e98f02e89fd5b581ff265f549b32f7081ea0 Mon Sep 17 00:00:00 2001 From: Chris Williams Date: Thu, 19 Sep 2019 21:47:20 -0700 Subject: [PATCH 04/22] typescript(vx-shape): re-write BarGroups and BarStacks in TypeScript --- packages/vx-shape/src/shapes/AreaClosed.tsx | 7 +- packages/vx-shape/src/shapes/BarGroup.tsx | 107 +++++++++++------- .../src/shapes/BarGroupHorizontal.tsx | 82 +++++++++----- packages/vx-shape/src/shapes/BarStack.tsx | 96 +++++++++------- .../src/shapes/BarStackHorizontal.tsx | 80 ++++++------- packages/vx-shape/src/shapes/Stack.tsx | 6 +- packages/vx-shape/src/shapes/link/types.ts | 8 ++ packages/vx-shape/src/util/objHasMethod.ts | 6 - 8 files changed, 224 insertions(+), 168 deletions(-) delete mode 100644 packages/vx-shape/src/util/objHasMethod.ts diff --git a/packages/vx-shape/src/shapes/AreaClosed.tsx b/packages/vx-shape/src/shapes/AreaClosed.tsx index a24686a56..7dd0c4b58 100644 --- a/packages/vx-shape/src/shapes/AreaClosed.tsx +++ b/packages/vx-shape/src/shapes/AreaClosed.tsx @@ -2,12 +2,7 @@ import React from 'react'; import cx from 'classnames'; import { area } from 'd3-shape'; import { AreaProps } from './Area'; - -/** @TODO may need to revisit this. */ -interface ScaleType { - (): any; - range(): [number, number]; -} +import { ScaleType } from './link/types'; export type AreaClosedProps = { yScale: ScaleType; diff --git a/packages/vx-shape/src/shapes/BarGroup.tsx b/packages/vx-shape/src/shapes/BarGroup.tsx index 80cdb9f0a..2ff858e7b 100644 --- a/packages/vx-shape/src/shapes/BarGroup.tsx +++ b/packages/vx-shape/src/shapes/BarGroup.tsx @@ -1,32 +1,65 @@ import React from 'react'; import cx from 'classnames'; import { Group } from '@vx/group'; -import objHasMethod from '../util/objHasMethod'; import Bar from './Bar'; +import { ScaleType } from './link/types'; -type Props = { - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. - data: $TSFixMe[]; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - x0: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - x0Scale: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - x1Scale: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - yScale: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - color: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. - keys: $TSFixMe[]; +type Key = string; + +export type BarGroupProps = { + /** Array of data for which to generate grouped bars. */ + data: Datum[]; + /** Returns the value mapped to the x0 (group position) of a bar */ + x0: (d: Datum) => any; + /** @vx/scale or d3-scale that takes an x0 value (position of group) and maps it to an x0 axis position of the group. */ + x0Scale: ScaleType; + /** @vx/scale or d3-scale that takes a group key and maps it to an x axis position (within a group). */ + x1Scale: ScaleType; + /** @vx/scale or d3-scale that takes an y value (Datum[key]) and maps it to a y axis position. */ + yScale: ScaleType; + /** Returns the desired color for a bar with a given key and index. */ + color: (key: Key, index: number) => string; + /** Array of keys corresponding to stack layers. */ + keys: Key[]; + /** Total height of the y-axis. */ height: number; + /** className applied to Bars. */ className?: string; + /** Top offset of rendered Bars. */ top?: number; + /** Left offset of rendered Bars. */ left?: number; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - children?: $TSFixMeFunction; + /** Override render function which is passed the computed BarGroups. */ + children?: (barGroups: BarGroup[]) => React.ReactNode; }; +/** One BarGroup is returned for each datum, which has multiple sub-bars (based on keys). */ +export interface BarGroup { + /** index of BarGroup (matches input Datum index). */ + index: number; + /** x0 position of bar group */ + x0: number; + /** bars within group, one for each key. */ + bars: ({ + /** group key */ + key: Key; + /** index of BarGroup (matches input Datum index). */ + index: number; + /** group value (Datum[key]) */ + value: number; + /** height of bar. */ + height: number; + /** width of bar. */ + width: number; + /** x position of bar. */ + x: number; + /** y position of bar. */ + y: number; + /** color of bar. */ + color: string; + })[]; +} + /** * Generates bar groups as an array of objects and renders ``s for each datum grouped by `key`. A general setup might look like this: * @@ -65,7 +98,7 @@ type Props = { * * Example: [https://vx-demo.now.sh/bargroup](https://vx-demo.now.sh/bargroup) */ -export default function BarGroup({ +export default function BarGroup({ data, className, top, @@ -79,15 +112,16 @@ export default function BarGroup({ height, children, ...restProps -}: Props) { +}: BarGroupProps) { const x1Range = x1Scale.range(); const x1Domain = x1Scale.domain(); - const barWidth = objHasMethod(x1Scale, 'bandwidth') - ? x1Scale.bandwidth() - : Math.abs(x1Range[x1Range.length - 1] - x1Range[0]) / x1Domain.length; + const barWidth = + 'bandwidth' in x1Scale && typeof x1Scale.bandwidth === 'function' + ? x1Scale.bandwidth() + : Math.abs(x1Range[x1Range.length - 1] - x1Range[0]) / x1Domain.length; - const barGroups = data.map((group, i) => { + const barGroups: BarGroup[] = data.map((group, i) => { return { index: i, x0: x0Scale(x0(group)), @@ -114,20 +148,17 @@ export default function BarGroup({ {barGroups.map(barGroup => { return ( - {barGroup.bars.map(bar => { - return ( - // @ts-ignore ts-migrate(2322) FIXME: Property 'x' does not exist on type 'IntrinsicAttr... Remove this comment to see the full error message - - ); - })} + {barGroup.bars.map(bar => ( + + ))} ); })} diff --git a/packages/vx-shape/src/shapes/BarGroupHorizontal.tsx b/packages/vx-shape/src/shapes/BarGroupHorizontal.tsx index bbffd3352..bdabd359f 100644 --- a/packages/vx-shape/src/shapes/BarGroupHorizontal.tsx +++ b/packages/vx-shape/src/shapes/BarGroupHorizontal.tsx @@ -1,35 +1,60 @@ import React from 'react'; import cx from 'classnames'; import { Group } from '@vx/group'; -import objHasMethod from '../util/objHasMethod'; import Bar from './Bar'; +import { BarGroupProps } from './BarGroup'; +import { ScaleType } from './link/types'; -type Props = { - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. - data: $TSFixMe[]; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - y0: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - y0Scale: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - y1Scale: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - xScale: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - color: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. - keys: $TSFixMe[]; +type Key = string; + +type BarGroupHorizontalProps = Pick< + BarGroupProps, + 'data' | 'className' | 'top' | 'left' | 'keys' | 'color' +> & { + /** Returns the value (Datum[key]) mapped to the x of a bar */ + x: (barValue: number) => number; + /** Returns the value mapped to the y0 (position of group) of a bar */ + y0: (d: Datum) => any; + /** @vx/scale or d3-scale that takes a key value (Datum[key]) and maps it to an x axis position (width of bar). */ + xScale: ScaleType; + /** @vx/scale or d3-scale that takes a y0 value (position of group) and maps it to a y axis position. */ + y0Scale: ScaleType; + /** @vx/scale or d3-scale that takes a group key and maps it to an y axis position (within a group). */ + y1Scale: ScaleType; + /** Total width of the x-axis. */ width: number; - className?: string; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - x?: $TSFixMeFunction; - top?: number; - left?: number; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - children?: $TSFixMeFunction; + /** Override render function which is passed the computed Ba/rGroups. */ + children?: (barGroups: BarGroup[]) => React.ReactNode; }; -export default function BarGroupHorizontal({ +/** One BarGroup is returned for each datum, which has multiple sub-bars (based on keys). */ +export interface BarGroup { + /** index of BarGroup (matches input Datum index). */ + index: number; + /** y0 position of bar group */ + y0: number; + /** bars within group, one for each key. */ + bars: ({ + /** group key */ + key: Key; + /** index of BarGroup (matches input Datum index). */ + index: number; + /** group value (Datum[key]) */ + value: number; + /** height of bar. */ + height: number; + /** width of bar. */ + width: number; + /** x position of bar. */ + x: number; + /** y position of bar. */ + y: number; + /** color of bar. */ + color: string; + })[]; +} + +export default function BarGroupHorizontal({ data, className, top, @@ -44,12 +69,13 @@ export default function BarGroupHorizontal({ width, children, ...restProps -}: Props) { +}: BarGroupHorizontalProps) { const y1Range = y1Scale.range(); const y1Domain = y1Scale.domain(); - const barHeight = objHasMethod(y1Scale, 'bandwidth') - ? y1Scale.bandwidth() - : Math.abs(y1Range[y1Range.length - 1] - y1Range[0]) / y1Domain.length; + const barHeight = + 'bandwidth' in y1Scale && typeof y1Scale.bandwidth === 'function' + ? y1Scale.bandwidth() + : Math.abs(y1Range[y1Range.length - 1] - y1Range[0]) / y1Domain.length; const barGroups = data.map((group, i) => { return { diff --git a/packages/vx-shape/src/shapes/BarStack.tsx b/packages/vx-shape/src/shapes/BarStack.tsx index 151c3f44a..c92421f24 100644 --- a/packages/vx-shape/src/shapes/BarStack.tsx +++ b/packages/vx-shape/src/shapes/BarStack.tsx @@ -1,51 +1,57 @@ import React from 'react'; import cx from 'classnames'; import { Group } from '@vx/group'; -import { stack as d3stack } from 'd3-shape'; +import { stack as d3stack, SeriesPoint } from 'd3-shape'; + import stackOrder from '../util/stackOrder'; import stackOffset from '../util/stackOffset'; -import objHasMethod from '../util/objHasMethod'; import Bar from './Bar'; +import { StackProps, Key } from './Stack'; +import { ScaleType } from './link/types'; -type Props = { - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. - data: $TSFixMe[]; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - x: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - xScale: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - yScale: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - color: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. - keys: $TSFixMe[]; - className?: string; - top?: number; - left?: number; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - children?: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - y0?: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - y1?: $TSFixMeFunction; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - order?: $TSFixMeFunction | $TSFixMe[] | string; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - offset?: $TSFixMeFunction | $TSFixMe[] | string; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMeFunction'. - value?: $TSFixMeFunction | number; +export type BarStackProps = Pick< + StackProps, + 'data' | 'className' | 'top' | 'left' | 'keys' | 'order' | 'offset' | 'value' +> & { + /** Returns the value mapped to the x of a bar */ + x: (d: Datum) => number; + /** Returns the value mapped to the y0 of a bar. */ + y0: (d: SeriesPoint) => number; + /** Returns the value mapped to the y1 of a bar. */ + y1: (d: SeriesPoint) => number; + /** @vx/scale or d3-scale that takes an x value and maps it to an x axis position. */ + xScale: ScaleType; + /** @vx/scale or d3-scale that takes a y value and maps it to an y axis position. */ + yScale: ScaleType; + /** Returns the desired color for a bar with a given key and index. */ + color: (key: Key, index: number) => string; + /** Override render function which is passed the configured arc generator as input. */ + children?: (stacks: BarStack[]) => React.ReactNode; }; -// @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. -export default function BarStack({ +export interface BarStack { + index: number; + key: Key; + bars: ({ + bar: SeriesPoint; + key: Key; + index: number; + height: number; + width: number; + x: number; + y: number; + color: string; + })[]; +} + +export default function BarStack({ data, className, top, left, x, - y0 = (d: $TSFixMe) => d[0], - y1 = (d: $TSFixMe) => d[1], + y0 = (d: any) => d[0], + y1 = (d: any) => d[1], xScale, yScale, color, @@ -55,8 +61,8 @@ export default function BarStack({ offset, children, ...restProps -}: Props) { - const stack = d3stack(); +}: BarStackProps) { + const stack = d3stack(); if (keys) stack.keys(keys); if (value) stack.value(value); if (order) stack.order(stackOrder(order)); @@ -66,11 +72,12 @@ export default function BarStack({ const xRange = xScale.range(); const xDomain = xScale.domain(); - const barWidth = objHasMethod(xScale, 'bandwidth') - ? xScale.bandwidth() - : Math.abs(xRange[xRange.length - 1] - xRange[0]) / xDomain.length; + const barWidth = + 'bandwidth' in xScale && typeof xScale.bandwidth === 'function' + ? xScale.bandwidth() + : Math.abs(xRange[xRange.length - 1] - xRange[0]) / xDomain.length; - const barStacks = stacks.map((barStack, i) => { + const barStacks: BarStack[] = stacks.map((barStack, i) => { const { key } = barStack; return { index: i, @@ -78,9 +85,11 @@ export default function BarStack({ bars: barStack.map((bar, j) => { const barHeight = yScale(y0(bar)) - yScale(y1(bar)); const barY = yScale(y1(bar)); - const barX = objHasMethod(xScale, 'bandwidth') - ? xScale(x(bar.data)) - : Math.max(xScale(x(bar.data)) - barWidth / 2); + const barX = + 'bandwidth' in xScale && typeof xScale.bandwidth === 'function' + ? xScale(x(bar.data)) + : Math.max(xScale(x(bar.data)) - barWidth / 2); + return { bar, key, @@ -102,7 +111,6 @@ export default function BarStack({ {barStacks.map(barStack => { return barStack.bars.map(bar => { return ( - // @ts-ignore ts-migrate(2322) FIXME: Property 'x' does not exist on type 'IntrinsicAttr... Remove this comment to see the full error message = Pick< + BarStackProps, + | 'data' + | 'className' + | 'top' + | 'left' + | 'keys' + | 'order' + | 'offset' + | 'value' + | 'xScale' + | 'yScale' + | 'color' + | 'children' +> & { + /** Returns the value mapped to the x0 of a bar. */ + x0: (d: SeriesPoint) => number; + /** Returns the value mapped to the x1 of a bar. */ + x1: (d: SeriesPoint) => number; + /** Returns the value mapped to the y of a bar. */ + y: (d: Datum) => number; }; -// @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. -export default function BarStackHorizontal({ +export default function BarStackHorizontal({ data, className, top, left, y, - x0 = (d: $TSFixMe) => d[0], - x1 = (d: $TSFixMe) => d[1], + x0 = (d: any) => d[0], + x1 = (d: any) => d[1], xScale, yScale, color, @@ -55,8 +48,8 @@ export default function BarStackHorizontal({ offset, children, ...restProps -}: Props) { - const stack = d3stack(); +}: BarStackHorizontalProps) { + const stack = d3stack(); if (keys) stack.keys(keys); if (value) stack.value(value); if (order) stack.order(stackOrder(order)); @@ -66,9 +59,10 @@ export default function BarStackHorizontal({ const yRange = yScale.range(); const yDomain = yScale.domain(); - const barHeight = objHasMethod(yScale, 'bandwidth') - ? yScale.bandwidth() - : Math.abs(yRange[yRange.length - 1] - yRange[0]) / yDomain.length; + const barHeight = + 'bandwidth' in yScale && typeof yScale.bandwidth === 'function' + ? yScale.bandwidth() + : Math.abs(yRange[yRange.length - 1] - yRange[0]) / yDomain.length; const barStacks = stacks.map((barStack, i) => { const { key } = barStack; @@ -78,9 +72,10 @@ export default function BarStackHorizontal({ bars: barStack.map((bar, j) => { const barWidth = xScale(x1(bar)) - xScale(x0(bar)); const barX = xScale(x0(bar)); - const barY = objHasMethod(yScale, 'bandwidth') - ? yScale(y(bar.data)) - : Math.max(yScale(y(bar.data)) - barWidth / 2); + const barY = + 'bandwidth' in yScale && typeof yScale.bandwidth === 'function' + ? yScale(y(bar.data)) + : Math.max(yScale(y(bar.data)) - barWidth / 2); return { bar, key, @@ -102,7 +97,6 @@ export default function BarStackHorizontal({ {barStacks.map(barStack => { return barStack.bars.map(bar => { return ( - // @ts-ignore ts-migrate(2322) FIXME: Property 'x' does not exist on type 'IntrinsicAttr... Remove this comment to see the full error message = (datum: Datum, index: number, data: Datum[]) => number; -type Key = string; +export type Key = string; export type StackProps = { /** Array of data for which to generate a stack. */ @@ -29,13 +29,13 @@ export type StackProps = { curve?: CurveFactory; /** Returns a color for a given stack key and index. */ color?: (key: Key, index: number) => string; - // @ts-ignore ts-migrate(2304) FIXME: Cannot find name '$TSFixMe'. + /** Array of keys corresponding to stack layers. */ keys?: Key[]; /** Override render function which is passed the configured arc generator as input. */ children?: (args: { stacks: any; path: AreaType>; - stack: StackType; + stack: StackType; }) => React.ReactNode; /** Sets the x0 accessor function, and sets x1 to null. */ x?: Accessor>; diff --git a/packages/vx-shape/src/shapes/link/types.ts b/packages/vx-shape/src/shapes/link/types.ts index e75f6f567..48a86cb75 100644 --- a/packages/vx-shape/src/shapes/link/types.ts +++ b/packages/vx-shape/src/shapes/link/types.ts @@ -33,3 +33,11 @@ export type SharedLinkProps = { /** Datum for which to render a link. */ data: Link; } & Omit, 'x' | 'y' | 'source' | 'target' | 'angle' | 'radius'>; + +/** @TODO may need to revisit this. */ +export interface ScaleType { + (...args: any[]): number; + range(): [number, number]; + domain(): [any, any]; + bandwidth?: () => number; +} diff --git a/packages/vx-shape/src/util/objHasMethod.ts b/packages/vx-shape/src/util/objHasMethod.ts deleted file mode 100644 index cd30b4571..000000000 --- a/packages/vx-shape/src/util/objHasMethod.ts +++ /dev/null @@ -1,6 +0,0 @@ -export default function objHasMethod( - obj: T, - funcName: string, -) { - return funcName in obj && typeof obj[funcName] === 'function'; -} From 9eea4ed31181b1189987848481e90719026d7cf0 Mon Sep 17 00:00:00 2001 From: Chris Williams Date: Thu, 19 Sep 2019 21:47:53 -0700 Subject: [PATCH 05/22] deps(vx-shape): remove @vx/point dep --- packages/vx-shape/package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/vx-shape/package.json b/packages/vx-shape/package.json index 63b525e0a..bc2abf52f 100644 --- a/packages/vx-shape/package.json +++ b/packages/vx-shape/package.json @@ -31,7 +31,6 @@ "@types/react": "*", "@vx/curve": "0.0.192", "@vx/group": "0.0.192", - "@vx/point": "0.0.192", "classnames": "^2.2.5", "d3-path": "^1.0.5", "d3-shape": "^1.2.0", From e35459055419924fb55f083849d309b4e67ca45c Mon Sep 17 00:00:00 2001 From: Chris Williams Date: Fri, 20 Sep 2019 10:35:09 -0700 Subject: [PATCH 06/22] typescript(vx-shape): fix Stack and AreaStack error --- packages/vx-shape/src/shapes/AreaStack.tsx | 4 ++-- packages/vx-shape/src/shapes/Stack.tsx | 7 +++---- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/packages/vx-shape/src/shapes/AreaStack.tsx b/packages/vx-shape/src/shapes/AreaStack.tsx index 794756aac..79efa9918 100644 --- a/packages/vx-shape/src/shapes/AreaStack.tsx +++ b/packages/vx-shape/src/shapes/AreaStack.tsx @@ -44,7 +44,7 @@ export default function AreaStack({ ...restProps }: AreaStackProps & React.SVGProps) { return ( - className={className} top={top} left={left} @@ -65,7 +65,7 @@ export default function AreaStack({ > {children || (({ stacks, path }) => - stacks.map((series: $TSFixMe, i: $TSFixMe) => ( + stacks.map((series, i) => ( = { keys?: Key[]; /** Override render function which is passed the configured arc generator as input. */ children?: (args: { - stacks: any; + stacks: Series[]; path: AreaType>; stack: StackType; }) => React.ReactNode; @@ -43,8 +44,6 @@ export type StackProps = { x0?: Accessor>; /** Specifies the x1 accessor function which defaults to null. */ x1?: Accessor>; - /** Sets the y0 accessor function, and sets y1 to null. */ - y?: Accessor>; /** Specifies the y0 accessor function which defaults to d => 0. */ y0?: Accessor>; /** Specifies the y1 accessor function which defaults to d => d[1]. */ @@ -96,7 +95,7 @@ export default function Stack({ const stacks = stack(data); - if (children) return children({ stacks, path, stack }); + if (children) return <>{children({ stacks, path, stack })}; return ( From bb9d5af0233dafeb1e54e68a47023ebcc53604bf Mon Sep 17 00:00:00 2001 From: Chris Williams Date: Fri, 20 Sep 2019 10:39:20 -0700 Subject: [PATCH 07/22] typescript(vx-shape): update children(*) => <>children(*) --- packages/vx-shape/src/shapes/Arc.tsx | 2 +- packages/vx-shape/src/shapes/Area.tsx | 2 +- packages/vx-shape/src/shapes/AreaClosed.tsx | 2 +- packages/vx-shape/src/shapes/BarGroup.tsx | 2 +- packages/vx-shape/src/shapes/BarGroupHorizontal.tsx | 2 +- packages/vx-shape/src/shapes/BarStack.tsx | 2 +- packages/vx-shape/src/shapes/BarStackHorizontal.tsx | 2 +- packages/vx-shape/src/shapes/LinePath.tsx | 2 +- packages/vx-shape/src/shapes/LineRadial.tsx | 2 +- packages/vx-shape/src/shapes/Pie.tsx | 2 +- packages/vx-shape/src/shapes/Polygon.tsx | 2 +- packages/vx-shape/src/shapes/link/curve/LinkHorizontalCurve.tsx | 2 +- packages/vx-shape/src/shapes/link/curve/LinkRadialCurve.tsx | 2 +- packages/vx-shape/src/shapes/link/curve/LinkVerticalCurve.tsx | 2 +- packages/vx-shape/src/shapes/link/diagonal/LinkHorizontal.tsx | 2 +- packages/vx-shape/src/shapes/link/diagonal/LinkRadial.tsx | 2 +- packages/vx-shape/src/shapes/link/diagonal/LinkVertical.tsx | 2 +- packages/vx-shape/src/shapes/link/line/LinkHorizontalLine.tsx | 2 +- packages/vx-shape/src/shapes/link/line/LinkRadialLine.tsx | 2 +- packages/vx-shape/src/shapes/link/line/LinkVerticalLine.tsx | 2 +- packages/vx-shape/src/shapes/link/step/LinkHorizontalStep.tsx | 2 +- packages/vx-shape/src/shapes/link/step/LinkRadialStep.tsx | 2 +- packages/vx-shape/src/shapes/link/step/LinkVerticalStep.tsx | 2 +- 23 files changed, 23 insertions(+), 23 deletions(-) diff --git a/packages/vx-shape/src/shapes/Arc.tsx b/packages/vx-shape/src/shapes/Arc.tsx index c92118661..0ed00e4d1 100644 --- a/packages/vx-shape/src/shapes/Arc.tsx +++ b/packages/vx-shape/src/shapes/Arc.tsx @@ -51,7 +51,7 @@ export default function Arc({ if (padAngle != null) setNumOrAccessor(arc.padAngle, padAngle); if (padRadius != null) setNumOrAccessor(arc.padRadius, padRadius); - if (children) return children({ path: arc }); + if (children) return <>{children({ path: arc })}; return ( data && ( diff --git a/packages/vx-shape/src/shapes/Area.tsx b/packages/vx-shape/src/shapes/Area.tsx index 6d6692249..d1fb37bd2 100644 --- a/packages/vx-shape/src/shapes/Area.tsx +++ b/packages/vx-shape/src/shapes/Area.tsx @@ -55,7 +55,7 @@ export default function Area({ if (y1) path.y1(y1); if (defined) path.defined(defined); if (curve) path.curve(curve); - if (children) return children({ path }); + if (children) return <>{children({ path })}; return ( ({ if (y1 && !y) path.y1(y1); if (defined) path.defined(defined); if (curve) path.curve(curve); - if (children) return children({ path }); + if (children) return <>{children({ path })}; return ( ({ }; }); - if (children) return children(barGroups); + if (children) return <>{children(barGroups)}; return ( diff --git a/packages/vx-shape/src/shapes/BarGroupHorizontal.tsx b/packages/vx-shape/src/shapes/BarGroupHorizontal.tsx index bdabd359f..7436ced44 100644 --- a/packages/vx-shape/src/shapes/BarGroupHorizontal.tsx +++ b/packages/vx-shape/src/shapes/BarGroupHorizontal.tsx @@ -97,7 +97,7 @@ export default function BarGroupHorizontal{children(barGroups)}; return ( diff --git a/packages/vx-shape/src/shapes/BarStack.tsx b/packages/vx-shape/src/shapes/BarStack.tsx index c92421f24..976905a61 100644 --- a/packages/vx-shape/src/shapes/BarStack.tsx +++ b/packages/vx-shape/src/shapes/BarStack.tsx @@ -104,7 +104,7 @@ export default function BarStack({ }; }); - if (children) return children(barStacks); + if (children) return <>{children(barStacks)}; return ( diff --git a/packages/vx-shape/src/shapes/BarStackHorizontal.tsx b/packages/vx-shape/src/shapes/BarStackHorizontal.tsx index 2876ca132..a96a63a08 100644 --- a/packages/vx-shape/src/shapes/BarStackHorizontal.tsx +++ b/packages/vx-shape/src/shapes/BarStackHorizontal.tsx @@ -90,7 +90,7 @@ export default function BarStackHorizontal({ }; }); - if (children) return children(barStacks); + if (children) return <>{children(barStacks)}; return ( diff --git a/packages/vx-shape/src/shapes/LinePath.tsx b/packages/vx-shape/src/shapes/LinePath.tsx index bee06a9cc..56952f95b 100644 --- a/packages/vx-shape/src/shapes/LinePath.tsx +++ b/packages/vx-shape/src/shapes/LinePath.tsx @@ -40,7 +40,7 @@ export default function LinePath({ if (y) path.y(y); if (defined) path.defined(defined); if (curve) path.curve(curve); - if (children) return children({ path }); + if (children) return <>{children({ path })}; return ( ({ if (radius) path.radius(radius); if (defined) path.defined(defined); if (curve) path.curve(curve); - if (children) return children({ path }); + if (children) return <>{children({ path })}; return ( ({ if (endAngle != null) setNumOrAccessor(pie.endAngle, endAngle); const arcs = pie(data); - if (children) return children({ arcs, path, pie }); + if (children) return <>{children({ arcs, path, pie })}; return ( diff --git a/packages/vx-shape/src/shapes/Polygon.tsx b/packages/vx-shape/src/shapes/Polygon.tsx index 724cb30be..2052b3b56 100644 --- a/packages/vx-shape/src/shapes/Polygon.tsx +++ b/packages/vx-shape/src/shapes/Polygon.tsx @@ -73,7 +73,7 @@ export default function Polygon({ rotate, }).map(({ x, y }) => [x, y]); - if (children) return children({ points }); + if (children) return <>{children({ points })}; return ( ({ ...restProps }: LinkHorizontalCurveProps) { const pathGen = path || pathHorizontalCurve({ source, target, x, y, percent }); - if (children) return children({ path }); + if (children) return <>{children({ path })}; return ( ({ ...restProps }: LinkRadialCurveProps) { const pathGen = path || pathRadialCurve({ source, target, x, y, percent }); - if (children) return children({ path }); + if (children) return <>{children({ path })}; return ( ({ ...restProps }: LinkVerticalCurveProps) { const pathGen = path || pathVerticalCurve({ source, target, x, y, percent }); - if (children) return children({ path }); + if (children) return <>{children({ path })}; return ( ({ ...restProps }: LinkHorizontalDiagonalProps) { const pathGen = path || pathHorizontalDiagonal({ source, target, x, y }); - if (children) return children({ path }); + if (children) return <>{children({ path })}; return ( ({ ...restProps }: LinkRadialDiagonalProps) { const pathGen = path || pathRadialDiagonal({ source, target, angle, radius }); - if (children) return children({ path }); + if (children) return <>{children({ path })}; return ( ({ ...restProps }: LinkVerticalDiagonalProps) { const pathGen = path || pathVerticalDiagonal({ source, target, x, y }); - if (children) return children({ path }); + if (children) return <>{children({ path })}; return ( ({ ...restProps }: LinkHorizontalLineProps) { const pathGen = path || pathHorizontalLine({ source, target, x, y }); - if (children) return children({ path }); + if (children) return <>{children({ path })}; return ( ({ ...restProps }: LinkRadialLineProps) { const pathGen = path || pathRadialLine({ source, target, x, y }); - if (children) return children({ path }); + if (children) return <>{children({ path })}; return ( ({ ...restProps }: LinkVerticalLineProps) { const pathGen = path || pathVerticalLine({ source, target, x, y }); - if (children) return children({ path }); + if (children) return <>{children({ path })}; return ( ({ ...restProps }: LinkHorizontalStepProps) { const pathGen = path || pathHorizontalStep({ source, target, x, y, percent }); - if (children) return children({ path }); + if (children) return <>{children({ path })}; return ( ({ ...restProps }: LinkRadialStepProps) { const pathGen = path || pathRadialStep({ source, target, x, y }); - if (children) return children({ path }); + if (children) return <>{children({ path })}; return ( ({ ...restProps }: LinkVerticalStepProps) { const pathGen = path || pathVerticalStep({ source, target, x, y, percent }); - if (children) return children({ path }); + if (children) return <>{children({ path })}; return ( Date: Fri, 20 Sep 2019 11:05:49 -0700 Subject: [PATCH 08/22] typescript(vx-shape): update types path, update all restProps signatures to omit own props --- packages/vx-shape/.notes | 5 ----- packages/vx-shape/src/shapes/Arc.tsx | 2 +- packages/vx-shape/src/shapes/Area.tsx | 11 ++--------- packages/vx-shape/src/shapes/AreaClosed.tsx | 4 ++-- packages/vx-shape/src/shapes/AreaStack.tsx | 2 +- packages/vx-shape/src/shapes/Bar.tsx | 2 +- packages/vx-shape/src/shapes/BarGroup.tsx | 4 ++-- packages/vx-shape/src/shapes/BarGroupHorizontal.tsx | 5 +++-- packages/vx-shape/src/shapes/BarStack.tsx | 4 ++-- packages/vx-shape/src/shapes/BarStackHorizontal.tsx | 3 ++- packages/vx-shape/src/shapes/Circle.tsx | 2 +- packages/vx-shape/src/shapes/Line.tsx | 2 +- packages/vx-shape/src/shapes/LinePath.tsx | 2 +- packages/vx-shape/src/shapes/LineRadial.tsx | 2 +- packages/vx-shape/src/shapes/Pie.tsx | 2 +- packages/vx-shape/src/shapes/Polygon.tsx | 2 +- packages/vx-shape/src/shapes/Stack.tsx | 2 +- .../src/shapes/link/curve/LinkHorizontalCurve.tsx | 5 +++-- .../src/shapes/link/curve/LinkRadialCurve.tsx | 5 +++-- .../src/shapes/link/curve/LinkVerticalCurve.tsx | 5 +++-- .../src/shapes/link/diagonal/LinkHorizontal.tsx | 5 +++-- .../vx-shape/src/shapes/link/diagonal/LinkRadial.tsx | 7 ++++--- .../src/shapes/link/diagonal/LinkVertical.tsx | 5 +++-- .../src/shapes/link/line/LinkHorizontalLine.tsx | 5 +++-- .../vx-shape/src/shapes/link/line/LinkRadialLine.tsx | 5 +++-- .../src/shapes/link/line/LinkVerticalLine.tsx | 5 +++-- .../src/shapes/link/step/LinkHorizontalStep.tsx | 5 +++-- .../vx-shape/src/shapes/link/step/LinkRadialStep.tsx | 5 +++-- .../src/shapes/link/step/LinkVerticalStep.tsx | 5 +++-- packages/vx-shape/src/{shapes/link => }/types.ts | 4 ++-- 30 files changed, 62 insertions(+), 60 deletions(-) delete mode 100644 packages/vx-shape/.notes rename packages/vx-shape/src/{shapes/link => }/types.ts (90%) diff --git a/packages/vx-shape/.notes b/packages/vx-shape/.notes deleted file mode 100644 index ebbcbe512..000000000 --- a/packages/vx-shape/.notes +++ /dev/null @@ -1,5 +0,0 @@ -Arc.centroid prop removed - -removed @vx/point dep. - -remove duplicate code for links \ No newline at end of file diff --git a/packages/vx-shape/src/shapes/Arc.tsx b/packages/vx-shape/src/shapes/Arc.tsx index 0ed00e4d1..a277ec508 100644 --- a/packages/vx-shape/src/shapes/Arc.tsx +++ b/packages/vx-shape/src/shapes/Arc.tsx @@ -41,7 +41,7 @@ export default function Arc({ children, innerRef, ...restProps -}: ArcProps & React.SVGProps) { +}: ArcProps & Omit, keyof ArcProps>) { const arc = d3Arc(); if (innerRadius != null) setNumOrAccessor(arc.innerRadius, innerRadius); if (outerRadius != null) setNumOrAccessor(arc.outerRadius, outerRadius); diff --git a/packages/vx-shape/src/shapes/Area.tsx b/packages/vx-shape/src/shapes/Area.tsx index d1fb37bd2..7e12a461e 100644 --- a/packages/vx-shape/src/shapes/Area.tsx +++ b/packages/vx-shape/src/shapes/Area.tsx @@ -45,7 +45,7 @@ export default function Area({ curve, innerRef, ...restProps -}: AreaProps & React.SVGProps) { +}: AreaProps & Omit, keyof AreaProps>) { const path = area(); if (x) path.x(x); if (x0) path.x0(x0); @@ -57,13 +57,6 @@ export default function Area({ if (curve) path.curve(curve); if (children) return <>{children({ path })}; return ( - - - + ); } diff --git a/packages/vx-shape/src/shapes/AreaClosed.tsx b/packages/vx-shape/src/shapes/AreaClosed.tsx index 3ccdbcf1e..15d0e6dd8 100644 --- a/packages/vx-shape/src/shapes/AreaClosed.tsx +++ b/packages/vx-shape/src/shapes/AreaClosed.tsx @@ -2,7 +2,7 @@ import React from 'react'; import cx from 'classnames'; import { area } from 'd3-shape'; import { AreaProps } from './Area'; -import { ScaleType } from './link/types'; +import { ScaleType } from '../types'; export type AreaClosedProps = { yScale: ScaleType; @@ -37,7 +37,7 @@ export default function AreaClosed({ innerRef, children, ...restProps -}: AreaClosedProps & React.SVGProps) { +}: AreaClosedProps & Omit, keyof AreaClosedProps>) { const path = area(); if (x) path.x(x); if (x0) path.x0(x0); diff --git a/packages/vx-shape/src/shapes/AreaStack.tsx b/packages/vx-shape/src/shapes/AreaStack.tsx index 79efa9918..dc0bb6ca0 100644 --- a/packages/vx-shape/src/shapes/AreaStack.tsx +++ b/packages/vx-shape/src/shapes/AreaStack.tsx @@ -42,7 +42,7 @@ export default function AreaStack({ color, children, ...restProps -}: AreaStackProps & React.SVGProps) { +}: AreaStackProps & Omit, keyof AreaStackProps>) { return ( className={className} diff --git a/packages/vx-shape/src/shapes/Bar.tsx b/packages/vx-shape/src/shapes/Bar.tsx index 7ad1efacf..e29b1388d 100644 --- a/packages/vx-shape/src/shapes/Bar.tsx +++ b/packages/vx-shape/src/shapes/Bar.tsx @@ -12,6 +12,6 @@ export default function Bar({ className, innerRef, ...restProps -}: BarProps & React.SVGProps) { +}: BarProps & Omit, keyof BarProps>) { return ; } diff --git a/packages/vx-shape/src/shapes/BarGroup.tsx b/packages/vx-shape/src/shapes/BarGroup.tsx index 7be6d2f77..cdaaa4c2d 100644 --- a/packages/vx-shape/src/shapes/BarGroup.tsx +++ b/packages/vx-shape/src/shapes/BarGroup.tsx @@ -2,7 +2,7 @@ import React from 'react'; import cx from 'classnames'; import { Group } from '@vx/group'; import Bar from './Bar'; -import { ScaleType } from './link/types'; +import { ScaleType } from '../types'; type Key = string; @@ -112,7 +112,7 @@ export default function BarGroup({ height, children, ...restProps -}: BarGroupProps) { +}: BarGroupProps & Omit, keyof BarGroupProps>) { const x1Range = x1Scale.range(); const x1Domain = x1Scale.domain(); diff --git a/packages/vx-shape/src/shapes/BarGroupHorizontal.tsx b/packages/vx-shape/src/shapes/BarGroupHorizontal.tsx index 7436ced44..ddd369932 100644 --- a/packages/vx-shape/src/shapes/BarGroupHorizontal.tsx +++ b/packages/vx-shape/src/shapes/BarGroupHorizontal.tsx @@ -3,7 +3,7 @@ import cx from 'classnames'; import { Group } from '@vx/group'; import Bar from './Bar'; import { BarGroupProps } from './BarGroup'; -import { ScaleType } from './link/types'; +import { ScaleType } from '../types'; type Key = string; @@ -69,7 +69,8 @@ export default function BarGroupHorizontal) { +}: BarGroupHorizontalProps & + Omit, keyof BarGroupHorizontalProps>) { const y1Range = y1Scale.range(); const y1Domain = y1Scale.domain(); const barHeight = diff --git a/packages/vx-shape/src/shapes/BarStack.tsx b/packages/vx-shape/src/shapes/BarStack.tsx index 976905a61..73504068e 100644 --- a/packages/vx-shape/src/shapes/BarStack.tsx +++ b/packages/vx-shape/src/shapes/BarStack.tsx @@ -7,7 +7,7 @@ import stackOrder from '../util/stackOrder'; import stackOffset from '../util/stackOffset'; import Bar from './Bar'; import { StackProps, Key } from './Stack'; -import { ScaleType } from './link/types'; +import { ScaleType } from '../types'; export type BarStackProps = Pick< StackProps, @@ -61,7 +61,7 @@ export default function BarStack({ offset, children, ...restProps -}: BarStackProps) { +}: BarStackProps & Omit, keyof BarStackProps>) { const stack = d3stack(); if (keys) stack.keys(keys); if (value) stack.value(value); diff --git a/packages/vx-shape/src/shapes/BarStackHorizontal.tsx b/packages/vx-shape/src/shapes/BarStackHorizontal.tsx index a96a63a08..5be72ccaa 100644 --- a/packages/vx-shape/src/shapes/BarStackHorizontal.tsx +++ b/packages/vx-shape/src/shapes/BarStackHorizontal.tsx @@ -48,7 +48,8 @@ export default function BarStackHorizontal({ offset, children, ...restProps -}: BarStackHorizontalProps) { +}: BarStackHorizontalProps & + Omit, keyof BarStackHorizontalProps>) { const stack = d3stack(); if (keys) stack.keys(keys); if (value) stack.value(value); diff --git a/packages/vx-shape/src/shapes/Circle.tsx b/packages/vx-shape/src/shapes/Circle.tsx index 7d5891cb4..9b8480518 100644 --- a/packages/vx-shape/src/shapes/Circle.tsx +++ b/packages/vx-shape/src/shapes/Circle.tsx @@ -12,6 +12,6 @@ export default function Circle({ className, innerRef, ...restProps -}: CircleProps & React.SVGProps) { +}: CircleProps & Omit, keyof CircleProps>) { return ; } diff --git a/packages/vx-shape/src/shapes/Line.tsx b/packages/vx-shape/src/shapes/Line.tsx index c42c3e448..a5242fb89 100644 --- a/packages/vx-shape/src/shapes/Line.tsx +++ b/packages/vx-shape/src/shapes/Line.tsx @@ -26,7 +26,7 @@ export default function Line({ className, innerRef, ...restProps -}: LineProps & Omit, 'from' | 'to'>) { +}: LineProps & Omit, keyof LineProps>) { return ( ({ innerRef, defined = () => true, ...restProps -}: LinePathProps & React.SVGProps) { +}: LinePathProps & Omit, keyof LinePathProps>) { const path = line(); if (x) path.x(x); if (y) path.y(y); diff --git a/packages/vx-shape/src/shapes/LineRadial.tsx b/packages/vx-shape/src/shapes/LineRadial.tsx index b4f0c6b9b..3b5496e52 100644 --- a/packages/vx-shape/src/shapes/LineRadial.tsx +++ b/packages/vx-shape/src/shapes/LineRadial.tsx @@ -26,7 +26,7 @@ export default function LineRadial({ children, fill = 'transparent', ...restProps -}: LineRadialProps & React.SVGProps) { +}: LineRadialProps & Omit, keyof LineRadialProps>) { const path = radialLine(); if (angle) path.angle(angle); if (radius) path.radius(radius); diff --git a/packages/vx-shape/src/shapes/Pie.tsx b/packages/vx-shape/src/shapes/Pie.tsx index 81a552117..769147f32 100644 --- a/packages/vx-shape/src/shapes/Pie.tsx +++ b/packages/vx-shape/src/shapes/Pie.tsx @@ -61,7 +61,7 @@ export default function Pie({ pieValue, children, ...restProps -}: PieProps & React.SVGProps) { +}: PieProps & Omit, keyof PieProps>) { const path = d3Arc>(); if (innerRadius != null) setNumOrAccessor(path.innerRadius, innerRadius); diff --git a/packages/vx-shape/src/shapes/Polygon.tsx b/packages/vx-shape/src/shapes/Polygon.tsx index 2052b3b56..85548771c 100644 --- a/packages/vx-shape/src/shapes/Polygon.tsx +++ b/packages/vx-shape/src/shapes/Polygon.tsx @@ -65,7 +65,7 @@ export default function Polygon({ children, innerRef, ...restProps -}: PolygonProps & React.SVGProps) { +}: PolygonProps & Omit, keyof PolygonProps>) { const points: [number, number][] = getPoints({ sides, size, diff --git a/packages/vx-shape/src/shapes/Stack.tsx b/packages/vx-shape/src/shapes/Stack.tsx index 55fbfde80..27c16a33d 100644 --- a/packages/vx-shape/src/shapes/Stack.tsx +++ b/packages/vx-shape/src/shapes/Stack.tsx @@ -77,7 +77,7 @@ export default function Stack({ color, children, ...restProps -}: StackProps & React.SVGProps) { +}: StackProps & Omit, keyof StackProps>) { const stack = d3stack(); if (keys) stack.keys(keys); if (value) stack.value(value); diff --git a/packages/vx-shape/src/shapes/link/curve/LinkHorizontalCurve.tsx b/packages/vx-shape/src/shapes/link/curve/LinkHorizontalCurve.tsx index 2154cdf5a..5ebbf7f2b 100644 --- a/packages/vx-shape/src/shapes/link/curve/LinkHorizontalCurve.tsx +++ b/packages/vx-shape/src/shapes/link/curve/LinkHorizontalCurve.tsx @@ -1,7 +1,7 @@ import React from 'react'; import cx from 'classnames'; import { path as d3Path } from 'd3-path'; -import { SharedLinkProps, AccessorProps } from '../types'; +import { SharedLinkProps, AccessorProps } from '../../../types'; export function pathHorizontalCurve({ source, @@ -49,7 +49,8 @@ export default function LinkHorizontalCurve({ source = (l: any) => l && l.source, target = (l: any) => l && l.target, ...restProps -}: LinkHorizontalCurveProps) { +}: LinkHorizontalCurveProps & + Omit, keyof LinkHorizontalCurveProps>) { const pathGen = path || pathHorizontalCurve({ source, target, x, y, percent }); if (children) return <>{children({ path })}; return ( diff --git a/packages/vx-shape/src/shapes/link/curve/LinkRadialCurve.tsx b/packages/vx-shape/src/shapes/link/curve/LinkRadialCurve.tsx index 43d9fe413..0ab63045b 100644 --- a/packages/vx-shape/src/shapes/link/curve/LinkRadialCurve.tsx +++ b/packages/vx-shape/src/shapes/link/curve/LinkRadialCurve.tsx @@ -1,7 +1,7 @@ import React from 'react'; import cx from 'classnames'; import { path as d3Path } from 'd3-path'; -import { SharedLinkProps, AccessorProps } from '../types'; +import { SharedLinkProps, AccessorProps } from '../../../types'; export function pathRadialCurve({ source, @@ -59,7 +59,8 @@ export default function LinkRadialCurve({ source = (l: any) => l && l.source, target = (l: any) => l && l.target, ...restProps -}: LinkRadialCurveProps) { +}: LinkRadialCurveProps & + Omit, keyof LinkRadialCurveProps>) { const pathGen = path || pathRadialCurve({ source, target, x, y, percent }); if (children) return <>{children({ path })}; return ( diff --git a/packages/vx-shape/src/shapes/link/curve/LinkVerticalCurve.tsx b/packages/vx-shape/src/shapes/link/curve/LinkVerticalCurve.tsx index 147a2a7a6..0611f3e29 100644 --- a/packages/vx-shape/src/shapes/link/curve/LinkVerticalCurve.tsx +++ b/packages/vx-shape/src/shapes/link/curve/LinkVerticalCurve.tsx @@ -1,7 +1,7 @@ import React from 'react'; import cx from 'classnames'; import { path as d3Path } from 'd3-path'; -import { SharedLinkProps, AccessorProps } from '../types'; +import { SharedLinkProps, AccessorProps } from '../../../types'; export function pathVerticalCurve({ source, @@ -49,7 +49,8 @@ export default function LinkVerticalCurve({ source = (l: any) => l && l.source, target = (l: any) => l && l.target, ...restProps -}: LinkVerticalCurveProps) { +}: LinkVerticalCurveProps & + Omit, keyof LinkVerticalCurveProps>) { const pathGen = path || pathVerticalCurve({ source, target, x, y, percent }); if (children) return <>{children({ path })}; return ( diff --git a/packages/vx-shape/src/shapes/link/diagonal/LinkHorizontal.tsx b/packages/vx-shape/src/shapes/link/diagonal/LinkHorizontal.tsx index b9317d7b1..410850c68 100644 --- a/packages/vx-shape/src/shapes/link/diagonal/LinkHorizontal.tsx +++ b/packages/vx-shape/src/shapes/link/diagonal/LinkHorizontal.tsx @@ -1,7 +1,7 @@ import React from 'react'; import cx from 'classnames'; import { linkHorizontal } from 'd3-shape'; -import { SharedLinkProps, AccessorProps } from '../types'; +import { SharedLinkProps, AccessorProps } from '../../../types'; export function pathHorizontalDiagonal({ source, @@ -33,7 +33,8 @@ export default function LinkHorizontalDiagonal({ source = (l: any) => l && l.source, target = (l: any) => l && l.target, ...restProps -}: LinkHorizontalDiagonalProps) { +}: LinkHorizontalDiagonalProps & + Omit, keyof LinkHorizontalDiagonalProps>) { const pathGen = path || pathHorizontalDiagonal({ source, target, x, y }); if (children) return <>{children({ path })}; return ( diff --git a/packages/vx-shape/src/shapes/link/diagonal/LinkRadial.tsx b/packages/vx-shape/src/shapes/link/diagonal/LinkRadial.tsx index 4f51d64c6..ab40da66d 100644 --- a/packages/vx-shape/src/shapes/link/diagonal/LinkRadial.tsx +++ b/packages/vx-shape/src/shapes/link/diagonal/LinkRadial.tsx @@ -1,7 +1,7 @@ import React from 'react'; import cx from 'classnames'; -import { linkRadial } from 'd3-shape'; -import { SharedLinkProps, RadialAccessorProps } from '../types'; +import { linkRadial, LinkRadial } from 'd3-shape'; +import { SharedLinkProps, RadialAccessorProps } from '../../../types'; export function pathRadialDiagonal({ source, @@ -36,7 +36,8 @@ export default function LinkRadialDiagonal({ source = (n: any) => n.source, target = (n: any) => n.target, ...restProps -}: LinkRadialDiagonalProps) { +}: LinkRadialDiagonalProps & + Omit, keyof LinkRadialDiagonalProps>) { const pathGen = path || pathRadialDiagonal({ source, target, angle, radius }); if (children) return <>{children({ path })}; return ( diff --git a/packages/vx-shape/src/shapes/link/diagonal/LinkVertical.tsx b/packages/vx-shape/src/shapes/link/diagonal/LinkVertical.tsx index 09989d5e2..13ac9abc4 100644 --- a/packages/vx-shape/src/shapes/link/diagonal/LinkVertical.tsx +++ b/packages/vx-shape/src/shapes/link/diagonal/LinkVertical.tsx @@ -1,7 +1,7 @@ import React from 'react'; import cx from 'classnames'; import { linkVertical } from 'd3-shape'; -import { SharedLinkProps, AccessorProps } from '../types'; +import { SharedLinkProps, AccessorProps } from '../../../types'; export function pathVerticalDiagonal({ source, @@ -32,7 +32,8 @@ export default function LinkVerticalDiagonal({ source = (d: any) => d.source, target = (d: any) => d.target, ...restProps -}: LinkVerticalDiagonalProps) { +}: LinkVerticalDiagonalProps & + Omit, keyof LinkVerticalDiagonalProps>) { const pathGen = path || pathVerticalDiagonal({ source, target, x, y }); if (children) return <>{children({ path })}; return ( diff --git a/packages/vx-shape/src/shapes/link/line/LinkHorizontalLine.tsx b/packages/vx-shape/src/shapes/link/line/LinkHorizontalLine.tsx index bf0bf7c42..8346c151a 100644 --- a/packages/vx-shape/src/shapes/link/line/LinkHorizontalLine.tsx +++ b/packages/vx-shape/src/shapes/link/line/LinkHorizontalLine.tsx @@ -1,7 +1,7 @@ import React from 'react'; import cx from 'classnames'; import { path as d3Path } from 'd3-path'; -import { SharedLinkProps, AccessorProps } from '../types'; +import { SharedLinkProps, AccessorProps } from '../../../types'; export function pathHorizontalLine({ source, @@ -39,7 +39,8 @@ export default function LinkHorizontalLine({ source = (d: any) => d.source, target = (d: any) => d.target, ...restProps -}: LinkHorizontalLineProps) { +}: LinkHorizontalLineProps & + Omit, keyof LinkHorizontalLineProps>) { const pathGen = path || pathHorizontalLine({ source, target, x, y }); if (children) return <>{children({ path })}; return ( diff --git a/packages/vx-shape/src/shapes/link/line/LinkRadialLine.tsx b/packages/vx-shape/src/shapes/link/line/LinkRadialLine.tsx index 0d47cfabb..d78be07c1 100644 --- a/packages/vx-shape/src/shapes/link/line/LinkRadialLine.tsx +++ b/packages/vx-shape/src/shapes/link/line/LinkRadialLine.tsx @@ -1,7 +1,7 @@ import React from 'react'; import cx from 'classnames'; import { path as d3Path } from 'd3-path'; -import { SharedLinkProps, AccessorProps } from '../types'; +import { SharedLinkProps, AccessorProps } from '../../../types'; export function pathRadialLine({ source, @@ -44,7 +44,8 @@ export default function LinkRadialLine({ target = (d: any) => d.target, children, ...restProps -}: LinkRadialLineProps) { +}: LinkRadialLineProps & + Omit, keyof LinkRadialLineProps>) { const pathGen = path || pathRadialLine({ source, target, x, y }); if (children) return <>{children({ path })}; return ( diff --git a/packages/vx-shape/src/shapes/link/line/LinkVerticalLine.tsx b/packages/vx-shape/src/shapes/link/line/LinkVerticalLine.tsx index 074129ea4..35b94ac3c 100644 --- a/packages/vx-shape/src/shapes/link/line/LinkVerticalLine.tsx +++ b/packages/vx-shape/src/shapes/link/line/LinkVerticalLine.tsx @@ -1,7 +1,7 @@ import React from 'react'; import cx from 'classnames'; import { path as d3Path } from 'd3-path'; -import { SharedLinkProps, AccessorProps } from '../types'; +import { SharedLinkProps, AccessorProps } from '../../../types'; export function pathVerticalLine({ source, @@ -39,7 +39,8 @@ export default function LinkVerticalLine({ target = (d: any) => d.target, children, ...restProps -}: LinkVerticalLineProps) { +}: LinkVerticalLineProps & + Omit, keyof LinkVerticalLineProps>) { const pathGen = path || pathVerticalLine({ source, target, x, y }); if (children) return <>{children({ path })}; return ( diff --git a/packages/vx-shape/src/shapes/link/step/LinkHorizontalStep.tsx b/packages/vx-shape/src/shapes/link/step/LinkHorizontalStep.tsx index 3ca0722eb..b5e8a18e5 100644 --- a/packages/vx-shape/src/shapes/link/step/LinkHorizontalStep.tsx +++ b/packages/vx-shape/src/shapes/link/step/LinkHorizontalStep.tsx @@ -1,7 +1,7 @@ import React from 'react'; import cx from 'classnames'; import { path as d3Path } from 'd3-path'; -import { SharedLinkProps, AccessorProps } from '../types'; +import { SharedLinkProps, AccessorProps } from '../../../types'; export function pathHorizontalStep({ source, @@ -46,7 +46,8 @@ export default function LinkHorizontalStep({ target = (d: any) => d.target, children, ...restProps -}: LinkHorizontalStepProps) { +}: LinkHorizontalStepProps & + Omit, keyof LinkHorizontalStepProps>) { const pathGen = path || pathHorizontalStep({ source, target, x, y, percent }); if (children) return <>{children({ path })}; return ( diff --git a/packages/vx-shape/src/shapes/link/step/LinkRadialStep.tsx b/packages/vx-shape/src/shapes/link/step/LinkRadialStep.tsx index c7f825302..7018820d0 100644 --- a/packages/vx-shape/src/shapes/link/step/LinkRadialStep.tsx +++ b/packages/vx-shape/src/shapes/link/step/LinkRadialStep.tsx @@ -1,6 +1,6 @@ import React from 'react'; import cx from 'classnames'; -import { SharedLinkProps, AccessorProps } from '../types'; +import { SharedLinkProps, AccessorProps } from '../../../types'; export function pathRadialStep({ source, @@ -52,7 +52,8 @@ export default function LinkRadialStep({ target = (d: any) => d.target, children, ...restProps -}: LinkRadialStepProps) { +}: LinkRadialStepProps & + Omit, keyof LinkRadialStepProps>) { const pathGen = path || pathRadialStep({ source, target, x, y }); if (children) return <>{children({ path })}; return ( diff --git a/packages/vx-shape/src/shapes/link/step/LinkVerticalStep.tsx b/packages/vx-shape/src/shapes/link/step/LinkVerticalStep.tsx index 063fc06fd..9cbffe485 100644 --- a/packages/vx-shape/src/shapes/link/step/LinkVerticalStep.tsx +++ b/packages/vx-shape/src/shapes/link/step/LinkVerticalStep.tsx @@ -1,7 +1,7 @@ import React from 'react'; import cx from 'classnames'; import { path as d3Path } from 'd3-path'; -import { SharedLinkProps, AccessorProps } from '../types'; +import { SharedLinkProps, AccessorProps } from '../../../types'; export function pathVerticalStep({ source, @@ -46,7 +46,8 @@ export default function LinkVerticalStep({ target = (d: any) => d.target, children, ...restProps -}: LinkVerticalStepProps) { +}: LinkVerticalStepProps & + Omit, keyof LinkVerticalStepProps>) { const pathGen = path || pathVerticalStep({ source, target, x, y, percent }); if (children) return <>{children({ path })}; return ( diff --git a/packages/vx-shape/src/shapes/link/types.ts b/packages/vx-shape/src/types.ts similarity index 90% rename from packages/vx-shape/src/shapes/link/types.ts rename to packages/vx-shape/src/types.ts index 48a86cb75..78f50a403 100644 --- a/packages/vx-shape/src/shapes/link/types.ts +++ b/packages/vx-shape/src/types.ts @@ -32,9 +32,9 @@ export type SharedLinkProps = { children?: (args: { path: PathType }) => NonNullable; /** Datum for which to render a link. */ data: Link; -} & Omit, 'x' | 'y' | 'source' | 'target' | 'angle' | 'radius'>; +}; -/** @TODO may need to revisit this. */ +/** This is meant to be a generic interface for any scale based on usage in this package. */ export interface ScaleType { (...args: any[]): number; range(): [number, number]; From abc50335a98b27cb815cd86a2debe83811715d00 Mon Sep 17 00:00:00 2001 From: Chris Williams Date: Fri, 20 Sep 2019 11:24:55 -0700 Subject: [PATCH 09/22] deps(vx-shape): remove @types/d3-scale dep --- packages/vx-shape/package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/vx-shape/package.json b/packages/vx-shape/package.json index bc2abf52f..3f5e98625 100644 --- a/packages/vx-shape/package.json +++ b/packages/vx-shape/package.json @@ -26,7 +26,6 @@ "dependencies": { "@types/classnames": "^2.2.9", "@types/d3-path": "^1.0.8", - "@types/d3-scale": "^2.1.1", "@types/d3-shape": "^1.3.1", "@types/react": "*", "@vx/curve": "0.0.192", From fd478c46fbbf8a524f8d1b262285234876013f4f Mon Sep 17 00:00:00 2001 From: Chris Williams Date: Fri, 20 Sep 2019 14:56:42 -0700 Subject: [PATCH 10/22] typescript(vx-shape): fix type errors --- packages/vx-shape/src/shapes/AreaStack.tsx | 2 +- packages/vx-shape/src/shapes/link/diagonal/LinkRadial.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/vx-shape/src/shapes/AreaStack.tsx b/packages/vx-shape/src/shapes/AreaStack.tsx index dc0bb6ca0..5001b5419 100644 --- a/packages/vx-shape/src/shapes/AreaStack.tsx +++ b/packages/vx-shape/src/shapes/AreaStack.tsx @@ -69,7 +69,7 @@ export default function AreaStack({ diff --git a/packages/vx-shape/src/shapes/link/diagonal/LinkRadial.tsx b/packages/vx-shape/src/shapes/link/diagonal/LinkRadial.tsx index ab40da66d..16888facf 100644 --- a/packages/vx-shape/src/shapes/link/diagonal/LinkRadial.tsx +++ b/packages/vx-shape/src/shapes/link/diagonal/LinkRadial.tsx @@ -1,6 +1,6 @@ import React from 'react'; import cx from 'classnames'; -import { linkRadial, LinkRadial } from 'd3-shape'; +import { linkRadial } from 'd3-shape'; import { SharedLinkProps, RadialAccessorProps } from '../../../types'; export function pathRadialDiagonal({ From 4a13d837e6136a76cd3be3ee7b458b8aa6904c3a Mon Sep 17 00:00:00 2001 From: Chris Williams Date: Fri, 20 Sep 2019 17:04:57 -0700 Subject: [PATCH 11/22] typescript(vx-shape): fix Key types in stacks --- packages/vx-shape/src/shapes/BarGroup.tsx | 34 ++++++++-------- .../src/shapes/BarGroupHorizontal.tsx | 39 ++++++++----------- packages/vx-shape/src/shapes/BarStack.tsx | 2 +- packages/vx-shape/src/shapes/Stack.tsx | 8 ++-- 4 files changed, 37 insertions(+), 46 deletions(-) diff --git a/packages/vx-shape/src/shapes/BarGroup.tsx b/packages/vx-shape/src/shapes/BarGroup.tsx index cdaaa4c2d..a8c39c4f7 100644 --- a/packages/vx-shape/src/shapes/BarGroup.tsx +++ b/packages/vx-shape/src/shapes/BarGroup.tsx @@ -4,7 +4,7 @@ import { Group } from '@vx/group'; import Bar from './Bar'; import { ScaleType } from '../types'; -type Key = string; +export type Key = string | number; export type BarGroupProps = { /** Array of data for which to generate grouped bars. */ @@ -145,23 +145,21 @@ export default function BarGroup({ return ( - {barGroups.map(barGroup => { - return ( - - {barGroup.bars.map(bar => ( - - ))} - - ); - })} + {barGroups.map(barGroup => ( + + {barGroup.bars.map(bar => ( + + ))} + + ))} ); } diff --git a/packages/vx-shape/src/shapes/BarGroupHorizontal.tsx b/packages/vx-shape/src/shapes/BarGroupHorizontal.tsx index ddd369932..002dff9e1 100644 --- a/packages/vx-shape/src/shapes/BarGroupHorizontal.tsx +++ b/packages/vx-shape/src/shapes/BarGroupHorizontal.tsx @@ -2,11 +2,9 @@ import React from 'react'; import cx from 'classnames'; import { Group } from '@vx/group'; import Bar from './Bar'; -import { BarGroupProps } from './BarGroup'; +import { BarGroupProps, Key } from './BarGroup'; import { ScaleType } from '../types'; -type Key = string; - type BarGroupHorizontalProps = Pick< BarGroupProps, 'data' | 'className' | 'top' | 'left' | 'keys' | 'color' @@ -102,26 +100,21 @@ export default function BarGroupHorizontal - {barGroups.map(barGroup => { - return ( - - {barGroup.bars.map(bar => { - return ( - // @ts-ignore ts-migrate(2322) FIXME: Property 'x' does not exist on type 'IntrinsicAttr... Remove this comment to see the full error message - - ); - })} - - ); - })} + {barGroups.map(barGroup => ( + + {barGroup.bars.map(bar => ( + + ))} + + ))} ); } diff --git a/packages/vx-shape/src/shapes/BarStack.tsx b/packages/vx-shape/src/shapes/BarStack.tsx index 73504068e..ae7093a0a 100644 --- a/packages/vx-shape/src/shapes/BarStack.tsx +++ b/packages/vx-shape/src/shapes/BarStack.tsx @@ -62,7 +62,7 @@ export default function BarStack({ children, ...restProps }: BarStackProps & Omit, keyof BarStackProps>) { - const stack = d3stack(); + const stack = d3stack(); if (keys) stack.keys(keys); if (value) stack.value(value); if (order) stack.order(stackOrder(order)); diff --git a/packages/vx-shape/src/shapes/Stack.tsx b/packages/vx-shape/src/shapes/Stack.tsx index 27c16a33d..7a2bd734f 100644 --- a/packages/vx-shape/src/shapes/Stack.tsx +++ b/packages/vx-shape/src/shapes/Stack.tsx @@ -15,7 +15,7 @@ import stackOrder, { STACK_ORDERS } from '../util/stackOrder'; import stackOffset, { STACK_OFFSETS } from '../util/stackOffset'; type Accessor = (datum: Datum, index: number, data: Datum[]) => number; -export type Key = string; +export type Key = string | number; export type StackProps = { /** Array of data for which to generate a stack. */ @@ -34,7 +34,7 @@ export type StackProps = { keys?: Key[]; /** Override render function which is passed the configured arc generator as input. */ children?: (args: { - stacks: Series[]; + stacks: Series[]; path: AreaType>; stack: StackType; }) => React.ReactNode; @@ -49,7 +49,7 @@ export type StackProps = { /** Specifies the y1 accessor function which defaults to d => d[1]. */ y1?: Accessor>; /** Sets the value accessor for a Datum, which defaults to d[key]. */ - value?: (d: Datum, key: string) => number; + value?: (d: Datum, key: Key) => number; /** The defined accessor for the shape. The final area shape includes all points for which this function returns true. By default all points are defined. */ defined?: (datum: SeriesPoint, index: number, data: SeriesPoint[]) => boolean; /** Sets the stack order to the pre-defined d3 function, see https://github.com/d3/d3-shape#stack_order. */ @@ -78,7 +78,7 @@ export default function Stack({ children, ...restProps }: StackProps & Omit, keyof StackProps>) { - const stack = d3stack(); + const stack = d3stack(); if (keys) stack.keys(keys); if (value) stack.value(value); if (order) stack.order(stackOrder(order)); From 15ce72323d034a092fad7c7c324bfacce929587f Mon Sep 17 00:00:00 2001 From: Chris Williams Date: Fri, 20 Sep 2019 17:16:37 -0700 Subject: [PATCH 12/22] typescript(vx-shape): fix default horizontal link accessor functions --- .../vx-shape/src/shapes/link/curve/LinkHorizontalCurve.tsx | 4 ++-- packages/vx-shape/src/shapes/link/diagonal/LinkHorizontal.tsx | 4 ++-- packages/vx-shape/src/shapes/link/line/LinkHorizontalLine.tsx | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/vx-shape/src/shapes/link/curve/LinkHorizontalCurve.tsx b/packages/vx-shape/src/shapes/link/curve/LinkHorizontalCurve.tsx index 5ebbf7f2b..87258a4eb 100644 --- a/packages/vx-shape/src/shapes/link/curve/LinkHorizontalCurve.tsx +++ b/packages/vx-shape/src/shapes/link/curve/LinkHorizontalCurve.tsx @@ -44,8 +44,8 @@ export default function LinkHorizontalCurve({ innerRef, path, percent = 0.2, - x = (n: any) => n && n.x, - y = (n: any) => n && n.y, + x = (n: any) => n && n.y, // note this returns a y value + y = (n: any) => n && n.x, // note this returns an x value source = (l: any) => l && l.source, target = (l: any) => l && l.target, ...restProps diff --git a/packages/vx-shape/src/shapes/link/diagonal/LinkHorizontal.tsx b/packages/vx-shape/src/shapes/link/diagonal/LinkHorizontal.tsx index 410850c68..cb5d1f464 100644 --- a/packages/vx-shape/src/shapes/link/diagonal/LinkHorizontal.tsx +++ b/packages/vx-shape/src/shapes/link/diagonal/LinkHorizontal.tsx @@ -28,8 +28,8 @@ export default function LinkHorizontalDiagonal({ data, innerRef, path, - x = (n: any) => n && n.x, - y = (n: any) => n && n.y, + x = (n: any) => n && n.y, // note this returns a y value + y = (n: any) => n && n.x, // note this returns an x value source = (l: any) => l && l.source, target = (l: any) => l && l.target, ...restProps diff --git a/packages/vx-shape/src/shapes/link/line/LinkHorizontalLine.tsx b/packages/vx-shape/src/shapes/link/line/LinkHorizontalLine.tsx index 8346c151a..ebdde5004 100644 --- a/packages/vx-shape/src/shapes/link/line/LinkHorizontalLine.tsx +++ b/packages/vx-shape/src/shapes/link/line/LinkHorizontalLine.tsx @@ -34,8 +34,8 @@ export default function LinkHorizontalLine({ innerRef, data, path, - x = (d: any) => d.y, - y = (d: any) => d.x, + x = (d: any) => d.y, // note this returns a y value + y = (d: any) => d.x, // note this returns a y value source = (d: any) => d.source, target = (d: any) => d.target, ...restProps From 3b22b0759b05350e33d4728db103affcbe633297 Mon Sep 17 00:00:00 2001 From: Chris Williams Date: Fri, 20 Sep 2019 17:35:46 -0700 Subject: [PATCH 13/22] typescript(vx-shape): consolidate and move stack and group types into types file --- packages/vx-shape/src/shapes/BarGroup.tsx | 35 +-------- .../src/shapes/BarGroupHorizontal.tsx | 33 +-------- packages/vx-shape/src/shapes/BarStack.tsx | 23 ++---- .../src/shapes/BarStackHorizontal.tsx | 3 +- packages/vx-shape/src/shapes/Stack.tsx | 14 ++-- packages/vx-shape/src/types.ts | 71 +++++++++++++++++++ 6 files changed, 90 insertions(+), 89 deletions(-) diff --git a/packages/vx-shape/src/shapes/BarGroup.tsx b/packages/vx-shape/src/shapes/BarGroup.tsx index a8c39c4f7..d3b93751f 100644 --- a/packages/vx-shape/src/shapes/BarGroup.tsx +++ b/packages/vx-shape/src/shapes/BarGroup.tsx @@ -2,9 +2,7 @@ import React from 'react'; import cx from 'classnames'; import { Group } from '@vx/group'; import Bar from './Bar'; -import { ScaleType } from '../types'; - -export type Key = string | number; +import { BarGroup, ScaleType, GroupKey } from '../types'; export type BarGroupProps = { /** Array of data for which to generate grouped bars. */ @@ -18,9 +16,9 @@ export type BarGroupProps = { /** @vx/scale or d3-scale that takes an y value (Datum[key]) and maps it to a y axis position. */ yScale: ScaleType; /** Returns the desired color for a bar with a given key and index. */ - color: (key: Key, index: number) => string; + color: (key: GroupKey, index: number) => string; /** Array of keys corresponding to stack layers. */ - keys: Key[]; + keys: GroupKey[]; /** Total height of the y-axis. */ height: number; /** className applied to Bars. */ @@ -33,33 +31,6 @@ export type BarGroupProps = { children?: (barGroups: BarGroup[]) => React.ReactNode; }; -/** One BarGroup is returned for each datum, which has multiple sub-bars (based on keys). */ -export interface BarGroup { - /** index of BarGroup (matches input Datum index). */ - index: number; - /** x0 position of bar group */ - x0: number; - /** bars within group, one for each key. */ - bars: ({ - /** group key */ - key: Key; - /** index of BarGroup (matches input Datum index). */ - index: number; - /** group value (Datum[key]) */ - value: number; - /** height of bar. */ - height: number; - /** width of bar. */ - width: number; - /** x position of bar. */ - x: number; - /** y position of bar. */ - y: number; - /** color of bar. */ - color: string; - })[]; -} - /** * Generates bar groups as an array of objects and renders ``s for each datum grouped by `key`. A general setup might look like this: * diff --git a/packages/vx-shape/src/shapes/BarGroupHorizontal.tsx b/packages/vx-shape/src/shapes/BarGroupHorizontal.tsx index 002dff9e1..20998f89a 100644 --- a/packages/vx-shape/src/shapes/BarGroupHorizontal.tsx +++ b/packages/vx-shape/src/shapes/BarGroupHorizontal.tsx @@ -2,8 +2,8 @@ import React from 'react'; import cx from 'classnames'; import { Group } from '@vx/group'; import Bar from './Bar'; -import { BarGroupProps, Key } from './BarGroup'; -import { ScaleType } from '../types'; +import { BarGroupProps } from './BarGroup'; +import { ScaleType, BarGroupHorizontal } from '../types'; type BarGroupHorizontalProps = Pick< BarGroupProps, @@ -22,36 +22,9 @@ type BarGroupHorizontalProps = Pick< /** Total width of the x-axis. */ width: number; /** Override render function which is passed the computed Ba/rGroups. */ - children?: (barGroups: BarGroup[]) => React.ReactNode; + children?: (barGroups: BarGroupHorizontal[]) => React.ReactNode; }; -/** One BarGroup is returned for each datum, which has multiple sub-bars (based on keys). */ -export interface BarGroup { - /** index of BarGroup (matches input Datum index). */ - index: number; - /** y0 position of bar group */ - y0: number; - /** bars within group, one for each key. */ - bars: ({ - /** group key */ - key: Key; - /** index of BarGroup (matches input Datum index). */ - index: number; - /** group value (Datum[key]) */ - value: number; - /** height of bar. */ - height: number; - /** width of bar. */ - width: number; - /** x position of bar. */ - x: number; - /** y position of bar. */ - y: number; - /** color of bar. */ - color: string; - })[]; -} - export default function BarGroupHorizontal({ data, className, diff --git a/packages/vx-shape/src/shapes/BarStack.tsx b/packages/vx-shape/src/shapes/BarStack.tsx index ae7093a0a..9b40c76b8 100644 --- a/packages/vx-shape/src/shapes/BarStack.tsx +++ b/packages/vx-shape/src/shapes/BarStack.tsx @@ -6,8 +6,8 @@ import { stack as d3stack, SeriesPoint } from 'd3-shape'; import stackOrder from '../util/stackOrder'; import stackOffset from '../util/stackOffset'; import Bar from './Bar'; -import { StackProps, Key } from './Stack'; -import { ScaleType } from '../types'; +import { StackProps } from './Stack'; +import { ScaleType, StackKey, BarStack } from '../types'; export type BarStackProps = Pick< StackProps, @@ -24,26 +24,11 @@ export type BarStackProps = Pick< /** @vx/scale or d3-scale that takes a y value and maps it to an y axis position. */ yScale: ScaleType; /** Returns the desired color for a bar with a given key and index. */ - color: (key: Key, index: number) => string; + color: (key: StackKey, index: number) => string; /** Override render function which is passed the configured arc generator as input. */ children?: (stacks: BarStack[]) => React.ReactNode; }; -export interface BarStack { - index: number; - key: Key; - bars: ({ - bar: SeriesPoint; - key: Key; - index: number; - height: number; - width: number; - x: number; - y: number; - color: string; - })[]; -} - export default function BarStack({ data, className, @@ -62,7 +47,7 @@ export default function BarStack({ children, ...restProps }: BarStackProps & Omit, keyof BarStackProps>) { - const stack = d3stack(); + const stack = d3stack(); if (keys) stack.keys(keys); if (value) stack.value(value); if (order) stack.order(stackOrder(order)); diff --git a/packages/vx-shape/src/shapes/BarStackHorizontal.tsx b/packages/vx-shape/src/shapes/BarStackHorizontal.tsx index 5be72ccaa..c38581341 100644 --- a/packages/vx-shape/src/shapes/BarStackHorizontal.tsx +++ b/packages/vx-shape/src/shapes/BarStackHorizontal.tsx @@ -7,6 +7,7 @@ import stackOrder from '../util/stackOrder'; import stackOffset from '../util/stackOffset'; import Bar from './Bar'; import { BarStackProps } from './BarStack'; +import { StackKey } from '../types'; export type BarStackHorizontalProps = Pick< BarStackProps, @@ -50,7 +51,7 @@ export default function BarStackHorizontal({ ...restProps }: BarStackHorizontalProps & Omit, keyof BarStackHorizontalProps>) { - const stack = d3stack(); + const stack = d3stack(); if (keys) stack.keys(keys); if (value) stack.value(value); if (order) stack.order(stackOrder(order)); diff --git a/packages/vx-shape/src/shapes/Stack.tsx b/packages/vx-shape/src/shapes/Stack.tsx index 7a2bd734f..70188b433 100644 --- a/packages/vx-shape/src/shapes/Stack.tsx +++ b/packages/vx-shape/src/shapes/Stack.tsx @@ -13,9 +13,9 @@ import { import stackOrder, { STACK_ORDERS } from '../util/stackOrder'; import stackOffset, { STACK_OFFSETS } from '../util/stackOffset'; +import { StackKey } from '../types'; type Accessor = (datum: Datum, index: number, data: Datum[]) => number; -export type Key = string | number; export type StackProps = { /** Array of data for which to generate a stack. */ @@ -29,14 +29,14 @@ export type StackProps = { /** Sets the curve factory (from @vx/curve or d3-curve) for the area generator. Defaults to curveLinear. */ curve?: CurveFactory; /** Returns a color for a given stack key and index. */ - color?: (key: Key, index: number) => string; + color?: (key: StackKey, index: number) => string; /** Array of keys corresponding to stack layers. */ - keys?: Key[]; + keys?: StackKey[]; /** Override render function which is passed the configured arc generator as input. */ children?: (args: { - stacks: Series[]; + stacks: Series[]; path: AreaType>; - stack: StackType; + stack: StackType; }) => React.ReactNode; /** Sets the x0 accessor function, and sets x1 to null. */ x?: Accessor>; @@ -49,7 +49,7 @@ export type StackProps = { /** Specifies the y1 accessor function which defaults to d => d[1]. */ y1?: Accessor>; /** Sets the value accessor for a Datum, which defaults to d[key]. */ - value?: (d: Datum, key: Key) => number; + value?: (d: Datum, key: StackKey) => number; /** The defined accessor for the shape. The final area shape includes all points for which this function returns true. By default all points are defined. */ defined?: (datum: SeriesPoint, index: number, data: SeriesPoint[]) => boolean; /** Sets the stack order to the pre-defined d3 function, see https://github.com/d3/d3-shape#stack_order. */ @@ -78,7 +78,7 @@ export default function Stack({ children, ...restProps }: StackProps & Omit, keyof StackProps>) { - const stack = d3stack(); + const stack = d3stack(); if (keys) stack.keys(keys); if (value) stack.value(value); if (order) stack.order(stackOrder(order)); diff --git a/packages/vx-shape/src/types.ts b/packages/vx-shape/src/types.ts index 78f50a403..8ef5826da 100644 --- a/packages/vx-shape/src/types.ts +++ b/packages/vx-shape/src/types.ts @@ -1,3 +1,74 @@ +import { SeriesPoint } from 'd3-shape'; + +/** Unique key for item in a stack. */ +export type StackKey = string | number; + +/** Unique key for item in a group. */ +export type GroupKey = string | number; + +/** One BarGroup is returned for each datum, which has multiple sub-bars (based on keys). */ +export interface BarGroup { + /** index of BarGroup (matches input Datum index). */ + index: number; + /** x0 position of bar group */ + x0: number; + /** bars within group, one for each key. */ + bars: BarGroupBar[]; +} + +/** One BarGroup is returned for each datum, which has multiple sub-bars (based on keys). */ +export interface BarGroupHorizontal { + /** index of BarGroup (matches input Datum index). */ + index: number; + /** y0 position of bar group */ + y0: number; + /** bars within group, one for each key. */ + bars: BarGroupBar[]; +} + +export interface BarGroupBar { + /** group key */ + key: GroupKey; + /** index of BarGroup (matches input Datum index). */ + index: number; + /** group value (Datum[key]) */ + value: number; + /** height of bar. */ + height: number; + /** width of bar. */ + width: number; + /** x position of bar. */ + x: number; + /** y position of bar. */ + y: number; + /** color of bar. */ + color: string; +} + +/** One BarStack is returned for each datum, which has multiple sub-bars (based on keys). */ +export interface BarStack { + index: number; + key: StackKey; + bars: ({ + /** Processed bar Datum with bar bounds and original datum. */ + bar: SeriesPoint; + /** group key */ + key: StackKey; + /** index of BarGroup (matches input Datum index). */ + index: number; + /** height of bar. */ + height: number; + /** width of bar. */ + width: number; + /** x position of bar. */ + x: number; + /** y position of bar. */ + y: number; + /** color of bar. */ + color: string; + })[]; +} + export type AccessorProps = { /** Given a node, returns its x coordinate. */ x?: (node: Node) => number; From edbb05e18b17e85e1123956aae8527a8da8dd59d Mon Sep 17 00:00:00 2001 From: Chris Williams Date: Fri, 20 Sep 2019 18:09:42 -0700 Subject: [PATCH 14/22] typescript(vx-shape): replace any with --- packages/vx-shape/src/shapes/Arc.tsx | 4 +++- packages/vx-shape/src/shapes/BarGroup.tsx | 6 +++--- packages/vx-shape/src/shapes/BarGroupHorizontal.tsx | 4 ++-- packages/vx-shape/src/shapes/BarStack.tsx | 6 +++--- packages/vx-shape/src/shapes/BarStackHorizontal.tsx | 6 +++--- packages/vx-shape/src/shapes/Pie.tsx | 5 +++-- packages/vx-shape/src/shapes/Stack.tsx | 4 ++-- .../src/shapes/link/curve/LinkHorizontalCurve.tsx | 10 +++++----- .../vx-shape/src/shapes/link/curve/LinkRadialCurve.tsx | 10 +++++----- .../src/shapes/link/curve/LinkVerticalCurve.tsx | 10 +++++----- .../src/shapes/link/diagonal/LinkHorizontal.tsx | 10 +++++----- .../vx-shape/src/shapes/link/diagonal/LinkRadial.tsx | 10 +++++----- .../vx-shape/src/shapes/link/diagonal/LinkVertical.tsx | 10 +++++----- .../src/shapes/link/line/LinkHorizontalLine.tsx | 10 +++++----- .../vx-shape/src/shapes/link/line/LinkRadialLine.tsx | 10 +++++----- .../vx-shape/src/shapes/link/line/LinkVerticalLine.tsx | 10 +++++----- .../src/shapes/link/step/LinkHorizontalStep.tsx | 10 +++++----- .../vx-shape/src/shapes/link/step/LinkRadialStep.tsx | 10 +++++----- .../vx-shape/src/shapes/link/step/LinkVerticalStep.tsx | 10 +++++----- packages/vx-shape/src/types.ts | 7 +++++-- 20 files changed, 84 insertions(+), 78 deletions(-) diff --git a/packages/vx-shape/src/shapes/Arc.tsx b/packages/vx-shape/src/shapes/Arc.tsx index a277ec508..e31ddf268 100644 --- a/packages/vx-shape/src/shapes/Arc.tsx +++ b/packages/vx-shape/src/shapes/Arc.tsx @@ -1,7 +1,9 @@ +/* eslint-disable @typescript-eslint/unbound-method */ import React from 'react'; import cx from 'classnames'; import { arc as d3Arc, Arc as ArcType } from 'd3-shape'; import setNumOrAccessor, { NumberAccessor } from '../util/setNumberOrNumberAccessor'; +import { $TSFIXME } from '../types'; export type ArcProps = { /** className applied to path element. */ @@ -9,7 +11,7 @@ export type ArcProps = { /** A Datum for which to generate an arc. */ data?: Datum; /** Override render function which is passed the configured arc generator as input. */ - children?: (args: { path: ArcType }) => React.ReactNode; + children?: (args: { path: ArcType<$TSFIXME, Datum> }) => React.ReactNode; /** React ref to the path element. */ innerRef?: React.Ref; /** Number or accessor function which returns a number, which defines the arc innerRadius. */ diff --git a/packages/vx-shape/src/shapes/BarGroup.tsx b/packages/vx-shape/src/shapes/BarGroup.tsx index d3b93751f..45141e688 100644 --- a/packages/vx-shape/src/shapes/BarGroup.tsx +++ b/packages/vx-shape/src/shapes/BarGroup.tsx @@ -2,13 +2,13 @@ import React from 'react'; import cx from 'classnames'; import { Group } from '@vx/group'; import Bar from './Bar'; -import { BarGroup, ScaleType, GroupKey } from '../types'; +import { BarGroup, ScaleType, GroupKey, $TSFIXME } from '../types'; export type BarGroupProps = { /** Array of data for which to generate grouped bars. */ data: Datum[]; /** Returns the value mapped to the x0 (group position) of a bar */ - x0: (d: Datum) => any; + x0: (d: Datum) => $TSFIXME; /** @vx/scale or d3-scale that takes an x0 value (position of group) and maps it to an x0 axis position of the group. */ x0Scale: ScaleType; /** @vx/scale or d3-scale that takes a group key and maps it to an x axis position (within a group). */ @@ -69,7 +69,7 @@ export type BarGroupProps = { * * Example: [https://vx-demo.now.sh/bargroup](https://vx-demo.now.sh/bargroup) */ -export default function BarGroup({ +export default function BarGroupComponent({ data, className, top, diff --git a/packages/vx-shape/src/shapes/BarGroupHorizontal.tsx b/packages/vx-shape/src/shapes/BarGroupHorizontal.tsx index 20998f89a..b347b1dbd 100644 --- a/packages/vx-shape/src/shapes/BarGroupHorizontal.tsx +++ b/packages/vx-shape/src/shapes/BarGroupHorizontal.tsx @@ -3,7 +3,7 @@ import cx from 'classnames'; import { Group } from '@vx/group'; import Bar from './Bar'; import { BarGroupProps } from './BarGroup'; -import { ScaleType, BarGroupHorizontal } from '../types'; +import { ScaleType, BarGroupHorizontal, $TSFIXME } from '../types'; type BarGroupHorizontalProps = Pick< BarGroupProps, @@ -12,7 +12,7 @@ type BarGroupHorizontalProps = Pick< /** Returns the value (Datum[key]) mapped to the x of a bar */ x: (barValue: number) => number; /** Returns the value mapped to the y0 (position of group) of a bar */ - y0: (d: Datum) => any; + y0: (d: Datum) => $TSFIXME; /** @vx/scale or d3-scale that takes a key value (Datum[key]) and maps it to an x axis position (width of bar). */ xScale: ScaleType; /** @vx/scale or d3-scale that takes a y0 value (position of group) and maps it to a y axis position. */ diff --git a/packages/vx-shape/src/shapes/BarStack.tsx b/packages/vx-shape/src/shapes/BarStack.tsx index 9b40c76b8..1ece8e40e 100644 --- a/packages/vx-shape/src/shapes/BarStack.tsx +++ b/packages/vx-shape/src/shapes/BarStack.tsx @@ -7,7 +7,7 @@ import stackOrder from '../util/stackOrder'; import stackOffset from '../util/stackOffset'; import Bar from './Bar'; import { StackProps } from './Stack'; -import { ScaleType, StackKey, BarStack } from '../types'; +import { ScaleType, StackKey, BarStack, $TSFIXME } from '../types'; export type BarStackProps = Pick< StackProps, @@ -35,8 +35,8 @@ export default function BarStack({ top, left, x, - y0 = (d: any) => d[0], - y1 = (d: any) => d[1], + y0 = (d: $TSFIXME) => d[0], + y1 = (d: $TSFIXME) => d[1], xScale, yScale, color, diff --git a/packages/vx-shape/src/shapes/BarStackHorizontal.tsx b/packages/vx-shape/src/shapes/BarStackHorizontal.tsx index c38581341..fd08865ee 100644 --- a/packages/vx-shape/src/shapes/BarStackHorizontal.tsx +++ b/packages/vx-shape/src/shapes/BarStackHorizontal.tsx @@ -7,7 +7,7 @@ import stackOrder from '../util/stackOrder'; import stackOffset from '../util/stackOffset'; import Bar from './Bar'; import { BarStackProps } from './BarStack'; -import { StackKey } from '../types'; +import { StackKey, $TSFIXME } from '../types'; export type BarStackHorizontalProps = Pick< BarStackProps, @@ -38,8 +38,8 @@ export default function BarStackHorizontal({ top, left, y, - x0 = (d: any) => d[0], - x1 = (d: any) => d[1], + x0 = (d: $TSFIXME) => d[0], + x1 = (d: $TSFIXME) => d[1], xScale, yScale, color, diff --git a/packages/vx-shape/src/shapes/Pie.tsx b/packages/vx-shape/src/shapes/Pie.tsx index 769147f32..3b51d9b7f 100644 --- a/packages/vx-shape/src/shapes/Pie.tsx +++ b/packages/vx-shape/src/shapes/Pie.tsx @@ -3,6 +3,7 @@ import cx from 'classnames'; import { Group } from '@vx/group'; import { arc as d3Arc, Arc as ArcType, PieArcDatum, pie as d3Pie, Pie as PieType } from 'd3-shape'; import setNumOrAccessor, { NumberAccessor } from '../util/setNumberOrNumberAccessor'; +import { $TSFIXME } from '../types'; export type PieProps = { /** className applied to path element. */ @@ -37,9 +38,9 @@ export type PieProps = { padAngle?: NumberAccessor | number; /** Render function override which is passed the configured arc generator as input. */ children?: (args: { - path: ArcType>; + path: ArcType<$TSFIXME, PieArcDatum>; arcs: PieArcDatum[]; - pie: PieType; + pie: PieType<$TSFIXME, Datum>; }) => React.ReactNode; }; diff --git a/packages/vx-shape/src/shapes/Stack.tsx b/packages/vx-shape/src/shapes/Stack.tsx index 70188b433..787d6d2b9 100644 --- a/packages/vx-shape/src/shapes/Stack.tsx +++ b/packages/vx-shape/src/shapes/Stack.tsx @@ -13,7 +13,7 @@ import { import stackOrder, { STACK_ORDERS } from '../util/stackOrder'; import stackOffset, { STACK_OFFSETS } from '../util/stackOffset'; -import { StackKey } from '../types'; +import { StackKey, $TSFIXME } from '../types'; type Accessor = (datum: Datum, index: number, data: Datum[]) => number; @@ -36,7 +36,7 @@ export type StackProps = { children?: (args: { stacks: Series[]; path: AreaType>; - stack: StackType; + stack: StackType<$TSFIXME, Datum, StackKey>; }) => React.ReactNode; /** Sets the x0 accessor function, and sets x1 to null. */ x?: Accessor>; diff --git a/packages/vx-shape/src/shapes/link/curve/LinkHorizontalCurve.tsx b/packages/vx-shape/src/shapes/link/curve/LinkHorizontalCurve.tsx index 87258a4eb..6b401896f 100644 --- a/packages/vx-shape/src/shapes/link/curve/LinkHorizontalCurve.tsx +++ b/packages/vx-shape/src/shapes/link/curve/LinkHorizontalCurve.tsx @@ -1,7 +1,7 @@ import React from 'react'; import cx from 'classnames'; import { path as d3Path } from 'd3-path'; -import { SharedLinkProps, AccessorProps } from '../../../types'; +import { SharedLinkProps, AccessorProps, $TSFIXME } from '../../../types'; export function pathHorizontalCurve({ source, @@ -44,10 +44,10 @@ export default function LinkHorizontalCurve({ innerRef, path, percent = 0.2, - x = (n: any) => n && n.y, // note this returns a y value - y = (n: any) => n && n.x, // note this returns an x value - source = (l: any) => l && l.source, - target = (l: any) => l && l.target, + x = (n: $TSFIXME) => n && n.y, // note this returns a y value + y = (n: $TSFIXME) => n && n.x, // note this returns an x value + source = (l: $TSFIXME) => l && l.source, + target = (l: $TSFIXME) => l && l.target, ...restProps }: LinkHorizontalCurveProps & Omit, keyof LinkHorizontalCurveProps>) { diff --git a/packages/vx-shape/src/shapes/link/curve/LinkRadialCurve.tsx b/packages/vx-shape/src/shapes/link/curve/LinkRadialCurve.tsx index 0ab63045b..11f6b66e4 100644 --- a/packages/vx-shape/src/shapes/link/curve/LinkRadialCurve.tsx +++ b/packages/vx-shape/src/shapes/link/curve/LinkRadialCurve.tsx @@ -1,7 +1,7 @@ import React from 'react'; import cx from 'classnames'; import { path as d3Path } from 'd3-path'; -import { SharedLinkProps, AccessorProps } from '../../../types'; +import { SharedLinkProps, AccessorProps, $TSFIXME } from '../../../types'; export function pathRadialCurve({ source, @@ -54,10 +54,10 @@ export default function LinkRadialCurve({ innerRef, path, percent = 0.2, - x = (n: any) => n && n.x, - y = (n: any) => n && n.y, - source = (l: any) => l && l.source, - target = (l: any) => l && l.target, + x = (n: $TSFIXME) => n && n.x, + y = (n: $TSFIXME) => n && n.y, + source = (l: $TSFIXME) => l && l.source, + target = (l: $TSFIXME) => l && l.target, ...restProps }: LinkRadialCurveProps & Omit, keyof LinkRadialCurveProps>) { diff --git a/packages/vx-shape/src/shapes/link/curve/LinkVerticalCurve.tsx b/packages/vx-shape/src/shapes/link/curve/LinkVerticalCurve.tsx index 0611f3e29..3e6b6ea0e 100644 --- a/packages/vx-shape/src/shapes/link/curve/LinkVerticalCurve.tsx +++ b/packages/vx-shape/src/shapes/link/curve/LinkVerticalCurve.tsx @@ -1,7 +1,7 @@ import React from 'react'; import cx from 'classnames'; import { path as d3Path } from 'd3-path'; -import { SharedLinkProps, AccessorProps } from '../../../types'; +import { SharedLinkProps, AccessorProps, $TSFIXME } from '../../../types'; export function pathVerticalCurve({ source, @@ -44,10 +44,10 @@ export default function LinkVerticalCurve({ innerRef, path, percent = 0.2, - x = (n: any) => n && n.x, - y = (n: any) => n && n.y, - source = (l: any) => l && l.source, - target = (l: any) => l && l.target, + x = (n: $TSFIXME) => n && n.x, + y = (n: $TSFIXME) => n && n.y, + source = (l: $TSFIXME) => l && l.source, + target = (l: $TSFIXME) => l && l.target, ...restProps }: LinkVerticalCurveProps & Omit, keyof LinkVerticalCurveProps>) { diff --git a/packages/vx-shape/src/shapes/link/diagonal/LinkHorizontal.tsx b/packages/vx-shape/src/shapes/link/diagonal/LinkHorizontal.tsx index cb5d1f464..559001c6b 100644 --- a/packages/vx-shape/src/shapes/link/diagonal/LinkHorizontal.tsx +++ b/packages/vx-shape/src/shapes/link/diagonal/LinkHorizontal.tsx @@ -1,7 +1,7 @@ import React from 'react'; import cx from 'classnames'; import { linkHorizontal } from 'd3-shape'; -import { SharedLinkProps, AccessorProps } from '../../../types'; +import { SharedLinkProps, AccessorProps, $TSFIXME } from '../../../types'; export function pathHorizontalDiagonal({ source, @@ -28,10 +28,10 @@ export default function LinkHorizontalDiagonal({ data, innerRef, path, - x = (n: any) => n && n.y, // note this returns a y value - y = (n: any) => n && n.x, // note this returns an x value - source = (l: any) => l && l.source, - target = (l: any) => l && l.target, + x = (n: $TSFIXME) => n && n.y, // note this returns a y value + y = (n: $TSFIXME) => n && n.x, // note this returns an x value + source = (l: $TSFIXME) => l && l.source, + target = (l: $TSFIXME) => l && l.target, ...restProps }: LinkHorizontalDiagonalProps & Omit, keyof LinkHorizontalDiagonalProps>) { diff --git a/packages/vx-shape/src/shapes/link/diagonal/LinkRadial.tsx b/packages/vx-shape/src/shapes/link/diagonal/LinkRadial.tsx index 16888facf..48f7f63dd 100644 --- a/packages/vx-shape/src/shapes/link/diagonal/LinkRadial.tsx +++ b/packages/vx-shape/src/shapes/link/diagonal/LinkRadial.tsx @@ -1,7 +1,7 @@ import React from 'react'; import cx from 'classnames'; import { linkRadial } from 'd3-shape'; -import { SharedLinkProps, RadialAccessorProps } from '../../../types'; +import { SharedLinkProps, RadialAccessorProps, $TSFIXME } from '../../../types'; export function pathRadialDiagonal({ source, @@ -31,10 +31,10 @@ export default function LinkRadialDiagonal({ data, innerRef, path, - angle = (n: any) => n.x, - radius = (n: any) => n.y, - source = (n: any) => n.source, - target = (n: any) => n.target, + angle = (n: $TSFIXME) => n.x, + radius = (n: $TSFIXME) => n.y, + source = (n: $TSFIXME) => n.source, + target = (n: $TSFIXME) => n.target, ...restProps }: LinkRadialDiagonalProps & Omit, keyof LinkRadialDiagonalProps>) { diff --git a/packages/vx-shape/src/shapes/link/diagonal/LinkVertical.tsx b/packages/vx-shape/src/shapes/link/diagonal/LinkVertical.tsx index 13ac9abc4..85593c7e9 100644 --- a/packages/vx-shape/src/shapes/link/diagonal/LinkVertical.tsx +++ b/packages/vx-shape/src/shapes/link/diagonal/LinkVertical.tsx @@ -1,7 +1,7 @@ import React from 'react'; import cx from 'classnames'; import { linkVertical } from 'd3-shape'; -import { SharedLinkProps, AccessorProps } from '../../../types'; +import { SharedLinkProps, AccessorProps, $TSFIXME } from '../../../types'; export function pathVerticalDiagonal({ source, @@ -27,10 +27,10 @@ export default function LinkVerticalDiagonal({ data, innerRef, path, - x = (d: any) => d.x, - y = (d: any) => d.y, - source = (d: any) => d.source, - target = (d: any) => d.target, + x = (d: $TSFIXME) => d.x, + y = (d: $TSFIXME) => d.y, + source = (d: $TSFIXME) => d.source, + target = (d: $TSFIXME) => d.target, ...restProps }: LinkVerticalDiagonalProps & Omit, keyof LinkVerticalDiagonalProps>) { diff --git a/packages/vx-shape/src/shapes/link/line/LinkHorizontalLine.tsx b/packages/vx-shape/src/shapes/link/line/LinkHorizontalLine.tsx index ebdde5004..063be8ef1 100644 --- a/packages/vx-shape/src/shapes/link/line/LinkHorizontalLine.tsx +++ b/packages/vx-shape/src/shapes/link/line/LinkHorizontalLine.tsx @@ -1,7 +1,7 @@ import React from 'react'; import cx from 'classnames'; import { path as d3Path } from 'd3-path'; -import { SharedLinkProps, AccessorProps } from '../../../types'; +import { SharedLinkProps, AccessorProps, $TSFIXME } from '../../../types'; export function pathHorizontalLine({ source, @@ -34,10 +34,10 @@ export default function LinkHorizontalLine({ innerRef, data, path, - x = (d: any) => d.y, // note this returns a y value - y = (d: any) => d.x, // note this returns a y value - source = (d: any) => d.source, - target = (d: any) => d.target, + x = (d: $TSFIXME) => d.y, // note this returns a y value + y = (d: $TSFIXME) => d.x, // note this returns a y value + source = (d: $TSFIXME) => d.source, + target = (d: $TSFIXME) => d.target, ...restProps }: LinkHorizontalLineProps & Omit, keyof LinkHorizontalLineProps>) { diff --git a/packages/vx-shape/src/shapes/link/line/LinkRadialLine.tsx b/packages/vx-shape/src/shapes/link/line/LinkRadialLine.tsx index d78be07c1..8b32bd669 100644 --- a/packages/vx-shape/src/shapes/link/line/LinkRadialLine.tsx +++ b/packages/vx-shape/src/shapes/link/line/LinkRadialLine.tsx @@ -1,7 +1,7 @@ import React from 'react'; import cx from 'classnames'; import { path as d3Path } from 'd3-path'; -import { SharedLinkProps, AccessorProps } from '../../../types'; +import { SharedLinkProps, AccessorProps, $TSFIXME } from '../../../types'; export function pathRadialLine({ source, @@ -38,10 +38,10 @@ export default function LinkRadialLine({ innerRef, data, path, - x = (d: any) => d.x, - y = (d: any) => d.y, - source = (d: any) => d.source, - target = (d: any) => d.target, + x = (d: $TSFIXME) => d.x, + y = (d: $TSFIXME) => d.y, + source = (d: $TSFIXME) => d.source, + target = (d: $TSFIXME) => d.target, children, ...restProps }: LinkRadialLineProps & diff --git a/packages/vx-shape/src/shapes/link/line/LinkVerticalLine.tsx b/packages/vx-shape/src/shapes/link/line/LinkVerticalLine.tsx index 35b94ac3c..f0a7a764f 100644 --- a/packages/vx-shape/src/shapes/link/line/LinkVerticalLine.tsx +++ b/packages/vx-shape/src/shapes/link/line/LinkVerticalLine.tsx @@ -1,7 +1,7 @@ import React from 'react'; import cx from 'classnames'; import { path as d3Path } from 'd3-path'; -import { SharedLinkProps, AccessorProps } from '../../../types'; +import { SharedLinkProps, AccessorProps, $TSFIXME } from '../../../types'; export function pathVerticalLine({ source, @@ -33,10 +33,10 @@ export default function LinkVerticalLine({ innerRef, data, path, - x = (d: any) => d.x, - y = (d: any) => d.y, - source = (d: any) => d.source, - target = (d: any) => d.target, + x = (d: $TSFIXME) => d.x, + y = (d: $TSFIXME) => d.y, + source = (d: $TSFIXME) => d.source, + target = (d: $TSFIXME) => d.target, children, ...restProps }: LinkVerticalLineProps & diff --git a/packages/vx-shape/src/shapes/link/step/LinkHorizontalStep.tsx b/packages/vx-shape/src/shapes/link/step/LinkHorizontalStep.tsx index b5e8a18e5..6e936021b 100644 --- a/packages/vx-shape/src/shapes/link/step/LinkHorizontalStep.tsx +++ b/packages/vx-shape/src/shapes/link/step/LinkHorizontalStep.tsx @@ -1,7 +1,7 @@ import React from 'react'; import cx from 'classnames'; import { path as d3Path } from 'd3-path'; -import { SharedLinkProps, AccessorProps } from '../../../types'; +import { SharedLinkProps, AccessorProps, $TSFIXME } from '../../../types'; export function pathHorizontalStep({ source, @@ -40,10 +40,10 @@ export default function LinkHorizontalStep({ data, path, percent = 0.5, - x = (d: any) => d.y, - y = (d: any) => d.x, - source = (d: any) => d.source, - target = (d: any) => d.target, + x = (d: $TSFIXME) => d.y, + y = (d: $TSFIXME) => d.x, + source = (d: $TSFIXME) => d.source, + target = (d: $TSFIXME) => d.target, children, ...restProps }: LinkHorizontalStepProps & diff --git a/packages/vx-shape/src/shapes/link/step/LinkRadialStep.tsx b/packages/vx-shape/src/shapes/link/step/LinkRadialStep.tsx index 7018820d0..b9825f1f4 100644 --- a/packages/vx-shape/src/shapes/link/step/LinkRadialStep.tsx +++ b/packages/vx-shape/src/shapes/link/step/LinkRadialStep.tsx @@ -1,6 +1,6 @@ import React from 'react'; import cx from 'classnames'; -import { SharedLinkProps, AccessorProps } from '../../../types'; +import { SharedLinkProps, AccessorProps, $TSFIXME } from '../../../types'; export function pathRadialStep({ source, @@ -46,10 +46,10 @@ export default function LinkRadialStep({ innerRef, data, path, - x = (d: any) => d.x, - y = (d: any) => d.y, - source = (d: any) => d.source, - target = (d: any) => d.target, + x = (d: $TSFIXME) => d.x, + y = (d: $TSFIXME) => d.y, + source = (d: $TSFIXME) => d.source, + target = (d: $TSFIXME) => d.target, children, ...restProps }: LinkRadialStepProps & diff --git a/packages/vx-shape/src/shapes/link/step/LinkVerticalStep.tsx b/packages/vx-shape/src/shapes/link/step/LinkVerticalStep.tsx index 9cbffe485..ec27ff039 100644 --- a/packages/vx-shape/src/shapes/link/step/LinkVerticalStep.tsx +++ b/packages/vx-shape/src/shapes/link/step/LinkVerticalStep.tsx @@ -1,7 +1,7 @@ import React from 'react'; import cx from 'classnames'; import { path as d3Path } from 'd3-path'; -import { SharedLinkProps, AccessorProps } from '../../../types'; +import { SharedLinkProps, AccessorProps, $TSFIXME } from '../../../types'; export function pathVerticalStep({ source, @@ -40,10 +40,10 @@ export default function LinkVerticalStep({ data, path, percent = 0.5, - x = (d: any) => d.x, - y = (d: any) => d.y, - source = (d: any) => d.source, - target = (d: any) => d.target, + x = (d: $TSFIXME) => d.x, + y = (d: $TSFIXME) => d.y, + source = (d: $TSFIXME) => d.source, + target = (d: $TSFIXME) => d.target, children, ...restProps }: LinkVerticalStepProps & diff --git a/packages/vx-shape/src/types.ts b/packages/vx-shape/src/types.ts index 8ef5826da..3b56710e3 100644 --- a/packages/vx-shape/src/types.ts +++ b/packages/vx-shape/src/types.ts @@ -1,5 +1,8 @@ import { SeriesPoint } from 'd3-shape'; +// eslint-disable-next-line @typescript-eslint/no-explicit-any +export type $TSFIXME = any; + /** Unique key for item in a stack. */ export type StackKey = string | number; @@ -107,8 +110,8 @@ export type SharedLinkProps = { /** This is meant to be a generic interface for any scale based on usage in this package. */ export interface ScaleType { - (...args: any[]): number; + (...args: $TSFIXME[]): number; range(): [number, number]; - domain(): [any, any]; + domain(): [$TSFIXME, $TSFIXME]; bandwidth?: () => number; } From 35445b1bbeef8b388311e241f4db66c5a18e4aa2 Mon Sep 17 00:00:00 2001 From: Chris Williams Date: Mon, 23 Sep 2019 14:01:54 -0700 Subject: [PATCH 15/22] typescript(vx-shape): lots of fixes --- packages/vx-shape/src/shapes/Area.tsx | 28 ++++++----- packages/vx-shape/src/shapes/AreaClosed.tsx | 14 +++--- .../src/shapes/BarGroupHorizontal.tsx | 4 +- packages/vx-shape/src/shapes/BarStack.tsx | 18 ++++--- .../src/shapes/BarStackHorizontal.tsx | 14 +++--- packages/vx-shape/src/shapes/Pie.tsx | 49 ++++++++++--------- packages/vx-shape/src/shapes/Stack.tsx | 18 ++++--- .../src/util/setNumberOrNumberAccessor.ts | 6 +-- packages/vx-shape/test/Pie.test.tsx | 4 +- 9 files changed, 87 insertions(+), 68 deletions(-) diff --git a/packages/vx-shape/src/shapes/Area.tsx b/packages/vx-shape/src/shapes/Area.tsx index 7e12a461e..57ae2b821 100644 --- a/packages/vx-shape/src/shapes/Area.tsx +++ b/packages/vx-shape/src/shapes/Area.tsx @@ -1,8 +1,10 @@ +/* eslint-disable @typescript-eslint/unbound-method */ import React from 'react'; import cx from 'classnames'; import { area, Area as AreaType, CurveFactory } from 'd3-shape'; +import setNumOrAccessor from '../util/setNumberOrNumberAccessor'; -type Accessor = (datum: Datum, index: number, data: Datum[]) => number; +type NumberAccessor = (datum: Datum, index: number, data: Datum[]) => number; export type AreaProps = { /** Override render function which is passed the configured area generator as input. */ @@ -18,17 +20,17 @@ export type AreaProps = { /** React RefObject passed to the path element. */ innerRef?: React.Ref; /** Sets the x0 accessor function, and sets x1 to null. */ - x?: Accessor; + x?: NumberAccessor | number | number; /** Specifies the x0 accessor function which defaults to d => d[0]. */ - x0?: Accessor; + x0?: NumberAccessor | number; /** Specifies the x1 accessor function which defaults to null. */ - x1?: Accessor; + x1?: NumberAccessor | number; /** Sets the y0 accessor function, and sets y1 to null. */ - y?: Accessor; + y?: NumberAccessor | number; /** Specifies the y0 accessor function which defaults to d => 0. */ - y0?: Accessor; + y0?: NumberAccessor | number; /** Specifies the y1 accessor function which defaults to d => d[1]. */ - y1?: Accessor; + y1?: NumberAccessor | number; }; export default function Area({ @@ -47,12 +49,12 @@ export default function Area({ ...restProps }: AreaProps & Omit, keyof AreaProps>) { const path = area(); - if (x) path.x(x); - if (x0) path.x0(x0); - if (x1) path.x1(x1); - if (y) path.y(y); - if (y0) path.y0(y0); - if (y1) path.y1(y1); + if (x) setNumOrAccessor(path.x, x); + if (x0) setNumOrAccessor(path.x0, x0); + if (x1) setNumOrAccessor(path.x1, x1); + if (y) setNumOrAccessor(path.y, y); + if (y0) setNumOrAccessor(path.y0, y0); + if (y1) setNumOrAccessor(path.y1, y1); if (defined) path.defined(defined); if (curve) path.curve(curve); if (children) return <>{children({ path })}; diff --git a/packages/vx-shape/src/shapes/AreaClosed.tsx b/packages/vx-shape/src/shapes/AreaClosed.tsx index 15d0e6dd8..023655f00 100644 --- a/packages/vx-shape/src/shapes/AreaClosed.tsx +++ b/packages/vx-shape/src/shapes/AreaClosed.tsx @@ -1,8 +1,10 @@ +/* eslint-disable @typescript-eslint/unbound-method */ import React from 'react'; import cx from 'classnames'; import { area } from 'd3-shape'; import { AreaProps } from './Area'; import { ScaleType } from '../types'; +import setNumOrAccessor from '../util/setNumberOrNumberAccessor'; export type AreaClosedProps = { yScale: ScaleType; @@ -39,11 +41,11 @@ export default function AreaClosed({ ...restProps }: AreaClosedProps & Omit, keyof AreaClosedProps>) { const path = area(); - if (x) path.x(x); - if (x0) path.x0(x0); - if (x1) path.x1(x1); + if (x) setNumOrAccessor(path.x, x); + if (x0) setNumOrAccessor(path.x0, x0); + if (x1) setNumOrAccessor(path.x1, x1); if (y0) { - path.y0(y0); + setNumOrAccessor(path.y0, y0); } else { /** * by default set the baseline to the first element of the yRange @@ -51,8 +53,8 @@ export default function AreaClosed({ */ path.y0(yScale.range()[0]); } - if (y && !y1) path.y1(y); - if (y1 && !y) path.y1(y1); + if (y && !y1) setNumOrAccessor(path.y1, y); + if (y1 && !y) setNumOrAccessor(path.y1, y1); if (defined) path.defined(defined); if (curve) path.curve(curve); if (children) return <>{children({ path })}; diff --git a/packages/vx-shape/src/shapes/BarGroupHorizontal.tsx b/packages/vx-shape/src/shapes/BarGroupHorizontal.tsx index b347b1dbd..b17b337d3 100644 --- a/packages/vx-shape/src/shapes/BarGroupHorizontal.tsx +++ b/packages/vx-shape/src/shapes/BarGroupHorizontal.tsx @@ -10,7 +10,7 @@ type BarGroupHorizontalProps = Pick< 'data' | 'className' | 'top' | 'left' | 'keys' | 'color' > & { /** Returns the value (Datum[key]) mapped to the x of a bar */ - x: (barValue: number) => number; + x?: (barValue: number) => number; /** Returns the value mapped to the y0 (position of group) of a bar */ y0: (d: Datum) => $TSFIXME; /** @vx/scale or d3-scale that takes a key value (Datum[key]) and maps it to an x axis position (width of bar). */ @@ -25,7 +25,7 @@ type BarGroupHorizontalProps = Pick< children?: (barGroups: BarGroupHorizontal[]) => React.ReactNode; }; -export default function BarGroupHorizontal({ +export default function BarGroupHorizontalComponent({ data, className, top, diff --git a/packages/vx-shape/src/shapes/BarStack.tsx b/packages/vx-shape/src/shapes/BarStack.tsx index 1ece8e40e..12da86991 100644 --- a/packages/vx-shape/src/shapes/BarStack.tsx +++ b/packages/vx-shape/src/shapes/BarStack.tsx @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/unbound-method */ import React from 'react'; import cx from 'classnames'; import { Group } from '@vx/group'; @@ -6,8 +7,11 @@ import { stack as d3stack, SeriesPoint } from 'd3-shape'; import stackOrder from '../util/stackOrder'; import stackOffset from '../util/stackOffset'; import Bar from './Bar'; -import { StackProps } from './Stack'; +import { StackProps, NumAccessor } from './Stack'; import { ScaleType, StackKey, BarStack, $TSFIXME } from '../types'; +import setNumOrAccessor from '../util/setNumberOrNumberAccessor'; + +export { NumAccessor }; export type BarStackProps = Pick< StackProps, @@ -16,9 +20,9 @@ export type BarStackProps = Pick< /** Returns the value mapped to the x of a bar */ x: (d: Datum) => number; /** Returns the value mapped to the y0 of a bar. */ - y0: (d: SeriesPoint) => number; + y0?: (d: SeriesPoint) => number; /** Returns the value mapped to the y1 of a bar. */ - y1: (d: SeriesPoint) => number; + y1?: (d: SeriesPoint) => number; /** @vx/scale or d3-scale that takes an x value and maps it to an x axis position. */ xScale: ScaleType; /** @vx/scale or d3-scale that takes a y value and maps it to an y axis position. */ @@ -29,14 +33,14 @@ export type BarStackProps = Pick< children?: (stacks: BarStack[]) => React.ReactNode; }; -export default function BarStack({ +export default function BarStackComponent({ data, className, top, left, x, - y0 = (d: $TSFIXME) => d[0], - y1 = (d: $TSFIXME) => d[1], + y0 = (d: $TSFIXME) => d && d[0], + y1 = (d: $TSFIXME) => d && d[1], xScale, yScale, color, @@ -49,7 +53,7 @@ export default function BarStack({ }: BarStackProps & Omit, keyof BarStackProps>) { const stack = d3stack(); if (keys) stack.keys(keys); - if (value) stack.value(value); + if (value) setNumOrAccessor>(stack.value, value); if (order) stack.order(stackOrder(order)); if (offset) stack.offset(stackOffset(offset)); diff --git a/packages/vx-shape/src/shapes/BarStackHorizontal.tsx b/packages/vx-shape/src/shapes/BarStackHorizontal.tsx index fd08865ee..ddcc8f412 100644 --- a/packages/vx-shape/src/shapes/BarStackHorizontal.tsx +++ b/packages/vx-shape/src/shapes/BarStackHorizontal.tsx @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/unbound-method */ import React from 'react'; import cx from 'classnames'; import { Group } from '@vx/group'; @@ -6,8 +7,9 @@ import { stack as d3stack, SeriesPoint } from 'd3-shape'; import stackOrder from '../util/stackOrder'; import stackOffset from '../util/stackOffset'; import Bar from './Bar'; -import { BarStackProps } from './BarStack'; +import { BarStackProps, NumAccessor } from './BarStack'; import { StackKey, $TSFIXME } from '../types'; +import setNumOrAccessor from '../util/setNumberOrNumberAccessor'; export type BarStackHorizontalProps = Pick< BarStackProps, @@ -25,9 +27,9 @@ export type BarStackHorizontalProps = Pick< | 'children' > & { /** Returns the value mapped to the x0 of a bar. */ - x0: (d: SeriesPoint) => number; + x0?: (d: SeriesPoint) => number; /** Returns the value mapped to the x1 of a bar. */ - x1: (d: SeriesPoint) => number; + x1?: (d: SeriesPoint) => number; /** Returns the value mapped to the y of a bar. */ y: (d: Datum) => number; }; @@ -38,8 +40,8 @@ export default function BarStackHorizontal({ top, left, y, - x0 = (d: $TSFIXME) => d[0], - x1 = (d: $TSFIXME) => d[1], + x0 = (d: $TSFIXME) => d && d[0], + x1 = (d: $TSFIXME) => d && d[1], xScale, yScale, color, @@ -53,7 +55,7 @@ export default function BarStackHorizontal({ Omit, keyof BarStackHorizontalProps>) { const stack = d3stack(); if (keys) stack.keys(keys); - if (value) stack.value(value); + if (value) setNumOrAccessor>(stack.value, value); if (order) stack.order(stackOrder(order)); if (offset) stack.offset(stackOffset(offset)); diff --git a/packages/vx-shape/src/shapes/Pie.tsx b/packages/vx-shape/src/shapes/Pie.tsx index 3b51d9b7f..3ea4f4a7d 100644 --- a/packages/vx-shape/src/shapes/Pie.tsx +++ b/packages/vx-shape/src/shapes/Pie.tsx @@ -1,8 +1,9 @@ +/* eslint-disable @typescript-eslint/unbound-method */ import React from 'react'; import cx from 'classnames'; import { Group } from '@vx/group'; import { arc as d3Arc, Arc as ArcType, PieArcDatum, pie as d3Pie, Pie as PieType } from 'd3-shape'; -import setNumOrAccessor, { NumberAccessor } from '../util/setNumberOrNumberAccessor'; +import setNumOrAccessor, { NumberAccessor as NumAccessor } from '../util/setNumberOrNumberAccessor'; import { $TSFIXME } from '../types'; export type PieProps = { @@ -15,27 +16,27 @@ export type PieProps = { /** Array of data to generate a Pie for. */ data?: Datum[]; /** Invoked for each datum, returns the value for a given Pie segment/arc datum. */ - pieValue?: NumberAccessor; - /** Comparator function to sort *arcs* different from input data order. Overridden by pieSortValues if defined. */ - pieSort?: (a: Datum, b: Datum) => number; - /** Comparator function to sort arc *values* different from input data order. Overrides pieSort if defined. */ - pieSortValues?: (a: number, b: number) => number; + pieValue?: NumAccessor; + /** Comparator function to sort *arcs*, overridden by pieSortValues if defined. If pieSort and pieSortValues are null, arcs match input data order. */ + pieSort?: null | ((a: Datum, b: Datum) => number); + /** Comparator function to sort arc *values*, overrides pieSort if defined. If pieSort and pieSortValues are null, arcs match input data order. */ + pieSortValues?: null | ((a: number, b: number) => number); /** Optional render function invoked for each Datum to render something (e.g., a Label) at each pie centroid. */ centroid?: (xyCoords: [number, number], arc: PieArcDatum) => React.ReactNode; /** Inner radius of the Arc shape. */ - innerRadius?: NumberAccessor | number; + innerRadius?: NumAccessor | number; /** Inner radius of the Arc shape. */ - outerRadius?: NumberAccessor | number; + outerRadius?: NumAccessor | number; /** Inner radius of the Arc shape. */ - cornerRadius?: NumberAccessor | number; + cornerRadius?: NumAccessor | number; /** Padding radius of the Arc shape, which determines the fixed linear distance separating adjacent arcs. */ - padRadius?: NumberAccessor | number; + padRadius?: NumAccessor | number; /** Returns the start angle of the overall Pie shape (the first value starts at startAngle), with 0 at -y (12 o’clock) and positive angles proceeding clockwise. */ - startAngle?: NumberAccessor | number; + startAngle?: NumAccessor | number; /** Returns the end angle of the overall Pie shape (the last value ends at endAngle), with 0 at -y (12 o’clock) and positive angles proceeding clockwise. */ - endAngle?: NumberAccessor | number; + endAngle?: NumAccessor | number; /** Padding angle of the Pie shape, which sets a fixed linear distance separating adjacent arcs. */ - padAngle?: NumberAccessor | number; + padAngle?: NumAccessor | number; /** Render function override which is passed the configured arc generator as input. */ children?: (args: { path: ArcType<$TSFIXME, PieArcDatum>; @@ -65,18 +66,22 @@ export default function Pie({ }: PieProps & Omit, keyof PieProps>) { const path = d3Arc>(); - if (innerRadius != null) setNumOrAccessor(path.innerRadius, innerRadius); - if (outerRadius != null) setNumOrAccessor(path.outerRadius, outerRadius); - if (cornerRadius != null) setNumOrAccessor(path.cornerRadius, cornerRadius); - if (padRadius != null) setNumOrAccessor(path.padRadius, padRadius); + if (innerRadius != null) setNumOrAccessor>(path.innerRadius, innerRadius); + if (outerRadius != null) setNumOrAccessor>(path.outerRadius, outerRadius); + if (cornerRadius != null) setNumOrAccessor>(path.cornerRadius, cornerRadius); + if (padRadius != null) setNumOrAccessor>(path.padRadius, padRadius); const pie = d3Pie(); - if (pieSort != null) pie.sort(pieSort); - if (pieSortValues != null) pie.sortValues(pieSortValues); + // ts can't distinguish between these method overloads + if (pieSort === null) pie.sort(pieSort); + else if (pieSort != null) pie.sort(pieSort); + if (pieSortValues === null) pie.sortValues(pieSortValues); + else if (pieSortValues != null) pie.sortValues(pieSortValues); + if (pieValue != null) pie.value(pieValue); - if (padAngle != null) setNumOrAccessor(pie.padAngle, padAngle); - if (startAngle != null) setNumOrAccessor(pie.startAngle, startAngle); - if (endAngle != null) setNumOrAccessor(pie.endAngle, endAngle); + if (padAngle != null) setNumOrAccessor>(pie.padAngle, padAngle); + if (startAngle != null) setNumOrAccessor>(pie.startAngle, startAngle); + if (endAngle != null) setNumOrAccessor>(pie.endAngle, endAngle); const arcs = pie(data); if (children) return <>{children({ arcs, path, pie })}; diff --git a/packages/vx-shape/src/shapes/Stack.tsx b/packages/vx-shape/src/shapes/Stack.tsx index 787d6d2b9..136cf1685 100644 --- a/packages/vx-shape/src/shapes/Stack.tsx +++ b/packages/vx-shape/src/shapes/Stack.tsx @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/unbound-method */ import React from 'react'; import cx from 'classnames'; import { Group } from '@vx/group'; @@ -11,11 +12,12 @@ import { Series, } from 'd3-shape'; +import setNumOrAccessor from '../util/setNumberOrNumberAccessor'; import stackOrder, { STACK_ORDERS } from '../util/stackOrder'; import stackOffset, { STACK_OFFSETS } from '../util/stackOffset'; import { StackKey, $TSFIXME } from '../types'; -type Accessor = (datum: Datum, index: number, data: Datum[]) => number; +export type NumAccessor = (datum: Datum, index: number, data: Datum[]) => number; export type StackProps = { /** Array of data for which to generate a stack. */ @@ -39,17 +41,17 @@ export type StackProps = { stack: StackType<$TSFIXME, Datum, StackKey>; }) => React.ReactNode; /** Sets the x0 accessor function, and sets x1 to null. */ - x?: Accessor>; + x?: NumAccessor>; /** Specifies the x0 accessor function which defaults to d => d[0]. */ - x0?: Accessor>; + x0?: NumAccessor>; /** Specifies the x1 accessor function which defaults to null. */ - x1?: Accessor>; + x1?: NumAccessor>; /** Specifies the y0 accessor function which defaults to d => 0. */ - y0?: Accessor>; + y0?: NumAccessor>; /** Specifies the y1 accessor function which defaults to d => d[1]. */ - y1?: Accessor>; + y1?: NumAccessor>; /** Sets the value accessor for a Datum, which defaults to d[key]. */ - value?: (d: Datum, key: StackKey) => number; + value?: number | ((d: Datum, key: StackKey) => number); /** The defined accessor for the shape. The final area shape includes all points for which this function returns true. By default all points are defined. */ defined?: (datum: SeriesPoint, index: number, data: SeriesPoint[]) => boolean; /** Sets the stack order to the pre-defined d3 function, see https://github.com/d3/d3-shape#stack_order. */ @@ -80,7 +82,7 @@ export default function Stack({ }: StackProps & Omit, keyof StackProps>) { const stack = d3stack(); if (keys) stack.keys(keys); - if (value) stack.value(value); + if (value) setNumOrAccessor(stack.value, value); if (order) stack.order(stackOrder(order)); if (offset) stack.offset(stackOffset(offset)); diff --git a/packages/vx-shape/src/util/setNumberOrNumberAccessor.ts b/packages/vx-shape/src/util/setNumberOrNumberAccessor.ts index e504a07f2..6c0a2974f 100644 --- a/packages/vx-shape/src/util/setNumberOrNumberAccessor.ts +++ b/packages/vx-shape/src/util/setNumberOrNumberAccessor.ts @@ -4,9 +4,9 @@ export type NumberAccessor = (d: Datum) => number; * This is a workaround for TypeScript not inferring the correct * method overload/signature for some d3 shape methods. */ -export default function setNumberOrNumberAccessor( - func: (d: number | NumberAccessor) => void, - value: number | NumberAccessor, +export default function setNumberOrNumberAccessor( + func: (d: number | NumAccessor) => void, + value: number | NumAccessor, ) { if (typeof value === 'number') func(value); else func(value); diff --git a/packages/vx-shape/test/Pie.test.tsx b/packages/vx-shape/test/Pie.test.tsx index 8404c1fb3..916f7381e 100644 --- a/packages/vx-shape/test/Pie.test.tsx +++ b/packages/vx-shape/test/Pie.test.tsx @@ -38,6 +38,7 @@ const PieChildren = ({ children, ...restProps }) => describe('', () => { beforeEach(() => { + // eslint-disable-next-line @typescript-eslint/unbound-method global.console.error = jest.fn(); }); @@ -75,8 +76,9 @@ describe('', () => { test('it should break on invalid sort callbacks', () => { expect(() => PieWrapper({ pieSort: 12 })).toThrow(); expect(() => PieWrapper({ pieSortValues: 12 })).toThrow(); + // eslint-disable-next-line @typescript-eslint/unbound-method expect(console.error).toBeCalled(); - expect(console.error.mock.calls).toHaveLength(2); + expect((console.error as typeof jest.fn).mock.calls).toHaveLength(2); }); test('it should have the .vx-pie-arcs-group class', () => { From 138353f7f2da6852d65c1257ac6b0b84720fcc7a Mon Sep 17 00:00:00 2001 From: Chris Williams Date: Tue, 24 Sep 2019 11:46:52 -0700 Subject: [PATCH 16/22] deps(vx-shape): require react@^16.3.0-0 peerDep --- packages/vx-shape/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vx-shape/package.json b/packages/vx-shape/package.json index 3f5e98625..4a8ef7e8c 100644 --- a/packages/vx-shape/package.json +++ b/packages/vx-shape/package.json @@ -36,7 +36,7 @@ "prop-types": "^15.5.10" }, "peerDependencies": { - "react": "^15.0.0-0 || ^16.0.0-0" + "react": "^16.3.0-0" }, "publishConfig": { "access": "public" From d5cee59e12c21eed192e730436398e002a863f5d Mon Sep 17 00:00:00 2001 From: Chris Williams Date: Wed, 9 Oct 2019 09:21:55 -0700 Subject: [PATCH 17/22] fix(vx-shape): path => pathGen, remove duplicate number type --- packages/vx-shape/src/shapes/Area.tsx | 2 +- .../vx-shape/src/shapes/link/curve/LinkHorizontalCurve.tsx | 2 +- packages/vx-shape/src/shapes/link/curve/LinkRadialCurve.tsx | 2 +- packages/vx-shape/src/shapes/link/curve/LinkVerticalCurve.tsx | 2 +- packages/vx-shape/src/shapes/link/diagonal/LinkHorizontal.tsx | 2 +- packages/vx-shape/src/shapes/link/diagonal/LinkRadial.tsx | 2 +- packages/vx-shape/src/shapes/link/diagonal/LinkVertical.tsx | 2 +- packages/vx-shape/src/shapes/link/line/LinkHorizontalLine.tsx | 2 +- packages/vx-shape/src/shapes/link/line/LinkRadialLine.tsx | 2 +- packages/vx-shape/src/shapes/link/line/LinkVerticalLine.tsx | 2 +- packages/vx-shape/src/shapes/link/step/LinkHorizontalStep.tsx | 2 +- packages/vx-shape/src/shapes/link/step/LinkRadialStep.tsx | 2 +- packages/vx-shape/src/shapes/link/step/LinkVerticalStep.tsx | 2 +- packages/vx-shape/src/types.ts | 4 ++-- 14 files changed, 15 insertions(+), 15 deletions(-) diff --git a/packages/vx-shape/src/shapes/Area.tsx b/packages/vx-shape/src/shapes/Area.tsx index 57ae2b821..6f75e364c 100644 --- a/packages/vx-shape/src/shapes/Area.tsx +++ b/packages/vx-shape/src/shapes/Area.tsx @@ -20,7 +20,7 @@ export type AreaProps = { /** React RefObject passed to the path element. */ innerRef?: React.Ref; /** Sets the x0 accessor function, and sets x1 to null. */ - x?: NumberAccessor | number | number; + x?: NumberAccessor | number; /** Specifies the x0 accessor function which defaults to d => d[0]. */ x0?: NumberAccessor | number; /** Specifies the x1 accessor function which defaults to null. */ diff --git a/packages/vx-shape/src/shapes/link/curve/LinkHorizontalCurve.tsx b/packages/vx-shape/src/shapes/link/curve/LinkHorizontalCurve.tsx index 6b401896f..da101c596 100644 --- a/packages/vx-shape/src/shapes/link/curve/LinkHorizontalCurve.tsx +++ b/packages/vx-shape/src/shapes/link/curve/LinkHorizontalCurve.tsx @@ -52,7 +52,7 @@ export default function LinkHorizontalCurve({ }: LinkHorizontalCurveProps & Omit, keyof LinkHorizontalCurveProps>) { const pathGen = path || pathHorizontalCurve({ source, target, x, y, percent }); - if (children) return <>{children({ path })}; + if (children) return <>{children({ path: pathGen })}; return ( ({ }: LinkRadialCurveProps & Omit, keyof LinkRadialCurveProps>) { const pathGen = path || pathRadialCurve({ source, target, x, y, percent }); - if (children) return <>{children({ path })}; + if (children) return <>{children({ path: pathGen })}; return ( ({ }: LinkVerticalCurveProps & Omit, keyof LinkVerticalCurveProps>) { const pathGen = path || pathVerticalCurve({ source, target, x, y, percent }); - if (children) return <>{children({ path })}; + if (children) return <>{children({ path: pathGen })}; return ( ({ }: LinkHorizontalDiagonalProps & Omit, keyof LinkHorizontalDiagonalProps>) { const pathGen = path || pathHorizontalDiagonal({ source, target, x, y }); - if (children) return <>{children({ path })}; + if (children) return <>{children({ path: pathGen })}; return ( ({ }: LinkRadialDiagonalProps & Omit, keyof LinkRadialDiagonalProps>) { const pathGen = path || pathRadialDiagonal({ source, target, angle, radius }); - if (children) return <>{children({ path })}; + if (children) return <>{children({ path: pathGen })}; return ( ({ }: LinkVerticalDiagonalProps & Omit, keyof LinkVerticalDiagonalProps>) { const pathGen = path || pathVerticalDiagonal({ source, target, x, y }); - if (children) return <>{children({ path })}; + if (children) return <>{children({ path: pathGen })}; return ( ({ }: LinkHorizontalLineProps & Omit, keyof LinkHorizontalLineProps>) { const pathGen = path || pathHorizontalLine({ source, target, x, y }); - if (children) return <>{children({ path })}; + if (children) return <>{children({ path: pathGen })}; return ( ({ }: LinkRadialLineProps & Omit, keyof LinkRadialLineProps>) { const pathGen = path || pathRadialLine({ source, target, x, y }); - if (children) return <>{children({ path })}; + if (children) return <>{children({ path: pathGen })}; return ( ({ }: LinkVerticalLineProps & Omit, keyof LinkVerticalLineProps>) { const pathGen = path || pathVerticalLine({ source, target, x, y }); - if (children) return <>{children({ path })}; + if (children) return <>{children({ path: pathGen })}; return ( ({ }: LinkHorizontalStepProps & Omit, keyof LinkHorizontalStepProps>) { const pathGen = path || pathHorizontalStep({ source, target, x, y, percent }); - if (children) return <>{children({ path })}; + if (children) return <>{children({ path: pathGen })}; return ( ({ }: LinkRadialStepProps & Omit, keyof LinkRadialStepProps>) { const pathGen = path || pathRadialStep({ source, target, x, y }); - if (children) return <>{children({ path })}; + if (children) return <>{children({ path: pathGen })}; return ( ({ }: LinkVerticalStepProps & Omit, keyof LinkVerticalStepProps>) { const pathGen = path || pathVerticalStep({ source, target, x, y, percent }); - if (children) return <>{children({ path })}; + if (children) return <>{children({ path: pathGen })}; return ( = { /** React ref to the path element. */ innerRef?: React.Ref; /** Path generator, given a link returns a path d attribute string */ - path: PathType; + path?: PathType; /** Render function override which is passed the configured path generator as input. */ - children?: (args: { path: PathType }) => NonNullable; + children?: (args: { path: PathType }) => React.ReactNode; /** Datum for which to render a link. */ data: Link; }; From 2090151ffb410d05731a4cf8e66918e33dcc3023 Mon Sep 17 00:00:00 2001 From: Chris Williams Date: Wed, 9 Oct 2019 09:54:44 -0700 Subject: [PATCH 18/22] typescript(vx-shape): update PathType to return string | null --- packages/vx-shape/src/shapes/link/curve/LinkHorizontalCurve.tsx | 2 +- packages/vx-shape/src/shapes/link/curve/LinkRadialCurve.tsx | 2 +- packages/vx-shape/src/shapes/link/curve/LinkVerticalCurve.tsx | 2 +- packages/vx-shape/src/shapes/link/diagonal/LinkHorizontal.tsx | 2 +- packages/vx-shape/src/shapes/link/diagonal/LinkRadial.tsx | 2 +- packages/vx-shape/src/shapes/link/diagonal/LinkVertical.tsx | 2 +- packages/vx-shape/src/shapes/link/line/LinkHorizontalLine.tsx | 2 +- packages/vx-shape/src/shapes/link/line/LinkRadialLine.tsx | 2 +- packages/vx-shape/src/shapes/link/line/LinkVerticalLine.tsx | 2 +- packages/vx-shape/src/shapes/link/step/LinkHorizontalStep.tsx | 2 +- packages/vx-shape/src/shapes/link/step/LinkRadialStep.tsx | 2 +- packages/vx-shape/src/shapes/link/step/LinkVerticalStep.tsx | 2 +- packages/vx-shape/src/types.ts | 2 +- 13 files changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/vx-shape/src/shapes/link/curve/LinkHorizontalCurve.tsx b/packages/vx-shape/src/shapes/link/curve/LinkHorizontalCurve.tsx index da101c596..84810c820 100644 --- a/packages/vx-shape/src/shapes/link/curve/LinkHorizontalCurve.tsx +++ b/packages/vx-shape/src/shapes/link/curve/LinkHorizontalCurve.tsx @@ -57,7 +57,7 @@ export default function LinkHorizontalCurve({ ); diff --git a/packages/vx-shape/src/shapes/link/curve/LinkRadialCurve.tsx b/packages/vx-shape/src/shapes/link/curve/LinkRadialCurve.tsx index f90469c23..50406959e 100644 --- a/packages/vx-shape/src/shapes/link/curve/LinkRadialCurve.tsx +++ b/packages/vx-shape/src/shapes/link/curve/LinkRadialCurve.tsx @@ -67,7 +67,7 @@ export default function LinkRadialCurve({ ); diff --git a/packages/vx-shape/src/shapes/link/curve/LinkVerticalCurve.tsx b/packages/vx-shape/src/shapes/link/curve/LinkVerticalCurve.tsx index 206057e8d..e6b388465 100644 --- a/packages/vx-shape/src/shapes/link/curve/LinkVerticalCurve.tsx +++ b/packages/vx-shape/src/shapes/link/curve/LinkVerticalCurve.tsx @@ -57,7 +57,7 @@ export default function LinkVerticalCurve({ ); diff --git a/packages/vx-shape/src/shapes/link/diagonal/LinkHorizontal.tsx b/packages/vx-shape/src/shapes/link/diagonal/LinkHorizontal.tsx index 45ec54229..4751dbfe8 100644 --- a/packages/vx-shape/src/shapes/link/diagonal/LinkHorizontal.tsx +++ b/packages/vx-shape/src/shapes/link/diagonal/LinkHorizontal.tsx @@ -41,7 +41,7 @@ export default function LinkHorizontalDiagonal({ ); diff --git a/packages/vx-shape/src/shapes/link/diagonal/LinkRadial.tsx b/packages/vx-shape/src/shapes/link/diagonal/LinkRadial.tsx index c8810e50f..7bec329f1 100644 --- a/packages/vx-shape/src/shapes/link/diagonal/LinkRadial.tsx +++ b/packages/vx-shape/src/shapes/link/diagonal/LinkRadial.tsx @@ -44,7 +44,7 @@ export default function LinkRadialDiagonal({ ); diff --git a/packages/vx-shape/src/shapes/link/diagonal/LinkVertical.tsx b/packages/vx-shape/src/shapes/link/diagonal/LinkVertical.tsx index c566aa5f8..5e36f69e2 100644 --- a/packages/vx-shape/src/shapes/link/diagonal/LinkVertical.tsx +++ b/packages/vx-shape/src/shapes/link/diagonal/LinkVertical.tsx @@ -40,7 +40,7 @@ export default function LinkVerticalDiagonal({ ); diff --git a/packages/vx-shape/src/shapes/link/line/LinkHorizontalLine.tsx b/packages/vx-shape/src/shapes/link/line/LinkHorizontalLine.tsx index b7cc02094..190871891 100644 --- a/packages/vx-shape/src/shapes/link/line/LinkHorizontalLine.tsx +++ b/packages/vx-shape/src/shapes/link/line/LinkHorizontalLine.tsx @@ -47,7 +47,7 @@ export default function LinkHorizontalLine({ ); diff --git a/packages/vx-shape/src/shapes/link/line/LinkRadialLine.tsx b/packages/vx-shape/src/shapes/link/line/LinkRadialLine.tsx index 76ce82ff7..a41a0f175 100644 --- a/packages/vx-shape/src/shapes/link/line/LinkRadialLine.tsx +++ b/packages/vx-shape/src/shapes/link/line/LinkRadialLine.tsx @@ -52,7 +52,7 @@ export default function LinkRadialLine({ ); diff --git a/packages/vx-shape/src/shapes/link/line/LinkVerticalLine.tsx b/packages/vx-shape/src/shapes/link/line/LinkVerticalLine.tsx index f469abdd0..bdfc39bb0 100644 --- a/packages/vx-shape/src/shapes/link/line/LinkVerticalLine.tsx +++ b/packages/vx-shape/src/shapes/link/line/LinkVerticalLine.tsx @@ -47,7 +47,7 @@ export default function LinkVerticalLine({ ); diff --git a/packages/vx-shape/src/shapes/link/step/LinkHorizontalStep.tsx b/packages/vx-shape/src/shapes/link/step/LinkHorizontalStep.tsx index 00891dee6..b416a6bf9 100644 --- a/packages/vx-shape/src/shapes/link/step/LinkHorizontalStep.tsx +++ b/packages/vx-shape/src/shapes/link/step/LinkHorizontalStep.tsx @@ -54,7 +54,7 @@ export default function LinkHorizontalStep({ ); diff --git a/packages/vx-shape/src/shapes/link/step/LinkRadialStep.tsx b/packages/vx-shape/src/shapes/link/step/LinkRadialStep.tsx index 168d177b7..ad85029fb 100644 --- a/packages/vx-shape/src/shapes/link/step/LinkRadialStep.tsx +++ b/packages/vx-shape/src/shapes/link/step/LinkRadialStep.tsx @@ -60,7 +60,7 @@ export default function LinkRadialStep({ ); diff --git a/packages/vx-shape/src/shapes/link/step/LinkVerticalStep.tsx b/packages/vx-shape/src/shapes/link/step/LinkVerticalStep.tsx index 3c240c96e..437e0947d 100644 --- a/packages/vx-shape/src/shapes/link/step/LinkVerticalStep.tsx +++ b/packages/vx-shape/src/shapes/link/step/LinkVerticalStep.tsx @@ -54,7 +54,7 @@ export default function LinkVerticalStep({ ); diff --git a/packages/vx-shape/src/types.ts b/packages/vx-shape/src/types.ts index d9892ab3e..09a6cf010 100644 --- a/packages/vx-shape/src/types.ts +++ b/packages/vx-shape/src/types.ts @@ -93,7 +93,7 @@ export type RadialAccessorProps = Pick< radius?: (node: Node) => number; }; -type PathType = (link: Link) => string; +type PathType = (link: Link) => string | null; export type SharedLinkProps = { /** className applied to path element. */ From fb2c5fbd2510e160a311852614141437c45b884e Mon Sep 17 00:00:00 2001 From: Chris Williams Date: Wed, 9 Oct 2019 12:41:25 -0700 Subject: [PATCH 19/22] typescript(vx-shape): fix diagonal/LinkRadial Node + Link generics --- packages/vx-shape/src/shapes/link/diagonal/LinkRadial.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/vx-shape/src/shapes/link/diagonal/LinkRadial.tsx b/packages/vx-shape/src/shapes/link/diagonal/LinkRadial.tsx index 7bec329f1..b7bd3e072 100644 --- a/packages/vx-shape/src/shapes/link/diagonal/LinkRadial.tsx +++ b/packages/vx-shape/src/shapes/link/diagonal/LinkRadial.tsx @@ -19,10 +19,10 @@ export function pathRadialDiagonal({ }; } -type LinkRadialDiagonalProps = { +type LinkRadialDiagonalProps = { angle: (node: Node) => number; radius: (node: Node) => number; -} & RadialAccessorProps & +} & RadialAccessorProps & SharedLinkProps; export default function LinkRadialDiagonal({ @@ -36,7 +36,7 @@ export default function LinkRadialDiagonal({ source = (n: $TSFIXME) => n.source, target = (n: $TSFIXME) => n.target, ...restProps -}: LinkRadialDiagonalProps & +}: LinkRadialDiagonalProps & Omit, keyof LinkRadialDiagonalProps>) { const pathGen = path || pathRadialDiagonal({ source, target, angle, radius }); if (children) return <>{children({ path: pathGen })}; From ad4eea51a4303fe9ec09794bfb643b2c0fbffd55 Mon Sep 17 00:00:00 2001 From: Chris Williams Date: Wed, 9 Oct 2019 13:15:52 -0700 Subject: [PATCH 20/22] tests(vx-shape): fix types in tests --- packages/vx-shape/src/shapes/Area.tsx | 1 - packages/vx-shape/test/Arc.test.tsx | 2 +- packages/vx-shape/test/Area.test.tsx | 8 ++--- packages/vx-shape/test/AreaClosed.test.tsx | 12 ++++--- packages/vx-shape/test/Bar.test.tsx | 6 ++-- packages/vx-shape/test/BarGroup.test.tsx | 14 ++++++-- .../vx-shape/test/BarGroupHorizontal.test.tsx | 10 ++++-- packages/vx-shape/test/BarStack.test.tsx | 22 ++++++------- .../vx-shape/test/BarStackHorizontal.test.tsx | 32 +++++++++---------- packages/vx-shape/test/Circle.test.tsx | 4 +-- packages/vx-shape/test/Line.test.tsx | 6 ++-- packages/vx-shape/test/LinePath.test.tsx | 12 ++++--- packages/vx-shape/test/LineRadial.test.tsx | 12 ++++--- .../vx-shape/test/LinkHorizontal.test.tsx | 5 +-- packages/vx-shape/test/LinkVertical.test.tsx | 4 +-- packages/vx-shape/test/Pie.test.tsx | 6 ++-- packages/vx-shape/test/Polygon.test.tsx | 8 +++-- packages/vx-shape/test/stackOffset.test.ts | 1 + packages/vx-shape/test/stackOrder.test.ts | 1 + 19 files changed, 97 insertions(+), 69 deletions(-) diff --git a/packages/vx-shape/src/shapes/Area.tsx b/packages/vx-shape/src/shapes/Area.tsx index 6f75e364c..5ac0a71e2 100644 --- a/packages/vx-shape/src/shapes/Area.tsx +++ b/packages/vx-shape/src/shapes/Area.tsx @@ -1,4 +1,3 @@ -/* eslint-disable @typescript-eslint/unbound-method */ import React from 'react'; import cx from 'classnames'; import { area, Area as AreaType, CurveFactory } from 'd3-shape'; diff --git a/packages/vx-shape/test/Arc.test.tsx b/packages/vx-shape/test/Arc.test.tsx index ce906a3ab..80cbf11a0 100644 --- a/packages/vx-shape/test/Arc.test.tsx +++ b/packages/vx-shape/test/Arc.test.tsx @@ -28,7 +28,7 @@ const browserUsage = [ }, ]; -const ArcWrapper = overrideProps => shallow(); +const ArcWrapper = (overrideProps = {}) => shallow(); const ArcChildren = ({ children, ...restProps }) => shallow( diff --git a/packages/vx-shape/test/Area.test.tsx b/packages/vx-shape/test/Area.test.tsx index 7d4f9b1aa..520f250bc 100644 --- a/packages/vx-shape/test/Area.test.tsx +++ b/packages/vx-shape/test/Area.test.tsx @@ -20,8 +20,8 @@ const xScale = () => 50; const yScale = () => 50; yScale.range = () => [100, 0]; -const x = d => xScale(d.x); -const y = d => yScale(d.y); +const x = () => xScale(); +const y = () => yScale(); describe('', () => { test('it should be defined', () => { @@ -35,8 +35,8 @@ describe('', () => { test('it should expose its ref via an innerRef prop', () => { return new Promise(done => { - const refCallback = n => { - expect(n.tagName).toMatch('path'); + const refCallback = (ref: SVGPathElement) => { + expect(ref.tagName).toMatch('path'); done(); }; mount( diff --git a/packages/vx-shape/test/AreaClosed.test.tsx b/packages/vx-shape/test/AreaClosed.test.tsx index 052f86b1f..a8fbca849 100644 --- a/packages/vx-shape/test/AreaClosed.test.tsx +++ b/packages/vx-shape/test/AreaClosed.test.tsx @@ -10,13 +10,17 @@ const data = [ ]; const xScale = () => 50; +xScale.range = () => [0, 100]; +xScale.domain = () => [0, 100]; + const yScale = () => 50; -yScale.range = () => [100, 0]; +yScale.range = () => [100, 0] as [number, number]; +yScale.domain = () => [0, 100] as [number, number]; -const x = d => xScale(d.x); -const y = d => yScale(d.y); +const x = () => xScale(); +const y = () => yScale(); -const AreaClosedWrapper = restProps => +const AreaClosedWrapper = (restProps = {}) => shallow(); const AreaClosedChildren = ({ children, ...restProps }) => diff --git a/packages/vx-shape/test/Bar.test.tsx b/packages/vx-shape/test/Bar.test.tsx index 3bd3a0374..5c57e18ef 100644 --- a/packages/vx-shape/test/Bar.test.tsx +++ b/packages/vx-shape/test/Bar.test.tsx @@ -3,7 +3,7 @@ import { shallow, mount } from 'enzyme'; import { Bar } from '../src'; -const BarWrapper = restProps => shallow(); +const BarWrapper = (restProps = {}) => shallow(); describe('', () => { test('it should be defined', () => { @@ -20,8 +20,8 @@ describe('', () => { test('it should expose its ref via an innerRef prop', () => { return new Promise(done => { - const refCallback = n => { - expect(n.tagName).toMatch('rect'); + const refCallback = (ref: SVGRectElement) => { + expect(ref.tagName).toMatch('rect'); done(); }; mount( diff --git a/packages/vx-shape/test/BarGroup.test.tsx b/packages/vx-shape/test/BarGroup.test.tsx index b4a289e69..3b02f4cb1 100644 --- a/packages/vx-shape/test/BarGroup.test.tsx +++ b/packages/vx-shape/test/BarGroup.test.tsx @@ -17,19 +17,27 @@ const data = [ Austin: '67.7', }, ]; + const x0 = d => d.date; const x0Scale = () => 2; x0Scale.bandwidth = () => 10; +x0Scale.domain = () => [0, 100] as [number, number]; +x0Scale.range = () => [0, 100] as [number, number]; + const x1Scale = d => d; x1Scale.bandwidth = () => 2; -x1Scale.domain = () => [0, 100]; -x1Scale.range = () => [0, 100]; +x1Scale.domain = () => [0, 100] as [number, number]; +x1Scale.range = () => [0, 100] as [number, number]; + const yScale = d => d; +yScale.domain = () => [0, 100] as [number, number]; +yScale.range = () => [0, 100] as [number, number]; + const color = d => d; const keys = ['New York', 'San Francisco', 'Austin']; const height = 1; -const BarGroupWrapper = restProps => +const BarGroupWrapper = (restProps = {}) => shallow( d.date; const y0Scale = () => 2; y0Scale.bandwidth = () => 10; +y0Scale.domain = () => [0, 100] as [number, number]; +y0Scale.range = () => [0, 100] as [number, number]; const y1Scale = d => d; y1Scale.bandwidth = () => 2; -y1Scale.domain = () => [0, 100]; -y1Scale.range = () => [0, 100]; +y1Scale.domain = () => [0, 100] as [number, number]; +y1Scale.range = () => [0, 100] as [number, number]; const xScale = d => d; +xScale.domain = () => [0, 100] as [number, number]; +xScale.range = () => [0, 100] as [number, number]; const color = d => d; const keys = ['New York', 'San Francisco', 'Austin']; const width = 1; -const BarGroupWrapper = restProps => +const BarGroupWrapper = (restProps = {}) => shallow( [0, 100]; -xScale.range = () => [0, 100]; -xScale.bandwidth = jest.fn(); -xScale.step = jest.fn(); +const xScale = () => 2; +xScale.domain = () => [0, 100] as [number, number]; +xScale.range = () => [0, 100] as [number, number]; +xScale.bandwidth = () => 2; +xScale.step = () => 2; xScale.paddingInner = jest.fn(); xScale.paddingOuter = jest.fn(); @@ -24,8 +24,8 @@ describe('', () => { left={3} x={d => d} xScale={xScale} - yScale={d => d} - color={d => d} + yScale={xScale} + color={d => d.toString()} keys={[]} />, ); @@ -41,8 +41,8 @@ describe('', () => { left={3} x={d => d} xScale={xScale} - yScale={d => d} - color={d => d} + yScale={xScale} + color={d => d.toString()} keys={[]} />, ); @@ -58,8 +58,8 @@ describe('', () => { left={3} x={d => d} xScale={xScale} - yScale={d => d} - color={d => d} + yScale={xScale} + color={d => d.toString()} keys={[]} />, ); diff --git a/packages/vx-shape/test/BarStackHorizontal.test.tsx b/packages/vx-shape/test/BarStackHorizontal.test.tsx index 87812c2d7..c3e7fd2b9 100644 --- a/packages/vx-shape/test/BarStackHorizontal.test.tsx +++ b/packages/vx-shape/test/BarStackHorizontal.test.tsx @@ -3,13 +3,13 @@ import { shallow } from 'enzyme'; import { BarStackHorizontal } from '../src'; -const yScale = jest.fn(); -yScale.domain = () => [0, 100]; -yScale.range = () => [0, 100]; -yScale.bandwidth = jest.fn(); -yScale.step = jest.fn(); -yScale.paddingInner = jest.fn(); -yScale.paddingOuter = jest.fn(); +const scale = () => 5; +scale.domain = () => [0, 100] as [number, number]; +scale.range = () => [0, 100] as [number, number]; +scale.bandwidth = () => 5; +scale.step = () => 5; +scale.paddingInner = () => 5; +scale.paddingOuter = () => 5; describe('', () => { test('it should be defined', () => { @@ -23,9 +23,9 @@ describe('', () => { top={2} left={3} y={d => d} - xScale={d => d} - yScale={yScale} - color={d => d} + xScale={scale} + yScale={scale} + color={d => d.toString()} keys={[]} />, ); @@ -40,9 +40,9 @@ describe('', () => { top={2} left={3} y={d => d} - xScale={d => d} - yScale={yScale} - color={d => d} + xScale={scale} + yScale={scale} + color={d => d.toString()} keys={[]} />, ); @@ -57,9 +57,9 @@ describe('', () => { top={2} left={3} y={d => d} - xScale={d => d} - yScale={yScale} - color={d => d} + xScale={scale} + yScale={scale} + color={d => d.toString()} keys={[]} />, ); diff --git a/packages/vx-shape/test/Circle.test.tsx b/packages/vx-shape/test/Circle.test.tsx index de53de6dd..bffc52daf 100644 --- a/packages/vx-shape/test/Circle.test.tsx +++ b/packages/vx-shape/test/Circle.test.tsx @@ -20,8 +20,8 @@ describe('', () => { test('it should expose its ref via an innerRef prop', () => { return new Promise(done => { - const refCallback = n => { - expect(n.tagName).toMatch('circle'); + const refCallback = (ref: SVGCircleElement) => { + expect(ref.tagName).toMatch('circle'); done(); }; mount( diff --git a/packages/vx-shape/test/Line.test.tsx b/packages/vx-shape/test/Line.test.tsx index 332552133..c1b7a5b2f 100644 --- a/packages/vx-shape/test/Line.test.tsx +++ b/packages/vx-shape/test/Line.test.tsx @@ -3,7 +3,7 @@ import { shallow, mount } from 'enzyme'; import { Line } from '../src'; -const LineWrapper = restProps => shallow(); +const LineWrapper = (restProps = {}) => shallow(); describe('', () => { test('it should be defined', () => { @@ -20,8 +20,8 @@ describe('', () => { test('it should expose its ref via an innerRef prop', () => { return new Promise(done => { - const refCallback = n => { - expect(n.tagName).toMatch('line'); + const refCallback = (ref: SVGLineElement) => { + expect(ref.tagName).toMatch('line'); done(); }; mount( diff --git a/packages/vx-shape/test/LinePath.test.tsx b/packages/vx-shape/test/LinePath.test.tsx index 5eeae2fba..db02caa82 100644 --- a/packages/vx-shape/test/LinePath.test.tsx +++ b/packages/vx-shape/test/LinePath.test.tsx @@ -3,13 +3,15 @@ import { shallow, mount } from 'enzyme'; import { LinePath } from '../src'; +type Datum = { x: number; y: number }; + const linePathProps = { data: [{ x: 0, y: 0 }, { x: 1, y: 1 }], - x: d => d.x, - y: d => d.y, + x: (d: Datum) => d.x, + y: (d: Datum) => d.y, }; -const LinePathWrapper = restProps => shallow(); +const LinePathWrapper = (restProps = {}) => shallow(); const LinePathChildren = ({ children, ...restProps }) => shallow({children}); @@ -42,8 +44,8 @@ describe('', () => { test('it should expose its ref via an innerRef prop', () => { return new Promise(done => { - const refCallback = n => { - expect(n.tagName).toMatch('path'); + const refCallback = (ref: SVGPathElement) => { + expect(ref.tagName).toMatch('path'); done(); }; mount( diff --git a/packages/vx-shape/test/LineRadial.test.tsx b/packages/vx-shape/test/LineRadial.test.tsx index 82c63f241..c0603bd97 100644 --- a/packages/vx-shape/test/LineRadial.test.tsx +++ b/packages/vx-shape/test/LineRadial.test.tsx @@ -3,13 +3,15 @@ import { shallow, mount } from 'enzyme'; import { LineRadial } from '../src'; +type Datum = { x: number; y: number }; + const LineRadialProps = { data: [{ x: 0, y: 0 }, { x: 1, y: 1 }], - angle: d => d.x, - radius: d => d.y, + angle: (d: Datum) => d.x, + radius: (d: Datum) => d.y, }; -const LineRadialWrapper = restProps => shallow(); +const LineRadialWrapper = (restProps = {}) => shallow(); const LineRadialChildren = ({ children, ...restProps }) => shallow({children}); @@ -42,8 +44,8 @@ describe('', () => { test('it should expose its ref via an innerRef prop', () => { return new Promise(done => { - const refCallback = n => { - expect(n.tagName).toMatch('path'); + const refCallback = (ref: SVGPathElement) => { + expect(ref.tagName).toMatch('path'); done(); }; mount( diff --git a/packages/vx-shape/test/LinkHorizontal.test.tsx b/packages/vx-shape/test/LinkHorizontal.test.tsx index cc53e22a9..4ecb0fd58 100644 --- a/packages/vx-shape/test/LinkHorizontal.test.tsx +++ b/packages/vx-shape/test/LinkHorizontal.test.tsx @@ -14,6 +14,7 @@ const mockHierarchy = hierarchy({ }, ], }); + const link = mockHierarchy.links()[0]; describe('', () => { @@ -23,8 +24,8 @@ describe('', () => { test('it should expose its ref via an innerRef prop', () => { return new Promise(done => { - const refCallback = n => { - expect(n.tagName).toMatch('path'); + const refCallback = (ref: SVGPathElement) => { + expect(ref.tagName).toMatch('path'); done(); }; mount( diff --git a/packages/vx-shape/test/LinkVertical.test.tsx b/packages/vx-shape/test/LinkVertical.test.tsx index 87ebcd804..349dc6296 100644 --- a/packages/vx-shape/test/LinkVertical.test.tsx +++ b/packages/vx-shape/test/LinkVertical.test.tsx @@ -23,8 +23,8 @@ describe('', () => { test('it should expose its ref via an innerRef prop', () => { return new Promise(done => { - const refCallback = n => { - expect(n.tagName).toMatch('path'); + const refCallback = (ref: SVGPathElement) => { + expect(ref.tagName).toMatch('path'); done(); }; mount( diff --git a/packages/vx-shape/test/Pie.test.tsx b/packages/vx-shape/test/Pie.test.tsx index 916f7381e..96294a2a9 100644 --- a/packages/vx-shape/test/Pie.test.tsx +++ b/packages/vx-shape/test/Pie.test.tsx @@ -28,7 +28,7 @@ const browserUsage = [ }, ]; -const PieWrapper = restProps => shallow(); +const PieWrapper = (restProps = {}) => shallow(); const PieChildren = ({ children, ...restProps }) => shallow( @@ -68,6 +68,8 @@ describe('', () => { {({ arcs }) => { expect(arcs[0]).toMatchObject({ value: A, index: 0 }); expect(arcs[1]).toMatchObject({ value: B, index: 1 }); + + return null; }} , ); @@ -78,7 +80,7 @@ describe('', () => { expect(() => PieWrapper({ pieSortValues: 12 })).toThrow(); // eslint-disable-next-line @typescript-eslint/unbound-method expect(console.error).toBeCalled(); - expect((console.error as typeof jest.fn).mock.calls).toHaveLength(2); + expect((console.error as jest.Mock).mock.calls).toHaveLength(2); }); test('it should have the .vx-pie-arcs-group class', () => { diff --git a/packages/vx-shape/test/Polygon.test.tsx b/packages/vx-shape/test/Polygon.test.tsx index ed7e04fe8..73e3caf57 100644 --- a/packages/vx-shape/test/Polygon.test.tsx +++ b/packages/vx-shape/test/Polygon.test.tsx @@ -3,9 +3,13 @@ import { shallow } from 'enzyme'; import { Polygon } from '../src'; -const PolygonWrapper = restProps => shallow(); +const PolygonWrapper = (restProps = {}) => shallow(); const PolygonChildren = ({ children, ...restProps }) => - shallow({children}); + shallow( + + {children} + , + ); describe('', () => { it('should be defined', () => { diff --git a/packages/vx-shape/test/stackOffset.test.ts b/packages/vx-shape/test/stackOffset.test.ts index 3e15b8345..8bc765df7 100644 --- a/packages/vx-shape/test/stackOffset.test.ts +++ b/packages/vx-shape/test/stackOffset.test.ts @@ -12,6 +12,7 @@ describe('STACK_OFFSETS', () => { describe('stackOffset()', () => { test('it should default to d3.stackOffsetNone', () => { + // @ts-ignore allow invalid input const offset = stackOffset('x'); expect(offset).toEqual(STACK_OFFSETS.none); }); diff --git a/packages/vx-shape/test/stackOrder.test.ts b/packages/vx-shape/test/stackOrder.test.ts index 2a5ab59a2..db358ebb1 100644 --- a/packages/vx-shape/test/stackOrder.test.ts +++ b/packages/vx-shape/test/stackOrder.test.ts @@ -12,6 +12,7 @@ describe('STACK_ORDERS', () => { describe('stackOrders()', () => { test('it should default to d3.stackOrderNone', () => { + // @ts-ignore allow invalid input const offset = stackOrder('x'); expect(offset).toEqual(STACK_ORDERS.none); }); From f00bb1a7601e57be5dad68df7a37ece8fa278565 Mon Sep 17 00:00:00 2001 From: Chris Williams Date: Wed, 9 Oct 2019 13:45:39 -0700 Subject: [PATCH 21/22] typescript(vx-shape): more test type fixes --- packages/vx-shape/src/shapes/BarGroup.tsx | 2 +- .../src/shapes/BarGroupHorizontal.tsx | 4 ++-- packages/vx-shape/src/shapes/Polygon.tsx | 2 +- packages/vx-shape/test/Arc.test.tsx | 19 ++++++++++++++--- packages/vx-shape/test/Area.test.tsx | 10 +++++++-- packages/vx-shape/test/AreaClosed.test.tsx | 14 +++++++++---- packages/vx-shape/test/BarGroup.test.tsx | 20 ++++++++++++------ .../vx-shape/test/BarGroupHorizontal.test.tsx | 21 +++++++++++++------ packages/vx-shape/test/LinePath.test.tsx | 8 +++++-- packages/vx-shape/test/LineRadial.test.tsx | 20 +++++++++++------- packages/vx-shape/test/Pie.test.tsx | 17 +++++++++++++-- packages/vx-shape/test/Polygon.test.tsx | 5 +++-- 12 files changed, 103 insertions(+), 39 deletions(-) diff --git a/packages/vx-shape/src/shapes/BarGroup.tsx b/packages/vx-shape/src/shapes/BarGroup.tsx index 45141e688..58266cb92 100644 --- a/packages/vx-shape/src/shapes/BarGroup.tsx +++ b/packages/vx-shape/src/shapes/BarGroup.tsx @@ -69,7 +69,7 @@ export type BarGroupProps = { * * Example: [https://vx-demo.now.sh/bargroup](https://vx-demo.now.sh/bargroup) */ -export default function BarGroupComponent({ +export default function BarGroupComponent({ data, className, top, diff --git a/packages/vx-shape/src/shapes/BarGroupHorizontal.tsx b/packages/vx-shape/src/shapes/BarGroupHorizontal.tsx index b17b337d3..2f5b27e07 100644 --- a/packages/vx-shape/src/shapes/BarGroupHorizontal.tsx +++ b/packages/vx-shape/src/shapes/BarGroupHorizontal.tsx @@ -5,7 +5,7 @@ import Bar from './Bar'; import { BarGroupProps } from './BarGroup'; import { ScaleType, BarGroupHorizontal, $TSFIXME } from '../types'; -type BarGroupHorizontalProps = Pick< +export type BarGroupHorizontalProps = Pick< BarGroupProps, 'data' | 'className' | 'top' | 'left' | 'keys' | 'color' > & { @@ -25,7 +25,7 @@ type BarGroupHorizontalProps = Pick< children?: (barGroups: BarGroupHorizontal[]) => React.ReactNode; }; -export default function BarGroupHorizontalComponent({ +export default function BarGroupHorizontalComponent({ data, className, top, diff --git a/packages/vx-shape/src/shapes/Polygon.tsx b/packages/vx-shape/src/shapes/Polygon.tsx index 85548771c..bc5df4427 100644 --- a/packages/vx-shape/src/shapes/Polygon.tsx +++ b/packages/vx-shape/src/shapes/Polygon.tsx @@ -36,7 +36,7 @@ export const getPoints = ({ }), ); -type PolygonProps = { +export type PolygonProps = { /** Number of polygon sides. */ sides: number; /** Size of the shape. */ diff --git a/packages/vx-shape/test/Arc.test.tsx b/packages/vx-shape/test/Arc.test.tsx index 80cbf11a0..360fd05b7 100644 --- a/packages/vx-shape/test/Arc.test.tsx +++ b/packages/vx-shape/test/Arc.test.tsx @@ -2,8 +2,21 @@ import React from 'react'; import { shallow, mount } from 'enzyme'; import { Arc } from '../src'; - -const browserUsage = [ +import { ArcProps } from '../src/shapes/Arc'; + +interface Datum { + date: string; + 'Google Chrome': string; + 'Internet Explorer': string; + Firefox: string; + Safari: string; + 'Microsoft Edge': string; + Opera: string; + Mozilla: string; + 'Other/Unknown': string; +} + +const browserUsage: Datum[] = [ { date: '2015 Jun 15', 'Google Chrome': '48.09', @@ -30,7 +43,7 @@ const browserUsage = [ const ArcWrapper = (overrideProps = {}) => shallow(); -const ArcChildren = ({ children, ...restProps }) => +const ArcChildren = ({ children, ...restProps }: Partial>) => shallow( {children} diff --git a/packages/vx-shape/test/Area.test.tsx b/packages/vx-shape/test/Area.test.tsx index 520f250bc..26071e0b2 100644 --- a/packages/vx-shape/test/Area.test.tsx +++ b/packages/vx-shape/test/Area.test.tsx @@ -2,14 +2,20 @@ import React from 'react'; import { shallow, mount } from 'enzyme'; import { Area } from '../src'; +import { AreaProps } from '../src/shapes/Area'; -const fakeData = [ +interface Datum { + x: Date; + y: number; +} + +const fakeData: Datum[] = [ { x: new Date('2017-01-01'), y: 5 }, { x: new Date('2017-01-02'), y: 5 }, { x: new Date('2017-01-03'), y: 5 }, ]; -const AreaChildren = ({ children, ...restProps }) => +const AreaChildren = ({ children, ...restProps }: Partial>) => shallow( {children} diff --git a/packages/vx-shape/test/AreaClosed.test.tsx b/packages/vx-shape/test/AreaClosed.test.tsx index a8fbca849..6657d009a 100644 --- a/packages/vx-shape/test/AreaClosed.test.tsx +++ b/packages/vx-shape/test/AreaClosed.test.tsx @@ -2,8 +2,14 @@ import React from 'react'; import { shallow, mount } from 'enzyme'; import { AreaClosed } from '../src'; +import { AreaClosedProps } from '../src/shapes/AreaClosed'; -const data = [ +interface Datum { + x: Date; + y: number; +} + +const data: Datum[] = [ { x: new Date('2017-01-01'), y: 5 }, { x: new Date('2017-01-02'), y: 5 }, { x: new Date('2017-01-03'), y: 5 }, @@ -23,7 +29,7 @@ const y = () => yScale(); const AreaClosedWrapper = (restProps = {}) => shallow(); -const AreaClosedChildren = ({ children, ...restProps }) => +const AreaClosedChildren = ({ children, ...restProps }: Partial>) => shallow( {children} @@ -41,8 +47,8 @@ describe('', () => { test('it should expose its ref via an innerRef prop', () => { return new Promise(done => { - const refCallback = n => { - expect(n.tagName).toMatch('path'); + const refCallback = (ref: SVGPathElement) => { + expect(ref.tagName).toMatch('path'); done(); }; mount( diff --git a/packages/vx-shape/test/BarGroup.test.tsx b/packages/vx-shape/test/BarGroup.test.tsx index 3b02f4cb1..6cbef67b0 100644 --- a/packages/vx-shape/test/BarGroup.test.tsx +++ b/packages/vx-shape/test/BarGroup.test.tsx @@ -2,8 +2,16 @@ import React from 'react'; import { shallow } from 'enzyme'; import { BarGroup } from '../src'; +import { BarGroupProps } from '../src/shapes/BarGroup'; -const data = [ +interface Datum { + date: Date; + 'New York': string; + 'San Francisco': string; + Austin: string; +} + +const data: Datum[] = [ { date: new Date(), 'New York': '63.4', @@ -18,22 +26,22 @@ const data = [ }, ]; -const x0 = d => d.date; +const x0 = () => 5; const x0Scale = () => 2; x0Scale.bandwidth = () => 10; x0Scale.domain = () => [0, 100] as [number, number]; x0Scale.range = () => [0, 100] as [number, number]; -const x1Scale = d => d; +const x1Scale = () => 5; x1Scale.bandwidth = () => 2; x1Scale.domain = () => [0, 100] as [number, number]; x1Scale.range = () => [0, 100] as [number, number]; -const yScale = d => d; +const yScale = () => 5; yScale.domain = () => [0, 100] as [number, number]; yScale.range = () => [0, 100] as [number, number]; -const color = d => d; +const color = () => 'skyblue'; const keys = ['New York', 'San Francisco', 'Austin']; const height = 1; @@ -52,7 +60,7 @@ const BarGroupWrapper = (restProps = {}) => />, ); -const BarGroupChildren = ({ children, ...restProps }) => +const BarGroupChildren = ({ children, ...restProps }: Partial>) => shallow( d.date; + +const y0 = () => 1; const y0Scale = () => 2; y0Scale.bandwidth = () => 10; y0Scale.domain = () => [0, 100] as [number, number]; y0Scale.range = () => [0, 100] as [number, number]; -const y1Scale = d => d; +const y1Scale = () => 1; y1Scale.bandwidth = () => 2; y1Scale.domain = () => [0, 100] as [number, number]; y1Scale.range = () => [0, 100] as [number, number]; -const xScale = d => d; +const xScale = (d: Datum) => 5; xScale.domain = () => [0, 100] as [number, number]; xScale.range = () => [0, 100] as [number, number]; -const color = d => d; +const color = () => 'violet'; const keys = ['New York', 'San Francisco', 'Austin']; const width = 1; @@ -48,7 +57,7 @@ const BarGroupWrapper = (restProps = {}) => />, ); -const BarGroupChildren = ({ children, ...restProps }) => +const BarGroupChildren = ({ children, ...restProps }: Partial>) => shallow( shallow(); -const LinePathChildren = ({ children, ...restProps }) => +const LinePathChildren = ({ children, ...restProps }: Partial>) => shallow({children}); describe('', () => { diff --git a/packages/vx-shape/test/LineRadial.test.tsx b/packages/vx-shape/test/LineRadial.test.tsx index c0603bd97..ad84b3d3d 100644 --- a/packages/vx-shape/test/LineRadial.test.tsx +++ b/packages/vx-shape/test/LineRadial.test.tsx @@ -2,17 +2,21 @@ import React from 'react'; import { shallow, mount } from 'enzyme'; import { LineRadial } from '../src'; +import { LineRadialProps } from '../src/shapes/LineRadial'; -type Datum = { x: number; y: number }; +interface Datum { + x: number; + y: number; +} -const LineRadialProps = { +const mockProps = { data: [{ x: 0, y: 0 }, { x: 1, y: 1 }], angle: (d: Datum) => d.x, radius: (d: Datum) => d.y, }; const LineRadialWrapper = (restProps = {}) => shallow(); -const LineRadialChildren = ({ children, ...restProps }) => +const LineRadialChildren = ({ children, ...restProps }: Partial>) => shallow({children}); describe('', () => { @@ -21,22 +25,22 @@ describe('', () => { }); test('it should have the .vx-line-radial class', () => { - expect(LineRadialWrapper(LineRadialProps).prop('className')).toBe('vx-line-radial'); + expect(LineRadialWrapper(mockProps).prop('className')).toBe('vx-line-radial'); }); test('it should contain paths', () => { - expect(LineRadialWrapper(LineRadialProps).find('path').length).toBeGreaterThan(0); + expect(LineRadialWrapper(mockProps).find('path').length).toBeGreaterThan(0); }); test('it should take a children as function prop', () => { const fn = jest.fn(); - LineRadialChildren({ children: fn, ...LineRadialProps }); + LineRadialChildren({ children: fn, ...mockProps }); expect(fn).toHaveBeenCalled(); }); test('it should call children function with { path }', () => { const fn = jest.fn(); - LineRadialChildren({ children: fn, ...LineRadialProps }); + LineRadialChildren({ children: fn, ...mockProps }); const args = fn.mock.calls[0][0]; const keys = Object.keys(args); expect(keys.includes('path')).toEqual(true); @@ -50,7 +54,7 @@ describe('', () => { }; mount( - + , ); }); diff --git a/packages/vx-shape/test/Pie.test.tsx b/packages/vx-shape/test/Pie.test.tsx index 96294a2a9..1f592d23e 100644 --- a/packages/vx-shape/test/Pie.test.tsx +++ b/packages/vx-shape/test/Pie.test.tsx @@ -2,8 +2,21 @@ import React from 'react'; import { shallow } from 'enzyme'; import { Pie } from '../src'; +import { PieProps } from '../src/shapes/Pie'; -const browserUsage = [ +interface Datum { + date: string; + 'Google Chrome': string; + 'Internet Explorer': string; + Firefox: string; + Safari: string; + 'Microsoft Edge': string; + Opera: string; + Mozilla: string; + 'Other/Unknown': string; +} + +const browserUsage: Datum[] = [ { date: '2015 Jun 15', 'Google Chrome': '48.09', @@ -29,7 +42,7 @@ const browserUsage = [ ]; const PieWrapper = (restProps = {}) => shallow(); -const PieChildren = ({ children, ...restProps }) => +const PieChildren = ({ children, ...restProps }: Partial>) => shallow( {children} diff --git a/packages/vx-shape/test/Polygon.test.tsx b/packages/vx-shape/test/Polygon.test.tsx index 73e3caf57..6fa89d84a 100644 --- a/packages/vx-shape/test/Polygon.test.tsx +++ b/packages/vx-shape/test/Polygon.test.tsx @@ -2,9 +2,10 @@ import React from 'react'; import { shallow } from 'enzyme'; import { Polygon } from '../src'; +import { PolygonProps } from '../src/shapes/Polygon'; const PolygonWrapper = (restProps = {}) => shallow(); -const PolygonChildren = ({ children, ...restProps }) => +const PolygonChildren = ({ children, ...restProps }: Partial) => shallow( {children} @@ -19,7 +20,7 @@ describe('', () => { it('should render an octagon', () => { const wrapper = PolygonWrapper({ sides: 8, size: 25 }); const polygon = wrapper.find('polygon'); - const points = polygon.props().points.split(' '); + const points = polygon.props().points!.split(' '); expect(points).toHaveLength(8); }); From 4ee5a3dbe95b44640d7ee891170aea6f20e40165 Mon Sep 17 00:00:00 2001 From: Chris Williams Date: Wed, 9 Oct 2019 14:03:35 -0700 Subject: [PATCH 22/22] typescript(vx-shape): fix Arc return signature + types --- packages/vx-shape/src/shapes/Arc.tsx | 5 +-- packages/vx-shape/test/Arc.test.tsx | 61 ++++++++++------------------ 2 files changed, 23 insertions(+), 43 deletions(-) diff --git a/packages/vx-shape/src/shapes/Arc.tsx b/packages/vx-shape/src/shapes/Arc.tsx index e31ddf268..8193337c9 100644 --- a/packages/vx-shape/src/shapes/Arc.tsx +++ b/packages/vx-shape/src/shapes/Arc.tsx @@ -54,10 +54,9 @@ export default function Arc({ if (padRadius != null) setNumOrAccessor(arc.padRadius, padRadius); if (children) return <>{children({ path: arc })}; + if (!data) return null; return ( - data && ( - - ) + ); } diff --git a/packages/vx-shape/test/Arc.test.tsx b/packages/vx-shape/test/Arc.test.tsx index 360fd05b7..1b9894fab 100644 --- a/packages/vx-shape/test/Arc.test.tsx +++ b/packages/vx-shape/test/Arc.test.tsx @@ -5,47 +5,28 @@ import { Arc } from '../src'; import { ArcProps } from '../src/shapes/Arc'; interface Datum { - date: string; - 'Google Chrome': string; - 'Internet Explorer': string; - Firefox: string; - Safari: string; - 'Microsoft Edge': string; - Opera: string; - Mozilla: string; - 'Other/Unknown': string; + data: number; + value: number; + index: number; + startAngle: number; + endAngle: number; + padAngle: number; } -const browserUsage: Datum[] = [ - { - date: '2015 Jun 15', - 'Google Chrome': '48.09', - 'Internet Explorer': '24.14', - Firefox: '18.82', - Safari: '7.46', - 'Microsoft Edge': '0.03', - Opera: '1.32', - Mozilla: '0.12', - 'Other/Unknown': '0.01', - }, - { - date: '2015 Jun 16', - 'Google Chrome': '48', - 'Internet Explorer': '24.19', - Firefox: '18.96', - Safari: '7.36', - 'Microsoft Edge': '0.03', - Opera: '1.32', - Mozilla: '0.12', - 'Other/Unknown': '0.01', - }, -]; - -const ArcWrapper = (overrideProps = {}) => shallow(); +const data: Datum = { + data: 1, + value: 1, + index: 6, + startAngle: 6.050474740247008, + endAngle: 6.166830023713296, + padAngle: 0, +}; + +const ArcWrapper = (overrideProps = {}) => shallow(); const ArcChildren = ({ children, ...restProps }: Partial>) => shallow( - + {children} , ); @@ -207,18 +188,18 @@ describe('', () => { const fn = jest.fn(); ArcChildren({ children: fn }); const args = fn.mock.calls[0][0]; - expect(typeof args.path(browserUsage)).toBe('string'); + expect(typeof args.path(data)).toBe('string'); }); test('it should expose its ref via an innerRef prop', () => { return new Promise(done => { - const refCallback = n => { - expect(n.tagName).toMatch('path'); + const refCallback = (ref: SVGPathElement) => { + expect(ref.tagName).toMatch('path'); done(); }; mount( - + , ); });