Merge pull request #282 from hshoff/harry-band-grid

[grid] support band scales. fixes #268
airbnb · Apr 28, 2018 · 01b64c6 · 01b64c6
2 parents 6f56f97 + f5a9fa0
commit 01b64c6
Show file tree

Hide file tree

Showing 5 changed files with 92 additions and 77 deletions.
diff --git a/packages/vx-demo/components/tiles/barstack.js b/packages/vx-demo/components/tiles/barstack.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { BarStack } from '@vx/shape';
 import { Group } from '@vx/group';
+import { Grid } from '@vx/grid';
 import { AxisBottom } from '@vx/axis';
 import { cityTemperature } from '@vx/mock-data';
 import { scaleBand, scaleLinear, scaleOrdinal } from '@vx/scale';
@@ -73,6 +74,17 @@ export default withTooltip(
       <div style={{ position: 'relative' }}>
         <svg width={width} height={height}>
           <rect x={0} y={0} width={width} height={height} fill={`#eaedff`} rx={14} />
+          <Grid
+            top={margin.top}
+            left={margin.left}
+            xScale={xScale}
+            yScale={yScale}
+            width={xMax}
+            height={yMax}
+            stroke={'black'}
+            strokeOpacity={0.1}
+            xOffset={xScale.bandwidth() / 2}
+          />
           <BarStack
             top={margin.top}
             data={data}

diff --git a/packages/vx-demo/pages/barstack.js b/packages/vx-demo/pages/barstack.js
@@ -8,6 +8,7 @@ export default () => {
       {`import React from 'react';
 import { BarStack } from '@vx/shape';
 import { Group } from '@vx/group';
+import { Grid } from '@vx/grid';
 import { AxisBottom } from '@vx/axis';
 import { cityTemperature } from '@vx/mock-data';
 import { scaleBand, scaleLinear, scaleOrdinal } from '@vx/scale';
@@ -79,13 +80,17 @@ export default withTooltip(
     return (
       <div style={{ position: 'relative' }}>
         <svg width={width} height={height}>
-          <rect
-            x={0}
-            y={0}
-            width={width}
-            height={height}
-            fill='#eaedff'
-            rx={14}
+          <rect x={0} y={0} width={width} height={height} fill={\`#eaedff\`} rx={14} />
+          <Grid
+            top={margin.top}
+            left={margin.left}
+            xScale={xScale}
+            yScale={yScale}
+            width={xMax}
+            height={yMax}
+            stroke={'black'}
+            strokeOpacity={0.1}
+            xOffset={xScale.bandwidth() / 2}
           />
           <BarStack
             top={margin.top}
@@ -108,8 +113,7 @@ export default withTooltip(
             onMouseMove={data => event => {
               if (tooltipTimeout) clearTimeout(tooltipTimeout);
               const top = event.clientY - margin.top - data.height;
-              const left =
-                xScale(data.x) + data.width + data.paddingInner * data.step / 2;
+              const left = xScale(data.x) + data.width + data.paddingInner * data.step / 2;
               showTooltip({
                 tooltipData: data,
                 tooltipTop: top,
@@ -125,7 +129,7 @@ export default withTooltip(
             tickLabelProps={(value, index) => ({
               fill: '#a44afe',
               fontSize: 11,
-              textAnchor: 'middle',
+              textAnchor: 'middle'
             })}
           />
         </svg>
@@ -139,13 +143,9 @@ export default withTooltip(
             fontSize: '14px'
           }}
         >
-          <LegendOrdinal
-            scale={zScale}
-            direction="row"
-            labelMargin="0 15px 0 0"
-          />
+          <LegendOrdinal scale={zScale} direction="row" labelMargin="0 15px 0 0" />
         </div>
-        {tooltipOpen &&
+        {tooltipOpen && (
           <Tooltip
             top={tooltipTop}
             left={tooltipLeft}
@@ -156,24 +156,18 @@ export default withTooltip(
             }}
           >
             <div style={{ color: zScale(tooltipData.key) }}>
-              <strong>
-                {tooltipData.key}
-              </strong>
-            </div>
-            <div>
-              {tooltipData.data[tooltipData.key]}℉
+              <strong>{tooltipData.key}</strong>
             </div>
+            <div>{tooltipData.data[tooltipData.key]}℉</div>
             <div>
-              <small>
-                {tooltipData.xFormatted}
-              </small>
+              <small>{tooltipData.xFormatted}</small>
             </div>
-          </Tooltip>}
+          </Tooltip>
+        )}
       </div>
     );
   }
-);
-`}
+);`}
     </Show>
   );
 };
diff --git a/packages/vx-grid/src/grids/Columns.js b/packages/vx-grid/src/grids/Columns.js
@@ -15,34 +15,35 @@ export default function Columns({
   className,
   numTicks = 10,
   lineStyle,
+  offset,
   ...restProps
 }) {
+  const ticks = scale.ticks ? scale.ticks(numTicks) : scale.domain();
   return (
     <Group className={cx('vx-columns', className)} top={top} left={left}>
-      {scale.ticks &&
-        scale.ticks(numTicks).map((d, i) => {
-          const x = scale(d);
-          const fromPoint = new Point({
-            x,
-            y: 0
-          });
-          const toPoint = new Point({
-            x,
-            y: height
-          });
-          return (
-            <Line
-              key={`column-line-${d}-${i}`}
-              from={fromPoint}
-              to={toPoint}
-              stroke={stroke}
-              strokeWidth={strokeWidth}
-              strokeDasharray={strokeDasharray}
-              style={lineStyle}
-              {...restProps}
-            />
-          );
-        })}
+      {ticks.map((d, i) => {
+        const x = offset ? scale(d) + offset : scale(d);
+        const fromPoint = new Point({
+          x,
+          y: 0
+        });
+        const toPoint = new Point({
+          x,
+          y: height
+        });
+        return (
+          <Line
+            key={`column-line-${d}-${i}`}
+            from={fromPoint}
+            to={toPoint}
+            stroke={stroke}
+            strokeWidth={strokeWidth}
+            strokeDasharray={strokeDasharray}
+            style={lineStyle}
+            {...restProps}
+          />
+        );
+      })}
     </Group>
   );
 }
diff --git a/packages/vx-grid/src/grids/Grid.js b/packages/vx-grid/src/grids/Grid.js
@@ -18,7 +18,10 @@ export default function Grid({
   numTicksRows,
   numTicksColumns,
   rowLineStyle,
-  columnLineStyle
+  columnLineStyle,
+  xOffset,
+  yOffset,
+  ...restProps
 }) {
   return (
     <Group className={cx('vx-grid', className)} top={top} left={left}>
@@ -31,6 +34,8 @@ export default function Grid({
         strokeDasharray={strokeDasharray}
         numTicks={numTicksRows}
         style={rowLineStyle}
+        offset={yOffset}
+        {...restProps}
       />
       <Columns
         className={className}
@@ -41,6 +46,8 @@ export default function Grid({
         strokeDasharray={strokeDasharray}
         numTicks={numTicksColumns}
         style={columnLineStyle}
+        offset={xOffset}
+        {...restProps}
       />
     </Group>
   );

diff --git a/packages/vx-grid/src/grids/Rows.js b/packages/vx-grid/src/grids/Rows.js
@@ -15,34 +15,35 @@ export default function Rows({
   className,
   numTicks = 10,
   lineStyle,
+  offset,
   ...restProps
 }) {
+  const ticks = scale.ticks ? scale.ticks(numTicks) : scale.domain();
   return (
     <Group className={cx('vx-rows', className)} top={top} left={left}>
-      {scale.ticks &&
-        scale.ticks(numTicks).map((d, i) => {
-          const y = scale(d);
-          const fromPoint = new Point({
-            x: 0,
-            y
-          });
-          const toPoint = new Point({
-            x: width,
-            y
-          });
-          return (
-            <Line
-              key={`row-line-${d}-${i}`}
-              from={fromPoint}
-              to={toPoint}
-              stroke={stroke}
-              strokeWidth={strokeWidth}
-              strokeDasharray={strokeDasharray}
-              style={lineStyle}
-              {...restProps}
-            />
-          );
-        })}
+      {ticks.map((d, i) => {
+        const y = offset ? scale(d) + offset : scale(d);
+        const fromPoint = new Point({
+          x: 0,
+          y
+        });
+        const toPoint = new Point({
+          x: width,
+          y
+        });
+        return (
+          <Line
+            key={`row-line-${d}-${i}`}
+            from={fromPoint}
+            to={toPoint}
+            stroke={stroke}
+            strokeWidth={strokeWidth}
+            strokeDasharray={strokeDasharray}
+            style={lineStyle}
+            {...restProps}
+          />
+        );
+      })}
     </Group>
   );
 }