{"size": 1906, "ext": "js", "max_stars_repo_path": "site/client/src/container/Occupancy/Occupancy.js", "max_stars_repo_name": "Itisjigar/BuildingManagement", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "site/client/src/container/Occupancy/Occupancy.js", "max_issues_repo_name": "Itisjigar/BuildingManagement", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "site/client/src/container/Occupancy/Occupancy.js", "max_forks_repo_name": "Itisjigar/BuildingManagement", "max_forks_repo_forks_event_min_datetime": "2021-04-28T16:32:19.000Z", "max_forks_repo_forks_event_max_datetime": "2021-04-28T16:32:19.000Z"}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": 1, "avg_line_length": 27.6231884058, "max_line_length": 106, "alphanum_fraction": 0.610703043}
import React, { Component } from "react";
import TopMenu from "../../components/TopMenu/TopMenu";
import LeftMenu from "../../components/LeftMenu/LeftMenu";
import SingleLineChartComponent from "../../components/SingleLineChartComponent/SingleLineChartComponent";
import { Grid } from "semantic-ui-react";
import { connect } from "react-redux";
import { getOccupancyData } from "../../actions/deviceActions";
import PropTypes from "prop-types";

class Occupancy extends Component {
  componentDidMount() {
    this.props.getOccupancyData();
  }

  componentWillReceiveProps(nextProps) {
    this.props.getOccupancyData();
  }

  render() {
    const { occupancyData } = this.props.devicesData;
    let occupancyDataSet;
    // data = Object.keys(climateData).map(item => climateData[item]);
    // console.log(typeof data);
    if (occupancyData === null) {
      occupancyDataSet = null;
    } else {
      if (undefined !== occupancyData && occupancyData.length > 0) {
        occupancyDataSet = Object.keys(occupancyData)
          .sort((a, b) => b - a)
          .map(item => occupancyData[item])
          .sort((a, b) => b - a);
      }
    }
    return (
      <div>
        <TopMenu />
        <Grid>
          <Grid.Column width={2}>
            <LeftMenu />
          </Grid.Column>
          <Grid.Column width={14}>
            <SingleLineChartComponent
              deviceData={occupancyDataSet}
              title={"Occupancy Data"}
              xaxis={"date"}
              line1={"occupancy"}
              y_axis={"Occupancy Number"}
            />
          </Grid.Column>
        </Grid>
      </div>
    );
  }
}

Occupancy.propTypes = {
  getOccupancyData: PropTypes.func.isRequired,
  devicesData: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
  devicesData: state.devices
});

export default connect(
  mapStateToProps,
  { getOccupancyData }
)(Occupancy);
