Skip to content
Snippets Groups Projects
Commit cf63fbb3 authored by Maria Zadnepryanets's avatar Maria Zadnepryanets
Browse files

Resolve "Chart"

parent 59ee05eb
No related branches found
No related tags found
No related merge requests found
......@@ -9,7 +9,7 @@ import { CHART_STROKE_WIDTH, CHART_GRID_LINE_HORIZONTAL_WIDTH } from '../../conf
const ChartLine = ({ path, isNfpLine }) => {
const color = isNfpLine ? Colors.orange : Colors.grey
const width = isNfpLine
? CHART_STROKE_WIDTH : CHART_GRID_LINE_HORIZONTAL_WIDTH
? CHART_STROKE_WIDTH : CHART_GRID_LINE_HORIZONTAL_WIDTH * 2.5
return (
<Shape d={path} stroke={color} strokeWidth={width} />
......
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { ActivityIndicator, FlatList, StyleSheet, View } from 'react-native'
import { ActivityIndicator, FlatList, Dimensions, StyleSheet, View } from 'react-native'
import AppLoadingView from '../common/app-loading'
import AppPage from '../common/app-page'
......@@ -63,10 +63,10 @@ class CycleChart extends Component {
this.setState({ shouldShowHint: false })
}
onLayout = ({ nativeEvent }) => {
onLayout = () => {
if (this.state.chartHeight) return false
this.reCalculateChartInfo(nativeEvent)
this.reCalculateChartInfo()
this.updateListeners(this.reCalculateChartInfo)
}
......@@ -100,17 +100,17 @@ class CycleChart extends Component {
)
}
reCalculateChartInfo = (nativeEvent) => {
const { height, width } = nativeEvent.layout
reCalculateChartInfo = () => {
const { width, height } = Dimensions.get('window')
this.xAxisHeight = height * CHART_XAXIS_HEIGHT_RATIO
const remainingHeight = height - this.xAxisHeight
this.xAxisHeight = height * 0.7 * CHART_XAXIS_HEIGHT_RATIO
const remainingHeight = height * 0.7 - this.xAxisHeight
this.symptomHeight = remainingHeight * CHART_SYMPTOM_HEIGHT_RATIO
this.symptomRowHeight = this.symptomRowSymptoms.length *
this.symptomHeight
this.columnHeight = remainingHeight - this.symptomRowHeight
const chartHeight = this.shouldShowTemperatureColumn ?
height : (this.symptomRowHeight + this.xAxisHeight)
height * 0.7 : (this.symptomRowHeight + this.xAxisHeight)
const numberOfColumnsToRender = Math.round(width / CHART_COLUMN_WIDTH)
const columns = makeColumnInfo()
......
......@@ -104,10 +104,11 @@ class DayColumn extends Component {
date={dateString}
/>
{ symptomRowSymptoms.map(symptom => {
{ symptomRowSymptoms.map((symptom, i) => {
const hasSymptomData = this.data.hasOwnProperty(symptom)
return (
<SymptomCell
index={i}
key={symptom}
symptom={symptom}
symptomValue={hasSymptomData && this.data[symptom]}
......
......@@ -11,13 +11,16 @@ import {
const SymptomCell = ({
height,
index,
symptom,
symptomValue,
isSymptomDataComplete
}) => {
const shouldDrawDot = symptomValue !== false
const styleCell = [styles.cell, { height, width: CHART_COLUMN_WIDTH }]
const styleCell = index !== 0
? [styles.cell, { height, width: CHART_COLUMN_WIDTH }]
: [styles.cell, { height, width: CHART_COLUMN_WIDTH }, styles.topBorder]
let styleDot
if (shouldDrawDot) {
......@@ -40,6 +43,7 @@ const SymptomCell = ({
SymptomCell.propTypes = {
height: PropTypes.number,
index: PropTypes.number.isRequired,
symptom: PropTypes.string,
symptomValue: PropTypes.oneOfType([
PropTypes.bool,
......@@ -51,10 +55,16 @@ SymptomCell.propTypes = {
const styles = StyleSheet.create({
cell: {
backgroundColor: 'white',
borderColor: Colors.greyLight,
borderWidth: CHART_GRID_LINE_HORIZONTAL_WIDTH,
borderBottomColor: Colors.grey,
borderBottomWidth: CHART_GRID_LINE_HORIZONTAL_WIDTH,
borderLeftColor: Colors.grey,
borderLeftWidth: CHART_GRID_LINE_HORIZONTAL_WIDTH,
...Containers.centerItems
},
topBorder: {
borderTopColor: Colors.grey,
borderTopWidth: CHART_GRID_LINE_HORIZONTAL_WIDTH,
},
dot: {
width: CHART_DOT_RADIUS * 2,
height: CHART_DOT_RADIUS * 2,
......
......@@ -20,8 +20,8 @@ export const CHART_DOT_RADIUS = 6
export const CHART_GRID_LINE_HORIZONTAL_WIDTH = 0.3
export const CHART_ICON_SIZE = 20
export const CHART_STROKE_WIDTH = 3
export const CHART_SYMPTOM_HEIGHT_RATIO = 0.1
export const CHART_XAXIS_HEIGHT_RATIO = 0.14
export const CHART_SYMPTOM_HEIGHT_RATIO = 0.08
export const CHART_XAXIS_HEIGHT_RATIO = 0.1
export const CHART_YAXIS_WIDTH = 32
export const TEMP_SCALE_MAX = 38
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment