mirror of https://github.com/apache/superset.git
feat: Funnel/tooltip-customization (#25666)
This commit is contained in:
parent
da42bf2dbb
commit
dfff3c1cba
|
@ -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.'),
|
||||
},
|
||||
},
|
||||
],
|
||||
],
|
||||
},
|
||||
],
|
||||
|
|
|
@ -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: {
|
||||
|
|
|
@ -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',
|
||||
|
|
Loading…
Reference in New Issue