population styling

src/App.js

@@ -15,7 +15,7 @@ class App extends Component {
  sillyData: [],
  lastUpdate: "Updating...",
  mode: "Light",
- version: "v0.2-beta"
+ version: "v0.2-dev"
  };
 
  loadData = async () => {
@@ -102,7 +102,9 @@ class App extends Component {
  />
  <Route
  path="/pop"
- render={props => <Population popData={this.state.popData} />}
+ render={props => (
+ <Population popData={this.state.popData} single={true} />
+ )}
  />
  <Route
  path="/silly"

src/components/Population.jsx

@@ -3,21 +3,15 @@ import { Doughnut } from "react-chartjs-2";
 import AnimatedNumber from "react-animated-number";
 
 class Population extends Component {
- getPopulationData(arg) {
+ getTotalPopulationData(arg) {
  // first we need to get the data
  const { popData } = this.props;
  // if we're still loading, slap a huge loading for everything
  if (popData.totalPopulation === undefined) {
  return 0;
  }
 
- // send total pop if it's total
- if (arg === "total") {
- return popData.totalPopulation;
- }
-
- // send the district's data
- return popData.populationByDistrict[arg];
+ return popData.totalPopulation;
  }
 
  getPopulationChartData() {
@@ -113,13 +107,22 @@ class Population extends Component {
  formatValue = value => value.toFixed(0);
  duration = 500;
 
+ styling() {
+ switch (this.props.single) {
+ case true:
+ return 135;
+ default:
+ return 130;
+ }
+ }
+
  render() {
  return (
  <div>
  <h1>Current Population</h1>
  <h4>
  <AnimatedNumber
- value={this.getPopulationData("total")}
+ value={this.getTotalPopulationData()}
  formatValue={this.formatValue}
  duration={this.duration}
  />{" "}
@@ -135,6 +138,7 @@ class Population extends Component {
  boxWidth: 20
  }
  }}
+ height={this.styling()}
  options={{
  tooltips: {
  mode: "nearest",