Merge pull request #669 from hshoff/chris--sandbox-chord

new(vx-demo): convert Chord to codesandbox example
airbnb · May 10, 2020 · 079f6b6 · 079f6b6
2 parents 5e96d2c + 9ac17a7
commit 079f6b6
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 43 deletions.
diff --git a/packages/vx-demo/src/components/Gallery.tsx b/packages/vx-demo/src/components/Gallery.tsx
@@ -44,7 +44,7 @@ import DragI from '../docs-v2/examples/vx-drag-i/Example';
 import DragII from '../docs-v2/examples/vx-drag-ii/Example';
 import LinkTypes from './tiles/LinkTypes';
 import Threshold from './tiles/Threshold';
-import Chord from './tiles/Chord';
+import Chord from '../docs-v2/examples/vx-chord/Example';
 import Polygons from './tiles/Polygons';
 import ZoomI from './tiles/Zoom-i';
 import Brush from './tiles/Brush';
@@ -864,19 +864,7 @@ export default function Gallery() {
             <div className="gallery-item" style={{ background: '#e4e3d8' }}>
               <div className="image">
                 <ParentSize>
-                  {({ width, height }) => (
-                    <Chord
-                      width={width}
-                      height={height}
-                      centerSize={10}
-                      margin={{
-                        top: 0,
-                        left: 0,
-                        right: 0,
-                        bottom: 30,
-                      }}
-                    />
-                  )}
+                  {({ width, height }) => <Chord width={width} height={height} centerSize={10} />}
                 </ParentSize>
               </div>
               <div className="details" style={{ color: '#111' }}>

diff --git a/...es/vx-demo/src/components/tiles/Chord.tsx → ...src/docs-v2/examples/vx-chord/Example.tsx b/...es/vx-demo/src/components/tiles/Chord.tsx → ...src/docs-v2/examples/vx-chord/Example.tsx
@@ -4,7 +4,6 @@ import { Group } from '@vx/group';
 import { Chord, Ribbon } from '@vx/chord';
 import { scaleOrdinal } from '@vx/scale';
 import { LinearGradient } from '@vx/gradient';
-import { ShowProvidedProps } from '../../types';
 
 const pink = '#ff2fab';
 const orange = '#ffc62e';
@@ -16,7 +15,7 @@ const blue = '#04a6ff';
 const lime = '#00ddc6';
 const bg = '#e4e3d8';
 
-const matrix = [
+const dataMatrix = [
   [11975, 5871, 8916, 2868],
   [1951, 10048, 2060, 6171],
   [8010, 16145, 8090, 8045],
@@ -32,27 +31,27 @@ const color = scaleOrdinal<number, string>({
   range: ['url(#gpinkorange)', 'url(#gpurplered)', 'url(#gpurplegreen)', 'url(#gbluelime)'],
 });
 
-export default ({
-  width,
-  height,
-  centerSize = 20,
-  events = false,
-}: ShowProvidedProps & { centerSize?: number }) => {
-  if (width < 10) return null;
+type Props = {
+  width: number;
+  height: number;
+  centerSize?: number;
+  events?: boolean;
+};
 
+export default function Example({ width, height, centerSize = 20, events = false }: Props) {
   const outerRadius = Math.min(width, height) * 0.5 - (centerSize + 10);
   const innerRadius = outerRadius - centerSize;
 
-  return (
-    <div className="Chords">
+  return width < 10 ? null : (
+    <div className="chords">
       <svg width={width} height={height}>
         <LinearGradient id="gpinkorange" from={pink} to={orange} vertical={false} />
         <LinearGradient id="gpurplered" from={purple} to={red} vertical={false} />
         <LinearGradient id="gpurplegreen" from={purple2} to={green} vertical={false} />
         <LinearGradient id="gbluelime" from={blue} to={lime} vertical={false} />
         <rect width={width} height={height} fill={bg} rx={14} />
         <Group top={height / 2} left={width / 2}>
-          <Chord matrix={matrix} padAngle={0.05} sortSubgroups={descending}>
+          <Chord matrix={dataMatrix} padAngle={0.05} sortSubgroups={descending}>
             {({ chords }) => (
               <g>
                 {chords.groups.map((group, i) => (
@@ -91,19 +90,16 @@ export default ({
           Based on Mike Bostock's <a href="https://bl.ocks.org/mbostock/4062006">Chord Diagram</a>
         </div>
       </div>
-
       <style jsx>{`
-        .Chords {
+        .chords {
           display: flex;
           flex-direction: column;
           user-select: none;
         }
-
         svg {
           margin: 1rem 0;
           cursor: pointer;
         }
-
         .deets {
           display: flex;
           flex-direction: row;
@@ -115,4 +111,4 @@ export default ({
       `}</style>
     </div>
   );
-};
+}
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-chord/index.tsx b/packages/vx-demo/src/docs-v2/examples/vx-chord/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(
+  <ParentSize>{({ width, height }) => <Example width={width} height={height} />}</ParentSize>,
+  document.getElementById('root'),
+);
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-chord/package.json b/packages/vx-demo/src/docs-v2/examples/vx-chord/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "@vx/demo-chord",
+  "description": "Standalone vx chord demo.",
+  "main": "index.tsx",
+  "dependencies": {
+    "@babel/runtime": "^7.8.4",
+    "@types/react": "^16",
+    "@types/react-dom": "^16",
+    "@vx/chord": "latest",
+    "@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"
+  ]
+}
diff --git a/packages/vx-demo/src/docs-v2/examples/vx-chord/sandbox-styles.css b/packages/vx-demo/src/docs-v2/examples/vx-chord/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/Chord.tsx b/packages/vx-demo/src/pages/Chord.tsx
@@ -1,20 +1,11 @@
 import React from 'react';
 import Show from '../components/Show';
-import Chord from '../components/tiles/Chord';
-import ChordSource from '!!raw-loader!../components/tiles/Chord';
+import Chord from '../docs-v2/examples/vx-chord/Example';
+import ChordSource from '!!raw-loader!../docs-v2/examples/vx-chord/Example';
 
 export default () => {
   return (
-    <Show
-      component={Chord}
-      title="Chords"
-      margin={{
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-      }}
-    >
+    <Show component={Chord} title="Chords" codeSandboxDirectoryName="vx-chord">
       {ChordSource}
     </Show>
   );