From 09129adba3b26ca1be956e59a70baa2dfc0cec68 Mon Sep 17 00:00:00 2001
From: mashazyu <mariya.z@gmail.com>
Date: Sun, 17 Nov 2019 19:57:47 +0100
Subject: [PATCH] Introduces HorizontalGrid component
---
components/chart/chart.js | 12 +++++++++---
components/chart/horizontal-grid.js | 26 ++++++++++++++++++++++++++
components/chart/y-axis.js | 14 --------------
3 files changed, 35 insertions(+), 17 deletions(-)
create mode 100644 components/chart/horizontal-grid.js
diff --git a/components/chart/chart.js b/components/chart/chart.js
index 4c976378..8f8a3f5d 100644
--- a/components/chart/chart.js
+++ b/components/chart/chart.js
@@ -1,9 +1,12 @@
import React, { Component } from 'react'
import { View, FlatList, ActivityIndicator } from 'react-native'
import { LocalDate } from 'js-joda'
-import YAxis, { makeHorizontalGrid } from './y-axis'
+
+import YAxis from './y-axis'
import nfpLines from './nfp-lines'
import DayColumn from './day-column'
+import HorizontalGrid from './horizontal-grid'
+
import { getCycleDaysSortedByDate, getAmountOfCycleDays } from '../../db'
import styles from './styles'
import { scaleObservable } from '../../local-storage'
@@ -131,8 +134,11 @@ export default class CycleChart extends Component {
/>
)}
- {chartHeight && chartLoaded &&
- makeHorizontalGrid(this.columnHeight, this.symptomRowHeight)
+ {chartHeight && chartLoaded && (
+ <HorizontalGrid
+ height={this.columnHeight}
+ startPosition={this.symptomRowHeight}
+ />)
}
{chartHeight &&
diff --git a/components/chart/horizontal-grid.js b/components/chart/horizontal-grid.js
new file mode 100644
index 00000000..e7cf7cc1
--- /dev/null
+++ b/components/chart/horizontal-grid.js
@@ -0,0 +1,26 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { View } from 'react-native'
+
+import { getTickPositions } from '../helpers/chart'
+
+import styles from './styles'
+
+const HorizontalGrid = ({ height, startPosition }) => {
+ return getTickPositions(height).map(tick => {
+ return (
+ <View
+ top={startPosition + tick}
+ {...styles.horizontalGrid}
+ key={tick}
+ />
+ )
+ })
+}
+
+HorizontalGrid.propTypes = {
+ height: PropTypes.number,
+ startPosition: PropTypes.number,
+}
+
+export default HorizontalGrid
diff --git a/components/chart/y-axis.js b/components/chart/y-axis.js
index 09a5210e..50abf63a 100644
--- a/components/chart/y-axis.js
+++ b/components/chart/y-axis.js
@@ -2,26 +2,12 @@ import React from 'react'
import PropTypes from 'prop-types'
import { View } from 'react-native'
-import { getTickPositions } from '../helpers/chart'
-
import SymptomIcon from './symptom-icon'
import TickList from './tick-list'
import ChartLegend from './chart-legend'
import styles from './styles'
-export function makeHorizontalGrid(columnHeight, symptomRowHeight) {
- return getTickPositions(columnHeight).map(tick => {
- return (
- <View
- top={tick + symptomRowHeight}
- {...styles.horizontalGrid}
- key={tick}
- />
- )
- })
-}
-
const YAxis = ({ height, symptomsToDisplay, symptomsSectionHeight }) => {
const symptomIconHeight = symptomsSectionHeight / symptomsToDisplay.length
return (
--
GitLab