graph.js

gistfile1.txt

// @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;