ChargEco/Strides-APP/app/pages/wallet/Overview.js

/**
 * 钱包概述页面
 * @邠心vbe on 2021/05/08
 */
import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import { ElevationObject } from '../../components/Button';
import {Bar, VictoryAxis, VictoryBar, VictoryChart, VictoryTheme} from 'victory-native';
import apiWallet from '../../api/apiWallet';
import Svg from 'react-native-svg';
import utils from '../../utils/utils';

export default class Overview extends Component {
  constructor(props) {
    super(props);
    this.state = {
      glanceData: {},
      monthData: [],
      weekdayData: [],
      weekIndex: 0,
      monthIndex: 0
    };
    this.nowDataString = new Date().toDateString()
    this.refreshing = false;
  }

  componentDidMount() {
    this.getOverview();
  }

  componentDidUpdate() {
    if (this.props.refresh && !this.refreshing && this.props.shown) {
      this.refreshing = true;
      this.getOverview();
    }
  }

  getOverview() {
    apiWallet.getOverviewData().then(res => {
      var glanceData = {}
      var weekdayData = []
      var monthData = []
      var weekIndex = 0
      var monthIndex = 0
      if (res.data) {
        if (res.data.atAGlance) {
          glanceData = res.data.atAGlance
        }
        if (res.data.statisticsForThisWeek) {
          res.data.statisticsForThisWeek.forEach((item, index) => {
            if (this.nowDataString.indexOf(item.x) >= 0) {
              weekIndex = index;
            }
            //item.y += index + 2;
            item.label = currency + item.y;
            item.title = item.dateTimeStr + ' | ' + item.label + ' | ' + item.power + 'kw';
            weekdayData.push(item);
          });
        }
        if (res.data.pastSixMonths) {
          res.data.pastSixMonths.forEach((item, index) => {
            if (this.nowDataString.indexOf(item.x) >= 0) {
              monthIndex = index;
            }
            //item.y += index + 3;
            item.label = currency + item.y;
            item.title = item.x + ' | ' + item.label + ' | ' + item.power + 'kw';
            monthData.push(item);
          });
        }
      }
      this.setState({
        glanceData: glanceData,
        weekIndex: weekIndex,
        monthIndex: monthIndex,
        weekdayData: weekdayData,
        monthData: monthData,
      });
      this.stopRefresh();
    }).catch(err => {
      toastShort(err);
      this.stopRefresh();
    });
  }

  stopRefresh() {
    if (this.props.refreshed) {
      this.props.refreshed();
    }
    this.refreshing = false;
  }

  barTheme = (active) => ({
    data: { 
      fill: ({datum, index}) => {
        return (datum.y > 0 ? (index == active ? "#FFCC2C" : "#FFE080") : "#999999");
      }
    },
    labels: {
      fontSize: 12,
      fill: ({index}) => (index == active ? "#000" : "#555")
    }
  })

  getFill = ({datum, index}) => (datum.y > 0 ? (index == this.state.monthIndex ? "#FFCC2C" : "#FFE080") : "#999999");

