feat(world-map): support color by metric or country column

[stephenLYZ]

SUMMARY

This PR allows world map to support country color in two ways:

• color by metric (same as before): use gradient color palettes
• color by country column (new): use categorical color palettes

Here we add a radio control to achieve it.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

before

after

2022-04-28.8.43.23.mov

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

• Has associated issue:
• Required feature flags:
• Changes UI
• Includes DB Migration (follow approval process in SIP-59)
  • Migration is atomic, supports rollback & is backwards-compatible
  • Confirm DB migration upgrade and downgrade tested
  • Runtime estimates and downtime expectations provided
• Introduces new feature or API
• Removes existing feature or API

[codecov]

Codecov Report

Merging #19881 (4557081) into master (d7e3ac3) will decrease coverage by 0.02%.
The diff coverage is 0.00%.

@@            Coverage Diff             @@
##           master   #19881      +/-   ##
==========================================
- Coverage   66.46%   66.44%   -0.03%     
==========================================
  Files        1721     1721              
  Lines       64517    64542      +25     
  Branches     6807     6811       +4     
==========================================
+ Hits        42879    42882       +3     
- Misses      19906    19927      +21     
- Partials     1732     1733       +1     

Flag	Coverage Δ
javascript	51.31% <0.00%> (-0.03%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
.../shared-controls/components/RadioButtonControl.tsx	0.00% <ø> (ø)
...gins/legacy-plugin-chart-world-map/src/WorldMap.js	0.00% <0.00%> (ø)
.../legacy-plugin-chart-world-map/src/controlPanel.ts	33.33% <0.00%> (-66.67%)	⬇️
...egacy-plugin-chart-world-map/src/transformProps.js	0.00% <0.00%> (ø)
...end/src/dashboard/components/SliceHeader/index.tsx	86.27% <0.00%> (-0.96%)	⬇️
...et-frontend/src/components/EditableTitle/index.tsx	70.00% <0.00%> (ø)
...ontend/src/views/CRUD/data/dataset/DatasetList.tsx	55.31% <0.00%> (ø)
.../src/explore/components/ControlPanelsContainer.tsx	79.80% <0.00%> (ø)
...hart-pivot-table/src/react-pivottable/utilities.js	0.00% <0.00%> (ø)
...ts/nativeFilters/FilterBar/ActionButtons/index.tsx	85.71% <0.00%> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update d7e3ac3...4557081. Read the comment docs.

[rusackas]

Two random thoughts... and these can be separate tickets/PRs if we want to do either of them:

1. This is the weird one: If you select to color the map by country, and deselect select "show bubbles," then you don't really need the Metric input (which is currently a required input). I thought for a second about making that input optional in that case... but in this configuration, the map is essentially useless, and doesn't tell you anything... so... whatever - fine as is. ¯\_(ツ)_/¯

2a) You only actually need four colors to display a map. As a default, it might be nice to take advantage of that, if your mapping library happens to support the four color theorem as a feature.

2b) If we do take advantage of the four color theorem, it may get ugly with color consistency... so... I don't quite know what to do there.

3. Also, with the color consistency thing... since a map might gobble up all the colors of a palette instantly, is there a good way to de-prioritize this chart (or others like it) it in the color assignment process?

[rusackas]

We could also base this on the metric, rather than the name, so that the country with the highest value gets the first color in the palette.

[stephenLYZ]

Yeah. But actually we may need to use country name as the color label instead of metric value when we use categorical color, and the metric values here are not in order. If we want to make the country with the highest value get the first color in the palette, we can sort the filteredData first.

[rusackas]

Left a bunch of thoughts/comments, but I'm ready to approve after those get considered :)