MetricLegendThrshold width weirdness

[mikelehen]

I tried to drop a map and a legend into my app with:

          <MetricUSNationalMap
            regionDB={regions}
            metric={MetricId.OPIOID_DEATHS}
          />
          <MetricLegendThreshold metric={MetricId.OPIOID_DEATHS} orientation="horizontal"/>

and got:

That is ridiculously wide, so I added width={300} and lost centering:

I think:

1. Setting the width explicitly should preserve centering.
2. We might want a default width that's not full-width so you don't have to explicitly set it.
3. We might want to consider having the map include a legend by default (with a good default width) and let you pass includeLegend={false} if you want to disable it.

[chasulin]

I originally wrapped the legend in AutoWidth so that it would always grow to the size of whatever parent container it is wrapped in (in this case, it didn't have a wrapper of its own so it grew to the width of the wrapper it shares with the map assumedly).

In this PR, I add a wrapper in LegendThresholdHorizontal that applies the passed with as the legend's maxWidth (similar to our vax thermometer in CAN).

Im not 100% sold on the idea of making it centered by default -- I kind of feel like alignment should be set in the context of implementing (in the case of your demo homepage, a wrapper that centers all of the items it contains). what do you think @mikelehen?

[chasulin]

re: your 3rd point, do you think this might call for a MetricMapBlock component? 😁

[mikelehen]

@chasulin Thanks, Chelsi! I think that sounds good though I'm not 100% sure without trying it. Mostly I just want to minimize the steps and fiddling necessary to get a map onto a homepage. 😁 So yeah, on that note a MetricMapBlock component does seem appealing as well!