From a581ef0ab9848e625d527b8df068ad5bcf587074 Mon Sep 17 00:00:00 2001 From: Loren Riesenfeld Date: Tue, 8 Jan 2019 17:21:26 -0500 Subject: [PATCH 1/3] Add Equal Earth projection --- packages/vx-geo/package.json | 2 +- packages/vx-geo/src/index.js | 1 + packages/vx-geo/src/projections/EqualEarth.js | 9 ++++++ packages/vx-geo/src/projections/Projection.js | 32 +++++++++++++------ packages/vx-geo/test/EqualEarth.test.js | 9 ++++++ 5 files changed, 42 insertions(+), 11 deletions(-) create mode 100644 packages/vx-geo/src/projections/EqualEarth.js create mode 100644 packages/vx-geo/test/EqualEarth.test.js diff --git a/packages/vx-geo/package.json b/packages/vx-geo/package.json index eb8615330..a89ba593f 100644 --- a/packages/vx-geo/package.json +++ b/packages/vx-geo/package.json @@ -38,7 +38,7 @@ "dependencies": { "@vx/group": "0.0.183", "classnames": "^2.2.5", - "d3-geo": "^1.6.4", + "d3-geo": "^1.11.3", "prop-types": "^15.5.10" }, "devDependencies": { diff --git a/packages/vx-geo/src/index.js b/packages/vx-geo/src/index.js index 1c33fe17b..6c9476ff9 100644 --- a/packages/vx-geo/src/index.js +++ b/packages/vx-geo/src/index.js @@ -2,4 +2,5 @@ export { default as Albers } from './projections/Albers'; export { default as Mercator } from './projections/Mercator'; export { default as Orthographic } from './projections/Orthographic'; export { default as NaturalEarth } from './projections/NaturalEarth'; +export { default as EqualEarth } from './projections/EqualEarth'; export { default as Graticule } from './graticule/Graticule'; diff --git a/packages/vx-geo/src/projections/EqualEarth.js b/packages/vx-geo/src/projections/EqualEarth.js new file mode 100644 index 000000000..1ac306f3f --- /dev/null +++ b/packages/vx-geo/src/projections/EqualEarth.js @@ -0,0 +1,9 @@ +import React from 'react'; +import Projection from './Projection'; + +/** + * All props pass through to `` + */ +export default function EqualEarth(props) { + return ; +} diff --git a/packages/vx-geo/src/projections/Projection.js b/packages/vx-geo/src/projections/Projection.js index f9a276300..26eea33a4 100644 --- a/packages/vx-geo/src/projections/Projection.js +++ b/packages/vx-geo/src/projections/Projection.js @@ -3,14 +3,22 @@ import PropTypes from 'prop-types'; import cx from 'classnames'; import { Group } from '@vx/group'; import Graticule from '../graticule/Graticule'; -import { geoOrthographic, geoAlbers, geoMercator, geoNaturalEarth1, geoPath } from 'd3-geo'; +import { + geoOrthographic, + geoAlbers, + geoMercator, + geoNaturalEarth1, + geoEqualEarth, + geoPath +} from 'd3-geo'; // TODO: Implement all projections of d3-geo const projectionMapping = { orthographic: () => geoOrthographic(), albers: () => geoAlbers(), mercator: () => geoMercator(), - naturalEarth: () => geoNaturalEarth1() + naturalEarth: () => geoNaturalEarth1(), + equalEarth: () => geoEqualEarth() }; Projection.propTypes = { @@ -89,10 +97,12 @@ export default function Projection({ return ( {graticule && !graticule.foreground && path(g)} {...graticule} />} - {graticuleLines && - !graticuleLines.foreground && path(g)} {...graticuleLines} />} - {graticuleOutline && - !graticuleOutline.foreground && path(g)} {...graticuleOutline} />} + {graticuleLines && !graticuleLines.foreground && ( + path(g)} {...graticuleLines} /> + )} + {graticuleOutline && !graticuleOutline.foreground && ( + path(g)} {...graticuleOutline} /> + )} {features.map((feature, i) => { return ( @@ -111,10 +121,12 @@ export default function Projection({ {projectionFunc && projectionFunc(currProjection)} {graticule && graticule.foreground && path(g)} {...graticule} />} - {graticuleLines && - graticuleLines.foreground && path(g)} {...graticuleLines} />} - {graticuleOutline && - graticuleOutline.foreground && path(g)} {...graticuleOutline} />} + {graticuleLines && graticuleLines.foreground && ( + path(g)} {...graticuleLines} /> + )} + {graticuleOutline && graticuleOutline.foreground && ( + path(g)} {...graticuleOutline} /> + )} ); } diff --git a/packages/vx-geo/test/EqualEarth.test.js b/packages/vx-geo/test/EqualEarth.test.js new file mode 100644 index 000000000..1206103c0 --- /dev/null +++ b/packages/vx-geo/test/EqualEarth.test.js @@ -0,0 +1,9 @@ +import React from 'react'; +import { shallow } from 'enzyme'; +import { EqualEarth } from '../src'; + +describe('', () => { + test('it should be defined', () => { + expect(EqualEarth).toBeDefined(); + }); +}); \ No newline at end of file From d7918717deb6b0c140f751524f8983293811c108 Mon Sep 17 00:00:00 2001 From: Loren Riesenfeld Date: Tue, 8 Jan 2019 18:03:44 -0500 Subject: [PATCH 2/3] set projection to equalEarth for docs --- packages/vx-geo/src/projections/EqualEarth.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vx-geo/src/projections/EqualEarth.js b/packages/vx-geo/src/projections/EqualEarth.js index 1ac306f3f..34bd50c39 100644 --- a/packages/vx-geo/src/projections/EqualEarth.js +++ b/packages/vx-geo/src/projections/EqualEarth.js @@ -2,7 +2,7 @@ import React from 'react'; import Projection from './Projection'; /** - * All props pass through to `` + * All props pass through to `` */ export default function EqualEarth(props) { return ; From ec11beb2440c411ebd577801cdeaf94f838a968e Mon Sep 17 00:00:00 2001 From: Loren Riesenfeld Date: Tue, 8 Jan 2019 18:04:26 -0500 Subject: [PATCH 3/3] [docs] update docs --- packages/vx-demo/static/docs/vx-bounds.html | 2 +- packages/vx-demo/static/docs/vx-geo.html | 4 ++++ packages/vx-demo/static/docs/vx-mock-data.html | 14 +++++++------- packages/vx-demo/static/docs/vx-pattern.html | 8 ++++---- packages/vx-demo/static/docs/vx-point.html | 4 ++-- packages/vx-demo/static/docs/vx-responsive.html | 8 ++++---- packages/vx-demo/static/docs/vx-tooltip.html | 6 +++--- packages/vx-geo/Readme.md | 6 ++++++ packages/vx-geo/docs/api.md | 5 +++++ packages/vx-geo/docs/docs.md | 6 ++++++ 10 files changed, 42 insertions(+), 21 deletions(-) diff --git a/packages/vx-demo/static/docs/vx-bounds.html b/packages/vx-demo/static/docs/vx-bounds.html index c51014bb1..8ea631275 100644 --- a/packages/vx-demo/static/docs/vx-bounds.html +++ b/packages/vx-demo/static/docs/vx-bounds.html @@ -35,7 +35,7 @@

@vx/bounds

npm install --save @vx/bounds
-

withBoundingRects HOC

+

withBoundingRects HOC

It's often useful to determine whether elements (e.g., tooltips) overflow the bounds of their parent container and adjust positioning accordingly. The withBoundingRects higher-order component is meant to simplify this computation by passing in a component's bounding rect as well as its parent's bounding rect.

Example usage

Example usage with a <Tooltip /> component

diff --git a/packages/vx-demo/static/docs/vx-geo.html b/packages/vx-demo/static/docs/vx-geo.html index e0f428908..a11ca644f 100644 --- a/packages/vx-demo/static/docs/vx-geo.html +++ b/packages/vx-demo/static/docs/vx-geo.html @@ -43,6 +43,7 @@

Installation

  • Graticule
  • Albers
    • +
  • EqualEarth
  • Mercator
  • NaturalEarth
  • Orthographic
    • @@ -60,6 +61,9 @@

    <Graticule />

    <Albers />

    All props pass through to <Projection projection="albers" {...props} />

    +

    <EqualEarth />

    + +

    All props pass through to <Projection projection="equalEarth" {...props} />

    <Mercator />

    All props pass through to <Projection projection="mercator" {...props} />

    diff --git a/packages/vx-demo/static/docs/vx-mock-data.html b/packages/vx-demo/static/docs/vx-mock-data.html index 3c826e1b7..8bbb55ead 100644 --- a/packages/vx-demo/static/docs/vx-mock-data.html +++ b/packages/vx-demo/static/docs/vx-mock-data.html @@ -41,16 +41,16 @@

    Generators

    import Mock from '@vx/mock-data';
 const points = Mock.genRandomNormalPoints();
    -

    Mock.genRandomNormalPoints()

    +

    Mock.genRandomNormalPoints()

    Returns a series of random normal x,y points.

    -

    Mock.getDateValue(n)

    +

    Mock.getDateValue(n)

    Generates n date values an hour apart from each other starting with the current time.

    Mocks

    Mock are essentially a bunch of data dumps that you can use like this:

    import Mock from '@vx/mock-data';
 const data = Mock.cityTemperature;
    -

    Mock.appleStock

    +

    Mock.appleStock

    @@ -66,7 +66,7 @@

    Mock.appleStock

    -

    Mock.browserUsage

    +

    Mock.browserUsage

    @@ -103,7 +103,7 @@

    Mock.browserUsage

    -

    Mock.cityTemperature

    +

    Mock.cityTemperature

    @@ -125,7 +125,7 @@

    Mock.cityTemperature

    -

    Mock.groupDateValue

    +

    Mock.groupDateValue

    @@ -144,7 +144,7 @@

    Mock.groupDateValue

    -

    Mock.letterFrequency

    +

    Mock.letterFrequency

    diff --git a/packages/vx-demo/static/docs/vx-pattern.html b/packages/vx-demo/static/docs/vx-pattern.html index 03d717dce..613ed0071 100644 --- a/packages/vx-demo/static/docs/vx-pattern.html +++ b/packages/vx-demo/static/docs/vx-pattern.html @@ -62,15 +62,15 @@

    The Definition Caveat

    Like gradients, patterns are "defined." When you put down a <PatternXYZ />, it's putting a <pattern/> attribute in the SVG.

    It's often better to think of these as variable definitions rather than true DOM elements. When you use fill="url('#pattern')" you're referencing the pattern's id: pattern.

    Pre-Made Patterns

    -

    PatternsCircles

    +

    PatternsCircles

    circles example

    <PatternCircles id="circles" height={6} width={6} stroke={'black'} strokeWidth={1} />
    -

    PatternsHexagons

    +

    PatternsHexagons

    hexagon example

    <PatternHexagons id="hexagons" height={3} size={8} stroke={'red'} strokeWidth={1} />
    -

    PatternsLines

    +

    PatternsLines

    lines example

    <PatternLines
   id="lines"
@@ -81,7 +81,7 @@ 
    PatternsLines
    
   orientation={['diagonal']}
 />
    -

    PatternsWaves

    +

    PatternsWaves

    waves example

    <PatternWaves id="waves" height={4} width={4} stroke={'blue'} strokeWidth={1} />
    diff --git a/packages/vx-demo/static/docs/vx-point.html b/packages/vx-demo/static/docs/vx-point.html index 67c6b83e3..b1e11dc1a 100644 --- a/packages/vx-demo/static/docs/vx-point.html +++ b/packages/vx-demo/static/docs/vx-point.html @@ -44,9 +44,9 @@

    Example Usage

    let array = point.toArray() // Convert point to array

    Methods

    -

    point.value()

    +

    point.value()

    Returns an {x, y} object with the x and y coordinates.

    -

    point.toArray()

    +

    point.toArray()

    Returns the coordinates as an array [x, y].

    diff --git a/packages/vx-demo/static/docs/vx-responsive.html b/packages/vx-demo/static/docs/vx-responsive.html index 59ecf550e..7930f8951 100644 --- a/packages/vx-demo/static/docs/vx-responsive.html +++ b/packages/vx-demo/static/docs/vx-responsive.html @@ -44,7 +44,7 @@

    @vx/responsive

    With Components

    ParentSize

    ScaleSVG

    -

    withScreenSize

    +

    withScreenSize

    If you would like your graph to adapt to the screen size, you can use withScreenSize(). The resulting component will pass screenWidth and screenHeight props to the wrapped component containing the respective screen dimensions.

    Example:

    import { withScreenSize } from '@vx/responsive';
@@ -56,7 +56,7 @@ 
    Example:
    
 
 // ... Render the chartToRender somewhere
    -

    withParentSize

    +

    withParentSize

    If you would like your graph to adapt to it's parent component's size, you can use withParentSize(). The resulting component will pass parentWidth and parentHeight props to the wrapped component containing the respective parent's dimensions.

    Example:

    import { withParentSize } from '@vx/responsive';
@@ -68,7 +68,7 @@ 
    Example:
    
 
 // ... Render the chartToRender somewhere
    -

    ParentSize

    +

    ParentSize

    You might do the same thing using the ParentSize component.

    Example:

    import { ParentSize } from '@vx/responsive';
@@ -95,7 +95,7 @@ 
    Example:
    
 
 // ... Render the chartToRender somewhere
    -

    ScaleSVG

    +

    ScaleSVG

    You can also create a responsive chart with a specific viewBox with the ScaleSVG component.

    Example:

    import { ScaleSVG } from '@vx/responsive';
diff --git a/packages/vx-demo/static/docs/vx-tooltip.html b/packages/vx-demo/static/docs/vx-tooltip.html
index 47ce5d0b1..9f61215b6 100644
--- a/packages/vx-demo/static/docs/vx-tooltip.html
+++ b/packages/vx-demo/static/docs/vx-tooltip.html
@@ -60,7 +60,7 @@ 
    Example:
    
     } = this.props;
 
     return (
-      // note React.Frament is only available in >= react@16.2
+      // note React.Fragment is only available in >= react@16.2
       <React.Fragment>
         <svg width={...} height={...}>
           // Chart here...
@@ -139,7 +139,7 @@ 
    withTooltip(BaseComponent [,

    Components

    -

    +

    Tooltip

    This is a simple Tooltip container component meant to be used to actually render a Tooltip. It accepts the following props, and will spread any additional props on the tooltip container div (i.e., ...restProps):

    @@ -233,7 +233,7 @@

    TooltipWithBounds

    -

    Note that this component is positioned using a tranform, so overriding left and top via styles may have no effect.

    +

    Note that this component is positioned using a transform, so overriding left and top via styles may have no effect.

diff --git a/packages/vx-geo/Readme.md b/packages/vx-geo/Readme.md index 14b4228c0..f0841ea32 100644 --- a/packages/vx-geo/Readme.md +++ b/packages/vx-geo/Readme.md @@ -18,6 +18,7 @@ npm install --save @vx/geo - [Graticule](#graticule-) - [Albers](#albers-) + - [EqualEarth](#equalearth-) - [Mercator](#mercator-) - [NaturalEarth](#naturalearth-) - [Orthographic](#orthographic-) @@ -44,6 +45,11 @@ npm install --save @vx/geo All props pass through to `` +

<EqualEarth />

+ +All props pass through to `` + +

<Mercator />

All props pass through to `` diff --git a/packages/vx-geo/docs/api.md b/packages/vx-geo/docs/api.md index b65f6b44f..edd29b313 100644 --- a/packages/vx-geo/docs/api.md +++ b/packages/vx-geo/docs/api.md @@ -15,6 +15,11 @@ All props pass through to `` +

<EqualEarth />

+ +All props pass through to `` + +

<Mercator />

All props pass through to `` diff --git a/packages/vx-geo/docs/docs.md b/packages/vx-geo/docs/docs.md index 14b4228c0..f0841ea32 100644 --- a/packages/vx-geo/docs/docs.md +++ b/packages/vx-geo/docs/docs.md @@ -18,6 +18,7 @@ npm install --save @vx/geo - [Graticule](#graticule-) - [Albers](#albers-) + - [EqualEarth](#equalearth-) - [Mercator](#mercator-) - [NaturalEarth](#naturalearth-) - [Orthographic](#orthographic-) @@ -44,6 +45,11 @@ npm install --save @vx/geo All props pass through to `` +

<EqualEarth />

+ +All props pass through to `` + +

<Mercator />

All props pass through to ``