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: [] }
+ })
}
}