From 6a8859c31ce0d87bba6c97b7f267f638e2fb1651 Mon Sep 17 00:00:00 2001 From: Harry Shoff Date: Mon, 14 Aug 2017 12:05:47 -0700 Subject: [PATCH 1/4] [network] add classnames, prettier style polish --- packages/vx-network/package.json | 1 + packages/vx-network/src/DefaultLink.js | 17 +++++++++++----- packages/vx-network/src/DefaultNode.js | 2 +- packages/vx-network/src/Graph.js | 18 ++++++++--------- packages/vx-network/src/Links.js | 18 ++++++++++------- packages/vx-network/src/Nodes.js | 27 +++++++++++++++----------- packages/vx-network/src/index.js | 10 +++++----- 7 files changed, 54 insertions(+), 39 deletions(-) diff --git a/packages/vx-network/package.json b/packages/vx-network/package.json index 6bb51220a..9b7079075 100644 --- a/packages/vx-network/package.json +++ b/packages/vx-network/package.json @@ -29,6 +29,7 @@ }, "dependencies": { "@vx/group": "0.0.127", + "classnames": "^2.2.5", "d3-force": "^1.0.6" }, "publishConfig": { diff --git a/packages/vx-network/src/DefaultLink.js b/packages/vx-network/src/DefaultLink.js index 57c7a3d11..301f17e05 100644 --- a/packages/vx-network/src/DefaultLink.js +++ b/packages/vx-network/src/DefaultLink.js @@ -1,8 +1,15 @@ import React from 'react'; -export default function DefaultLink({link}) { - return ; +export default function DefaultLink({ link }) { + return ( + + ); } diff --git a/packages/vx-network/src/DefaultNode.js b/packages/vx-network/src/DefaultNode.js index 8fc0e4720..135034525 100644 --- a/packages/vx-network/src/DefaultNode.js +++ b/packages/vx-network/src/DefaultNode.js @@ -1,5 +1,5 @@ import React from 'react'; export default function DefaultNode() { - return (); + return ; } diff --git a/packages/vx-network/src/Graph.js b/packages/vx-network/src/Graph.js index f552452f3..46cf60931 100644 --- a/packages/vx-network/src/Graph.js +++ b/packages/vx-network/src/Graph.js @@ -1,21 +1,19 @@ import React from 'react'; - -import {Group} from '@vx/group'; - +import { Group } from '@vx/group'; import Links from './Links'; import Nodes from './Nodes'; import DefaultLink from './DefaultLink'; import DefaultNode from './DefaultNode'; export default function Graph({ - graph, - linkComponent = DefaultLink, - nodeComponent = DefaultNode - }) { + graph, + linkComponent = DefaultLink, + nodeComponent = DefaultNode, +}) { return ( - - + + ); -} \ No newline at end of file +} diff --git a/packages/vx-network/src/Links.js b/packages/vx-network/src/Links.js index e5f16b17f..f0b50770c 100644 --- a/packages/vx-network/src/Links.js +++ b/packages/vx-network/src/Links.js @@ -1,15 +1,19 @@ import React from 'react'; - -import {Group} from '@vx/group'; - +import cx from 'classnames'; +import { Group } from '@vx/group'; import Graph from './Graph'; -export default function Links({links, linkComponent}) { +export default function Links({ links, linkComponent, className }) { return ( - {links.map((link, i) => - {React.createElement(linkComponent, {link})} - )} + {links.map((link, i) => + + {React.createElement(linkComponent, { link })} + , + )} ); } diff --git a/packages/vx-network/src/Nodes.js b/packages/vx-network/src/Nodes.js index 764e6d661..db868023f 100644 --- a/packages/vx-network/src/Nodes.js +++ b/packages/vx-network/src/Nodes.js @@ -1,15 +1,20 @@ import React from 'react'; - -import {Group} from '@vx/group'; - +import cx from 'classnames'; +import { Group } from '@vx/group'; import Graph from './Graph'; -export default function Nodes({nodes, nodeComponent}) { - return ( {nodes.map( - (node, i) => - - {React.createElement(nodeComponent, {node})} - - )} - ); +export default function Nodes({ nodes, nodeComponent, className }) { + return ( + + {nodes.map((node, i) => + + {React.createElement(nodeComponent, { node })} + , + )} + + ); } diff --git a/packages/vx-network/src/index.js b/packages/vx-network/src/index.js index 1e448d39d..0ff8d2783 100644 --- a/packages/vx-network/src/index.js +++ b/packages/vx-network/src/index.js @@ -1,5 +1,5 @@ -export {default as Graph} from './Graph'; -export {default as Links} from './Links'; -export {default as Nodes} from './Nodes'; -export {default as DefaultLink} from './DefaultLink'; -export {default as DefaultNode} from './DefaultNode'; +export { default as Graph } from './Graph'; +export { default as Links } from './Links'; +export { default as Nodes } from './Nodes'; +export { default as DefaultLink } from './DefaultLink'; +export { default as DefaultNode } from './DefaultNode'; From f63af8ae3f2a1b9f041667e8df14d1ea98ea48f7 Mon Sep 17 00:00:00 2001 From: Harry Shoff Date: Mon, 14 Aug 2017 12:38:40 -0700 Subject: [PATCH 2/4] [geo] graticule foreGround => foreground --- packages/vx-geo/src/graticule/Graticule.js | 6 ++--- packages/vx-geo/src/projections/Projection.js | 25 +++++++++++-------- 2 files changed, 18 insertions(+), 13 deletions(-) diff --git a/packages/vx-geo/src/graticule/Graticule.js b/packages/vx-geo/src/graticule/Graticule.js index cb14c3e5b..f39972fac 100644 --- a/packages/vx-geo/src/graticule/Graticule.js +++ b/packages/vx-geo/src/graticule/Graticule.js @@ -45,10 +45,10 @@ export default function Graticule({ stroke="black" {...additionalProps(restProps, { ...line, - index: i + index: i, })} /> - + , )} {outline && geoOrthographic(), albers: () => geoAlbers(), - mercator: () => geoMercator() + mercator: () => geoMercator(), }; /** @@ -53,13 +58,13 @@ export default function Projection({ return ( {graticule && - !graticule.foreGround && + !graticule.foreground && path(g)} {...graticule} />} {graticuleLines && - !graticuleLines.foreGround && + !graticuleLines.foreground && path(g)} {...graticuleLines} />} {graticuleOutline && - !graticuleOutline.foreGround && + !graticuleOutline.foreground && path(g)} {...graticuleOutline} />} {data.map((feature, i) => { @@ -73,7 +78,7 @@ export default function Projection({ {...additionalProps(restProps, { ...feature, index: i, - centroid: c + centroid: c, })} /> {centroid && centroid(c, feature)} @@ -84,13 +89,13 @@ export default function Projection({ {projectionFunc && projectionFunc(currProjection)} {graticule && - graticule.foreGround && + graticule.foreground && path(g)} {...graticule} />} {graticuleLines && - graticuleLines.foreGround && + graticuleLines.foreground && path(g)} {...graticuleLines} />} {graticuleOutline && - graticuleOutline.foreGround && + graticuleOutline.foreground && path(g)} {...graticuleOutline} />} ); @@ -110,5 +115,5 @@ Projection.propTypes = { fitExtent: PropTypes.array, fitSize: PropTypes.array, centroid: PropTypes.func, - className: PropTypes.string + className: PropTypes.string, }; From c37cb4b0ac0a061a9d2a8b5b2b6d350c57f808af Mon Sep 17 00:00:00 2001 From: Harry Shoff Date: Mon, 14 Aug 2017 12:41:09 -0700 Subject: [PATCH 3/4] [geo] fix projection classname test --- packages/vx-geo/src/projections/Projection.js | 4 ++-- packages/vx-geo/test/Projection.test.js | 24 +++++++++++++------ 2 files changed, 19 insertions(+), 9 deletions(-) diff --git a/packages/vx-geo/src/projections/Projection.js b/packages/vx-geo/src/projections/Projection.js index 193e1b807..f61199ece 100644 --- a/packages/vx-geo/src/projections/Projection.js +++ b/packages/vx-geo/src/projections/Projection.js @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import classnames from 'classnames'; +import cx from 'classnames'; import { Group } from '@vx/group'; import additionalProps from '../util/additionalProps'; import Graticule from '../graticule/Graticule'; @@ -73,7 +73,7 @@ export default function Projection({ return ( ', () => { // TopoJSON with two polygons - const data = feature(topology, topology.objects.collection).features; + const data = feature(topology, topology.objects.collection) + .features; const props = { data }; test('it should be defined', () => { @@ -14,9 +15,11 @@ describe('', () => { }); test('it should pass className', () => { - const wrapper = shallow(); + const wrapper = shallow( + , + ); expect(wrapper.find('path').get(0).props.className).toBe( - 'vx-mercator vx-new' + 'vx-geo-mercator vx-new', ); }); @@ -26,14 +29,19 @@ describe('', () => { }); test('it should pass prop to path', () => { - const wrapper = shallow( 'red'} {...props} />); + const wrapper = shallow( + 'red'} {...props} />, + ); expect(wrapper.find('path').get(0).props.stroke).toBe('red'); expect(wrapper.find('path').get(1).props.stroke).toBe('red'); }); test('it should pass prop to specific path', () => { const wrapper = shallow( - data.id === 'poly2' && 'red'} {...props} /> + data.id === 'poly2' && 'red'} + {...props} + />, ); expect(wrapper.find('path').get(0).props.fill).not.toBe('red'); expect(wrapper.find('path').get(1).props.fill).toBe('red'); @@ -42,14 +50,16 @@ describe('', () => { test('it should call projectionFunc prop function', () => { const projectionFunc = jest.fn(); const wrapper = shallow( - + , ); expect(projectionFunc).toHaveBeenCalledTimes(1); }); test('it should call centroid prop function', () => { const centroid = jest.fn(); - const wrapper = shallow(); + const wrapper = shallow( + , + ); expect(centroid).toHaveBeenCalledTimes(2); }); }); From 7c36ef0bea842e4cd82f973d70ad88f65b31e74e Mon Sep 17 00:00:00 2001 From: Harry Shoff Date: Mon, 14 Aug 2017 13:07:45 -0700 Subject: [PATCH 4/4] [demo] update geo tile colors --- packages/vx-demo/components/gallery.js | 10 ++++- .../vx-demo/components/tiles/geo-mercator.js | 37 +++++++++++++++---- 2 files changed, 38 insertions(+), 9 deletions(-) diff --git a/packages/vx-demo/components/gallery.js b/packages/vx-demo/components/gallery.js index ac069dfeb..f8fe5a550 100644 --- a/packages/vx-demo/components/gallery.js +++ b/packages/vx-demo/components/gallery.js @@ -535,7 +535,7 @@ export default class Gallery extends React.Component {
-
+
Geo
{``}
@@ -554,7 +554,13 @@ export default class Gallery extends React.Component {
-
+
Network
{``}
diff --git a/packages/vx-demo/components/tiles/geo-mercator.js b/packages/vx-demo/components/tiles/geo-mercator.js index 243f17c01..09546b4b2 100644 --- a/packages/vx-demo/components/tiles/geo-mercator.js +++ b/packages/vx-demo/components/tiles/geo-mercator.js @@ -1,5 +1,6 @@ import React from 'react'; -import { GradientTealBlue, RadialGradient } from '@vx/gradient'; +import { scaleQuantize } from '@vx/scale'; +import { GradientTealBlue, LinearGradient } from '@vx/gradient'; import { Mercator } from '@vx/geo'; import * as topojson from 'topojson-client'; import topology from '../../static/vx-geo/world-topo.json'; @@ -9,12 +10,33 @@ export default ({ width, height, events = false }) => { const world = topojson.feature(topology, topology.objects.units); + const color = scaleQuantize({ + domain: [ + Math.min( + ...world.features.map(f => f.geometry.coordinates.length), + ), + Math.max( + ...world.features.map(f => f.geometry.coordinates.length), + ), + ], + range: [ + '#ffb01d', + '#ffa020', + '#ff9221', + '#ff8424', + '#ff7425', + '#fc5e2f', + '#f94b3a', + '#f63a48', + ], + }); + return ( - { y={0} width={width} height={height} - fill={`url(#geo_mercator_radial)`} + fill={`#f9f7e8`} rx={14} /> '#8be4c5'} - stroke={() => '#5fcfa7'} + fill={feature => color(feature.geometry.coordinates.length)} + stroke={() => '#f9f7e8'} + strokeWidth={0.5} onClick={data => event => { if (!events) return; alert(`Clicked: ${data.properties.name} (${data.id})`);