From f4027db08ed6c444788cdc13b9df451edcd7691a Mon Sep 17 00:00:00 2001 From: Lily Kuang Date: Fri, 14 Apr 2023 16:39:31 -0700 Subject: [PATCH 01/10] fix: format timestamps in drill by breadcrumbs --- .../legacy-plugin-chart-world-map/src/WorldMap.js | 5 +++++ .../src/MixedTimeseries/EchartsMixedTimeseries.tsx | 7 +++++++ .../src/Sunburst/EchartsSunburst.tsx | 14 ++++++++++++-- .../src/Timeseries/EchartsTimeseries.tsx | 7 +++++++ .../src/Treemap/EchartsTreemap.tsx | 7 +++++++ .../src/utils/eventHandlers.ts | 9 ++++++++- 6 files changed, 46 insertions(+), 3 deletions(-) diff --git a/superset-frontend/plugins/legacy-plugin-chart-world-map/src/WorldMap.js b/superset-frontend/plugins/legacy-plugin-chart-world-map/src/WorldMap.js index c8aa2cdc2a127..9e35d2bbf7ab4 100644 --- a/superset-frontend/plugins/legacy-plugin-chart-world-map/src/WorldMap.js +++ b/superset-frontend/plugins/legacy-plugin-chart-world-map/src/WorldMap.js @@ -25,6 +25,7 @@ import { getSequentialSchemeRegistry, CategoricalColorNamespace, } from '@superset-ui/core'; +import moment from 'moment'; import Datamap from 'datamaps/dist/datamaps.world.min'; import { ColorBy } from './utils'; @@ -171,6 +172,7 @@ function WorldMap(element, props) { const key = source.id || source.country; const val = countryFieldtype === 'name' ? mapData[key]?.name : mapData[key]?.country; + const timestampFormatter = (value) => getTimeFormatterForGranularity(timeGrain)(value) let drillToDetailFilters; let drillByFilters; if (val) { @@ -187,6 +189,9 @@ function WorldMap(element, props) { col: entity, op: '==', val, + formattedVal: moment(val).isValid() + ? String(timestampFormatter(val)) + : String(val), }, ]; } diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/EchartsMixedTimeseries.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/EchartsMixedTimeseries.tsx index 02583d41624db..dc4c19953dd77 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/EchartsMixedTimeseries.tsx +++ b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/EchartsMixedTimeseries.tsx @@ -22,7 +22,9 @@ import { DataRecordValue, DTTM_ALIAS, BinaryQueryObjectFilterClause, + getTimeFormatterForGranularity, } from '@superset-ui/core'; +import moment from 'moment'; import { EchartsMixedTimeseriesChartTransformedProps } from './types'; import Echart from '../components/Echart'; import { EventHandlers } from '../types'; @@ -133,6 +135,8 @@ export default function EchartsMixedTimeseries({ const drillToDetailFilters: BinaryQueryObjectFilterClause[] = []; const drillByFilters: BinaryQueryObjectFilterClause[] = []; const isFirst = isFirstQuery(seriesIndex); + const timestampFormatter = (value: any) => + getTimeFormatterForGranularity()(value); const values = [ ...(eventParams.name ? [eventParams.name] : []), ...(isFirst ? labelMap : labelMapB)[eventParams.seriesName], @@ -167,6 +171,9 @@ export default function EchartsMixedTimeseries({ col: dimension, op: '==', val: values[i], + formattedVal: moment(values[i]).isValid() + ? String(timestampFormatter(values[i])) + : String(values[i]), }), ); onContextMenu(pointerEvent.clientX, pointerEvent.clientY, { diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/EchartsSunburst.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/EchartsSunburst.tsx index 7f40574665058..c19ffa3d79c05 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/EchartsSunburst.tsx +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/EchartsSunburst.tsx @@ -17,7 +17,11 @@ * under the License. */ import React, { useCallback } from 'react'; -import { BinaryQueryObjectFilterClause } from '@superset-ui/core'; +import { + BinaryQueryObjectFilterClause, + getTimeFormatterForGranularity, +} from '@superset-ui/core'; +import moment from 'moment'; import { SunburstTransformedProps } from './types'; import Echart from '../components/Echart'; import { EventHandlers, TreePathInfo } from '../types'; @@ -111,6 +115,8 @@ export default function EchartsSunburst(props: SunburstTransformedProps) { const pointerEvent = eventParams.event.event; const drillToDetailFilters: BinaryQueryObjectFilterClause[] = []; const drillByFilters: BinaryQueryObjectFilterClause[] = []; + const timestampFormatter = (value: any) => + getTimeFormatterForGranularity()(value); if (columns?.length) { treePath.forEach((path, i) => drillToDetailFilters.push({ @@ -120,10 +126,14 @@ 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: moment(val).isValid() + ? String(timestampFormatter(val)) + : String(val), }); } onContextMenu(pointerEvent.clientX, pointerEvent.clientY, { diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/EchartsTimeseries.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/EchartsTimeseries.tsx index 516255de0cbd3..56d99613166ab 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/EchartsTimeseries.tsx +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/EchartsTimeseries.tsx @@ -21,10 +21,12 @@ import { DTTM_ALIAS, BinaryQueryObjectFilterClause, AxisType, + getTimeFormatterForGranularity, } from '@superset-ui/core'; import { ViewRootGroup } from 'echarts/types/src/util/types'; import GlobalModel from 'echarts/types/src/model/Global'; import ComponentModel from 'echarts/types/src/model/Component'; +import moment from 'moment'; import { EchartsHandler, EventHandlers } from '../types'; import Echart from '../components/Echart'; import { TimeseriesChartTransformedProps } from './types'; @@ -203,6 +205,8 @@ export default function EchartsTimeseries({ const drillToDetailFilters: BinaryQueryObjectFilterClause[] = []; const drillByFilters: BinaryQueryObjectFilterClause[] = []; const pointerEvent = eventParams.event.event; + const timestampFormatter = (value: any) => + getTimeFormatterForGranularity()(value); const values = [ ...(eventParams.name ? [eventParams.name] : []), ...labelMap[seriesName], @@ -236,6 +240,9 @@ export default function EchartsTimeseries({ col: dimension, op: '==', val: labelMap[seriesName][i], + formattedVal: moment(labelMap[seriesName][i]).isValid() + ? String(timestampFormatter(labelMap[seriesName][i])) + : String(labelMap[seriesName][i]), }); }); diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/EchartsTreemap.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/EchartsTreemap.tsx index f9363bd4b6a9d..c04e384f68c22 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/EchartsTreemap.tsx +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/EchartsTreemap.tsx @@ -19,6 +19,7 @@ import { DataRecordValue, BinaryQueryObjectFilterClause, + getTimeFormatterForGranularity, } from '@superset-ui/core'; import React, { useCallback } from 'react'; import Echart from '../components/Echart'; @@ -26,6 +27,7 @@ import { NULL_STRING } from '../constants'; import { EventHandlers } from '../types'; import { extractTreePathInfo } from './constants'; import { TreemapTransformedProps } from './types'; +import moment from 'moment'; export default function EchartsTreemap({ echartOptions, @@ -113,6 +115,8 @@ export default function EchartsTreemap({ eventParams.event.stop(); const { data, treePathInfo } = eventParams; const { treePath } = extractTreePathInfo(treePathInfo); + const timestampFormatter = (value: any) => + getTimeFormatterForGranularity()(value); if (treePath.length > 0) { const pointerEvent = eventParams.event.event; const drillToDetailFilters: BinaryQueryObjectFilterClause[] = []; @@ -129,6 +133,9 @@ export default function EchartsTreemap({ col: groupby[i], op: '==', val, + formattedVal: moment(val).isValid() + ? String(timestampFormatter(val)) + : String(val), }); }); onContextMenu(pointerEvent.clientX, pointerEvent.clientY, { diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/utils/eventHandlers.ts b/superset-frontend/plugins/plugin-chart-echarts/src/utils/eventHandlers.ts index 7651bd83bd94e..d9cfa0a465f55 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/utils/eventHandlers.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/utils/eventHandlers.ts @@ -21,7 +21,9 @@ import { ContextMenuFilters, DataMask, QueryFormColumn, + getTimeFormatterForGranularity, } from '@superset-ui/core'; +import moment from 'moment'; import { BaseTransformedProps, CrossFilterTransformedProps, @@ -108,6 +110,9 @@ export const contextMenuEventHandler = ) => ContextMenuFilters['crossFilter'], ) => (e: Event) => { + debugger; + const timestampFormatter = (value: any) => + getTimeFormatterForGranularity()(value); if (onContextMenu) { e.event.stop(); const pointerEvent = e.event.event; @@ -119,7 +124,9 @@ export const contextMenuEventHandler = col: dimension, op: '==', val: values[i], - formattedVal: String(values[i]), + formattedVal: moment(values[i]).isValid() + ? String(timestampFormatter(values[i])) + : String(values[i]), }), ); } From 0735b89d57e64094c38e2a18958acdfc8cadf1f7 Mon Sep 17 00:00:00 2001 From: Lily Kuang Date: Sun, 16 Apr 2023 18:08:47 -0700 Subject: [PATCH 02/10] get datasource to check isTemporalColumn --- .../EchartsMixedTimeseries.tsx | 13 +++++++++-- .../src/Sunburst/EchartsSunburst.tsx | 16 +++++++++---- .../src/Timeseries/EchartsTimeseries.tsx | 20 ++++++++++++---- .../src/Treemap/EchartsTreemap.tsx | 15 +++++++++--- .../src/utils/eventHandlers.ts | 23 ++++++++++++++----- 5 files changed, 67 insertions(+), 20 deletions(-) diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/EchartsMixedTimeseries.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/EchartsMixedTimeseries.tsx index dc4c19953dd77..be28f7a144ee3 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/EchartsMixedTimeseries.tsx +++ b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/EchartsMixedTimeseries.tsx @@ -23,8 +23,11 @@ import { DTTM_ALIAS, BinaryQueryObjectFilterClause, getTimeFormatterForGranularity, + ChartClient, + getColumnLabel, } from '@superset-ui/core'; import moment from 'moment'; +import { isTemporalColumn } from '@superset-ui/chart-controls'; import { EchartsMixedTimeseriesChartTransformedProps } from './types'; import Echart from '../components/Echart'; import { EventHandlers } from '../types'; @@ -127,7 +130,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; @@ -135,6 +138,9 @@ export default function EchartsMixedTimeseries({ const drillToDetailFilters: BinaryQueryObjectFilterClause[] = []; const drillByFilters: BinaryQueryObjectFilterClause[] = []; const isFirst = isFirstQuery(seriesIndex); + const datasource = await new ChartClient() + .loadDatasource(formData.datasource, undefined) + .then(data => data); const timestampFormatter = (value: any) => getTimeFormatterForGranularity()(value); const values = [ @@ -171,7 +177,10 @@ export default function EchartsMixedTimeseries({ col: dimension, op: '==', val: values[i], - formattedVal: moment(values[i]).isValid() + formattedVal: isTemporalColumn( + getColumnLabel(dimension), + datasource, + ) ? String(timestampFormatter(values[i])) : String(values[i]), }), diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/EchartsSunburst.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/EchartsSunburst.tsx index c19ffa3d79c05..302ac92ef5aac 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/EchartsSunburst.tsx +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/EchartsSunburst.tsx @@ -19,9 +19,11 @@ import React, { useCallback } from 'react'; import { BinaryQueryObjectFilterClause, + ChartClient, + getColumnLabel, getTimeFormatterForGranularity, } from '@superset-ui/core'; -import moment from 'moment'; +import { isTemporalColumn } from '@superset-ui/chart-controls'; import { SunburstTransformedProps } from './types'; import Echart from '../components/Echart'; import { EventHandlers, TreePathInfo } from '../types'; @@ -44,7 +46,7 @@ export default function EchartsSunburst(props: SunburstTransformedProps) { refs, emitCrossFilters, } = props; - const { columns } = formData; + const { columns, datasource } = formData; const getCrossFilterDataMask = useCallback( (treePathInfo: TreePathInfo[]) => { @@ -106,7 +108,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; @@ -118,6 +120,9 @@ export default function EchartsSunburst(props: SunburstTransformedProps) { const timestampFormatter = (value: any) => getTimeFormatterForGranularity()(value); if (columns?.length) { + const dataset = await new ChartClient() + .loadDatasource(datasource, undefined) + .then(data => data); treePath.forEach((path, i) => drillToDetailFilters.push({ col: columns[i], @@ -131,7 +136,10 @@ export default function EchartsSunburst(props: SunburstTransformedProps) { col: columns[treePath.length - 1], op: '==', val, - formattedVal: moment(val).isValid() + formattedVal: isTemporalColumn( + getColumnLabel(columns[treePath.length - 1]), + dataset, + ) ? String(timestampFormatter(val)) : String(val), }); diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/EchartsTimeseries.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/EchartsTimeseries.tsx index 56d99613166ab..3b506083e9991 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/EchartsTimeseries.tsx +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/EchartsTimeseries.tsx @@ -22,11 +22,14 @@ import { BinaryQueryObjectFilterClause, AxisType, getTimeFormatterForGranularity, + getColumnLabel, + ChartClient, } from '@superset-ui/core'; import { ViewRootGroup } from 'echarts/types/src/util/types'; import GlobalModel from 'echarts/types/src/model/Global'; import ComponentModel from 'echarts/types/src/model/Component'; import moment from 'moment'; +import { isTemporalColumn } from '@superset-ui/chart-controls'; import { EchartsHandler, EventHandlers } from '../types'; import Echart from '../components/Echart'; import { TimeseriesChartTransformedProps } from './types'; @@ -198,13 +201,16 @@ export default function EchartsTimeseries({ handleDoubleClickChange(); } }, - contextmenu: eventParams => { + contextmenu: async eventParams => { if (onContextMenu) { eventParams.event.stop(); const { data, seriesName } = eventParams; const drillToDetailFilters: BinaryQueryObjectFilterClause[] = []; const drillByFilters: BinaryQueryObjectFilterClause[] = []; const pointerEvent = eventParams.event.event; + const datasource = await new ChartClient() + .loadDatasource(formData.datasource, undefined) + .then(data => data); const timestampFormatter = (value: any) => getTimeFormatterForGranularity()(value); const values = [ @@ -236,13 +242,17 @@ export default function EchartsTimeseries({ }), ); formData.groupby.forEach((dimension, i) => { + const val = labelMap[seriesName][i]; drillByFilters.push({ col: dimension, op: '==', - val: labelMap[seriesName][i], - formattedVal: moment(labelMap[seriesName][i]).isValid() - ? String(timestampFormatter(labelMap[seriesName][i])) - : String(labelMap[seriesName][i]), + val, + formattedVal: isTemporalColumn( + getColumnLabel(dimension), + datasource, + ) + ? String(timestampFormatter(val)) + : String(val), }); }); diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/EchartsTreemap.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/EchartsTreemap.tsx index c04e384f68c22..a15797091e3fc 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/EchartsTreemap.tsx +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/EchartsTreemap.tsx @@ -20,14 +20,16 @@ import { DataRecordValue, BinaryQueryObjectFilterClause, getTimeFormatterForGranularity, + ChartClient, + getColumnLabel, } from '@superset-ui/core'; import React, { useCallback } from 'react'; +import { isTemporalColumn } from '@superset-ui/chart-controls'; import Echart from '../components/Echart'; import { NULL_STRING } from '../constants'; import { EventHandlers } from '../types'; import { extractTreePathInfo } from './constants'; import { TreemapTransformedProps } from './types'; -import moment from 'moment'; export default function EchartsTreemap({ echartOptions, @@ -40,6 +42,7 @@ export default function EchartsTreemap({ setDataMask, selectedValues, width, + formData, }: TreemapTransformedProps) { const getCrossFilterDataMask = useCallback( (data, treePathInfo) => { @@ -110,11 +113,14 @@ 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; const { treePath } = extractTreePathInfo(treePathInfo); + const datasource = await new ChartClient() + .loadDatasource(formData.datasource, undefined) + .then(data => data); const timestampFormatter = (value: any) => getTimeFormatterForGranularity()(value); if (treePath.length > 0) { @@ -133,7 +139,10 @@ export default function EchartsTreemap({ col: groupby[i], op: '==', val, - formattedVal: moment(val).isValid() + formattedVal: isTemporalColumn( + getColumnLabel(groupby[i]), + datasource, + ) ? String(timestampFormatter(val)) : String(val), }); diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/utils/eventHandlers.ts b/superset-frontend/plugins/plugin-chart-echarts/src/utils/eventHandlers.ts index d9cfa0a465f55..f611b11125c09 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/utils/eventHandlers.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/utils/eventHandlers.ts @@ -22,8 +22,11 @@ import { DataMask, QueryFormColumn, getTimeFormatterForGranularity, + ChartClient, + getColumnLabel, } from '@superset-ui/core'; -import moment from 'moment'; +import { isTemporalColumn } from '@superset-ui/chart-controls'; + import { BaseTransformedProps, CrossFilterTransformedProps, @@ -108,23 +111,29 @@ export const contextMenuEventHandler = getCrossFilterDataMask: ( value: string, ) => ContextMenuFilters['crossFilter'], + formData: any, ) => - (e: Event) => { - debugger; - const timestampFormatter = (value: any) => - getTimeFormatterForGranularity()(value); + async (e: Event) => { if (onContextMenu) { + const timestampFormatter = (value: any) => + getTimeFormatterForGranularity()(value); e.event.stop(); const pointerEvent = e.event.event; const drillFilters: BinaryQueryObjectFilterClause[] = []; if (groupby.length > 0) { + const datasource = await new ChartClient() + .loadDatasource(formData.datasource, undefined) + .then(data => data); const values = labelMap[e.name]; groupby.forEach((dimension, i) => drillFilters.push({ col: dimension, op: '==', val: values[i], - formattedVal: moment(values[i]).isValid() + formattedVal: isTemporalColumn( + getColumnLabel(dimension), + datasource, + ) ? String(timestampFormatter(values[i])) : String(values[i]), }), @@ -148,6 +157,7 @@ export const allEventHandlers = ( labelMap, emitCrossFilters, selectedValues, + formData, } = transformedProps; const eventHandlers: EventHandlers = { click: clickEventHandler( @@ -160,6 +170,7 @@ export const allEventHandlers = ( onContextMenu, labelMap, getCrossFilterDataMask(selectedValues, groupby, labelMap), + formData, ), }; return eventHandlers; From acfdae89d9ca3af675da514a32d22abea71c2566 Mon Sep 17 00:00:00 2001 From: Lily Kuang Date: Mon, 17 Apr 2023 10:40:24 -0700 Subject: [PATCH 03/10] cleanup --- .../src/MixedTimeseries/EchartsMixedTimeseries.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/EchartsMixedTimeseries.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/EchartsMixedTimeseries.tsx index be28f7a144ee3..94a80861d83fc 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/EchartsMixedTimeseries.tsx +++ b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/EchartsMixedTimeseries.tsx @@ -26,7 +26,6 @@ import { ChartClient, getColumnLabel, } from '@superset-ui/core'; -import moment from 'moment'; import { isTemporalColumn } from '@superset-ui/chart-controls'; import { EchartsMixedTimeseriesChartTransformedProps } from './types'; import Echart from '../components/Echart'; From 8af2be36ff9670aee0f510acf9013f05e71a7591 Mon Sep 17 00:00:00 2001 From: Lily Kuang Date: Mon, 17 Apr 2023 11:17:07 -0700 Subject: [PATCH 04/10] fix lint --- .../src/WorldMap.js | 21 ++++++++++++------- .../EchartsMixedTimeseries.tsx | 6 +++--- 2 files changed, 17 insertions(+), 10 deletions(-) diff --git a/superset-frontend/plugins/legacy-plugin-chart-world-map/src/WorldMap.js b/superset-frontend/plugins/legacy-plugin-chart-world-map/src/WorldMap.js index 9e35d2bbf7ab4..c6e814838249e 100644 --- a/superset-frontend/plugins/legacy-plugin-chart-world-map/src/WorldMap.js +++ b/superset-frontend/plugins/legacy-plugin-chart-world-map/src/WorldMap.js @@ -21,11 +21,14 @@ import d3 from 'd3'; import PropTypes from 'prop-types'; import { extent as d3Extent } from 'd3-array'; import { + CategoricalColorNamespace, + ChartClient, + getColumnLabel, getNumberFormatter, getSequentialSchemeRegistry, - CategoricalColorNamespace, + getTimeFormatterForGranularity, } from '@superset-ui/core'; -import moment from 'moment'; +import { isTemporalColumn } from '@superset-ui/chart-controls'; import Datamap from 'datamaps/dist/datamaps.world.min'; import { ColorBy } from './utils'; @@ -72,6 +75,7 @@ function WorldMap(element, props) { inContextMenu, filterState, emitCrossFilters, + formData, } = props; const div = d3.select(element); div.classed('superset-legacy-chart-world-map', true); @@ -166,16 +170,19 @@ function WorldMap(element, props) { } }; - const handleContextMenu = source => { + const handleContextMenu = async source => { const pointerEvent = d3.event; pointerEvent.preventDefault(); const key = source.id || source.country; const val = countryFieldtype === 'name' ? mapData[key]?.name : mapData[key]?.country; - const timestampFormatter = (value) => getTimeFormatterForGranularity(timeGrain)(value) + const timestampFormatter = value => getTimeFormatterForGranularity()(value); let drillToDetailFilters; let drillByFilters; if (val) { + const datasource = await new ChartClient() + .loadDatasource(formData.datasource, undefined) + .then(data => data); drillToDetailFilters = [ { col: entity, @@ -189,9 +196,9 @@ function WorldMap(element, props) { col: entity, op: '==', val, - formattedVal: moment(val).isValid() - ? String(timestampFormatter(val)) - : String(val), + formattedVal: isTemporalColumn(getColumnLabel(entity), datasource) + ? String(timestampFormatter(val)) + : String(val), }, ]; } diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/EchartsMixedTimeseries.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/EchartsMixedTimeseries.tsx index 94a80861d83fc..ce86f89c3ef34 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/EchartsMixedTimeseries.tsx +++ b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/EchartsMixedTimeseries.tsx @@ -19,12 +19,12 @@ import React, { useCallback } from 'react'; import { AxisType, - DataRecordValue, - DTTM_ALIAS, BinaryQueryObjectFilterClause, - getTimeFormatterForGranularity, ChartClient, + DTTM_ALIAS, + DataRecordValue, getColumnLabel, + getTimeFormatterForGranularity, } from '@superset-ui/core'; import { isTemporalColumn } from '@superset-ui/chart-controls'; import { EchartsMixedTimeseriesChartTransformedProps } from './types'; From 414e79cf8ddddca1303acf9a55bd2217f738be33 Mon Sep 17 00:00:00 2001 From: Lily Kuang Date: Mon, 17 Apr 2023 18:10:31 -0700 Subject: [PATCH 05/10] check granularitySqla --- .../src/WorldMap.js | 17 +++++++--------- .../EchartsMixedTimeseries.tsx | 19 ++++++------------ .../src/Sunburst/EchartsSunburst.tsx | 16 +++++++-------- .../src/Timeseries/EchartsTimeseries.tsx | 20 ++++++------------- .../src/Treemap/EchartsTreemap.tsx | 14 ++++++------- .../src/utils/eventHandlers.ts | 19 ++++++------------ 6 files changed, 38 insertions(+), 67 deletions(-) diff --git a/superset-frontend/plugins/legacy-plugin-chart-world-map/src/WorldMap.js b/superset-frontend/plugins/legacy-plugin-chart-world-map/src/WorldMap.js index c6e814838249e..f81692e3dd529 100644 --- a/superset-frontend/plugins/legacy-plugin-chart-world-map/src/WorldMap.js +++ b/superset-frontend/plugins/legacy-plugin-chart-world-map/src/WorldMap.js @@ -22,13 +22,11 @@ import PropTypes from 'prop-types'; import { extent as d3Extent } from 'd3-array'; import { CategoricalColorNamespace, - ChartClient, getColumnLabel, getNumberFormatter, + getTimeFormatter, getSequentialSchemeRegistry, - getTimeFormatterForGranularity, } from '@superset-ui/core'; -import { isTemporalColumn } from '@superset-ui/chart-controls'; import Datamap from 'datamaps/dist/datamaps.world.min'; import { ColorBy } from './utils'; @@ -176,13 +174,11 @@ function WorldMap(element, props) { const key = source.id || source.country; const val = countryFieldtype === 'name' ? mapData[key]?.name : mapData[key]?.country; - const timestampFormatter = value => getTimeFormatterForGranularity()(value); + const timestampFormatter = value => + getTimeFormatter(formData.dateFormat)(value); let drillToDetailFilters; let drillByFilters; if (val) { - const datasource = await new ChartClient() - .loadDatasource(formData.datasource, undefined) - .then(data => data); drillToDetailFilters = [ { col: entity, @@ -196,9 +192,10 @@ function WorldMap(element, props) { col: entity, op: '==', val, - formattedVal: isTemporalColumn(getColumnLabel(entity), datasource) - ? String(timestampFormatter(val)) - : String(val), + formattedVal: + getColumnLabel(entity) === formData.granularitySqla + ? String(timestampFormatter(val)) + : String(val), }, ]; } diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/EchartsMixedTimeseries.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/EchartsMixedTimeseries.tsx index ce86f89c3ef34..2e9f0240d182d 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/EchartsMixedTimeseries.tsx +++ b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/EchartsMixedTimeseries.tsx @@ -20,13 +20,11 @@ import React, { useCallback } from 'react'; import { AxisType, BinaryQueryObjectFilterClause, - ChartClient, DTTM_ALIAS, DataRecordValue, getColumnLabel, - getTimeFormatterForGranularity, + getTimeFormatter, } from '@superset-ui/core'; -import { isTemporalColumn } from '@superset-ui/chart-controls'; import { EchartsMixedTimeseriesChartTransformedProps } from './types'; import Echart from '../components/Echart'; import { EventHandlers } from '../types'; @@ -137,11 +135,8 @@ export default function EchartsMixedTimeseries({ const drillToDetailFilters: BinaryQueryObjectFilterClause[] = []; const drillByFilters: BinaryQueryObjectFilterClause[] = []; const isFirst = isFirstQuery(seriesIndex); - const datasource = await new ChartClient() - .loadDatasource(formData.datasource, undefined) - .then(data => data); const timestampFormatter = (value: any) => - getTimeFormatterForGranularity()(value); + getTimeFormatter(formData.dateFormat)(value); const values = [ ...(eventParams.name ? [eventParams.name] : []), ...(isFirst ? labelMap : labelMapB)[eventParams.seriesName], @@ -176,12 +171,10 @@ export default function EchartsMixedTimeseries({ col: dimension, op: '==', val: values[i], - formattedVal: isTemporalColumn( - getColumnLabel(dimension), - datasource, - ) - ? String(timestampFormatter(values[i])) - : String(values[i]), + formattedVal: + DTTM_ALIAS === getColumnLabel(dimension) + ? String(timestampFormatter(values[i])) + : String(values[i]), }), ); onContextMenu(pointerEvent.clientX, pointerEvent.clientY, { diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/EchartsSunburst.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/EchartsSunburst.tsx index 302ac92ef5aac..fffa517a57679 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/EchartsSunburst.tsx +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/EchartsSunburst.tsx @@ -21,9 +21,8 @@ import { BinaryQueryObjectFilterClause, ChartClient, getColumnLabel, - getTimeFormatterForGranularity, + getTimeFormatter, } from '@superset-ui/core'; -import { isTemporalColumn } from '@superset-ui/chart-controls'; import { SunburstTransformedProps } from './types'; import Echart from '../components/Echart'; import { EventHandlers, TreePathInfo } from '../types'; @@ -118,7 +117,7 @@ export default function EchartsSunburst(props: SunburstTransformedProps) { const drillToDetailFilters: BinaryQueryObjectFilterClause[] = []; const drillByFilters: BinaryQueryObjectFilterClause[] = []; const timestampFormatter = (value: any) => - getTimeFormatterForGranularity()(value); + getTimeFormatter(formData.dateFormat)(value); if (columns?.length) { const dataset = await new ChartClient() .loadDatasource(datasource, undefined) @@ -136,12 +135,11 @@ export default function EchartsSunburst(props: SunburstTransformedProps) { col: columns[treePath.length - 1], op: '==', val, - formattedVal: isTemporalColumn( - getColumnLabel(columns[treePath.length - 1]), - dataset, - ) - ? String(timestampFormatter(val)) - : String(val), + formattedVal: + getColumnLabel(columns[treePath.length - 1]) === + formData.granularitySqla + ? String(timestampFormatter(val)) + : String(val), }); } onContextMenu(pointerEvent.clientX, pointerEvent.clientY, { diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/EchartsTimeseries.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/EchartsTimeseries.tsx index 3b506083e9991..de714fc75b547 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/EchartsTimeseries.tsx +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/EchartsTimeseries.tsx @@ -21,15 +21,12 @@ import { DTTM_ALIAS, BinaryQueryObjectFilterClause, AxisType, - getTimeFormatterForGranularity, + getTimeFormatter, getColumnLabel, - ChartClient, } from '@superset-ui/core'; import { ViewRootGroup } from 'echarts/types/src/util/types'; import GlobalModel from 'echarts/types/src/model/Global'; import ComponentModel from 'echarts/types/src/model/Component'; -import moment from 'moment'; -import { isTemporalColumn } from '@superset-ui/chart-controls'; import { EchartsHandler, EventHandlers } from '../types'; import Echart from '../components/Echart'; import { TimeseriesChartTransformedProps } from './types'; @@ -208,11 +205,8 @@ export default function EchartsTimeseries({ const drillToDetailFilters: BinaryQueryObjectFilterClause[] = []; const drillByFilters: BinaryQueryObjectFilterClause[] = []; const pointerEvent = eventParams.event.event; - const datasource = await new ChartClient() - .loadDatasource(formData.datasource, undefined) - .then(data => data); const timestampFormatter = (value: any) => - getTimeFormatterForGranularity()(value); + getTimeFormatter(formData.granularitySqla)(value); const values = [ ...(eventParams.name ? [eventParams.name] : []), ...labelMap[seriesName], @@ -247,12 +241,10 @@ export default function EchartsTimeseries({ col: dimension, op: '==', val, - formattedVal: isTemporalColumn( - getColumnLabel(dimension), - datasource, - ) - ? String(timestampFormatter(val)) - : String(val), + formattedVal: + DTTM_ALIAS === getColumnLabel(dimension) + ? String(timestampFormatter(val)) + : String(val), }); }); diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/EchartsTreemap.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/EchartsTreemap.tsx index a15797091e3fc..e7f7f9084a8a4 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/EchartsTreemap.tsx +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/EchartsTreemap.tsx @@ -19,7 +19,7 @@ import { DataRecordValue, BinaryQueryObjectFilterClause, - getTimeFormatterForGranularity, + getTimeFormatter, ChartClient, getColumnLabel, } from '@superset-ui/core'; @@ -122,7 +122,7 @@ export default function EchartsTreemap({ .loadDatasource(formData.datasource, undefined) .then(data => data); const timestampFormatter = (value: any) => - getTimeFormatterForGranularity()(value); + getTimeFormatter(formData.dateFormat)(value); if (treePath.length > 0) { const pointerEvent = eventParams.event.event; const drillToDetailFilters: BinaryQueryObjectFilterClause[] = []; @@ -139,12 +139,10 @@ export default function EchartsTreemap({ col: groupby[i], op: '==', val, - formattedVal: isTemporalColumn( - getColumnLabel(groupby[i]), - datasource, - ) - ? String(timestampFormatter(val)) - : String(val), + formattedVal: + getColumnLabel(groupby[i]) === formData.granularitySqla + ? String(timestampFormatter(val)) + : String(val), }); }); onContextMenu(pointerEvent.clientX, pointerEvent.clientY, { diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/utils/eventHandlers.ts b/superset-frontend/plugins/plugin-chart-echarts/src/utils/eventHandlers.ts index f611b11125c09..542c2ba4c0116 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/utils/eventHandlers.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/utils/eventHandlers.ts @@ -21,11 +21,9 @@ import { ContextMenuFilters, DataMask, QueryFormColumn, - getTimeFormatterForGranularity, - ChartClient, + getTimeFormatter, getColumnLabel, } from '@superset-ui/core'; -import { isTemporalColumn } from '@superset-ui/chart-controls'; import { BaseTransformedProps, @@ -116,26 +114,21 @@ export const contextMenuEventHandler = async (e: Event) => { if (onContextMenu) { const timestampFormatter = (value: any) => - getTimeFormatterForGranularity()(value); + getTimeFormatter(formData.dateFormat)(value); e.event.stop(); const pointerEvent = e.event.event; const drillFilters: BinaryQueryObjectFilterClause[] = []; if (groupby.length > 0) { - const datasource = await new ChartClient() - .loadDatasource(formData.datasource, undefined) - .then(data => data); const values = labelMap[e.name]; groupby.forEach((dimension, i) => drillFilters.push({ col: dimension, op: '==', val: values[i], - formattedVal: isTemporalColumn( - getColumnLabel(dimension), - datasource, - ) - ? String(timestampFormatter(values[i])) - : String(values[i]), + formattedVal: + getColumnLabel(dimension) === formData.granularitySqla + ? String(timestampFormatter(values[i])) + : String(values[i]), }), ); } From 3c047636f4cb2bd59c72a1518f009fd6e82a4de3 Mon Sep 17 00:00:00 2001 From: Lily Kuang Date: Thu, 20 Apr 2023 18:33:45 -0700 Subject: [PATCH 06/10] lint --- .../plugin-chart-echarts/src/Sunburst/EchartsSunburst.tsx | 6 +----- .../plugin-chart-echarts/src/Treemap/EchartsTreemap.tsx | 5 ----- 2 files changed, 1 insertion(+), 10 deletions(-) diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/EchartsSunburst.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/EchartsSunburst.tsx index fffa517a57679..e3d533dede178 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/EchartsSunburst.tsx +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/EchartsSunburst.tsx @@ -19,7 +19,6 @@ import React, { useCallback } from 'react'; import { BinaryQueryObjectFilterClause, - ChartClient, getColumnLabel, getTimeFormatter, } from '@superset-ui/core'; @@ -45,7 +44,7 @@ export default function EchartsSunburst(props: SunburstTransformedProps) { refs, emitCrossFilters, } = props; - const { columns, datasource } = formData; + const { columns } = formData; const getCrossFilterDataMask = useCallback( (treePathInfo: TreePathInfo[]) => { @@ -119,9 +118,6 @@ export default function EchartsSunburst(props: SunburstTransformedProps) { const timestampFormatter = (value: any) => getTimeFormatter(formData.dateFormat)(value); if (columns?.length) { - const dataset = await new ChartClient() - .loadDatasource(datasource, undefined) - .then(data => data); treePath.forEach((path, i) => drillToDetailFilters.push({ col: columns[i], diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/EchartsTreemap.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/EchartsTreemap.tsx index e7f7f9084a8a4..2351b89de5843 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/EchartsTreemap.tsx +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/EchartsTreemap.tsx @@ -20,11 +20,9 @@ import { DataRecordValue, BinaryQueryObjectFilterClause, getTimeFormatter, - ChartClient, getColumnLabel, } from '@superset-ui/core'; import React, { useCallback } from 'react'; -import { isTemporalColumn } from '@superset-ui/chart-controls'; import Echart from '../components/Echart'; import { NULL_STRING } from '../constants'; import { EventHandlers } from '../types'; @@ -118,9 +116,6 @@ export default function EchartsTreemap({ eventParams.event.stop(); const { data, treePathInfo } = eventParams; const { treePath } = extractTreePathInfo(treePathInfo); - const datasource = await new ChartClient() - .loadDatasource(formData.datasource, undefined) - .then(data => data); const timestampFormatter = (value: any) => getTimeFormatter(formData.dateFormat)(value); if (treePath.length > 0) { From 49302fa25e6addce57e8e9c4217ea16bdb6519c8 Mon Sep 17 00:00:00 2001 From: Lily Kuang Date: Mon, 24 Apr 2023 21:22:05 -0700 Subject: [PATCH 07/10] add getColtypesMapping to transformProps --- .../src/WorldMap.js | 2 +- .../src/BoxPlot/transformProps.ts | 1 + .../src/Funnel/transformProps.ts | 4 ++- .../src/Gauge/transformProps.ts | 3 ++ .../src/Graph/EchartsGraph.tsx | 20 ++++++++++++- .../src/Graph/transformProps.ts | 10 +++++-- .../EchartsMixedTimeseries.tsx | 15 +++++----- .../src/MixedTimeseries/transformProps.ts | 6 +++- .../src/Pie/transformProps.ts | 1 + .../src/Radar/transformProps.ts | 1 + .../src/Sunburst/EchartsSunburst.tsx | 16 +++++----- .../src/Sunburst/transformProps.ts | 1 + .../src/Timeseries/EchartsTimeseries.tsx | 15 +++++----- .../src/Timeseries/transformProps.ts | 1 + .../src/Treemap/EchartsTreemap.tsx | 14 +++++---- .../src/Treemap/transformProps.ts | 1 + .../plugins/plugin-chart-echarts/src/types.ts | 1 + .../src/utils/eventHandlers.ts | 29 ++++++++++--------- 18 files changed, 94 insertions(+), 47 deletions(-) diff --git a/superset-frontend/plugins/legacy-plugin-chart-world-map/src/WorldMap.js b/superset-frontend/plugins/legacy-plugin-chart-world-map/src/WorldMap.js index f81692e3dd529..f655aaff7c822 100644 --- a/superset-frontend/plugins/legacy-plugin-chart-world-map/src/WorldMap.js +++ b/superset-frontend/plugins/legacy-plugin-chart-world-map/src/WorldMap.js @@ -168,7 +168,7 @@ function WorldMap(element, props) { } }; - const handleContextMenu = async source => { + const handleContextMenu = source => { const pointerEvent = d3.event; pointerEvent.preventDefault(); const key = source.id || source.country; diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BoxPlot/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/BoxPlot/transformProps.ts index 54a1cbfd205ac..0edeadb7fa1c3 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/BoxPlot/transformProps.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/BoxPlot/transformProps.ts @@ -297,5 +297,6 @@ export default function transformProps( selectedValues, onContextMenu, refs, + coltypeMapping, }; } diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/transformProps.ts index 07da17d2527d8..ac2f650e328d7 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/transformProps.ts +++ b/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, }; } diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/transformProps.ts index 6ff97bf0c53cc..27e6c9f19795a 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/transformProps.ts +++ b/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, }; } diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Graph/EchartsGraph.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Graph/EchartsGraph.tsx index 8e90bf1791f9a..815340383c8eb 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Graph/EchartsGraph.tsx +++ b/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(node.name), + numberFormatter: getNumberFormatter(node.name), + coltype: coltypeMapping?.[getColumnLabel(node.col)], + }), + }, + ], groupbyFieldName: node.col === formData.source ? 'source' : 'target', }, diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Graph/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Graph/transformProps.ts index d61c229f0767c..256b984f7d0c1 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Graph/transformProps.ts +++ b/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, }; } diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/EchartsMixedTimeseries.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/EchartsMixedTimeseries.tsx index 2e9f0240d182d..fefac6fc3f717 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/EchartsMixedTimeseries.tsx +++ b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/EchartsMixedTimeseries.tsx @@ -23,12 +23,13 @@ import { 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, @@ -47,6 +48,7 @@ export default function EchartsMixedTimeseries({ xValueFormatter, xAxis, refs, + coltypeMapping, }: EchartsMixedTimeseriesChartTransformedProps) { const isFirstQuery = useCallback( (seriesIndex: number) => seriesIndex < seriesBreakdown, @@ -135,8 +137,6 @@ export default function EchartsMixedTimeseries({ const drillToDetailFilters: BinaryQueryObjectFilterClause[] = []; const drillByFilters: BinaryQueryObjectFilterClause[] = []; const isFirst = isFirstQuery(seriesIndex); - const timestampFormatter = (value: any) => - getTimeFormatter(formData.dateFormat)(value); const values = [ ...(eventParams.name ? [eventParams.name] : []), ...(isFirst ? labelMap : labelMapB)[eventParams.seriesName], @@ -171,10 +171,11 @@ export default function EchartsMixedTimeseries({ col: dimension, op: '==', val: values[i], - formattedVal: - DTTM_ALIAS === getColumnLabel(dimension) - ? String(timestampFormatter(values[i])) - : String(values[i]), + formattedVal: formatSeriesName(String(values[i]), { + timeFormatter: getTimeFormatter(values[i]), + numberFormatter: getNumberFormatter(values[i]), + coltype: coltypeMapping?.[getColumnLabel(dimension)], + }), }), ); onContextMenu(pointerEvent.clientX, pointerEvent.clientY, { diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts index fee6183a2c71f..a924292980a63 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts +++ b/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, }; } diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Pie/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Pie/transformProps.ts index 76765cd8010b0..7d30917b188ab 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Pie/transformProps.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Pie/transformProps.ts @@ -345,5 +345,6 @@ export default function transformProps( onContextMenu, refs, emitCrossFilters, + coltypeMapping, }; } diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Radar/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Radar/transformProps.ts index 56d4be05ce137..c8c3c7ed150eb 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Radar/transformProps.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Radar/transformProps.ts @@ -259,5 +259,6 @@ export default function transformProps( selectedValues, onContextMenu, refs, + coltypeMapping, }; } diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/EchartsSunburst.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/EchartsSunburst.tsx index e3d533dede178..f07a4493e4126 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/EchartsSunburst.tsx +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/EchartsSunburst.tsx @@ -20,11 +20,13 @@ import React, { useCallback } from 'react'; 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 ?? []) @@ -43,6 +45,7 @@ export default function EchartsSunburst(props: SunburstTransformedProps) { onContextMenu, refs, emitCrossFilters, + coltypeMapping, } = props; const { columns } = formData; @@ -115,8 +118,6 @@ export default function EchartsSunburst(props: SunburstTransformedProps) { const pointerEvent = eventParams.event.event; const drillToDetailFilters: BinaryQueryObjectFilterClause[] = []; const drillByFilters: BinaryQueryObjectFilterClause[] = []; - const timestampFormatter = (value: any) => - getTimeFormatter(formData.dateFormat)(value); if (columns?.length) { treePath.forEach((path, i) => drillToDetailFilters.push({ @@ -131,11 +132,12 @@ export default function EchartsSunburst(props: SunburstTransformedProps) { col: columns[treePath.length - 1], op: '==', val, - formattedVal: - getColumnLabel(columns[treePath.length - 1]) === - formData.granularitySqla - ? String(timestampFormatter(val)) - : String(val), + formattedVal: formatSeriesName(String(val), { + timeFormatter: getTimeFormatter(val), + numberFormatter: getNumberFormatter(val), + coltype: + coltypeMapping?.[getColumnLabel(columns[treePath.length - 1])], + }), }); } onContextMenu(pointerEvent.clientX, pointerEvent.clientY, { diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/transformProps.ts index 51e89f8c6c73e..a12a757e444c6 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/transformProps.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/transformProps.ts @@ -377,5 +377,6 @@ export default function transformProps( selectedValues: filterState.selectedValues || [], onContextMenu, refs, + coltypeMapping, }; } diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/EchartsTimeseries.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/EchartsTimeseries.tsx index de714fc75b547..da4b1e30dea5c 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/EchartsTimeseries.tsx +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/EchartsTimeseries.tsx @@ -23,6 +23,7 @@ import { AxisType, getTimeFormatter, getColumnLabel, + getNumberFormatter, } from '@superset-ui/core'; import { ViewRootGroup } from 'echarts/types/src/util/types'; import GlobalModel from 'echarts/types/src/model/Global'; @@ -30,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; @@ -52,6 +53,7 @@ export default function EchartsTimeseries({ xAxis, refs, emitCrossFilters, + coltypeMapping, }: TimeseriesChartTransformedProps) { const { stack } = formData; const echartRef = useRef(null); @@ -205,8 +207,6 @@ export default function EchartsTimeseries({ const drillToDetailFilters: BinaryQueryObjectFilterClause[] = []; const drillByFilters: BinaryQueryObjectFilterClause[] = []; const pointerEvent = eventParams.event.event; - const timestampFormatter = (value: any) => - getTimeFormatter(formData.granularitySqla)(value); const values = [ ...(eventParams.name ? [eventParams.name] : []), ...labelMap[seriesName], @@ -241,10 +241,11 @@ export default function EchartsTimeseries({ col: dimension, op: '==', val, - formattedVal: - DTTM_ALIAS === getColumnLabel(dimension) - ? String(timestampFormatter(val)) - : String(val), + formattedVal: formatSeriesName(String(values[i]), { + timeFormatter: getTimeFormatter(values[i]), + numberFormatter: getNumberFormatter(values[i]), + coltype: coltypeMapping?.[getColumnLabel(dimension)], + }), }); }); diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts index 84b97fae52bdc..ac096a0697c1d 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts @@ -533,5 +533,6 @@ export default function transformProps( type: xAxisType, }, refs, + coltypeMapping: dataTypes, }; } diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/EchartsTreemap.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/EchartsTreemap.tsx index 2351b89de5843..7f2325da47149 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/EchartsTreemap.tsx +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/EchartsTreemap.tsx @@ -21,6 +21,7 @@ import { BinaryQueryObjectFilterClause, getTimeFormatter, getColumnLabel, + getNumberFormatter, } from '@superset-ui/core'; import React, { useCallback } from 'react'; import Echart from '../components/Echart'; @@ -28,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, @@ -41,6 +43,7 @@ export default function EchartsTreemap({ selectedValues, width, formData, + coltypeMapping, }: TreemapTransformedProps) { const getCrossFilterDataMask = useCallback( (data, treePathInfo) => { @@ -116,8 +119,6 @@ export default function EchartsTreemap({ eventParams.event.stop(); const { data, treePathInfo } = eventParams; const { treePath } = extractTreePathInfo(treePathInfo); - const timestampFormatter = (value: any) => - getTimeFormatter(formData.dateFormat)(value); if (treePath.length > 0) { const pointerEvent = eventParams.event.event; const drillToDetailFilters: BinaryQueryObjectFilterClause[] = []; @@ -134,10 +135,11 @@ export default function EchartsTreemap({ col: groupby[i], op: '==', val, - formattedVal: - getColumnLabel(groupby[i]) === formData.granularitySqla - ? String(timestampFormatter(val)) - : String(val), + formattedVal: formatSeriesName(String(val), { + timeFormatter: getTimeFormatter(val), + numberFormatter: getNumberFormatter(val), + coltype: coltypeMapping?.[getColumnLabel(groupby[i])], + }), }); }); onContextMenu(pointerEvent.clientX, pointerEvent.clientY, { diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/transformProps.ts index b220b55b3d3c1..89088be5fa03e 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/transformProps.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/transformProps.ts @@ -294,5 +294,6 @@ export default function transformProps( selectedValues: filterState.selectedValues || [], onContextMenu, refs, + coltypeMapping, }; } diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/types.ts b/superset-frontend/plugins/plugin-chart-echarts/src/types.ts index 142c41c17d746..4b96f73bb9d6e 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/types.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/types.ts @@ -131,6 +131,7 @@ export interface BaseTransformedProps { refs: Refs; width: number; emitCrossFilters?: boolean; + coltypeMapping?: Record; } export type CrossFilterTransformedProps = { diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/utils/eventHandlers.ts b/superset-frontend/plugins/plugin-chart-echarts/src/utils/eventHandlers.ts index 542c2ba4c0116..f3fadfcbe50c0 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/utils/eventHandlers.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/utils/eventHandlers.ts @@ -21,8 +21,9 @@ import { ContextMenuFilters, DataMask, QueryFormColumn, - getTimeFormatter, getColumnLabel, + getNumberFormatter, + getTimeFormatter, } from '@superset-ui/core'; import { @@ -30,6 +31,7 @@ import { CrossFilterTransformedProps, EventHandlers, } from '../types'; +import { formatSeriesName } from './series'; export type Event = { name: string; @@ -109,28 +111,27 @@ export const contextMenuEventHandler = getCrossFilterDataMask: ( value: string, ) => ContextMenuFilters['crossFilter'], - formData: any, + coltypeMapping?: Record, ) => - async (e: Event) => { + (e: Event) => { if (onContextMenu) { - const timestampFormatter = (value: any) => - getTimeFormatter(formData.dateFormat)(value); e.event.stop(); const pointerEvent = e.event.event; 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: - getColumnLabel(dimension) === formData.granularitySqla - ? String(timestampFormatter(values[i])) - : String(values[i]), - }), - ); + formattedVal: formatSeriesName(String(values[i]), { + timeFormatter: getTimeFormatter(values[i]), + numberFormatter: getNumberFormatter(values[i]), + coltype: coltypeMapping?.[getColumnLabel(dimension)], + }), + }); + }); } onContextMenu(pointerEvent.clientX, pointerEvent.clientY, { drillToDetail: drillFilters, @@ -150,7 +151,7 @@ export const allEventHandlers = ( labelMap, emitCrossFilters, selectedValues, - formData, + coltypeMapping, } = transformedProps; const eventHandlers: EventHandlers = { click: clickEventHandler( @@ -163,7 +164,7 @@ export const allEventHandlers = ( onContextMenu, labelMap, getCrossFilterDataMask(selectedValues, groupby, labelMap), - formData, + coltypeMapping, ), }; return eventHandlers; From 6edf8f3ac2d6840e6fcaf0fe2b93dced5be72e84 Mon Sep 17 00:00:00 2001 From: Lily Kuang Date: Mon, 24 Apr 2023 21:24:22 -0700 Subject: [PATCH 08/10] revert WorldMap.js --- .../legacy-plugin-chart-world-map/src/WorldMap.js | 11 +---------- 1 file changed, 1 insertion(+), 10 deletions(-) diff --git a/superset-frontend/plugins/legacy-plugin-chart-world-map/src/WorldMap.js b/superset-frontend/plugins/legacy-plugin-chart-world-map/src/WorldMap.js index f655aaff7c822..c8aa2cdc2a127 100644 --- a/superset-frontend/plugins/legacy-plugin-chart-world-map/src/WorldMap.js +++ b/superset-frontend/plugins/legacy-plugin-chart-world-map/src/WorldMap.js @@ -21,11 +21,9 @@ import d3 from 'd3'; import PropTypes from 'prop-types'; import { extent as d3Extent } from 'd3-array'; import { - CategoricalColorNamespace, - getColumnLabel, getNumberFormatter, - getTimeFormatter, getSequentialSchemeRegistry, + CategoricalColorNamespace, } from '@superset-ui/core'; import Datamap from 'datamaps/dist/datamaps.world.min'; import { ColorBy } from './utils'; @@ -73,7 +71,6 @@ function WorldMap(element, props) { inContextMenu, filterState, emitCrossFilters, - formData, } = props; const div = d3.select(element); div.classed('superset-legacy-chart-world-map', true); @@ -174,8 +171,6 @@ function WorldMap(element, props) { const key = source.id || source.country; const val = countryFieldtype === 'name' ? mapData[key]?.name : mapData[key]?.country; - const timestampFormatter = value => - getTimeFormatter(formData.dateFormat)(value); let drillToDetailFilters; let drillByFilters; if (val) { @@ -192,10 +187,6 @@ function WorldMap(element, props) { col: entity, op: '==', val, - formattedVal: - getColumnLabel(entity) === formData.granularitySqla - ? String(timestampFormatter(val)) - : String(val), }, ]; } From b29e0611c5e0b0426e61f5297bfa9cb9dee864fd Mon Sep 17 00:00:00 2001 From: Lily Kuang Date: Tue, 25 Apr 2023 11:58:36 -0700 Subject: [PATCH 09/10] numberFormat and dateFormat --- .../plugin-chart-echarts/src/Graph/EchartsGraph.tsx | 4 ++-- .../src/MixedTimeseries/EchartsMixedTimeseries.tsx | 6 +++--- .../src/Sunburst/EchartsSunburst.tsx | 6 +++--- .../src/Timeseries/EchartsTimeseries.tsx | 6 +++--- .../plugin-chart-echarts/src/Treemap/EchartsTreemap.tsx | 6 +++--- .../plugin-chart-echarts/src/utils/eventHandlers.ts | 9 ++++++--- 6 files changed, 20 insertions(+), 17 deletions(-) diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Graph/EchartsGraph.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Graph/EchartsGraph.tsx index 815340383c8eb..308d28f719137 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Graph/EchartsGraph.tsx +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Graph/EchartsGraph.tsx @@ -156,8 +156,8 @@ export default function EchartsGraph({ op: '==', val: node.name, formattedVal: formatSeriesName(node.name, { - timeFormatter: getTimeFormatter(node.name), - numberFormatter: getNumberFormatter(node.name), + timeFormatter: getTimeFormatter(formData.dateFormat), + numberFormatter: getNumberFormatter(formData.numberFormat), coltype: coltypeMapping?.[getColumnLabel(node.col)], }), }, diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/EchartsMixedTimeseries.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/EchartsMixedTimeseries.tsx index fefac6fc3f717..8686042611c5d 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/EchartsMixedTimeseries.tsx +++ b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/EchartsMixedTimeseries.tsx @@ -171,9 +171,9 @@ export default function EchartsMixedTimeseries({ col: dimension, op: '==', val: values[i], - formattedVal: formatSeriesName(String(values[i]), { - timeFormatter: getTimeFormatter(values[i]), - numberFormatter: getNumberFormatter(values[i]), + formattedVal: formatSeriesName(values[i], { + timeFormatter: getTimeFormatter(formData.dateFormat), + numberFormatter: getNumberFormatter(formData.numberFormat), coltype: coltypeMapping?.[getColumnLabel(dimension)], }), }), diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/EchartsSunburst.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/EchartsSunburst.tsx index f07a4493e4126..29677d25640f2 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/EchartsSunburst.tsx +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/EchartsSunburst.tsx @@ -132,9 +132,9 @@ export default function EchartsSunburst(props: SunburstTransformedProps) { col: columns[treePath.length - 1], op: '==', val, - formattedVal: formatSeriesName(String(val), { - timeFormatter: getTimeFormatter(val), - numberFormatter: getNumberFormatter(val), + formattedVal: formatSeriesName(val, { + timeFormatter: getTimeFormatter(formData.dateFormat), + numberFormatter: getNumberFormatter(formData.numberFormat), coltype: coltypeMapping?.[getColumnLabel(columns[treePath.length - 1])], }), diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/EchartsTimeseries.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/EchartsTimeseries.tsx index da4b1e30dea5c..13c0b9fd4e343 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/EchartsTimeseries.tsx +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/EchartsTimeseries.tsx @@ -241,9 +241,9 @@ export default function EchartsTimeseries({ col: dimension, op: '==', val, - formattedVal: formatSeriesName(String(values[i]), { - timeFormatter: getTimeFormatter(values[i]), - numberFormatter: getNumberFormatter(values[i]), + formattedVal: formatSeriesName(values[i], { + timeFormatter: getTimeFormatter(formData.dateFormat), + numberFormatter: getNumberFormatter(formData.numberFormat), coltype: coltypeMapping?.[getColumnLabel(dimension)], }), }); diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/EchartsTreemap.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/EchartsTreemap.tsx index 7f2325da47149..00dcc11aacef0 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/EchartsTreemap.tsx +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/EchartsTreemap.tsx @@ -135,9 +135,9 @@ export default function EchartsTreemap({ col: groupby[i], op: '==', val, - formattedVal: formatSeriesName(String(val), { - timeFormatter: getTimeFormatter(val), - numberFormatter: getNumberFormatter(val), + formattedVal: formatSeriesName(val, { + timeFormatter: getTimeFormatter(formData.dateFormat), + numberFormatter: getNumberFormatter(formData.numberFormat), coltype: coltypeMapping?.[getColumnLabel(groupby[i])], }), }); diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/utils/eventHandlers.ts b/superset-frontend/plugins/plugin-chart-echarts/src/utils/eventHandlers.ts index f3fadfcbe50c0..b0d00f759e12a 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/utils/eventHandlers.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/utils/eventHandlers.ts @@ -111,6 +111,7 @@ export const contextMenuEventHandler = getCrossFilterDataMask: ( value: string, ) => ContextMenuFilters['crossFilter'], + formData: , coltypeMapping?: Record, ) => (e: Event) => { @@ -125,9 +126,9 @@ export const contextMenuEventHandler = col: dimension, op: '==', val: values[i], - formattedVal: formatSeriesName(String(values[i]), { - timeFormatter: getTimeFormatter(values[i]), - numberFormatter: getNumberFormatter(values[i]), + formattedVal: formatSeriesName(values[i], { + timeFormatter: getTimeFormatter(formData.dateFormat), + numberFormatter: getNumberFormatter(formData.numberFormat), coltype: coltypeMapping?.[getColumnLabel(dimension)], }), }); @@ -152,6 +153,7 @@ export const allEventHandlers = ( emitCrossFilters, selectedValues, coltypeMapping, + formData, } = transformedProps; const eventHandlers: EventHandlers = { click: clickEventHandler( @@ -164,6 +166,7 @@ export const allEventHandlers = ( onContextMenu, labelMap, getCrossFilterDataMask(selectedValues, groupby, labelMap), + formData, coltypeMapping, ), }; From e4d077d09d57368ad1e1f98694ad0cc358292575 Mon Sep 17 00:00:00 2001 From: Lily Kuang Date: Tue, 25 Apr 2023 12:17:58 -0700 Subject: [PATCH 10/10] fix lint --- .../plugins/plugin-chart-echarts/src/utils/eventHandlers.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/utils/eventHandlers.ts b/superset-frontend/plugins/plugin-chart-echarts/src/utils/eventHandlers.ts index b0d00f759e12a..98e14d59ed0b9 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/utils/eventHandlers.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/utils/eventHandlers.ts @@ -21,6 +21,7 @@ import { ContextMenuFilters, DataMask, QueryFormColumn, + QueryFormData, getColumnLabel, getNumberFormatter, getTimeFormatter, @@ -111,7 +112,7 @@ export const contextMenuEventHandler = getCrossFilterDataMask: ( value: string, ) => ContextMenuFilters['crossFilter'], - formData: , + formData: QueryFormData, coltypeMapping?: Record, ) => (e: Event) => {