[network][geo][demo] polish for v0.0.135

packages/vx-demo/components/gallery.js

@@ -535,7 +535,7 @@ export default class Gallery extends React.Component {
                 <div className="image">
                   <GeoMercator width={t18[0]} height={t18[1]} />
                 </div>
-                <div className="details" style={{ color: '#ffffff', textShadow: '0 0 1px #333' }}>
+                <div className="details" style={{ color: '#f63a48' }}>
                   <div className="title">Geo</div>
                   <div className="description">
                     <pre>{`<Geo.Mercator />`}</pre>
@@ -554,7 +554,13 @@ export default class Gallery extends React.Component {
                 <div className="image">
                   <Network width={t19[0]} height={t19[1]} />
                 </div>
-                <div className="details" style={{ color: '#ffffff', textShadow: '0 0 1px #333' }}>
+                <div
+                  className="details"
+                  style={{
+                    color: '#ffffff',
+                    textShadow: '0 0 1px #333',
+                  }}
+                >
                   <div className="title">Network</div>
                   <div className="description">
                     <pre>{`<Network />`}</pre>

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,28 +10,50 @@ 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 (
     <svg width={width} height={height}>
-      <RadialGradient
+      <LinearGradient
         id="geo_mercator_radial"
-        from="#55bdd5"
-        to="#4f3681"
+        from="#dc22af"
+        to="#fd7e0f"
         r={'80%'}
       />
       <rect
         x={0}
         y={0}
         width={width}
         height={height}
-        fill={`url(#geo_mercator_radial)`}
+        fill={`#f9f7e8`}
         rx={14}
       />
       <Mercator
         data={world.features}
         scale={width / 630 * 100}
         translate={[width / 2, height / 2 + 50]}
-        fill={() => '#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})`);

packages/vx-geo/src/graticule/Graticule.js

@@ -45,10 +45,10 @@ export default function Graticule({
               stroke="black"
               {...additionalProps(restProps, {
                 ...line,
-                index: i
+                index: i,
               })}
             />
-          </g>
+          </g>,
         )}
       {outline &&
         <path
@@ -64,5 +64,5 @@ export default function Graticule({
 Graticule.propTypes = {
   graticule: PropTypes.func,
   lines: PropTypes.func,
-  outline: PropTypes.func
+  outline: PropTypes.func,
 };

packages/vx-geo/src/projections/Projection.js

@@ -1,16 +1,21 @@
 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';
-import { geoOrthographic, geoAlbers, geoMercator, geoPath } from 'd3-geo';
+import {
+  geoOrthographic,
+  geoAlbers,
+  geoMercator,
+  geoPath,
+} from 'd3-geo';
 
 // TODO: Implement all projections of d3-geo
 const projectionMapping = {
   orthographic: () => geoOrthographic(),
   albers: () => geoAlbers(),
-  mercator: () => geoMercator()
+  mercator: () => geoMercator(),
 };
 
 /**
@@ -53,13 +58,13 @@ export default function Projection({
   return (
     <Group className={`vx-geo`}>
       {graticule &&
-        !graticule.foreGround &&
+        !graticule.foreground &&
         <Graticule graticule={g => path(g)} {...graticule} />}
       {graticuleLines &&
-        !graticuleLines.foreGround &&
+        !graticuleLines.foreground &&
         <Graticule lines={g => path(g)} {...graticuleLines} />}
       {graticuleOutline &&
-        !graticuleOutline.foreGround &&
+        !graticuleOutline.foreground &&
         <Graticule outline={g => path(g)} {...graticuleOutline} />}
 
       {data.map((feature, i) => {
@@ -68,12 +73,12 @@ export default function Projection({
         return (
           <g key={`${projection}-${i}`}>
             <path
-              className={`vx-geo-${projection}`}
+              className={cx(`vx-geo-${projection}`, className)}
               d={path(feature)}
               {...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 &&
         <Graticule graticule={g => path(g)} {...graticule} />}
       {graticuleLines &&
-        graticuleLines.foreGround &&
+        graticuleLines.foreground &&
         <Graticule lines={g => path(g)} {...graticuleLines} />}
       {graticuleOutline &&
-        graticuleOutline.foreGround &&
+        graticuleOutline.foreground &&
         <Graticule outline={g => path(g)} {...graticuleOutline} />}
     </Group>
   );
@@ -110,5 +115,5 @@ Projection.propTypes = {
   fitExtent: PropTypes.array,
   fitSize: PropTypes.array,
   centroid: PropTypes.func,
-  className: PropTypes.string
+  className: PropTypes.string,
 };

packages/vx-geo/test/Projection.test.js

@@ -6,17 +6,20 @@ import { feature } from 'topojson-client';
 
 describe('<Projection />', () => {
   // 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', () => {
     expect(Projection).toBeDefined();
   });
 
   test('it should pass className', () => {
-    const wrapper = shallow(<Projection className="vx-new" {...props} />);
+    const wrapper = shallow(
+      <Projection className="vx-new" {...props} />,
+    );
     expect(wrapper.find('path').get(0).props.className).toBe(
-      'vx-mercator vx-new'
+      'vx-geo-mercator vx-new',
     );
   });
 
@@ -26,14 +29,19 @@ describe('<Projection />', () => {
   });
 
   test('it should pass prop to path', () => {
-    const wrapper = shallow(<Projection stroke={data => 'red'} {...props} />);
+    const wrapper = shallow(
+      <Projection stroke={data => '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(
-      <Projection fill={data => data.id === 'poly2' && 'red'} {...props} />
+      <Projection
+        fill={data => 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('<Projection />', () => {
   test('it should call projectionFunc prop function', () => {
     const projectionFunc = jest.fn();
     const wrapper = shallow(
-      <Projection projectionFunc={projectionFunc} {...props} />
+      <Projection projectionFunc={projectionFunc} {...props} />,
     );
     expect(projectionFunc).toHaveBeenCalledTimes(1);
   });
 
   test('it should call centroid prop function', () => {
     const centroid = jest.fn();
-    const wrapper = shallow(<Projection centroid={centroid} {...props} />);
+    const wrapper = shallow(
+      <Projection centroid={centroid} {...props} />,
+    );
     expect(centroid).toHaveBeenCalledTimes(2);
   });
 });

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": {

packages/vx-network/src/DefaultLink.js

@@ -1,8 +1,15 @@
 import React from 'react';
 
-export default function DefaultLink({link}) {
-  return <line x1={link.source.x} y1={link.source.y}
-               x2={link.target.x} y2={link.target.y}
-               strokeWidth={2} stroke="#999" strokeOpacity={0.6}
-  />;
+export default function DefaultLink({ link }) {
+  return (
+    <line
+      x1={link.source.x}
+      y1={link.source.y}
+      x2={link.target.x}
+      y2={link.target.y}
+      strokeWidth={2}
+      stroke="#999"
+      strokeOpacity={0.6}
+    />
+  );
 }

packages/vx-network/src/DefaultNode.js

@@ -1,5 +1,5 @@
 import React from 'react';
 
 export default function DefaultNode() {
-  return (<circle r={15} fill="#21D4FD"/>);
+  return <circle r={15} fill="#21D4FD" />;
 }

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 (
     <Group>
-      <Links links={graph.links} linkComponent={linkComponent}/>
-      <Nodes nodes={graph.nodes} nodeComponent={nodeComponent}/>
+      <Links links={graph.links} linkComponent={linkComponent} />
+      <Nodes nodes={graph.nodes} nodeComponent={nodeComponent} />
     </Group>
   );
-}
+}

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 (
     <Group>
-      {links.map((link, i) => <Group className='links' key={`network-link-${i}`}>
-        {React.createElement(linkComponent, {link})}
-      </Group>)}
+      {links.map((link, i) =>
+        <Group
+          className={cx('vx-network-links', className)}
+          key={`network-link-${i}`}
+        >
+          {React.createElement(linkComponent, { link })}
+        </Group>,
+      )}
     </Group>
   );
 }

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 (<Group> {nodes.map(
-    (node, i) =>
-      <Group key={`network-node-${i}`} transform={`translate(${node.x}, ${node.y})`} >
-        {React.createElement(nodeComponent, {node})}
-      </Group>
-  )}
-  </Group>);
+export default function Nodes({ nodes, nodeComponent, className }) {
+  return (
+    <Group>
+      {nodes.map((node, i) =>
+        <Group
+          key={`network-node-${i}`}
+          className={cx('vx-network-nodes', className)}
+          transform={`translate(${node.x}, ${node.y})`}
+        >
+          {React.createElement(nodeComponent, { node })}
+        </Group>,
+      )}
+    </Group>
+  );
 }

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';