From 498a562b074a1cd681f0819dfffe56387c8c65f1 Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Sun, 21 Apr 2024 08:05:30 +0100
Subject: [PATCH] lines for dates

---
 .../Explanation/DetailsModal/index.svelte     |  6 +++-
 .../DetailsModal/subjects/Column.svelte       |  3 --
 .../subjects/DatesAsNumbers.svelte            |  2 +-
 .../subjects/NumbersAsDates.svelte            |  9 ++++++
 .../subjects/ScalarJsonOnly.svelte            |  2 +-
 .../DetailsModal/subjects/Support.svelte      |  6 ++--
 .../DetailsModal/subjects/index.js            |  2 ++
 .../controls/Explanation/Explanation.svelte   | 14 +++++++--
 .../controls/Explanation/explanation.js       |  2 ++
 .../Explanation/lines/DateAsNumber.svelte     |  4 +--
 .../lines/JSONPrimitivesOnly.svelte           |  2 +-
 .../Explanation/lines/NumberAsDate.svelte     | 16 ++++++++++
 .../Explanation/lines/StringAsDate.svelte     | 16 ++++++++++
 ...ingNumber.svelte => StringAsNumber.svelte} |  2 +-
 .../controls/Explanation/lines/Support.svelte |  6 ++--
 .../controls/Explanation/lines/index.js       |  4 ++-
 .../settings/controls/Explanation/subjects.js |  2 ++
 .../settings/controls/MultiFieldSelect.svelte |  4 ---
 .../builder/src/stores/builder/components.js  |  1 -
 packages/client/manifest.json                 | 30 ++++++++++---------
 .../components/app/charts/ApexChart.svelte    | 17 ++++++++---
 21 files changed, 108 insertions(+), 42 deletions(-)
 create mode 100644 packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/NumbersAsDates.svelte
 create mode 100644 packages/builder/src/components/design/settings/controls/Explanation/lines/NumberAsDate.svelte
 create mode 100644 packages/builder/src/components/design/settings/controls/Explanation/lines/StringAsDate.svelte
 rename packages/builder/src/components/design/settings/controls/Explanation/lines/{StringNumber.svelte => StringAsNumber.svelte} (88%)

diff --git a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/index.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/index.svelte
index 7c6d886548..f6310fdaba 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/index.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/index.svelte
@@ -1,6 +1,6 @@
 <script>
   import { ContextTooltip } from "@budibase/bbui"
-  import { ScalarJsonOnly, Column, Support, NotRequired, StringsAsNumbers, DatesAsNumbers } from './subjects'
+  import { StringsAsDates, NumbersAsDates, ScalarJsonOnly, Column, Support, NotRequired, StringsAsNumbers, DatesAsNumbers } from './subjects'
   import subjects from '../subjects'
 
   export let anchor
@@ -29,6 +29,10 @@
       <DatesAsNumbers />
     {:else if subject === subjects.scalarJsonOnly}
       <ScalarJsonOnly {columnName} {schema} />
+    {:else if subject === subjects.numbersAsDates}
+      <NumbersAsDates {columnName} />
+    {:else if subject === subjects.stringsAsDates}
+      <StringsAsDates {columnName} />
     {/if}
   </div>
 </ContextTooltip>
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/Column.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/Column.svelte
index f8363bdcd4..d23d70d34c 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/Column.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/Column.svelte
@@ -2,9 +2,6 @@
   import { tables } from "stores/builder"
   import { BindingValue, Block, Subject, JSONValue, Property, Section }  from './components'
 
-  $: {
-    console.log($tables)
-  }
   export let schema
   export let columnName
 
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/DatesAsNumbers.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/DatesAsNumbers.svelte
index 7a2f1ed9ef..4921ac5823 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/DatesAsNumbers.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/DatesAsNumbers.svelte
@@ -24,7 +24,7 @@
 
 <Subject heading="Dates as Numbers">
   <Section>
-    A date can be used in place of a numeric value, but it will be parsed as a <Block>UNIX time</Block> timestamp, which is the number of milliseconds since Jan 1st 1970. A more recent moment in time will be a higher number.
+    A date can be used in place of a numeric value, but it will be converted to a <Block>UNIX time</Block> timestamp, which is the number of milliseconds since Jan 1st 1970. A more recent moment in time will be a higher number.
   </Section>
 
     <ExampleSection
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/NumbersAsDates.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/NumbersAsDates.svelte
new file mode 100644
index 0000000000..b3bf785afc
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/NumbersAsDates.svelte
@@ -0,0 +1,9 @@
+
+<script>
+</script>
+
+<div>
+</div>
+
+<style>
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/ScalarJsonOnly.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/ScalarJsonOnly.svelte
index 962f007daa..49f4b7cc53 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/ScalarJsonOnly.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/ScalarJsonOnly.svelte
@@ -34,7 +34,7 @@
 
 <Subject heading="Using Scalar JSON Values">
   <Section>
