new(vx-demo): convert Radar to codesandbox

packages/vx-demo/src/components/Gallery.tsx

@@ -38,7 +38,10 @@ import Streamgraph, {
 import Pack from './tiles/Pack';
 import Patterns from '../docs-v2/examples/vx-pattern/Example';
 import Treemap from './tiles/Treemap';
-import Radar from './tiles/Radar';
+import Radar, {
+  bg as radarBackground,
+  pumpkin as radarColor,
+} from '../docs-v2/examples/vx-radar/Example';
 import Responsive from '../docs-v2/examples/vx-responsive/Example';
 import DragI from '../docs-v2/examples/vx-drag-i/Example';
 import DragII from '../docs-v2/examples/vx-drag-ii/Example';
@@ -672,7 +675,7 @@ export default function Gallery() {
             <div
               className="gallery-item"
               style={{
-                background: '#FAF7E9',
+                background: radarBackground,
               }}
             >
               <div className="image">
@@ -683,7 +686,7 @@ export default function Gallery() {
               <div
                 className="details"
                 style={{
-                  color: '#f5810c',
+                  color: radarColor,
                 }}
               >
                 <div className="title">Radar</div>

packages/vx-demo/src/components/tiles/Radar.tsx → packages/vx-demo/src/docs-v2/examples/vx-radar/Example.tsx

@@ -4,12 +4,11 @@ import letterFrequency, { LetterFrequency } from '@vx/mock-data/lib/mocks/letter
 import { scaleLinear } from '@vx/scale';
 import { Point } from '@vx/point';
 import { Line, LineRadial } from '@vx/shape';
-import { ShowProvidedProps } from '../../types';
 
 const orange = '#ff9933';
-const pumpkin = '#f5810c';
+export const pumpkin = '#f5810c';
 const silver = '#d9d9d9';
-const bg = '#FAF7E9';
+export const bg = '#FAF7E9';
 
 const degrees = 360;
 const data = letterFrequency.slice(2, 12);
@@ -48,24 +47,21 @@ function genPolygonPoints<Datum>(
   return { points, pointString };
 }
 
-export default ({
-  width,
-  height,
-  levels = 5,
-  margin = {
-    top: 40,
-    left: 80,
-    right: 80,
-    bottom: 80,
-  },
-}: ShowProvidedProps & { levels?: number }) => {
-  if (width < 10) return null;
+const defaultMargin = { top: 40, left: 80, right: 80, bottom: 80 };
 
+type Props = {
+  width: number;
+  height: number;
+  margin?: { top: number; right: number; bottom: number; left: number };
+  levels?: number;
+};
+
+export default function Example({ width, height, levels = 5, margin = defaultMargin }: Props) {
   const xMax = width - margin.left - margin.right;
   const yMax = height - margin.top - margin.bottom;
   const radius = Math.min(xMax, yMax) / 2;
 
-  const radiusScale = scaleLinear<number>({
+  const radialScale = scaleLinear<number>({
     range: [0, Math.PI * 2],
     domain: [degrees, 0],
   });
@@ -80,29 +76,26 @@ export default ({
   const polygonPoints = genPolygonPoints(data, yScale, y);
   const zeroPoint = new Point({ x: 0, y: 0 });
 
-  return (
+  return width < 10 ? null : (
     <svg width={width} height={height}>
       <rect fill={bg} width={width} height={height} rx={14} />
       <Group top={height / 2 - margin.top} left={width / 2}>
-        {[...new Array(levels)].map((_, i) => {
-          const r = ((i + 1) * radius) / levels;
-          return (
-            <LineRadial
-              key={`web-${i}`}
-              data={webs}
-              angle={d => radiusScale(d.angle)}
-              radius={r}
-              fill="none"
-              stroke={silver}
-              strokeWidth={2}
-              strokeOpacity={0.8}
-              strokeLinecap="round"
-            />
-          );
-        })}
-        {[...new Array(data.length)].map((_, i) => {
-          return <Line key={`radar-line-${i}`} from={zeroPoint} to={points[i]} stroke={silver} />;
-        })}
+        {[...new Array(levels)].map((_, i) => (
+          <LineRadial
+            key={`web-${i}`}
+            data={webs}
+            angle={d => radialScale(d.angle)}
+            radius={((i + 1) * radius) / levels}
+            fill="none"
+            stroke={silver}
+            strokeWidth={2}
+            strokeOpacity={0.8}
+            strokeLinecap="round"
+          />
+        ))}
+        {[...new Array(data.length)].map((_, i) => (
+          <Line key={`radar-line-${i}`} from={zeroPoint} to={points[i]} stroke={silver} />
+        ))}
         <polygon
           points={polygonPoints.pointString}
           fill={orange}
@@ -116,4 +109,4 @@ export default ({
       </Group>
     </svg>
   );
-};
+}

packages/vx-demo/src/docs-v2/examples/vx-radar/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'),
+);

packages/vx-demo/src/docs-v2/examples/vx-radar/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@vx/demo-radar",
+  "description": "Standalone vx radar chart demo.",
+  "main": "index.tsx",
+  "dependencies": {
+    "@babel/runtime": "^7.8.4",
+    "@types/react": "^16",
+    "@types/react-dom": "^16",
+    "@vx/group": "latest",
+    "@vx/mock-data": "latest",
+    "@vx/responsive": "latest",
+    "@vx/point": "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",
+    "radar"
+  ]
+}

packages/vx-demo/src/docs-v2/examples/vx-radar/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;
+}

packages/vx-demo/src/pages/Radar.tsx

@@ -1,11 +1,16 @@
 import React from 'react';
 import Show from '../components/Show';
-import Radar from '../components/tiles/Radar';
-import RadarSource from '!!raw-loader!../components/tiles/Radar';
+import Radar from '../docs-v2/examples/vx-radar/Example';
+import RadarSource from '!!raw-loader!../docs-v2/examples/vx-radar/Example';
 
 export default () => {
   return (
-    <Show component={Radar} title="Radar">
+    <Show
+      margin={{ top: 0, right: 0, bottom: 50, left: 0 }}
+      component={Radar}
+      title="Radar"
+      codeSandboxDirectoryName="vx-radar"
+    >
       {RadarSource}
     </Show>
   );