Fix grid axis appearing on top of the lines (#197)

* Fix grid appearing on top of lines * Update snapshots * Add GridAxis to Bar and Scatterplot
capitalone · Oct 1, 2017 · 3267c55 · 3267c55
1 parent bff54fe
commit 3267c55
Show file tree

Hide file tree

Showing 12 changed files with 169 additions and 117 deletions.
diff --git a/src/Axis.js b/src/Axis.js
@@ -22,7 +22,7 @@ import { fontAdapt } from './util'
 import _ from 'lodash'
 const Pathjs = require('paths-js/path')
 
-class AxisStruct {
+export class AxisStruct {
 
   constructor(scale, options, chartArea, horizontal) {
     this.scale = scale
@@ -129,10 +129,6 @@ export default class Axis extends Component {
       options.color = '#3E90F0'
     }
 
-    if (typeof options.gridColor !== 'string') {
-      options.gridColor = '#3E90F0'
-    }
-
     if (typeof options.opacity !== 'number') {
       options.opacity = 0.5
     }
@@ -179,13 +175,6 @@ export default class Axis extends Component {
       return returnValue
     })
 
-
-    const gridLines = options.showLines ? _.map(axis.lines, function (c, i) {
-      return (
-               <Path key={'gridLines' + i} d={c.print()} strokeOpacity={options.opacity} stroke={options.gridColor} fill="none"/>
-            )
-    }) : []
-
     let offset = {
       x: chartArea.margin.left * -1,
       y: chartArea.margin.top * -1
@@ -198,9 +187,6 @@ export default class Axis extends Component {
                 {options.showAxis ? <Path d={axis.path.print()} strokeOpacity={options.opacity} stroke={options.color} strokeWidth={options.strokeWidth} fill="none"/> : null}
               </G>
               {ticks}
-              <G x={offset.x} y={offset.y}>
-                {gridLines}
-              </G>
             </G>
 
     return returnV

diff --git a/src/Bar.js b/src/Bar.js
@@ -22,6 +22,7 @@ import Svg,{ G, Path, Text } from 'react-native-svg'
 import { Colors, Options, fontAdapt, cyclic, color, identity } from './util'
 import _ from 'lodash'
 import Axis from './Axis'
+import GridAxis from './GridAxis'
 const Bar = require('paths-js/bar')
 import 'babel-polyfill'
 
@@ -147,8 +148,9 @@ export default class BarChart extends Component {
 
     return (<Svg width={options.width} height={options.height}>
               <G x={options.margin.left} y={options.margin.top}>
-                <Axis scale={chart.scale} options={options.axisY} chartArea={chartArea} />
+                <GridAxis scale={chart.scale} options={options.axisY} chartArea={chartArea} />
                 {lines}
+                <Axis scale={chart.scale} options={options.axisY} chartArea={chartArea} />
               </G>
             </Svg>)
   }

diff --git a/src/GridAxis.js b/src/GridAxis.js
@@ -0,0 +1,58 @@
+/*
+Copyright 2016 Capital One Services, LLC
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and limitations under the License.
+
+SPDX-Copyright: Copyright (c) Capital One Services, LLC
+SPDX-License-Identifier: Apache-2.0
+*/
+
+import React, { Component } from 'react'
+import { G, Path } from 'react-native-svg'
+import _ from 'lodash'
+import { AxisStruct } from './Axis'
+
+export default class GridAxis extends Component {
+
+  render() {
+    const { chartArea, options, scale } = this.props
+    const horizontal = options.orient ==='top' || options.orient ==='bottom'
+
+    const axis = new AxisStruct(scale,options,chartArea,horizontal).axis()
+
+    if (typeof options.gridColor !== 'string') {
+      options.gridColor = '#3E90F0'
+    }
+
+    if (typeof options.opacity !== 'number') {
+      options.opacity = 0.5
+    }
+
+    const gridLines = options.showLines ? _.map(axis.lines, function (c, i) {
+      return (
+               <Path key={'gridLines' + i} d={c.print()} strokeOpacity={options.opacity} stroke={options.gridColor} fill="none"/>
+            )
+    }) : []
+
+    let offset = {
+      x: chartArea.margin.left * -1,
+      y: chartArea.margin.top * -1
+    };
+
+    let returnV = <G x={offset.x} y={offset.y}>
+      {gridLines}
+    </G>;
+
+    return returnV
+
+  }
+}
diff --git a/src/Line.js b/src/Line.js
@@ -21,6 +21,7 @@ import { Text as ReactText } from 'react-native';
 import Svg, { G, Path, Rect, Text, Circle } from 'react-native-svg';
 import { Colors, Options, cyclic, fontAdapt } from './util';
 import Axis from './Axis';
+import GridAxis from './GridAxis';
 import _ from 'lodash';
 
 export default class LineChart extends Component {
@@ -255,12 +256,14 @@ export default class LineChart extends Component {
     let returnValue = (
       <Svg width={options.width} height={options.height}>
         <G x={options.margin.left} y={options.margin.top}>
+          <GridAxis key="grid-x" scale={chart.xscale} options={options.axisX} chartArea={chartArea} />
+          <GridAxis key="grid-y" scale={chart.yscale} options={options.axisY} chartArea={chartArea} />
           {regions}
           {areas}
           {lines}
           {points}
-          <Axis key="x" scale={chart.xscale} options={options.axisX} chartArea={chartArea} />
-          <Axis key="y" scale={chart.yscale} options={options.axisY} chartArea={chartArea} />
+          <Axis key="axis-x" scale={chart.xscale} options={options.axisX} chartArea={chartArea} />
+          <Axis key="axis-y" scale={chart.yscale} options={options.axisY} chartArea={chartArea} />
         </G>
       </Svg>
     );

diff --git a/src/Scatterplot.js b/src/Scatterplot.js
@@ -21,6 +21,7 @@ import {Text as ReactText}  from 'react-native'
 import Svg,{ Circle, G } from 'react-native-svg'
 import { Options, styleSvg } from './util'
 import Axis from './Axis'
+import GridAxis from './GridAxis'
 import _ from 'lodash'
 import 'babel-polyfill'
 
@@ -139,6 +140,8 @@ export default class Scatterplot extends Component {
 
     return (<Svg width={options.width} height={options.height}>
             <G x={options.margin.left} y={options.margin.top}>
+                <GridAxis scale={chart.xscale} options={options.axisX} chartArea={chartArea} />
+                <GridAxis scale={chart.yscale} options={options.axisY} chartArea={chartArea} />
                 { points }
                 <Axis scale={chart.xscale} options={options.axisX} chartArea={chartArea} />
                 <Axis scale={chart.yscale} options={options.axisY} chartArea={chartArea} />

diff --git a/src/__tests__/SmoothLine/__snapshots__/SmoothLineBasic-test.js.snap b/src/__tests__/SmoothLine/__snapshots__/SmoothLineBasic-test.js.snap
@@ -7,6 +7,14 @@ exports[`test renders an example chart correctly 1`] = `
     mockedComponent="svg-G"
     x={45}
     y={20}>
+    <view
+      mockedComponent="svg-G"
+      x={-45}
+      y={-20} />
+    <view
+      mockedComponent="svg-G"
+      x={-45}
+      y={-20} />
     <view
       d="M NaN NaN C NaN NaN NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN L NaN NaN L NaN NaN Z "
       fill="#3199de"
@@ -49,10 +57,6 @@ exports[`test renders an example chart correctly 1`] = `
           strokeOpacity={0.5}
           strokeWidth={3} />
       </view>
-      <view
-        mockedComponent="svg-G"
-        x={-45}
-        y={-20} />
     </view>
     <view
       mockedComponent="svg-G">
@@ -68,10 +72,6 @@ exports[`test renders an example chart correctly 1`] = `
           strokeOpacity={0.5}
           strokeWidth={3} />
       </view>
-      <view
-        mockedComponent="svg-G"
-        x={-45}
-        y={-20} />
     </view>
   </view>
 </view>

diff --git a/src/__tests__/SmoothLine/__snapshots__/SmoothLineRegions-test.js.snap b/src/__tests__/SmoothLine/__snapshots__/SmoothLineRegions-test.js.snap
@@ -7,6 +7,14 @@ exports[`test renders an example chart correctly 1`] = `
     mockedComponent="svg-G"
     x={45}
     y={20}>
+    <view
+      mockedComponent="svg-G"
+      x={-45}
+      y={-20} />
+    <view
+      mockedComponent="svg-G"
+      x={-45}
+      y={-20} />
     <view
       mockedComponent="svg-G">
       <view
@@ -187,10 +195,6 @@ exports[`test renders an example chart correctly 1`] = `
           strokeOpacity={0.5}
           strokeWidth={3} />
       </view>
-      <view
-        mockedComponent="svg-G"
-        x={-45}
-        y={-20} />
     </view>
     <view
       mockedComponent="svg-G">
@@ -206,10 +210,6 @@ exports[`test renders an example chart correctly 1`] = `
           strokeOpacity={0.5}
           strokeWidth={3} />
       </view>
-      <view
-        mockedComponent="svg-G"
-        x={-45}
-        y={-20} />
     </view>
   </view>
 </view>

diff --git a/src/__tests__/SmoothLine/__snapshots__/SmoothLineRegionsExtended-test.js.snap b/src/__tests__/SmoothLine/__snapshots__/SmoothLineRegionsExtended-test.js.snap
@@ -7,6 +7,14 @@ exports[`test renders an example chart correctly 1`] = `
     mockedComponent="svg-G"
     x={45}
     y={20}>
+    <view
+      mockedComponent="svg-G"
+      x={-45}
+      y={-20} />
+    <view
+      mockedComponent="svg-G"
+      x={-45}
+      y={-20} />
     <view
       mockedComponent="svg-G">
       <view
@@ -187,10 +195,6 @@ exports[`test renders an example chart correctly 1`] = `
           strokeOpacity={0.5}
           strokeWidth={3} />
       </view>
-      <view
-        mockedComponent="svg-G"
-        x={-45}
-        y={-20} />
     </view>
     <view
       mockedComponent="svg-G">
@@ -206,10 +210,6 @@ exports[`test renders an example chart correctly 1`] = `
           strokeOpacity={0.5}
           strokeWidth={3} />
       </view>
-      <view
-        mockedComponent="svg-G"
-        x={-45}
-        y={-20} />
     </view>
   </view>
 </view>

diff --git a/src/__tests__/scatterplot/__snapshots__/ScatterplotBasic-test.js.snap b/src/__tests__/scatterplot/__snapshots__/ScatterplotBasic-test.js.snap
@@ -7,6 +7,14 @@ exports[`test renders an example chart correctly 1`] = `
     mockedComponent="svg-G"
     x={40}
     y={20}>
+    <view
+      mockedComponent="svg-G"
+      x={-40}
+      y={-20} />
+    <view
+      mockedComponent="svg-G"
+      x={-40}
+      y={-20} />
     <view
       mockedComponent="svg-G"
       x={NaN}
@@ -637,10 +645,6 @@ exports[`test renders an example chart correctly 1`] = `
           strokeOpacity={0.5}
           strokeWidth={3} />
       </view>
-      <view
-        mockedComponent="svg-G"
-        x={-40}
-        y={-20} />
     </view>
     <view
       mockedComponent="svg-G">
@@ -656,10 +660,6 @@ exports[`test renders an example chart correctly 1`] = `
           strokeOpacity={0.5}
           strokeWidth={3} />
       </view>
-      <view
-        mockedComponent="svg-G"
-        x={-40}
-        y={-20} />
     </view>
   </view>
 </view>

diff --git a/src/__tests__/stockline/__snapshots__/StockLineBasic-test.js.snap b/src/__tests__/stockline/__snapshots__/StockLineBasic-test.js.snap
@@ -7,6 +7,14 @@ exports[`test renders an example chart correctly 1`] = `
     mockedComponent="svg-G"
     x={35}
     y={10}>
+    <view
+      mockedComponent="svg-G"
+      x={-35}
+      y={-10} />
+    <view
+      mockedComponent="svg-G"
+      x={-35}
+      y={-10} />
     <view
       d="M NaN NaN L NaN NaN L NaN NaN L NaN NaN L NaN NaN L NaN NaN L NaN NaN L NaN NaN L NaN NaN L NaN NaN L NaN NaN L NaN NaN L NaN NaN L NaN NaN L NaN NaN L NaN NaN L NaN NaN L NaN NaN L NaN NaN L NaN NaN L NaN NaN Z "
       fill="#3199de"
@@ -63,10 +71,6 @@ exports[`test renders an example chart correctly 1`] = `
           strokeOpacity={0.5}
           strokeWidth={3} />
       </view>
-      <view
-        mockedComponent="svg-G"
-        x={-35}
-        y={-10} />
     </view>
     <view
       mockedComponent="svg-G">
@@ -82,10 +86,6 @@ exports[`test renders an example chart correctly 1`] = `
           strokeOpacity={0.5}
           strokeWidth={3} />
       </view>
-      <view
-        mockedComponent="svg-G"
-        x={-35}
-        y={-10} />
     </view>
   </view>
 </view>

diff --git a/src/__tests__/stockline/__snapshots__/StockLineDynamicTickLabels-test.js.snap b/src/__tests__/stockline/__snapshots__/StockLineDynamicTickLabels-test.js.snap
@@ -7,6 +7,14 @@ exports[`test renders an example chart correctly 1`] = `
     mockedComponent="svg-G"
     x={35}
     y={10}>
+    <view
+      mockedComponent="svg-G"
+      x={-35}
+      y={-10} />
+    <view
+      mockedComponent="svg-G"
+      x={-35}
+      y={-10} />
     <view
       d="M NaN NaN L NaN NaN L NaN NaN L NaN NaN L NaN NaN L NaN NaN Z "
       fill="#3199de"
@@ -35,10 +43,6 @@ exports[`test renders an example chart correctly 1`] = `
           strokeOpacity={0.5}
           strokeWidth={3} />
       </view>
-      <view
-        mockedComponent="svg-G"
-        x={-35}
-        y={-10} />
     </view>
     <view
       mockedComponent="svg-G">
@@ -54,10 +58,6 @@ exports[`test renders an example chart correctly 1`] = `
           strokeOpacity={0.5}
           strokeWidth={3} />
       </view>
-      <view
-        mockedComponent="svg-G"
-        x={-35}
-        y={-10} />
     </view>
   </view>
 </view>