budibase
budibase copied to clipboard
Chart Component Fixes/Improvements. Adds Tooltip to Provide Context on Component Input Types
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 owndependsOn
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
@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 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)