Card placement

package.json

@@ -29,6 +29,7 @@
  "node-sass-chokidar": "0.0.3",
  "react": "^16.2.0",
  "react-dom": "^16.2.0",
+ "react-redux": "^5.0.6",
  "react-tippy": "^1.2.2",
  "react-transition-group": "^2.2.1",
  "shapefile": "^0.6.6",

src/App.js

@@ -40,6 +40,7 @@ class App extends Component {
  isPlaying: false,
  hoverCountry: null,
  map: null,
+ mapBox: null,
  datums: null,
  modal: true, //set to true before prod
  };
@@ -74,6 +75,7 @@ class App extends Component {
  this.props.lprColors : this.props.niColors;
  const thresholds = (this.state.radioDataset === 'LPR') ?
  this.props.lprThresholds : this.props.niThresholds;
+ const mapBox = this.state.mapBox;
 
  return (
 
@@ -96,21 +98,22 @@ class App extends Component {
  {/*D3 Visualization Section*/}
  <div id="D3-holder"
  className="D3-holder"
- ref={(div) => { this.D3box = div; }}>
+ ref='D3box'>
  <Visualizer
  {...this.state}
  {...this.defaultProps}
  saveAppState={this.setState.bind(this)}
  selectedCategories={selectedCategories}
  selectedDataset={selectedDataset}/>
  </div>
-
  {/*Card Section*/}
  {this.state.hoverCountry && <Card
  radioDataset= {this.state.radioDataset}
  dataYear= {this.state.dataYear} {...this.state.hoverCountry}
  countryImmigrationData={countryImmigrationData}
- selectedCategories={selectedCategories}/>}
+ selectedCategories={selectedCategories}
+ mapBox={mapBox}/>
+ }
 
  {/*Legend & Year Display Section*/}
  <div id="legend-holder" className="legend-holder">

src/Card.js

@@ -2,31 +2,68 @@
 import React, { Component } from 'react';
 import './Card.css';
 
-const cardWidth = 400; //^ how can i access the cardWidth? self.getBoundingClientRect().width?
+let cardBox = {
+ x: null,
+ y: null,
+ width: getWidth(), //**makes first run place card correctly
+ height: null,
+ top: null,
+ right: null,
+ bottom: null,
+ left: null,
+}
+
+let pastCardBox;
+
+function getWidth () { //**makes first run place card correctly
+ if ((window.innerWidth/2)>=400) {
+ return 400;
+ } else if ((window.innerWidth/2)<=100) {
+ return 100;
+ } else return (window.innerWidth/2)
+}
 
 class Card extends Component {
 
  render() {
- const { countryImmigrationData, selectedCategories } = this.props
 
- function xPlacement(left,right,width) { //only handles left side issues //can I get D3 box parameters from somewhere using refs?
- if (left < cardWidth+17) { //if outside box on left
- return right+25; //return left of D3box?
- } else { //if inside box on left
- return left-(cardWidth+25);
+ const { countryImmigrationData, selectedCategories, mapBox } = this.props;
+ console.log('map box',mapBox); //mapBox.__
+ console.log('past card box',pastCardBox);
+ console.log('card box',cardBox); //cardBox.__
+
+ function xPlacement(countryLeft,countryRight,countryWidth) {
+ if (!cardBox.x) { return mapBox.left } //**temporary rule
+
+ //REAL RULES
+ if (countryLeft-mapBox.left>cardBox.width+25) {
+ return countryLeft-(cardBox.width+25)
+ } else if (countryLeft-mapBox.left<cardBox.width+25) {
+ if (mapBox.right-countryRight>cardBox.width) {
+ return countryRight+25
+ } else return mapBox.left
  }
  }
 
- function yPlacement(top,bottom,height) { //only handles top issues
- if (top < 70) {
- return top+(height/2); //return top of D3box?
- } else {
- return top;
+ function yPlacement(countryTop,countryBottom,countryHeight) {
+ if (!cardBox.x) { return mapBox.y } //**temporary rule
+
+ //REAL RULES
+ if (countryTop > mapBox.top) { //if country is below mapbox put it at country height
+ if (countryTop + cardBox.height > mapBox.bottom) { //and if country is too close to the bottom
+ return mapBox.bottom-cardBox.height
+ } else return countryTop
+ } else if (countryTop < mapBox.top) { //if country is above mapbox put it at mapbox top
+ if (countryTop + cardBox.height > mapBox.bottom) { //and if country is too close to the bottom
+ return mapBox.bottom-cardBox.height
+ }
+ return mapBox.top
  }
  }
 
  return(
  <div className='card-holder'
+ ref={ref => this.card = ref}
  style={{top: yPlacement(this.props.yTop,this.props.yBottom,this.props.yHeight),
  left: xPlacement(this.props.xLeft,this.props.xRight,this.props.xWidth)}}>
  {Object.keys(countryImmigrationData).length === 0 ?
@@ -55,22 +92,22 @@ class Card extends Component {
  <div>
  <p className={this.embolden('immediateRelative')}
  >Immediate Relative:
- {this.formatNumber(countryImmigrationData.immediateRelative)}</p>
+ {" "+this.formatNumber(countryImmigrationData.immediateRelative)}</p>
  <p className={this.embolden('familySponsored')}
  >Family-Sponsored:
- {this.formatNumber(countryImmigrationData.familySponsored)}</p>
+ {" "+this.formatNumber(countryImmigrationData.familySponsored)}</p>
  <p className={this.embolden('refugeeAsylee')}
  >Refugee & Asylee:
- {this.formatNumber(countryImmigrationData.refugeeAsylee)}</p>
+ {" "+this.formatNumber(countryImmigrationData.refugeeAsylee)}</p>
  <p className={this.embolden('employmentBased')}
  >Employment-Based:
- {this.formatNumber(countryImmigrationData.employmentBased)}</p>
+ {" "+this.formatNumber(countryImmigrationData.employmentBased)}</p>
  <p className={this.embolden('diversityLottery')}
  >Diversity Lottery:
- {this.formatNumber(countryImmigrationData.diversityLottery)}</p>
+ {" "+this.formatNumber(countryImmigrationData.diversityLottery)}</p>
  <p className={this.embolden('otherLPR')}
  >Other:
- {this.formatNumber(countryImmigrationData.otherLPR)}</p>
+ {" "+this.formatNumber(countryImmigrationData.otherLPR)}</p>
  </div>: <div></div>}
  </div>
  <div className='card-data ni-card-data'
@@ -79,19 +116,19 @@ class Card extends Component {
  <div>
  <p className={this.embolden('temporaryVisitor')}
  >Temporary Visitor:
- {this.formatNumber(countryImmigrationData.temporaryVisitor)}</p>
+ {" "+this.formatNumber(countryImmigrationData.temporaryVisitor)}</p>
  <p className={this.embolden('temporaryWorker')}
  >Temporary Worker:
- {this.formatNumber(countryImmigrationData.temporaryWorker)}</p>
+ {" "+this.formatNumber(countryImmigrationData.temporaryWorker)}</p>
  <p className={this.embolden('studentExchange')}
  >Student & Exchange:
- {this.formatNumber(countryImmigrationData.studentExchange)}</p>
+ {" "+this.formatNumber(countryImmigrationData.studentExchange)}</p>
  <p className={this.embolden('diplomatRep')}
  >Diplomat & Representative:
- {this.formatNumber(countryImmigrationData.diplomatRep)}</p>
+ {" "+this.formatNumber(countryImmigrationData.diplomatRep)}</p>
  <p className={this.embolden('otherNI')}
  >Other:
- {this.formatNumber(countryImmigrationData.otherNI)}</p>
+ {" "+this.formatNumber(countryImmigrationData.otherNI)}</p>
  </div>: <div></div>}
  </div>
  {countryImmigrationData.countryNote && <div className='card-notes'>
@@ -113,6 +150,12 @@ class Card extends Component {
  return 'counted-category';
  } else return '';
  }
+
+ componentDidMount(previousProps, previousState) {
+ pastCardBox = cardBox;
+ cardBox = this.card.getBoundingClientRect();
+ }
+
 }
 
 export default Card;

src/Card.scss

@@ -5,6 +5,7 @@
  min-width: 100px;
  border: 2px solid black;
  background-color: white;
+ min-height: 129px;
 }
 
 //Card No Data

src/Visualizer.js

@@ -15,6 +15,25 @@ class Visualizer extends Component {
  return false;
  }
 
+ componentDidMount() {
+ window.addEventListener('resize', this.setAndSaveMapBox.bind(this));
+ this.setAndSaveMapBox();
+ }
+
+ setAndSaveMapBox() {
+ const d3Holder = document.getElementById('D3-holder');
+ const newMapWidth = d3Holder.offsetWidth -2;
+ const newMapHeight = d3Holder.offsetHeight -2;
+ const newMapBox = d3Holder.getBoundingClientRect();
+
+ d3.select('#immigration-svg').attr('width', newMapWidth);
+ d3.select('#immigration-svg').attr('height', newMapHeight);
+
+ this.props.saveAppState({
+ mapBox: newMapBox,
+ });
+ }
+
  componentWillReceiveProps(nextProps) {
  const {map, selectedDataset, radioDataset, selectedCategories, modal} = nextProps;
 
@@ -38,7 +57,7 @@ class Visualizer extends Component {
 
  render() {
  return (
- <div id="d3-mount-point" ref={(elem) => { this.div = elem; }} />
+ <div id="d3-mount-point" ref={(elem) => { this.d3box = elem; }} />
  );
  }
 }
@@ -128,7 +147,7 @@ function setInitialFillAndBindings(g, geoPath,selectedDataset, saveState) {
 
 function handleMouseover(d, saveState, countryDOM) {
  const elementBox = countryDOM.getBoundingClientRect();
- console.log(elementBox); //^ remove before prod
+ console.log('country box',d.id, elementBox); //^ remove before prod
  saveState({hoverCountry: {
  id: d.id,
  xLeft: elementBox.left,
@@ -157,9 +176,4 @@ function fillChoropleth(d,radioDataset,worldSelectedTotal) {
  }
 }
 
-window.addEventListener('resize',function() {
- d3.select('#immigration-svg').attr('width', document.getElementById('D3-holder').offsetWidth-2);
- d3.select('#immigration-svg').attr('height', document.getElementById('D3-holder').offsetHeight-2);
-})
-
 export default Visualizer;