From 4df7b7c540f826daf09ccad046c332a9c34947c0 Mon Sep 17 00:00:00 2001 From: Chris Williams Date: Wed, 6 May 2020 15:26:26 -0700 Subject: [PATCH 1/3] new(vx-demo): convert Heatmap to codesandbox --- packages/vx-demo/src/components/Gallery.tsx | 4 +-- .../examples/vx-heatmap/Example.tsx} | 27 +++++++++---------- .../src/docs-v2/examples/vx-heatmap/index.tsx | 11 ++++++++ .../docs-v2/examples/vx-heatmap/package.json | 27 +++++++++++++++++++ .../examples/vx-heatmap/sandbox-styles.css | 8 ++++++ .../src/pages/{Heatmaps.tsx => Heatmap.tsx} | 5 ++-- 6 files changed, 64 insertions(+), 18 deletions(-) rename packages/vx-demo/src/{components/tiles/Heatmap.tsx => docs-v2/examples/vx-heatmap/Example.tsx} (92%) create mode 100644 packages/vx-demo/src/docs-v2/examples/vx-heatmap/index.tsx create mode 100644 packages/vx-demo/src/docs-v2/examples/vx-heatmap/package.json create mode 100644 packages/vx-demo/src/docs-v2/examples/vx-heatmap/sandbox-styles.css rename packages/vx-demo/src/pages/{Heatmaps.tsx => Heatmap.tsx} (63%) diff --git a/packages/vx-demo/src/components/Gallery.tsx b/packages/vx-demo/src/components/Gallery.tsx index 903833ab4..9272633d2 100644 --- a/packages/vx-demo/src/components/Gallery.tsx +++ b/packages/vx-demo/src/components/Gallery.tsx @@ -21,7 +21,7 @@ import BarGroup from './tiles/BarGroup'; import BarGroupHorizontal from './tiles/BarGroupHorizontal'; import BarStack from './tiles/BarStack'; import BarStackHorizontal from './tiles/BarStackHorizontal'; -import Heatmap from './tiles/Heatmap'; +import Heatmap from '../docs-v2/examples/vx-heatmap/Example'; import LineRadial from '../docs-v2/examples/vx-shape-line-radial/Example'; import Pies from '../docs-v2/examples/vx-shape-pie/Example'; import Trees from './tiles/Trees'; @@ -328,7 +328,7 @@ export default function Gallery() { - +
diff --git a/packages/vx-demo/src/components/tiles/Heatmap.tsx b/packages/vx-demo/src/docs-v2/examples/vx-heatmap/Example.tsx similarity index 92% rename from packages/vx-demo/src/components/tiles/Heatmap.tsx rename to packages/vx-demo/src/docs-v2/examples/vx-heatmap/Example.tsx index 51bd390d0..8c355fb74 100644 --- a/packages/vx-demo/src/components/tiles/Heatmap.tsx +++ b/packages/vx-demo/src/docs-v2/examples/vx-heatmap/Example.tsx @@ -3,7 +3,6 @@ import { Group } from '@vx/group'; import genBins, { Bin, Bins } from '@vx/mock-data/lib/generators/genBins'; import { scaleLinear } from '@vx/scale'; import { HeatmapCircle, HeatmapRect } from '@vx/heatmap'; -import { ShowProvidedProps } from '../../types'; const hot1 = '#77312f'; const hot2 = '#f33d15'; @@ -48,27 +47,27 @@ const opacityScale = scaleLinear({ domain: [0, colorMax], }); +type Props = { + width: number; + height: number; + margin?: { top: number; right: number; bottom: number; left: number }; + separation?: number; + events?: boolean; +}; + +const defaultMargin = { top: 10, left: 20, right: 20, bottom: 110 }; + export default ({ width, height, events = false, - margin = { - top: 10, - left: 20, - right: 20, - bottom: 110, - }, + margin = defaultMargin, separation = 20, -}: ShowProvidedProps & { separation?: number }) => { +}: Props) => { if (width < 10) return null; // bounds - let size = width; - if (size > margin.left + margin.right) { - size = width - margin.left - margin.right - separation; - } - - const xMax = size / 2; + const xMax = width / 2; const yMax = height - margin.bottom - margin.top; const binWidth = xMax / binData.length; diff --git a/packages/vx-demo/src/docs-v2/examples/vx-heatmap/index.tsx b/packages/vx-demo/src/docs-v2/examples/vx-heatmap/index.tsx new file mode 100644 index 000000000..3313ec317 --- /dev/null +++ b/packages/vx-demo/src/docs-v2/examples/vx-heatmap/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-heatmap/package.json b/packages/vx-demo/src/docs-v2/examples/vx-heatmap/package.json new file mode 100644 index 000000000..58bef6462 --- /dev/null +++ b/packages/vx-demo/src/docs-v2/examples/vx-heatmap/package.json @@ -0,0 +1,27 @@ +{ + "name": "@vx/demo-heatmap", + "description": "Standalone vx heatmap demo.", + "main": "index.tsx", + "dependencies": { + "@babel/runtime": "^7.8.4", + "@types/react": "^16", + "@types/react-dom": "^16", + "@vx/group": "latest", + "@vx/heatmap": "latest", + "@vx/mock-data": "latest", + "@vx/responsive": "latest", + "@vx/scale": "latest", + + "react": "^16", + "react-dom": "^16", + "react-scripts-ts": "3.1.0", + "typescript": "^3" + }, + "keywords": [ + "visualization", + "d3", + "react", + "vx", + "heatmap" + ] +} diff --git a/packages/vx-demo/src/docs-v2/examples/vx-heatmap/sandbox-styles.css b/packages/vx-demo/src/docs-v2/examples/vx-heatmap/sandbox-styles.css new file mode 100644 index 000000000..b91993723 --- /dev/null +++ b/packages/vx-demo/src/docs-v2/examples/vx-heatmap/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/Heatmaps.tsx b/packages/vx-demo/src/pages/Heatmap.tsx similarity index 63% rename from packages/vx-demo/src/pages/Heatmaps.tsx rename to packages/vx-demo/src/pages/Heatmap.tsx index 38194c842..df724b768 100644 --- a/packages/vx-demo/src/pages/Heatmaps.tsx +++ b/packages/vx-demo/src/pages/Heatmap.tsx @@ -1,7 +1,7 @@ import React from 'react'; import Show from '../components/Show'; -import Heatmap from '../components/tiles/Heatmap'; -import HeatmapSource from '!!raw-loader!../components/tiles/Heatmap'; +import Heatmap from '../docs-v2/examples/vx-heatmap/Example'; +import HeatmapSource from '!!raw-loader!../docs-v2/examples/vx-heatmap/Example'; export default () => { return ( @@ -15,6 +15,7 @@ export default () => { }} component={Heatmap} title="Heatmaps" + codeSandboxDirectoryName="vx-heatmap" > {HeatmapSource} From 266b1f7a289737b66bc9dad361c4ec8365218e81 Mon Sep 17 00:00:00 2001 From: Chris Williams Date: Wed, 6 May 2020 15:30:04 -0700 Subject: [PATCH 2/3] fix(vx-demo/Heatmap): fix size --- .../vx-demo/src/docs-v2/examples/vx-heatmap/Example.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/vx-demo/src/docs-v2/examples/vx-heatmap/Example.tsx b/packages/vx-demo/src/docs-v2/examples/vx-heatmap/Example.tsx index 8c355fb74..4d80b6180 100644 --- a/packages/vx-demo/src/docs-v2/examples/vx-heatmap/Example.tsx +++ b/packages/vx-demo/src/docs-v2/examples/vx-heatmap/Example.tsx @@ -64,10 +64,10 @@ export default ({ margin = defaultMargin, separation = 20, }: Props) => { - if (width < 10) return null; - // bounds - const xMax = width / 2; + const size = + width > margin.left + margin.right ? width - margin.left - margin.right - separation : width; + const xMax = size / 2; const yMax = height - margin.bottom - margin.top; const binWidth = xMax / binData.length; @@ -77,7 +77,7 @@ export default ({ xScale.range([0, xMax]); yScale.range([yMax, 0]); - return ( + return width < 10 ? null : ( From 955030efd6de8f2ece6e9ed75d1d648af98f0215 Mon Sep 17 00:00:00 2001 From: Chris Williams Date: Sat, 9 May 2020 14:09:02 -0700 Subject: [PATCH 3/3] fix(vx-demo): /heatmap => /heatmaps --- packages/vx-demo/src/components/Gallery.tsx | 8 +++++--- packages/vx-demo/src/pages/{Heatmap.tsx => Heatmaps.tsx} | 8 ++++---- 2 files changed, 9 insertions(+), 7 deletions(-) rename packages/vx-demo/src/pages/{Heatmap.tsx => Heatmaps.tsx} (61%) diff --git a/packages/vx-demo/src/components/Gallery.tsx b/packages/vx-demo/src/components/Gallery.tsx index 9272633d2..2e935805d 100644 --- a/packages/vx-demo/src/components/Gallery.tsx +++ b/packages/vx-demo/src/components/Gallery.tsx @@ -21,7 +21,7 @@ import BarGroup from './tiles/BarGroup'; import BarGroupHorizontal from './tiles/BarGroupHorizontal'; import BarStack from './tiles/BarStack'; import BarStackHorizontal from './tiles/BarStackHorizontal'; -import Heatmap from '../docs-v2/examples/vx-heatmap/Example'; +import Heatmaps from '../docs-v2/examples/vx-heatmap/Example'; import LineRadial from '../docs-v2/examples/vx-shape-line-radial/Example'; import Pies from '../docs-v2/examples/vx-shape-pie/Example'; import Trees from './tiles/Trees'; @@ -328,11 +328,13 @@ export default function Gallery() { - +
- {({ width, height }) => } + {({ width, height }) => ( + + )}
diff --git a/packages/vx-demo/src/pages/Heatmap.tsx b/packages/vx-demo/src/pages/Heatmaps.tsx similarity index 61% rename from packages/vx-demo/src/pages/Heatmap.tsx rename to packages/vx-demo/src/pages/Heatmaps.tsx index df724b768..69ea8b013 100644 --- a/packages/vx-demo/src/pages/Heatmap.tsx +++ b/packages/vx-demo/src/pages/Heatmaps.tsx @@ -1,7 +1,7 @@ import React from 'react'; import Show from '../components/Show'; -import Heatmap from '../docs-v2/examples/vx-heatmap/Example'; -import HeatmapSource from '!!raw-loader!../docs-v2/examples/vx-heatmap/Example'; +import Heatmaps from '../docs-v2/examples/vx-heatmap/Example'; +import HeatmapsSource from '!!raw-loader!../docs-v2/examples/vx-heatmap/Example'; export default () => { return ( @@ -13,11 +13,11 @@ export default () => { right: 30, bottom: 80, }} - component={Heatmap} + component={Heatmaps} title="Heatmaps" codeSandboxDirectoryName="vx-heatmap" > - {HeatmapSource} + {HeatmapsSource} ); };