app.js file for trail compare app using django-react, axios, and aws api gateway, chart-js

trail_compare_app.js

import React, { Component } from 'react'
import Select from 'react-select'
import axios from 'axios'
import {Bar} from 'react-chartjs-2'
import './App.css'

export default class App extends Component {

  constructor(props){
    super(props)
    this.state = {
      selectOptions : [],
      selectedOption: []
    }
  }

  async getOptions(){
    const res = await axios.get('https://y########.execute-api.######.amazonaws.com/prod/GET/')
    const data = res.data;
    const options = data.map(d => ({
      "value" : d.challenge_rank,
      "label" : d.trail_name
    }))

    this.setState({selectOptions: options})

  }

  handleChange(e){
    this.setState({
      selectedOption:e || []
    })
  }

  componentDidMount(){
    this.getOptions()
  }

  render() {
    const Data = {
        labels: this.state.selectedOption.map(v => v.label),
        datasets: [
          {
            label: 'Trail Compare',
            data: this.state.selectedOption.map(d => d.value),
            backgroundColor: function (data) {
              var i = 0;
              var val = Data.datasets[0].data;
              var backgroundColor = [];
              for (i = 0; i < val.length; i++) {
                if (val[i] >= 19) {
                  backgroundColor.push('rgba(102,66,41)')
                } else if (val[i] >= 17) {
                  backgroundColor.push('rgba(152, 117, 84)')
                } else if (val[i] >= 15) {
                  backgroundColor.push('rgba(185,156,107)')
                } else if (val[i] >= 11) {
                  backgroundColor.push('rgba(134, 150, 97)')
                } else if (val[i] >= 8) {
                  backgroundColor.push('rgba(167, 182, 136)')
                } else if (val[i] < 8) {
                  backgroundColor.push('rgba(199, 203, 130)')
                }
              }//end for loop
              return backgroundColor;
            },//end backgroundColor function
            barPercentage: 0.4,
          }
        ]//end of datasets
      }//end of Data

    const customStyles = {
      control: (base, state) => ({
        ...base,
        background: "#373940",
        // match with the menu
        borderRadius: state.isFocused ? "3px 3px 0 0" : 3,
        // Overwrittes the different states of border
        borderColor: state.isFocused ? "#a9a389" : "#0e0e13",
        // Removes weird border around container
        boxShadow: state.isFocused ? null : null,
        "&:hover": {
          // Overwrites the different states of border
          borderColor: state.isFocused ? "#a39171" : "#0e0e13"
        }
      }),
      input: base => ({
        ...base,
        color: "#fff"
      }),
      option: (base, state) => ({
        ...base,
        backgroundColor: state.isSelected ? "#a39171" : "#a39171",
        ':active': {
          backgroundColor: state.isSelected ? "#d8c99b" : "#d8c99b"
        }
      }),
      placeholder: styles => ({
        ...styles,
        fontSize: 16,
        fontFamily: 'SF-regular',
        color: 'white',
      }),
      menu: base => ({
        ...base,
        // override border radius to match the box
        borderRadius: 0,
        // kill the gap
        marginTop: 0
      }),
      menuList: base => ({
        ...base,
        // kill the white space on first and last option
        background: "#a39171",
        padding: 0
      }),
    };

    return (
      <div style={{marginLeft: 10, marginRight: 10}}>
        <style>{'body { background-color: black; }'}</style>
        <title>Trail Compare</title>
        <h1 style={{color: "#ffffff"}}>Trail Compare</h1>
        <Select
          styles={customStyles}
          placeholder={"Select trails one at a time, or begin typing..."}
          options={this.state.selectOptions}
          onChange={this.handleChange.bind(this)}
          isMulti
        />
        <br></br>
        <br></br>
        <Bar
          data={Data}
          options = {{
            tooltips: {
              enabled: true,
              callbacks: {
                label: function(tooltipItem, data) {
                  var desc = "";
                  var val = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
                  if (val < 8) {
                    desc = "Easy"
                  } else if (val >= 19) {
                     desc = "Very Difficult"
                  }
                  else if (val >= 17) {
                     desc = "Difficult"
                  }
                  else if (val >= 15) {
                     desc = "Intermediate-Difficult"
                  }
                  else if (val >= 11) {
                     desc = "Intermediate"
                  }
                  else if (val >= 8) {
                     desc = "Easy-Intermediate"
                  }
                  return desc + ' - ' + val;
                }//end of label function
              }//end of callbacks
            },//end of tooltips
            scales: {
              xAxes: [{
                //barPercentage: 0.3,

                gridLines: {
                  color: "transparent",
                  display:true,
                  drawBorder: true,
                  zeroLineColor: "#fff",
                  zeroLineWidth: 1
                },
                ticks: {
                  beginAtZero:true,
                  fontColor: "#fff"
                }
              }],
              yAxes: [{
                gridLines: {
                  color: "#444444",
                  display: true,
                  drawBorder: false,
                  zeroLineColor: "#ccc",
                  zeroLineWidth: 1
                },
                ticks: {
                 beginAtZero:true,
                 fontColor: "#fff"
                }
              }]//end of yAxes
            },//end of scales
            maintainAspectRatio:true,
            legend: {display: false},
          }}//end options
        />
                <br></br>
        <ul style={{listStyleType:"none"}}>
          <li>
              <div className="input-color">
                  <input type="text" value="Easy (rank less than 8)"/>
                  <div className="color-box" style={{backgroundColor: 'rgba(199, 203, 130)'}}></div>
              </div>
          </li>
          <li>
              <div className="input-color">
                  <input type="text" value="Easy-Intermediate (rank 8-10)"/>
                  <div className="color-box" style={{backgroundColor: 'rgba(167, 182, 136)'}}></div>
              </div>
          </li>
          <li>
              <div className="input-color">
                  <input type="text" value="Intermediate (rank 11-14)" />
                  <div className="color-box" style={{backgroundColor: 'rgba(134, 150, 97)'}}></div>
              </div>
          </li>
          <li>
              <div className="input-color">
                  <input type="text" value="Intermediate-Difficult (rank 15-16)"/>
                  <div className="color-box" style={{backgroundColor: 'rgba(185,156,107)'}}></div>
              </div>
          </li>
          <li>
              <div className="input-color">
                  <input type="text" value="Difficult (rank 17-18)"/>
                  <div className="color-box" style={{backgroundColor: 'rgba(152, 117, 84)'}}></div>
              </div>
          </li>
          <li>
              <div className="input-color">
                  <input type="text" value="Very Difficult (rank 19 and above)"/>
                  <div className="color-box" style={{backgroundColor: 'rgba(102,66,41)'}}></div>
              </div>
          </li>
        </ul>

      </div>
    )
  }
}