Add crop group maps

[mwbernard]

As part of the Map Explorer redesign, we need to implement a 'crop-group' map feature that would work in the following way (figma mocks are here) (This is a feature that comes from the agmip folks so we are confident its a valid approach and something they want to show):

• For a given crop group (of which we have 5), each grid cell would be colored by the crop with the highest (or lowest, based on UI) yield ratio at that location
• In addition to coloring by the max or min yield ratio crop, we'd like to keep track of what that max or min yield ratio is for use in the tooltip, or potentially to display graphically down the line
• We're thinking that the dots which are representing the currently selected crop might be highlighted in some simple way (like a stroke)
• We'll also want to show a stacked bar chart in the sidebar that shows the distribution of crops displayed on the map (e.g. when viewing the worst performers in the Cereals group, the bar chart would likely show that maize is the worst performer in many locations)

[mwbernard]

@ebrelsford Was hoping to validate an approach to adding this to the app with you before I go down a bad path or screw up the map component system you set up. Highly likely that the correct approach is neither of the following, so lmk what you think.

My first thought was we could add columns to the data in the cropYields store, however this has a few complications. We'd need to add max and min columns for each food group, and since we want to display the actual yield ratio values we'd need to then look those up from the existing yield ratio columns, which seems kind of roundabout. Which crops belong in which crop groups is data we get in the cropInformation store, so we'd also need to make sure that data was loaded in before doing all of this...

Then I was thinking it might make more sense to keep track of this data in its own store which would wait for cropInformation data and cropYields data to load before getting the information we want. This seems more organized and clearer, but I believe it would mean we'd add another version of gridSource.vue, and maybe also gridOverlay.vue (?), that would use this new data as the source and use an ordinal color scale.

In any case I think it probably makes sense to entirely switch between map components when a user switches to this view (rather than updating the existing one like we do with changing filters).

[ebrelsford]

I could see the latter working and if I'm understanding correctly some of my approach in #127 might apply here. Adding a new gridsource/gridoverlay shouldn't be a huge issue and might be cleaner.

That said if we could do the former (put all the data in one GeoJSON) I do think it could be more efficient in the long run than having two large sources that we swap between. Another benefit to keeping all this data in one GeoJSON source would be we could more nicely transition between map views--if they're different sources/layers then there will be a jarring transition rather than a re-styling of the existing markers.

[mwbernard]

Closed in #129