Upgrade to highcharts 7

[anselmbradford]

Removals

• Removes translation transforms made obsolete by highcharts 7.

Changes

• Upgrades @babel/core, @babel/preset-env, autoprefixer, require-dir.
• Upgrade highcharts dependency to version 7.
• Adds styledMode attribute as needed in highcharts 7.

Testing

• Run ./setup.sh && gulp build && gulp watch
• Visit http://localhost:5000/ and resize the page to see responsive sizes. Check in Chrome, FF, IE10+, Edge, iOS simulator.
• Interact with charts by hovering and checking applicable interactive bits.

Test on cfgov-refresh

• Pull down this branch.
• Check out https://github.com/cfpb/cfgov-refresh/tree/upgrade_babel branch on cfgov-refresh
• Run ./frontend.sh
• Replace cfgov-refresh/node_modules/cfpb-chart-builder with cfpb-chart-builder base directory from this branch.
• Run gulp clean && gulp build
• Visit CCT pages and mortgage performance trends on localhost.

Screenshots

GeoMap zoom buttons are slightly different:

Before

After

LineChart tooltips now have bold values to match the bar chart tooltips:

Before

After

Whole demo page (Desktop):

Before

Desktop Before

After

Desktop After

Whole demo page (Mobile):

Before

Mobile Before

After

Mobile After

Note

• If you compare the before/after screenshots you'll see there is vertical shifting that's happening of a few pixels. I fixed this for projected values label and the x-axis label at desktop, but not sure if it matters elsewhere. Perhaps at mobile? It's subtle and easiest is probably opening the before and after images in two tabs, zoom each in, scroll them to the same chart, and ctrl+tab between them to see the difference. There's also some line charts that have a different rendering for the y-axis. The data is not changed, but it's presentation is shifted from this, so not sure if that matters either.

Before:

After:

[anselmbradford]

I don't get the codecov/patch check, but it can be ignored here.

[cfarm]

Testing in Sauce at different sizes in

• Chrome
• FF
• IE11
• Edge
• iOS simulator

[cfarm]

That last example of the screen shots of the LineChartIndex chart shows the Y axis changes from 0 to 50 as the baseline. I remember having consistent axes was a discussion early on in the Data & Research project,, but if you look at the wide variety of data and how it is reflected with different axis values across the charts now, I think that ship has already sailed. Otherwise I don't see the 'pixel shifting' issue being a problem.

[review continues]

[cfarm]

One thing I might edit on this branch is to pull in the change from #164 doneso with merge from master

[Scotchester]

This is all working for me localy, both standalone and in cfgov-refresh!

[cfarm]

Looking at https://github.com/cfpb/cfgov-refresh/compare/upgrade_babel#diff-b9cfc7f2cdf78a7f4b91a753d10865a2 which contains the changes described in this PR too:

Upgrades @babel/core, @babel/preset-env, autoprefixer, require-dir.

these changes were made in November, before cfgov-refresh moved from npm to Yarn in February: cfpb/consumerfinance.gov#4346

I'm trying to find out if that has any implications for those changes, since it seems we need to get that branch merged in cfgov-refresh before we can merge and release this PR's changes.

[cfarm]

This open PR also upgrades babel: cfpb/consumerfinance.gov#4836 but the tests are failing.

[cfarm]

Successfully have this branch working with cfgov-refresh on the master branch - so looks like the upgrade_babel branch isn't needed for this.

[cfarm]

Differences noticed in this branch vs the live site - in Firefox for Mac:

Mortgage performance map - zoomed in state/map lines are thicker in this branch when zoomed in, like for small states in the "States" view:

This PR	www

---

When a state is selected, it has a black fill on this PR, but on the live site it just has a bolder outline:

This PR	www

The same thing happens for selected counties & metro areas