Skip to content

Instantly share code, notes, and snippets.

@mvbattan
Last active April 13, 2017 14:22
Show Gist options
  • Save mvbattan/e2498e6f487a068e180b83c3afc6162a to your computer and use it in GitHub Desktop.
Save mvbattan/e2498e6f487a068e180b83c3afc6162a to your computer and use it in GitHub Desktop.
index.js - full
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
import SeparatorsLayer from './SeparatorsLayer';
import PointsPath from './PointsPath';
import { Point } from './pointUtils';
import { startingPoint, vectorTransform } from './Scaler';
const lightBlue = '#40C4FE';
const green = '#53E69D';
const MAX_VALUE = 10;
const Y_LEVELS = 5;
const X_LEVELS = 5;
const lightBluePoints = [Point(0, 0), Point(1, 2), Point(2, 3), Point(3, 6), Point(5, 6)];
const greenPoints = [Point(0, 2), Point(3, 4), Point(4, 0), Point(5, 10)];
export default class lineChartExample extends Component {
render() {
return (
<View style={styles.container}>
<SeparatorsLayer topValue={MAX_VALUE} separators={Y_LEVELS} height={100}>
<PointsPath
color={lightBlue}
pointList={lightBluePoints.map(
(point) => vectorTransform(point, MAX_VALUE, X_LEVELS)
)}
opacity={0.5}
startingPoint={startingPoint}
/>
<PointsPath
color={green}
pointList={greenPoints.map(
(point) => vectorTransform(point, MAX_VALUE, X_LEVELS)
)}
opacity={0.5}
startingPoint={startingPoint}
/>
</SeparatorsLayer>
<View style={styles.horizontalScale}>
<Text>0</Text>
<Text>1</Text>
<Text>2</Text>
<Text>3</Text>
<Text>4</Text>
<Text>5</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
height: 100
},
horizontalScale: {
flexDirection: 'row',
justifyContent: 'space-around',
marginTop: 150,
marginLeft: 20,
width: 290
}
});
AppRegistry.registerComponent('lineChartExample', () => lineChartExample);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment