{"size": 2055, "ext": "js", "max_stars_repo_path": "src/stateful/molecules/CensusInfo.js", "max_stars_repo_name": "LDFLK/mylocal", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/stateful/molecules/CensusInfo.js", "max_issues_repo_name": "LDFLK/mylocal", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/stateful/molecules/CensusInfo.js", "max_forks_repo_name": "LDFLK/mylocal", "max_forks_repo_forks_event_min_datetime": "2021-08-17T06:56:32.000Z", "max_forks_repo_forks_event_max_datetime": "2021-08-17T06:56:32.000Z"}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": 1, "avg_line_length": 27.7702702703, "max_line_length": 73, "alphanum_fraction": 0.6433090024}
import {Component} from 'react';

import GIGServer from 'core/GIGServer.js';
import {CENSUS_TABLE_SPAN_INFO} from 'constants/CensusConstants.js';
import {getCensusLabel} from 'core/Census.js';
import CensusDescription from 'nonstate/atoms/CensusDescription.js';
import Loader from 'nonstate/atoms/Loader.js';
import Reference from 'nonstate/atoms/Reference.js';
import PieChart from 'nonstate/molecules/PieChart.js';
import Pyramid from 'nonstate/molecules/Pyramid.js';

import './CensusInfo.css';


export default class CensusInfo extends Component {
  constructor(props) {
    super(props);
    this.state = {dataMap: undefined};
  }

  async componentDidMount() {
    const {tableName, entityID} = this.props;
    try {
      const dataMap = await GIGServer.getCensus(tableName, entityID);
      this.setState({dataMap});
    } catch (err) {}
  }

  render() {
    if (!this.state?.dataMap) {
      return <Loader />;
    }
    return this.renderWithData();
  }

  renderWithData() {
    const {tableName, iTable} = this.props;
    const {dataMap} = this.state;

    let ChartComponent;
    if (CENSUS_TABLE_SPAN_INFO[tableName]) {
        ChartComponent = Pyramid;
    } else {
        ChartComponent = PieChart;
    }

    const valueIsPercent =
      (tableName === 'communication_items_owned_by_household');

    return (
      <div
        key={`div-census-info-${iTable}-${tableName}`}
        className="div-census-info"
      >
        <h4 className="h4-census-label">{getCensusLabel(tableName)}</h4>
        <Reference
          title="Data Source"
          label="Department of Census and Statistics, Sri Lanka"
          link="http://www.statistics.gov.lk/"
        />
        {valueIsPercent ? null : <CensusDescription dataMap={dataMap} />}
        <div className="div-census-chart-component">
          <ChartComponent
            dataMap={dataMap}
            tableName={tableName}
            ageKeys={CENSUS_TABLE_SPAN_INFO[tableName]}
            valueIsPercent={valueIsPercent}
          />
        </div>
      </div>
    );
  }
}
