Datetime working now on bar charts i thjink

packages/client/manifest.json

@@ -1655,7 +1655,7 @@
       {
         "type": "select",
         "label": "Format",
-        "key": "yAxisUnits",
+        "key": "valueUnits",
         "options": ["Default", "Thousands", "Millions"],
         "defaultValue": "Default"
       },
@@ -1813,7 +1813,7 @@
       {
         "type": "select",
         "label": "Format",
-        "key": "yAxisUnits",
+        "key": "valueUnits",
         "options": ["Default", "Thousands", "Millions"],
         "defaultValue": "Default"
       },
@@ -1966,7 +1966,7 @@
       {
         "type": "select",
         "label": "Format",
-        "key": "yAxisUnits",
+        "key": "valueUnits",
         "options": ["Default", "Thousands", "Millions"],
         "defaultValue": "Default"
       },
@@ -2410,7 +2410,7 @@
       {
         "type": "select",
         "label": "Format",
-        "key": "yAxisUnits",
+        "key": "valueUnits",
         "options": ["Default", "Thousands", "Millions"],
         "defaultValue": "Default"
       },
@@ -5341,7 +5341,7 @@
           {
             "type": "select",
             "label": "Format",
-            "key": "yAxisUnits",
+            "key": "valueUnits",
             "options": ["Default", "Thousands", "Millions"],
             "defaultValue": "Default"
           },
@@ -5436,7 +5436,7 @@
           {
             "type": "select",
             "label": "Format",
-            "key": "yAxisUnits",
+            "key": "valueUnits",
             "options": ["Default", "Thousands", "Millions"],
             "defaultValue": "Default"
           },
@@ -5485,7 +5485,7 @@
           {
             "type": "select",
             "label": "Format",
-            "key": "yAxisUnits",
+            "key": "valueUnits",
             "options": ["Default", "Thousands", "Millions"],
             "defaultValue": "Default"
           },
@@ -5567,7 +5567,7 @@
           {
             "type": "select",
             "label": "Format",
-            "key": "yAxisUnits",
+            "key": "valueUnits",
             "options": ["Default", "Thousands", "Millions"],
             "defaultValue": "Default"
           },

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

@@ -8,6 +8,9 @@
   const component = getContext("component")
 
   export let options
+
+  // Apex charts directly modifies the options object with default properties and internal variables. These being present could unintentionally cause issues to the provider of this prop as the changes are reflected in that component as well. To prevent any issues we clone this here to provide a buffer.
+  $: optionsCopy = cloneDeep(options);
   /*
   export let invalid = false
 
@@ -27,8 +30,8 @@
     return parsedValue
   }
 
-  const parseOptions = (options) => {
-    const parsedOptions = { series: [], ...cloneDeep(options)}
+  const parseOptions = (optionsCopy) => {
+    const parsedOptions = { series: [], ...cloneDeep(optionsCopy)}
 
     // Object form of series, used by most charts
     if (parsedOptions.series.some(entry => Array.isArray(entry?.data))) {
@@ -41,7 +44,7 @@
     return parsedOptions;
   }
 
-  $: parsedOptions = parseOptions(options);
+  $: parsedOptions = parseOptions(optionsCopy);
   */
 
   let chartElement;
@@ -58,7 +61,7 @@
   const renderChart = async (newChartElement) => {
     try {
       await chart?.destroy()
-      chart = new ApexCharts(newChartElement, options)
+      chart = new ApexCharts(newChartElement, optionsCopy)
       await chart.render()
     } catch(e) {
       //console.log(e)
@@ -69,17 +72,17 @@
     return true
   }
 
-  $: noData = options == null || options?.series?.length === 0
+  $: noData = optionsCopy == null || optionsCopy?.series?.length === 0
   $: hide = noData || !seriesValid
 
   // Call render chart upon changes to hide, as apex charts has issues with rendering upon changes automatically
   // if the chart is hidden.
   $: renderChart(chartElement, hide)
-  $: updateChart(options)
-  $: seriesValid = isSeriesValid(options?.series || [])
+  $: updateChart(optionsCopy)
+  $: seriesValid = isSeriesValid(optionsCopy?.series || [])
 </script>
 
-{#key options?.customColor}
+{#key optionsCopy?.customColor}
   <div class:hide use:styleable={$component.styles} bind:this={chartElement} />
   {#if $builderStore.inBuilder && noData }
     <div class="component-placeholder" use:styleable={{ ...$component.styles, normal: {}, custom: null, empty: true }}>

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

@@ -16,7 +16,7 @@
   export let animate
   export let legend
   export let stacked
-  export let yAxisUnits
+  export let valueUnits
   export let palette
   export let c1, c2, c3, c4, c5
   export let horizontal
@@ -25,13 +25,17 @@
     ["Default"]: val => val,
     ["Thousands"]: val => `${Math.round(val / 1000)}K`,
     ["Millions"]: val => `${Math.round(val / 1000000)}M`,
+    ["Datetime"]: val => (new Date(val)).toLocaleString()
   }
 
   $: series = getSeries(dataProvider, valueColumns)
   $: categories = getCategories(dataProvider, labelColumn);
 
-  $: dataType = dataProvider?.schema?.[labelColumn]?.type === 'datetime' ? 
+  $: labelType = dataProvider?.schema?.[labelColumn]?.type === 'datetime' ? 
     "datetime" : "category"
+  $: formatter = getFormatter(labelType, valueUnits)
+  $: xAxisFormatter = getFormatter(labelType, valueUnits, horizontal, "x")
+  $: yAxisFormatter = getFormatter(labelType, valueUnits, horizontal, "y")
 
   $: options = {
     series,
@@ -68,19 +72,29 @@
         enabled: false,
       },
     },
+    plotOptions: {
+      bar: {
+        horizontal
+      }
+    },
+    // We can just always provide the categories to the xaxis and horizontal mode automatically handles "tranposing" the categories to the yaxis, but certain things like labels need to be manually put on a certain axis based on the selected mode. Titles do not need to be handled this way, they are exposed to the user as "X axis" and Y Axis" so flipping them would be confusing.
     xaxis: {
-      type: dataType,
+      type: labelType,
       categories,
+      labels: {
+        formatter: xAxisFormatter
+      },
       title: {
         text: xAxisLabel
       }
     },
+    // bar charts in horizontal mode don't have a default setting for parsing the labels of dates, and will just spit out the unix epoch value. It also doesn't seem to respect any date based formatting properties passed in. So we'll just manualy format the labels, the chart still sorts the dates correctly in any case
     yaxis: {
+      labels: {
+        formatter: yAxisFormatter
+      },
       title: {
         text: yAxisLabel
-      },
-      labels: {
-        formatter: formatters[yAxisUnits]
       }
     }
   }
@@ -111,6 +125,15 @@
     })
   }
 
+  const getFormatter = (labelType, valueUnits, horizontal, axis) => {
+    const isLabelAxis = (axis === "y" && horizontal) || axis === "x" && !horizontal
+    if (labelType === "datetime" && isLabelAxis) {
+      return formatters["Datetime"]
+    }
+
+    return formatters[valueUnits]
+  }
+
   $: console.log("opt", options);
 </script>