From 6a076bd4ab0ba8fab5b5679f514ee586ceaf9397 Mon Sep 17 00:00:00 2001 From: Chris Williams Date: Mon, 11 May 2020 19:22:55 -0700 Subject: [PATCH 1/2] new(vx-demo): convert Polygons to codesandbox --- packages/vx-demo/src/components/Gallery.tsx | 6 +++-- .../examples/vx-polygons/Example.tsx} | 24 ++++++++++++----- .../docs-v2/examples/vx-polygons/index.tsx | 11 ++++++++ .../docs-v2/examples/vx-polygons/package.json | 27 +++++++++++++++++++ .../examples/vx-polygons/sandbox-styles.css | 8 ++++++ packages/vx-demo/src/pages/Polygons.tsx | 6 ++--- 6 files changed, 71 insertions(+), 11 deletions(-) rename packages/vx-demo/src/{components/tiles/Polygons.tsx => docs-v2/examples/vx-polygons/Example.tsx} (60%) create mode 100644 packages/vx-demo/src/docs-v2/examples/vx-polygons/index.tsx create mode 100644 packages/vx-demo/src/docs-v2/examples/vx-polygons/package.json create mode 100644 packages/vx-demo/src/docs-v2/examples/vx-polygons/sandbox-styles.css diff --git a/packages/vx-demo/src/components/Gallery.tsx b/packages/vx-demo/src/components/Gallery.tsx index 195631bb4..d383a9ffb 100644 --- a/packages/vx-demo/src/components/Gallery.tsx +++ b/packages/vx-demo/src/components/Gallery.tsx @@ -59,7 +59,9 @@ import Threshold, { background as thresholdBackground, } from '../docs-v2/examples/vx-threshold/Example'; import Chord from '../docs-v2/examples/vx-chord/Example'; -import Polygons from './tiles/Polygons'; +import Polygons, { + backgroundColor as polygonBackground, +} from '../docs-v2/examples/vx-polygons/Example'; import ZoomI from '../docs-v2/examples/vx-zoom-i/Example'; import Brush from './tiles/Brush'; @@ -898,7 +900,7 @@ export default function Gallery() { -
+
{({ width, height }) => } diff --git a/packages/vx-demo/src/components/tiles/Polygons.tsx b/packages/vx-demo/src/docs-v2/examples/vx-polygons/Example.tsx similarity index 60% rename from packages/vx-demo/src/components/tiles/Polygons.tsx rename to packages/vx-demo/src/docs-v2/examples/vx-polygons/Example.tsx index 51f59693c..5517a0044 100644 --- a/packages/vx-demo/src/components/tiles/Polygons.tsx +++ b/packages/vx-demo/src/docs-v2/examples/vx-polygons/Example.tsx @@ -3,7 +3,9 @@ import { Polygon } from '@vx/shape'; import { Group } from '@vx/group'; import { scaleBand } from '@vx/scale'; import { GradientPinkRed } from '@vx/gradient'; -import { ShowProvidedProps } from '../../types'; + +export const backgroundColor = '#7f82e3'; +const polygonSize = 25; const polygons = [ { @@ -30,18 +32,28 @@ const polygons = [ const yScale = scaleBand({ domain: polygons.map((p, i) => i), - padding: 0.5, + padding: 0.8, }); -export default ({ width, height }: ShowProvidedProps) => { +type Props = { + width: number; + height: number; +}; + +export default ({ width, height }: Props) => { yScale.rangeRound([0, height]); return ( - + {polygons.map((polygon, i) => ( - - + + ))} diff --git a/packages/vx-demo/src/docs-v2/examples/vx-polygons/index.tsx b/packages/vx-demo/src/docs-v2/examples/vx-polygons/index.tsx new file mode 100644 index 000000000..3313ec317 --- /dev/null +++ b/packages/vx-demo/src/docs-v2/examples/vx-polygons/index.tsx @@ -0,0 +1,11 @@ +import React from 'react'; +import { render } from 'react-dom'; +import ParentSize from '@vx/responsive/lib/components/ParentSize'; + +import Example from './Example'; +import './sandbox-styles.css'; + +render( + {({ width, height }) => }, + document.getElementById('root'), +); diff --git a/packages/vx-demo/src/docs-v2/examples/vx-polygons/package.json b/packages/vx-demo/src/docs-v2/examples/vx-polygons/package.json new file mode 100644 index 000000000..f11275472 --- /dev/null +++ b/packages/vx-demo/src/docs-v2/examples/vx-polygons/package.json @@ -0,0 +1,27 @@ +{ + "name": "@vx/demo-polygons", + "description": "Standalone vx polygons demo.", + "main": "index.tsx", + "dependencies": { + "@babel/runtime": "^7.8.4", + "@types/react": "^16", + "@types/react-dom": "^16", + "@vx/gradient": "latest", + "@vx/group": "latest", + "@vx/responsive": "latest", + "@vx/scale": "latest", + "@vx/shape": "latest", + "react": "^16", + "react-dom": "^16", + "react-scripts-ts": "3.1.0", + "typescript": "^3" + }, + "keywords": [ + "visualization", + "d3", + "react", + "vx", + "polygon", + "shape" + ] +} diff --git a/packages/vx-demo/src/docs-v2/examples/vx-polygons/sandbox-styles.css b/packages/vx-demo/src/docs-v2/examples/vx-polygons/sandbox-styles.css new file mode 100644 index 000000000..b91993723 --- /dev/null +++ b/packages/vx-demo/src/docs-v2/examples/vx-polygons/sandbox-styles.css @@ -0,0 +1,8 @@ +html, +body, +#root { + height: 100%; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, + 'Open Sans', 'Helvetica Neue', sans-serif; + line-height: 2em; +} diff --git a/packages/vx-demo/src/pages/Polygons.tsx b/packages/vx-demo/src/pages/Polygons.tsx index 555eaf8c6..f7b3bdc7a 100644 --- a/packages/vx-demo/src/pages/Polygons.tsx +++ b/packages/vx-demo/src/pages/Polygons.tsx @@ -1,10 +1,10 @@ import React from 'react'; import Show from '../components/Show'; -import Polygons from '../components/tiles/Polygons'; -import PolygonsSource from '!!raw-loader!../components/tiles/Polygons'; +import Polygons from '../docs-v2/examples/vx-polygons/Example'; +import PolygonsSource from '!!raw-loader!../docs-v2/examples/vx-polygons/Example'; export default () => ( - + {PolygonsSource} ); From 0e162df46ded395aa0cd2d1d56dce082b6ba8884 Mon Sep 17 00:00:00 2001 From: Chris Williams Date: Tue, 12 May 2020 14:43:51 -0700 Subject: [PATCH 2/2] fix(vx-demo/Polygons): type fix --- packages/vx-demo/src/docs-v2/examples/vx-polygons/Example.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vx-demo/src/docs-v2/examples/vx-polygons/Example.tsx b/packages/vx-demo/src/docs-v2/examples/vx-polygons/Example.tsx index 5517a0044..d58aec428 100644 --- a/packages/vx-demo/src/docs-v2/examples/vx-polygons/Example.tsx +++ b/packages/vx-demo/src/docs-v2/examples/vx-polygons/Example.tsx @@ -47,7 +47,7 @@ export default ({ width, height }: Props) => { {polygons.map((polygon, i) => ( - +