From 860e5d90bae61ab678aae2cf988ed85921988b66 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabian=20G=C3=BCndel?= Date: Sat, 21 Apr 2018 18:16:20 +0200 Subject: [PATCH 1/2] add prettier config --- .prettierignore | 13 +++++++++++++ package.json | 41 ++++++++++++++++++++++++++++++++++------- 2 files changed, 47 insertions(+), 7 deletions(-) create mode 100644 .prettierignore diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 000000000..a9db46d9a --- /dev/null +++ b/.prettierignore @@ -0,0 +1,13 @@ +.DS_Store +node_modules +build +bundle.js +test/tmp +*.log +*.cache +/.eslintcache +.next +coverage +package-lock.json +npm-shrinkwrap.json +yarn.lock diff --git a/package.json b/package.json index 17f80ac8b..abd67ce1c 100644 --- a/package.json +++ b/package.json @@ -6,25 +6,52 @@ "scripts": { "test": "lerna bootstrap && lerna exec npm run test", "docs": "node ./scripts/docs/index.js", - "prepare-release": - "git checkout master && git pull --rebase origin master && npm run docs && lerna updated", - "release": "npm run prepare-release && lerna publish --exact" + "prepare-release": "git checkout master && git pull --rebase origin master && npm run docs && lerna updated", + "release": "npm run prepare-release && lerna publish --exact", + "format": "prettier \"{packages,scripts}/**/*.js\" --write", + "precommit": "lint-staged" + }, + "prettier": { + "printWidth": 100, + "singleQuote": true + }, + "lint-staged": { + "*.js": [ + "prettier --write", + "git add" + ] }, "jest": { - "projects": ["/packages/*"], + "projects": [ + "/packages/*" + ], "collectCoverage": true, "coverageDirectory": "/coverage", - "coveragePathIgnorePatterns": ["/node_modules/"], - "coverageReporters": ["text", "lcov"] + "coveragePathIgnorePatterns": [ + "/node_modules/" + ], + "coverageReporters": [ + "text", + "lcov" + ] }, - "keywords": ["react", "d3", "visualization", "vx", "charts"], + "keywords": [ + "react", + "d3", + "visualization", + "vx", + "charts" + ], "author": "@hshoff", "license": "MIT", "devDependencies": { "babel-jest": "^20.0.3", "coveralls": "^2.13.1", + "husky": "^0.14.3", "jest": "^20.0.3", "lerna": "2.1.2", + "lint-staged": "^7.0.4", + "prettier": "^1.12.1", "react": "^15.0.0-0 || ^16.0.0-0", "react-dom": "^15.0.0-0 || ^16.0.0-0", "regenerator-runtime": "^0.10.5" From ae02448a320c024f613809d837b8ea506186c3c4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabian=20G=C3=BCndel?= Date: Sat, 21 Apr 2018 18:28:10 +0200 Subject: [PATCH 2/2] format codebase --- .../vx-annotation/src/annotations/LinePath.js | 12 +- .../test/LinePathAnnotation.test.js | 87 +- packages/vx-annotation/test/enzyme-setup.js | 2 +- packages/vx-axis/src/axis/Axis.js | 85 +- packages/vx-axis/src/axis/AxisBottom.js | 6 +- packages/vx-axis/src/axis/AxisLeft.js | 6 +- packages/vx-axis/src/axis/AxisRight.js | 6 +- packages/vx-axis/src/axis/AxisTop.js | 6 +- packages/vx-axis/src/constants/orientation.js | 4 +- packages/vx-axis/src/utils/labelTransform.js | 14 +- packages/vx-axis/test/Axis.test.js | 105 +- packages/vx-axis/test/AxisBottom.test.js | 4 +- packages/vx-axis/test/AxisLeft.test.js | 4 +- packages/vx-axis/test/AxisRight.test.js | 4 +- packages/vx-axis/test/AxisTop.test.js | 6 +- packages/vx-axis/test/enzyme-setup.js | 2 +- .../src/enhancers/withBoundingRects.js | 27 +- packages/vx-bounds/src/index.js | 5 +- packages/vx-bounds/test/enzyme-setup.js | 2 +- .../vx-bounds/test/withBoundingRects.test.js | 4 +- packages/vx-boxplot/src/boxplots/BoxPlot.js | 5 +- packages/vx-boxplot/test/enzyme-setup.js | 2 +- packages/vx-brush/src/brushes/BoxBrush.js | 16 +- packages/vx-brush/src/enhancers/withBrush.js | 20 +- .../vx-brush/src/utils/constrainToRegion.js | 4 +- packages/vx-brush/test/BoxBrush.test.js | 6 +- packages/vx-brush/test/enzyme-setup.js | 2 +- .../src/clip-paths/CircleClipPath.js | 16 +- .../vx-clip-path/src/clip-paths/ClipPath.js | 6 +- .../src/clip-paths/RectClipPath.js | 17 +- packages/vx-clip-path/test/ClipPaths.test.js | 8 +- packages/vx-clip-path/test/enzyme-setup.js | 2 +- packages/vx-curve/src/index.js | 2 +- packages/vx-curve/test/curve.test.js | 74 +- packages/vx-curve/test/enzyme-setup.js | 2 +- .../vx-demo/components/charts/BrushChart.js | 24 +- .../components/charts/MultiSeriesLine.js | 185 +- .../components/charts/SimpleAreaChart.js | 13 +- .../vx-demo/components/charts/SimpleBar.js | 29 +- .../components/charts/SimpleLineChart.js | 38 +- .../charts/SimpleLineWithGlyphsChart.js | 23 +- .../components/charts/StackedAreaChart.js | 92 +- .../vx-demo/components/charts/VoronoiChart.js | 76 +- .../charts/flame/util/parseFoldedStack.js | 2 +- .../components/codeblocks/BrushChartCode.js | 2 +- .../components/codeblocks/Codeblock.js | 12 +- .../codeblocks/MultiSeriesLineCode.js | 2 +- .../components/codeblocks/SimpleAreaCode.js | 2 +- .../components/codeblocks/SimpleBarCode.js | 2 +- .../components/codeblocks/SimpleLineCode.js | 2 +- .../codeblocks/SimpleLineGlyphCode.js | 2 +- .../components/codeblocks/StackedAreaCode.js | 2 +- packages/vx-demo/components/footer.js | 10 +- packages/vx-demo/components/gallery.js | 345 +-- packages/vx-demo/components/logo.js | 2 +- packages/vx-demo/components/meta.js | 130 +- packages/vx-demo/components/nav.js | 16 +- packages/vx-demo/components/page.js | 6 +- packages/vx-demo/components/show.js | 10 +- packages/vx-demo/components/tiles/area.js | 41 +- packages/vx-demo/components/tiles/axis.js | 49 +- packages/vx-demo/components/tiles/bargroup.js | 40 +- packages/vx-demo/components/tiles/bars.js | 13 +- packages/vx-demo/components/tiles/barstack.js | 55 +- .../components/tiles/barstackhorizontal.js | 37 +- packages/vx-demo/components/tiles/boxplot.js | 69 +- .../vx-demo/components/tiles/dendrogram.js | 103 +- packages/vx-demo/components/tiles/dots.js | 22 +- packages/vx-demo/components/tiles/drag-i.js | 36 +- packages/vx-demo/components/tiles/drag-ii.js | 26 +- .../vx-demo/components/tiles/geo-mercator.js | 37 +- .../vx-demo/components/tiles/gradients.js | 13 +- packages/vx-demo/components/tiles/heatmap.js | 25 +- packages/vx-demo/components/tiles/legends.js | 113 +- .../vx-demo/components/tiles/lineradial.js | 27 +- packages/vx-demo/components/tiles/lines.js | 13 +- .../vx-demo/components/tiles/linkTypes.js | 6 +- .../vx-demo/components/tiles/multiline.js | 38 +- packages/vx-demo/components/tiles/network.js | 10 +- packages/vx-demo/components/tiles/pack.js | 23 +- packages/vx-demo/components/tiles/patterns.js | 103 +- packages/vx-demo/components/tiles/pie.js | 22 +- packages/vx-demo/components/tiles/radar.js | 38 +- .../vx-demo/components/tiles/responsive.js | 6 +- packages/vx-demo/components/tiles/stacked.js | 33 +- .../vx-demo/components/tiles/streamgraph.js | 79 +- packages/vx-demo/components/tiles/tree.js | 58 +- packages/vx-demo/components/tiles/treemap.js | 15 +- packages/vx-demo/components/tiles/voronoi.js | 57 +- packages/vx-demo/components/util/drawData.js | 6 +- packages/vx-demo/components/util/round.js | 2 +- .../components/util/sillyColorScale.js | 6 +- packages/vx-demo/pages/areas.js | 2 +- packages/vx-demo/pages/axis.js | 2 +- packages/vx-demo/pages/bargroup.js | 10 +- packages/vx-demo/pages/bars.js | 10 +- packages/vx-demo/pages/barstackhorizontal.js | 2 +- packages/vx-demo/pages/boxplot.js | 7 +- packages/vx-demo/pages/dendrograms.js | 6 +- packages/vx-demo/pages/docs.js | 14 +- packages/vx-demo/pages/gallery.js | 2 +- packages/vx-demo/pages/geo-mercator.js | 6 +- packages/vx-demo/pages/glyphs.js | 20 +- packages/vx-demo/pages/gradients.js | 2 +- packages/vx-demo/pages/heatmaps.js | 6 +- packages/vx-demo/pages/home.js | 44 +- packages/vx-demo/pages/legends.js | 2 +- packages/vx-demo/pages/lineradial.js | 4 +- packages/vx-demo/pages/lines.js | 4 +- packages/vx-demo/pages/linkTypes.js | 6 +- packages/vx-demo/pages/network.js | 4 +- packages/vx-demo/pages/patterns.js | 20 +- packages/vx-demo/pages/pies.js | 2 +- packages/vx-demo/pages/stacked-areas.js | 20 +- packages/vx-demo/pages/streamgraph.js | 2 +- packages/vx-demo/pages/text.js | 185 +- packages/vx-demo/pages/trees.js | 6 +- packages/vx-demo/pages/voronoi.js | 6 +- packages/vx-demo/test/home.test.js | 6 +- packages/vx-drag/src/Drag.js | 14 +- packages/vx-drag/test/Drag.test.js | 6 +- packages/vx-drag/test/enzyme-setup.js | 2 +- packages/vx-event/src/localPoint.js | 4 +- packages/vx-event/src/touchPoint.js | 4 +- packages/vx-event/test/enzyme-setup.js | 2 +- packages/vx-event/test/localPoint.test.js | 6 +- packages/vx-geo/src/graticule/Graticule.js | 30 +- packages/vx-geo/src/projections/Projection.js | 33 +- packages/vx-geo/test/Projection.test.js | 30 +- packages/vx-geo/test/enzyme-setup.js | 2 +- packages/vx-glyph/src/glyphs/Circle.js | 9 +- packages/vx-glyph/src/glyphs/Cross.js | 9 +- packages/vx-glyph/src/glyphs/Diamond.js | 9 +- packages/vx-glyph/src/glyphs/Glyph.js | 13 +- packages/vx-glyph/src/glyphs/Square.js | 9 +- packages/vx-glyph/src/glyphs/Star.js | 15 +- packages/vx-glyph/src/glyphs/Triangle.js | 9 +- packages/vx-glyph/src/glyphs/Wye.js | 15 +- packages/vx-glyph/test/Dot.test.js | 6 +- packages/vx-glyph/test/Glyph.test.js | 6 +- packages/vx-glyph/test/enzyme-setup.js | 2 +- .../src/gradients/DarkgreenGreen.js | 12 +- .../src/gradients/LightgreenGreen.js | 12 +- .../src/gradients/LinearGradient.js | 16 +- .../vx-gradient/src/gradients/OrangeRed.js | 12 +- .../vx-gradient/src/gradients/PinkBlue.js | 12 +- packages/vx-gradient/src/gradients/PinkRed.js | 12 +- .../vx-gradient/src/gradients/PurpleOrange.js | 12 +- .../vx-gradient/src/gradients/PurpleRed.js | 12 +- .../vx-gradient/src/gradients/PurpleTeal.js | 12 +- .../src/gradients/RadialGradient.js | 16 +- .../vx-gradient/src/gradients/SteelPurple.js | 12 +- .../vx-gradient/src/gradients/TealBlue.js | 12 +- packages/vx-gradient/test/Gradients.test.js | 176 +- .../vx-gradient/test/LinearGradient.test.js | 23 +- .../vx-gradient/test/RadialGradient.test.js | 23 +- packages/vx-gradient/test/enzyme-setup.js | 2 +- packages/vx-grid/src/grids/Columns.js | 10 +- packages/vx-grid/src/grids/Grid.js | 2 +- packages/vx-grid/src/grids/Rows.js | 4 +- packages/vx-grid/src/index.js | 2 +- packages/vx-grid/test/Columns.test.js | 6 +- packages/vx-grid/test/Grid.test.js | 6 +- packages/vx-grid/test/Rows.test.js | 6 +- packages/vx-grid/test/enzyme-setup.js | 2 +- packages/vx-group/src/Group.js | 9 +- packages/vx-group/test/Group.test.js | 10 +- packages/vx-group/test/enzyme-setup.js | 2 +- packages/vx-heatmap/src/heatmaps/circle.js | 9 +- packages/vx-heatmap/src/heatmaps/rect.js | 6 +- .../vx-heatmap/test/HeatmapCircle.test.js | 6 +- packages/vx-heatmap/test/HeatmapRect.test.js | 6 +- packages/vx-heatmap/test/enzyme-setup.js | 2 +- .../vx-hierarchy/src/HierarchyDefaultLink.js | 2 +- .../vx-hierarchy/src/HierarchyDefaultNode.js | 2 +- .../vx-hierarchy/src/hierarchies/Cluster.js | 22 +- packages/vx-hierarchy/src/hierarchies/Pack.js | 4 +- .../vx-hierarchy/src/hierarchies/Partition.js | 14 +- packages/vx-hierarchy/src/hierarchies/Tree.js | 16 +- .../vx-hierarchy/src/hierarchies/Treemap.js | 4 +- packages/vx-hierarchy/src/index.js | 8 +- packages/vx-hierarchy/test/Cluster.test.js | 9 +- packages/vx-hierarchy/test/Defaults.test.js | 10 +- packages/vx-hierarchy/test/Tree.test.js | 9 +- packages/vx-hierarchy/test/enzyme-setup.js | 2 +- packages/vx-legend/src/legends/Legend.js | 27 +- packages/vx-legend/src/legends/LegendItem.js | 12 +- packages/vx-legend/src/legends/LegendLabel.js | 14 +- packages/vx-legend/src/legends/LegendShape.js | 6 +- packages/vx-legend/src/legends/Linear.js | 4 +- packages/vx-legend/src/legends/Ordinal.js | 4 +- packages/vx-legend/src/legends/Quantile.js | 12 +- packages/vx-legend/src/legends/Size.js | 2 +- packages/vx-legend/src/legends/Threshold.js | 18 +- packages/vx-legend/src/shapes/Rect.js | 2 +- packages/vx-legend/src/util/renderShape.js | 4 +- packages/vx-legend/test/Legend.test.js | 24 +- packages/vx-legend/test/LegendLinear.test.js | 4 +- packages/vx-legend/test/LegendOrdinal.test.js | 4 +- .../vx-legend/test/LegendQuantile.test.js | 4 +- packages/vx-legend/test/LegendSize.test.js | 4 +- .../vx-legend/test/LegendThreshold.test.js | 4 +- packages/vx-legend/test/enzyme-setup.js | 2 +- packages/vx-marker/src/markers/Marker.js | 6 +- packages/vx-marker/test/Marker.test.js | 6 +- packages/vx-marker/test/enzyme-setup.js | 2 +- .../vx-mock-data/src/generators/genBin.js | 25 +- .../vx-mock-data/src/generators/genBins.js | 16 +- .../src/generators/genDateValue.js | 14 +- .../src/generators/genRandomNormalPoints.js | 6 +- .../vx-mock-data/src/generators/genStats.js | 23 +- packages/vx-mock-data/src/index.js | 4 +- packages/vx-mock-data/src/mocks/exoplanets.js | 2116 ++++++++--------- .../vx-mock-data/src/mocks/lesMiserables.js | 666 +++--- packages/vx-mock-data/src/mocks/planets.js | 20 +- .../vx-mock-data/src/mocks/shakespeare.js | 746 +++--- packages/vx-mock-data/test/appleStock.test.js | 22 +- .../vx-mock-data/test/browserUsage.test.js | 34 +- .../vx-mock-data/test/cityTemperature.test.js | 24 +- packages/vx-mock-data/test/enzyme-setup.js | 2 +- packages/vx-mock-data/test/genBin.test.js | 30 +- packages/vx-mock-data/test/genBins.test.js | 30 +- .../vx-mock-data/test/genDateValue.test.js | 24 +- .../test/genRandomNormalPoints.test.js | 44 +- .../vx-mock-data/test/groupDateValue.test.js | 20 +- .../vx-mock-data/test/letterFrequency.test.js | 22 +- packages/vx-network/src/Graph.js | 6 +- packages/vx-network/src/Links.js | 11 +- packages/vx-network/src/Nodes.js | 6 +- packages/vx-network/test/Graph.test.js | 6 +- packages/vx-network/test/enzyme-setup.js | 2 +- packages/vx-pattern/src/constants/index.js | 4 +- packages/vx-pattern/src/patterns/Circles.js | 48 +- packages/vx-pattern/src/patterns/Hexagons.js | 11 +- packages/vx-pattern/src/patterns/Lines.js | 32 +- packages/vx-pattern/src/patterns/Path.js | 20 +- packages/vx-pattern/src/patterns/Pattern.js | 21 +- packages/vx-pattern/src/patterns/Waves.js | 17 +- packages/vx-pattern/test/Pattern.test.js | 48 +- .../vx-pattern/test/PatternCircles.test.js | 97 +- .../vx-pattern/test/PatternHexagons.test.js | 49 +- packages/vx-pattern/test/PatternLines.test.js | 74 +- packages/vx-pattern/test/PatternPath.test.js | 74 +- packages/vx-pattern/test/PatternWaves.test.js | 49 +- packages/vx-pattern/test/enzyme-setup.js | 2 +- packages/vx-point/src/Point.js | 2 +- packages/vx-point/test/enzyme-setup.js | 2 +- packages/vx-point/test/point.test.js | 38 +- .../src/components/ParentSize.js | 16 +- .../vx-responsive/src/components/ScaleSVG.js | 18 +- .../src/enhancers/withParentSize.js | 33 +- .../src/enhancers/withScreenSize.js | 28 +- packages/vx-responsive/src/index.js | 8 +- packages/vx-responsive/test/ScaleSVG.test.js | 6 +- packages/vx-responsive/test/enzyme-setup.js | 2 +- .../vx-responsive/test/withParentSize.test.js | 9 +- .../vx-responsive/test/withScreenSize.test.js | 6 +- packages/vx-scale/src/scales/band.js | 4 +- packages/vx-scale/src/scales/linear.js | 10 +- packages/vx-scale/src/scales/log.js | 11 +- packages/vx-scale/src/scales/ordinal.js | 8 +- packages/vx-scale/src/scales/point.js | 11 +- packages/vx-scale/src/scales/power.js | 11 +- packages/vx-scale/src/scales/quantile.js | 7 +- packages/vx-scale/src/scales/quantize.js | 10 +- packages/vx-scale/src/scales/threshold.js | 7 +- packages/vx-scale/src/scales/time.js | 12 +- packages/vx-scale/src/scales/utc.js | 12 +- packages/vx-scale/src/util/updateScale.js | 4 +- packages/vx-scale/test/enzyme-setup.js | 2 +- packages/vx-scale/test/scaleBand.test.js | 44 +- packages/vx-scale/test/scaleLinear.test.js | 6 +- packages/vx-scale/test/scaleLog.test.js | 6 +- packages/vx-scale/test/scaleOrdinal.test.js | 6 +- packages/vx-scale/test/scalePoint.test.js | 6 +- packages/vx-scale/test/scalePower.test.js | 27 +- packages/vx-scale/test/scaleQuantile.test.js | 22 +- packages/vx-scale/test/scaleQuantize.test.js | 22 +- packages/vx-scale/test/scaleThreshold.test.js | 22 +- packages/vx-scale/test/scaleTime.test.js | 6 +- packages/vx-scale/test/scaleUtc.test.js | 6 +- packages/vx-scale/test/updateScale.test.js | 36 +- packages/vx-shape/src/index.js | 47 +- packages/vx-shape/src/shapes/Arc.js | 6 +- packages/vx-shape/src/shapes/Area.js | 4 +- packages/vx-shape/src/shapes/AreaClosed.js | 2 +- packages/vx-shape/src/shapes/AreaStack.js | 5 +- packages/vx-shape/src/shapes/Bar.js | 4 +- packages/vx-shape/src/shapes/BarGroup.js | 65 +- packages/vx-shape/src/shapes/BarStack.js | 4 +- .../vx-shape/src/shapes/BarStackHorizontal.js | 4 +- packages/vx-shape/src/shapes/Line.js | 2 +- packages/vx-shape/src/shapes/LinePath.js | 6 +- packages/vx-shape/src/shapes/LineRadial.js | 2 +- packages/vx-shape/src/shapes/Pie.js | 2 +- packages/vx-shape/src/shapes/Stack.js | 2 +- packages/vx-shape/src/util/stackOffset.js | 4 +- packages/vx-shape/src/util/stackOrder.js | 4 +- packages/vx-shape/test/Arc.test.js | 3 +- packages/vx-shape/test/Area.test.js | 14 +- packages/vx-shape/test/AreaClosed.test.js | 10 +- packages/vx-shape/test/AreaStack.test.js | 6 +- packages/vx-shape/test/BarGroup.test.js | 40 +- packages/vx-shape/test/BarStack.test.js | 6 +- .../vx-shape/test/BarStackHorizontal.test.js | 6 +- packages/vx-shape/test/Line.test.js | 3 +- packages/vx-shape/test/LinePath.test.js | 7 +- packages/vx-shape/test/LineRadial.test.js | 7 +- packages/vx-shape/test/LinkHorizontal.test.js | 11 +- packages/vx-shape/test/LinkRadial.test.js | 6 +- packages/vx-shape/test/LinkVertical.test.js | 11 +- packages/vx-shape/test/Pie.test.js | 3 +- packages/vx-shape/test/enzyme-setup.js | 2 +- packages/vx-shape/test/stackOffset.test.js | 6 +- packages/vx-stats/src/boxplot/BoxPlot.js | 23 +- packages/vx-stats/src/util/computeStats.js | 25 +- .../vx-stats/src/violinplot/ViolinPlot.js | 12 +- packages/vx-stats/test/BoxPlot.test.js | 10 +- packages/vx-stats/test/ViolinPlot.test.js | 15 +- packages/vx-stats/test/enzyme-setup.js | 2 +- packages/vx-text/src/Text.js | 41 +- packages/vx-text/test/Text.test.js | 8 +- packages/vx-text/test/enzyme-setup.js | 2 +- .../vx-tooltip/src/enhancers/withTooltip.js | 8 +- packages/vx-tooltip/src/tooltips/Tooltip.js | 2 +- .../src/tooltips/TooltipWithBounds.js | 23 +- packages/vx-tooltip/test/enzyme-setup.js | 2 +- .../src/components/VoronoiPolygon.js | 8 +- packages/vx-voronoi/src/voronoi.js | 14 +- .../vx-voronoi/test/VoronoiPolygon.test.js | 4 +- packages/vx-voronoi/test/enzyme-setup.js | 2 +- packages/vx-voronoi/test/voronoi.test.js | 2 +- packages/vx-vx/test/enzyme-setup.js | 2 +- packages/vx-zoom/test/Zoom.test.js | 6 +- packages/vx-zoom/test/enzyme-setup.js | 2 +- scripts/docs/constants.js | 12 +- scripts/docs/index.js | 32 +- 337 files changed, 4127 insertions(+), 5572 deletions(-) diff --git a/packages/vx-annotation/src/annotations/LinePath.js b/packages/vx-annotation/src/annotations/LinePath.js index 99fa8dfed..2d707310a 100644 --- a/packages/vx-annotation/src/annotations/LinePath.js +++ b/packages/vx-annotation/src/annotations/LinePath.js @@ -43,15 +43,11 @@ export default function LinePathAnnotation({ labelFontSize = 10, labelStroke = 'white', labelStrokeWidth = 3, - labelPaintOrder = 'stroke', + labelPaintOrder = 'stroke' }) { const endPoint = points[points.length - 1]; return ( - + - {label && + {label && ( {label} - } + )} ); } diff --git a/packages/vx-annotation/test/LinePathAnnotation.test.js b/packages/vx-annotation/test/LinePathAnnotation.test.js index a8ec87ec8..385ba5832 100644 --- a/packages/vx-annotation/test/LinePathAnnotation.test.js +++ b/packages/vx-annotation/test/LinePathAnnotation.test.js @@ -5,56 +5,63 @@ import { LinePathAnnotation } from '../src'; describe('', () => { test('it should be defined', () => { - expect(LinePathAnnotation).toBeDefined() - }) + expect(LinePathAnnotation).toBeDefined(); + }); test('it should be wrapped with defaults ', () => { - const wrapper = shallow() - expect(wrapper.prop('top')).toEqual(0) - expect(wrapper.prop('left')).toEqual(0) - expect(wrapper.is('.vx-line-path-annotation-group')).toBe(true) - }) + const wrapper = shallow(); + expect(wrapper.prop('top')).toEqual(0); + expect(wrapper.prop('left')).toEqual(0); + expect(wrapper.is('.vx-line-path-annotation-group')).toBe(true); + }); test('it should set wrapper props', () => { - const wrapper = shallow( - - ); - expect(wrapper.prop('top')).toEqual(20) - expect(wrapper.prop('left')).toEqual(300) - }) + const wrapper = shallow(); + expect(wrapper.prop('top')).toEqual(20); + expect(wrapper.prop('left')).toEqual(300); + }); test('it should contain a ', () => { - const wrapper = shallow() - expect(wrapper.find('.vx-line-path-annotation').length).toBe(1) - }) + const wrapper = shallow(); + expect(wrapper.find('.vx-line-path-annotation').length).toBe(1); + }); test('it should pass props to ', () => { - const points = [new Point({x: 0, y: 0})]; - const wrapper = shallow( - - ); + const points = [new Point({ x: 0, y: 0 })]; + const wrapper = shallow(); const linePath = wrapper.find('.vx-line-path-annotation'); - expect(linePath.prop('data')).toBe(points) - expect(linePath.prop('stroke')).toEqual('black') - expect(linePath.prop('strokeWidth')).toEqual(1) - expect(linePath.prop('className')).toEqual('vx-line-path-annotation test') - }) + expect(linePath.prop('data')).toBe(points); + expect(linePath.prop('stroke')).toEqual('black'); + expect(linePath.prop('strokeWidth')).toEqual(1); + expect(linePath.prop('className')).toEqual('vx-line-path-annotation test'); + }); test('it should not render a label if label prop is undefined', () => { - const wrapper = shallow() - expect(wrapper.prop('children').filter(c => !!c).length).toBe(1) - }) + const wrapper = shallow(); + expect(wrapper.prop('children').filter(c => !!c).length).toBe(1); + }); test('it should render a label if label prop is defined', () => { - const points = [new Point({x: 0, y: 0})]; - const wrapper = shallow() - expect(wrapper.prop('children').filter(c => !!c).length).toBe(2) - expect(wrapper.contains(test)).toBe(true) - }) -}) + const points = [new Point({ x: 0, y: 0 })]; + const wrapper = shallow(); + expect(wrapper.prop('children').filter(c => !!c).length).toBe(2); + expect( + wrapper.contains( + + test + + ) + ).toBe(true); + }); +}); diff --git a/packages/vx-annotation/test/enzyme-setup.js b/packages/vx-annotation/test/enzyme-setup.js index acd71d494..fc7b0dce1 100644 --- a/packages/vx-annotation/test/enzyme-setup.js +++ b/packages/vx-annotation/test/enzyme-setup.js @@ -1,4 +1,4 @@ import Enzyme from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; -Enzyme.configure({ adapter: new Adapter() }); \ No newline at end of file +Enzyme.configure({ adapter: new Adapter() }); diff --git a/packages/vx-axis/src/axis/Axis.js b/packages/vx-axis/src/axis/Axis.js index cf6a8630c..371ba7b85 100644 --- a/packages/vx-axis/src/axis/Axis.js +++ b/packages/vx-axis/src/axis/Axis.js @@ -22,12 +22,7 @@ const propTypes = { labelProps: PropTypes.object, left: PropTypes.number, numTicks: PropTypes.number, - orientation: PropTypes.oneOf([ - ORIENT.top, - ORIENT.right, - ORIENT.bottom, - ORIENT.left, - ]), + orientation: PropTypes.oneOf([ORIENT.top, ORIENT.right, ORIENT.bottom, ORIENT.left]), rangePadding: PropTypes.number, scale: PropTypes.func.isRequired, stroke: PropTypes.string, @@ -42,7 +37,7 @@ const propTypes = { tickValues: PropTypes.array, tickComponent: PropTypes.func, top: PropTypes.number, - children: PropTypes.func, + children: PropTypes.func }; export default function Axis({ @@ -59,7 +54,7 @@ export default function Axis({ textAnchor: 'middle', fontFamily: 'Arial', fontSize: 10, - fill: 'black', + fill: 'black' }, left = 0, numTicks = 10, @@ -75,14 +70,14 @@ export default function Axis({ textAnchor: 'middle', fontFamily: 'Arial', fontSize: 10, - fill: 'black', + fill: 'black' }), tickLength = 8, tickStroke = 'black', tickTransform, tickValues, tickComponent, - top = 0, + top = 0 }) { let values = scale.ticks ? scale.ticks(numTicks) : scale.domain(); if (tickValues) values = tickValues; @@ -93,34 +88,27 @@ export default function Axis({ const range0 = range[0] + 0.5 - rangePadding; const range1 = range[range.length - 1] + 0.5 + rangePadding; - const horizontal = - orientation !== ORIENT.left && orientation !== ORIENT.right; + const horizontal = orientation !== ORIENT.left && orientation !== ORIENT.right; const isLeft = orientation === ORIENT.left; const isTop = orientation === ORIENT.top; const tickSign = isLeft || isTop ? -1 : 1; - const position = (scale.bandwidth ? center : identity)( - scale.copy(), - ); + const position = (scale.bandwidth ? center : identity)(scale.copy()); const axisFromPoint = new Point({ x: horizontal ? range0 : 0, - y: horizontal ? 0 : range0, + y: horizontal ? 0 : range0 }); const axisToPoint = new Point({ x: horizontal ? range1 : 0, - y: horizontal ? 0 : range1, + y: horizontal ? 0 : range1 }); let tickLabelFontSize = 10; // track the max tick label size to compute label offset if (!!children) { return ( - + {children({ axisFromPoint, axisToPoint, @@ -135,48 +123,41 @@ export default function Axis({ ticks: values.map((value, index) => { const from = new Point({ x: horizontal ? position(value) : 0, - y: horizontal ? 0 : position(value), + y: horizontal ? 0 : position(value) }); const to = new Point({ x: horizontal ? position(value) : tickSign * tickLength, - y: horizontal ? tickLength * tickSign : position(value), + y: horizontal ? tickLength * tickSign : position(value) }); return { value, index, from, to, - formattedValue: format(value, index), + formattedValue: format(value, index) }; - }), + }) })} ); } return ( - + {values.map((val, index) => { if (hideZero && val === 0) return null; const tickFromPoint = new Point({ x: horizontal ? position(val) : 0, - y: horizontal ? 0 : position(val), + y: horizontal ? 0 : position(val) }); const tickToPoint = new Point({ x: horizontal ? position(val) : tickSign * tickLength, - y: horizontal ? tickLength * tickSign : position(val), + y: horizontal ? tickLength * tickSign : position(val) }); const tickLabelPropsObj = tickLabelProps(val, index); - tickLabelFontSize = Math.max( - tickLabelFontSize, - tickLabelPropsObj.fontSize || 0, - ); + tickLabelFontSize = Math.max(tickLabelFontSize, tickLabelPropsObj.fontSize || 0); return ( - {!hideTicks && ( - - )} - {tickComponent ? tickComponent({ - x: tickToPoint.x, - y: tickToPoint.y + (horizontal && !isTop ? tickLabelFontSize : 0), - formattedValue: format(val, index), - ...tickLabelPropsObj - }) : ( + {!hideTicks && } + {tickComponent ? ( + tickComponent({ + x: tickToPoint.x, + y: tickToPoint.y + (horizontal && !isTop ? tickLabelFontSize : 0), + formattedValue: format(val, index), + ...tickLabelPropsObj + }) + ) : ( {format(val, index)} @@ -233,7 +206,7 @@ export default function Axis({ orientation, range, tickLabelFontSize, - tickLength, + tickLength })} {...labelProps} > diff --git a/packages/vx-axis/src/axis/AxisBottom.js b/packages/vx-axis/src/axis/AxisBottom.js index dd5093ce3..c0f9828fa 100644 --- a/packages/vx-axis/src/axis/AxisBottom.js +++ b/packages/vx-axis/src/axis/AxisBottom.js @@ -30,7 +30,7 @@ const propTypes = { tickValues: PropTypes.array, tickComponent: PropTypes.func, top: PropTypes.number, - children: PropTypes.func, + children: PropTypes.func }; export default function AxisBottom({ @@ -58,14 +58,14 @@ export default function AxisBottom({ fill: 'black', fontFamily: 'Arial', fontSize: 10, - textAnchor: 'middle', + textAnchor: 'middle' }), tickLength = 8, tickStroke, tickTransform, tickValues, tickComponent, - top, + top }) { return ( ', () => { @@ -39,13 +39,7 @@ describe('', () => { expect(args.tickFormat).toBeDefined(); expect(args.tickPosition).toBeDefined(); expect(args.ticks).toBeDefined(); - expect(Object.keys(args.ticks[0])).toEqual([ - 'value', - 'index', - 'from', - 'to', - 'formattedValue', - ]); + expect(Object.keys(args.ticks[0])).toEqual(['value', 'index', 'from', 'to', 'formattedValue']); }); test('it should set user-specified axisClassName, axisLineClassName, labelClassName, and tickClassName', () => { @@ -61,28 +55,22 @@ describe('', () => { axisLineClassName={axisLineClassName} labelClassName={labelClassName} tickClassName={tickClassName} - />, + /> ).dive(); expect(wrapper.find(`.${axisClassName}`).length).toBe(1); expect(wrapper.find(`.${axisLineClassName}`).length).toBe(1); expect(wrapper.find(`.${labelClassName}`).length).toBe(1); - expect(wrapper.find(`.${tickClassName}`).length).toBeGreaterThan( - 0, - ); + expect(wrapper.find(`.${tickClassName}`).length).toBeGreaterThan(0); }); test('it should pass the output of tickLabelProps to tick labels', () => { const tickProps = { fontSize: 50, fill: 'magenta' }; - const wrapper = shallow( - tickProps} />, - ); + const wrapper = shallow( tickProps} />); const ticks = wrapper.find('.vx-axis-tick'); ticks.forEach(tick => { - expect(tick.find(Text).props()).toEqual( - expect.objectContaining(tickProps), - ); + expect(tick.find(Text).props()).toEqual(expect.objectContaining(tickProps)); }); expect.hasAssertions(); @@ -97,7 +85,7 @@ describe('', () => { expect(index).toBeGreaterThan(-1); return {}; }} - />, + /> ); expect.hasAssertions(); @@ -105,14 +93,10 @@ describe('', () => { test('it should pass labelProps to the axis label', () => { const labelProps = { fontSize: 50, fill: 'magenta' }; - const wrapper = shallow( - , - ); + const wrapper = shallow(); const label = wrapper.find('.vx-axis-label'); - expect(label.find(Text).props()).toEqual( - expect.objectContaining(labelProps), - ); + expect(label.find(Text).props()).toEqual(expect.objectContaining(labelProps)); }); test('it should render the 0th tick if hideZero is false', () => { @@ -121,7 +105,7 @@ describe('', () => { wrapper .find('.vx-axis-tick') .at(0) - .key(), + .key() ).toBe('vx-tick-0-0'); }); @@ -131,19 +115,17 @@ describe('', () => { wrapper .find('.vx-axis-tick') .at(0) - .key(), + .key() ).toBe('vx-tick-1-1'); }); test('it should SHOW an axis line if hideAxisLine is false', () => { - const wrapper = shallow( - , - ); + const wrapper = shallow(); expect( wrapper .children() .not('.vx-axis-tick') - .find('Line').length, + .find('Line').length ).toBe(1); }); @@ -153,19 +135,17 @@ describe('', () => { wrapper .children() .not('.vx-axis-tick') - .find('Line').length, + .find('Line').length ).toBe(0); }); test('it should SHOW ticks if hideTicks is false', () => { - const wrapper = shallow( - , - ); + const wrapper = shallow(); expect( wrapper .children() .find('.vx-axis-tick') - .find('Line').length, + .find('Line').length ).toBeGreaterThan(0); }); @@ -175,7 +155,7 @@ describe('', () => { wrapper .children() .find('.vx-axis-tick') - .find('Line').length, + .find('Line').length ).toBe(0); }); @@ -185,7 +165,7 @@ describe('', () => { wrapper .children() .find('.vx-axis-tick') - .find('Line').length, + .find('Line').length ).toBe(0); wrapper = shallow(); @@ -193,27 +173,21 @@ describe('', () => { wrapper .children() .find('.vx-axis-tick') - .find('Line').length, + .find('Line').length ).toBe(1); - wrapper = shallow( - , - ); + wrapper = shallow(); expect( wrapper .children() .find('.vx-axis-tick') - .find('Line').length, + .find('Line').length ).toBe(7); }); test('it should use tickFormat to format ticks if passed', () => { const wrapper = shallow( - 'test!!!'} - />, + 'test!!!'} /> ); expect( wrapper @@ -225,13 +199,7 @@ describe('', () => { }); test('tickFormat should have access to tick index', () => { - const wrapper = shallow( - i} - />, - ); + const wrapper = shallow( i} />); expect( wrapper .children() @@ -245,22 +213,19 @@ describe('', () => { const axisProps = { scale: scaleBand({ rangeRound: [10, 0], - domain: [0, 10], + domain: [0, 10] }) }; - const wrapper = shallow( - - ) - const points = wrapper.children().find(Line) + const wrapper = shallow(); + const points = wrapper.children().find(Line); // First point - expect(points.at(0).prop('from')).toEqual({x: 8, y: 0}) - expect(points.at(0).prop('to')).toEqual({x: 8, y: 8}) + expect(points.at(0).prop('from')).toEqual({ x: 8, y: 0 }); + expect(points.at(0).prop('to')).toEqual({ x: 8, y: 8 }); // Second point - expect(points.at(1).prop('from')).toEqual({x: 3, y: 0}) - expect(points.at(1).prop('to')).toEqual({x: 3, y: 8}) + expect(points.at(1).prop('from')).toEqual({ x: 3, y: 0 }); + expect(points.at(1).prop('to')).toEqual({ x: 3, y: 8 }); // Third point - expect(points.at(2).prop('from')).toEqual({x: 10.5, y: 0}) - expect(points.at(2).prop('to')).toEqual({x: 0.5, y: 0}) - }) - + expect(points.at(2).prop('from')).toEqual({ x: 10.5, y: 0 }); + expect(points.at(2).prop('to')).toEqual({ x: 0.5, y: 0 }); + }); }); diff --git a/packages/vx-axis/test/AxisBottom.test.js b/packages/vx-axis/test/AxisBottom.test.js index 13a03a4cd..132fdf1cc 100644 --- a/packages/vx-axis/test/AxisBottom.test.js +++ b/packages/vx-axis/test/AxisBottom.test.js @@ -6,8 +6,8 @@ import { scaleLinear } from '../../vx-scale'; const axisProps = { scale: scaleLinear({ rangeRound: [10, 0], - domain: [0, 10], - }), + domain: [0, 10] + }) }; describe('', () => { diff --git a/packages/vx-axis/test/AxisLeft.test.js b/packages/vx-axis/test/AxisLeft.test.js index 3b4040b2c..3f6a7bd0f 100644 --- a/packages/vx-axis/test/AxisLeft.test.js +++ b/packages/vx-axis/test/AxisLeft.test.js @@ -6,8 +6,8 @@ import { scaleLinear } from '../../vx-scale'; const axisProps = { scale: scaleLinear({ rangeRound: [10, 0], - domain: [0, 10], - }), + domain: [0, 10] + }) }; describe('', () => { diff --git a/packages/vx-axis/test/AxisRight.test.js b/packages/vx-axis/test/AxisRight.test.js index 3ffb79909..8eba79b59 100644 --- a/packages/vx-axis/test/AxisRight.test.js +++ b/packages/vx-axis/test/AxisRight.test.js @@ -6,8 +6,8 @@ import { scaleLinear } from '../../vx-scale'; const axisProps = { scale: scaleLinear({ rangeRound: [10, 0], - domain: [0, 10], - }), + domain: [0, 10] + }) }; describe('', () => { diff --git a/packages/vx-axis/test/AxisTop.test.js b/packages/vx-axis/test/AxisTop.test.js index 11c7ef0b5..24c415f45 100644 --- a/packages/vx-axis/test/AxisTop.test.js +++ b/packages/vx-axis/test/AxisTop.test.js @@ -6,8 +6,8 @@ import { scaleLinear } from '../../vx-scale'; const axisProps = { scale: scaleLinear({ rangeRound: [10, 0], - domain: [0, 10], - }), + domain: [0, 10] + }) }; describe('', () => { @@ -71,4 +71,4 @@ describe('', () => { const text = wrapper.find('.vx-axis-label'); expect(text.prop('children')).toEqual(label); }); -}) +}); diff --git a/packages/vx-axis/test/enzyme-setup.js b/packages/vx-axis/test/enzyme-setup.js index acd71d494..fc7b0dce1 100644 --- a/packages/vx-axis/test/enzyme-setup.js +++ b/packages/vx-axis/test/enzyme-setup.js @@ -1,4 +1,4 @@ import Enzyme from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; -Enzyme.configure({ adapter: new Adapter() }); \ No newline at end of file +Enzyme.configure({ adapter: new Adapter() }); diff --git a/packages/vx-bounds/src/enhancers/withBoundingRects.js b/packages/vx-bounds/src/enhancers/withBoundingRects.js index 433523020..8ee90340a 100644 --- a/packages/vx-bounds/src/enhancers/withBoundingRects.js +++ b/packages/vx-bounds/src/enhancers/withBoundingRects.js @@ -9,7 +9,7 @@ const emptyRect = { bottom: 0, left: 0, width: 0, - height: 0, + height: 0 }; const rectShape = PropTypes.shape({ @@ -18,13 +18,13 @@ const rectShape = PropTypes.shape({ bottom: PropTypes.number.isRequired, left: PropTypes.number.isRequired, width: PropTypes.number.isRequired, - height: PropTypes.number.isRequired, + height: PropTypes.number.isRequired }); export const withBoundingRectsProps = { getRects: PropTypes.func, rect: rectShape, - parentRect: rectShape, + parentRect: rectShape }; export default function withBoundingRects(BaseComponent) { @@ -33,7 +33,7 @@ export default function withBoundingRects(BaseComponent) { super(props); this.state = { rect: undefined, - parentRect: undefined, + parentRect: undefined }; this.getRects = this.getRects.bind(this); } @@ -49,25 +49,18 @@ export default function withBoundingRects(BaseComponent) { const node = this.node; const parentNode = this.node.parentNode; - const rect = node.getBoundingClientRect - ? node.getBoundingClientRect() - : emptyRect; + const rect = node.getBoundingClientRect ? node.getBoundingClientRect() : emptyRect; - const parentRect = parentNode && parentNode.getBoundingClientRect - ? parentNode.getBoundingClientRect() - : emptyRect; + const parentRect = + parentNode && parentNode.getBoundingClientRect + ? parentNode.getBoundingClientRect() + : emptyRect; return { rect, parentRect }; } render() { - return ( - - ); + return ; } } diff --git a/packages/vx-bounds/src/index.js b/packages/vx-bounds/src/index.js index 34cbdf23c..b48725f25 100644 --- a/packages/vx-bounds/src/index.js +++ b/packages/vx-bounds/src/index.js @@ -1 +1,4 @@ -export { default as withBoundingRects, withBoundingRectsProps } from './enhancers/withBoundingRects'; +export { + default as withBoundingRects, + withBoundingRectsProps +} from './enhancers/withBoundingRects'; diff --git a/packages/vx-bounds/test/enzyme-setup.js b/packages/vx-bounds/test/enzyme-setup.js index acd71d494..fc7b0dce1 100644 --- a/packages/vx-bounds/test/enzyme-setup.js +++ b/packages/vx-bounds/test/enzyme-setup.js @@ -1,4 +1,4 @@ import Enzyme from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; -Enzyme.configure({ adapter: new Adapter() }); \ No newline at end of file +Enzyme.configure({ adapter: new Adapter() }); diff --git a/packages/vx-bounds/test/withBoundingRects.test.js b/packages/vx-bounds/test/withBoundingRects.test.js index ae3dd1dde..0676ca935 100644 --- a/packages/vx-bounds/test/withBoundingRects.test.js +++ b/packages/vx-bounds/test/withBoundingRects.test.js @@ -9,7 +9,7 @@ const expectedRectShape = expect.objectContaining({ bottom: expect.any(Number), left: expect.any(Number), width: expect.any(Number), - height: expect.any(Number), + height: expect.any(Number) }); describe('withBoundingRects()', () => { @@ -21,7 +21,7 @@ describe('withBoundingRects()', () => { top: 0, left: 0, bottom: 0, - right: 0, + right: 0 })); }); diff --git a/packages/vx-boxplot/src/boxplots/BoxPlot.js b/packages/vx-boxplot/src/boxplots/BoxPlot.js index c2ba4c1bf..ac16df43a 100644 --- a/packages/vx-boxplot/src/boxplots/BoxPlot.js +++ b/packages/vx-boxplot/src/boxplots/BoxPlot.js @@ -114,7 +114,7 @@ export default function BoxPlot({ x2: centerX + boxWidth / 4 })} /> - {container && + {container && ( } + /> + )} ); } diff --git a/packages/vx-boxplot/test/enzyme-setup.js b/packages/vx-boxplot/test/enzyme-setup.js index acd71d494..fc7b0dce1 100644 --- a/packages/vx-boxplot/test/enzyme-setup.js +++ b/packages/vx-boxplot/test/enzyme-setup.js @@ -1,4 +1,4 @@ import Enzyme from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; -Enzyme.configure({ adapter: new Adapter() }); \ No newline at end of file +Enzyme.configure({ adapter: new Adapter() }); diff --git a/packages/vx-brush/src/brushes/BoxBrush.js b/packages/vx-brush/src/brushes/BoxBrush.js index ed3441681..2f79b5078 100644 --- a/packages/vx-brush/src/brushes/BoxBrush.js +++ b/packages/vx-brush/src/brushes/BoxBrush.js @@ -1,14 +1,14 @@ import React from 'react'; import cx from 'classnames'; -export default (props) => { +export default props => { const { brush, className, - fill = "rgba(102, 181, 245, 0.1)", - stroke = "rgba(102, 181, 245, 1)", + fill = 'rgba(102, 181, 245, 0.1)', + stroke = 'rgba(102, 181, 245, 1)', strokeWidth = 1, - ...otherProps, + ...otherProps } = props; const { start, end, isBrushing } = brush; if (!start) return null; @@ -18,8 +18,8 @@ export default (props) => { const width = Math.abs(start.x - end.x); const height = Math.abs(start.y - end.y); return ( - - {isBrushing && + + {isBrushing && ( { height={height} {...otherProps} /> - } + )} ); -} +}; diff --git a/packages/vx-brush/src/enhancers/withBrush.js b/packages/vx-brush/src/enhancers/withBrush.js index e9594c1de..6e6eddf08 100644 --- a/packages/vx-brush/src/enhancers/withBrush.js +++ b/packages/vx-brush/src/enhancers/withBrush.js @@ -6,27 +6,27 @@ export default compose( start: undefined, end: undefined, domain: undefined, - isBrushing: false, + isBrushing: false }), withHandlers({ onBrushStart: ({ updateBrush }) => ({ x, y }) => { - updateBrush((prevState) => ({ + updateBrush(prevState => ({ ...prevState, start: { x, y }, isBrushing: true, end: undefined, - domain: undefined, + domain: undefined })); }, onBrushDrag: ({ updateBrush }) => ({ x, y }) => { - updateBrush((prevState) => ({ + updateBrush(prevState => ({ ...prevState, end: { x, y }, - domain: undefined, + domain: undefined })); }, onBrushEnd: ({ updateBrush }) => ({ x, y }) => { - updateBrush((prevState) => { + updateBrush(prevState => { const { start } = prevState; return { ...prevState, @@ -35,17 +35,17 @@ export default compose( x0: Math.min(start.x, x), x1: Math.max(start.x, x), y0: Math.min(start.y, y), - y1: Math.max(start.y, y), + y1: Math.max(start.y, y) } - } + }; }); }, onBrushReset: ({ updateBrush }) => event => { - updateBrush((prevState) => ({ + updateBrush(prevState => ({ start: undefined, end: undefined, domain: undefined, - isBrushing: false, + isBrushing: false })); } }) diff --git a/packages/vx-brush/src/utils/constrainToRegion.js b/packages/vx-brush/src/utils/constrainToRegion.js index b61cb9cd2..db059a234 100644 --- a/packages/vx-brush/src/utils/constrainToRegion.js +++ b/packages/vx-brush/src/utils/constrainToRegion.js @@ -2,6 +2,6 @@ export default function constrainToRegion({ region, x, y }) { const { x0, x1, y0, y1 } = region; return { x: x < x0 ? x0 : x > x1 ? x1 : x, - y: y < y0 ? y0 : y > y1 ? y1 : y, - } + y: y < y0 ? y0 : y > y1 ? y1 : y + }; } diff --git a/packages/vx-brush/test/BoxBrush.test.js b/packages/vx-brush/test/BoxBrush.test.js index 100039514..e784aaaa1 100644 --- a/packages/vx-brush/test/BoxBrush.test.js +++ b/packages/vx-brush/test/BoxBrush.test.js @@ -2,6 +2,6 @@ import { BoxBrush } from '../src'; describe('', () => { test('it should be defined', () => { - expect(BoxBrush).toBeDefined() - }) -}) + expect(BoxBrush).toBeDefined(); + }); +}); diff --git a/packages/vx-brush/test/enzyme-setup.js b/packages/vx-brush/test/enzyme-setup.js index acd71d494..fc7b0dce1 100644 --- a/packages/vx-brush/test/enzyme-setup.js +++ b/packages/vx-brush/test/enzyme-setup.js @@ -1,4 +1,4 @@ import Enzyme from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; -Enzyme.configure({ adapter: new Adapter() }); \ No newline at end of file +Enzyme.configure({ adapter: new Adapter() }); diff --git a/packages/vx-clip-path/src/clip-paths/CircleClipPath.js b/packages/vx-clip-path/src/clip-paths/CircleClipPath.js index 68a439d5e..1ba83487a 100644 --- a/packages/vx-clip-path/src/clip-paths/CircleClipPath.js +++ b/packages/vx-clip-path/src/clip-paths/CircleClipPath.js @@ -1,20 +1,8 @@ import React from 'react'; import ClipPath from './ClipPath'; -export default ({ - id, - cx, - cy, - r, - ...restProps, -}) => ( +export default ({ id, cx, cy, r, ...restProps }) => ( - + ); - diff --git a/packages/vx-clip-path/src/clip-paths/ClipPath.js b/packages/vx-clip-path/src/clip-paths/ClipPath.js index 021072048..33e661e6b 100644 --- a/packages/vx-clip-path/src/clip-paths/ClipPath.js +++ b/packages/vx-clip-path/src/clip-paths/ClipPath.js @@ -1,10 +1,6 @@ import React from 'react'; -export default ({ - id, - children, - ...restProps -}) => ( +export default ({ id, children, ...restProps }) => ( {children} diff --git a/packages/vx-clip-path/src/clip-paths/RectClipPath.js b/packages/vx-clip-path/src/clip-paths/RectClipPath.js index 68413cd10..3ddee464d 100644 --- a/packages/vx-clip-path/src/clip-paths/RectClipPath.js +++ b/packages/vx-clip-path/src/clip-paths/RectClipPath.js @@ -1,21 +1,8 @@ import React from 'react'; import ClipPath from './ClipPath'; -export default ({ - id, - x = 0, - y = 0, - width = 1, - height = 1, - ...restProps, -}) => ( +export default ({ id, x = 0, y = 0, width = 1, height = 1, ...restProps }) => ( - + ); diff --git a/packages/vx-clip-path/test/ClipPaths.test.js b/packages/vx-clip-path/test/ClipPaths.test.js index a3b482477..d4bc69371 100644 --- a/packages/vx-clip-path/test/ClipPaths.test.js +++ b/packages/vx-clip-path/test/ClipPaths.test.js @@ -1,10 +1,6 @@ import React from 'react'; -import { - ClipPath, - CircleClipPath, - RectClipPath, -} from '../src'; +import { ClipPath, CircleClipPath, RectClipPath } from '../src'; import { shallow } from 'enzyme'; @@ -20,7 +16,7 @@ describe('', () => { }); test('it should assign the passed id to the clipPath', () => { - const wrapper = shallow(); + const wrapper = shallow(); expect(wrapper.find('clipPath#best_clip').length).toBe(1); }); }); diff --git a/packages/vx-clip-path/test/enzyme-setup.js b/packages/vx-clip-path/test/enzyme-setup.js index acd71d494..fc7b0dce1 100644 --- a/packages/vx-clip-path/test/enzyme-setup.js +++ b/packages/vx-clip-path/test/enzyme-setup.js @@ -1,4 +1,4 @@ import Enzyme from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; -Enzyme.configure({ adapter: new Adapter() }); \ No newline at end of file +Enzyme.configure({ adapter: new Adapter() }); diff --git a/packages/vx-curve/src/index.js b/packages/vx-curve/src/index.js index b9ac46cfa..ab9239d20 100644 --- a/packages/vx-curve/src/index.js +++ b/packages/vx-curve/src/index.js @@ -16,5 +16,5 @@ export { curveCatmullRomOpen, curveMonotoneX, curveMonotoneY, - curveNatural, + curveNatural } from 'd3-shape'; diff --git a/packages/vx-curve/test/curve.test.js b/packages/vx-curve/test/curve.test.js index 6f3b6c5f5..81e6db02f 100644 --- a/packages/vx-curve/test/curve.test.js +++ b/packages/vx-curve/test/curve.test.js @@ -16,77 +16,77 @@ import { curveCatmullRomOpen, curveMonotoneX, curveMonotoneY, - curveNatural, + curveNatural } from '../src'; test('curveBasis', () => { - expect(curveBasis).toBeDefined() -}) + expect(curveBasis).toBeDefined(); +}); test('curveBasisClosed', () => { - expect(curveBasisClosed).toBeDefined() -}) + expect(curveBasisClosed).toBeDefined(); +}); test('curveBasisOpen', () => { - expect(curveBasisOpen).toBeDefined() -}) + expect(curveBasisOpen).toBeDefined(); +}); test('curveStep', () => { - expect(curveStep).toBeDefined() -}) + expect(curveStep).toBeDefined(); +}); test('curveStepAfter', () => { - expect(curveStepAfter).toBeDefined() -}) + expect(curveStepAfter).toBeDefined(); +}); test('curveStepBefore', () => { - expect(curveStepBefore).toBeDefined() -}) + expect(curveStepBefore).toBeDefined(); +}); test('curveBundle', () => { - expect(curveBundle).toBeDefined() -}) + expect(curveBundle).toBeDefined(); +}); test('curveLinear', () => { - expect(curveLinear).toBeDefined() -}) + expect(curveLinear).toBeDefined(); +}); test('curveLinearClosed', () => { - expect(curveLinearClosed).toBeDefined() -}) + expect(curveLinearClosed).toBeDefined(); +}); test('curveCardinal', () => { - expect(curveCardinal).toBeDefined() -}) + expect(curveCardinal).toBeDefined(); +}); test('curveCardinalClosed', () => { - expect(curveCardinalClosed).toBeDefined() -}) + expect(curveCardinalClosed).toBeDefined(); +}); test('curveCardinalOpen', () => { - expect(curveCardinalOpen).toBeDefined() -}) + expect(curveCardinalOpen).toBeDefined(); +}); test('curveCatmullRom', () => { - expect(curveCatmullRom).toBeDefined() -}) + expect(curveCatmullRom).toBeDefined(); +}); test('curveCatmullRomClosed', () => { - expect(curveCatmullRomClosed).toBeDefined() -}) + expect(curveCatmullRomClosed).toBeDefined(); +}); test('curveCatmullRomOpen', () => { - expect(curveCatmullRomOpen).toBeDefined() -}) + expect(curveCatmullRomOpen).toBeDefined(); +}); test('curveMonotoneX', () => { - expect(curveMonotoneX).toBeDefined() -}) + expect(curveMonotoneX).toBeDefined(); +}); test('curveMonotoneY', () => { - expect(curveMonotoneY).toBeDefined() -}) + expect(curveMonotoneY).toBeDefined(); +}); test('curveNatural', () => { - expect(curveNatural).toBeDefined() -}) + expect(curveNatural).toBeDefined(); +}); diff --git a/packages/vx-curve/test/enzyme-setup.js b/packages/vx-curve/test/enzyme-setup.js index acd71d494..fc7b0dce1 100644 --- a/packages/vx-curve/test/enzyme-setup.js +++ b/packages/vx-curve/test/enzyme-setup.js @@ -1,4 +1,4 @@ import Enzyme from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; -Enzyme.configure({ adapter: new Adapter() }); \ No newline at end of file +Enzyme.configure({ adapter: new Adapter() }); diff --git a/packages/vx-demo/components/charts/BrushChart.js b/packages/vx-demo/components/charts/BrushChart.js index 57054e991..8c15a122a 100644 --- a/packages/vx-demo/components/charts/BrushChart.js +++ b/packages/vx-demo/components/charts/BrushChart.js @@ -3,12 +3,7 @@ import { genRandomNormalPoints } from '@vx/mock-data'; import { scaleLinear } from '@vx/scale'; import { Group } from '@vx/group'; import { AxisLeft, AxisBottom } from '@vx/axis'; -import { - BoxBrush, - withBrush, - getCoordsFromEvent, - constrainToRegion -} from '@vx/brush'; +import { BoxBrush, withBrush, getCoordsFromEvent, constrainToRegion } from '@vx/brush'; import colors from '../util/sillyColorScale'; import { Motion, spring } from 'react-motion'; @@ -23,7 +18,7 @@ class BrushChart extends React.Component { x0: margin.left, x1: width - margin.left, y0: margin.top, - y1: height - margin.top, + y1: height - margin.top }; this.initialDomain = { @@ -34,13 +29,13 @@ class BrushChart extends React.Component { this.xScale = scaleLinear({ domain: this.initialDomain.x, range: [0, width - margin.left - margin.right], - clamp: true, + clamp: true }); this.yScale = scaleLinear({ domain: this.initialDomain.y, range: [height - margin.top - margin.bottom, 0], - clamp: true, + clamp: true }); this.handleMouseDown = this.handleMouseDown.bind(this); @@ -102,7 +97,9 @@ class BrushChart extends React.Component { return ( { this.svg = c; }} + ref={c => { + this.svg = c; + }} width={width} height={height} onMouseDown={this.handleMouseDown} @@ -126,15 +123,16 @@ class BrushChart extends React.Component { tickTextFill={'#1b1a1e'} /> - {points.map((point) => { + {points.map(point => { return ( + y: spring(yScale(y(point))) + }} + > {interpolatingStyle => { return ( k !== 'date'); // rawData => [{id: "", values: [{ date, temperature }]}, ...] -const data = cityNames.map((cityName) => { +const data = cityNames.map(cityName => { return { id: cityName, - values: rawData.map((d) => ({ + values: rawData.map(d => ({ date: d.date, - temperature: d[cityName], - })), - } + temperature: d[cityName] + })) + }; }); // utils -const getCity = (cityId) => data.find((city) => city.id === cityId); +const getCity = cityId => data.find(city => city.id === cityId); const addCity = (selected, cityId) => selected.concat(cityId); -const removeCity = (selected, cityId) => selected.filter((city) => city !== cityId); +const removeCity = (selected, cityId) => selected.filter(city => city !== cityId); const removeCityOrResetSelected = (selected, cityId) => { let nextSelected = removeCity(selected, cityId); if (nextSelected.length === 0) nextSelected = initialSelectedState; return nextSelected; -} +}; // recompose higher-order function for state and event handlers const initialSelectedState = cityNames; @@ -54,98 +54,81 @@ const withSelected = compose( ); // the chart -export default withSelected(({ - selected, - updateSelected, - resetSelected, - width, - height, - margin, -}) => { - // bounds - const xMax = width - margin.left - margin.right; - const yMax = height - margin.top - margin.bottom; +export default withSelected( + ({ selected, updateSelected, resetSelected, width, height, margin }) => { + // bounds + const xMax = width - margin.left - margin.right; + const yMax = height - margin.top - margin.bottom; - // accessors - const x = d => parseDate(d.date); - const y = d => +d.temperature; + // accessors + const x = d => parseDate(d.date); + const y = d => +d.temperature; - // scales - const xScale = scaleTime({ - range: [0, xMax], - domain: extent(rawData, x), - }); - const yScale = scaleLinear({ - range: [yMax, 0], - domain: extent(selected.slice().reduce((ret, c) => { - return ret.concat(getCity(c).values) - }, []), y) - }); - const color = scaleOrdinal({ - range: ['#3b99d8', '#239f85', '#9a5cb4'], - domain: cityNames, - }); + // scales + const xScale = scaleTime({ + range: [0, xMax], + domain: extent(rawData, x) + }); + const yScale = scaleLinear({ + range: [yMax, 0], + domain: extent( + selected.slice().reduce((ret, c) => { + return ret.concat(getCity(c).values); + }, []), + y + ) + }); + const color = scaleOrdinal({ + range: ['#3b99d8', '#239f85', '#9a5cb4'], + domain: cityNames + }); - return ( - - - - - {selected.map(getCity).map(({ id, values }) => { - const lastDatum = values[values.length - 1]; - return ( - - - - {id} - - - ); - })} - - - - ); -}); + return ( + + + + + {selected.map(getCity).map(({ id, values }) => { + const lastDatum = values[values.length - 1]; + return ( + + + + {id} + + + ); + })} + + + + ); + } +); -const Legend = ({ - data, - selected, - updateSelected, - xMax, - yMax, - color, -}) => { +const Legend = ({ data, selected, updateSelected, xMax, yMax, color }) => { const margin = 20; const xPadding = 60; const yPadding = 30; @@ -165,7 +148,7 @@ const Legend = ({ fillOpacity={selected.includes(id) ? 1 : 0.5} > - + {id} @@ -173,8 +156,10 @@ const Legend = ({ })} ); -} +}; diff --git a/packages/vx-demo/components/charts/SimpleAreaChart.js b/packages/vx-demo/components/charts/SimpleAreaChart.js index 23713221f..46c4c16bf 100644 --- a/packages/vx-demo/components/charts/SimpleAreaChart.js +++ b/packages/vx-demo/components/charts/SimpleAreaChart.js @@ -20,12 +20,7 @@ function numTicksForWidth(width) { return 10; } -export default ({ - margin, - data, - width, - height, -}) => { +export default ({ margin, data, width, height }) => { const stock = appleStock; // bounds @@ -39,12 +34,12 @@ export default ({ // scales const xStockScale = scaleTime({ range: [0, xMax], - domain: extent(stock, xStock), + domain: extent(stock, xStock) }); const yStockScale = scaleLinear({ range: [yMax, 0], domain: [0, max(stock, yStock)], - nice: true, + nice: true }); return ( @@ -87,4 +82,4 @@ export default ({ /> ); -} +}; diff --git a/packages/vx-demo/components/charts/SimpleBar.js b/packages/vx-demo/components/charts/SimpleBar.js index ed5915d2d..a62c7c4fe 100644 --- a/packages/vx-demo/components/charts/SimpleBar.js +++ b/packages/vx-demo/components/charts/SimpleBar.js @@ -13,11 +13,7 @@ function round(value, precision) { return Math.round(value * multiplier) / multiplier; } -export default ({ - width, - height, - margin, -}) => { +export default ({ width, height, margin }) => { // accessors const x = d => d.letter; const y = d => +d.frequency * 100; @@ -30,11 +26,11 @@ export default ({ const xScale = scaleBand({ rangeRound: [0, xMax], domain: data.map(x), - padding: 0.4, + padding: 0.4 }); const yScale = scaleLinear({ rangeRound: [yMax, 0], - domain: [0, max(data, y)], + domain: [0, max(data, y)] }); return ( @@ -60,23 +56,10 @@ export default ({ stroke={'black'} strokeWidth={1} /> - + {`${round(y(d))}%`} - + {x(d)} @@ -84,4 +67,4 @@ export default ({ })} ); -} +}; diff --git a/packages/vx-demo/components/charts/SimpleLineChart.js b/packages/vx-demo/components/charts/SimpleLineChart.js index dfec400ea..1f7ee2cf1 100644 --- a/packages/vx-demo/components/charts/SimpleLineChart.js +++ b/packages/vx-demo/components/charts/SimpleLineChart.js @@ -27,16 +27,11 @@ function numTicksForWidth(width) { return 10; } -export default ({ - margin, - dataset, - width, - height, -}) => { +export default ({ margin, dataset, width, height }) => { if (!Array.isArray(dataset)) dataset = [dataset]; const allData = dataset.reduce((rec, d) => { - return rec.concat(d.data) + return rec.concat(d.data); }, []); // bounds @@ -51,12 +46,12 @@ export default ({ const xScale = scaleTime({ range: [0, xMax], domain: extent(allData, x), - nice: true, + nice: true }); const yScale = scaleLinear({ range: [yMax, 0], domain: [0, max(allData, y)], - nice: true, + nice: true }); const yFormat = yScale.tickFormat ? yScale.tickFormat() : identity; @@ -66,28 +61,28 @@ export default ({ const markerLabel = `Deploy`; const markerFrom = new Point({ x: xScale(x(markerDatum)), - y: 0, + y: 0 }); const markerTo = new Point({ x: xScale(x(markerDatum)), - y: yMax, + y: yMax }); const annotationPoint = new Point({ x: xScale(x(allData[3])), - y: yScale(y(allData[3])), + y: yScale(y(allData[3])) }); return ( - - + + - - + + - + @@ -175,4 +167,4 @@ export default ({ /> ); -} +}; diff --git a/packages/vx-demo/components/charts/SimpleLineWithGlyphsChart.js b/packages/vx-demo/components/charts/SimpleLineWithGlyphsChart.js index df347a352..de552593e 100644 --- a/packages/vx-demo/components/charts/SimpleLineWithGlyphsChart.js +++ b/packages/vx-demo/components/charts/SimpleLineWithGlyphsChart.js @@ -26,16 +26,11 @@ function numTicksForWidth(width) { return 10; } -export default ({ - margin, - dataset, - width, - height, -}) => { +export default ({ margin, dataset, width, height }) => { if (!Array.isArray(dataset)) dataset = [dataset]; const allData = dataset.reduce((rec, d) => { - return rec.concat(d.data) + return rec.concat(d.data); }, []); // bounds @@ -49,13 +44,13 @@ export default ({ // scales const xScale = scaleTime({ range: [0, xMax], - domain: extent(allData, x), + domain: extent(allData, x) }); const yScale = scaleLinear({ range: [yMax, 0], domain: [0, max(allData, y)], nice: true, - clamp: true, + clamp: true }); const yFormat = yScale.tickFormat ? yScale.tickFormat() : identity; @@ -70,10 +65,7 @@ export default ({ label={'value'} hideZero /> - + { return ( - ); -} +}; diff --git a/packages/vx-demo/components/charts/StackedAreaChart.js b/packages/vx-demo/components/charts/StackedAreaChart.js index c69c3b4c8..a1e17cf9e 100644 --- a/packages/vx-demo/components/charts/StackedAreaChart.js +++ b/packages/vx-demo/components/charts/StackedAreaChart.js @@ -13,17 +13,9 @@ import colorScale from '../util/sillyColorScale'; import withState from 'recompose/withState'; import compose from 'recompose/compose'; -const enhance = compose( - withState('selected', 'updateSelected', []) -); +const enhance = compose(withState('selected', 'updateSelected', [])); -export default enhance(({ - margin, - width, - height, - selected, - updateSelected, -}) => { +export default enhance(({ margin, width, height, selected, updateSelected }) => { const data = browserUsage; const keys = Object.keys(data[0]).filter(k => k !== 'date'); const browserNames = [...keys].reverse(); @@ -31,17 +23,17 @@ export default enhance(({ const yMax = height - margin.top - margin.bottom; const xMax = width - margin.left - margin.right; - const parseDate = timeParse("%Y %b %d"); + const parseDate = timeParse('%Y %b %d'); const x = d => parseDate(d.date); const stack = d3stack().keys(keys); const xScale = scaleTime({ range: [0, xMax], - domain: extent(data, x), + domain: extent(data, x) }); const yScale = scaleLinear({ - range: [yMax, 0], + range: [yMax, 0] }); return ( @@ -50,7 +42,7 @@ export default enhance(({ top={margin.top} left={margin.left} scale={yScale} - tickFormat={(v) => `${round(v * 100)}%`} + tickFormat={v => `${round(v * 100)}%`} label={'browser market share (%)'} stroke={'#1b1a1e'} tickTextFill={'#000'} @@ -62,48 +54,50 @@ export default enhance(({ left={margin.left} keys={keys} data={data} - x={(d) => xScale(x(d.data))} - y0={(d) => yScale(d[0] / 100)} - y1={(d) => yScale(d[1] / 100)} - stroke={(d,i) => colorScale(i)} + x={d => xScale(x(d.data))} + y0={d => yScale(d[0] / 100)} + y1={d => yScale(d[1] / 100)} + stroke={(d, i) => colorScale(i)} strokeWidth={1} - fillOpacity={(d,i) => selected.includes(browserNames[i]) ? 0.8 : 0.2} - fill={(d,i) => colorScale(i)} + fillOpacity={(d, i) => (selected.includes(browserNames[i]) ? 0.8 : 0.2)} + fill={(d, i) => colorScale(i)} onMouseEnter={(d, i) => event => { - updateSelected((prevState) => ([browserNames[i]])) + updateSelected(prevState => [browserNames[i]]); }} - onMouseLeave={(d,i) => event => { + onMouseLeave={(d, i) => event => { updateSelected(prevState => { if (prevState.includes(browserNames[i])) return []; return prevState; - }) + }); }} /> - {stack(data).reverse().map((series,i) => { - const lastPoint = series[series.length - 1]; - const lastPointY0 = lastPoint[0] / 100; - const lastPointY1 = lastPoint[1] / 100; + {stack(data) + .reverse() + .map((series, i) => { + const lastPoint = series[series.length - 1]; + const lastPointY0 = lastPoint[0] / 100; + const lastPointY1 = lastPoint[1] / 100; - return ( - - {lastPointY1 - lastPointY0 > 0.01 && - - {series.key} - - } - - ); - })} + return ( + + {lastPointY1 - lastPointY0 > 0.01 && ( + + {series.key} + + )} + + ); + })} ); -}) +}); diff --git a/packages/vx-demo/components/charts/VoronoiChart.js b/packages/vx-demo/components/charts/VoronoiChart.js index 9400673cd..9028262c9 100644 --- a/packages/vx-demo/components/charts/VoronoiChart.js +++ b/packages/vx-demo/components/charts/VoronoiChart.js @@ -10,11 +10,15 @@ import { voronoi, VoronoiPolygon } from '@vx/voronoi'; const neighborRadius = 75; -const data = Array(200).fill(null).map(() => ({ - x: Math.random(), - y: Math.random(), - id: Math.random().toString(36).slice(2), -})); +const data = Array(200) + .fill(null) + .map(() => ({ + x: Math.random(), + y: Math.random(), + id: Math.random() + .toString(36) + .slice(2) + })); class VoronoiChart extends React.PureComponent { static getUpdatedState(props) { @@ -24,19 +28,19 @@ class VoronoiChart extends React.PureComponent { const xScale = scaleLinear({ domain: extent(data, d => d.x), - range: [0, innerWidth], + range: [0, innerWidth] }); const yScale = scaleLinear({ domain: extent(data, d => d.y), - range: [innerHeight, 0], + range: [innerHeight, 0] }); const voronoiDiagram = voronoi({ x: d => xScale(d.x), y: d => yScale(d.y), width: innerWidth, - height: innerHeight, + height: innerHeight })(data); return { @@ -46,7 +50,7 @@ class VoronoiChart extends React.PureComponent { yScale, voronoiDiagram, innerWidth, - innerHeight, + innerHeight }; } @@ -57,10 +61,7 @@ class VoronoiChart extends React.PureComponent { } componentWillReceiveProps(nextProps) { - if ( - nextProps.width !== this.props.width || - nextProps.height !== this.props.height - ) { + if (nextProps.width !== this.props.width || nextProps.height !== this.props.height) { this.setState(VoronoiChart.getUpdatedState(nextProps)); } } @@ -72,13 +73,13 @@ class VoronoiChart extends React.PureComponent { if (closest) { const neighbors = {}; const cell = voronoiDiagram.cells[closest.index]; - cell.halfedges.forEach((index) => { + cell.halfedges.forEach(index => { debugger; const edge = voronoiDiagram.edges[index]; const { left, right } = edge; if (left && left !== closest) neighbors[left.data.id] = true; else if (right && right !== closest) neighbors[right.data.id] = true; - }) + }); this.setState({ selected: closest, neighbors }); } } @@ -93,7 +94,7 @@ class VoronoiChart extends React.PureComponent { xScale, yScale, selected, - neighbors, + neighbors } = this.state; const polygons = voronoiDiagram.polygons(); @@ -102,39 +103,37 @@ class VoronoiChart extends React.PureComponent { { this.svg = ref; }} + ref={ref => { + this.svg = ref; + }} > - + { this.setState({ selected: null, neighbors: null }); }} + onMouseLeave={() => { + this.setState({ selected: null, neighbors: null }); + }} > - {polygons.map((polygon) => ( + {polygons.map(polygon => ( ( - selected && (d.id === selected.data.id || neighbors[d.id]) ? - 'url(#voronoi_orange_red)' : 'url(#voronoi_pink_red)' - )} - fillOpacity={(d) => ( - neighbors && neighbors[d.id] ? 0.4 : 1 - )} + fill={d => + selected && (d.id === selected.data.id || neighbors[d.id]) + ? 'url(#voronoi_orange_red)' + : 'url(#voronoi_pink_red)' + } + fillOpacity={d => (neighbors && neighbors[d.id] ? 0.4 : 1)} stroke="#fff" strokeWidth={1} /> ))} - {data.map((d) => ( + {data.map(d => ( ( - -)); +export default ({ width, height, margin, events }) => ( + +); diff --git a/packages/vx-demo/components/charts/flame/util/parseFoldedStack.js b/packages/vx-demo/components/charts/flame/util/parseFoldedStack.js index 20b4fd985..5768f70bf 100644 --- a/packages/vx-demo/components/charts/flame/util/parseFoldedStack.js +++ b/packages/vx-demo/components/charts/flame/util/parseFoldedStack.js @@ -2,4 +2,4 @@ export default ({ source }) => { return source.split('\n').reduce((lines, line) => { return lines.concat(line.split(' ')); }, []); -} +}; diff --git a/packages/vx-demo/components/codeblocks/BrushChartCode.js b/packages/vx-demo/components/codeblocks/BrushChartCode.js index cc2624ec1..115d54540 100644 --- a/packages/vx-demo/components/codeblocks/BrushChartCode.js +++ b/packages/vx-demo/components/codeblocks/BrushChartCode.js @@ -166,4 +166,4 @@ export default withBrush(BrushChart); `} ); -} +}; diff --git a/packages/vx-demo/components/codeblocks/Codeblock.js b/packages/vx-demo/components/codeblocks/Codeblock.js index 88eb3e7c5..b4b5923c5 100644 --- a/packages/vx-demo/components/codeblocks/Codeblock.js +++ b/packages/vx-demo/components/codeblocks/Codeblock.js @@ -1,5 +1,5 @@ import React from 'react'; -import ReactDOMServer from 'react-dom/server' +import ReactDOMServer from 'react-dom/server'; import Prism from 'prismjs'; import 'prismjs/components/prism-jsx.min'; @@ -7,12 +7,12 @@ const Lines = ({ lines }) => { const size = lines.length; return (