@vx/shape - npm Package Compare versions

Comparing version 0.0.162 to 0.0.164

build/shapes/Pie.js

@@ -50,4 +50,5 @@ 'use strict';
       pieSort = _ref.pieSort,
+      pieSortValues = _ref.pieSortValues,
       pieValue = _ref.pieValue,
-      restProps = _objectWithoutProperties(_ref, ['className', 'top', 'left', 'data', 'centroid', 'innerRadius', 'outerRadius', 'cornerRadius', 'startAngle', 'endAngle', 'padAngle', 'padRadius', 'pieSort', 'pieValue']);
+      restProps = _objectWithoutProperties(_ref, ['className', 'top', 'left', 'data', 'centroid', 'innerRadius', 'outerRadius', 'cornerRadius', 'startAngle', 'endAngle', 'padAngle', 'padRadius', 'pieSort', 'pieSortValues', 'pieValue']);
 
@@ -61,4 +62,7 @@ var path = (0, _d3Shape.arc)();
   if (pieSort) pie.sort(pieSort);
+  if (pieSortValues) pie.sortValues(pieSortValues);
   if (pieValue) pie.value(pieValue);
-  if (padAngle) pie.padAngle(padAngle);
+  if (padAngle != null) pie.padAngle(padAngle);
+  if (startAngle != null) pie.startAngle(startAngle);
+  if (endAngle != null) pie.endAngle(endAngle);
   var arcs = pie(data);
@@ -65,0 +69,0 @@ return _react2.default.createElement(

package.json

 {
   "name": "@vx/shape",
-  "version": "0.0.162",
+  "version": "0.0.164",
   "description": "vx shape",
@@ -5,0 +5,0 @@ "sideEffects": false,

Readme.md

@@ -231,3 +231,44 @@ # @vx/shape
 
+## `<Pie />`
 
+![Pie Example](https://i.imgur.com/OLKpcX1.png)
+
+```js
+<Pie
+  data={browsers}
+  pieValue={d => d.usage}
+  outerRadius={radius - 80}
+  innerRadius={radius - 120}
+  fill="white"
+  fillOpacity={d => 1 / (d.index + 2) }
+  cornerRadius={3}
+  padAngle={0}
+  centroid={(centroid, arc) => {
+    const [x, y] = centroid;
+    const { startAngle, endAngle } = arc;
+    if (endAngle - startAngle < .1) return null;
+    return <Label x={x} y={y}>{arc.data.label}</Label>;
+  }}
+/>
+```
+
+### Properties
+| Name          | Default | Type     | Description                                                                                                                        |
+| :------------ | :------ | :------- | :--------------------------------------------------------------------------------------------------------------------------------- |
+| className     |         | string   | The class for the <path /> element.                                                                                                |
+| top           | 0       | number   | The distance in pixels from the top.                                                                                               |
+| left          | 0       | number   | The distance in pixels from the left.                                                                                              |
+| data          |         | array    | An array of data elements.                                                                                                         |
+| pieValue      |         | function | A function that takes a data element and returns the value for the corresponding pie’s slice.                                      |
+| innerRadius   | 0       | number   | The distance of arcs’ inner side from the center of the pie. Make it non-zero to have a “donut” chart.                             |
+| outerRadius   |         | number   | The total radius of the pie.                                                                                                       |
+| cornerRadius  | 0       | number   | The corner radius of pie arcs in pixels.                                                                                           |
+| startAngle    | 0       | number   | The angle in radians at which the pie should start.                                                                                |
+| endAngle      | 2π      | number   | The angle in radians at which the pie should end.                                                                                  |
+| padAngle      | 0       | number   | The pad (or gutter) between arcs in radians.                                                                                       |
+| padRadius     |         | number   | Set the arc [padRadius](https://github.com/d3/d3-shape#arc_padRadius)                                                              |
+| pieSort       |         | function | A comparator function which takes two data elements and returns `-1`, `0` or `+1` to sort arcs.                                    |
+| pieSortValues |         | function | A comparator function which takes two values (as returned from `pieValue`) and returns `-1`, `0` or `+1` to sort arcs.             |
+| centroid      |         | function | A render function which takes a [centroid](https://github.com/d3/d3-shape#arc_centroid) and an `arc` argument called for each arc. |
+
 ## Sources For Components
@@ -239,2 +280,3 @@ + [`<AreaClosed />`](https://github.com/hshoff/vx/blob/master/packages/vx-shape/src/shapes/AreaClosed.js)
 + [`<LinePath />`](https://github.com/hshoff/vx/blob/master/packages/vx-shape/src/shapes/LinePath.js)
-+ [`<LineRadial />`](https://github.com/hshoff/vx/blob/master/packages/vx-shape/src/shapes/LinkRadial.js)
++ [`<LineRadial />`](https://github.com/hshoff/vx/blob/master/packages/vx-shape/src/shapes/LineRadial.js)
++ [`<Pie />`](https://github.com/hshoff/vx/blob/master/packages/vx-shape/src/shapes/Pie.js)

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

106069

increased by3.66%

Lines of code

2134

increased by0.19%

Number of lines in readme file

281

increased by17.57%

No dependency changes