diff --git a/package.json b/package.json index 9c656dc8b..a29059f63 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "querybook", - "version": "3.15.2", + "version": "3.15.3", "description": "A Big Data Webapp", "private": true, "scripts": { diff --git a/querybook/webapp/const/dataDocChart.ts b/querybook/webapp/const/dataDocChart.ts index f07de7327..d77d37547 100644 --- a/querybook/webapp/const/dataDocChart.ts +++ b/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: { diff --git a/querybook/webapp/lib/chart/chart-data-processing.ts b/querybook/webapp/lib/chart/chart-data-processing.ts index c72cec055..46f39a5ef 100644 --- a/querybook/webapp/lib/chart/chart-data-processing.ts +++ b/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; } diff --git a/querybook/webapp/lib/chart/chart-meta-processing.ts b/querybook/webapp/lib/chart/chart-meta-processing.ts index a795bf49c..69f0c127f 100644 --- a/querybook/webapp/lib/chart/chart-meta-processing.ts +++ b/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).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') { diff --git a/querybook/webapp/lib/chart/chart-utils.ts b/querybook/webapp/lib/chart/chart-utils.ts index bc8924262..48ffb6a42 100644 --- a/querybook/webapp/lib/chart/chart-utils.ts +++ b/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';