diff --git a/client/web/compose/src/components/Chart/Report/FunnelChart.vue b/client/web/compose/src/components/Chart/Report/FunnelChart.vue index 403cd098a..727be3d73 100644 --- a/client/web/compose/src/components/Chart/Report/FunnelChart.vue +++ b/client/web/compose/src/components/Chart/Report/FunnelChart.vue @@ -36,6 +36,16 @@ > {{ $t('edit.metric.cumulative') }} + + {{ $t('edit.metric.relative') }} + + + {{ $t('edit.metric.fixTooltips') }} + diff --git a/lib/js/src/compose/types/chart/funnel.ts b/lib/js/src/compose/types/chart/funnel.ts index 959b9c185..5ea54d30f 100644 --- a/lib/js/src/compose/types/chart/funnel.ts +++ b/lib/js/src/compose/types/chart/funnel.ts @@ -77,14 +77,21 @@ export default class FunnelChart extends BaseChart { type: m.type, label: m.label || m.field, data, + tooltip: { + fixed: !!m.fixTooltips, + relative: !!m.relativeValue, + }, } } makeOptions (data: any) { const { colorScheme } = this.config - const { labels, datasets = [] } = data + const { labels, datasets = [], tooltip } = data const colors = getColorschemeColors(colorScheme) + const tooltipFormatter = `{b}
{c} ${tooltip.relative ? ' ({d}%)' : ''}` + const labelFormatter = `{c}${tooltip.relative ? ' ({d}%)' : ''}` + return { textStyle: { fontFamily: 'Poppins-Regular', @@ -92,7 +99,7 @@ export default class FunnelChart extends BaseChart { tooltip: { show: true, trigger: 'item', - formatter: '{b} : {c} ({d}%)', + formatter: tooltipFormatter, appendToBody: true, }, legend: { @@ -108,11 +115,11 @@ export default class FunnelChart extends BaseChart { left: '5%', width: '90%', label: { - show: false, + show: tooltip.fixed, position: 'inside', align: 'center', verticalAlign: 'middle', - formatter: '{c} ({d}%)', + formatter: labelFormatter, }, emphasis: { label: { @@ -141,16 +148,21 @@ export default class FunnelChart extends BaseChart { const rr = await super.fetchReports(a) as any const values = [] + let tooltip = {} + // Above provided data sets might not have their labels/values ordered // correctly const valMap: any = {} // Map values to their labels for (let ri = 0; ri < rr.length; ri++) { const r = rr[ri] + r.labels.forEach((l: string, i: number) => { valMap[l] = r.datasets[0].data[i] }) + tooltip = { ...tooltip, ...r.datasets[0].tooltip } + // Construct labels & data based on provided reports const report = this.config.reports?.[ri] const d = report?.dimensions?.[0] as Dimension @@ -194,6 +206,7 @@ export default class FunnelChart extends BaseChart { datasets: [{ data, }], + tooltip, } } @@ -213,10 +226,17 @@ export default class FunnelChart extends BaseChart { } defMetrics (): Metric { - return Object.assign({}, { type: ChartType.funnel }) + return Object.assign({}, { + type: ChartType.funnel, + fixTooltips: false, + relativeValue: true, + }) } defDimension (): Dimension { - return Object.assign({}, { conditions: {}, meta: { fields: [] } }) + return Object.assign({}, { + conditions: {}, + meta: { fields: [] } + }) } }