Merge pull request #280 from hshoff/harry-axis-fix

[demo] add AxisRight to axis demo
airbnb · Apr 28, 2018 · d92ba4d · d92ba4d
2 parents f84a665 + aa782dc
commit d92ba4d
Show file tree

Hide file tree

Showing 2 changed files with 190 additions and 163 deletions.
diff --git a/packages/vx-demo/components/tiles/axis.js b/packages/vx-demo/components/tiles/axis.js
@@ -4,7 +4,7 @@ import { Group } from '@vx/group';
 import { curveBasis } from '@vx/curve';
 import { GradientOrangeRed } from '@vx/gradient';
 import { genDateValue } from '@vx/mock-data';
-import { AxisLeft, AxisBottom } from '@vx/axis';
+import { AxisLeft, AxisRight, AxisBottom } from '@vx/axis';
 import { AreaClosed, LinePath, Line } from '@vx/shape';
 import { scaleTime, scaleLinear } from '@vx/scale';
 import { extent, max } from 'd3-array';
@@ -88,71 +88,97 @@ export default ({ width, height, margin }) => {
           curve={curveBasis}
         />
       </Group>
-      <AxisLeft
-        top={margin.top}
-        left={margin.left}
-        scale={yScale}
-        hideZero
-        numTicks={numTicksForHeight(height)}
-        label="value"
-        labelProps={{
-          fill: '#8e205f',
-          textAnchor: 'middle',
-          fontSize: 12,
-          fontFamily: 'Arial'
-        }}
-        stroke="#1b1a1e"
-        tickStroke="#8e205f"
-        tickLabelProps={(value, index) => ({
-          fill: '#8e205f',
-          textAnchor: 'end',
-          fontSize: 10,
-          fontFamily: 'Arial',
-          dx: '-0.25em',
-          dy: '0.25em'
-        })}
-        tickComponent={({ formattedValue, ...tickProps }) => (
-          <text {...tickProps}>{formattedValue}</text>
-        )}
-      />
-      <AxisBottom
-        top={height - margin.bottom}
-        left={margin.left}
-        scale={xScale}
-        numTicks={numTicksForWidth(width)}
-        label="time"
-      >
-        {props => {
-          const tickLabelSize = 10;
-          const tickRotate = 45;
-          const tickColor = '#8e205f';
-          const axisCenter = (props.axisToPoint.x - props.axisFromPoint.x) / 2;
-          return (
-            <g className="my-custom-bottom-axis">
-              {props.ticks.map((tick, i) => {
-                const tickX = tick.to.x;
-                const tickY = tick.to.y + tickLabelSize + props.tickLength;
-                return (
-                  <Group key={`vx-tick-${tick.value}-${i}`} className={'vx-axis-tick'}>
-                    <Line from={tick.from} to={tick.to} stroke={tickColor} />
-                    <text
-                      transform={`translate(${tickX}, ${tickY}) rotate(${tickRotate})`}
-                      fontSize={tickLabelSize}
-                      textAnchor="middle"
-                      fill={tickColor}
-                    >
-                      {tick.formattedValue}
-                    </text>
-                  </Group>
-                );
-              })}
-              <text textAnchor="middle" transform={`translate(${axisCenter}, 50)`} fontSize="8">
-                {props.label}
-              </text>
-            </g>
-          );
-        }}
-      </AxisBottom>
+      <Group left={margin.left}>
+        <AxisLeft
+          top={margin.top}
+          left={0}
+          scale={yScale}
+          hideZero
+          numTicks={numTicksForHeight(height)}
+          label="Axis Left Label"
+          labelProps={{
+            fill: '#8e205f',
+            textAnchor: 'middle',
+            fontSize: 12,
+            fontFamily: 'Arial'
+          }}
+          stroke="#1b1a1e"
+          tickStroke="#8e205f"
+          tickLabelProps={(value, index) => ({
+            fill: '#8e205f',
+            textAnchor: 'end',
+            fontSize: 10,
+            fontFamily: 'Arial',
+            dx: '-0.25em',
+            dy: '0.25em'
+          })}
+          tickComponent={({ formattedValue, ...tickProps }) => (
+            <text {...tickProps}>{formattedValue}</text>
+          )}
+        />
+        <AxisRight
+          top={margin.top}
+          left={xMax}
+          scale={yScale}
+          hideZero
+          numTicks={numTicksForHeight(height)}
+          label="Axis Right Label"
+          labelProps={{
+            fill: '#8e205f',
+            textAnchor: 'middle',
+            fontSize: 12,
+            fontFamily: 'Arial'
+          }}
+          stroke="#1b1a1e"
+          tickStroke="#8e205f"
+          tickLabelProps={(value, index) => ({
+            fill: '#8e205f',
+            textAnchor: 'start',
+            fontSize: 10,
+            fontFamily: 'Arial',
+            dx: '0.25em',
+            dy: '0.25em'
+          })}
+        />
+        <AxisBottom
+          top={height - margin.bottom}
+          left={0}
+          scale={xScale}
+          numTicks={numTicksForWidth(width)}
+          label="Time"
+        >
+          {props => {
+            const tickLabelSize = 10;
+            const tickRotate = 45;
+            const tickColor = '#8e205f';
+            const axisCenter = (props.axisToPoint.x - props.axisFromPoint.x) / 2;
+            return (
+              <g className="my-custom-bottom-axis">
+                {props.ticks.map((tick, i) => {
+                  const tickX = tick.to.x;
+                  const tickY = tick.to.y + tickLabelSize + props.tickLength;
+                  return (
+                    <Group key={`vx-tick-${tick.value}-${i}`} className={'vx-axis-tick'}>
+                      <Line from={tick.from} to={tick.to} stroke={tickColor} />
+                      <text
+                        transform={`translate(${tickX}, ${tickY}) rotate(${tickRotate})`}
+                        fontSize={tickLabelSize}
+                        textAnchor="middle"
+                        fill={tickColor}
+                      >
+                        {tick.formattedValue}
+                      </text>
+                    </Group>
+                  );
+                })}
+                <text textAnchor="middle" transform={`translate(${axisCenter}, 50)`} fontSize="8">
+                  {props.label}
+                </text>
+              </g>
+            );
+          }}
+        </AxisBottom>
+      </Group>
     </svg>
   );
 };