Merge pull request #8644 from dataease/pr@dev@feat_antv_funnel_conversion_rate

feat(视图): AntV 漏斗图支持显示转换率 #7346

core/frontend/src/lang/en.js

@@ -1557,6 +1557,8 @@ export default {
     reserve_two: '2',
     proportion: 'Proportion',
     label_content: 'Label Content',
+    show_conversion: 'Show Conversion',
+    conversion_label: 'Conversion Label',
     percent: 'Percent',
     table_index_desc: 'Index Header Name',
     table_row_tooltip: 'Row Tooltip',

core/frontend/src/lang/tw.js

@@ -1554,6 +1554,8 @@ export default {
     reserve_two: '兩位',
     proportion: '佔比',
     label_content: '標籤展示',
+    show_conversion: '轉換率展示',
+    conversion_label: '轉換率標籤',
     percent: '占比',
     table_index_desc: '表頭名稱',
     table_row_tooltip: '行頭提示',

core/frontend/src/lang/zh.js

@@ -1554,6 +1554,8 @@ export default {
     reserve_two: '两位',
     proportion: '占比',
     label_content: '标签展示',
+    show_conversion: '转换率展示',
+    conversion_label: '转换率标签',
     percent: '占比',
     table_index_desc: '表头名称',
     table_row_tooltip: '行头提示',

core/frontend/src/views/chart/chart/chart.js

@@ -209,7 +209,9 @@ export const DEFAULT_LABEL = {
     thousandSeparator: true// 千分符
   },
   reserveDecimalCount: 2,
-  labelContent: ['dimension', 'proportion']
+  labelContent: ['dimension', 'proportion'],
+  showConversion: false,
+  conversionLabel: '转换率'
 }
 export const DEFAULT_TOOLTIP = {
   show: true,

core/frontend/src/views/chart/chart/funnel/funnel_antv.js

@@ -19,6 +19,17 @@ export function baseFunnelOptionAntV(container, chart, action) {
   const legend = getLegend(chart)
   // data
   const data = chart.data.data
+  // conversion tag
+  const labelAttr = JSON.parse(chart.customAttr).label
+  let conversionTag = labelAttr.showConversion
+  if (conversionTag) {
+    conversionTag = {
+      formatter: datum => {
+        const rate = ((datum[Funnel.CONVERSATION_FIELD][1] / datum[Funnel.CONVERSATION_FIELD][0]) * 100).toFixed(2)
+        return `${labelAttr.conversionLabel ?? ''}${rate}%`;
+      }
+    }
+  }
   // options
   const options = {
     theme: theme,
@@ -29,7 +40,7 @@ export function baseFunnelOptionAntV(container, chart, action) {
     label: label,
     tooltip: tooltip,
     legend: legend,
-    conversionTag: false,
+    conversionTag,
     interactions: [
       {
         type: 'legend-active', cfg: {

core/frontend/src/views/chart/chart/util.js

@@ -1985,7 +1985,9 @@ export const TYPE_CONFIGS = [
         'show',
         'fontSize',
         'color',
-        'position-h'
+        'position-h',
+        'conversion',
+        'conversionLabel'
       ],
       'tooltip-selector-ant-v': [
         'show',

core/frontend/src/views/chart/components/shapeAttr/LabelSelectorAntV.vue

@@ -15,7 +15,7 @@
           <el-checkbox
             v-model="labelForm.show"
             @change="changeLabelAttr('show')"
-          >{{ $t('chart.show') }}</el-checkbox>
+          ></el-checkbox>
         </el-form-item>
         <div v-show="labelForm.show">
           <el-form-item
@@ -140,6 +140,27 @@
             </el-radio-group>
           </el-form-item>
         </div>
+        <el-form-item
+          v-show="showProperty('conversion')"
+          :label="$t('chart.show_conversion')"
+          class="form-item"
+        >
+          <el-checkbox
+            v-model="labelForm.showConversion"
+            @change="changeLabelAttr('showConversion')"
+          ></el-checkbox>
+        </el-form-item>
+        <el-form-item
+          v-show="labelForm.showConversion && showProperty('conversionLabel')"
+          :label="$t('chart.conversion_label')"
+          class="form-item"
+        >
+          <el-input
+            v-model="labelForm.conversionLabel"
+            :maxlength="20"
+            @change="changeLabelAttr('conversionLabel')"
+          ></el-input>
+        </el-form-item>
       </el-form>
 
       <el-form