new(vx-demo): convert BarGroup, BarGroupHorizontal to codesandbox

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

@@ -17,8 +17,14 @@ import Axis, {
   backgroundColor as axisBackgroundColor,
   labelColor as axisTextColor,
 } from '../docs-v2/examples/vx-axis/Example';
-import BarGroup from './tiles/BarGroup';
-import BarGroupHorizontal from './tiles/BarGroupHorizontal';
+import BarGroup, {
+  background as bargroupBackground,
+  green as bargroupText,
+} from '../docs-v2/examples/vx-bargroup/Example';
+import BarGroupHorizontal, {
+  background as horizontalBargroupBackground,
+  green as horizontalBargroupText,
+} from '../docs-v2/examples/vx-bargroup-horizontal/Example';
 import BarStack, {
   background as barstackBackground,
   purple3 as barstackTextColor,
@@ -305,15 +311,15 @@ export default function Gallery() {
         </Tilt>
         <Tilt className="tilt" options={tiltOptions}>
           <Link href="/bargroup">
-            <div className="gallery-item" style={{ background: '#612efb' }}>
+            <div className="gallery-item" style={{ background: bargroupBackground }}>
               <div className="image">
                 <ParentSize>
                   {({ width, height }) => (
                     <BarGroup width={width} height={height + detailsHeight} />
                   )}
                 </ParentSize>
               </div>
-              <div className="details" style={{ color: '#e5fd3d' }}>
+              <div className="details" style={{ color: bargroupText }}>
                 <div className="title">Bar Group</div>
                 <div className="description">
                   <pre>{'<Shape.BarGroup />'}</pre>
@@ -324,15 +330,19 @@ export default function Gallery() {
         </Tilt>
         <Tilt className="tilt" options={tiltOptions}>
           <Link href="/bargrouphorizontal">
-            <div className="gallery-item" style={{ background: '#612efb' }}>
+            <div className="gallery-item" style={{ background: horizontalBargroupBackground }}>
               <div className="image">
                 <ParentSize>
                   {({ width, height }) => (
-                    <BarGroupHorizontal width={width} height={height + detailsHeight} />
+                    <BarGroupHorizontal
+                      width={width}
+                      height={height + detailsHeight}
+                      margin={{ top: 20, bottom: detailsHeight, left: 50, right: 20 }}
+                    />
                   )}
                 </ParentSize>
               </div>
-              <div className="details" style={{ color: '#e5fd3d' }}>
+              <div className="details" style={{ color: horizontalBargroupText }}>
                 <div className="title">Bar Group Horizontal</div>
                 <div className="description">
                   <pre>{'<Shape.BarGroupHorizontal />'}</pre>

packages/vx-demo/src/components/tiles/BarGroupHorizontal.tsx → packages/vx-demo/src/docs-v2/examples/vx-bargroup-horizontal/Example.tsx

@@ -5,10 +5,22 @@ import { AxisLeft } from '@vx/axis';
 import cityTemperature, { CityTemperature } from '@vx/mock-data/lib/mocks/cityTemperature';
 import { scaleBand, scaleLinear, scaleOrdinal } from '@vx/scale';
 import { timeParse, timeFormat } from 'd3-time-format';
-import { ShowProvidedProps } from '../../types';
+
+type Props = {
+  width: number;
+  height: number;
+  margin?: { top: number; right: number; bottom: number; left: number };
+  events?: boolean;
+};
 
 type CityName = 'New York' | 'San Francisco' | 'Austin';
 
+const blue = '#aeeef8';
+export const green = '#e5fd3d';
+const purple = '#9caff6';
+export const background = '#612efb';
+const defaultMargin = { top: 20, right: 20, bottom: 20, left: 50 };
+
 const parseDate = timeParse('%Y%m%d');
 const format = timeFormat('%b %d');
 const formatDate = (date: string) => format(parseDate(date) as Date);
@@ -36,34 +48,22 @@ const tempScale = scaleLinear<number>({
 });
 const colorScale = scaleOrdinal<string, string>({
   domain: keys,
-  range: ['#aeeef8', '#e5fd3d', '#9caff6'],
+  range: [blue, green, purple],
 });
 
-export default ({
-  width,
-  height,
-  margin = {
-    top: 20,
-    left: 50,
-    right: 10,
-    bottom: 0,
-  },
-  events = false,
-}: ShowProvidedProps) => {
-  if (width < 10) return null;
-
+export default function Example({ width, height, margin = defaultMargin, events = false }: Props) {
   // bounds
   const xMax = width - margin.left - margin.right;
-  const yMax = height - 100;
+  const yMax = height - margin.top - margin.bottom;
 
-  // scales
+  // update scale output dimensions
   dateScale.rangeRound([0, yMax]);
   cityScale.rangeRound([0, dateScale.bandwidth()]);
   tempScale.rangeRound([0, xMax]);
 
-  return (
+  return width < 10 ? null : (
     <svg width={width} height={height}>
-      <rect x={0} y={0} width={width} height={height} fill="#612efb" rx={14} />
+      <rect x={0} y={0} width={width} height={height} fill={background} rx={14} />
       <Group top={margin.top} left={margin.left}>
         <BarGroupHorizontal<CityTemperature, CityName>
           data={data}
@@ -101,12 +101,12 @@ export default ({
         </BarGroupHorizontal>
         <AxisLeft
           scale={dateScale}
-          stroke="#e5fd3d"
-          tickStroke="#e5fd3d"
+          stroke={green}
+          tickStroke={green}
           tickFormat={formatDate}
           hideAxisLine
           tickLabelProps={() => ({
-            fill: '#e5fd3d',
+            fill: green,
             fontSize: 11,
             textAnchor: 'end',
             dy: '0.33em',
@@ -115,4 +115,4 @@ export default ({
       </Group>
     </svg>
   );
-};
+}

packages/vx-demo/src/docs-v2/examples/vx-bargroup-horizontal/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-bargroup-horizontal/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@vx/demo-bargroup-horizontal",
+  "description": "Standalone vx horizontal grouped bar demo.",
+  "main": "index.tsx",
+  "dependencies": {
+    "@babel/runtime": "^7.8.4",
+    "@types/react": "^16",
+    "@types/react-dom": "^16",
+    "@vx/axis": "latest",
+    "@vx/group": "latest",
+    "@vx/mock-data": "latest",
+    "@vx/responsive": "latest",
+    "@vx/scale": "latest",
+    "@vx/shape": "latest",
+    "d3-time-format": "^2.2.3",
+    "react": "^16",
+    "react-dom": "^16",
+    "react-scripts-ts": "3.1.0",
+    "typescript": "^3"
+  },
+  "keywords": [
+    "visualization",
+    "d3",
+    "react",
+    "vx", 
+    "bargroup"
+  ]
+}

packages/vx-demo/src/docs-v2/examples/vx-bargroup-horizontal/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/components/tiles/BarGroup.tsx → packages/vx-demo/src/docs-v2/examples/vx-bargroup/Example.tsx

@@ -5,17 +5,24 @@ import { AxisBottom } from '@vx/axis';
 import cityTemperature, { CityTemperature } from '@vx/mock-data/lib/mocks/cityTemperature';
 import { scaleBand, scaleLinear, scaleOrdinal } from '@vx/scale';
 import { timeParse, timeFormat } from 'd3-time-format';
-import { ShowProvidedProps } from '../../types';
+
+type Props = {
+  width: number;
+  height: number;
+  margin?: { top: number; right: number; bottom: number; left: number };
+  events?: boolean;
+};
 
 type CityName = 'New York' | 'San Francisco' | 'Austin';
 
 const blue = '#aeeef8';
-const green = '#e5fd3d';
+export const green = '#e5fd3d';
 const purple = '#9caff6';
-const bg = '#612efb';
+export const background = '#612efb';
 
 const data = cityTemperature.slice(0, 8);
 const keys = Object.keys(data[0]).filter(d => d !== 'date') as CityName[];
+const defaultMargin = { top: 40, right: 0, bottom: 40, left: 0 };
 
 const parseDate = timeParse('%Y%m%d');
 const format = timeFormat('%b %d');
@@ -41,31 +48,20 @@ const colorScale = scaleOrdinal<string, string>({
   range: [blue, green, purple],
 });
 
-export default ({
-  width,
-  height,
-  events = false,
-  margin = {
-    top: 40,
-    right: 0,
-    bottom: 0,
-    left: 0,
-  },
-}: ShowProvidedProps) => {
-  if (width < 10) return null;
-
+export default function Example({ width, height, events = false, margin = defaultMargin }: Props) {
   // bounds
-  const xMax = width;
-  const yMax = height - margin.top - 100;
+  const xMax = width - margin.left - margin.right;
+  const yMax = height - margin.top - margin.bottom;
 
+  // update scale output dimensions
   dateScale.rangeRound([0, xMax]);
   cityScale.rangeRound([0, dateScale.bandwidth()]);
   tempScale.range([yMax, 0]);
 
-  return (
+  return width < 10 ? null : (
     <svg width={width} height={height}>
-      <rect x={0} y={0} width={width} height={height} fill={bg} rx={14} />
-      <Group top={margin.top}>
+      <rect x={0} y={0} width={width} height={height} fill={background} rx={14} />
+      <Group top={margin.top} left={margin.left}>
         <BarGroup<CityTemperature, string>
           data={data}
           keys={keys}
@@ -115,4 +111,4 @@ export default ({
       />
     </svg>
   );
-};
+}

packages/vx-demo/src/docs-v2/examples/vx-bargroup/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-bargroup/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@vx/demo-bargroup",
+  "description": "Standalone vx grouped bar demo.",
+  "main": "index.tsx",
+  "dependencies": {
+    "@babel/runtime": "^7.8.4",
+    "@types/react": "^16",
+    "@types/react-dom": "^16",
+    "@vx/axis": "latest",
+    "@vx/group": "latest",
+    "@vx/mock-data": "latest",
+    "@vx/responsive": "latest",
+    "@vx/scale": "latest",
+    "@vx/shape": "latest",
+    "d3-time-format": "^2.2.3",
+    "react": "^16",
+    "react-dom": "^16",
+    "react-scripts-ts": "3.1.0",
+    "typescript": "^3"
+  },
+  "keywords": [
+    "visualization",
+    "d3",
+    "react",
+    "vx",
+    "bargroup"
+  ]
+}

packages/vx-demo/src/docs-v2/examples/vx-bargroup/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/BarGroup.tsx

@@ -1,17 +1,16 @@
 import React from 'react';
 import Show from '../components/Show';
-import BarGroup from '../components/tiles/BarGroup';
-import BarGroupSource from '!!raw-loader!../components/tiles/BarGroup';
+import BarGroup from '../docs-v2/examples/vx-bargroup/Example';
+import BarGroupSource from '!!raw-loader!../docs-v2/examples/vx-bargroup/Example';
 
-export default () => {
-  return (
-    <Show
-      events
-      margin={{ top: 80, right: 0, bottom: 0, left: 0 }}
-      component={BarGroup}
-      title="Bar Group"
-    >
-      {BarGroupSource}
-    </Show>
-  );
-};
+export default () => (
+  <Show
+    events
+    margin={{ top: 80, right: 0, bottom: 80, left: 0 }}
+    component={BarGroup}
+    title="Bar Group"
+    codeSandboxDirectoryName="vx-bargroup"
+  >
+    {BarGroupSource}
+  </Show>
+);

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

@@ -1,17 +1,16 @@
 import React from 'react';
 import Show from '../components/Show';
-import BarGroupHorizontal from '../components/tiles/BarGroupHorizontal';
-import BarGroupHorizontalSource from '!!raw-loader!../components/tiles/BarGroupHorizontal';
+import BarGroupHorizontal from '../docs-v2/examples/vx-bargroup-horizontal/Example';
+import BarGroupHorizontalSource from '!!raw-loader!../docs-v2/examples/vx-bargroup-horizontal/Example';
 
-export default () => {
-  return (
-    <Show
-      events
-      margin={{ top: 45, left: 60, right: 20, bottom: 0 }}
-      component={BarGroupHorizontal}
-      title="Bar Group Horizontal"
-    >
-      {BarGroupHorizontalSource}
-    </Show>
-  );
-};
+export default () => (
+  <Show
+    events
+    margin={{ top: 45, left: 60, right: 20, bottom: 45 }}
+    component={BarGroupHorizontal}
+    title="Bar Group Horizontal"
+    codeSandboxDirectoryName="vx-bargroup-horizontal"
+  >
+    {BarGroupHorizontalSource}
+  </Show>
+);