fix(theme): fix grid position check (#373)

* Update grid type check and update util naming closes #372
elastic · Sep 12, 2019 · af4805f · af4805f
1 parent db54398
commit af4805f
Show file tree

Hide file tree

Showing 9 changed files with 90 additions and 132 deletions.
diff --git a/.playground/playgroud.tsx b/.playground/playgroud.tsx
@@ -1,16 +1,5 @@
 import React, { Fragment } from 'react';
-import {
-  Axis,
-  Chart,
-  getAxisId,
-  getSpecId,
-  Position,
-  ScaleType,
-  Settings,
-  BarSeries,
-  LineSeries,
-  AreaSeries,
-} from '../src';
+import { Axis, Chart, getAxisId, getSpecId, Position, ScaleType, Settings, BarSeries } from '../src';
 
 export class Playground extends React.Component {
   render() {
@@ -20,9 +9,23 @@ export class Playground extends React.Component {
           <Chart>
             <Settings
               showLegend={true}
-              xDomain={{
-                min: 0.5,
-                max: 4.5,
+              theme={{
+                axes: {
+                  gridLineStyle: {
+                    horizontal: {
+                      stroke: 'red',
+                      strokeWidth: 0.5,
+                      opacity: 1,
+                      dash: [0, 0],
+                    },
+                    vertical: {
+                      stroke: 'blue',
+                      strokeWidth: 0.5,
+                      opacity: 1,
+                      dash: [4, 4],
+                    },
+                  },
+                },
               }}
             />
             <Axis
@@ -32,8 +35,9 @@ export class Playground extends React.Component {
                 min: 50,
                 max: 250,
               }}
+              showGridLines
             />
-            <Axis id={getAxisId('x')} position={Position.Bottom} />
+            <Axis showGridLines id={getAxisId('x')} position={Position.Bottom} />
             <BarSeries
               id={getSpecId('bar')}
               yScaleType={ScaleType.Linear}
@@ -44,72 +48,6 @@ export class Playground extends React.Component {
             />
           </Chart>
         </div>
-        <div className="chart">
-          <Chart>
-            <Settings
-              showLegend={true}
-              xDomain={{
-                min: 0.5,
-                max: 4.5,
-              }}
-            />
-            <Axis
-              id={getAxisId('y')}
-              position={Position.Left}
-              domain={{
-                min: 50,
-                max: 450,
-              }}
-            />
-            <Axis id={getAxisId('x')} position={Position.Bottom} />
-            <LineSeries
-              id={getSpecId('line')}
-              yScaleType={ScaleType.Linear}
-              xScaleType={ScaleType.Linear}
-              xAccessor={0}
-              yAccessors={[1]}
-              stackAccessors={[0]}
-              data={[[0.25, 100], [1, 50], [3, 400], [4, 250], [5, 235]]}
-            />
-            <LineSeries
-              id={getSpecId('line2')}
-              yScaleType={ScaleType.Linear}
-              xScaleType={ScaleType.Linear}
-              xAccessor={0}
-              yAccessors={[1]}
-              stackAccessors={[0]}
-              data={[[0.25, 100], [0.5, 100], [1, 50], [3, 400], [4, 250], [4.5, 220], [5, 235]]}
-            />
-          </Chart>
-        </div>
-        <div className="chart">
-          <Chart>
-            <Settings
-              showLegend={true}
-              xDomain={{
-                min: 0.5,
-                max: 4.5,
-              }}
-            />
-            <Axis
-              id={getAxisId('y')}
-              position={Position.Left}
-              domain={{
-                min: 50,
-                max: 250,
-              }}
-            />
-            <Axis id={getAxisId('x')} position={Position.Bottom} />
-            <AreaSeries
-              id={getSpecId('line')}
-              yScaleType={ScaleType.Linear}
-              xScaleType={ScaleType.Linear}
-              xAccessor={0}
-              yAccessors={[1]}
-              data={[[0, 100], [1, 50], [3, 400], [4, 250], [5, 235]]}
-            />
-          </Chart>
-        </div>
       </Fragment>
     );
   }

diff --git a/src/chart_types/xy_chart/annotations/annotation_utils.ts b/src/chart_types/xy_chart/annotations/annotation_utils.ts
@@ -1,4 +1,3 @@
-import { isHorizontal } from '../utils/axis_utils';
 import {
   AnnotationDomainType,
   AnnotationDomainTypes,
@@ -16,6 +15,7 @@ import {
   RectAnnotationSpec,
   Rotation,
 } from '../utils/specs';
+import { isHorizontalAxis } from '../utils/axis_utils';
 import { LineAnnotationStyle } from '../../../utils/themes/theme';
 import { Dimensions } from '../../../utils/dimensions';
 import { AnnotationId, AxisId, GroupId } from '../../../utils/ids';
@@ -637,11 +637,9 @@ export function isVerticalAnnotationLine(isXDomainAnnotation: boolean, isHorizon
 
 export function getAnnotationLineTooltipXOffset(chartRotation: Rotation, axisPosition: Position): number {
   let xOffset = 0;
-
-  const isHorizontalAxis = isHorizontal(axisPosition);
   const isChartHorizontalRotation = isHorizontalRotation(chartRotation);
 
-  if (isHorizontalAxis) {
+  if (isHorizontalAxis(axisPosition)) {
     xOffset = isChartHorizontalRotation ? 50 : 0;
   } else {
     xOffset = isChartHorizontalRotation ? (axisPosition === Position.Right ? 100 : 0) : 50;
@@ -652,11 +650,9 @@ export function getAnnotationLineTooltipXOffset(chartRotation: Rotation, axisPos
 
 export function getAnnotationLineTooltipYOffset(chartRotation: Rotation, axisPosition: Position): number {
   let yOffset = 0;
-
-  const isHorizontalAxis = isHorizontal(axisPosition);
   const isChartHorizontalRotation = isHorizontalRotation(chartRotation);
 
-  if (isHorizontalAxis) {
+  if (isHorizontalAxis(axisPosition)) {
     yOffset = isChartHorizontalRotation ? (axisPosition === Position.Top ? 0 : 100) : 50;
   } else {
     yOffset = isChartHorizontalRotation ? 50 : 100;

diff --git a/src/chart_types/xy_chart/store/utils.ts b/src/chart_types/xy_chart/store/utils.ts
@@ -1,4 +1,4 @@
-import { isVertical } from '../utils/axis_utils';
+import { isVerticalAxis } from '../utils/axis_utils';
 import { CurveType } from '../../../utils/curves';
 import { mergeXDomain, XDomain } from '../domains/x_domain';
 import { mergeYDomain, YDomain } from '../domains/y_domain';
@@ -538,7 +538,7 @@ export function getAxesSpecForSpecId(axesSpecs: Map<AxisId, AxisSpec>, groupId:
     if (axisSpec.groupId !== groupId) {
       continue;
     }
-    if (isVertical(axisSpec.position)) {
+    if (isVerticalAxis(axisSpec.position)) {
       yAxis = axisSpec;
     } else {
       xAxis = axisSpec;

diff --git a/src/chart_types/xy_chart/utils/axis_utils.test.ts b/src/chart_types/xy_chart/utils/axis_utils.test.ts
@@ -24,11 +24,13 @@ import {
   getVerticalAxisTickLineProps,
   getVisibleTicks,
   isBounded,
-  isHorizontal,
-  isVertical,
+  isHorizontalAxis,
+  isVerticalAxis,
   isYDomain,
   getAxisTickLabelPadding,
   mergeYCustomDomainsByGroupId,
+  isVerticalGrid,
+  isHorizontalGrid,
 } from './axis_utils';
 import { CanvasTextBBoxCalculator } from '../../../utils/bbox/canvas_text_bbox_calculator';
 import { SvgTextBBoxCalculator } from '../../../utils/bbox/svg_text_bbox_calculator';
@@ -1095,15 +1097,27 @@ describe('Axis computational utils', () => {
   });
 
   test('should determine orientation of axis position', () => {
-    expect(isVertical(Position.Left)).toBe(true);
-    expect(isVertical(Position.Right)).toBe(true);
-    expect(isVertical(Position.Top)).toBe(false);
-    expect(isVertical(Position.Bottom)).toBe(false);
-
-    expect(isHorizontal(Position.Left)).toBe(false);
-    expect(isHorizontal(Position.Right)).toBe(false);
-    expect(isHorizontal(Position.Top)).toBe(true);
-    expect(isHorizontal(Position.Bottom)).toBe(true);
+    expect(isVerticalAxis(Position.Left)).toBe(true);
+    expect(isVerticalAxis(Position.Right)).toBe(true);
+    expect(isVerticalAxis(Position.Top)).toBe(false);
+    expect(isVerticalAxis(Position.Bottom)).toBe(false);
+
+    expect(isHorizontalAxis(Position.Left)).toBe(false);
+    expect(isHorizontalAxis(Position.Right)).toBe(false);
+    expect(isHorizontalAxis(Position.Top)).toBe(true);
+    expect(isHorizontalAxis(Position.Bottom)).toBe(true);
+  });
+
+  test('should determine orientation of gridlines from axis position', () => {
+    expect(isVerticalGrid(Position.Left)).toBe(false);
+    expect(isVerticalGrid(Position.Right)).toBe(false);
+    expect(isVerticalGrid(Position.Top)).toBe(true);
+    expect(isVerticalGrid(Position.Bottom)).toBe(true);
+
+    expect(isHorizontalGrid(Position.Left)).toBe(true);
+    expect(isHorizontalGrid(Position.Right)).toBe(true);
+    expect(isHorizontalGrid(Position.Top)).toBe(false);
+    expect(isHorizontalGrid(Position.Bottom)).toBe(false);
   });
 
   test('should determine if axis belongs to yDomain', () => {

diff --git a/src/chart_types/xy_chart/utils/axis_utils.ts b/src/chart_types/xy_chart/utils/axis_utils.ts
@@ -107,7 +107,7 @@ export function getAxisTickLabelPadding(axisConfigTickLabelPadding: number, axis
 
 export function isYDomain(position: Position, chartRotation: Rotation): boolean {
   const isStraightRotation = chartRotation === 0 || chartRotation === 180;
-  if (isVertical(position)) {
+  if (isVerticalAxis(position)) {
     return isStraightRotation;
   }
 
@@ -277,7 +277,7 @@ export function getTickLabelProps(
   let align = 'center';
   let verticalAlign = 'middle';
 
-  if (isVertical(position)) {
+  if (isVerticalAxis(position)) {
     const isLeftAxis = position === Position.Left;
 
     if (!isRotated) {
@@ -457,7 +457,7 @@ export function getVisibleTicks(allTicks: AxisTick[], axisSpec: AxisSpec, axisDi
   const { showOverlappingTicks, showOverlappingLabels } = axisSpec;
   const { maxLabelBboxHeight, maxLabelBboxWidth } = axisDim;
 
-  const requiredSpace = isVertical(axisSpec.position) ? maxLabelBboxHeight / 2 : maxLabelBboxWidth / 2;
+  const requiredSpace = isVerticalAxis(axisSpec.position) ? maxLabelBboxHeight / 2 : maxLabelBboxWidth / 2;
 
   let previousOccupiedSpace = 0;
   const visibleTicks = [];
@@ -510,7 +510,7 @@ export function getAxisPosition(
   let leftIncrement = 0;
   let rightIncrement = 0;
 
-  if (isVertical(position)) {
+  if (isVerticalAxis(position)) {
     const dimWidth = maxLabelBboxWidth + tickSize + tickPadding + axisTitleHeight;
     if (position === Position.Left) {
       leftIncrement = dimWidth + chartMargins.left;
@@ -535,6 +535,22 @@ export function getAxisPosition(
   return { dimensions, topIncrement, bottomIncrement, leftIncrement, rightIncrement };
 }
 
+export function isVerticalAxis(axisPosition: Position) {
+  return axisPosition === Position.Left || axisPosition === Position.Right;
+}
+
+export function isHorizontalAxis(axisPosition: Position) {
+  return axisPosition === Position.Top || axisPosition === Position.Bottom;
+}
+
+export function isVerticalGrid(axisPosition: Position) {
+  return isHorizontalAxis(axisPosition);
+}
+
+export function isHorizontalGrid(axisPosition: Position) {
+  return isVerticalAxis(axisPosition);
+}
+
 export function getAxisTicksPositions(
   computedChartDims: {
     chartDimensions: Dimensions;
@@ -591,10 +607,10 @@ export function getAxisTicksPositions(
     const visibleTicks = getVisibleTicks(allTicks, axisSpec, axisDim);
 
     if (axisSpec.showGridLines) {
-      const isVerticalAxis = isVertical(axisSpec.position);
+      const isVertical = isVerticalAxis(axisSpec.position);
       const gridLines = visibleTicks.map(
         (tick: AxisTick): AxisLinePosition => {
-          return computeAxisGridLinePositions(isVerticalAxis, tick.position, chartDimensions);
+          return computeAxisGridLinePositions(isVertical, tick.position, chartDimensions);
         },
       );
       axisGridLinesPositions.set(id, gridLines);
@@ -643,14 +659,6 @@ export function computeAxisGridLinePositions(
   return positions;
 }
 
-export function isVertical(position: Position) {
-  return position === Position.Left || position === Position.Right;
-}
-
-export function isHorizontal(position: Position) {
-  return position === Position.Top || position === Position.Bottom;
-}
-
 export function isLowerBound(domain: Partial<CompleteBoundedDomain>): domain is LowerBoundedDomain {
   return domain.min != null;
 }

diff --git a/src/components/chart.tsx b/src/components/chart.tsx
@@ -11,7 +11,7 @@ import { Highlighter } from './highlighter';
 import { Legend } from './legend/legend';
 import { ChartContainer } from './react_canvas/chart_container';
 import { Tooltips } from './tooltips';
-import { isHorizontal } from '../chart_types/xy_chart/utils/axis_utils';
+import { isHorizontalAxis } from '../chart_types/xy_chart/utils/axis_utils';
 import { Position } from '../chart_types/xy_chart/utils/specs';
 import { CursorEvent } from '../specs/settings';
 import { ChartSize, getChartSize } from '../utils/chart_size';
@@ -80,9 +80,9 @@ export class Chart extends React.Component<ChartProps, ChartState> {
   render() {
     const { renderer, size, className } = this.props;
     const containerStyle = Chart.getContainerStyle(size);
-    const Horizontal = isHorizontal(this.state.legendPosition);
+    const horizontal = isHorizontalAxis(this.state.legendPosition);
     const chartClassNames = classNames('echChart', className, {
-      'echChart--column': Horizontal,
+      'echChart--column': horizontal,
     });
 
     return (

diff --git a/src/components/legend/legend.tsx b/src/components/legend/legend.tsx
@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import { inject, observer } from 'mobx-react';
 import React, { createRef } from 'react';
-import { isVertical, isHorizontal } from '../../chart_types/xy_chart/utils/axis_utils';
+import { isVerticalAxis, isHorizontalAxis } from '../../chart_types/xy_chart/utils/axis_utils';
 import { LegendItem as SeriesLegendItem } from '../../chart_types/xy_chart/legend/legend';
 import { ChartStore } from '../../chart_types/xy_chart/store/chart_state';
 import { Position } from '../../chart_types/xy_chart/utils/specs';
@@ -43,7 +43,7 @@ class LegendComponent extends React.Component<LegendProps, LegendState> {
     const { chartInitialized, chartTheme, legendPosition } = this.props.chartStore!;
     if (
       this.echLegend.current &&
-      isVertical(legendPosition.get()) &&
+      isVerticalAxis(legendPosition.get()) &&
       this.state.width === undefined &&
       !chartInitialized.get()
     ) {
@@ -92,7 +92,7 @@ class LegendComponent extends React.Component<LegendProps, LegendState> {
   getLegendListStyle = (position: Position, { chartMargins, legend }: Theme): LegendListStyle => {
     const { top: paddingTop, bottom: paddingBottom, left: paddingLeft, right: paddingRight } = chartMargins;
 
-    if (isHorizontal(position)) {
+    if (isHorizontalAxis(position)) {
       return {
         paddingLeft,
         paddingRight,
@@ -107,7 +107,7 @@ class LegendComponent extends React.Component<LegendProps, LegendState> {
   };
 
   getLegendStyle = (position: Position, { legend }: Theme): LegendStyle => {
-    if (isVertical(position)) {
+    if (isVerticalAxis(position)) {
       if (this.state.width !== undefined) {
         const threshold = Math.min(this.state.width!, legend.verticalWidth);
         const width = `${threshold}px`;