  render() {
    return (
      <View style={this.props.shown ? ui.flex1 : styles.hide}>
        <View style={styles.glanceView}>
          <Text style={styles.glanceTitle}>At a glance</Text>
          <View style={styles.overviewRow}>
            <View style={ui.flex1}>
              <Text style={styles.valueText}>{this.state.glanceData.averageCharge ?? 0}</Text>
              <Text style={styles.titleText}>kWh/Week</Text>
              <Text style={styles.subTitleText}>Average Charge</Text>
            </View>
            <View style={ui.flex1}>
              <Text style={styles.valueText}>{this.state.glanceData.averageSpend ?? 0}</Text>
              <Text style={styles.titleText}>{currency}/Week</Text>
              <Text style={styles.subTitleText}>Average Spend</Text>
            </View>
            <View style={ui.flex1}>
              <Text style={styles.valueText}>{utils.hour2HHmm(this.state.glanceData.averageTime)}</Text>
              <Text style={styles.titleText}>Hr/Week</Text>
              <Text style={styles.subTitleText}>Average Time</Text>
            </View>
          </View>
        </View>
        { this.props.shown &&
          <View style={ui.flex1}>
            { this.state.weekdayData.length > 0 &&
              <View style={styles.statisticView}>
                <Text style={styles.sectionTitle}>Statistics for this week</Text>
                <Text style={styles.statisticTitle}>{this.state.weekdayData[this.state.weekIndex].title}</Text>
                <Svg height={200}>
                  <VictoryChart
                    theme={VictoryTheme.material}
                    animate={animate}
                    height={200}>
                    <VictoryAxis style={axisTheme}/>
                    <VictoryBar
                      barWidth={25}
                      style={this.barTheme(this.state.weekIndex)}
                      data={this.state.weekdayData}
                      events={[{
                        target: "data",
                        eventHandlers: {
                          onPress: () => {
                            return [{
                              target: "data",
                              mutation: (props) => {
                                this.setState({
                                  weekIndex: props.index
                                });
                              }
                            }];
                          }
                        }
                      }]}
                    />
                  </VictoryChart>
                </Svg>
              </View>
            }
            { this.state.monthData.length > 0 &&
              <View style={styles.statisticView}>
                <Text style={styles.sectionTitle}>Past 6 Months</Text>
                <Text style={styles.statisticTitle}>{this.state.monthData[this.state.monthIndex].title}</Text>
                <Svg height={200}>
                <VictoryChart
                  theme={VictoryTheme.material}
                  height={200}>
                    <VictoryAxis style={axisTheme}/>
                    <VictoryBar
                      barWidth={28}
                      data={this.state.monthData}
                      style={this.barTheme(this.state.monthIndex)}
                      events={[{
                        target: "data",
                        eventHandlers: {
                          onPress: () => {
                            return [{
                              target: "data",
                              mutation: (props) => {
                                this.setState({
                                  monthIndex: props.index
                                });
                              }
                            }];
                          }
                        }
                      }]}
                    />
                  </VictoryChart>
                </Svg>
              </View>
            }
          </View>
        }
      </View>
    );
  }
}

const animate = {
  duration: 500,
  onLoad: {
    duration: 200
  }
}

const axisTheme = {
  axis: {stroke: "#fff"},
  grid: {strokeWidth: 0},
  ticks: {size: 0},
  tickLabels: {color: '#666', fontSize: 12, padding: 8},
}

const styles = StyleSheet.create({
  hide: {
    display: 'none'
  },
  glanceView: {
    marginTop: 16,
    marginLeft: 16,
    marginRight: 16,
    marginBottom: 4,
    ...ElevationObject(2),
    borderTopLeftRadius: 6,
    borderTopRightRadius: 6,  
    backgroundColor: 'white'
  },
  glanceTitle: {
    color: '#333',
    fontSize: 16,
    paddingTop: 4,
    paddingLeft: 16,
    paddingBottom: 4,
    backgroundColor: '#F7EDCD'
  },
  overviewRow: {
    paddingTop: 16,
    paddingBottom: 10,
    alignItems: 'center',
    flexDirection: 'row'
  },
  valueText: {
    color: '#000',
    fontSize: 22,
    paddingBottom: 8,
    textAlign: 'center'
  },
  titleText: {
    color: '#333',
    fontSize: 14,
    textAlign: 'center'
  },
  subTitleText: {
    color: '#999',
    fontSize: 11,
    textAlign: 'center'
  },
  statisticView: {
    marginTop: 16,
    paddingTop: 16,
    backgroundColor: 'white'
  },
  sectionTitle: {
    color: '#333',
    fontSize: 16,
    paddingLeft: 16
  },
  statisticTitle: {
    color: '#333',
    fontSize: 14,
    paddingTop: 24,
    paddingBottom: 8,
    textAlign: 'center'
  },
  statisticChart: {
    height: 120
  }
})