vibing

packages/builder/src/components/design/settings/controls/FieldContext/Chart.svelte

@@ -16,6 +16,22 @@
   export let errors = []
   export let warnings = []
 
+  const getDocLink = (columnType) => {
+    if (columnType === "number") {
+      return "https://docs.budibase.com/docs/number"
+    }
+    if (columnType === "string") {
+      return "https://docs.budibase.com/docs/text"
+    }
+    if (columnType === "attachment") {
+      return "https://docs.budibase.com/docs/attachments"
+    }
+
+    return ""
+  }
+
+  $: docLink = getDocLink(columnType);
+
 </script>
 
 <div
@@ -28,12 +44,12 @@
   <div class="contextTooltipContent">
     <div class="contextTooltipHeader">
       <span class="columnName">
-        {columnName} 
+        {columnName}
       </span><span> is a </span>
-      <div class="link">
+      <a target=”_blank” href={docLink} class="link">
         <Icon name={columnIcon} />
         <span>{columnType}</span>
-      </div>
+      </a>
       <span>column.</span>
     </div>
 
@@ -45,6 +61,8 @@
       {#each warnings as datum}
         <p>{datum}</p>
       {/each}
+    {:else}
+        <p>{supportLevelIconTooltip}</p>
     {/if}
   </div>
 </div>
@@ -75,13 +93,14 @@
   }
 
   .contextTooltipHeader {
-    row-gap: 4px;
+    row-gap: 6px;
+    column-gap: 5px;
     background-color: var(--background-alt);
     color: var(--ink);
     display: flex;
     flex-wrap: wrap;
     align-items: center;
-    padding: 4px 4px;
+    padding: 6px 8px;
     border-width: var(--spectrum-actionbutton-border-size);
     border-radius: var(--spectrum-alias-border-radius-regular);
     border: 1px solid
@@ -107,7 +126,6 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    margin-right: 5px;
   }
 
   .link {
@@ -116,7 +134,12 @@
     border-radius: 5px;
     background-color: var(--spectrum-global-color-blue-500);
     color: white;
-    margin: 0 8px;
+    transition: background-color 300ms
+  }
+
+  .link:hover {
+    background-color: var(--spectrum-global-color-blue-700);
+    cursor: pointer;
   }
 
   .link :global(svg) {

packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte

@@ -5,6 +5,7 @@
   import { createEventDispatcher } from "svelte"
   import { validators, constants as validatorConstants } from "../fieldValidator";
   import ChartFieldContext from './FieldContext/Chart.svelte'
+  import { FIELDS } from 'constants/backend'
 
   export let componentInstance = {}
   export let value = ""
@@ -63,9 +64,6 @@
   $: fieldSupport = getFieldSupport(schema, fieldValidator);
   $: boundValue = getValidOptions(value, options)
 
-  $: {
-    console.log(schema)
-  }
 
   const getValidOptions = (selectedOptions, allOptions) => {
     // Fix the hardcoded default string value
@@ -100,7 +98,14 @@
   const getOptionIconTooltip = optionKey => {
     const option = schema[optionKey]
 
-    return option?.type;
+    const type = option?.type;
+    const field = Object.values(FIELDS).find(f => f.type === type)
+
+    if (field) {
+      return field.name
+    }
+
+    return ""
   }
 
   const isOptionEnabled = optionKey => {
@@ -157,7 +162,6 @@
   $: previousOptionSupport = getSupportLevel(previousOption)
 
   const onOptionMouseenter = (e, option, idx) => {
-    console.log(option)
     contextTooltipId += 1;
     const invokedContextTooltipId = contextTooltipId
 

packages/builder/src/components/design/settings/fieldValidator.js

@@ -20,20 +20,20 @@ export const validators = {
       }
       const generalUnsupportedFields = ["array", "attachment", "barcodeqr", "link", "bb_reference"]
       if (generalUnsupportedFields.includes(fieldSchema.type)) {
-        response.errors.push(`${capitalize(fieldSchema.type)} columns are unsupported.`)
+        response.errors.push('This column can not be used a chart input.')
       }
 
       if (fieldSchema.type === "json") {
-          response.errors.push(`JSON columns can not be used as chart inputs, but individual properties of this JSON field can be be used if supported.`)
+          response.errors.push(`This column can not be used as a chart input, but individual properties of a JSON object can be be used if supported.`)
       }
 
       if (fieldSchema.type === "string") {
         response.warnings.push(
-          "String columns can be used as input for a chart, but non-numeric values may cause unexpected behavior.")
+          "This column can be used as input for a chart, but non-numeric values may cause unexpected behavior.")
       }
       if (fieldSchema.type === "datetime") {
         response.warnings.push(
-          "This column can be used as input for a chart, but it is parsed differently for various charts.")
+          "This column can be used as input for a chart, but it may be parsed differently depending on the which is used.")
       }
 
       const isRequired = fieldSchema?.constraints?.presence?.allowEmpty === false