feat(视图): 表格支持阈值设置

frontend/src/views/chart/chart/table/table-info.js

@@ -1,7 +1,8 @@
 import { TableSheet, S2Event, PivotSheet } from '@antv/s2'
 import { getCustomTheme, getSize } from '@/views/chart/chart/common/common_table'
-import { DEFAULT_TOTAL } from '@/views/chart/chart/chart'
+import { DEFAULT_COLOR_CASE, DEFAULT_TOTAL } from '@/views/chart/chart/chart'
 import { formatterItem, valueFormatter } from '@/views/chart/chart/formatter'
+import { hexColorToRGBA } from '@/views/chart/chart/util'
 
 export function baseTableInfo(s2, container, chart, action, tableData) {
   const containerDom = document.getElementById(container)
@@ -59,6 +60,9 @@ export function baseTableInfo(s2, container, chart, action, tableData) {
               if (!f) {
                 return value
               }
+              if (value === null || value === undefined) {
+                return value
+              }
               if (f.groupType === 'd') {
                 return value
               } else {
@@ -86,6 +90,9 @@ export function baseTableInfo(s2, container, chart, action, tableData) {
           if (!f) {
             return value
           }
+          if (value === null || value === undefined) {
+            return value
+          }
           if (f.groupType === 'd') {
             return value
           } else {
@@ -116,7 +123,8 @@ export function baseTableInfo(s2, container, chart, action, tableData) {
     width: containerDom.offsetWidth,
     height: containerDom.offsetHeight,
     // showSeriesNumber: true
-    style: getSize(chart)
+    style: getSize(chart),
+    conditions: getConditions(chart)
   }
 
   // 开始渲染
@@ -190,6 +198,9 @@ export function baseTableNormal(s2, container, chart, action, tableData) {
               if (!f) {
                 return value
               }
+              if (value === null || value === undefined) {
+                return value
+              }
               if (f.formatterCfg) {
                 return valueFormatter(value, f.formatterCfg)
               } else {
@@ -211,6 +222,9 @@ export function baseTableNormal(s2, container, chart, action, tableData) {
           if (!f) {
             return value
           }
+          if (value === null || value === undefined) {
+            return value
+          }
           if (f.formatterCfg) {
             return valueFormatter(value, f.formatterCfg)
           } else {
@@ -235,7 +249,8 @@ export function baseTableNormal(s2, container, chart, action, tableData) {
     width: containerDom.offsetWidth,
     height: containerDom.offsetHeight,
     // showSeriesNumber: true
-    style: getSize(chart)
+    style: getSize(chart),
+    conditions: getConditions(chart)
   }
 
   // 开始渲染
@@ -319,6 +334,9 @@ export function baseTablePivot(s2, container, chart, action, tableData) {
               if (!f) {
                 return value
               }
+              if (value === null || value === undefined) {
+                return value
+              }
               if (f.formatterCfg) {
                 return valueFormatter(value, f.formatterCfg)
               } else {
@@ -340,6 +358,9 @@ export function baseTablePivot(s2, container, chart, action, tableData) {
           if (!f) {
             return value
           }
+          if (value === null || value === undefined) {
+            return value
+          }
           if (f.formatterCfg) {
             return valueFormatter(value, f.formatterCfg)
           } else {
@@ -385,7 +406,8 @@ export function baseTablePivot(s2, container, chart, action, tableData) {
     width: containerDom.offsetWidth,
     height: containerDom.offsetHeight,
     style: getSize(chart),
-    totals: totalCfg
+    totals: totalCfg,
+    conditions: getConditions(chart)
   }
 
   // 开始渲染
@@ -424,3 +446,190 @@ function getCurrentField(valueFieldList, field) {
 
   return res
 }
+
+function getConditions(chart) {
+  const res = {
+    text: [],
+    background: []
+  }
+  let conditions
+  try {
+    const senior = JSON.parse(chart.senior)
+    conditions = senior.threshold.tableThreshold
+  } catch (err) {
+    const senior = JSON.parse(JSON.stringify(chart.senior))
+    conditions = senior.threshold.tableThreshold
+  }
+
+  if (conditions && conditions.length > 0) {
+    // table item color
+    let valueColor = DEFAULT_COLOR_CASE.tableFontColor
+    let valueBgColor = DEFAULT_COLOR_CASE.tableItemBgColor
+    if (chart.customAttr) {
+      const customAttr = JSON.parse(chart.customAttr)
+      // color
+      if (customAttr.color) {
+        const c = JSON.parse(JSON.stringify(customAttr.color))
+        valueColor = c.tableFontColor
+        valueBgColor = hexColorToRGBA(c.tableItemBgColor, c.alpha)
+      }
+    }
+
+    for (let i = 0; i < conditions.length; i++) {
+      const field = conditions[i]
+      res.text.push({
+        field: field.field.dataeaseName,
+        mapping(value) {
+          return {
+            fill: mappingColor(value, valueColor, field, 'color')
+          }
+        }
+      })
+      res.background.push({
+        field: field.field.dataeaseName,
+        mapping(value) {
+          return {
+            fill: mappingColor(value, valueBgColor, field, 'backgroundColor')
+          }
+        }
+      })
+    }
+  }
+  return res
+}
+
+function mappingColor(value, defaultColor, field, type) {
+  let color
+  for (let i = 0; i < field.conditions.length; i++) {
+    let flag = false
+    const t = field.conditions[i]
+    if (field.field.deType === 2 || field.field.deType === 3 || field.field.deType === 4) {
+      const tv = parseFloat(t.value)
+      if (t.term === 'eq') {
+        if (value === tv) {
+          color = t[type]
+          flag = true
+        }
+      } else if (t.term === 'not_eq') {
+        if (value !== tv) {
+          color = t[type]
+          flag = true
+        }
+      } else if (t.term === 'lt') {
+        if (value < tv) {
+          color = t[type]
+          flag = true
+        }
+      } else if (t.term === 'gt') {
+        if (value > tv) {
+          color = t[type]
+          flag = true
+        }
+      } else if (t.term === 'le') {
+        if (value <= tv) {
+          color = t[type]
+          flag = true
+        }
+      } else if (t.term === 'ge') {
+        if (value >= tv) {
+          color = t[type]
+          flag = true
+        }
+      }
+      if (flag) {
+        break
+      } else if (i === field.conditions.length - 1) {
+        color = defaultColor
+      }
+    } else if (field.field.deType === 0) {
+      const tv = t.value
+      if (t.term === 'eq') {
+        if (value === tv) {
+          color = t[type]
+          flag = true
+        }
+      } else if (t.term === 'not_eq') {
+        if (value !== tv) {
+          color = t[type]
+          flag = true
+        }
+      } else if (t.term === 'like') {
+        if (value.includes(tv)) {
+          color = t[type]
+          flag = true
+        }
+      } else if (t.term === 'not like') {
+        if (!value.includes(tv)) {
+          color = t[type]
+          flag = true
+        }
+      } else if (t.term === 'null') {
+        if (value === null || value === undefined) {
+          color = t[type]
+          flag = true
+        }
+      } else if (t.term === 'not_null') {
+        if (value !== null && value !== undefined) {
+          color = t[type]
+          flag = true
+        }
+      } else if (t.term === 'empty') {
+        if (value === '') {
+          color = t[type]
+          flag = true
+        }
+      } else if (t.term === 'not_empty') {
+        if (value !== '') {
+          color = t[type]
+          flag = true
+        }
+      }
+      if (flag) {
+        break
+      } else if (i === field.conditions.length - 1) {
+        color = defaultColor
+      }
+    } else {
+      // time
+      const tv = new Date(t.value + ' GMT+8').getTime()
+      const v = new Date(value + ' GMT+8').getTime()
+      if (t.term === 'eq') {
+        if (v === tv) {
+          color = t[type]
+          flag = true
+        }
+      } else if (t.term === 'not_eq') {
+        if (v !== tv) {
+          color = t[type]
+          flag = true
+        }
+      } else if (t.term === 'lt') {
+        if (v < tv) {
+          color = t[type]
+          flag = true
+        }
+      } else if (t.term === 'gt') {
+        if (v > tv) {
+          color = t[type]
+          flag = true
+        }
+      } else if (t.term === 'le') {
+        if (v <= tv) {
+          color = t[type]
+          flag = true
+        }
+      } else if (t.term === 'ge') {
+        if (v >= tv) {
+          color = t[type]
+          flag = true
+        }
+      }
+      if (flag) {
+        break
+      } else if (i === field.conditions.length - 1) {
+        color = defaultColor
+      }
+    }
+  }
+  return color
+}