feat (analytics): update styling of charts [MA-4507]

[Chalks]

Satisfies MA-4507

Description

There are a few display issues with dashboards, and this is an attempt to cleanup at least the low hanging fruit. This is primarily focused on whitespace, but there were a few (very minor and unused) things that got cleaned up as well.

How to test

• Compare two dashboards that have everything on them, use kitchen sink on pr preview and compare it with kitchen sink on dev
• I highly recommend looking at the other MFE previews in https://github.com/Kong/konnect-ui-apps/pull/9069 wherever there are dashboards you're aware of.
• Make sure to check out golden signals too.

Changes

• Changed the default legend position in AnalyticsChart from "Right" to "Bottom". Primarily because "Right" didn't work and hasn't been used anywhere in the entire kong org.
• Changed the behavior of "show legend values" to default to false, because it already didn't show anything if the legend position was "Bottom"... which was always.
• AnalyticsChart truncation warning is now positioned absolutely instead of taking up layout space
• The html chart legend is now just relying on flex wrap instead of trying to calculate columns/grids. This means there aren't perfect columns anymore, but it also means it's significantly more tightly packed.
• The html chart legend now truncates everything that's too large by default and includes a title attribute
• The html chart legend scrollbar is now in line with the chart scrollbar
• Barchart no longer tries to figure out width and instead allows chartjs to do it
• Barchart removed a LOT of extra padding and moved labels tighter to the axes
• Barchart now draws the x axis and the y axis, this helps define how much space the chart takes up, even when the data shown doesn't extend all the way to the edges
• Barchart bars now extend muuuuch closer to the edges, previously they were forced to not exceed roughly 70% of the chart
• Donut chart has a little more padding on the top. just a tiny bit. To make it consistent with the (forced by chartjs) minimum padding that barchart has at the top
• Line chart padding for axes labels is tighter and matches barchart
• All charts now try to take all of their available space and will win the claiming of that space over the legend (previously legend sometimes took some of the space reserved for the chart)
• DashboardTile now takes 100% of the space given to it, without extraneous padding.
• Golden signals now takes 100% of the space given to it, with... a little extraneous padding, because I couldn't muster the courage to go mess with the guts of it again. But now the padding between items in the signals is consistent with the outside edges.

Screenshots

It's easiest to see this with a video, I do narrate a bit so sound on:

vizchanges.mov

Before

After

[kongponents-bot]

Preview components from this PR in consuming application

In consuming application project install preview versions of shared packages generated by this PR:

@kong-ui-public/analytics-chart@pr-2619
@kong-ui-public/dashboard-renderer@pr-2619

[filipgutica]

Looks good, leaving some comments/findings here that we can discuss.

Legend items from the second row poking through.
Generally we'd like to see max of 2 legend rows below the chart before it starts scrolling.

Second row of legend items don't line up with the first

Legend items not aligned

Bottom tile padding is lost here

The legend should never take up this much space, I know you're trying to fix this in this PR and there's a bug currently in prod that's allowing the legend to take up the entire tile.
Can we see if we can make it so that the legend only ever takes up max 2 rows and the rest you have to scroll?

It should probably look something like this. (max height of the legend should be such that it only allows for 2 rows)