From 5e9d38c741ba91cff34de155793947551449e2a8 Mon Sep 17 00:00:00 2001
From: Eden2016 <eden201621@gmail.com>
Date: Tue, 21 Jan 2020 10:38:43 -0500
Subject: [PATCH 1/3] repositioning labels for LineChart

---
 app/components/AppletData/LineChart.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/components/AppletData/LineChart.js b/app/components/AppletData/LineChart.js
index ea88c6f4c..013e3697b 100644
--- a/app/components/AppletData/LineChart.js
+++ b/app/components/AppletData/LineChart.js
@@ -126,11 +126,11 @@ class LineChart extends React.Component {
         }
         <Path d={lineCreator(data)} fill="none" stroke={colors.primary} strokeWidth="2" />
 
-        <Text x={0} y={height - bottomMargin - 20} textAnchor="start">
-          {minLabelBreak.map((t, i) => <TSpan x={0} dy={10} key={`minLabel_${t}__${i}`}>{t}</TSpan>)}
+        <Text x={0} y={height - bottomMargin - 35} textAnchor="start">
+          {minLabelBreak.map((t, i) => <TSpan x={width - 90} dy={10} key={`minLabel_${t}__${i}`}>{t}</TSpan>)}
         </Text>
-        <Text x={0} y={10} textAnchor="start">
-          {maxLabelBreak.map((t, i) => <TSpan x={0} dy={10} key={`maxLabel_${t}__${i}`}>{t}</TSpan>)}
+        <Text x={0} y={0} textAnchor="start">
+          {maxLabelBreak.map((t, i) => <TSpan x={20} dy={10} key={`maxLabel_${t}__${i}`}>{t}</TSpan>)}
         </Text>
       </Svg>
     );

From c911fdc8ea04bf147f83124e910ddd4f53353ca6 Mon Sep 17 00:00:00 2001
From: Eden2016 <eden201621@gmail.com>
Date: Tue, 21 Jan 2020 11:12:18 -0500
Subject: [PATCH 2/3] refactoring code to put labels outside LineChart

---
 app/components/AppletData/LineChart.js | 85 ++++++++++++--------------
 1 file changed, 39 insertions(+), 46 deletions(-)

diff --git a/app/components/AppletData/LineChart.js b/app/components/AppletData/LineChart.js
index 013e3697b..baceb4e2a 100644
--- a/app/components/AppletData/LineChart.js
+++ b/app/components/AppletData/LineChart.js
@@ -1,12 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Dimensions } from 'react-native';
+import { Dimensions, StyleSheet, Text, View } from 'react-native';
 import moment from 'moment';
 import {
   Svg,
   Line,
-  Text,
-  TSpan,
   Circle,
   Path,
 } from 'react-native-svg';
@@ -16,34 +14,29 @@ import { line } from 'd3-shape';
 
 import { colors } from '../../themes/colors';
 
