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 { DEFAULT_FORM_DATA, EchartsFunnelLabelTypeType } from './types';
|
||||||
import { legendSection } from '../controls';
|
import { legendSection } from '../controls';
|
||||||
|
|
||||||
const { labelType, numberFormat, showLabels } = DEFAULT_FORM_DATA;
|
const { labelType, numberFormat, showLabels, defaultTooltipLabel } =
|
||||||
|
DEFAULT_FORM_DATA;
|
||||||
|
|
||||||
const funnelLegendSection = [...legendSection];
|
const funnelLegendSection = [...legendSection];
|
||||||
funnelLegendSection.splice(2, 1);
|
funnelLegendSection.splice(2, 1);
|
||||||
|
@ -84,7 +85,7 @@ const config: ControlPanelConfig = {
|
||||||
name: 'label_type',
|
name: 'label_type',
|
||||||
config: {
|
config: {
|
||||||
type: 'SelectControl',
|
type: 'SelectControl',
|
||||||
label: t('Label Type'),
|
label: t('Label Contents'),
|
||||||
default: labelType,
|
default: labelType,
|
||||||
renderTrigger: true,
|
renderTrigger: true,
|
||||||
choices: [
|
choices: [
|
||||||
|
@ -101,7 +102,33 @@ const config: ControlPanelConfig = {
|
||||||
t('Category, Value and Percentage'),
|
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 name = sanitizeName ? sanitizeHtml(rawName) : rawName;
|
||||||
const formattedValue = numberFormatter(value as number);
|
const formattedValue = numberFormatter(value as number);
|
||||||
const formattedPercent = percentFormatter((percent as number) / 100);
|
const formattedPercent = percentFormatter((percent as number) / 100);
|
||||||
|
|
||||||
switch (labelType) {
|
switch (labelType) {
|
||||||
case EchartsFunnelLabelTypeType.Key:
|
case EchartsFunnelLabelTypeType.Key:
|
||||||
return name;
|
return name;
|
||||||
|
@ -93,7 +94,6 @@ export default function transformProps(
|
||||||
queriesData,
|
queriesData,
|
||||||
width,
|
width,
|
||||||
theme,
|
theme,
|
||||||
inContextMenu,
|
|
||||||
emitCrossFilters,
|
emitCrossFilters,
|
||||||
datasource,
|
datasource,
|
||||||
} = chartProps;
|
} = chartProps;
|
||||||
|
@ -107,6 +107,7 @@ export default function transformProps(
|
||||||
gap,
|
gap,
|
||||||
labelLine,
|
labelLine,
|
||||||
labelType,
|
labelType,
|
||||||
|
tooltipLabelType,
|
||||||
legendMargin,
|
legendMargin,
|
||||||
legendOrientation,
|
legendOrientation,
|
||||||
legendType,
|
legendType,
|
||||||
|
@ -114,6 +115,8 @@ export default function transformProps(
|
||||||
numberFormat,
|
numberFormat,
|
||||||
currencyFormat,
|
currencyFormat,
|
||||||
showLabels,
|
showLabels,
|
||||||
|
inContextMenu,
|
||||||
|
showTooltipLabels,
|
||||||
showLegend,
|
showLegend,
|
||||||
sliceId,
|
sliceId,
|
||||||
}: EchartsFunnelFormData = {
|
}: EchartsFunnelFormData = {
|
||||||
|
@ -227,13 +230,13 @@ export default function transformProps(
|
||||||
},
|
},
|
||||||
tooltip: {
|
tooltip: {
|
||||||
...getDefaultTooltip(refs),
|
...getDefaultTooltip(refs),
|
||||||
show: !inContextMenu,
|
show: !inContextMenu && showTooltipLabels,
|
||||||
trigger: 'item',
|
trigger: 'item',
|
||||||
formatter: (params: any) =>
|
formatter: (params: any) =>
|
||||||
formatFunnelLabel({
|
formatFunnelLabel({
|
||||||
params,
|
params,
|
||||||
numberFormatter,
|
numberFormatter,
|
||||||
labelType: EchartsFunnelLabelTypeType.KeyValuePercent,
|
labelType: tooltipLabelType,
|
||||||
}),
|
}),
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
|
|
|
@ -34,8 +34,10 @@ export type EchartsFunnelFormData = QueryFormData &
|
||||||
groupby: QueryFormData[];
|
groupby: QueryFormData[];
|
||||||
labelLine: boolean;
|
labelLine: boolean;
|
||||||
labelType: EchartsFunnelLabelTypeType;
|
labelType: EchartsFunnelLabelTypeType;
|
||||||
|
tooltipLabelType: EchartsFunnelLabelTypeType;
|
||||||
metric?: string;
|
metric?: string;
|
||||||
showLabels: boolean;
|
showLabels: boolean;
|
||||||
|
showTooltipLabels: boolean;
|
||||||
numberFormat: string;
|
numberFormat: string;
|
||||||
gap: number;
|
gap: number;
|
||||||
sort: 'descending' | 'ascending' | 'none' | undefined;
|
sort: 'descending' | 'ascending' | 'none' | undefined;
|
||||||
|
@ -62,6 +64,7 @@ export const DEFAULT_FORM_DATA: EchartsFunnelFormData = {
|
||||||
groupby: [],
|
groupby: [],
|
||||||
labelLine: false,
|
labelLine: false,
|
||||||
labelType: EchartsFunnelLabelTypeType.Key,
|
labelType: EchartsFunnelLabelTypeType.Key,
|
||||||
|
defaultTooltipLabel: EchartsFunnelLabelTypeType.KeyValuePercent,
|
||||||
legendOrientation: LegendOrientation.Top,
|
legendOrientation: LegendOrientation.Top,
|
||||||
legendType: LegendType.Scroll,
|
legendType: LegendType.Scroll,
|
||||||
numberFormat: 'SMART_NUMBER',
|
numberFormat: 'SMART_NUMBER',
|
||||||
|
|
Loading…
Reference in New Issue