From c0be1b784885cc0dcc0a92d048d56da570d688e6 Mon Sep 17 00:00:00 2001
From: Julia Friesel <julia.friesel@gmail.com>
Date: Wed, 21 Nov 2018 13:44:29 +0100
Subject: [PATCH] Replace svg with ART in chart
---
components/chart/chart.js | 10 ++++----
components/chart/day-column.js | 43 +++++++++++++++++++-------------
components/chart/dot-and-line.js | 26 +++++++++++--------
components/chart/styles.js | 14 ++++-------
4 files changed, 50 insertions(+), 43 deletions(-)
diff --git a/components/chart/chart.js b/components/chart/chart.js
index 74f3ae13..635cef34 100644
--- a/components/chart/chart.js
+++ b/components/chart/chart.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react'
import { View, FlatList, ActivityIndicator } from 'react-native'
import range from 'date-range'
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 nfpLines from './nfp-lines'
import DayColumn from './day-column'
@@ -151,7 +151,7 @@ export default class CycleChart extends Component {
height={this.symptomRowHeight /
this.symptomRowSymptoms.length}
>
- <Svg
+ <Surface
width={styles.yAxis.width * 0.8}
height={this.symptomRowHeight /
this.symptomRowSymptoms.length * 0.8}
@@ -160,7 +160,7 @@ export default class CycleChart extends Component {
<G fill={symptomIcons[symptomName].color}>
{symptomIcons[symptomName].icon}
</G>
- </Svg>
+ </Surface>
</View>
})}
</View>
@@ -168,7 +168,7 @@ export default class CycleChart extends Component {
{makeYAxisLabels(this.columnHeight)}
</View>
<View style={[styles.yAxis, { alignItems: 'center', justifyContent: 'center' }]}>
- <Svg
+ <Surface
width={styles.yAxis.width * 0.7}
height={styles.yAxis.width * 0.7}
viewBox='325 330 190 190'
@@ -176,7 +176,7 @@ export default class CycleChart extends Component {
<G fill="none" stroke="#1E0B7A" strokeWidth="10">
<CycleDayIcon/>
</G>
- </Svg>
+ </Surface>
<AppText style={[
styles.column.label.date,
styles.yAxisLabels.dateLabel
diff --git a/components/chart/day-column.js b/components/chart/day-column.js
index 8b0e0eb1..4d3ab2d0 100644
--- a/components/chart/day-column.js
+++ b/components/chart/day-column.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react'
import {
Text, View, TouchableOpacity
} 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 moment from 'moment'
import styles from './styles'
@@ -67,12 +67,12 @@ export default class DayColumn extends Component {
const symptomHeight = this.props.symptomHeight
if(this.fhmAndLtl.drawLtlAt) {
- const ltlLine = (<Line
- x1={0}
- y1={this.fhmAndLtl.drawLtlAt}
- x2={config.columnWidth}
- y2={this.fhmAndLtl.drawLtlAt}
- {...styles.nfpLine}
+ const ltlLine = (<Shape
+ fill = "red"
+ d={new Path()
+ .moveTo(0, this.fhmAndLtl.drawLtlAt)
+ .lineTo(config.columnWidth, this.fhmAndLtl.drawLtlAt)
+ }
key='ltl'
/>)
columnElements.push(ltlLine)
@@ -80,12 +80,12 @@ export default class DayColumn extends Component {
if (this.fhmAndLtl.drawFhmLine) {
const x = styles.nfpLine.strokeWidth / 2
- const fhmLine = (<Line
- x1={x}
- y1={x}
- x2={x}
- y2={this.props.columnHeight}
- {...styles.nfpLine}
+ const fhmLine = (<Shape
+ fill="red"
+ d={new Path()
+ .moveTo(x, x)
+ .lineTo(x, this.props.columnHeight)
+ }
key='fhm'
/>)
columnElements.push(fhmLine)
@@ -123,11 +123,18 @@ export default class DayColumn extends Component {
</Text>
)
+ const colWidth = config.columnWidth
+ const colHeight = this.props.chartHeight
const column = (
<G>
- <Rect
- height={this.props.chartHeight}
- {...styles.column.rect}
+ <Shape
+ stroke={styles.column.stroke.color}
+ stroke-width={styles.column.stroke.width}
+ d={new Path()
+ .lineTo(0, colHeight)
+ .moveTo(colWidth, colHeight)
+ .lineTo(colWidth, 0)
+ }
/>
{ columnElements }
</G>
@@ -235,9 +242,9 @@ export default class DayColumn extends Component {
})}
</View>
- <Svg width={config.columnWidth} height={this.props.columnHeight}>
+ <Surface width={config.columnWidth} height={this.props.columnHeight}>
{column}
- </Svg>
+ </Surface>
<View style={{height: this.props.xAxisHeight}}>
{cycleDayLabel}
diff --git a/components/chart/dot-and-line.js b/components/chart/dot-and-line.js
index 4d49008f..21e9eeb2 100644
--- a/components/chart/dot-and-line.js
+++ b/components/chart/dot-and-line.js
@@ -1,5 +1,5 @@
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 config from '../../config'
@@ -27,11 +27,15 @@ export default class DotAndLine extends Component {
}
const dotStyle = exclude ? styles.curveDotsExcluded : styles.curveDots
+ const radius = dotStyle.r
const dot = (
- <Circle
- cx={config.columnMiddle}
- cy={y}
- {...dotStyle}
+ <Shape
+ d={new Path()
+ .moveTo(config.columnMiddle, y - radius)
+ .arc(0, radius * 2, radius)
+ .arc(0, radius * -2, radius)
+ }
+ fill={dotStyle.fill}
key='dot'
/>
)
@@ -42,12 +46,12 @@ export default class DotAndLine extends Component {
function makeLine(currY, middleY, x, excludeLine) {
const lineStyle = excludeLine ? styles.curveExcluded : styles.curve
- return <Line
- x1={config.columnMiddle}
- y1={currY}
- x2={x}
- y2={middleY}
- {...lineStyle}
+ return <Shape
+ stroke={lineStyle.stroke}
+ d={new Path()
+ .moveTo(config.columnMiddle, currY)
+ .lineTo(x, middleY)
+ }
key={x.toString()}
/>
}
\ No newline at end of file
diff --git a/components/chart/styles.js b/components/chart/styles.js
index d537116b..2b2bc61b 100644
--- a/components/chart/styles.js
+++ b/components/chart/styles.js
@@ -3,10 +3,10 @@ import { shadesOfRed, cycleDayColor } from '../../styles/index'
const colorTemperature = '#765285'
const colorTemperatureLight = '#a67fb5'
-const dotRadius = 5
+export const dotRadius = 5
const lineWidth = 1.5
const colorLtl = '#feb47b'
-const gridColor = 'lightgrey'
+const gridColor = '#d3d3d3'
const gridLineWidth = 0.5
const numberLabelFontSize = 13
@@ -41,13 +41,9 @@ const styles = {
textAlign: 'center',
}
},
- rect: {
- x:'0',
- y:'0',
- width: config.columnWidth,
- stroke: gridColor,
- strokeWidth: gridLineWidth,
- fill: 'transparent'
+ stroke: {
+ color: gridColor,
+ width: gridLineWidth,
}
},
symptomIcon: {
--
GitLab