Chart Component Fixes/Improvements. Adds Tooltip to Provide Context on Component Input Types

[Ghrehh]

Description

General Changes

• Fixed an issue where alerts for required fields weren't showing up on freshly added chart components, fixed another related issue hidden by this bug where component controls nested in sections didn't check their parent's dependsOn field to check if they're own dependsOn validation should be ran.

Chart Changes

• Upgraded to latest Apex charts
• Removed use of Apex charts svelte shim; we now use the library directly.
• Fixed an issue where selecting nullish or non-scalar values to display in multiselect charts would break the entire chart.
• Histograms now work with negative values.
• datetime labels now display a human readable date instead of a UNIX timestamp or raw ISO 8601 string.
• Horizontal mode now works for histograms and bar charts with date labels.
• Fixes an issue where switching to certain label types would break a chart component until page refresh.
• datetime fields passed as values to charts are now converted to unix time integers, which seems potentially useful. They were previously handled by directly running "parseFloat" on them, only parsing the year of the iso string as a number, which didn't seem very useful.
• In dev mode, if a chart is provided inputs that have no rows, an alert will tell users this is the case.
• Removed the previous chart builder class, instead we explicitly build the Apex chart config object in each chart component, in my opinion this is much easier to understand, even if it's a bit more explicit, there's also less method calling boilerplate.
• Candlestick charts can now accept numbers and string-like values as the date input if the values are correctly formatted.
• Donut and Pie charts now longer break until page reload when a non-numeric value is selected as their value input.

Explanation Tooltip

• Added a tooltip that provides information on column types and their compatibility with a particular component input when hovering over FieldSelects or MultiFieldSelects.
• These tooltips also have further information that can be accessed on hover explaining certain topics, like how strings can be converted to numbers for numerical inputs.
• There are some other QoL features, like being able to see an at a glance summary of the configuration of a particular column, and the ability to jump straight to things like documentation and the column's table, and example of these are below, though there are more.

info	image
column details menu
compatibility details menu
explanation tooltip

Feature branch env

Feature Branch Link

[deanhannigan]

This is a fantastic piece of work Gerard! The UX improvements to charts make such a huge difference and I genuinely want to see your context menus everywhere in Budibase 🚀 They are a brilliant bit of design and incredibly intuitive!

Some minor comments in the PR and some bugs/notes outlined here:

Bug custom color theme palette not loading

• This seems to be an issue on all chart types

Bug - QR not compatible for Label/Data column

• The value of a QR code will always resolve to a string
• In many cases, the text could be appropriate for both string or number like fields.

Note

• Different layout for Pie chart? Is this intentional?
• Prod has a larger diagram with a scrollable legend on the right
• New UX has a small diagram with a static legend at the top.

Note popover color

• Nested Props in formblock
  • --spectrum-global-color-gray-100
• Context popover background is currently set to
  • --spectrum-global-color-gray-75

Note

• I'm not sure the bullet points are required in the primary hover. Purely an opinion, in no way a blocker.

[Ghrehh]

@deanhannigan Thanks a bunch for the thorough review, I've addressed or responded to everything, if you could give this another looks when you get a chance I'd appreciate it 🙏

[deanhannigan]

Just one minor note for the custom palette issue and one change to the Explanation background colour and this is good to go 👍

[Ghrehh]

@deanhannigan Had changed the colors of the modal before I think, but there was a redundant double declaration of the background colour in two different nested components, it's definitely background-color: var(--spectrum-global-color-gray-100) on both tooltips now (which I think is the color you wanted, I maybe misread)

[deanhannigan]

LGTM! Great work Gerard!

[aptkingston]

Huge amount of work here! The amount of components added for all the explanation stuff is insane.

No major issues at all, just NABs. I agree with Dean in principle about casing (just because the DOM syntax is a certain way doesn't we can't make it more readable in our own code) but again that's very much NAB.

So I'm happy to merge away as is 👍

Great to make the charts more stable.

[aptkingston]

NAB: would be nice to dispatch custom optionenter and optionleave events here, which can be just proxied on up the component chain rather than having to have a bunch of prop drilling with NOPs but it's not a big deal - works the same.

[aptkingston]

I see what you're doing with this (I remember the awkwardness before of trying to define the chart settings in a way that the "depends on" stuff worked with only a single key) but to be honest this would motivate me to rewrite dependsOn to just support an array of keys. We could still do what you're doing below and dynamically enrich the setting dependsOn keys with any keys from the section itself.

We can handle that separately though - this PR is big enough already!