-
-const textBreaker = (text, charLength) => {
-  const textBreakBySpace = text.split(' ');
-  let current = 0;
-  const output = [textBreakBySpace[0]];
-
-  // eslint-disable-next-line
-  for (let i=1; i<textBreakBySpace.length; i += 1) {
-    const tt = textBreakBySpace[i];
-    const line = output[current];
-    if (line.length < charLength) {
-      output[current] += ` ${tt}`;
-    } else {
-      output.push(tt);
-      current += 1;
-    }
-  }
-
-  return output;
-};
+const width = Math.round(Dimensions.get('window').width * 0.9);
+const height = Math.round(width * (2 / 3));
+
+const styles = StyleSheet.create({
+  lineChartContainer: {
+    width,
+    height: height + 40,
+  },
+  topLabel: {
+    paddingBottom: 10,
+  },
+  bottomLabel: {
+    alignSelf: 'flex-end',
+    paddingTop: 10,
+    paddingRight: 5
+  },
+});
 
 // eslint-disable-next-line
 class LineChart extends React.Component {
   // eslint-disable-next-line
   render() {
     const { data, labels, minMaxLabels } = this.props;
-    const width = Math.round(Dimensions.get('window').width * 0.9);
-    const height = Math.round(width * (2 / 3));
 
     const leftMargin = 5;
     const rightMargin = 5;
@@ -109,30 +102,30 @@ class LineChart extends React.Component {
       .x(d => xMapper(moment(d.date)))
       .y(d => yMapper(d.value));
 
-    const minLabelBreak = textBreaker(minMaxLabels[0], 9);
-    const maxLabelBreak = textBreaker(minMaxLabels[1], 9);
     return (
-      <Svg width={width} height={height}>
-        <Line x1={leftMargin} y1={height - bottomMargin} x2={width} y2={height - bottomMargin} stroke={colors.lightGrey} strokeWidth="2" />
-        {
-          xTicks.map((x, i) => <Circle x={x} y={height - bottomMargin} r="5" fill={colors.lightGrey} key={`xTick__${i}__${x}`} />)
-        }
-        <Line x1={leftMargin} y1={0} x2={leftMargin} y2={height - bottomMargin} stroke={colors.lightGrey} strokeWidth="2" />
-        {
-          yTicks.map((y, i) => <Circle x={leftMargin} y={y} r="5" fill={colors.lightGrey} key={`yTick__${i}__${y}`} />)
-        }
-        {
-          data.map((d, i) => <Circle x={xMapper(moment(d.date).toDate())} y={yMapper(d.value)} r="5" fill={colors.primary} key={`xTick__${i}__${d.date}__${d.value}`} />)
-        }
-        <Path d={lineCreator(data)} fill="none" stroke={colors.primary} strokeWidth="2" />
-
-        <Text x={0} y={height - bottomMargin - 35} textAnchor="start">
-          {minLabelBreak.map((t, i) => <TSpan x={width - 90} dy={10} key={`minLabel_${t}__${i}`}>{t}</TSpan>)}
+      <View style={styles.lineChartContainer}>
+        <Text style={styles.topLabel}>
+          {minMaxLabels[1]}
         </Text>
-        <Text x={0} y={0} textAnchor="start">
-          {maxLabelBreak.map((t, i) => <TSpan x={20} dy={10} key={`maxLabel_${t}__${i}`}>{t}</TSpan>)}
+        <Svg width={width} height={height}>
+          <Line x1={leftMargin} y1={height - bottomMargin} x2={width} y2={height - bottomMargin} stroke={colors.lightGrey} strokeWidth="2" />
+          {
+            xTicks.map((x, i) => <Circle x={x} y={height - bottomMargin} r="5" fill={colors.lightGrey} key={`xTick__${i}__${x}`} />)
+          }
+          <Line x1={leftMargin} y1={0} x2={leftMargin} y2={height - bottomMargin} stroke={colors.lightGrey} strokeWidth="2" />
+          {
+            yTicks.map((y, i) => <Circle x={leftMargin} y={y} r="5" fill={colors.lightGrey} key={`yTick__${i}__${y}`} />)
+          }
+          {
+            data.map((d, i) => <Circle x={xMapper(moment(d.date).toDate())} y={yMapper(d.value)} r="5" fill={colors.primary} key={`xTick__${i}__${d.date}__${d.value}`} />)
+          }
+          <Path d={lineCreator(data)} fill="none" stroke={colors.primary} strokeWidth="2" />
+
+        </Svg>
+        <Text style={styles.bottomLabel}>
+          {minMaxLabels[0]}
         </Text>
-      </Svg>
+      </View>
     );
   }
 }

From ba9eeb6bb93711233905dec1cca901e518287520 Mon Sep 17 00:00:00 2001
From: Eden2016 <eden201621@gmail.com>
Date: Tue, 21 Jan 2020 11:14:55 -0500
Subject: [PATCH 3/3] versioning

---
 CHANGELOG.md             | 3 +++
 android/app/build.gradle | 4 ++--
 ios/MDCApp/Info.plist    | 4 ++--
 package.json             | 2 +-
 4 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4e60458a6..d512f1a73 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 =======
+## [0.9.18] - 2019-01-21
+- :lipstick: Repositioning chart labels outside LineChart component
+
 ## [0.9.16] - 2019-01-16
 - :lipstick: Redesign Progress Bar
 
diff --git a/android/app/build.gradle b/android/app/build.gradle
index d7e324030..24370c46a 100644
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@@ -101,8 +101,8 @@ android {
         applicationId "lab.childmindinstitute.data"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 109
-        versionName "0.9.16"
+        versionCode 112
+        versionName "0.9.18"
         ndk {
             abiFilters "arm64-v8a", "x86_64", "armeabi-v7a", "x86"
         }
diff --git a/ios/MDCApp/Info.plist b/ios/MDCApp/Info.plist
index 1b3c4cecf..3980eca48 100644
--- a/ios/MDCApp/Info.plist
+++ b/ios/MDCApp/Info.plist
@@ -17,11 +17,11 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>0.9.16</string>
+	<string>0.9.18</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>109</string>
+	<string>112</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSRequiresIPhoneOS</key>
diff --git a/package.json b/package.json
index cc3eb88c7..798e5c645 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "MindLogger",
-    "version": "0.9.16",
+    "version": "0.9.18",
     "private": true,
     "scripts": {
         "start": "node node_modules/react-native/local-cli/cli.js start",