diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/controlPanel.tsx index 44a88fee4bc0c..17c73d195bca3 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/controlPanel.tsx +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/controlPanel.tsx @@ -32,7 +32,8 @@ import { import { DEFAULT_FORM_DATA, EchartsFunnelLabelTypeType } from './types'; import { legendSection } from '../controls'; -const { labelType, numberFormat, showLabels } = DEFAULT_FORM_DATA; +const { labelType, numberFormat, showLabels, defaultTooltipLabel } = + DEFAULT_FORM_DATA; const funnelLegendSection = [...legendSection]; funnelLegendSection.splice(2, 1); @@ -84,7 +85,7 @@ const config: ControlPanelConfig = { name: 'label_type', config: { type: 'SelectControl', - label: t('Label Type'), + label: t('Label Contents'), default: labelType, renderTrigger: true, choices: [ @@ -101,7 +102,33 @@ const config: ControlPanelConfig = { t('Category, Value and Percentage'), ], ], - description: t('What should be shown on the label?'), + description: t('What should be shown as the label'), + }, + }, + ], + [ + { + name: 'tooltip_label_type', + config: { + type: 'SelectControl', + label: t('Tooltip Contents'), + default: defaultTooltipLabel, + renderTrigger: true, + choices: [ + [EchartsFunnelLabelTypeType.Key, t('Category Name')], + [EchartsFunnelLabelTypeType.Value, t('Value')], + [EchartsFunnelLabelTypeType.Percent, t('Percentage')], + [EchartsFunnelLabelTypeType.KeyValue, t('Category and Value')], + [ + EchartsFunnelLabelTypeType.KeyPercent, + t('Category and Percentage'), + ], + [ + EchartsFunnelLabelTypeType.KeyValuePercent, + t('Category, Value and Percentage'), + ], + ], + description: t('What should be shown as the tooltip label'), }, }, ], @@ -132,6 +159,18 @@ const config: ControlPanelConfig = { }, }, ], + [ + { + name: 'show_tooltip_labels', + config: { + type: 'CheckboxControl', + label: t('Show Tooltip Labels'), + renderTrigger: true, + default: showLabels, + description: t('Whether to display the tooltip labels.'), + }, + }, + ], ], }, ], 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 538ec27750d8d..6b76d16074e1e 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/transformProps.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/transformProps.ts @@ -64,6 +64,7 @@ export function formatFunnelLabel({ const name = sanitizeName ? sanitizeHtml(rawName) : rawName; const formattedValue = numberFormatter(value as number); const formattedPercent = percentFormatter((percent as number) / 100); + switch (labelType) { case EchartsFunnelLabelTypeType.Key: return name; @@ -93,7 +94,6 @@ export default function transformProps( queriesData, width, theme, - inContextMenu, emitCrossFilters, datasource, } = chartProps; @@ -107,6 +107,7 @@ export default function transformProps( gap, labelLine, labelType, + tooltipLabelType, legendMargin, legendOrientation, legendType, @@ -114,6 +115,8 @@ export default function transformProps( numberFormat, currencyFormat, showLabels, + inContextMenu, + showTooltipLabels, showLegend, sliceId, }: EchartsFunnelFormData = { @@ -227,13 +230,13 @@ export default function transformProps( }, tooltip: { ...getDefaultTooltip(refs), - show: !inContextMenu, + show: !inContextMenu && showTooltipLabels, trigger: 'item', formatter: (params: any) => formatFunnelLabel({ params, numberFormatter, - labelType: EchartsFunnelLabelTypeType.KeyValuePercent, + labelType: tooltipLabelType, }), }, legend: { diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/types.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/types.ts index 15adbc208041c..3c58a7e0e49b0 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/types.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/types.ts @@ -34,8 +34,10 @@ export type EchartsFunnelFormData = QueryFormData & groupby: QueryFormData[]; labelLine: boolean; labelType: EchartsFunnelLabelTypeType; + tooltipLabelType: EchartsFunnelLabelTypeType; metric?: string; showLabels: boolean; + showTooltipLabels: boolean; numberFormat: string; gap: number; sort: 'descending' | 'ascending' | 'none' | undefined; @@ -62,6 +64,7 @@ export const DEFAULT_FORM_DATA: EchartsFunnelFormData = { groupby: [], labelLine: false, labelType: EchartsFunnelLabelTypeType.Key, + defaultTooltipLabel: EchartsFunnelLabelTypeType.KeyValuePercent, legendOrientation: LegendOrientation.Top, legendType: LegendType.Scroll, numberFormat: 'SMART_NUMBER',