react-simple-maps - npm Package Compare versions

Comparing version 0.12.0 to 0.12.1

lib/Annotation.js

@@ -69,3 +69,3 @@ "use strict";
           degrees = 90;
-      var isGlobe = projection.clipAngle() === degrees;
+      var isGlobe = projection.clipAngle && projection.clipAngle() === degrees;
       var isHidden = isGlobe && (0, _d3Geo.geoLength)(lineString) > radians;
@@ -72,0 +72,0 @@

lib/Line.js

@@ -196,3 +196,3 @@ "use strict";
           degrees = 90;
-      var isGlobe = projection.clipAngle() === degrees;
+      var isGlobe = projection.clipAngle && projection.clipAngle() === degrees;
       var isHidden = isGlobe && ((0, _d3Geo.geoLength)(startLineString) > radians || (0, _d3Geo.geoLength)(endLineString) > radians);
@@ -199,0 +199,0 @@

lib/Marker.js

@@ -191,3 +191,3 @@ "use strict";
           degrees = 90;
-      var isGlobe = projection.clipAngle() === degrees;
+      var isGlobe = projection.clipAngle && projection.clipAngle() === degrees;
       var isHidden = isGlobe && (0, _d3Geo.geoLength)(lineString) > radians;
@@ -194,0 +194,0 @@

lib/utils.js

@@ -22,2 +22,3 @@ "use strict";
 function calculateResizeFactor(actualDimension, baseDimension) {
+  if (actualDimension === 0) return 1;
   return 1 / 100 * (100 / actualDimension * baseDimension);
@@ -24,0 +25,0 @@ }

package.json

 {
   "name": "react-simple-maps",
-  "version": "0.12.0",
+  "version": "0.12.1",
   "description": "An svg map component built with and for React",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -30,3 +30,2 @@ # react-simple-maps
 import {
-
   ComposableMap,
@@ -78,2 +77,5 @@ ZoomableGroup,
     </Markers>
+    <Lines>
+      <Line />
+    </Lines>
     <Annotation />
@@ -98,2 +100,5 @@ </ZoomableGroup>
     </g>
+    <g class="rsm-lines">
+      <path class="rsm-line"></g>
+    </g>
     <g class="rsm-annotation"></g>
@@ -118,2 +123,4 @@ </g>
 - [`<Graticule />`](#Graticule-component)
+- [`<Lines />`](#Lines-component)
+- [`<Line />`](#Line-component)
 
@@ -660,3 +667,120 @@
 
+#### <a name="Lines-component"></a> `<Lines />`
+In general `<Lines />` and `<Line />` components work the same way as `<Markers />` and `<Marker />` components, with a slight change in it's API.
+
+`<Lines />` is a simple wrapper component for the individual line.
+
+
+#### <a name="Line-component"></a> `<Line />`
+
+The `<Line />` component represents each line and uses two coordinates (start and end) to position the line on the map. By default a straight line is rendered, so you have to specify yourself what shape it should have. See the example below for how to make the recommended curved line. The component can be used to assign events to individual lines on the map, and to specify the hover, focus and click behavior. You can also choose to preserve the lines aspect/size when in a `<ZoomableGroup />` via the `preserveMarkerAspect` prop.
+
+##### Props
+
+| Property            | Type             | Default                        |
+| --------------------| :--------------- | :----------------------------- |
+| line                | Object           | *see below examples            |
+| tabable             | Boolean          | true                           |
+| style               | Object           | *see below examples            |
+| preserveMarkerAspect| Boolean          | true                           |
+| buildPath           | Function         | *see below examples            |
+##### Line location
+
+Line data is added to the `line` prop and should contain the coordinates of the line.
+
+```js
+<Lines>
+  <Line
+    line={{
+      coordinates: {
+        start: [0, 0],
+        end: [-99.1, 19.4]
+      }
+    }}
+  />
+</Lines>
+```
+
+##### Styling and shape
+
+There are no styles assigned to the style prop.
+
+```js
+...
+<Line
+  line={{
+      coordinates: {
+        start: [0, 0],
+        end: [-99.1, 19.4]
+      }
+    }}
+  style={{
+    default: { fill: "#666" },
+    hover:   { fill: "#999" },
+    pressed: { fill: "#000" },
+  }}
+/>
+...
+```
+
+##### Shaping the line
+By default the line will be drawn as a straight `<path />`, if you wish to curve the line in a custom way you need to define a build function. This build function receives the `start` and `end` coordinates with the map projection already applied. The third argument corresponds to the `line` prop provided to the `<Line />` component. The returned value will be applied to the resulting `<path />` as the `d` property.
+
+If you wish to know more about what you can achieve with the `buildPath` prop, checkout [MDN's Path documentation](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths).
+
+```js
+...
+// This funtion returns a curve command that builds a quadratic curve.
+// And depending on the line's curveStyle property it curves in one direction or the other.
+buildCurves(start, end, line) {
+  const x0 = start[0];
+  const x1 = end[0];
+  const y0 = start[1];
+  const y1 = end[1];
+  const curve = {
+    forceUp: `${x1} ${y0}`,
+    forceDown: `${x0} ${y1}`
+  }[line.curveStyle];
+
+  return `M ${start.join(' ')} Q ${curve} ${end.join(' ')}`;
+}
+...
+<Line
+  line={{
+      coordinates: {
+        start: [0, 0],
+        end: [-99.1, 19.4]
+      }
+    }}
+  buildPath={this.buildCurves}
+/>
+```
+##### Line events and passing line data to line events
+
+In order to allow easy access to line data when handling events, pass the line data to the `line` prop. Below is an example of how to iterate through lines.
+
+```js
+...
+handleClick(line, evt) {
+  console.log("Line data: ", line)
+}
+...
+<Lines>
+  { lines.map((line, i) => (
+    <Line
+      key={ i }
+      line={ line }
+      onClick={ this.handleClick }
+    />
+  ))}
+</Lines>
+...
+```
+
+Currently supported events are `onMouseEnter`, `onMouseLeave`, `onMouseDown`, `onMouseUp`, `onClick`, `onMouseMove`, `onFocus`, `onBlur`.
+
+If you wish to see a real code example check it out [here](https://github.com/Vizzuality/trase/blob/develop/frontend/scripts/react-components/shared/world-map/world-map.component.jsx).
+Otherwise go check it out live at [trase.earth](https://trase.earth).
+
 ### License
 MIT licensed. Copyright (c) Richard Zimerman 2017. See [LICENSE.md](https://github.com/zcreativelabs/react-simple-maps/blob/master/LICENSE) for more details.

tests/utils.spec.js

@@ -49,9 +49,13 @@
   it("should return proper dimensions for variable ratios", () => {
-    const actualDimension = 1600
-    const baseDimension = 800
+    const actualDimension = [1600, 0]
+    const baseDimension = [800, 960]
 
-    const actual = calculateResizeFactor(actualDimension, baseDimension)
-    const expected = 0.5
+    const actual = [
+        calculateResizeFactor(actualDimension[0], baseDimension[0]),
+        calculateResizeFactor(actualDimension[1], baseDimension[1]),
+    ]
+    const expected = [0.5, 1]
 
-    expect(actual).toEqual(expected)
+    expect(actual[0]).toEqual(expected[0])
+    expect(actual[1]).toEqual(expected[1])
   })
@@ -58,0 +62,0 @@ })

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

116338

increased by3.97%

Lines of code

1951

increased by0.26%

Number of lines in readme file

782

increased by18.84%

No dependency changes