feat: format timestamps in drill by breadcrumbs (#23698)

superset-frontend/plugins/plugin-chart-echarts/src/BoxPlot/transformProps.ts

@@ -297,5 +297,6 @@ export default function transformProps(
     selectedValues,
     onContextMenu,
     refs,
+    coltypeMapping,
   };
 }

superset-frontend/plugins/plugin-chart-echarts/src/Funnel/transformProps.ts

@@ -37,6 +37,7 @@ import {
 import {
   extractGroupbyLabel,
   getChartPadding,
+  getColtypesMapping,
   getLegendProps,
   sanitizeHtml,
 } from '../utils/series';
@@ -95,7 +96,7 @@ export default function transformProps(
     emitCrossFilters,
   } = chartProps;
   const data: DataRecord[] = queriesData[0].data || [];
-
+  const coltypeMapping = getColtypesMapping(queriesData[0]);
   const {
     colorScheme,
     groupby,
@@ -244,5 +245,6 @@ export default function transformProps(
     selectedValues,
     onContextMenu,
     refs,
+    coltypeMapping,
   };
 }

superset-frontend/plugins/plugin-chart-echarts/src/Gauge/transformProps.ts

@@ -46,6 +46,7 @@ import {
 import { OpacityEnum } from '../constants';
 import { getDefaultTooltip } from '../utils/tooltip';
 import { Refs } from '../types';
+import { getColtypesMapping } from '../utils/series';
 
 const setIntervalBoundsAndColors = (
   intervals: string,
@@ -130,6 +131,7 @@ export default function transformProps(
   }: EchartsGaugeFormData = { ...DEFAULT_GAUGE_FORM_DATA, ...formData };
   const refs: Refs = {};
   const data = (queriesData[0]?.data || []) as DataRecord[];
+  const coltypeMapping = getColtypesMapping(queriesData[0]);
   const numberFormatter = getNumberFormatter(numberFormat);
   const colorFn = CategoricalColorNamespace.getScale(colorScheme as string);
   const axisLineWidth = calculateAxisLineWidth(data, fontSize, overlap);
@@ -341,5 +343,6 @@ export default function transformProps(
     selectedValues: filterState.selectedValues || [],
     onContextMenu,
     refs,
+    coltypeMapping,
   };
 }

superset-frontend/plugins/plugin-chart-echarts/src/Graph/EchartsGraph.tsx

@@ -17,9 +17,15 @@
  * under the License.
  */
 import React from 'react';
+import {
+  getColumnLabel,
+  getNumberFormatter,
+  getTimeFormatter,
+} from '@superset-ui/core';
 import { EventHandlers } from '../types';
 import Echart from '../components/Echart';
 import { GraphChartTransformedProps } from './types';
+import { formatSeriesName } from '../utils/series';
 
 type DataRow = {
   source?: string;
@@ -46,6 +52,7 @@ export default function EchartsGraph({
   filterState,
   emitCrossFilters,
   refs,
+  coltypeMapping,
 }: GraphChartTransformedProps) {
   const getCrossFilterDataMask = (node: DataRow | undefined) => {
     if (!node?.name || !node?.col) {
@@ -143,7 +150,18 @@ export default function EchartsGraph({
           drillToDetail: drillToDetailFilters,
           crossFilter: getCrossFilterDataMask(node),
           drillBy: node && {
-            filters: [{ col: node.col, op: '==', val: node.name }],
+            filters: [
+              {
+                col: node.col,
+                op: '==',
+                val: node.name,
+                formattedVal: formatSeriesName(node.name, {
+                  timeFormatter: getTimeFormatter(formData.dateFormat),
+                  numberFormatter: getNumberFormatter(formData.numberFormat),
+                  coltype: coltypeMapping?.[getColumnLabel(node.col)],
+                }),
+              },
+            ],
             groupbyFieldName:
               node.col === formData.source ? 'source' : 'target',
           },

superset-frontend/plugins/plugin-chart-echarts/src/Graph/transformProps.ts

@@ -34,7 +34,12 @@ import {
   EchartsGraphChartProps,
 } from './types';
 import { DEFAULT_GRAPH_SERIES_OPTION } from './constants';
-import { getChartPadding, getLegendProps, sanitizeHtml } from '../utils/series';
+import {
+  getChartPadding,
+  getColtypesMapping,
+  getLegendProps,
+  sanitizeHtml,
+} from '../utils/series';
 import { getDefaultTooltip } from '../utils/tooltip';
 import { Refs } from '../types';
 
@@ -174,7 +179,7 @@ export default function transformProps(
     theme,
   } = chartProps;
   const data: DataRecord[] = queriesData[0].data || [];
-
+  const coltypeMapping = getColtypesMapping(queriesData[0]);
   const {
     source,
     target,
@@ -343,5 +348,6 @@ export default function transformProps(
     filterState,
     refs,
     emitCrossFilters,
+    coltypeMapping,
   };
 }

superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/EchartsMixedTimeseries.tsx

@@ -19,14 +19,17 @@
 import React, { useCallback } from 'react';
 import {
   AxisType,
-  DataRecordValue,
-  DTTM_ALIAS,
   BinaryQueryObjectFilterClause,
+  DTTM_ALIAS,
+  DataRecordValue,
+  getColumnLabel,
+  getNumberFormatter,
+  getTimeFormatter,
 } from '@superset-ui/core';
 import { EchartsMixedTimeseriesChartTransformedProps } from './types';
 import Echart from '../components/Echart';
 import { EventHandlers } from '../types';
-import { currentSeries } from '../utils/series';
+import { currentSeries, formatSeriesName } from '../utils/series';
 
 export default function EchartsMixedTimeseries({
   height,
@@ -45,6 +48,7 @@ export default function EchartsMixedTimeseries({
   xValueFormatter,
   xAxis,
   refs,
+  coltypeMapping,
 }: EchartsMixedTimeseriesChartTransformedProps) {
   const isFirstQuery = useCallback(
     (seriesIndex: number) => seriesIndex < seriesBreakdown,
@@ -125,7 +129,7 @@ export default function EchartsMixedTimeseries({
     mouseover: params => {
       currentSeries.name = params.seriesName;
     },
-    contextmenu: eventParams => {
+    contextmenu: async eventParams => {
       if (onContextMenu) {
         eventParams.event.stop();
         const { data, seriesName, seriesIndex } = eventParams;
@@ -167,6 +171,11 @@ export default function EchartsMixedTimeseries({
               col: dimension,
               op: '==',
               val: values[i],
+              formattedVal: formatSeriesName(values[i], {
+                timeFormatter: getTimeFormatter(formData.dateFormat),
+                numberFormatter: getNumberFormatter(formData.numberFormat),
+                coltype: coltypeMapping?.[getColumnLabel(dimension)],
+              }),
             }),
         );
         onContextMenu(pointerEvent.clientX, pointerEvent.clientY, {

superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts

@@ -105,7 +105,10 @@ export default function transformProps(
   const data1 = (queriesData[0].data || []) as TimeseriesDataRecord[];
   const data2 = (queriesData[1].data || []) as TimeseriesDataRecord[];
   const annotationData = getAnnotationData(chartProps);
-
+  const coltypeMapping = {
+    ...getColtypesMapping(queriesData[0]),
+    ...getColtypesMapping(queriesData[1]),
+  };
   const {
     area,
     areaB,
@@ -523,5 +526,6 @@ export default function transformProps(
       type: xAxisType,
     },
     refs,
+    coltypeMapping,
   };
 }

superset-frontend/plugins/plugin-chart-echarts/src/Pie/transformProps.ts

@@ -345,5 +345,6 @@ export default function transformProps(
     onContextMenu,
     refs,
     emitCrossFilters,
+    coltypeMapping,
   };
 }

superset-frontend/plugins/plugin-chart-echarts/src/Radar/transformProps.ts

@@ -259,5 +259,6 @@ export default function transformProps(
     selectedValues,
     onContextMenu,
     refs,
+    coltypeMapping,
   };
 }

superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/EchartsSunburst.tsx

@@ -17,10 +17,16 @@
  * under the License.
  */
 import React, { useCallback } from 'react';
-import { BinaryQueryObjectFilterClause } from '@superset-ui/core';
+import {
+  BinaryQueryObjectFilterClause,
+  getColumnLabel,
+  getNumberFormatter,
+  getTimeFormatter,
+} from '@superset-ui/core';
 import { SunburstTransformedProps } from './types';
 import Echart from '../components/Echart';
 import { EventHandlers, TreePathInfo } from '../types';
+import { formatSeriesName } from '../utils/series';
 
 export const extractTreePathInfo = (treePathInfo: TreePathInfo[] | undefined) =>
   (treePathInfo ?? [])
@@ -39,6 +45,7 @@ export default function EchartsSunburst(props: SunburstTransformedProps) {
     onContextMenu,
     refs,
     emitCrossFilters,
+    coltypeMapping,
   } = props;
   const { columns } = formData;
 
@@ -102,7 +109,7 @@ export default function EchartsSunburst(props: SunburstTransformedProps) {
       const { treePathInfo } = props;
       handleChange(treePathInfo);
     },
-    contextmenu: eventParams => {
+    contextmenu: async eventParams => {
       if (onContextMenu) {
         eventParams.event.stop();
         const { data, treePathInfo } = eventParams;
@@ -120,10 +127,17 @@ export default function EchartsSunburst(props: SunburstTransformedProps) {
               formattedVal: path,
             }),
           );
+          const val = treePath[treePath.length - 1];
           drillByFilters.push({
             col: columns[treePath.length - 1],
             op: '==',
-            val: treePath[treePath.length - 1],
+            val,
+            formattedVal: formatSeriesName(val, {
+              timeFormatter: getTimeFormatter(formData.dateFormat),
+              numberFormatter: getNumberFormatter(formData.numberFormat),
+              coltype:
+                coltypeMapping?.[getColumnLabel(columns[treePath.length - 1])],
+            }),
           });
         }
         onContextMenu(pointerEvent.clientX, pointerEvent.clientY, {

superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/transformProps.ts

@@ -377,5 +377,6 @@ export default function transformProps(
     selectedValues: filterState.selectedValues || [],
     onContextMenu,
     refs,
+    coltypeMapping,
   };
 }

superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/EchartsTimeseries.tsx

@@ -21,6 +21,9 @@ import {
   DTTM_ALIAS,
   BinaryQueryObjectFilterClause,
   AxisType,
+  getTimeFormatter,
+  getColumnLabel,
+  getNumberFormatter,
 } from '@superset-ui/core';
 import { ViewRootGroup } from 'echarts/types/src/util/types';
 import GlobalModel from 'echarts/types/src/model/Global';
@@ -28,7 +31,7 @@ import ComponentModel from 'echarts/types/src/model/Component';
 import { EchartsHandler, EventHandlers } from '../types';
 import Echart from '../components/Echart';
 import { TimeseriesChartTransformedProps } from './types';
-import { currentSeries } from '../utils/series';
+import { currentSeries, formatSeriesName } from '../utils/series';
 import { ExtraControls } from '../components/ExtraControls';
 
 const TIMER_DURATION = 300;
@@ -50,6 +53,7 @@ export default function EchartsTimeseries({
   xAxis,
   refs,
   emitCrossFilters,
+  coltypeMapping,
 }: TimeseriesChartTransformedProps) {
   const { stack } = formData;
   const echartRef = useRef<EchartsHandler | null>(null);
@@ -196,7 +200,7 @@ export default function EchartsTimeseries({
         handleDoubleClickChange();
       }
     },
-    contextmenu: eventParams => {
+    contextmenu: async eventParams => {
       if (onContextMenu) {
         eventParams.event.stop();
         const { data, seriesName } = eventParams;
@@ -232,10 +236,16 @@ export default function EchartsTimeseries({
           }),
         );
         formData.groupby.forEach((dimension, i) => {
+          const val = labelMap[seriesName][i];
           drillByFilters.push({
             col: dimension,
             op: '==',
-            val: labelMap[seriesName][i],
+            val,
+            formattedVal: formatSeriesName(values[i], {
+              timeFormatter: getTimeFormatter(formData.dateFormat),
+              numberFormatter: getNumberFormatter(formData.numberFormat),
+              coltype: coltypeMapping?.[getColumnLabel(dimension)],
+            }),
           });
         });
 

superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts

@@ -533,5 +533,6 @@ export default function transformProps(
       type: xAxisType,
     },
     refs,
+    coltypeMapping: dataTypes,
   };
 }

superset-frontend/plugins/plugin-chart-echarts/src/Treemap/EchartsTreemap.tsx

@@ -19,6 +19,9 @@
 import {
   DataRecordValue,
   BinaryQueryObjectFilterClause,
+  getTimeFormatter,
+  getColumnLabel,
+  getNumberFormatter,
 } from '@superset-ui/core';
 import React, { useCallback } from 'react';
 import Echart from '../components/Echart';
@@ -26,6 +29,7 @@ import { NULL_STRING } from '../constants';
 import { EventHandlers } from '../types';
 import { extractTreePathInfo } from './constants';
 import { TreemapTransformedProps } from './types';
+import { formatSeriesName } from '../utils/series';
 
 export default function EchartsTreemap({
   echartOptions,
@@ -38,6 +42,8 @@ export default function EchartsTreemap({
   setDataMask,
   selectedValues,
   width,
+  formData,
+  coltypeMapping,
 }: TreemapTransformedProps) {
   const getCrossFilterDataMask = useCallback(
     (data, treePathInfo) => {
@@ -108,7 +114,7 @@ export default function EchartsTreemap({
       const { data, treePathInfo } = props;
       handleChange(data, treePathInfo);
     },
-    contextmenu: eventParams => {
+    contextmenu: async eventParams => {
       if (onContextMenu) {
         eventParams.event.stop();
         const { data, treePathInfo } = eventParams;
@@ -129,6 +135,11 @@ export default function EchartsTreemap({
               col: groupby[i],
               op: '==',
               val,
+              formattedVal: formatSeriesName(val, {
+                timeFormatter: getTimeFormatter(formData.dateFormat),
+                numberFormatter: getNumberFormatter(formData.numberFormat),
+                coltype: coltypeMapping?.[getColumnLabel(groupby[i])],
+              }),
             });
           });
           onContextMenu(pointerEvent.clientX, pointerEvent.clientY, {

superset-frontend/plugins/plugin-chart-echarts/src/Treemap/transformProps.ts

@@ -294,5 +294,6 @@ export default function transformProps(
     selectedValues: filterState.selectedValues || [],
     onContextMenu,
     refs,
+    coltypeMapping,
   };
 }

superset-frontend/plugins/plugin-chart-echarts/src/types.ts

@@ -131,6 +131,7 @@ export interface BaseTransformedProps<F> {
   refs: Refs;
   width: number;
   emitCrossFilters?: boolean;
+  coltypeMapping?: Record<string, number>;
 }
 
 export type CrossFilterTransformedProps = {

superset-frontend/plugins/plugin-chart-echarts/src/utils/eventHandlers.ts

@@ -21,12 +21,18 @@ import {
   ContextMenuFilters,
   DataMask,
   QueryFormColumn,
+  QueryFormData,
+  getColumnLabel,
+  getNumberFormatter,
+  getTimeFormatter,
 } from '@superset-ui/core';
+
 import {
   BaseTransformedProps,
   CrossFilterTransformedProps,
   EventHandlers,
 } from '../types';
+import { formatSeriesName } from './series';
 
 export type Event = {
   name: string;
@@ -106,6 +112,8 @@ export const contextMenuEventHandler =
     getCrossFilterDataMask: (
       value: string,
     ) => ContextMenuFilters['crossFilter'],
+    formData: QueryFormData,
+    coltypeMapping?: Record<string, number>,
   ) =>
   (e: Event) => {
     if (onContextMenu) {
@@ -114,14 +122,18 @@ export const contextMenuEventHandler =
       const drillFilters: BinaryQueryObjectFilterClause[] = [];
       if (groupby.length > 0) {
         const values = labelMap[e.name];
-        groupby.forEach((dimension, i) =>
+        groupby.forEach((dimension, i) => {
           drillFilters.push({
             col: dimension,
             op: '==',
             val: values[i],
-            formattedVal: String(values[i]),
+            formattedVal: formatSeriesName(values[i], {
-          }),
+              timeFormatter: getTimeFormatter(formData.dateFormat),
-        );
+              numberFormatter: getNumberFormatter(formData.numberFormat),
+              coltype: coltypeMapping?.[getColumnLabel(dimension)],
+            }),
+          });
+        });
       }
       onContextMenu(pointerEvent.clientX, pointerEvent.clientY, {
         drillToDetail: drillFilters,
@@ -141,6 +153,8 @@ export const allEventHandlers = (
     labelMap,
     emitCrossFilters,
     selectedValues,
+    coltypeMapping,
+    formData,
   } = transformedProps;
   const eventHandlers: EventHandlers = {
     click: clickEventHandler(
@@ -153,6 +167,8 @@ export const allEventHandlers = (
       onContextMenu,
       labelMap,
       getCrossFilterDataMask(selectedValues, groupby, labelMap),
+      formData,
+      coltypeMapping,
     ),
   };
   return eventHandlers;