First pass at popovers.

package.json

@@ -35,6 +35,7 @@
     "font-awesome": "^4.7.0",
     "immutable": "^3.8.2",
     "lodash": "^4.17.5",
+    "mapbox-gl": "^0.49.0",
     "node-sass": "^4.7.2",
     "nodemon": "^1.15.1",
     "normalize.css": "^8.0.0",

src/index.scss

@@ -16,6 +16,7 @@
 @import './defaults/button';
 @import './shared/ActionButton/_styles';
 @import './shared/Header/_styles';
+@import './shared/components/DistrictInfo/_styles';
 
 // Pages
 @import './views/HomePage/_styles';

src/shared/components/DistrictInfo/DistrictInfo.js

@@ -0,0 +1,105 @@
+import React, {PureComponent} from 'react';
+
+export default class DistrictInfo extends PureComponent {
+
+
+  renderFacilityStats(facilityStats) {
+    return (
+      <div className="facilityStats">
+        <p className="statsHeader">Whistles by Facility Type</p>
+        <p className="statsEntry">Hospitals: {facilityStats.hospital}</p>
+        <p className="statsEntry">Extended Care Facilities: {facilityStats.extended_care}</p>
+        <p className="statsEntry">Long-term Care Facilities: {facilityStats.long_term_care}</p>
+      </div>
+    )
+  }
+
+  renderTypeStats(typeStats) {
+    return (
+      <div className="typeStats">
+        <p className="statsHeader">Whistles by Reporter Type</p>
+        <p className="statsEntry">RN: {typeStats.rn}</p>
+        <p className="statsEntry">LPN: {typeStats.lpn}</p>
+        <p className="statsEntry">CNA: {typeStats.cna}</p>
+        <p className="statsEntry">Other: {typeStats.other}</p>
+      </div>
+    )
+  }
+
+  renderStatsBlock(stats) {
+    if (!stats || stats === 'null') return <p className="whistleTotals">No recorded whistles.</p>;
+
+    if (typeof stats === "string") {
+      stats = JSON.parse(stats);
+    }
+    if (!stats.facility_type || !stats.type) return null;
+
+    return (
+      <div className="statsBlock">
+        <p className="whistleTotals">{stats.type.total} Whistle{stats.type.total > 1 && "s"}</p>
+        { stats.facility_type && this.renderFacilityStats(stats.facility_type) }
+        { stats.type && this.renderTypeStats(stats.type) }
+      </div>
+    )
+  }
+
+  renderFacebook(social) {
+    const link = `https://www.facebook.com/${social.id}`;
+    return <a key={`${social.type}_${social.id}`} href={link} target="_blank"><img className="socialIcon" src="/images/facebook_logo.png" alt="Facebook link"/></a>
+  }
+
+  renderYouTube(social) {
+    const link = `https://www.youtube.com/user/${social.id}`;
+    return <a key={`${social.type}_${social.id}`} href={link} target="_blank"><img className="socialIcon" src="/images/youtube_logo.png" alt="YouTube link"/></a>
+  }
+
+  renderTwitter(social) {
+    const link = `https://twitter.com/${social.id}`;
+    return <a key={`${social.type}_${social.id}`} href={link} target="_blank"><img className="socialIcon" src="/images/twitter_logo.png" alt="Twitter link"/></a>
+  }
+
+  renderSocialBlock(social) {
+    if (!social) return;
+
+    if (typeof social === "string") {
+      social = JSON.parse(social);
+    }
+    return (
+      <div className="social-block">
+        { social.map(s => {
+          if (s.type === 'Facebook') return this.renderFacebook(s);
+          else if (s.type === 'YouTube') return this.renderYouTube(s);
+          else if (s.type === 'Twitter') return this.renderTwitter(s);
+          else return null;
+        })}
+      </div>
+    )
+  }
+
+  renderStateDistrictHeader(state, district) {
+    if (district === '00') return <p>{state} - At Large</p>
+    else return <p>{state} - {district}</p>
+  }
+
+  render() {
+    const {info} = this.props;
+    const properties = info.properties;
+    console.log(properties)
+
+    return (
+      <div className="districtInfo">
+        <div className="header">
+          { this.renderStateDistrictHeader(properties.stateAbbr, properties.NAME) }
+          { properties.url &&
+            <p>Representative: <a href={properties.url} target="_blank">{properties.rep}</a></p>
+          }
+          { !properties.url &&
+            <p>Representative: {properties.rep}</p>
+          }
+        </div>
+        { this.renderStatsBlock(properties.stats) }
+        { this.renderSocialBlock(properties.social) }
+      </div>
+    );
+  }
+}

