Skip to content
This repository was archived by the owner on Sep 17, 2021. It is now read-only.

Commit 3267c55

Browse files
Minishlinkmarzolfb
Minishlink
authored and
marzolfb
committed
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
1 parent bff54fe commit 3267c55

12 files changed

+169
-117
lines changed

‎src/Axis.js‎

Lines changed: 1 addition & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ import { fontAdapt } from './util'
2222
import _ from 'lodash'
2323
const Pathjs = require('paths-js/path')
2424

25-
class AxisStruct {
25+
export class AxisStruct {
2626

2727
constructor(scale, options, chartArea, horizontal) {
2828
this.scale = scale
@@ -129,10 +129,6 @@ export default class Axis extends Component {
129129
options.color = '#3E90F0'
130130
}
131131

132-
if (typeof options.gridColor !== 'string') {
133-
options.gridColor = '#3E90F0'
134-
}
135-
136132
if (typeof options.opacity !== 'number') {
137133
options.opacity = 0.5
138134
}
@@ -179,13 +175,6 @@ export default class Axis extends Component {
179175
return returnValue
180176
})
181177

182-
183-
const gridLines = options.showLines ? _.map(axis.lines, function (c, i) {
184-
return (
185-
<Path key={'gridLines' + i} d={c.print()} strokeOpacity={options.opacity} stroke={options.gridColor} fill="none"/>
186-
)
187-
}) : []
188-
189178
let offset = {
190179
x: chartArea.margin.left * -1,
191180
y: chartArea.margin.top * -1
@@ -198,9 +187,6 @@ export default class Axis extends Component {
198187
{options.showAxis ? <Path d={axis.path.print()} strokeOpacity={options.opacity} stroke={options.color} strokeWidth={options.strokeWidth} fill="none"/> : null}
199188
</G>
200189
{ticks}
201-
<G x={offset.x} y={offset.y}>
202-
{gridLines}
203-
</G>
204190
</G>
205191

206192
return returnV

‎src/Bar.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import Svg,{ G, Path, Text } from 'react-native-svg'
2222
import { Colors, Options, fontAdapt, cyclic, color, identity } from './util'
2323
import _ from 'lodash'
2424
import Axis from './Axis'
25+
import GridAxis from './GridAxis'
2526
const Bar = require('paths-js/bar')
2627
import 'babel-polyfill'
2728

@@ -147,8 +148,9 @@ export default class BarChart extends Component {
147148

148149
return (<Svg width={options.width} height={options.height}>
149150
<G x={options.margin.left} y={options.margin.top}>
150-
<Axis scale={chart.scale} options={options.axisY} chartArea={chartArea} />
151+
<GridAxis scale={chart.scale} options={options.axisY} chartArea={chartArea} />
151152
{lines}
153+
<Axis scale={chart.scale} options={options.axisY} chartArea={chartArea} />
152154
</G>
153155
</Svg>)
154156
}

‎src/GridAxis.js‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
/*
2+
Copyright 2016 Capital One Services, LLC
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and limitations under the License.
14+
15+
SPDX-Copyright: Copyright (c) Capital One Services, LLC
16+
SPDX-License-Identifier: Apache-2.0
17+
*/
18+
19+
import React, { Component } from 'react'
20+
import { G, Path } from 'react-native-svg'
21+
import _ from 'lodash'
22+
import { AxisStruct } from './Axis'
23+
24+
export default class GridAxis extends Component {
25+
26+
render() {
27+
const { chartArea, options, scale } = this.props
28+
const horizontal = options.orient ==='top' || options.orient ==='bottom'
29+
30+
const axis = new AxisStruct(scale,options,chartArea,horizontal).axis()
31+
32+
if (typeof options.gridColor !== 'string') {
33+
options.gridColor = '#3E90F0'
34+
}
35+
36+
if (typeof options.opacity !== 'number') {
37+
options.opacity = 0.5
38+
}
39+
40+
const gridLines = options.showLines ? _.map(axis.lines, function (c, i) {
41+
return (
42+
<Path key={'gridLines' + i} d={c.print()} strokeOpacity={options.opacity} stroke={options.gridColor} fill="none"/>
43+
)
44+
}) : []
45+
46+
let offset = {
47+
x: chartArea.margin.left * -1,
48+
y: chartArea.margin.top * -1
49+
};
50+
51+
let returnV = <G x={offset.x} y={offset.y}>
52+
{gridLines}
53+
</G>;
54+
55+
return returnV
56+
57+
}
58+
}

‎src/Line.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import { Text as ReactText } from 'react-native';
2121
import Svg, { G, Path, Rect, Text, Circle } from 'react-native-svg';
2222
import { Colors, Options, cyclic, fontAdapt } from './util';
2323
import Axis from './Axis';
24+
import GridAxis from './GridAxis';
2425
import _ from 'lodash';
2526

2627
export default class LineChart extends Component {
@@ -255,12 +256,14 @@ export default class LineChart extends Component {
255256
let returnValue = (
256257
<Svg width={options.width} height={options.height}>
257258
<G x={options.margin.left} y={options.margin.top}>
259+
<GridAxis key="grid-x" scale={chart.xscale} options={options.axisX} chartArea={chartArea} />
260+
<GridAxis key="grid-y" scale={chart.yscale} options={options.axisY} chartArea={chartArea} />
258261
{regions}
259262
{areas}
260263
{lines}
261264
{points}
262-
<Axis key="x" scale={chart.xscale} options={options.axisX} chartArea={chartArea} />
263-
<Axis key="y" scale={chart.yscale} options={options.axisY} chartArea={chartArea} />
265+
<Axis key="axis-x" scale={chart.xscale} options={options.axisX} chartArea={chartArea} />
266+
<Axis key="axis-y" scale={chart.yscale} options={options.axisY} chartArea={chartArea} />
264267
</G>
265268
</Svg>
266269
);

‎src/Scatterplot.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import {Text as ReactText} from 'react-native'
2121
import Svg,{ Circle, G } from 'react-native-svg'
2222
import { Options, styleSvg } from './util'
2323
import Axis from './Axis'
24+
import GridAxis from './GridAxis'
2425
import _ from 'lodash'
2526
import 'babel-polyfill'
2627

@@ -139,6 +140,8 @@ export default class Scatterplot extends Component {
139140

140141
return (<Svg width={options.width} height={options.height}>
141142
<G x={options.margin.left} y={options.margin.top}>
143+
<GridAxis scale={chart.xscale} options={options.axisX} chartArea={chartArea} />
144+
<GridAxis scale={chart.yscale} options={options.axisY} chartArea={chartArea} />
142145
{ points }
143146
<Axis scale={chart.xscale} options={options.axisX} chartArea={chartArea} />
144147
<Axis scale={chart.yscale} options={options.axisY} chartArea={chartArea} />

‎src/__tests__/SmoothLine/__snapshots__/SmoothLineBasic-test.js.snap‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,14 @@ exports[`test renders an example chart correctly 1`] = `
77
mockedComponent="svg-G"
88
x={45}
99
y={20}>
10+
<view
11+
mockedComponent="svg-G"
12+
x={-45}
13+
y={-20} />
14+
<view
15+
mockedComponent="svg-G"
16+
x={-45}
17+
y={-20} />
1018
<view
1119
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 "
1220
fill="#3199de"
@@ -49,10 +57,6 @@ exports[`test renders an example chart correctly 1`] = `
4957
strokeOpacity={0.5}
5058
strokeWidth={3} />
5159
</view>
52-
<view
53-
mockedComponent="svg-G"
54-
x={-45}
55-
y={-20} />
5660
</view>
5761
<view
5862
mockedComponent="svg-G">
@@ -68,10 +72,6 @@ exports[`test renders an example chart correctly 1`] = `
6872
strokeOpacity={0.5}
6973
strokeWidth={3} />
7074
</view>
71-
<view
72-
mockedComponent="svg-G"
73-
x={-45}
74-
y={-20} />
7575
</view>
7676
</view>
7777
</view>

‎src/__tests__/SmoothLine/__snapshots__/SmoothLineRegions-test.js.snap‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,14 @@ exports[`test renders an example chart correctly 1`] = `
77
mockedComponent="svg-G"
88
x={45}
99
y={20}>
10+
<view
11+
mockedComponent="svg-G"
12+
x={-45}
13+
y={-20} />
14+
<view
15+
mockedComponent="svg-G"
16+
x={-45}
17+
y={-20} />
1018
<view
1119
mockedComponent="svg-G">
1220
<view
@@ -187,10 +195,6 @@ exports[`test renders an example chart correctly 1`] = `
187195
strokeOpacity={0.5}
188196
strokeWidth={3} />
189197
</view>
190-
<view
191-
mockedComponent="svg-G"
192-
x={-45}
193-
y={-20} />
194198
</view>
195199
<view
196200
mockedComponent="svg-G">
@@ -206,10 +210,6 @@ exports[`test renders an example chart correctly 1`] = `
206210
strokeOpacity={0.5}
207211
strokeWidth={3} />
208212
</view>
209-
<view
210-
mockedComponent="svg-G"
211-
x={-45}
212-
y={-20} />
213213
</view>
214214
</view>
215215
</view>

‎src/__tests__/SmoothLine/__snapshots__/SmoothLineRegionsExtended-test.js.snap‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,14 @@ exports[`test renders an example chart correctly 1`] = `
77
mockedComponent="svg-G"
88
x={45}
99
y={20}>
10+
<view
11+
mockedComponent="svg-G"
12+
x={-45}
13+
y={-20} />
14+
<view
15+
mockedComponent="svg-G"
16+
x={-45}
17+
y={-20} />
1018
<view
1119
mockedComponent="svg-G">
1220
<view
@@ -187,10 +195,6 @@ exports[`test renders an example chart correctly 1`] = `
187195
strokeOpacity={0.5}
188196
strokeWidth={3} />
189197
</view>
190-
<view
191-
mockedComponent="svg-G"
192-
x={-45}
193-
y={-20} />
194198
</view>
195199
<view
196200
mockedComponent="svg-G">
@@ -206,10 +210,6 @@ exports[`test renders an example chart correctly 1`] = `
206210
strokeOpacity={0.5}
207211
strokeWidth={3} />
208212
</view>
209-
<view
210-
mockedComponent="svg-G"
211-
x={-45}
212-
y={-20} />
213213
</view>
214214
</view>
215215
</view>

‎src/__tests__/scatterplot/__snapshots__/ScatterplotBasic-test.js.snap‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,14 @@ exports[`test renders an example chart correctly 1`] = `
77
mockedComponent="svg-G"
88
x={40}
99
y={20}>
10+
<view
11+
mockedComponent="svg-G"
12+
x={-40}
13+
y={-20} />
14+
<view
15+
mockedComponent="svg-G"
16+
x={-40}
17+
y={-20} />
1018
<view
1119
mockedComponent="svg-G"
1220
x={NaN}
@@ -637,10 +645,6 @@ exports[`test renders an example chart correctly 1`] = `
637645
strokeOpacity={0.5}
638646
strokeWidth={3} />
639647
</view>
640-
<view
641-
mockedComponent="svg-G"
642-
x={-40}
643-
y={-20} />
644648
</view>
645649
<view
646650
mockedComponent="svg-G">
@@ -656,10 +660,6 @@ exports[`test renders an example chart correctly 1`] = `
656660
strokeOpacity={0.5}
657661
strokeWidth={3} />
658662
</view>
659-
<view
660-
mockedComponent="svg-G"
661-
x={-40}
662-
y={-20} />
663663
</view>
664664
</view>
665665
</view>

‎src/__tests__/stockline/__snapshots__/StockLineBasic-test.js.snap‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,14 @@ exports[`test renders an example chart correctly 1`] = `
77
mockedComponent="svg-G"
88
x={35}
99
y={10}>
10+
<view
11+
mockedComponent="svg-G"
12+
x={-35}
13+
y={-10} />
14+
<view
15+
mockedComponent="svg-G"
16+
x={-35}
17+
y={-10} />
1018
<view
1119
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 "
1220
fill="#3199de"
@@ -63,10 +71,6 @@ exports[`test renders an example chart correctly 1`] = `
6371
strokeOpacity={0.5}
6472
strokeWidth={3} />
6573
</view>
66-
<view
67-
mockedComponent="svg-G"
68-
x={-35}
69-
y={-10} />
7074
</view>
7175
<view
7276
mockedComponent="svg-G">
@@ -82,10 +86,6 @@ exports[`test renders an example chart correctly 1`] = `
8286
strokeOpacity={0.5}
8387
strokeWidth={3} />
8488
</view>
85-
<view
86-
mockedComponent="svg-G"
87-
x={-35}
88-
y={-10} />
8989
</view>
9090
</view>
9191
</view>

0 commit comments

Comments
 (0)