[big number] improve visual aesthetics of big number visualization

[williaster]

I planted this seed a while ago and think it's time we start some easy wins on improving the visual aesthetics of some visualizations (especially those that are widely used), so hacked on it over the weekend.

It does

• use the @data-ui/xy-chart package
• handling long-number/subheader edge cases, which the current visualizations do not (see gif below).

It does not

• show colors for + or - trends, but I would argue that the previous colors were not visually appealing and we can add that in a future PR if it's a big request.
• show an x- or y-axis, but you can explore all data using the tooltip (which displays date + value).

@mistercrunch @hughhhh @graceguo-supercat @michellethomas @elibrumbaugh

TODO before merge

• fix tooltip bounds detection
• add support for mapping comparison changes to color

[williaster]

FYI some of our power users do have strong feelings about the color comparison so I'll update with tweaks there.

[hughhhh]

nit: Can we use arrow functions?

const getMaxFontSize = () => {...}

[williaster]

I think it's generally preferable to define helper functions as normal functions as opposed to arrow functions because if there’s an error in function myHelper then the function name will appear in the stack trace whereas const myHelper will show up as an anonymous function.

I think arrow function style is preferable when you can take advantage of the syntax to make the function definition more succinct (like const getDate = d => d.date) but beyond that it seems like only upside to declaring a normal function.

[hughhhh]

nit: I would use a const var or potentially styles.json file. I can see us have an data-ui directory just like the deckgl dir and creating components specifically around data-ui

Would love to here your thoughts @williaster

[williaster]

A data-ui dir is an interesting idea. I think a lot of these styles are still specific to big number, though, and are mostly targeted around dynamic font sizing. For instance here you can't use a const var beyond BIG_NUMBER_STYLES because the fontSize is dynamically computed

[hughhhh]

This is an awesome start by the way!

[mistercrunch]

Nice. In the gif it looks for a second like the tooltip isn't overflowing correctly on the edge of the widget (over half a second, so I can't tell for sure).

[williaster]

^good eye! debugging it locally still, updated the PR with todo items before it's ready for prime time.

[williaster]

closing this in favor of #5469