diff --git a/android/app/build.gradle b/android/app/build.gradle index 5623cac..25bd043 100644 --- a/android/app/build.gradle +++ b/android/app/build.gradle @@ -137,6 +137,7 @@ android { } dependencies { + compile project(':react-native-svg') compile project(':realm') compile fileTree(dir: "libs", include: ["*.jar"]) compile "com.android.support:appcompat-v7:23.0.1" diff --git a/android/app/src/main/java/com/drip/MainApplication.java b/android/app/src/main/java/com/drip/MainApplication.java index 00ce2c0..324dd01 100644 --- a/android/app/src/main/java/com/drip/MainApplication.java +++ b/android/app/src/main/java/com/drip/MainApplication.java @@ -3,6 +3,7 @@ package com.drip; import android.app.Application; import com.facebook.react.ReactApplication; +import com.horcrux.svg.SvgPackage; import io.realm.react.RealmReactPackage; import com.facebook.react.ReactNativeHost; import com.facebook.react.ReactPackage; @@ -24,6 +25,7 @@ public class MainApplication extends Application implements ReactApplication { protected List getPackages() { return Arrays.asList( new MainReactPackage(), + new SvgPackage(), new RealmReactPackage() ); } diff --git a/android/settings.gradle b/android/settings.gradle index 6bba8cd..9b4195f 100644 --- a/android/settings.gradle +++ b/android/settings.gradle @@ -1,4 +1,6 @@ rootProject.name = 'drip' +include ':react-native-svg' +project(':react-native-svg').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-svg/android') include ':realm' project(':realm').projectDir = new File(rootProject.projectDir, '../node_modules/realm/android') diff --git a/app.js b/app.js index 70c1a05..a954d19 100644 --- a/app.js +++ b/app.js @@ -3,6 +3,7 @@ import Home from './home' import Calendar from './calendar' import CycleDay from './cycle-day' +import Chart from './chart' // this is until react native fixes this bug, see https://github.com/facebook/react-native/issues/18868#issuecomment-382671739 import { YellowBox } from 'react-native' @@ -11,5 +12,6 @@ YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated']) export default createStackNavigator({ home: { screen: Home }, calendar: { screen: Calendar }, - cycleDay: { screen: CycleDay } + cycleDay: { screen: CycleDay }, + chart: { screen: Chart } }) diff --git a/chart.js b/chart.js new file mode 100644 index 0000000..d87669e --- /dev/null +++ b/chart.js @@ -0,0 +1,103 @@ +import React, { Component } from 'react' +import { ScrollView } from 'react-native' +import { temperatureDaysSortedByDate } from './db' +import range from 'date-range' +import Svg,{ + G, + Polyline, + Rect, + Text, +} from 'react-native-svg' +import { LocalDate } from 'js-joda' + +const right = 350 +const top = 10 +const bottom = 350 +const columnWidth = 30 +const dateRow = { + height: 30, + width: right +} + +function makeDayColumn(labelInfo) { + return ( + + + {labelInfo.label.split('-')[2]} + + ) +} + +function getPreviousDays(n) { + const today = new Date() + today.setHours(0); today.setMinutes(0); today.setSeconds(0); today.setMilliseconds(0) + const twoWeeksAgo = new Date(today - (range.DAY * n)) + + return range(twoWeeksAgo, today).reverse() +} +const xAxisDates = getPreviousDays(14).map(jsDate => { + return LocalDate.of( + jsDate.getFullYear(), + jsDate.getMonth() + 1, + jsDate.getDate() + ).toString() +}) +const xAxisDatesWithRightOffset = xAxisDates.map((datestring, columnIndex) => { + const rightOffset = right - (columnWidth * (columnIndex + 1)) + return { + label: datestring, + rightOffset + } +}) + +function determineCurvePoints(temperatureDaysSortedByDate, xAxisDatesWithRightOffset) { + return temperatureDaysSortedByDate.map(cycleDay => { + const x = xAxisDatesWithRightOffset.find(tick => tick.label === cycleDay.date).rightOffset + const y = normalizeToScale(cycleDay.temperature.value) + return [x,y].join() + }).join(' ') +} + +function normalizeToScale(temp) { + const scale = { + low: 33, + high: 40 + } + const tempInScaleDecs = (scale.high - temp) / (scale.high - scale.low) + const scaleHeight = bottom - top + return scaleHeight * tempInScaleDecs +} + +export default class SvgExample extends Component { + render() { + return ( + + + {xAxisDatesWithRightOffset.map(makeDayColumn)} + + + + ) + } +} \ No newline at end of file diff --git a/home.js b/home.js index 0ada69f..48c7948 100644 --- a/home.js +++ b/home.js @@ -65,6 +65,12 @@ export default class Home extends Component { title="Go to calendar"> + + +