diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/sharedControls.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/sharedControls.tsx index d83f21ce87e58..9a80b0bf36841 100644 --- a/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/sharedControls.tsx +++ b/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/sharedControls.tsx @@ -344,7 +344,7 @@ const x_axis_format: SharedControlConfig<'SelectControl', SelectDefaultOption> = const size_format: SharedControlConfig<'SelectControl', SelectDefaultOption> = { type: 'SelectControl', freeForm: true, - label: t('Size Format'), + label: t('Size format'), renderTrigger: true, default: DEFAULT_NUMBER_FORMAT, choices: D3_FORMAT_OPTIONS, diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/transformProps.ts index f39557531db22..698465543f9c5 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/transformProps.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/transformProps.ts @@ -14,7 +14,8 @@ import { isSavedMetric, // DODO added 30135470 } from '@superset-ui/core'; import { BigNumberTotalChartProps, BigNumberVizProps } from '../types'; -import { getDateFormatter, parseMetricValue } from '../utils'; +import { parseMetricValue } from '../utils'; +import { getDateFormatter } from '../../utils/getDateFormatter'; // DODO added 45025582 import { Refs } from '../../types'; export default function transformProps( diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.ts index 691c8340ba1d6..a724ec38fbed7 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.ts @@ -23,7 +23,8 @@ import { TimeSeriesDatum, BigNumberVizProps, } from '../types'; -import { getDateFormatter, parseMetricValue } from '../utils'; +import { parseMetricValue } from '../utils'; +import { getDateFormatter } from '../../utils/getDateFormatter'; // DODO added 45025582 import { getDefaultTooltip } from '../../utils/tooltip'; import { Refs } from '../../types'; import { BigNumberWithTrendLineTransformPropsDodo } from '../../DodoExtensions/BigNumber/BigNumberWithTrendline/transformPropsDodo'; diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/utils.ts b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/utils.ts index 706175776aade..4ff57ffc264ba 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/utils.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/utils.ts @@ -22,15 +22,6 @@ const parseMetricValue = (metricValue: number | string | null) => { return metricValue; }; -const getDateFormatter = ( - timeFormat: string, - granularity?: TimeGranularity, - fallbackFormat?: string | null, -) => - timeFormat === smartDateFormatter.id - ? getTimeFormatterForGranularity(granularity) - : getTimeFormatter(timeFormat ?? fallbackFormat); - const calculateColor = ( className: string | undefined, positiveColor: string | undefined, @@ -166,4 +157,4 @@ const getColors = ( return parsedColors; }; -export { calculateColor, getDateFormatter, parseMetricValue, getColors }; +export { calculateColor, parseMetricValue, getColors }; diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/DodoExtensions/BubbleDodo/BubbleDodo.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/DodoExtensions/BubbleDodo/BubbleDodo.tsx index 38214e2ffdb64..4368bc3b2e6ad 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/DodoExtensions/BubbleDodo/BubbleDodo.tsx +++ b/superset-frontend/plugins/plugin-chart-echarts/src/DodoExtensions/BubbleDodo/BubbleDodo.tsx @@ -37,7 +37,6 @@ export default function BubbleDodo({ labelFontSize, labelColor, tooltipLabels, - // @ts-ignore refs, }: BubbleDodoComponentProps) { const grid = useMemo( @@ -60,6 +59,7 @@ export default function BubbleDodo({ const tooltip = useMemo( () => ({ + appendToBody: true, show: true, formatter(param: { data: Array }) { const x = getNumber(param.data[X_INDEX]); @@ -72,7 +72,14 @@ export default function BubbleDodo({ }, position: 'top', }), - [sizeFormatter, xAxisFormatter, yAxisFormatter, tooltipLabels], + [ + tooltipLabels.x, + tooltipLabels.y, + tooltipLabels.size, + xAxisFormatter, + yAxisFormatter, + sizeFormatter, + ], ); const xAxis = useMemo( @@ -85,8 +92,12 @@ export default function BubbleDodo({ nameTextStyle: { fontWeight: 'bold', }, + axisLabel: { + hideOverlap: true, + formatter: xAxisFormatter, + }, }), - [xAxisName, xLogScale, xNameGap, xNameLocation], + [xAxisFormatter, xAxisName, xLogScale, xNameGap, xNameLocation], ); const yAxis = useMemo( @@ -99,8 +110,12 @@ export default function BubbleDodo({ nameTextStyle: { fontWeight: 'bold', }, + axisLabel: { + hideOverlap: true, + formatter: yAxisFormatter, + }, }), - [yAxisName, yLogScale, yNameGap, yNameLocation], + [yAxisFormatter, yAxisName, yLogScale, yNameGap, yNameLocation], ); const series = useMemo( diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/DodoExtensions/BubbleDodo/controlPanel.ts b/superset-frontend/plugins/plugin-chart-echarts/src/DodoExtensions/BubbleDodo/controlPanel.ts index dba41a0d4f45d..3fcdcc64007b0 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/DodoExtensions/BubbleDodo/controlPanel.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/DodoExtensions/BubbleDodo/controlPanel.ts @@ -1,6 +1,8 @@ -import { t } from '@superset-ui/core'; +import { smartDateFormatter, t } from '@superset-ui/core'; import { ControlPanelConfig, + D3_FORMAT_DOCS, + D3_TIME_FORMAT_OPTIONS, formatSelectOptions, } from '@superset-ui/chart-controls'; @@ -20,6 +22,35 @@ const xAxis = { }, }, ], + [ + { + name: 'x_force_timestamp_formatting', + config: { + type: 'CheckboxControl', + label: t('Force date format'), + renderTrigger: true, + default: false, + description: t( + 'Use date formatting even when metric value is not a timestamp', + ), + }, + }, + ], + [ + { + name: 'x_time_format', + config: { + type: 'SelectControl', + freeForm: true, + label: t('Date format'), + renderTrigger: true, + choices: D3_TIME_FORMAT_OPTIONS, + description: D3_FORMAT_DOCS, + default: smartDateFormatter.id, + }, + }, + ], + ['x_axis_format'], [ { name: 'x_axis_name', @@ -73,6 +104,35 @@ const yAxis = { }, }, ], + [ + { + name: 'y_force_timestamp_formatting', + config: { + type: 'CheckboxControl', + label: t('Force date format'), + renderTrigger: true, + default: false, + description: t( + 'Use date formatting even when metric value is not a timestamp', + ), + }, + }, + ], + [ + { + name: 'y_time_format', + config: { + type: 'SelectControl', + freeForm: true, + label: t('Date format'), + renderTrigger: true, + choices: D3_TIME_FORMAT_OPTIONS, + description: D3_FORMAT_DOCS, + default: smartDateFormatter.id, + }, + }, + ], + ['y_axis_format'], [ { name: 'y_axis_name', @@ -255,12 +315,14 @@ const config: ControlPanelConfig = { }, { ...labels }, { ...dimentions }, + // @ts-ignore { ...xAxis }, + // @ts-ignore { ...yAxis }, { - label: t('Tooltip'), + label: t('Size'), expanded: false, - controlSetRows: [['x_axis_format'], ['y_axis_format'], ['size_format']], + controlSetRows: [['size_format']], }, ], }; diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/DodoExtensions/BubbleDodo/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/DodoExtensions/BubbleDodo/transformProps.ts index 57a44219cbdfa..d017788b4ab64 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/DodoExtensions/BubbleDodo/transformProps.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/DodoExtensions/BubbleDodo/transformProps.ts @@ -2,10 +2,14 @@ import { bootstrapData } from 'src/preamble'; import { DataRecord, DataRecordValue, + extractTimegrain, getValueFormatter, Metric, + QueryFormData, } from '@superset-ui/core'; import { BubbleDodoTransformProps, BubbleDodoComponentProps } from './types'; +import { Refs } from '../../types'; +import { getDateFormatter } from '../../utils/getDateFormatter'; const locale = bootstrapData?.common?.locale || 'en'; @@ -78,6 +82,7 @@ export default function transformProps(chartProps: BubbleDodoTransformProps) { width, queriesData, datasource: { metrics }, + rawFormData, formData: { series, // dimension on form entity, // entity on form @@ -103,6 +108,10 @@ export default function transformProps(chartProps: BubbleDodoTransformProps) { labelLocation, labelFontSize, labelColor, + xForceTimestampFormatting, + yForceTimestampFormatting, + xTimeFormat, + yTimeFormat, }, } = chartProps; @@ -179,8 +188,35 @@ export default function transformProps(chartProps: BubbleDodoTransformProps) { const marginTop = getIntPositive(marginTopInPixel); const xNameGap = getIntPositive(xNameGapInPixel); const yNameGap = getIntPositive(yNameGapInPixel); - const xAxisFormatter = getFormatter(xAxisFormat); - const yAxisFormatter = getFormatter(yAxisFormat); + + let xMetricEntry: Metric | undefined; + let yMetricEntry: Metric | undefined; + if (chartProps.datasource?.metrics) { + xMetricEntry = chartProps.datasource.metrics.find( + metricItem => metricItem.metric_name === axisXInfo, + ); + yMetricEntry = chartProps.datasource.metrics.find( + metricItem => metricItem.metric_name === axisYInfo, + ); + } + const granularity = extractTimegrain(rawFormData as QueryFormData); + const xFormatTime = getDateFormatter( + xTimeFormat, + granularity, + xMetricEntry?.d3format, + ); + const yFormatTime = getDateFormatter( + yTimeFormat, + granularity, + yMetricEntry?.d3format, + ); + + const xAxisFormatter = xForceTimestampFormatting + ? xFormatTime + : getFormatter(xAxisFormat); + const yAxisFormatter = yForceTimestampFormatting + ? yFormatTime + : getFormatter(yAxisFormat); const sizeFormatter = getFormatter(sizeFormat); const tooltipLabels: BubbleDodoComponentProps['tooltipLabels'] = { @@ -189,6 +225,8 @@ export default function transformProps(chartProps: BubbleDodoTransformProps) { size: getTooltipLabel(bubbleSizeInfo, metrics, 'size'), }; + const refs: Refs = {}; + return { height, width, @@ -213,5 +251,6 @@ export default function transformProps(chartProps: BubbleDodoTransformProps) { labelFontSize, labelColor: labelColorHEX, tooltipLabels, + refs, }; } diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/DodoExtensions/BubbleDodo/types.ts b/superset-frontend/plugins/plugin-chart-echarts/src/DodoExtensions/BubbleDodo/types.ts index 75861d3e6220e..d44a78ace8a51 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/DodoExtensions/BubbleDodo/types.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/DodoExtensions/BubbleDodo/types.ts @@ -5,6 +5,7 @@ import { QueryFormData, ValueFormatter, } from '@superset-ui/core'; +import { Refs } from '../../types'; type BubbleDodoFormData = QueryFormData & { maxBubbleSize: string; @@ -19,12 +20,16 @@ type BubbleDodoFormData = QueryFormData & { xNameLocation: string; xNameGapInPixel: string; xAxisFormat: string; + xForceTimestampFormatting: boolean; + xTimeFormat: string; yLogScale: boolean; yAxisName: string; yNameLocation: string; yNameGapInPixel: string; yAxisFormat: string; + yForceTimestampFormatting: boolean; + yTimeFormat: string; sizeFormat: string; labelLocation: string; @@ -66,4 +71,5 @@ export type BubbleDodoComponentProps = { labelFontSize: string; labelColor?: string; tooltipLabels: { x: string; y: string; size: string }; + refs: Refs; }; diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/utils/getDateFormatter.ts b/superset-frontend/plugins/plugin-chart-echarts/src/utils/getDateFormatter.ts new file mode 100644 index 0000000000000..f604cfc27e92f --- /dev/null +++ b/superset-frontend/plugins/plugin-chart-echarts/src/utils/getDateFormatter.ts @@ -0,0 +1,16 @@ +// DODO created 45025582 +import { + getTimeFormatter, + getTimeFormatterForGranularity, + smartDateFormatter, + TimeGranularity, +} from '@superset-ui/core'; + +export const getDateFormatter = ( + timeFormat: string, + granularity?: TimeGranularity, + fallbackFormat?: string | null, +) => + timeFormat === smartDateFormatter.id + ? getTimeFormatterForGranularity(granularity) + : getTimeFormatter(timeFormat ?? fallbackFormat); diff --git a/superset/translations/en/LC_MESSAGES/messages.json b/superset/translations/en/LC_MESSAGES/messages.json index b8da95c9a0522..087913cae87b0 100644 --- a/superset/translations/en/LC_MESSAGES/messages.json +++ b/superset/translations/en/LC_MESSAGES/messages.json @@ -11786,6 +11786,12 @@ ], "End date include to time range": [ "" + ], + "Size format": [ + "" + ], + "Size": [ + "" ] } } diff --git a/superset/translations/ru/LC_MESSAGES/messages.json b/superset/translations/ru/LC_MESSAGES/messages.json index d0b26ea9ffeef..cba64f09cc17e 100644 --- a/superset/translations/ru/LC_MESSAGES/messages.json +++ b/superset/translations/ru/LC_MESSAGES/messages.json @@ -11226,6 +11226,12 @@ ], "End date include to time range": [ "Дата окончания включена в диапазон" + ], + "Size format": [ + "Формат размера" + ], + "Size": [ + "Размер" ] } }