Reverse props direction meaning

src/grid-area.tsx

@@ -77,7 +77,8 @@ class GridArea extends PureComponent<GridAreaProps, {}> {
 
     const style = {...GridArea.defaultStyle, ...this.props.style}; 
 
-    const isVertical = (this.props.direction === Direction.VERTICAL);
+    const axisDirection = (this.props.direction === Direction.VERTICAL ? Direction.HORIZONTAL : Direction.VERTICAL);
+    const isVertical = (axisDirection === Direction.VERTICAL);
 
     const primaryAxisName = isVertical ? 'y' : 'x';
     const crossAxisName = isVertical ? 'x' : 'y';

stories/BasicGridAreaHorizontal.js

@@ -24,7 +24,7 @@ export default class BasicChartWithGridArea extends React.Component {
         <HorizontalGridLines />
         <VerticalGridLines />
         <GridArea 
-        direction={'vertical'} 
+        direction={'horizontal'} 
         style={{fill:"rgba(0,255,0,0.4)"}}
         highlightRegion={[[4, 5.76], [8.5, 11.25]]}
         />

stories/BasicGridAreaVertical.js

@@ -24,7 +24,7 @@ export default class BasicChartWithGridArea extends React.Component {
         <HorizontalGridLines />
         <VerticalGridLines />
         <GridArea 
-        direction={'horizontal'} 
+        direction={'vertical'} 
         style={{fill:"rgba(0,255,0,0.4)"}}
         highlightRegion={[[timestamp + MSEC_DAILY*2, timestamp + MSEC_DAILY*3]]}
         />