hmm

packages/client/package.json

@@ -32,7 +32,7 @@
     "@spectrum-css/tag": "^3.1.4",
     "@spectrum-css/typography": "^3.0.2",
     "@spectrum-css/vars": "^3.0.1",
-    "apexcharts": "^3.45.2",
+    "apexcharts": "^3.48.0",
     "dayjs": "^1.10.8",
     "downloadjs": "1.4.7",
     "html5-qrcode": "^2.2.1",

packages/client/src/components/Component.svelte

@@ -289,7 +289,6 @@
         const sectionRealDependentValue = instance[sectionDependsOnKey]
 
 
-        let foo =  instance._component === "@budibase/standard-components/chartblock" && setting.type === "multifield"
         if (dependsOnValue == null && realDependentValue == null) {
           return false
         }
@@ -303,13 +302,6 @@
         if (sectionDependsOnValue != null && sectionDependsOnValue !== sectionRealDependentValue) {
           return false
         }
-        if (foo) {
-          console.log(setting)
-          console.log(instance);
-          console.log(dependsOnValue);
-          console.log(realDependentValue);
-          console.log("")
-        }
       }
 
       return missing

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

@@ -8,6 +8,9 @@
   const component = getContext("component")
 
   export let options
+  $: {
+    console.log(options);
+  }
   /*
   export let invalid = false
 

packages/client/src/components/app/charts/ApexOptionsBuilder.js

@@ -1,7 +1,7 @@
 export class ApexOptionsBuilder {
   constructor() {
     this.formatters = {
-      ["Default"]: val => (isNaN(val) ? val : Math.round(val * 100) / 100),
+      ["Default"]: val => val,
       ["Thousands"]: val => `${Math.round(val / 1000)}K`,
       ["Millions"]: val => `${Math.round(val / 1000000)}M`,
     }
@@ -166,7 +166,6 @@ export class ApexOptionsBuilder {
   }
 
   candleStick() {
-    //this.options.xaxis.convertedCatToNumeric = false;
     this.options.xaxis.labels.formatter = (epoch) => {
       return (new Date(epoch)).toDateString();
     }

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

@@ -95,52 +95,47 @@
       .colors(customColor ? colors : null)
 
     // Add data
-    let useDates = false
     if (schema[labelColumn]) {
       const labelFieldType = schema[labelColumn].type
       if (horizontal) {
-        builder = builder.yType(labelFieldType).xUnits(yAxisUnits)
+        builder = builder.xUnits(yAxisUnits)
       } else {
-        builder = builder.xType(labelFieldType).yUnits(yAxisUnits)
+        builder = builder.yUnits(yAxisUnits)
       }
-      useDates = labelFieldType === "datetime"
     }
     const series = (valueColumns ?? []).map(column => ({
       name: column,
       data: data.map(row => {
-        if (!useDates) {
-          const value = get(row, column);
+        const value = get(row, column);
 
-          if (schema?.[column]?.type === 'datetime') {
-            return Date.parse(value)
-          }
-
-          if (Array.isArray(value)) {
-            return null;
-          }
-
-          if (Number.isNaN(parseInt(value, 10))) {
-            return null;
-          }
-
-          return value;
-        } else {
-          // 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]]
+        if (schema?.[column]?.type === 'datetime') {
+          return Date.parse(value)
         }
+
+        if (Array.isArray(value)) {
+          return null;
+        }
+
+        if (Number.isNaN(parseInt(value, 10))) {
+          return null;
+        }
+
+        return value;
       }),
     }))
     builder = builder.series(series)
-    if (!useDates) {
-      builder = builder.xCategories(data.map(row => row[labelColumn]))
-    } else {
-      // Horizontal dates don't work anyway, but this is the correct logic
-      if (horizontal) {
-        builder = builder.clearYFormatter()
-      } else {
-        builder = builder.clearXFormatter()
+    builder = builder.xCategories(data.map(row => {
+      const value = row[labelColumn]
+      if (schema[labelColumn]?.type === 'datetime') {
+        const dateString = (new Date(Date.parse(value))).toLocaleDateString()
+        console.log(value)
+        console.log(dateString)
+        console.log()
+        return dateString
       }
-    }
+
+      return value ?? ""
+    }))
 
     // Build chart options
     return builder.getOptions()

yarn.lock

@@ -6924,7 +6924,7 @@ apexcharts@^3.19.2:
     svg.resize.js "^1.4.3"
     svg.select.js "^3.0.1"
 
-apexcharts@^3.45.2:
+apexcharts@^3.48.0:
   version "3.48.0"
   resolved "https://registry.yarnpkg.com/apexcharts/-/apexcharts-3.48.0.tgz#cf0e18f4551b04a242d81942c965c15547f5f1b6"
   integrity sha512-Lhpj1Ij6lKlrUke8gf+P+SE6uGUn+Pe1TnCJ+zqrY0YMvbqM3LMb1lY+eybbTczUyk0RmMZomlTa2NgX2EUs4Q==