From 13a72c94f8e08febd2150ac1700c2c59314880a4 Mon Sep 17 00:00:00 2001 From: Harry Shoff Date: Tue, 18 Sep 2018 17:35:40 -0700 Subject: [PATCH 1/3] [shape] fix rest props --- packages/vx-shape/src/shapes/Polygon.js | 13 ++----------- 1 file changed, 2 insertions(+), 11 deletions(-) diff --git a/packages/vx-shape/src/shapes/Polygon.js b/packages/vx-shape/src/shapes/Polygon.js index 092db2e76..634d052a9 100644 --- a/packages/vx-shape/src/shapes/Polygon.js +++ b/packages/vx-shape/src/shapes/Polygon.js @@ -9,16 +9,12 @@ Polygon.propTypes = { size: PropTypes.number.isRequired, className: PropTypes.string, rotate: PropTypes.number, - fill: PropTypes.string, - strokeDasharray: PropTypes.string, - strokeWidth: PropTypes.number, - stroke: PropTypes.string, }; export const getPoint = ({ sides, size, center, rotate, side, }) => { - const degrees = (360 / sides) * side - rotate; + const degrees = 360 / sides * side - rotate; const radians = degreesToRadians(degrees); return new Point({ @@ -43,11 +39,6 @@ export default function Polygon({ center = new Point({ x: 0, y: 0 }), rotate = 0, className, - clickHandler, - fill, - strokeDasharray, - strokeWidth = 1, - stroke = 'black', ...restProps }) { const points = getPoints({ @@ -59,5 +50,5 @@ export default function Polygon({ .map(p => p.toArray()) .join(' '); - return ; + return ; } From e0314d3b30f789327b0ebd8894110058f10337aa Mon Sep 17 00:00:00 2001 From: Harry Shoff Date: Tue, 18 Sep 2018 17:38:15 -0700 Subject: [PATCH 2/3] [shape] update Readme --- packages/vx-demo/components/tiles/polygons.js | 50 ++++-- packages/vx-shape/Readme.md | 168 +++++++++--------- 2 files changed, 121 insertions(+), 97 deletions(-) diff --git a/packages/vx-demo/components/tiles/polygons.js b/packages/vx-demo/components/tiles/polygons.js index 9f104bd34..ca85821fc 100644 --- a/packages/vx-demo/components/tiles/polygons.js +++ b/packages/vx-demo/components/tiles/polygons.js @@ -2,46 +2,68 @@ import React from 'react'; import { Polygon } from '@vx/shape'; import { Group } from '@vx/group'; import { GradientPinkRed } from '@vx/gradient'; -import { scaleBand } from '@vx/scale'; +import { scaleLinear } from '@vx/scale'; +import { genRandomNormalPoints } from '@vx/mock-data'; + +const points = genRandomNormalPoints(250).filter((d, i) => i < 250); const polygons = [ { - sides: 3, fill: 'rgb(174, 238, 248)', rotate: 90, }, { - sides: 4, fill: 'rgb(229, 253, 61)', rotate: 45, }, { - sides: 6, fill: 'rgb(229, 130, 255)', rotate: 0, }, { - sides: 8, fill: 'url(#polygon-pink)', rotate: 0, }, ]; +const sides = [3, 4, 6, 8]; +const sizes = [2, 24, 5, 10]; +const opacities = [0.8, 0.9, 1]; + export default ({ width, height }) => { - const yScale = scaleBand({ - rangeRound: [0, height], - domain: polygons.map((p, i) => i), - padding: 0.5, + const xScale = scaleLinear({ + domain: [1.3, 2.2], + range: [0, width], + clamp: true, + }); + const yScale = scaleLinear({ + domain: [0.75, 1.6], + range: [height, 0], }); return ( - {polygons.map((polygon, i) => ( - - - - ))} + {points.map((p, i) => { + const randomSize = Math.floor(Math.random() * sizes.length); + const randomSide = Math.floor(Math.random() * sides.length); + const polygon = polygons[Math.floor(Math.random() * polygons.length)]; + const opacity = opacities[Math.floor(Math.random() * opacities.length)]; + const fill = Math.floor(Math.random() * 4) > 0.1; + return ( + + + + ); + })} ); }; diff --git a/packages/vx-shape/Readme.md b/packages/vx-shape/Readme.md index d881cc59f..83bd0cb8a 100644 --- a/packages/vx-shape/Readme.md +++ b/packages/vx-shape/Readme.md @@ -11,9 +11,10 @@ Shapes are the core elements of vx. Most of what you see on the screen, like lin AreaClosed is a closed area under a curve. ### Example + ![AreaClosed Example](http://i.imgur.com/hT0q8qx.png) -``` js +```js ` is used to represent several area's stacked on top of each other. ### Example + ![AreaStack Example](http://i.imgur.com/Gh930t7.png) -``` js +```js xScale(x(d.data))} - y0={(d) => yScale(d[0] / 100)} - y1={(d) => yScale(d[1] / 100)} - stroke={(d,i) => colorScale(i)} + x={d => xScale(x(d.data))} + y0={d => yScale(d[0] / 100)} + y1={d => yScale(d[1] / 100)} + stroke={(d, i) => colorScale(i)} strokeWidth={1} - fillOpacity={(d,i) => selected.includes(browserNames[i]) ? 0.8 : 0.2} - fill={(d,i) => colorScale(i)} + fillOpacity={(d, i) => (selected.includes(browserNames[i]) ? 0.8 : 0.2)} + fill={(d, i) => colorScale(i)} onMouseEnter={(d, i) => event => { - updateSelected((prevState) => ([browserNames[i]])) + updateSelected(prevState => [browserNames[i]]); }} - onMouseLeave={(d,i) => event => { + onMouseLeave={(d, i) => event => { updateSelected(prevState => { if (prevState.includes(browserNames[i])) return []; return prevState; - }) + }); }} /> ``` ### Properties -| Name | Default | Type | Description | -|:--------- |:------- |:-------- |:----------------------------------------------------------------------------------------------------------- | +| Name | Default | Type | Description | +| :-------- | :------ | :------- | :---------------------------------------------------------------------------------------------------------- | | className | | string | The class name for the `path` element. | | top | 0 | number | The margin on top. | | left | 0 | number | The margin on the left. | @@ -103,7 +105,7 @@ A simple rectangle (a `` element) to use in your graphs. ![bar example](http://i.imgur.com/pvV9BJU.png) -``` js +```js ` element) to use in your graphs. ### Properties -| Name | Default | Type | Description | -|:---------------- |:--------- |:------ |:-------------------------------------------------------------- | +| Name | Default | Type | Description | +| :--------------- | :-------- | :----- | :------------------------------------------------------------- | | className | | string | The class name for the `path` element. | | x | 0 | number | A number or function for the x coordinate. | | y | 0 | number | A number or function for the y coordinate. | @@ -155,20 +157,20 @@ A simple rectangle (a `` element) to use in your graphs. ``` ### Properties -| Name | Default | Type | Description | -|:---------------- |:--------- |:-------- |:------------------------------------------------------------------------------------------------------------------------------- | -| data | | array | An array of data elements. | -| className | | string | The class name for the `path` element. | -| top | | number | The margin on top. | -| left | | number | The margin on the left. | -| x0 | | function | xs accessor function. | -| x0Scale | | function | A [scale band function](https://github.com/hshoff/vx/tree/master/packages/vx-scale#band-scaling) for the bar group. | -| x1Scale | | function | A [scale band function](https://github.com/hshoff/vx/tree/master/packages/vx-scale#band-scaling) for each bar within the group. | -| yScale | | function | A [scale function](https://github.com/hshoff/vx/tree/master/packages/vx-scale) for the ys. | -| zScale | | function | A [scale function](https://github.com/hshoff/vx/tree/master/packages/vx-scale) for the keys. | -| keys | | array | A list of data keys | -| height | | number | The pixel height of the bar group. | +| Name | Default | Type | Description | +| :-------- | :------ | :------- | :------------------------------------------------------------------------------------------------------------------------------ | +| data | | array | An array of data elements. | +| className | | string | The class name for the `path` element. | +| top | | number | The margin on top. | +| left | | number | The margin on the left. | +| x0 | | function | xs accessor function. | +| x0Scale | | function | A [scale band function](https://github.com/hshoff/vx/tree/master/packages/vx-scale#band-scaling) for the bar group. | +| x1Scale | | function | A [scale band function](https://github.com/hshoff/vx/tree/master/packages/vx-scale#band-scaling) for each bar within the group. | +| yScale | | function | A [scale function](https://github.com/hshoff/vx/tree/master/packages/vx-scale) for the ys. | +| zScale | | function | A [scale function](https://github.com/hshoff/vx/tree/master/packages/vx-scale) for the keys. | +| keys | | array | A list of data keys | +| height | | number | The pixel height of the bar group. | ## `` @@ -189,19 +191,20 @@ A simple rectangle (a `` element) to use in your graphs. ``` ### Properties -| Name | Default | Type | Description | -|:---------------- |:--------- |:-------- |:------------------------------------------------------------------------------------------------------------------------------- | -| data | | array | An array of data elements. | -| className | | string | The class name for the `path` element. | -| top | | number | The margin on top. | -| left | | number | The margin on the left. | -| y0 | | function | ys accessor function. | -| y0Scale | | function | A [scale band function](https://github.com/hshoff/vx/tree/master/packages/vx-scale#band-scaling) for the bar group. | -| y1Scale | | function | A [scale band function](https://github.com/hshoff/vx/tree/master/packages/vx-scale#band-scaling) for each bar within the group. | -| xScale | | function | A [scale function](https://github.com/hshoff/vx/tree/master/packages/vx-scale) for the xs. | -| zScale | | function | A [scale function](https://github.com/hshoff/vx/tree/master/packages/vx-scale) for the keys. | -| keys | | array | A list of data keys | -| height | | number | The pixel height of the bar group. | + +| Name | Default | Type | Description | +| :-------- | :------ | :------- | :------------------------------------------------------------------------------------------------------------------------------ | +| data | | array | An array of data elements. | +| className | | string | The class name for the `path` element. | +| top | | number | The margin on top. | +| left | | number | The margin on the left. | +| y0 | | function | ys accessor function. | +| y0Scale | | function | A [scale band function](https://github.com/hshoff/vx/tree/master/packages/vx-scale#band-scaling) for the bar group. | +| y1Scale | | function | A [scale band function](https://github.com/hshoff/vx/tree/master/packages/vx-scale#band-scaling) for each bar within the group. | +| xScale | | function | A [scale function](https://github.com/hshoff/vx/tree/master/packages/vx-scale) for the xs. | +| zScale | | function | A [scale function](https://github.com/hshoff/vx/tree/master/packages/vx-scale) for the keys. | +| keys | | array | A list of data keys | +| height | | number | The pixel height of the bar group. | ## `` @@ -209,17 +212,14 @@ A simple line. Good for drawing in the sand. ### Example -``` js - +```js + ``` ### Properties -| Name | Default | Type | Description | -|:--------------- |:------------------------ |:------ |:----------------------------------------------------------------------------------------- | +| Name | Default | Type | Description | +| :-------------- | :----------------------- | :----- | :---------------------------------------------------------------------------------------- | | from | new Point({ x: 0 y: 0 }) | Point | The beginning [point](https://github.com/hshoff/vx/tree/master/packages/vx-point). | | to | new Point({ x: 1 y: 1 }) | Point | The end [point](https://github.com/hshoff/vx/tree/master/packages/vx-point). | | stroke | black | string | The color of the stroke. | @@ -228,7 +228,6 @@ A simple line. Good for drawing in the sand. | transform | | string | An [SVG transform.](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform) | | className | | string | The class name for the `line` element. | - ## `` A more complicated line path. A `` is useful for making line graphs and drawing. @@ -237,22 +236,22 @@ A more complicated line path. A `` is useful for making line graphs ![Linepath example](http://i.imgur.com/YoDZrGi.png) -``` js +```js ``` ### Properties -| Name | Default | Type | Description | -|:--------------- |:------------ |:-------- |:----------------------------------------------------------------------------------------------------------- | +| Name | Default | Type | Description | +| :-------------- | :----------- | :------- | :---------------------------------------------------------------------------------------------------------- | | data | | array | The data in x, y. | | xScale | | function | A [scale function](https://github.com/hshoff/vx/tree/master/packages/vx-scale) for the xs. | | yScale | | function | A [scale function](https://github.com/hshoff/vx/tree/master/packages/vx-scale) for the ys. | @@ -271,7 +270,7 @@ A more complicated line path. A `` is useful for making line graphs ![LineRadial Example](http://i.imgur.com/Zcud84N.png) -``` js +```js xScale(x(d))} @@ -279,15 +278,16 @@ A more complicated line path. A `` is useful for making line graphs fill="none" stroke={"url('#line-gradient')"} strokeWidth={2} - strokeOpacity={.7} + strokeOpacity={0.7} curve={curveBasisOpen} strokeLinecap="round" /> ``` ### Properties -| Name | Default | Type | Description | -|:--------- |:------- |:-------- |:----------------------------------------------------------------------------------------------------------- | + +| Name | Default | Type | Description | +| :-------- | :------ | :------- | :---------------------------------------------------------------------------------------------------------- | | className | | string | The class for the element. | | angle | | function | The angle at each point. | | radius | | function | The radius at each angle. | @@ -306,19 +306,24 @@ A more complicated line path. A `` is useful for making line graphs outerRadius={radius - 80} innerRadius={radius - 120} fill="white" - fillOpacity={d => 1 / (d.index + 2) } + 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 ; + if (endAngle - startAngle < 0.1) return null; + return ( + + ); }} /> ``` ### Properties + | Name | Default | Type | Description | | :------------ | :------ | :------- | :--------------------------------------------------------------------------------------------------------------------------------- | | className | | string | The class for the element. | @@ -350,25 +355,22 @@ A simple polygon shape. Supply the sides and the length and we will do the rest. ### Properties -| Name | Default | Type | Description | -| :-------------- | :----------------------- | :------- | :--------------------------------------------------------------------------------------------- | -| sides | | number | The number of sides in the polygon. | -| size | 25 | number | The length of each side of the polygon. | -| rotate | 0 | number | The angle in degrees to rotate the polygon. | -| center | new Point({ x: 0 y: 0 }) | Point | The center of the polygon [point](https://github.com/hshoff/vx/tree/master/packages/vx-point). | -| stroke | black | string | The color of the stroke. | -| strokeWidth | 1 | number | The pixel width of the stroke. | -| strokeDasharray | | array | The [pattern of dashes](https://mzl.la/1l7EiTQ) in the stroke. | -| className | | string | The class name for the `line` element. | +| Name | Default | Type | Description | +| :----- | :----------------------- | :----- | :--------------------------------------------------------------------------------------------- | +| sides | | number | The number of sides in the polygon. | +| size | 25 | number | The length of each side of the polygon. | +| rotate | 0 | number | The angle in degrees to rotate the polygon. | +| center | new Point({ x: 0 y: 0 }) | Point | The center of the polygon [point](https://github.com/hshoff/vx/tree/master/packages/vx-point). | ## Sources For Components -+ [``](https://github.com/hshoff/vx/blob/master/packages/vx-shape/src/shapes/AreaClosed.js) -+ [``](https://github.com/hshoff/vx/blob/master/packages/vx-shape/src/shapes/AreaStack.js) -+ [``](https://github.com/hshoff/vx/blob/master/packages/vx-shape/src/shapes/Bar.js) -+ [``](https://github.com/hshoff/vx/blob/master/packages/vx-shape/src/shapes/BarGroup.js) -+ [``](https://github.com/hshoff/vx/blob/master/packages/vx-shape/src/shapes/BarGroupHorizontal.js) -+ [``](https://github.com/hshoff/vx/blob/master/packages/vx-shape/src/shapes/Line.js) -+ [``](https://github.com/hshoff/vx/blob/master/packages/vx-shape/src/shapes/LinePath.js) -+ [``](https://github.com/hshoff/vx/blob/master/packages/vx-shape/src/shapes/LineRadial.js) -+ [``](https://github.com/hshoff/vx/blob/master/packages/vx-shape/src/shapes/Pie.js) -+ [``](https://github.com/hshoff/vx/blob/master/packages/vx-shape/src/shapes/AreaClosed.js) +* [``](https://github.com/hshoff/vx/blob/master/packages/vx-shape/src/shapes/AreaStack.js) +* [``](https://github.com/hshoff/vx/blob/master/packages/vx-shape/src/shapes/Bar.js) +* [``](https://github.com/hshoff/vx/blob/master/packages/vx-shape/src/shapes/BarGroup.js) +* [``](https://github.com/hshoff/vx/blob/master/packages/vx-shape/src/shapes/BarGroupHorizontal.js) +* [``](https://github.com/hshoff/vx/blob/master/packages/vx-shape/src/shapes/Line.js) +* [``](https://github.com/hshoff/vx/blob/master/packages/vx-shape/src/shapes/LinePath.js) +* [``](https://github.com/hshoff/vx/blob/master/packages/vx-shape/src/shapes/LineRadial.js) +* [``](https://github.com/hshoff/vx/blob/master/packages/vx-shape/src/shapes/Pie.js) +* [` Date: Tue, 18 Sep 2018 17:41:11 -0700 Subject: [PATCH 3/3] [demo] undo polygon tile changes --- packages/vx-demo/components/tiles/polygons.js | 50 ++++++------------- 1 file changed, 14 insertions(+), 36 deletions(-) diff --git a/packages/vx-demo/components/tiles/polygons.js b/packages/vx-demo/components/tiles/polygons.js index ca85821fc..9f104bd34 100644 --- a/packages/vx-demo/components/tiles/polygons.js +++ b/packages/vx-demo/components/tiles/polygons.js @@ -2,68 +2,46 @@ import React from 'react'; import { Polygon } from '@vx/shape'; import { Group } from '@vx/group'; import { GradientPinkRed } from '@vx/gradient'; -import { scaleLinear } from '@vx/scale'; -import { genRandomNormalPoints } from '@vx/mock-data'; - -const points = genRandomNormalPoints(250).filter((d, i) => i < 250); +import { scaleBand } from '@vx/scale'; const polygons = [ { + sides: 3, fill: 'rgb(174, 238, 248)', rotate: 90, }, { + sides: 4, fill: 'rgb(229, 253, 61)', rotate: 45, }, { + sides: 6, fill: 'rgb(229, 130, 255)', rotate: 0, }, { + sides: 8, fill: 'url(#polygon-pink)', rotate: 0, }, ]; -const sides = [3, 4, 6, 8]; -const sizes = [2, 24, 5, 10]; -const opacities = [0.8, 0.9, 1]; - export default ({ width, height }) => { - const xScale = scaleLinear({ - domain: [1.3, 2.2], - range: [0, width], - clamp: true, - }); - const yScale = scaleLinear({ - domain: [0.75, 1.6], - range: [height, 0], + const yScale = scaleBand({ + rangeRound: [0, height], + domain: polygons.map((p, i) => i), + padding: 0.5, }); return ( - {points.map((p, i) => { - const randomSize = Math.floor(Math.random() * sizes.length); - const randomSide = Math.floor(Math.random() * sides.length); - const polygon = polygons[Math.floor(Math.random() * polygons.length)]; - const opacity = opacities[Math.floor(Math.random() * opacities.length)]; - const fill = Math.floor(Math.random() * 4) > 0.1; - return ( - - - - ); - })} + {polygons.map((polygon, i) => ( + + + + ))} ); };