From 8df3e741276af9ff141b96819021d9a92558a7ee Mon Sep 17 00:00:00 2001
From: Julia Friesel <julia.friesel@gmail.com>
Date: Tue, 14 Aug 2018 13:20:10 +0200
Subject: [PATCH] Make columnsize a bit smaller and style y axis
---
components/chart/config.js | 5 +++--
components/chart/day-column.js | 2 +-
components/chart/styles.js | 6 +++---
components/chart/y-axis.js | 9 +++++----
4 files changed, 12 insertions(+), 10 deletions(-)
diff --git a/components/chart/config.js b/components/chart/config.js
index a83eafc6..ec3509ef 100644
--- a/components/chart/config.js
+++ b/components/chart/config.js
@@ -1,9 +1,10 @@
const config = {
chartHeight: 350,
- columnWidth: 30,
+ columnWidth: 25,
temperatureScale: {
low: 35,
- high: 38
+ high: 38,
+ units: 0.1
}
}
diff --git a/components/chart/day-column.js b/components/chart/day-column.js
index e1f5b91f..1717c426 100644
--- a/components/chart/day-column.js
+++ b/components/chart/day-column.js
@@ -104,7 +104,7 @@ export default class DayColumn extends Component {
onPress: () => {
this.passDateToDayView(dateString)
},
- activeOpacity: 0.8
+ activeOpacity: 1
},
columnElements
)
diff --git a/components/chart/styles.js b/components/chart/styles.js
index 7a25adfb..0dc569db 100644
--- a/components/chart/styles.js
+++ b/components/chart/styles.js
@@ -72,10 +72,10 @@ const styles = {
},
yAxisLabel: {
position: 'absolute',
- right: 3,
+ left: 3,
color: 'grey',
- fontSize: 12,
- fontWeight: 'bold'
+ fontSize: 11,
+ textAlign: 'left'
},
horizontalGrid: {
position:'absolute',
diff --git a/components/chart/y-axis.js b/components/chart/y-axis.js
index 052aa5f5..ccc9404b 100644
--- a/components/chart/y-axis.js
+++ b/components/chart/y-axis.js
@@ -4,9 +4,10 @@ import config from './config'
import styles from './styles'
function makeYAxis() {
- const scaleMin = config.temperatureScale.low
- const scaleMax = config.temperatureScale.high
- const numberOfTicks = (scaleMax - scaleMin) * 2
+ const scale = config.temperatureScale
+ const scaleMin = scale.low
+ const scaleMax = scale.high
+ const numberOfTicks = (scaleMax - scaleMin) * (1 / scale.units)
const tickDistance = config.chartHeight / numberOfTicks
const tickPositions = []
@@ -23,7 +24,7 @@ function makeYAxis() {
<Text
style={{...style}}
key={i}>
- {scaleMax - i * 0.5}
+ {scaleMax - i * scale.units}
</Text>
)
tickPositions.push(y)
--
GitLab