fix: Chart date axis bug

package.json

@@ -1,6 +1,6 @@
 {
     "name": "querybook",
-    "version": "3.15.2",
+    "version": "3.15.3",
     "description": "A Big Data Webapp",
     "private": true,
     "scripts": {

querybook/webapp/const/dataDocChart.ts

@@ -62,14 +62,33 @@ export interface IChartSeriesMeta {
     agg_type?: ChartDataAggType;
 }
 
-export type ChartScaleType = 'time' | 'category' | 'linear' | 'logarithmic';
+export type ChartScaleType =
+    | 'time'
+    | 'date'
+    | 'category'
+    | 'linear'
+    | 'logarithmic';
 export const ChartScaleOptions: ChartScaleType[] = [
     'time',
+    'date',
     'category',
     'linear',
     'logarithmic',
 ];
 
+// The hard code for values is a bug on the chartJS side
+// We should  use the type ScaleType instead once this is fixed
+export const chartScaleToChartJSScale: Record<
+    ChartScaleType,
+    'time' | 'category' | 'linear' | 'logarithmic'
+> = {
+    category: 'category',
+    linear: 'linear',
+    logarithmic: 'logarithmic',
+    time: 'time',
+    date: 'time', // This is the only one that is different
+};
+
 export enum ChartScaleFormat {
     NONE = '',
     DOLLAR = '$',
@@ -88,11 +107,11 @@ export const chartTypeToAllowedAxisType: Partial<
         y: ['linear', 'logarithmic'],
     },
     bar: {
-        x: ['time', 'category'],
+        x: ['time', 'date', 'category'],
         y: ['linear', 'logarithmic'],
     },
     histogram: {
-        x: ['time', 'category'],
+        x: ['time', 'date', 'category'],
         y: ['linear', 'logarithmic'],
     },
     pie: {

querybook/webapp/lib/chart/chart-data-processing.ts

@@ -17,7 +17,7 @@ function processDataPoint(val: any, scale: ChartScaleType) {
     // Convert data by Axis type
     if (scale === 'category') {
         return val;
-    } else if (scale === 'time' && isNaN(val)) {
+    } else if ((scale === 'time' || scale === 'date') && isNaN(val)) {
         return val;
     }
 

querybook/webapp/lib/chart/chart-meta-processing.ts

@@ -17,6 +17,7 @@ import {
     ChartValueSourceType,
     IChartAxisMeta,
     IChartFormValues,
+    chartScaleToChartJSScale,
 } from 'const/dataDocChart';
 import { StatementExecutionDefaultResultSize } from 'const/queryResultLimit';
 import type { DeepPartial } from 'lib/typescript';
@@ -344,7 +345,7 @@ function computeScaleOptions(
     };
 
     if (scaleType != null) {
-        axis.type = scaleType;
+        axis.type = chartScaleToChartJSScale[scaleType];
     }
 
     if (scaleType === 'time') {
@@ -356,6 +357,14 @@ function computeScaleOptions(
                 minute: 'h:mm a',
             },
         };
+    } else if (scaleType === 'date') {
+        (axis as DeepPartial<TimeScaleOptions>).time = {
+            tooltipFormat: 'YYYY-MM-DD',
+            displayFormats: {
+                day: 'YYYY-MM-DD',
+            },
+            minUnit: 'day',
+        };
     } else if (scaleType === 'linear' || scaleType === 'logarithmic') {
         // for empty case, it might be null or ""
         if (axisMeta.max != null && typeof axisMeta.max === 'number') {

querybook/webapp/lib/chart/chart-utils.ts

@@ -22,13 +22,14 @@ export function getValueDataType(value: any): AxesValueType {
 
 export function getDefaultScaleType(value: any): ChartScaleType {
     const valueType = getValueDataType(value);
+
     switch (valueType) {
         case 'datetime':
             return 'time';
         case 'number':
             return 'linear';
         case 'date':
-            return 'time';
+            return 'date';
         case 'string':
         default:
             return 'category';