From d47c7d9227434bc5fc1a35180cf17b33d2988a7d Mon Sep 17 00:00:00 2001 From: Gerard Burns Date: Fri, 14 Jun 2024 08:20:56 +0100 Subject: [PATCH] Chart Component and Explanation Modal Fixes and Improvements (#13922) * wip * wip refactoring icons and column names * wip * wip * remove automatic chart datetime sorting * indefinite article, long form text * lint * lint --- .../controls/Explanation/Explanation.svelte | 21 +-- .../controls/Explanation/lines/Column.svelte | 121 +++++++++++++----- .../controls/Explanation/lines/Support.svelte | 42 +++--- .../settings/controls/FieldSelect.svelte | 36 +----- .../settings/controls/MultiFieldSelect.svelte | 41 +----- packages/client/manifest.json | 1 + .../components/app/blocks/ChartBlock.svelte | 2 + .../components/app/charts/AreaChart.svelte | 1 - .../src/components/app/charts/BarChart.svelte | 1 - .../components/app/charts/LineChart.svelte | 1 - 10 files changed, 127 insertions(+), 140 deletions(-) diff --git a/packages/builder/src/components/design/settings/controls/Explanation/Explanation.svelte b/packages/builder/src/components/design/settings/controls/Explanation/Explanation.svelte index bc45e410c9..42ae9ed783 100644 --- a/packages/builder/src/components/design/settings/controls/Explanation/Explanation.svelte +++ b/packages/builder/src/components/design/settings/controls/Explanation/Explanation.svelte @@ -18,14 +18,11 @@ import subjects from "./subjects" import { appStore } from "stores/builder" - export let explanation - export let columnIcon - export let columnType - export let columnName - export let tableHref = () => {} - export let schema + export let name + export let explanation + export let componentName $: explanationWithPresets = getExplanationWithPresets( explanation, @@ -54,14 +51,8 @@
- - + + {#if messages.includes(messageConstants.stringAsNumber)} {/if} @@ -84,7 +75,7 @@ {#if detailsModalSubject !== subjects.none} - import { - Line, - InfoWord, - DocumentationLink, - Text, - Period, - } from "../typography" + import { Line, InfoWord, DocumentationLink, Text } from "../typography" + import { FieldType } from "@budibase/types" + import { FIELDS } from "constants/backend" import subjects from "../subjects" - export let columnName - export let columnIcon - export let columnType + export let schema + export let name export let tableHref export let setExplanationSubject + const getTypeName = schema => { + const fieldDefinition = Object.values(FIELDS).find( + f => f.type === schema?.type + ) + + if (schema?.type === "jsonarray") { + return "JSON Array" + } + if (schema?.type === "options") { + return "Options" + } + + return fieldDefinition?.name || schema?.type || "Unknown" + } + + const getTypeIcon = schema => { + const fieldDefinition = Object.values(FIELDS).find( + f => f.type === schema?.type + ) + + if (schema?.type === "jsonarray") { + return "BracketsSquare" + } + + return fieldDefinition?.icon || "Circle" + } + const getDocLink = columnType => { - if (columnType === "Number") { + if (columnType === FieldType.NUMBER) { return "https://docs.budibase.com/docs/number" } - if (columnType === "Text") { + if (columnType === FieldType.STRING) { return "https://docs.budibase.com/docs/text" } - if (columnType === "Attachment") { + if (columnType === FieldType.LONGFORM) { + return "https://docs.budibase.com/docs/text" + } + if (columnType === FieldType.ATTACHMENT_SINGLE) { return "https://docs.budibase.com/docs/attachments" } - if (columnType === "Multi-select") { + if (columnType === FieldType.ATTACHMENTS) { + // No distinct multi attachment docs, link to attachment instead + return "https://docs.budibase.com/docs/attachments" + } + if (columnType === FieldType.ARRAY) { return "https://docs.budibase.com/docs/multi-select" } - if (columnType === "JSON") { + if (columnType === FieldType.JSON) { return "https://docs.budibase.com/docs/json" } - if (columnType === "Date/Time") { + if (columnType === "jsonarray") { + return "https://docs.budibase.com/docs/json" + } + if (columnType === FieldType.DATETIME) { return "https://docs.budibase.com/docs/datetime" } - if (columnType === "User") { - return "https://docs.budibase.com/docs/user" + if (columnType === FieldType.BB_REFERENCE_SINGLE) { + return "https://docs.budibase.com/docs/users-1" } - if (columnType === "QR") { + if (columnType === FieldType.BB_REFERENCE) { + return "https://docs.budibase.com/docs/users-1" + } + if (columnType === FieldType.BARCODEQR) { return "https://docs.budibase.com/docs/barcodeqr" } - if (columnType === "Relationship") { + if (columnType === FieldType.LINK) { return "https://docs.budibase.com/docs/relationships" } - if (columnType === "Formula") { + if (columnType === FieldType.FORMULA) { return "https://docs.budibase.com/docs/formula" } - if (columnType === "Options") { + if (columnType === FieldType.OPTIONS) { return "https://docs.budibase.com/docs/options" } - if (columnType === "BigInt") { - // No BigInt docs - return null - } - if (columnType === "Boolean") { + if (columnType === FieldType.BOOLEAN) { return "https://docs.budibase.com/docs/boolean-truefalse" } - if (columnType === "Signature") { + if (columnType === FieldType.SIGNATURE_SINGLE) { // No Signature docs return null } + if (columnType === FieldType.BIGINT) { + // No BigInt docs + return null + } return null } - $: docLink = getDocLink(columnType) + // NOTE The correct indefinite article is based on the pronounciation of the word it precedes, not the spelling. So simply checking if the word begins with a vowel is not sufficient. + + // e.g., `an honor`, `a user` + const getIndefiniteArticle = schema => { + const anTypes = [ + FieldType.OPTIONS, + null, // `null` gets parsed as "unknown" + undefined, // `undefined` gets parsed as "unknown" + ] + + if (anTypes.includes(schema?.type)) { + return "an" + } + + return "a" + } + + $: columnTypeName = getTypeName(schema) + $: columnIcon = getTypeIcon(schema) + $: docLink = getDocLink(schema?.type) + $: indefiniteArticle = getIndefiniteArticle(schema) @@ -71,14 +126,14 @@ on:mouseenter={() => setExplanationSubject(subjects.column)} on:mouseleave={() => setExplanationSubject(subjects.none)} href={tableHref} - text={columnName} + text={name} /> - + - + diff --git a/packages/builder/src/components/design/settings/controls/Explanation/lines/Support.svelte b/packages/builder/src/components/design/settings/controls/Explanation/lines/Support.svelte index 848ab208fb..ccb33798d7 100644 --- a/packages/builder/src/components/design/settings/controls/Explanation/lines/Support.svelte +++ b/packages/builder/src/components/design/settings/controls/Explanation/lines/Support.svelte @@ -2,9 +2,16 @@ import { Line, InfoWord, DocumentationLink, Text } from "../typography" import subjects from "../subjects" import * as explanation from "../explanation" + import { componentStore } from "stores/builder" export let setExplanationSubject export let support + export let componentName + + const getComponentDefinition = componentName => { + const components = $componentStore.components || {} + return components[componentName] || null + } const getIcon = support => { if (support === explanation.support.unsupported) { @@ -39,21 +46,24 @@ $: icon = getIcon(support) $: color = getColor(support) $: text = getText(support) + $: componentDefinition = getComponentDefinition(componentName) - - setExplanationSubject(subjects.support)} - on:mouseleave={() => setExplanationSubject(subjects.none)} - {icon} - {color} - {text} - /> - - - - +{#if componentDefinition} + + setExplanationSubject(subjects.support)} + on:mouseleave={() => setExplanationSubject(subjects.none)} + {icon} + {color} + {text} + /> + + + + +{/if} diff --git a/packages/builder/src/components/design/settings/controls/FieldSelect.svelte b/packages/builder/src/components/design/settings/controls/FieldSelect.svelte index 15b67ded18..aab7eb60a5 100644 --- a/packages/builder/src/components/design/settings/controls/FieldSelect.svelte +++ b/packages/builder/src/components/design/settings/controls/FieldSelect.svelte @@ -6,8 +6,6 @@ import { Explanation } from "./Explanation" import { debounce } from "lodash" import { params } from "@roxi/routify" - import { Constants } from "@budibase/frontend-core" - import { FIELDS } from "constants/backend" export let componentInstance = {} export let value = "" @@ -60,35 +58,6 @@ const onOptionMouseleave = e => { updateTooltip(e, null) } - const getOptionIcon = optionKey => { - const option = schema[optionKey] - if (!option) return "" - - if (option.autocolumn) { - return "MagicWand" - } - const { type, subtype } = option - - const result = - typeof Constants.TypeIconMap[type] === "object" && subtype - ? Constants.TypeIconMap[type][subtype] - : Constants.TypeIconMap[type] - - return result || "Text" - } - - const getOptionIconTooltip = optionKey => { - const option = schema[optionKey] - - const type = option?.type - const field = Object.values(FIELDS).find(f => f.type === type) - - if (field) { - return field.name - } - - return "" - }