Merge pull request #9817 from dataease/pr@dev-v2@feat_liquid_threshold

feat(图表): 水波图支持阈值 #9370

core/core-frontend/src/models/chart/chart-senior.d.ts

@@ -123,6 +123,10 @@ declare interface ChartThreshold {
    * 仪表盘阈值: x,y,z
    */
   gaugeThreshold: string
+  /**
+   * 水波图阈值: x,y,z
+   */
+  liquidThreshold: string
   /**
    * 指标卡阈值
    */

core/core-frontend/src/models/chart/chart.d.ts

@@ -117,6 +117,14 @@ declare interface Axis extends ChartViewField {
    * 维度/指标分组类型
    */
   groupType: 'q' | 'd'
+  /**
+   * 排序规则
+   */
+  sort: 'asc' | 'desc' | 'none' | 'custom_sort'
+  /**
+   * 自定义排序项
+   */
+  customSort: string[]
 }
 declare interface ChartViewField {
   /**

core/core-frontend/src/views/chart/components/editor/editor-senior/components/Threshold.vue

@@ -61,10 +61,10 @@ const init = () => {
 const changeThreshold = () => {
   emit('onThresholdChange', state.thresholdForm)
 }
-const gaugeThresholdChange = () => {
+const changeSplitThreshold = (threshold: string) => {
   // check input
-  if (state.thresholdForm.gaugeThreshold) {
-    const arr = state.thresholdForm.gaugeThreshold.split(',')
+  if (threshold) {
+    const arr = threshold.split(',')
     for (let i = 0; i < arr.length; i++) {
       const ele = arr[i]
       if (parseFloat(ele).toString() === 'NaN' || parseFloat(ele) <= 0 || parseFloat(ele) >= 100) {
@@ -246,7 +246,7 @@ init()
             style="width: 100px; margin: 0 10px"
             size="small"
             clearable
-            @change="gaugeThresholdChange"
+            @change="changeSplitThreshold"
           />
           <span>,100</span>
           <el-tooltip effect="dark" placement="bottom">
@@ -260,6 +260,36 @@ init()
         </el-form-item>
       </el-form>
     </el-col>
+    <el-col v-show="showProperty('liquidThreshold')">
+      <el-form ref="thresholdForm" :model="state.thresholdForm" label-position="top">
+        <el-form-item
+          :label="t('chart.threshold_range') + '(%)'"
+          class="form-item"
+          label-width="auto"
+        >
+          <span>0,</span>
+          <el-input
+            :effect="themes"
+            :placeholder="t('chart.threshold_range')"
+            :disabled="!state.thresholdForm.enable"
+            v-model="state.thresholdForm.liquidThreshold"
+            style="width: 100px; margin: 0 10px"
+            size="small"
+            clearable
+            @change="changeSplitThreshold"
+          />
+          <span>,100</span>
+          <el-tooltip effect="dark" placement="bottom">
+            <el-icon style="margin-left: 10px"><InfoFilled /></el-icon>
+            <template #content>
+              阈值设置，决定水波图颜色，为空则不开启阈值，范围(0-100)，逐级递增
+              <br />
+              例如：输入 30,70；表示：分为3段，分别为[0,30],(30,70],(70,100]
+            </template>
+          </el-tooltip>
+        </el-form-item>
+      </el-form>
+    </el-col>
 
     <!--文本卡-->
     <el-col v-if="props.chart.type && props.chart.type === 'label'">

core/core-frontend/src/views/chart/components/editor/util/chart.ts

@@ -675,6 +675,7 @@ export const DEFAULT_ASSIST_LINE_CFG: ChartAssistLineCfg = {
 export const DEFAULT_THRESHOLD: ChartThreshold = {
   enable: false,
   gaugeThreshold: '',
+  liquidThreshold: '',
   labelThreshold: [],
   tableThreshold: [],
   textLabelThreshold: []

core/core-frontend/src/views/chart/components/js/panel/charts/liquid/liquid.ts

@@ -19,7 +19,8 @@ export class Liquid extends G2PlotChartView<LiquidOptions, G2Liquid> {
     'basic-style-selector',
     'label-selector',
     'misc-selector',
-    'title-selector'
+    'title-selector',
+    'threshold'
   ]
   propertyInner: EditorPropertyInner = {
     'background-overall-component': ['all'],
@@ -37,7 +38,8 @@ export class Liquid extends G2PlotChartView<LiquidOptions, G2Liquid> {
       'fontFamily',
       'letterSpace',
       'fontShadow'
-    ]
+    ],
+    threshold: ['liquidThreshold']
   }
   axis: AxisType[] = ['yAxis', 'filter']
   axisConfig: AxisConfig = {
@@ -147,6 +149,31 @@ export class Liquid extends G2PlotChartView<LiquidOptions, G2Liquid> {
     }
   }
 
+  protected configThreshold(chart: Chart, options: LiquidOptions): LiquidOptions {
+    const senior = parseJson(chart.senior)
+    if (senior?.threshold?.enable) {
+      const { liquidThreshold } = senior?.threshold
+      if (liquidThreshold) {
+        const { paletteQualitative10: colors } = (options.theme as any).styleSheet
+        const liquidStyle = () => {
+          const thresholdArr = liquidThreshold.split(',')
+          let index = 0
+          thresholdArr.forEach((v, i) => {
+            if (options.percent > parseFloat(v) / 100) {
+              index = i + 1
+            }
+          })
+          return {
+            fill: colors[index % colors.length],
+            stroke: colors[index % colors.length]
+          }
+        }
+        return { ...options, liquidStyle }
+      }
+    }
+    return options
+  }
+
   setupDefaultOptions(chart: ChartObj): ChartObj {
     chart.customAttr.label = {
       ...chart.customAttr.label,
@@ -162,7 +189,12 @@ export class Liquid extends G2PlotChartView<LiquidOptions, G2Liquid> {
   }
 
   protected setupOptions(chart: Chart, options: LiquidOptions): LiquidOptions {
-    return flow(this.configTheme, this.configMisc, this.configLabel)(chart, options)
+    return flow(
+      this.configTheme,
+      this.configMisc,
+      this.configLabel,
+      this.configThreshold
+    )(chart, options)
   }
   constructor() {
     super('liquid', DEFAULT_LIQUID_DATA)