-    <Block>JSON objects</Block> can't be used here, but any <Block>number</Block>, <Block>string</Block> or <Block>boolean</Block> values nested within said object can be if they are otherwise compatible with the component. These scalar values can be selected from the same menu as this parent and take the form <Block>parent.child</Block>.
+    <Block>JSON objects</Block> can't be used here, but any <Block>number</Block>, <Block>string</Block> or <Block>boolean</Block> values nested within said object can be if they are otherwise compatible with the input. These scalar values can be selected from the same menu as this parent and take the form <Block>parent.child</Block>.
   </Section>
 
   {#if scalarDescendants.length > 0}
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/Support.svelte b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/Support.svelte
index e15c231f0e..c37bc3a46f 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/Support.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/Support.svelte
@@ -10,15 +10,15 @@
       color="var(--green)"
       text="Compatible"
     />
-    <span class="body">Fully compatible with the component as long as the data is present.</span>
+    <span class="body">Fully compatible with the input as long as the data is present.</span>
   </Section>
   <Section>
     <InfoWord
       icon="AlertCheck"
       color="var(--yellow)"
-      text="Possibly compatible"
+      text="Partially compatible"
     />
-    <span class="body">Possibly compatible with the component, but beware of other caveats mentioned in the context tooltip.</span>
+    <span class="body">Partially compatible with the input, but beware of other caveats mentioned.</span>
   </Section>
   <Section>
     <InfoWord
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/index.js b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/index.js
index e77d12d2bf..c7f54d6415 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/index.js
+++ b/packages/builder/src/components/design/settings/controls/Explanation/DetailsModal/subjects/index.js
@@ -4,3 +4,5 @@ export { default as StringsAsNumbers } from "./StringsAsNumbers.svelte"
 export { default as Support } from "./Support.svelte"
 export { default as DatesAsNumbers } from "./DatesAsNumbers.svelte"
 export { default as ScalarJsonOnly } from "./ScalarJsonOnly.svelte"
+export { default as StringsAsDates } from "./StringsAsDates.svelte"
+export { default as NumbersAsDates } from "./NumbersAsDates.svelte"
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 2413b6dc0b..e5c9e9e752 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/Explanation.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/Explanation.svelte
@@ -1,7 +1,7 @@
 <script>
   import DetailsModal from './DetailsModal/index.svelte'
   import { messages as messageConstants, getExplanationMessagesAndSupport, getExplanationWithPresets } from "./explanation";
-  import { Column, Support, NotRequired, StringNumber, JSONPrimitivesOnly, DateAsNumber } from "./lines"
+  import { StringAsDate, NumberAsDate, Column, Support, NotRequired, StringAsNumber, JSONPrimitivesOnly, DateAsNumber } from "./lines"
   import subjects from './subjects';
   import {
     componentStore,
@@ -53,7 +53,7 @@
     {setExplanationSubject}
   />
   {#if messages.includes(messageConstants.stringAsNumber)}
-    <StringNumber
+    <StringAsNumber
       {setExplanationSubject}
     />
   {/if}
@@ -72,6 +72,16 @@
       {setExplanationSubject}
     />
   {/if}
+  {#if messages.includes(messageConstants.numberAsDate)}
+    <NumberAsDate
+      {setExplanationSubject}
+    />
+  {/if}
+  {#if messages.includes(messageConstants.stringAsDate)}
+    <StringAsDate
+      {setExplanationSubject}
+    />
+  {/if}
 </div>
 
 {#if showDetails}
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/explanation.js b/packages/builder/src/components/design/settings/controls/Explanation/explanation.js
index fa04fbe0ec..4321fb14b6 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/explanation.js
+++ b/packages/builder/src/components/design/settings/controls/Explanation/explanation.js
@@ -4,6 +4,8 @@ export const messages = {
   jsonPrimitivesOnly: Symbol("explanation-json-primitives-only"),
   stringAsNumber: Symbol("explanation-string-as-number"),
   dateAsNumber: Symbol("explanation-date-as-number"),
+  numberAsDate: Symbol("explanation-number-as-date"),
+  stringAsDate: Symbol("explanation-string-as-date"),
   notRequired: Symbol("explanation-not-required"),
   contextError: Symbol("explanation-context-error"),
 }
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/lines/DateAsNumber.svelte b/packages/builder/src/components/design/settings/controls/Explanation/lines/DateAsNumber.svelte
index c2c6ca3bd1..b2b23c3803 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/lines/DateAsNumber.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/lines/DateAsNumber.svelte
@@ -6,11 +6,11 @@
 </script>
 
 <Line>
-  <Text value="Will be parsed as a " />
+  <Text value="Will be converted to a " />
   <InfoWord
       on:mouseenter={() => setExplanationSubject(subjects.datesAsNumbers)}
       on:mouseleave={() => setExplanationSubject(subjects.none)}
-    text="UNIX epoch timestamp"
+    text="UNIX time value"
   />
   <Period />
 </Line>
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/lines/JSONPrimitivesOnly.svelte b/packages/builder/src/components/design/settings/controls/Explanation/lines/JSONPrimitivesOnly.svelte
index ee4b258b80..d2aefc06b3 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/lines/JSONPrimitivesOnly.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/lines/JSONPrimitivesOnly.svelte
@@ -12,7 +12,7 @@
   on:mouseleave={() => setExplanationSubject(subjects.none)}
 >Scalar JSON values</InfoWord>
   <Text
-    value=" can be used with this component if their individual types are supported"
+    value=" can be used with this input if their individual types are supported"
   />
   <Period />
 </Line>
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/lines/NumberAsDate.svelte b/packages/builder/src/components/design/settings/controls/Explanation/lines/NumberAsDate.svelte
new file mode 100644
index 0000000000..8820cc9667
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/Explanation/lines/NumberAsDate.svelte
@@ -0,0 +1,16 @@
+<script>
+  import { Line, InfoWord, DocumentationLink, Space, Text, Period } from "../typography"
+  import subjects from '../subjects'
+
+  export let setExplanationSubject
+</script>
+
+<Line>
+  <Text value="Will be treated as a " />
+  <InfoWord
+      on:mouseenter={() => setExplanationSubject(subjects.numbersAsDates)}
+      on:mouseleave={() => setExplanationSubject(subjects.none)}
+    text="UNIX time value"
+  />
+  <Period />
+</Line>
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/lines/StringAsDate.svelte b/packages/builder/src/components/design/settings/controls/Explanation/lines/StringAsDate.svelte
new file mode 100644
index 0000000000..ab94e96ba6
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/Explanation/lines/StringAsDate.svelte
@@ -0,0 +1,16 @@
+<script>
+  import { Line, InfoWord, DocumentationLink, Space, Text, Period } from "../typography"
+  import subjects from '../subjects'
+
+  export let setExplanationSubject
+</script>
+
+<Line>
+  <Text value="Will be treated as a " />
+  <InfoWord
+      on:mouseenter={() => setExplanationSubject(subjects.stringsAsDates)}
+      on:mouseleave={() => setExplanationSubject(subjects.none)}
+    text="UNIX time or ISO 8601 value"
+  />
+  <Period />
+</Line>
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/lines/StringNumber.svelte b/packages/builder/src/components/design/settings/controls/Explanation/lines/StringAsNumber.svelte
similarity index 88%
rename from packages/builder/src/components/design/settings/controls/Explanation/lines/StringNumber.svelte
rename to packages/builder/src/components/design/settings/controls/Explanation/lines/StringAsNumber.svelte
index 9c9f001f48..ae63c25733 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/lines/StringNumber.svelte
+++ b/packages/builder/src/components/design/settings/controls/Explanation/lines/StringAsNumber.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <Line>
-  <Text value="The component will ignore any " />
+  <Text value="The input will ignore any " />
   <InfoWord
       on:mouseenter={() => setExplanationSubject(subjects.stringsAsNumbers)}
       on:mouseleave={() => setExplanationSubject(subjects.none)}
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 cad31e588b..539cca18f1 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
@@ -49,11 +49,11 @@
     {color}
     {text}
   />
-  <Text value=" with " />
+  <Text value=" with this " />
   <DocumentationLink
     href="https://docs.budibase.com/docs/chart"
     icon="GraphPie"
-    text="Chart components"
+    text="Chart component"
   />
-  <Period />
+  <Text value=" input." />
 </Line>
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/lines/index.js b/packages/builder/src/components/design/settings/controls/Explanation/lines/index.js
index da819ee9d7..beff239398 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/lines/index.js
+++ b/packages/builder/src/components/design/settings/controls/Explanation/lines/index.js
@@ -1,6 +1,8 @@
 export { default as Column } from "./Column.svelte"
 export { default as NotRequired } from "./NotRequired.svelte"
-export { default as StringNumber } from "./StringNumber.svelte"
+export { default as StringAsNumber } from "./StringAsNumber.svelte"
 export { default as Support } from "./Support.svelte"
 export { default as JSONPrimitivesOnly } from "./JSONPrimitivesOnly.svelte"
 export { default as DateAsNumber } from "./DateAsNumber.svelte"
+export { default as NumberAsDate } from "./NumberAsDate.svelte"
+export { default as StringAsDate } from "./StringAsDate.svelte"
diff --git a/packages/builder/src/components/design/settings/controls/Explanation/subjects.js b/packages/builder/src/components/design/settings/controls/Explanation/subjects.js
index 549ec0e075..70471ec6d4 100644
--- a/packages/builder/src/components/design/settings/controls/Explanation/subjects.js
+++ b/packages/builder/src/components/design/settings/controls/Explanation/subjects.js
@@ -3,6 +3,8 @@ const subjects = {
   support: Symbol("details-modal-support"),
   stringsAsNumbers: Symbol("details-modal-strings-as-numbers"),
   datesAsNumbers: Symbol("details-modal-dates-as-numbers"),
+  numbersAsDates: Symbol("explanation-numbers-as-dates"),
+  stringsAsDates: Symbol("explanation-strings-as-dates"),
   notRequired: Symbol("details-modal-not-required"),
   scalarJsonOnly: Symbol("explanation-scalar-json-only"),
   none: Symbol("details-modal-none")
diff --git a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
index bc3603c62a..721ac7bb88 100644
--- a/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte
@@ -16,10 +16,6 @@
   export let placeholder
   export let explanation
 
-  $: {
-    console.log($componentStore);
-  }
-
   let contextTooltipAnchor = null
   let currentOption = null
   let previousOption = null
diff --git a/packages/builder/src/stores/builder/components.js b/packages/builder/src/stores/builder/components.js
index c88864de89..4003f5ed4c 100644
--- a/packages/builder/src/stores/builder/components.js
+++ b/packages/builder/src/stores/builder/components.js
@@ -95,7 +95,6 @@ export class ComponentStore extends BudiStore {
     // Fetch definitions and filter out custom component definitions so we
     // can flag them
     const components = await API.fetchComponentLibDefinitions(appId)
-    console.log(components);
     const customComponents = Object.keys(components).filter(key =>
       key.startsWith("plugin/")
     )
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 99810b2a29..10da498e3d 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -28,20 +28,6 @@
         { "type": "json", "message": "jsonPrimitivesOnly" }
       ]
     },
-    "datetimeLike": {
-      "supported": ["datetime"],
-      "partialSupport": [
-        { "type": "longform", "message": "stringAsDate" },
-        { "type": "string", "message": "stringAsDate" },
-        { "type": "options", "message": "stringAsDate" },
-        { "type": "formula", "message": "stringAsDate" },
-        { "type": "bigint", "message": "stringAsDate" },
-        { "type": "number", "message": "numberAsDate"}
-      ],
-      "unsupported": [
-        { "type": "json", "message": "jsonPrimitivesOnly" }
-      ]
-    },
     "stringLike": {
       "supported": ["string", "number", "bigint", "options", "longform", "boolean", "datetime"],
       "unsupported": [
@@ -2427,6 +2413,22 @@
         "label": "Date column",
         "key": "dateColumn",
         "dependsOn": "dataProvider",
+        "explanation": {
+          "typeSupport": {
+            "supported": ["datetime"],
+            "partialSupport": [
+              { "type": "longform", "message": "stringAsDate" },
+              { "type": "string", "message": "stringAsDate" },
+              { "type": "options", "message": "stringAsDate" },
+              { "type": "formula", "message": "stringAsDate" },
+              { "type": "bigint", "message": "stringAsDate" },
+              { "type": "number", "message": "numberAsDate"}
+            ],
+            "unsupported": [
+              { "type": "json", "message": "jsonPrimitivesOnly" }
+            ]
+          }
+        },
         "required": true
       },
       {
diff --git a/packages/client/src/components/app/charts/ApexChart.svelte b/packages/client/src/components/app/charts/ApexChart.svelte
index 506143852c..b40ebefeab 100644
--- a/packages/client/src/components/app/charts/ApexChart.svelte
+++ b/packages/client/src/components/app/charts/ApexChart.svelte
@@ -28,10 +28,19 @@
   }
 
   const renderChart = async (newChartElement) => {
-    await chart?.destroy()
-    chart = new ApexCharts(newChartElement, optionsCopy)
-    currentType = optionsCopy?.xaxis?.type
-    await chart.render()
+    try {
+      await chart?.destroy()
+      chart = new ApexCharts(newChartElement, optionsCopy)
+      currentType = optionsCopy?.xaxis?.type
+      await chart.render()
+    } catch (e) {
+      // Apex for some reason throws this error when creating a new chart.
+      // It doesn't actually cause any issues with the function of the chart, so
+      // just suppress it so the console doesn't get spammed
+      if (e.message !== "Cannot read properties of undefined (reading 'parentNode')") {
+        throw e
+      }
+    }
   }
 
   $: noData = optionsCopy == null || optionsCopy?.series?.length === 0