Add crop group maps

[mwbernard]

A start on #126

@ebrelsford following your advice in #126 I've so far done the following:

• When the app is mounted, load the crop information data first (this contains the crop group info), then load the grid and yield data. the crop information file is really small so shouldn't really delay things at all.
• Get max and min yield ratios at each grid cell and store that info in an object for each crop group in each future scenario... so data for a single grid cell now has 10 new columns with this format:

Cereals_future_ssp126: {
​​    maxCrop: "tef",
​​    maxVal: 0.213758682408111,
    ​​minCrop: "maize",
    minVal: 0.0641492669924477,
}

Need to be careful since these columns now have different types than the rest, but hopefully this will make retrieving the information we need easy and we can switch between the map modes smoothly.

[mwbernard]

One question to track here: are we showing max/min yield ratio, or are we showing max increase and min decrease. It looks like the agmip maps are only showing max if the value is > 0, and only showing min if its < 0 - so we may want to do that as well. But this does result in large portions of the map being empty ('none') on their charts

[mwbernard]

@ebrelsford UI is still WIP but I'm not planning on changing any of the data loading if you have some time to look at it.

The main place where this happens is in cropYieldsStore.js, and then I modified gridSource.vue to accept a few more props so it can access the new data columns if desired.

[ebrelsford]

@mwbernard My biggest concern is performance. I made some updates in 76e46d7 that get this function from 1.1s to .6s, but that's still pretty slow and if there's anything you can do to reduce that a bit more I'd feel better about it.

[mwbernard]

@ebrelsford Yeah that makes sense - any reason you can think of not to just pre-calculate all the yield ratios and these columns?

[ebrelsford]

@mwbernard pre-calculating would work as long as it's scripted so we can easily update the data.

[mwbernard]

@ebrelsford I believe https://github.com/earthrise-media/vacs-map/pull/128/commits/e80649072bbe58170ca518d9ca263f3c2e88f244 takes care of the performance issues.

I moved the yield ratio and crop group calculations into scripts/format-yields-data.js. To easily store the crop group info in our csv I made new columns for each element that we had previously been storing in an object. This meant updating how we access those columns in a few places around the app, but it looks to be working the same as before now, and loading the page much faster!

[mwbernard]

@kelsey-taylor I believe this has everything aside from the sand and soil mode which I'll take care of in #129

I took out the selected and reference colors from the ordinal scheme we had and made them their own variables. There's now a function in the color store which assigns colors given a cropId and this made the logic of that function a bit simpler. Given that though, would you mind adding a couple replacements to that ordinal scheme as fall backs?

Otherwise lmk if you have thoughts on the hover states etc!

[mwbernard]

@cameronkruse let me know when you're feeling good about this - or have any more notes - and I'll merge!