IE changes complete.

gatsby-node.js

@@ -1,20 +1,24 @@
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const path = require(`path`)
 
-exports.modifyWebpackConfig = function (config, env) {
-  config.config.plugin('inventory-copy-plugin', CopyWebpackPlugin, [[
-    { from: path.join(__dirname, 'src/pages/data.json') , to: path.join(__dirname, 'public/data.json')}
-  ]]);
-  return config;
-};
-
 exports.modifyWebpackConfig = ({ config, stage }) => {
   if (stage === "build-html") {
     config.loader("null", {
       test: /datamaps/,
       loader: "null-loader",
     })
   }
+  switch (stage) {
+    case "build-javascript":
+      const app = config._config.entry.app
+      config._config.entry.app = [require.resolve("./polyfill"), app]
+
+      break
+    default:
+      break
+  }
+
+  return config;
 };
 
 const { createFilePath } = require(`gatsby-source-filesystem`)

package.json

@@ -15,6 +15,8 @@
   },
   "dependencies": {
     "babel-eslint": "^8.0.1",
+    "babel-polyfill": "^6.26.0",
+    "bluebird": "^3.5.1",
     "chart.js": "1.1.1",
     "classnames": "^2.2.5",
     "copy-webpack-plugin": "^4.2.0",

polyfill.js

@@ -0,0 +1,13 @@
+// fetch() polyfill for making API calls.
+require("whatwg-fetch");
+require("babel-polyfill")
+var Promise = require("bluebird");
+
+Promise.config({
+  longStackTraces: true,
+  warnings: true // note, run node with --trace-warnings to see full stack traces for warnings
+})
+
+// Object.assign() is commonly used with React.
+// It will use the native implementation if it's present and isn't buggy.
+Object.assign = require("object-assign");

src/components/ApiUsage.jsx

@@ -5,7 +5,6 @@ import bp from '../constants/breakpoints'
 import Table from './Table'
 import { API_LINK, API_NAME } from '../constants/api'
 import {default as $} from 'jquery'
-import 'whatwg-fetch'
 
 type tPROPS = {
     accessSinceLaunch: string,
@@ -121,12 +120,12 @@ const ApiUsage = (props:tPROPS) => {
         graphData.table = data.table
 
         var dataz = [],
-              minTime = null,
-              maxTime = null,
-              values = [],
-              max = null,
-              min = null,
-              that = this;
+          minTime = null,
+          maxTime = null,
+          values = [],
+          max = null,
+          min = null,
+          that = this;
 
         data.stats.forEach(function (stat) {
           graphData.labels.push(stat.day)
@@ -189,13 +188,12 @@ const ApiUsage = (props:tPROPS) => {
 
     fetchStats () {
       var that = this
-      fetch(`${API_LINK}/usage.json?prefix=${this.state.prefix}`)
-        .then( response => {
-          response.json()
-        .then( data => 
+      fetch(API_LINK + '/usage.json?prefix=' + this.state.prefix)
+        .then(function (response) {
+          return response.json()
+        }).then(function (data) {
           that.handleUsageResponse(data)
-        )
-      })
+        })
     }
     docCount (typeName:string):string {
       return this.formatNumber(this.state.indexInfo[typeName])
@@ -230,7 +228,7 @@ const ApiUsage = (props:tPROPS) => {
       const value = trackerEvent.toJSON().data["value"]
 
       this.setState({
-        trackerInfoValues: [{label: this.state.toolTipLabel, value: `${value}` }],
+        trackerInfoValues: [{label: this.state.toolTipLabel, value: value}],
         tracker
       })
     }

src/components/ChartBar.jsx

@@ -6,6 +6,7 @@ import getFieldValues from '../utils/getFieldValues'
 const _renderBars = (data: Array<Object>, fieldValues: Object, show: number) => {
   const bars: Array<Object> = data.slice(0, show)
 
+  console.log("bars: ", bars)
   // get maximum value
   const max: number = bars[0].count
 
@@ -21,6 +22,7 @@ const _renderBars = (data: Array<Object>, fieldValues: Object, show: number) =>
     // because sometimes we have numbers as terms
     const term: void|string = result.term || fieldValues[result.term]
 
+    console.log("result: ", result)
     return (
       <li
         className='pad-r-1 pad-b-2'
@@ -31,12 +33,12 @@ const _renderBars = (data: Array<Object>, fieldValues: Object, show: number) =>
             <span className='clr-gray-dark'>
               {`${term}`.toLowerCase()}
             </span>
-            &nbsp;{result.count}&nbsp;records
+            {String.fromCharCode(160) + result.count + String.fromCharCode(160)}records
           </div>
         }
         { !term &&
           <div className='clr-gray small weight-600'>
-            &nbsp;{result.count}&nbsp;records
+            {String.fromCharCode(160) + result.count + String.fromCharCode(160)}records
           </div>
         }
         <span

src/components/EndpointBox.jsx

@@ -75,8 +75,8 @@ const EndpointBox = (props: tPROPS) => {
 
   const icon = {
     'food': {
-      'enforcement': <div className="ep-icon" style={bg_color['food']}><i className="fa fa-3x fa-rotate-left absolute" style={{color: "white"}}/></div>,
-      'event': <div className="ep-icon" style={bg_color['food']}><i className="fa fa-3x fa-warning absolute" style={{color: "white"}}/></div>
+      'enforcement': <div className="ep-icon" style={bg_color['food']}><i className="fa fa-3x fa-rotate-left" style={{color: "white"}}/></div>,
+      'event': <div className="ep-icon" style={bg_color['food']}><i className="fa fa-3x fa-warning" style={{color: "white"}}/></div>
     },
     'device': {
       'event': <div className="ep-icon" style={bg_color['device']}><i className="fa fa-3x fa-warning" style={{color: "white"}}/></div>,
@@ -89,9 +89,9 @@ const EndpointBox = (props: tPROPS) => {
       'udi': <div className="ep-icon" style={bg_color['device']}><i className="fa fa-3x fa-barcode" style={{color: "white"}}/></div>
     },
     'drug': {
-      'event': <div className="ep-icon" style={bg_color['drug']}><i className="fa fa-3x fa-warning absolute" style={{color: "white"}}/></div>,
+      'event': <div className="ep-icon" style={bg_color['drug']}><i className="fa fa-3x fa-warning" style={{color: "white"}}/></div>,
       'label': <div className="ep-icon" style={bg_color['drug']}><i className="fa fa-3x fa-barcode" style={{color: "white"}}/></div>,
-      'enforcement': <div className="ep-icon" style={bg_color['drug']}><i className="fa fa-3x fa-rotate-left absolute" style={{color: "white"}}/></div>
+      'enforcement': <div className="ep-icon" style={bg_color['drug']}><i className="fa fa-3x fa-rotate-left" style={{color: "white"}}/></div>
     },
   }
 

src/components/InteractiveInfographic.jsx

@@ -3,7 +3,6 @@
 import React from 'react'
 
 import PieChartInfographic from '../components/PieChartInfographic'
-import GridInfographic from '../components/GridInfographic'
 
 import Select from 'react-select'
 import 'react-select/dist/react-select.css'
@@ -59,17 +58,7 @@ class InteractiveInfographic extends React.Component {
             globalDefs={this.props.infographicDefinitions.globalDefs}
             parent={this}
           />
-        break;
-      case "Grid":
-        infographic = 
-          <GridInfographic
-            api={this.props.meta.api_path}
-            infographicDefinitions={choice}
-            parent={this}
-          />
-        break;
-        default:
-          break;
+        break
     }
     this.setState({ 
       infographic,