From 2d221c406070b8536408fa1ac226a80c6f8eb6e9 Mon Sep 17 00:00:00 2001
From: Julia Friesel <julia.friesel@gmail.com>
Date: Mon, 13 Aug 2018 15:20:42 +0200
Subject: [PATCH] Produce horizontal grid once, not for every column
---
components/chart/chart.js | 7 ++++---
components/chart/day-column.js | 3 +--
components/chart/styles.js | 14 +++++++++-----
components/chart/y-axis.js | 2 --
4 files changed, 14 insertions(+), 12 deletions(-)
diff --git a/components/chart/chart.js b/components/chart/chart.js
index c08e0dcf..2bb8097b 100644
--- a/components/chart/chart.js
+++ b/components/chart/chart.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react'
import { View, FlatList } from 'react-native'
import range from 'date-range'
import { LocalDate } from 'js-joda'
-import { yAxis, normalizeToScale } from './y-axis'
+import { yAxis, normalizeToScale, horizontalGrid } from './y-axis'
import DayColumn from './day-column'
import { getCycleDay, cycleDaysSortedByDate, getAmountOfCycleDays } from '../../db'
import styles from './styles'
@@ -43,7 +43,8 @@ export default class CycleChart extends Component {
return (
<View style={{ flexDirection: 'row' }}>
{yAxisView}
- <FlatList
+ {horizontalGrid}
+ {<FlatList
horizontal={true}
inverted={true}
showsHorizontalScrollIndicator={false}
@@ -53,7 +54,7 @@ export default class CycleChart extends Component {
initialNumToRender={15}
maxToRenderPerBatch={5}
>
- </FlatList>
+ </FlatList>}
</View>
)
}
diff --git a/components/chart/day-column.js b/components/chart/day-column.js
index f356e7c9..8f187361 100644
--- a/components/chart/day-column.js
+++ b/components/chart/day-column.js
@@ -8,7 +8,6 @@ import config from './config'
import { getOrCreateCycleDay } from '../../db'
import cycleModule from '../../lib/cycle'
import setUpFertilityStatusFunc from './nfp-lines'
-import { horizontalGrid } from './y-axis'
const getCycleDayNumber = cycleModule().getCycleDayNumber
const label = styles.column.label
@@ -69,7 +68,7 @@ export default class DayColumn extends Component {
columnElements.push(mucusIcon)
}
- columnElements.push(cycleDayLabel, dateLabel, horizontalGrid)
+ columnElements.push(cycleDayLabel, dateLabel)
if(nfpLineInfo.drawFhmLine) {
const fhmLine = (<View
diff --git a/components/chart/styles.js b/components/chart/styles.js
index 6f474e0e..7a25adfb 100644
--- a/components/chart/styles.js
+++ b/components/chart/styles.js
@@ -42,8 +42,7 @@ const styles = {
height: config.chartHeight,
borderStyle: 'solid',
borderColor: 'grey',
- borderWidth: 1,
- backgroundColor: 'transparent'
+ borderWidth: 0.5
}
},
bleedingIcon: {
@@ -67,6 +66,9 @@ const styles = {
yAxis: {
height: config.chartHeight,
width: config.columnWidth,
+ borderRightWidth: 0.5,
+ borderColor: 'lightgrey',
+ borderStyle: 'solid'
},
yAxisLabel: {
position: 'absolute',
@@ -76,10 +78,12 @@ const styles = {
fontWeight: 'bold'
},
horizontalGrid: {
+ position:'absolute',
borderColor: 'lightgrey',
- borderWidth: 1,
- width: config.columnWidth,
- borderStyle: 'solid'
+ borderWidth: 0.5,
+ width: '100%',
+ borderStyle: 'solid',
+ left: config.columnWidth
},
nfpLine: {
borderColor: '#00b159',
diff --git a/components/chart/y-axis.js b/components/chart/y-axis.js
index e90dcac9..052aa5f5 100644
--- a/components/chart/y-axis.js
+++ b/components/chart/y-axis.js
@@ -37,8 +37,6 @@ export const yAxis = makeYAxis()
export const horizontalGrid = yAxis.tickPositions.map(tick => {
return (
<View
- position='absolute'
- width='100%'
top={tick}
{...styles.horizontalGrid}
key={tick}
--
GitLab