Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
graph.js
// @flow
import React, { PureComponent } from 'react';
import { View, StyleSheet } from 'react-native';
import { VictoryChart, VictoryArea, VictoryAxis, VictoryScatter } from 'victory-native';
import { BackendTimestampConverter } from 'homefriend/src/services';
import appStyle from 'homefriend/src/appStyle';
type PropsType = {
consumptionHistory: DayConsumptionBackendDataType[],
};
type StateType = {
width: number,
};
const styles = StyleSheet.create({
container: {
alignSelf: 'stretch',
borderBottomRightRadius: appStyle.radiuses.m,
borderBottomLeftRadius: appStyle.radiuses.m,
overflow: 'hidden',
},
});
class ConsumptionGraph extends PureComponent {
state: StateType = {
width: 200,
};
onLayout = (layoutEvent: *) => {
const { width } = layoutEvent.nativeEvent.layout;
this.setState({ width });
};
props: PropsType;
render() {
const data = this.props.consumptionHistory.map(consumptionDay => ({
x: consumptionDay.date,
y: consumptionDay.volume,
}));
if (!data.length) data.push({ x: 0, y: 0 });
return (
<View style={styles.container} onLayout={this.onLayout}>
<VictoryChart
width={this.state.width}
height={130}
padding={{ top: 6, bottom: 8, left: -6, right: 10 }}
>
<VictoryArea
data={data}
style={{
data: {
stroke: appStyle.colors.primary,
strokeWidth: 4,
fill: appStyle.colors.extraBrightPrimary,
},
}}
/>
<VictoryScatter
data={data}
style={{
data: {
fill: 'white',
stroke: appStyle.colors.primary,
strokeWidth: 2,
},
}}
size={3.5}
/>
<VictoryAxis
style={{
axis: { stroke: 'black', strokeWidth: 1 },
ticks: {
size: 5,
stroke: 'black',
strokeWidth: 1,
},
tickLabels: {
fill: 'black',
fontFamily: 'inherit',
fontSize: 16,
},
}}
tickValues={data.map(datum => datum.x)}
tickFormat={x => BackendTimestampConverter.fromTimestamp(x).format('ddd')}
/>
</VictoryChart>
</View>
);
}
}
export default ConsumptionGraph;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.