#45025582 В бабл чарте тултип выходит за рамки виджета | Оси отображать в формате дата

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,

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(

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';

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 };

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<number | string> }) {
         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(

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']],
     },
   ],
 };

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,
   };
 }

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;
 };

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);

superset/translations/en/LC_MESSAGES/messages.json

@@ -11786,6 +11786,12 @@
       ],
       "End date include to time range": [
         ""
+      ],
+      "Size format": [
+        ""
+      ],
+      "Size": [
+        ""
       ]
     }
   }

superset/translations/ru/LC_MESSAGES/messages.json

@@ -11226,6 +11226,12 @@
       ],
       "End date include to time range": [
         "Дата окончания включена в диапазон"
+      ],
+      "Size format": [
+        "Формат размера"
+      ],
+      "Size": [
+        "Размер"
       ]
     }
   }