src/shared/components/DistrictInfo/_styles.scss

@@ -0,0 +1,38 @@
+.districtInfo p {
+  margin-top: 5px;
+  margin-bottom: 5px;
+  font-size: .8em;
+}
+
+.header {
+  margin-bottom: 12px;
+}
+
+.socialIcon {
+  max-width: 36px;
+  margin: 12px;
+  margin-bottom: 0;
+}
+
+.socialIcon:first-child {
+  margin-left: 0;
+}
+
+p.whistleTotals {
+  font-style: italic;
+  font-size: 1em;
+  margin-bottom: 12px;
+}
+
+.statsHeader {
+  font-style: italic;
+}
+
+.statsEntry {
+  margin-left: 12px;
+  font-size: .5em;
+}
+
+.statsEntry:last-child {
+  margin-bottom: 16px;
+}

src/shared/components/ReactMapGl/ReactMapGl.js

@@ -1,5 +1,7 @@
 import React, { Component } from 'react';
-import ReactMapGL from 'react-map-gl';
+import ReactMapGL, { Popup } from 'react-map-gl';
+
+import DistrictInfo from '../DistrictInfo/DistrictInfo';
 
 // shared
 import geojson from 'shared/maps/geo.json';
@@ -23,7 +25,8 @@ class ReactMapGl extends Component {
       bearing: 0,
       pitch: 0,
       zoom: 3,
-    }
+    },
+    popupInfo: null
   };
 
   _loadData = () => {
@@ -68,15 +71,43 @@ class ReactMapGl extends Component {
     window.removeEventListener('resize', this._resize);
   }
 
+  _renderPopup() {
+
+    const {popupInfo, latitude, longitude} = this.state;
+
+    return popupInfo && (
+      <Popup tipSize={5}
+        anchor="top"
+        latitude={latitude}
+        longitude={longitude}
+        captureClick={true}
+        onClose={() => this.setState({popupInfo: null})} >
+        <DistrictInfo info={popupInfo} />
+      </Popup>
+    );
+  }
+
+  _onClick = event => {
+    const {features} = event;
+    const popupInfo = features && features.find(f => f.layer.id === 'data');
+    this.setState({popupInfo,
+                   latitude: event.lngLat[1],
+                   longitude: event.lngLat[0]});
+  };
+
   render() {
     return (
       <ReactMapGL
         {...this.state.viewport}
         mapStyle={this.state.mapStyle}
         mapboxApiAccessToken={MAPBOX_TOKEN}
         onLoad={this._loadData}
-        onViewportChange={(viewport) => this.setState({viewport})}
-      />
+        onClick={this._onClick}
+        onViewportChange={(viewport) => this.setState({viewport})}>
+
+        {this._renderPopup()}
+
+      </ReactMapGL>      
     );
   }
 }

src/shared/components/ReactMapGl/getData.js

@@ -1,4 +1,5 @@
 import getPropertiesFromStates from 'shared/utils/getPropertiesFromStates';
+import numToAbbr from 'shared/utils/numToAbbr';
 
 const getData = ({ geojson, states, getPercentile, defaultValue = 0 }) => {
   geojson.features = geojson.features.map(feature => {
@@ -7,17 +8,16 @@ const getData = ({ geojson, states, getPercentile, defaultValue = 0 }) => {
     // 00 indicates only one district exists in a state in above states variable
     const districtNum = feature.properties.NAME === "" ? 0 : feature.properties.NAME;
     const properties = getPropertiesFromStates(states, stateNum, districtNum);
-
-    const percentile = properties ? getPercentile(properties) : defaultValue;
+    const abbr = numToAbbr(stateNum);
+    const percentile = properties ? getPercentile(properties, metadata) : defaultValue;
 
     return {
       ...feature,
       properties: {
         ...feature.properties,
         percentile,
-        // uncomment line below to use random data
-        // instead of real data
-        // percentile: Math.random(),
+        stats: properties,
+        stateAbbr: abbr
       }
     };
   });

src/views/MapPage/_styles.scss

@@ -1,3 +1,3 @@
 .test {
   color: blue;
-}
+}