From f5c8a7196188bbb058b8002cd8d92285c0a06897 Mon Sep 17 00:00:00 2001 From: Chris Williams Date: Wed, 6 May 2020 13:19:16 -0700 Subject: [PATCH] new(vx-demo): refactor legends to codesandbox example --- packages/vx-demo/src/components/Gallery.tsx | 2 +- .../vx-demo/src/components/tiles/Legends.tsx | 279 ----------------- .../docs-v2/examples/vx-legend/Example.tsx | 282 ++++++++++++++++++ .../src/docs-v2/examples/vx-legend/index.tsx | 7 + .../docs-v2/examples/vx-legend/package.json | 25 ++ .../examples/vx-legend/sandbox-styles.css | 8 + packages/vx-demo/src/pages/Legends.tsx | 16 +- 7 files changed, 326 insertions(+), 293 deletions(-) delete mode 100644 packages/vx-demo/src/components/tiles/Legends.tsx create mode 100644 packages/vx-demo/src/docs-v2/examples/vx-legend/Example.tsx create mode 100644 packages/vx-demo/src/docs-v2/examples/vx-legend/index.tsx create mode 100644 packages/vx-demo/src/docs-v2/examples/vx-legend/package.json create mode 100644 packages/vx-demo/src/docs-v2/examples/vx-legend/sandbox-styles.css diff --git a/packages/vx-demo/src/components/Gallery.tsx b/packages/vx-demo/src/components/Gallery.tsx index 903833ab4..733ee2ad0 100644 --- a/packages/vx-demo/src/components/Gallery.tsx +++ b/packages/vx-demo/src/components/Gallery.tsx @@ -27,7 +27,7 @@ import Pies from '../docs-v2/examples/vx-shape-pie/Example'; import Trees from './tiles/Trees'; import Dendrograms from './tiles/Dendrograms'; import Voronoi from './tiles/Voronoi'; -import Legends from './tiles/Legends'; +import Legends from '../docs-v2/examples/vx-legend/Example'; import StatsPlot from './tiles/Statsplot'; import GeoCustom from '../docs-v2/examples/vx-geo-custom/Example'; import GeoMercator from '../docs-v2/examples/vx-geo-mercator/Example'; diff --git a/packages/vx-demo/src/components/tiles/Legends.tsx b/packages/vx-demo/src/components/tiles/Legends.tsx deleted file mode 100644 index 17b0c921e..000000000 --- a/packages/vx-demo/src/components/tiles/Legends.tsx +++ /dev/null @@ -1,279 +0,0 @@ -import React from 'react'; -import { format } from 'd3-format'; -import { scaleLinear, scaleOrdinal, scaleThreshold, scaleQuantile } from '@vx/scale'; -import { GlyphStar, GlyphWye, GlyphTriangle, GlyphDiamond } from '@vx/glyph'; -import { - Legend, - LegendLinear, - LegendQuantile, - LegendOrdinal, - LegendSize, - LegendThreshold, - LegendItem, - LegendLabel, -} from '@vx/legend'; - -const oneDecimalFormat = format('.1f'); - -const sizeScale = scaleLinear({ - domain: [0, 10], - range: [10, 30], -}); - -const sizeColorScale = scaleLinear({ - domain: [0, 10], - range: ['#75fcfc', '#3236b8'], -}); - -const quantileScale = scaleQuantile({ - domain: [0, 0.15], - range: ['#eb4d70', '#f19938', '#6ce18b', '#78f6ef', '#9096f8'], -}); - -const linearScale = scaleLinear({ - domain: [0, 10], - range: ['#ed4fbb', '#e9a039'], -}); - -const thresholdScale = scaleThreshold({ - domain: [0.01, 0.02, 0.04, 0.06, 0.08], - range: ['#f2f0f7', '#dadaeb', '#bcbddc', '#9e9ac8', '#756bb1', '#54278f'], -}); - -const ordinalColorScale = scaleOrdinal({ - domain: ['a', 'b', 'c', 'd'], - range: ['#66d981', '#71f5ef', '#4899f1', '#7d81f6'], -}); - -const ordinalColor2Scale = scaleOrdinal({ - domain: ['a', 'b', 'c', 'd'], - range: ['#fae856', '#f29b38', '#e64357', '#8386f7'], -}); - -const shapeScale = scaleOrdinal({ - domain: ['a', 'b', 'c', 'd', 'e'], - range: [ - , - , - , - , - () => ( - - $ - - ), - ], -}); - -const legendGlyphSize = 15; - -export default ({ events = false }) => ( -
- - scale={sizeScale}> - {labels => - labels.map(label => { - const size = sizeScale(label.datum); - const color = sizeColorScale(label.datum); - return ( - { - if (events) alert(`clicked: ${JSON.stringify(label)}`); - }} - > - - - - - {label.text} - - - ); - }) - } - - - - scale={quantileScale}> - {labels => - labels.map((label, i) => ( - { - if (events) alert(`clicked: ${JSON.stringify(label)}`); - }} - > - - - - - {label.text} - - - )) - } - - - - (i % 2 === 0 ? oneDecimalFormat(d) : '')} - > - {labels => - labels.map((label, i) => ( - { - if (events) alert(`clicked: ${JSON.stringify(label)}`); - }} - > - - - - - {label.text} - - - )) - } - - - - - {labels => - labels.reverse().map((label, i) => ( - { - if (events) alert(`clicked: ${JSON.stringify(label)}`); - }} - > - - - - - {label.text} - - - )) - } - - - - `${label.toUpperCase()}`}> - {labels => ( -
- {labels.map((label, i) => ( - { - if (events) alert(`clicked: ${JSON.stringify(label)}`); - }} - > - - - - - {label.text} - - - ))} -
- )} - - - - scale={shapeScale}> - {labels => ( -
- {labels.map((label, i) => { - const color = ordinalColor2Scale(label.datum); - const shape = shapeScale(label.datum); - const isValidElement = React.isValidElement(shape); - return ( - { - const { datum, index } = label; - if (events) alert(`clicked: ${JSON.stringify({ datum, color, index })}`); - }} - > - - {isValidElement - ? React.cloneElement(shape as React.ReactElement) - : React.createElement(shape as React.ComponentType<{ fill: string }>, { - fill: color, - })} - - - {label.text} - - - ); - })} -
- )} - - - - -
-); - -function LegendDemo({ title, children }: { title: string; children: React.ReactNode }) { - return ( -
-
{title}
- {children} - -
- ); -} diff --git a/packages/vx-demo/src/docs-v2/examples/vx-legend/Example.tsx b/packages/vx-demo/src/docs-v2/examples/vx-legend/Example.tsx new file mode 100644 index 000000000..833fe986e --- /dev/null +++ b/packages/vx-demo/src/docs-v2/examples/vx-legend/Example.tsx @@ -0,0 +1,282 @@ +import React from 'react'; +import { format } from 'd3-format'; +import { scaleLinear, scaleOrdinal, scaleThreshold, scaleQuantile } from '@vx/scale'; +import { GlyphStar, GlyphWye, GlyphTriangle, GlyphDiamond } from '@vx/glyph'; +import { + Legend, + LegendLinear, + LegendQuantile, + LegendOrdinal, + LegendSize, + LegendThreshold, + LegendItem, + LegendLabel, +} from '@vx/legend'; + +const oneDecimalFormat = format('.1f'); + +const sizeScale = scaleLinear({ + domain: [0, 10], + range: [10, 30], +}); + +const sizeColorScale = scaleLinear({ + domain: [0, 10], + range: ['#75fcfc', '#3236b8'], +}); + +const quantileScale = scaleQuantile({ + domain: [0, 0.15], + range: ['#eb4d70', '#f19938', '#6ce18b', '#78f6ef', '#9096f8'], +}); + +const linearScale = scaleLinear({ + domain: [0, 10], + range: ['#ed4fbb', '#e9a039'], +}); + +const thresholdScale = scaleThreshold({ + domain: [0.01, 0.02, 0.04, 0.06, 0.08], + range: ['#f2f0f7', '#dadaeb', '#bcbddc', '#9e9ac8', '#756bb1', '#54278f'], +}); + +const ordinalColorScale = scaleOrdinal({ + domain: ['a', 'b', 'c', 'd'], + range: ['#66d981', '#71f5ef', '#4899f1', '#7d81f6'], +}); + +const ordinalColor2Scale = scaleOrdinal({ + domain: ['a', 'b', 'c', 'd'], + range: ['#fae856', '#f29b38', '#e64357', '#8386f7'], +}); + +const shapeScale = scaleOrdinal({ + domain: ['a', 'b', 'c', 'd', 'e'], + range: [ + , + , + , + , + () => ( + + $ + + ), + ], +}); + +const legendGlyphSize = 15; + +export default function Example({ events = false }: { events?: boolean }) { + return ( +
+ + scale={sizeScale}> + {labels => + labels.map(label => { + const size = sizeScale(label.datum); + const color = sizeColorScale(label.datum); + return ( + { + if (events) alert(`clicked: ${JSON.stringify(label)}`); + }} + > + + + + + {label.text} + + + ); + }) + } + + + + scale={quantileScale}> + {labels => + labels.map((label, i) => ( + { + if (events) alert(`clicked: ${JSON.stringify(label)}`); + }} + > + + + + + {label.text} + + + )) + } + + + + (i % 2 === 0 ? oneDecimalFormat(d) : '')} + > + {labels => + labels.map((label, i) => ( + { + if (events) alert(`clicked: ${JSON.stringify(label)}`); + }} + > + + + + + {label.text} + + + )) + } + + + + + {labels => + labels.reverse().map((label, i) => ( + { + if (events) alert(`clicked: ${JSON.stringify(label)}`); + }} + > + + + + + {label.text} + + + )) + } + + + + `${label.toUpperCase()}`}> + {labels => ( +
+ {labels.map((label, i) => ( + { + if (events) alert(`clicked: ${JSON.stringify(label)}`); + }} + > + + + + + {label.text} + + + ))} +
+ )} + + + + scale={shapeScale}> + {labels => ( +
+ {labels.map((label, i) => { + const color = ordinalColor2Scale(label.datum); + const shape = shapeScale(label.datum); + const isValidElement = React.isValidElement(shape); + return ( + { + const { datum, index } = label; + if (events) alert(`clicked: ${JSON.stringify({ datum, color, index })}`); + }} + > + + {isValidElement + ? React.cloneElement(shape as React.ReactElement) + : React.createElement(shape as React.ComponentType<{ fill: string }>, { + fill: color, + })} + + + {label.text} + + + ); + })} +
+ )} + + + + +
+ ); +} + +function LegendDemo({ title, children }: { title: string; children: React.ReactNode }) { + return ( +
+
{title}
+ {children} + +
+ ); +} diff --git a/packages/vx-demo/src/docs-v2/examples/vx-legend/index.tsx b/packages/vx-demo/src/docs-v2/examples/vx-legend/index.tsx new file mode 100644 index 000000000..fee92b86d --- /dev/null +++ b/packages/vx-demo/src/docs-v2/examples/vx-legend/index.tsx @@ -0,0 +1,7 @@ +import React from 'react'; +import { render } from 'react-dom'; + +import Example from './Example'; +import './sandbox-styles.css'; + +render(, document.getElementById('root')); diff --git a/packages/vx-demo/src/docs-v2/examples/vx-legend/package.json b/packages/vx-demo/src/docs-v2/examples/vx-legend/package.json new file mode 100644 index 000000000..d5b35879c --- /dev/null +++ b/packages/vx-demo/src/docs-v2/examples/vx-legend/package.json @@ -0,0 +1,25 @@ +{ + "name": "@vx/demo-legends", + "description": "Standalone vx legends demo.", + "main": "index.tsx", + "dependencies": { + "@babel/runtime": "^7.8.4", + "@types/react": "^16", + "@types/react-dom": "^16", + "@vx/glyph": "latest", + "@vx/legend": "latest", + "@vx/scale": "latest", + "d3-format": "^1.4.4", + "react": "^16", + "react-dom": "^16", + "react-scripts-ts": "3.1.0", + "typescript": "^3" + }, + "keywords": [ + "visualization", + "d3", + "react", + "vx", + "legend" + ] +} diff --git a/packages/vx-demo/src/docs-v2/examples/vx-legend/sandbox-styles.css b/packages/vx-demo/src/docs-v2/examples/vx-legend/sandbox-styles.css new file mode 100644 index 000000000..b91993723 --- /dev/null +++ b/packages/vx-demo/src/docs-v2/examples/vx-legend/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/Legends.tsx b/packages/vx-demo/src/pages/Legends.tsx index 03d871d69..acc6ef3fb 100644 --- a/packages/vx-demo/src/pages/Legends.tsx +++ b/packages/vx-demo/src/pages/Legends.tsx @@ -1,21 +1,11 @@ import React from 'react'; import Show from '../components/Show'; -import Legends from '../components/tiles/Legends'; -import LegendsSource from '!!raw-loader!../components/tiles/Legends'; +import Legends from '../docs-v2/examples/vx-legend/Example'; +import LegendsSource from '!!raw-loader!../docs-v2/examples/vx-legend/Example'; export default () => { return ( - + {LegendsSource} );