refactor

packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/index.svelte

@@ -1,6 +1,6 @@
 <script>
   import { ContextTooltip } from "@budibase/bbui"
-  import { Column, Support, NotRequired, StringsAsNumbers } from './subjects'
+  import { Column, Support, NotRequired, StringsAsNumbers, DatesAsNumbers } from './subjects'
   import subjects from '../subjects'
 
   export let anchor
@@ -24,6 +24,8 @@
       <StringsAsNumbers />
     {:else if subject === subjects.notRequired}
       <NotRequired />
+    {:else if subject === subjects.datesAsNumbers}
+      <DatesAsNumbers />
     {/if}
   </div>
 </ContextTooltip>

packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/DatesAsNumbers.svelte

@@ -0,0 +1,9 @@
+<script>
+  import { Subject, Section } from './components'
+</script>
+
+<Subject heading="Dates as Numbers">
+  <Section>
+    A Date can be used in place of a numeric value, but it will be parsed as a UNIX epoch timestamp, which is the number of milliseconds since Jan 1st 1970.
+  </Section>
+</Subject>

packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/index.js

@@ -2,3 +2,4 @@ export { default as Column } from "./Column.svelte"
 export { default as NotRequired } from "./NotRequired.svelte"
 export { default as StringsAsNumbers } from "./StringsAsNumbers.svelte"
 export { default as Support } from "./Support.svelte"
+export { default as DatesAsNumbers } from "./DatesAsNumbers.svelte"

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

@@ -1,7 +1,7 @@
 <script>
   import ExplanationModal from './ExplanationModal/index.svelte'
   import { messages as messageConstants, getColumnInfoMessagesAndSupport } from "./columnInfo";
-  import { Column, Support, NotRequired, StringNumber, JSONPrimitivesOnly } from "./lines"
+  import { Column, Support, NotRequired, StringNumber, JSONPrimitivesOnly, DateAsNumber } from "./lines"
   import subjects from './subjects';
 
   export let columnInfo
@@ -31,6 +31,10 @@
     explanationModalSubject = option;
     root = root
   }
+
+  $: {
+    console.log(messages);
+  }
 </script>
 
 <div
@@ -64,8 +68,8 @@
       {setExplanationSubject}
     />
   {/if}
-  {#if messages.includes(messageConstants.chartDatetime)}
-    <JSONPrimitivesOnly
+  {#if messages.includes(messageConstants.dateAsNumber)}
+    <DateAsNumber
       {setExplanationSubject}
     />
   {/if}

packages/builder/src/components/design/settings/controls/FieldContext/columnInfo.js

@@ -3,7 +3,7 @@ import { capitalize } from 'lodash';
 export const messages = {
   jsonPrimitivesOnly: Symbol("column-info-json-primitives-only"),
   stringAsNumber: Symbol("column-info-string-as-number"),
-  chartDatetime: Symbol("column-info-chart-datetime"),
+  dateAsNumber: Symbol("column-info-date-as-number"),
   notRequired: Symbol("column-info-not-required"),
   contextError: Symbol("column-info-context-error"),
 }
@@ -55,7 +55,6 @@ const getSupportMessage = (type, columnInfo) => {
 }
 
 export const getColumnInfoMessagesAndSupport = (fieldSchema, columnInfo) => {
-
   try {
     const columnInfoMessagesAndSupport = {
       support: getSupport(fieldSchema.type, columnInfo),

packages/builder/src/components/design/settings/controls/FieldContext/lines/DateAsNumber.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 parsed as a " />
+  <InfoWord
+      on:mouseenter={() => setExplanationSubject(subjects.datesAsNumbers)}
+      on:mouseleave={() => setExplanationSubject(subjects.none)}
+    text="UNIX epoch timestamp"
+  />
+  <Period />
+</Line>

packages/builder/src/components/design/settings/controls/FieldContext/lines/index.js

@@ -3,3 +3,4 @@ export { default as NotRequired } from "./NotRequired.svelte"
 export { default as StringNumber } from "./StringNumber.svelte"
 export { default as Support } from "./Support.svelte"
 export { default as JSONPrimitivesOnly } from "./JSONPrimitivesOnly.svelte"
+export { default as DateAsNumber } from "./DateAsNumber.svelte"

packages/builder/src/components/design/settings/controls/FieldContext/subjects.js

@@ -2,6 +2,7 @@ const subjects = {
   column: Symbol("explanation-modal-column"),
   support: Symbol("explanation-modal-support"),
   stringsAsNumbers: Symbol("explanation-modal-strings-as-numbers"),
+  datesAsNumbers: Symbol("explanation-modal-dates-as-numbers"),
   notRequired: Symbol("explanation-modal-not-required"),
   none: Symbol("explanation-modal-none")
 }

packages/client/manifest.json

@@ -1639,7 +1639,7 @@
             "supported": ["number", "boolean"],
             "partialSupport": [
               { "type": "string", "message": "stringAsNumber" },
-              { "type": "datetime", "message": "datetimeChart"}
+              { "type": "datetime", "message": "dateAsNumber"}
             ],
             "unsupported": [
               { "type": "json", "message": "jsonPrimitivesOnly" }

packages/client/src/components/app/charts/BarChart.svelte

@@ -97,23 +97,23 @@
     // Add data
     let useDates = false
     if (schema[labelColumn]) {
-      console.log("in here?");
       const labelFieldType = schema[labelColumn].type
       if (horizontal) {
         builder = builder.yType(labelFieldType).xUnits(yAxisUnits)
       } else {
         builder = builder.xType(labelFieldType).yUnits(yAxisUnits)
       }
-      console.log(labelFieldType);
       useDates = labelFieldType === "datetime"
     }
     const series = (valueColumns ?? []).map(column => ({
       name: column,
       data: data.map(row => {
         if (!useDates) {
-          const value = get(row, column); 
-          console.log("one");
-          console.log(value);
+          const value = get(row, column);
+
+          if (schema[column].type === 'datetime') {
+            return Date.parse(value)
+          }
 
           if (Array.isArray(value)) {
             return null;
@@ -125,8 +125,7 @@
 
           return value;
         } else {
-          console.log("two");
-          console.log([row[labelColumn], row[column]]);
+          // TODO datetimes as labels are passed in this way, but this only updates on value change, so it's broken until you also change the value
           return [row[labelColumn], row[column]]
         }
       }),