Skip to content

Fix fill color styles for GeoMap selected areas#171

Merged
cfarm merged 2 commits intomasterfrom
fix-geomap-selected-area-fill
Apr 1, 2019
Merged

Fix fill color styles for GeoMap selected areas#171
cfarm merged 2 commits intomasterfrom
fix-geomap-selected-area-fill

Conversation

@cfarm
Copy link
Contributor

@cfarm cfarm commented Mar 29, 2019

Fixes bug originally documented in #162 where selected states, metro areas, and counties on the geographic maps for Mortgage Performance Trends were the wrong color, obscuring the color representing delinquency rates for the selected area.

Additions

  • turns on styledMode for GeoMap chart options, so we can use our CSS with geographic maps!
  • adds selected county to the sample map on the demo page in this repo, so we can see the styles for when an area of the map is selected (which should be a 3px stroke on the selected county, metro area, or state)
  • adds 3px stroke style to CSS

Removals

  • removes style that added black fill to the selected areas

Changes

Testing

  • gulp build && gulp watch

For cfgov-refresh:

  1. delete cfpb-chart-builder in cfgov-refresh/node_modules
  2. copy this repo folder into cfgov-refresh/node_modules
  3. yarn run gulp build
  4. ./runserver.sh and visit http://localhost:8000/data-research/mortgage-performance-trends/mortgages-90-or-more-days-delinquent/ and select different areas of the map using the Select dropdowns
  5. when you're done, delete cfpb-chart-builder from node_modules again and re-install the published package with yarn add cfpb-chart-builder@v5.1.2

Screenshots

Demo page in this repo:

Screen Shot 2019-03-29 at 6 30 01 PM

cfgov-refresh:

State: Screen Shot 2019-03-29 at 6 14 40 PM
Metro: Screen Shot 2019-03-29 at 6 14 59 PM
Metro: Screen Shot 2019-03-29 at 6 14 52 PM
Counties: Screen Shot 2019-03-29 at 6 27 59 PM
Counties: Screen Shot 2019-03-29 at 6 18 53 PM

Notes

  • As you can see in the Counties screenshots above, some small areas like Philadelphia County in PA, or DC, the fill color is obscured because of the thickness of the stroke. I'm looking into this, it may need to come in a separate PR.

Todos

Checklist

  • Changes are limited to a single goal (no scope creep)
  • Code can be automatically merged (no conflicts)
  • Code follows the standards laid out in the front end playbook
  • Passes all existing automated tests
  • New functions include new tests
  • New functions are documented (with a description, list of inputs, and expected output)
  • Placeholder code is flagged
  • Visually tested in supported browsers and devices
  • Project documentation has been updated (including the "Unreleased" section of the CHANGELOG)

Copy link
Contributor

@Scotchester Scotchester left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This works for me!

@cfarm cfarm merged commit db677ef into master Apr 1, 2019
@cfarm cfarm deleted the fix-geomap-selected-area-fill branch April 1, 2019 21:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants