Statistics page

Statistics.jsx

import React, { Component } from "react";
import { connect } from "react-redux";
import { Row, Col } from "antd";
import ChartWrapper from "../../../containers/Charts/chart.style";
import Async from "../../../helpers/asyncComponent";
import LayoutContentWrapper from "../../../components/utility/layoutWrapper";
import LayoutContent from "../../../components/utility/layoutContent";
import myAppActions from "../../redux/actions";
import LeafletMap from "../../../components/map/LeafletMap";
import basicStyle from "../../../config/basicStyle";
import IntlMessages from "../../../components/utility/intlMessages";
import WidgetsWrapper from "../../../containers/Home/widgets-wrapper";
import NumberDisplayWidget from "../Widgets/numberDisplayWidget";
import nprogress from "nprogress";
import widgetA from "../../../containers/Home/sticker/sticker-widget";
import FrappeChart from "frappe-charts/dist/frappe-charts.min.esm";
import "frappe-charts/dist/frappe-charts.min.css";
import Box from "../../../components/utility/box";
import ContentHolder from "../../../components/utility/contentHolder";

const { updateUserStatistics } = myAppActions;
const LayoutWrapper = props => (
  <ChartWrapper>
    <Async
      load={import(/* webpackChunkName: "ReactChart2-layoutWrapper" */ "../../../components/utility/layoutWrapper")}
      componentProps={props}
    />
  </ChartWrapper>
);

const PageHeader = props => (
  <Async
    load={import(/* webpackChunkName: "ReactChart2-pageHeader" */ "../../../components/utility/pageHeader")}
    componentProps={props}
  />
);

const basicConfig = {
  height: 250,
  format_tooltip_x: d => (d + "").toUpperCase(),
  format_tooltip_y: d => d + " pts"
};


const basicData = {
  labels: [
    "12am-3am",
    "3am-6am",
    "6am-9am", 
    "9am-12pm",
    "12pm-3pm",
    "3pm-6pm",
    "6pm-9pm",
    "9pm-12am"
  ],

  datasets: [
    {
      title: "Some Data",
      color: "light-blue",
      values: [25, 40, 30, 35, 8, 52, 17, -4]
    },
    {
      title: "Another Set",
      color: "violet",
      values: [25, 50, -10, 15, 18, 32, 27, 14]
    },
    {
      title: "Yet Another",
      color: "blue",
      values: [15, 20, -3, -15, 58, 12, -17, 37]
    }
  ]
};

const pieChart = {
  header: <IntlMessages id="stats.whoYouFlyWith" />,
  title: "",
  parent: "#whoYouFlyWith",
  parentId: "#whoYouFlyWith",
  type: "pie",
  data: basicData,
  ...basicConfig
};


class UserStatistics extends Component {
  componentDidMount() {
    new FrappeChart(pieChart);
  }

  componentWillMount() {
    nprogress.start();
    this.props.updateUserStatistics(1);
  }

  componentWillUpdate(nextProps, nextState)
  {
    debugger
  }

  componentDidUpdate(prevProps, prevState) {
    debugger
    console.log(this.props);

    
  }

  render() {
    const { rowStyle, colStyle, gutter } = basicStyle;
    
    debugger
      return (
        <LayoutWrapper className="isoMapPage">
          <PageHeader>My Travel Statistics</PageHeader>
          <Row style={rowStyle} gutter={0} justify="start">
            <Col md={6} sm={12} xs={24} style={colStyle}>
              <WidgetsWrapper>
                <NumberDisplayWidget
                  label={<IntlMessages id="stats.timeInAir" />}
                  number={
                    <IntlMessages
                      id="stats.timeInAirDynamic"
                      values={{
                        minutes: this.props.statistics.my_total_flying_minutes
                      }}
                    />
                  }
                  details={<IntlMessages id="stats.timeInAirDesc" />}
                  fontColor="#F75D81"
                />
              </WidgetsWrapper>
            </Col>
            <Col md={6} sm={12} xs={24} style={colStyle}>
              <WidgetsWrapper>
                <NumberDisplayWidget
                  label={<IntlMessages id="stats.totalDistance" />}
                  number={
                    <IntlMessages
                      id="stats.totalDistanceDynamic"
                      values={{
                        distance: Math.floor(
                          this.props.statistics.total_distance_travelled
                        ),
                        distanceUnit: "km"
                      }}
                    />
                  }
                  details={<IntlMessages id="stats.totalDistanceDesc" />}
                  fontColor="#F75D81"
                />
              </WidgetsWrapper>
            </Col>
            <Col md={6} sm={12} xs={24} style={colStyle}>
              <WidgetsWrapper>
                <NumberDisplayWidget
                  label={<IntlMessages id="stats.nbOfFlightsFlown" />}
                  number={this.props.statistics.number_of_flights_taken}
                  details={""}
                  fontColor="#F75D81"
                />
              </WidgetsWrapper>
            </Col>
          </Row>

          <Row style={rowStyle} gutter={0} justify="start">
            <Col md={6} sm={12} xs={24} style={colStyle}>
              <WidgetsWrapper>
                {/* Sticker Widget */}
                <widgetA
                  number={<IntlMessages id="widget.widgetA1.number" />}
                  text={<IntlMessages id="widget.widgetA1.text" />}
                  icon="ion-email-unread"
                  fontColor="#ffffff"
                  bgColor="#7266BA"
                />
              </WidgetsWrapper>
            </Col>

            <Col md={6} sm={12} xs={24} style={colStyle}>
              <WidgetsWrapper>
                {/* Sticker Widget */}
                <widgetA
                  number={<IntlMessages id="widget.widgetA1.number" />}
                  text={<IntlMessages id="widget.widgetA2.text" />}
                  icon="ion-android-camera"
                  fontColor="#ffffff"
                  bgColor="#42A5F6"
                />
              </WidgetsWrapper>
            </Col>

            <Col md={6} sm={12} xs={24} style={colStyle}>
              <WidgetsWrapper>
                {/* Sticker Widget */}
                <widgetA
                  number={<IntlMessages id="widget.widgetA1.number" />}
                  text={<IntlMessages id="widget.widgetA3.text" />}
                  icon="ion-chatbubbles"
                  fontColor="#ffffff"
                  bgColor="#7ED320"
                />
              </WidgetsWrapper>
            </Col>

            <Col md={6} sm={12} xs={24} style={colStyle}>
              <WidgetsWrapper>
                {/* Sticker Widget */}
                <widgetA
                  number={<IntlMessages id="widget.widgetA1.number" />}
                  text={<IntlMessages id="widget.widgetA4.text" />}
                  icon="ion-android-cart"
                  fontColor="#ffffff"
                  bgColor="#F75D81"
                />
              </WidgetsWrapper>
            </Col>
          </Row>
          <Row style={rowStyle} gutter={gutter} justify="start">
            <Col md={12} xs={24} style={colStyle}>
              <Box title={pieChart.header}>
                <ContentHolder>
                  <div id={pieChart.parentId} />
                </ContentHolder>
              </Box>
            </Col>
          </Row>
        </LayoutWrapper>
      );
    
  }
}

export default connect(
  state => ({
    statistics: state.myApp.statistics,
    ...state.Auth.toJS()
  }),
  { updateUserStatistics }
)(UserStatistics);