Permalink
Browse files

This adds axis to our WeatherGraph so we can see the values

associated with the graph in a more readable form.

There's no special ART handling here, just straight up React Native.
  • Loading branch information...
hswolff committed Jul 9, 2016
1 parent a05e3ae commit 07a5e42a15923eb17472102b993938aa5fe573e3
Showing with 109 additions and 0 deletions.
  1. +94 −0 js/weather/WeatherGraph.js
  2. +15 −0 js/weather/graph-utils.js
View
@@ -6,6 +6,7 @@ import {
ART,
Dimensions,
StyleSheet,
+ Text,
View,
} from 'react-native';
@@ -20,6 +21,7 @@ import * as graphUtils from './graph-utils';
import Color from '../services/color';
const PaddingSize = 20;
+const TickWidth = PaddingSize * 2;
const dimensionWindow = Dimensions.get('window');
@@ -75,16 +77,30 @@ export default class WeatherGraph extends Component {
graphWidth,
graphHeight,
linePath: lineGraph.path,
+ ticks: lineGraph.ticks,
+ scale: lineGraph.scale,
});
}
render() {
+ const {
+ yAccessor,
+ } = this.props;
+
const {
graphWidth,
graphHeight,
linePath,
+ ticks,
+ scale,
} = this.state;
+ const {
+ x: scaleX,
+ } = scale;
+
+ const tickXFormat = scaleX.tickFormat(null, '%b %d');
+
return (
<View style={styles.container}>
<Surface width={graphWidth} height={graphHeight}>
@@ -96,6 +112,52 @@ export default class WeatherGraph extends Component {
/>
</Group>
</Surface>
+
+ <View key={'ticksX'}>
+ {ticks.map((tick, index) => {
+ const tickStyles = {};
+ tickStyles.width = TickWidth;
+ tickStyles.left = tick.x - (TickWidth / 2);
+
+ return (
+ <Text key={index} style={[styles.tickLabelX, tickStyles]}>
+ {tickXFormat(new Date(tick.datum.time * 1000))}
+ </Text>
+ );
+ })}
+ </View>
+
+ <View key={'ticksY'} style={styles.ticksYContainer}>
+ {ticks.map((tick, index) => {
+ const value = yAccessor(tick.datum);
+
+ const tickStyles = {};
+ tickStyles.width = TickWidth;
+ tickStyles.left = tick.x - Math.round(TickWidth * 0.5);
+
+ tickStyles.top = tick.y + 2 - Math.round(TickWidth * 0.65);
+
+ return (
+ <View key={index} style={[styles.tickLabelY, tickStyles]}>
+ <Text style={styles.tickLabelYText}>
+ {value}&deg;
+ </Text>
+ </View>
+ );
+ })}
+ </View>
+
+ <View key={'ticksYDot'} style={styles.ticksYContainer}>
+ {ticks.map((tick, index) => (
+ <View
+ key={index}
+ style={[styles.ticksYDot, {
+ left: tick.x,
+ top: tick.y,
+ }]}
+ />
+ ))}
+ </View>
</View>
);
}
@@ -104,4 +166,36 @@ export default class WeatherGraph extends Component {
const styles = StyleSheet.create({
container: {
},
+
+ tickLabelX: {
+ position: 'absolute',
+ bottom: 0,
+ fontSize: 12,
+ textAlign: 'center',
+ },
+
+ ticksYContainer: {
+ position: 'absolute',
+ top: 0,
+ left: 0,
+ },
+
+ tickLabelY: {
+ position: 'absolute',
+ left: 0,
+ backgroundColor: 'transparent',
+ },
+
+ tickLabelYText: {
+ fontSize: 12,
+ textAlign: 'center',
+ },
+
+ ticksYDot: {
+ position: 'absolute',
+ width: 2,
+ height: 2,
+ backgroundColor: Color.Black,
+ borderRadius: 100,
+ },
});
View
@@ -73,6 +73,21 @@ export function createLineGraph({
.y((d) => scaleY(yAccessor(d)));
return {
+ data,
+ scale: {
+ x: scaleX,
+ y: scaleY,
+ },
path: lineShape(data),
+ ticks: data.map((datum) => {
+ const time = xAccessor(datum);
+ const value = yAccessor(datum);
+
+ return {
+ x: scaleX(time),
+ y: scaleY(value),
+ datum,
+ };
+ }),
};
}

0 comments on commit 07a5e42

Please sign in to comment.