Exercise 3

Import two pre-made component charts...

import Chart from 'module-nicar2019-chart';
import Map from 'module-nicar2019-map';

... and add them to the component:

chart = new Chart()
map = new Map()

Add charts to componentDidMount...

this.map
  .selection('#map')
  .draw();
this.chart
  .selection('#chart')
  .draw();

Let's add some state:

state = {
  selectedState: null,
}



.props({ highlightState: this.state.selectedState })

... and use it in our charts

this.map
  .selection('#map')
  .props({
    highlightState: this.state.selectedState,
  })
  .draw();

this.chart
  .selection('#chart')
  .props({ filterState: this.state.selectedState })
  .draw();

Let's update our charts:

componentDidMount() {
  this.map
    .selection('#map')
    .props({
      highlightState: this.state.selectedState,
      onClick: (selectedState) => {
        this.setState({ selectedState });
      },
    })
    .draw();
  this.chart
    .selection('#chart')
    .props({ filterState: this.state.selectedState })
    .draw();
}

componentDidUpdate() {
  this.map
    .props({ highlightState: this.state.selectedState })
    .draw();

  this.chart
    .props({ filterState: this.state.selectedState })
    .draw();
}

Put a conditional in to reset our chart:

onClick: (selectedState) => {
  if (this.state.selectedState === selectedState) {
    this.setState({ selectedState: null });
  } else {
    this.setState({ selectedState });
  }
},

nExt: Takeaway