Skip to content
Snippets Groups Projects
Commit c0be1b78 authored by Julia Friesel's avatar Julia Friesel
Browse files

Replace svg with ART in chart

parent 6e3cbc8e
No related branches found
No related tags found
No related merge requests found
...@@ -2,7 +2,7 @@ import React, { Component } from 'react' ...@@ -2,7 +2,7 @@ import React, { Component } from 'react'
import { View, FlatList, ActivityIndicator } from 'react-native' import { View, FlatList, ActivityIndicator } from 'react-native'
import range from 'date-range' import range from 'date-range'
import { LocalDate } from 'js-joda' import { LocalDate } from 'js-joda'
import Svg, { G } from 'react-native-svg' import { Surface, Group as G } from 'react-native/Libraries/ART/ReactNativeART'
import { makeYAxisLabels, makeHorizontalGrid } from './y-axis' import { makeYAxisLabels, makeHorizontalGrid } from './y-axis'
import nfpLines from './nfp-lines' import nfpLines from './nfp-lines'
import DayColumn from './day-column' import DayColumn from './day-column'
...@@ -151,7 +151,7 @@ export default class CycleChart extends Component { ...@@ -151,7 +151,7 @@ export default class CycleChart extends Component {
height={this.symptomRowHeight / height={this.symptomRowHeight /
this.symptomRowSymptoms.length} this.symptomRowSymptoms.length}
> >
<Svg <Surface
width={styles.yAxis.width * 0.8} width={styles.yAxis.width * 0.8}
height={this.symptomRowHeight / height={this.symptomRowHeight /
this.symptomRowSymptoms.length * 0.8} this.symptomRowSymptoms.length * 0.8}
...@@ -160,7 +160,7 @@ export default class CycleChart extends Component { ...@@ -160,7 +160,7 @@ export default class CycleChart extends Component {
<G fill={symptomIcons[symptomName].color}> <G fill={symptomIcons[symptomName].color}>
{symptomIcons[symptomName].icon} {symptomIcons[symptomName].icon}
</G> </G>
</Svg> </Surface>
</View> </View>
})} })}
</View> </View>
...@@ -168,7 +168,7 @@ export default class CycleChart extends Component { ...@@ -168,7 +168,7 @@ export default class CycleChart extends Component {
{makeYAxisLabels(this.columnHeight)} {makeYAxisLabels(this.columnHeight)}
</View> </View>
<View style={[styles.yAxis, { alignItems: 'center', justifyContent: 'center' }]}> <View style={[styles.yAxis, { alignItems: 'center', justifyContent: 'center' }]}>
<Svg <Surface
width={styles.yAxis.width * 0.7} width={styles.yAxis.width * 0.7}
height={styles.yAxis.width * 0.7} height={styles.yAxis.width * 0.7}
viewBox='325 330 190 190' viewBox='325 330 190 190'
...@@ -176,7 +176,7 @@ export default class CycleChart extends Component { ...@@ -176,7 +176,7 @@ export default class CycleChart extends Component {
<G fill="none" stroke="#1E0B7A" strokeWidth="10"> <G fill="none" stroke="#1E0B7A" strokeWidth="10">
<CycleDayIcon/> <CycleDayIcon/>
</G> </G>
</Svg> </Surface>
<AppText style={[ <AppText style={[
styles.column.label.date, styles.column.label.date,
styles.yAxisLabels.dateLabel styles.yAxisLabels.dateLabel
......
...@@ -2,7 +2,7 @@ import React, { Component } from 'react' ...@@ -2,7 +2,7 @@ import React, { Component } from 'react'
import { import {
Text, View, TouchableOpacity Text, View, TouchableOpacity
} from 'react-native' } from 'react-native'
import Svg,{ G, Rect, Line } from 'react-native-svg' import { Surface, Group as G, Path, Shape } from 'react-native/Libraries/ART/ReactNativeART'
import { LocalDate } from 'js-joda' import { LocalDate } from 'js-joda'
import moment from 'moment' import moment from 'moment'
import styles from './styles' import styles from './styles'
...@@ -67,12 +67,12 @@ export default class DayColumn extends Component { ...@@ -67,12 +67,12 @@ export default class DayColumn extends Component {
const symptomHeight = this.props.symptomHeight const symptomHeight = this.props.symptomHeight
if(this.fhmAndLtl.drawLtlAt) { if(this.fhmAndLtl.drawLtlAt) {
const ltlLine = (<Line const ltlLine = (<Shape
x1={0} fill = "red"
y1={this.fhmAndLtl.drawLtlAt} d={new Path()
x2={config.columnWidth} .moveTo(0, this.fhmAndLtl.drawLtlAt)
y2={this.fhmAndLtl.drawLtlAt} .lineTo(config.columnWidth, this.fhmAndLtl.drawLtlAt)
{...styles.nfpLine} }
key='ltl' key='ltl'
/>) />)
columnElements.push(ltlLine) columnElements.push(ltlLine)
...@@ -80,12 +80,12 @@ export default class DayColumn extends Component { ...@@ -80,12 +80,12 @@ export default class DayColumn extends Component {
if (this.fhmAndLtl.drawFhmLine) { if (this.fhmAndLtl.drawFhmLine) {
const x = styles.nfpLine.strokeWidth / 2 const x = styles.nfpLine.strokeWidth / 2
const fhmLine = (<Line const fhmLine = (<Shape
x1={x} fill="red"
y1={x} d={new Path()
x2={x} .moveTo(x, x)
y2={this.props.columnHeight} .lineTo(x, this.props.columnHeight)
{...styles.nfpLine} }
key='fhm' key='fhm'
/>) />)
columnElements.push(fhmLine) columnElements.push(fhmLine)
...@@ -123,11 +123,18 @@ export default class DayColumn extends Component { ...@@ -123,11 +123,18 @@ export default class DayColumn extends Component {
</Text> </Text>
) )
const colWidth = config.columnWidth
const colHeight = this.props.chartHeight
const column = ( const column = (
<G> <G>
<Rect <Shape
height={this.props.chartHeight} stroke={styles.column.stroke.color}
{...styles.column.rect} stroke-width={styles.column.stroke.width}
d={new Path()
.lineTo(0, colHeight)
.moveTo(colWidth, colHeight)
.lineTo(colWidth, 0)
}
/> />
{ columnElements } { columnElements }
</G> </G>
...@@ -235,9 +242,9 @@ export default class DayColumn extends Component { ...@@ -235,9 +242,9 @@ export default class DayColumn extends Component {
})} })}
</View> </View>
<Svg width={config.columnWidth} height={this.props.columnHeight}> <Surface width={config.columnWidth} height={this.props.columnHeight}>
{column} {column}
</Svg> </Surface>
<View style={{height: this.props.xAxisHeight}}> <View style={{height: this.props.xAxisHeight}}>
{cycleDayLabel} {cycleDayLabel}
......
import React, { Component } from 'react' import React, { Component } from 'react'
import { Circle, Line } from 'react-native-svg' import { Path, Shape } from 'react-native/Libraries/ART/ReactNativeART'
import styles from './styles' import styles from './styles'
import config from '../../config' import config from '../../config'
...@@ -27,11 +27,15 @@ export default class DotAndLine extends Component { ...@@ -27,11 +27,15 @@ export default class DotAndLine extends Component {
} }
const dotStyle = exclude ? styles.curveDotsExcluded : styles.curveDots const dotStyle = exclude ? styles.curveDotsExcluded : styles.curveDots
const radius = dotStyle.r
const dot = ( const dot = (
<Circle <Shape
cx={config.columnMiddle} d={new Path()
cy={y} .moveTo(config.columnMiddle, y - radius)
{...dotStyle} .arc(0, radius * 2, radius)
.arc(0, radius * -2, radius)
}
fill={dotStyle.fill}
key='dot' key='dot'
/> />
) )
...@@ -42,12 +46,12 @@ export default class DotAndLine extends Component { ...@@ -42,12 +46,12 @@ export default class DotAndLine extends Component {
function makeLine(currY, middleY, x, excludeLine) { function makeLine(currY, middleY, x, excludeLine) {
const lineStyle = excludeLine ? styles.curveExcluded : styles.curve const lineStyle = excludeLine ? styles.curveExcluded : styles.curve
return <Line return <Shape
x1={config.columnMiddle} stroke={lineStyle.stroke}
y1={currY} d={new Path()
x2={x} .moveTo(config.columnMiddle, currY)
y2={middleY} .lineTo(x, middleY)
{...lineStyle} }
key={x.toString()} key={x.toString()}
/> />
} }
\ No newline at end of file
...@@ -3,10 +3,10 @@ import { shadesOfRed, cycleDayColor } from '../../styles/index' ...@@ -3,10 +3,10 @@ import { shadesOfRed, cycleDayColor } from '../../styles/index'
const colorTemperature = '#765285' const colorTemperature = '#765285'
const colorTemperatureLight = '#a67fb5' const colorTemperatureLight = '#a67fb5'
const dotRadius = 5 export const dotRadius = 5
const lineWidth = 1.5 const lineWidth = 1.5
const colorLtl = '#feb47b' const colorLtl = '#feb47b'
const gridColor = 'lightgrey' const gridColor = '#d3d3d3'
const gridLineWidth = 0.5 const gridLineWidth = 0.5
const numberLabelFontSize = 13 const numberLabelFontSize = 13
...@@ -41,13 +41,9 @@ const styles = { ...@@ -41,13 +41,9 @@ const styles = {
textAlign: 'center', textAlign: 'center',
} }
}, },
rect: { stroke: {
x:'0', color: gridColor,
y:'0', width: gridLineWidth,
width: config.columnWidth,
stroke: gridColor,
strokeWidth: gridLineWidth,
fill: 'transparent'
} }
}, },
symptomIcon: { symptomIcon: {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment