NEZ-2243 feat：排行图表样式调整

nezha-fronted/src/components/chart/chart/chartRank.vue

@@ -19,6 +19,11 @@
           <div style="display: inline-block">{{tooltip.value}}</div>
         </div>
       </div>
+
+      <div class="chart-canvas-tooltip-content">
+        <div>rank</div>
+        <div>{{tooltip.rank+1}}</div>
+      </div>
     </div>
   </div>
 </template>
@@ -27,7 +32,7 @@
 import chartMixin from '@/components/chart/chartMixin'
 import chartFormat from '@/components/chart/chartFormat'
 import * as d3 from 'd3'
-import { formatScientificNotation, getMetricTypeValue } from '@/components/common/js/tools'
+import { getMetricTypeValue } from '@/components/common/js/tools'
 import chartDataFormat from '@/components/chart/chartDataFormat'
 import { initColor } from '@/components/chart/chart/tools'
 import lodash from 'lodash'
@@ -57,6 +62,7 @@ export default {
         title: 0,
         value: 0,
         mapping: {},
+        rank: 0,
         show: false
       }
     }
@@ -85,6 +91,7 @@ export default {
       originalDatas.forEach((originalData, expressionIndex) => {
         originalData.forEach((data, dataIndex) => {
           const value = getMetricTypeValue(data.values, chartInfo.param.statistics)
+          if (value != 0) {
             const showValue = chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(value, null, -1, decimals)
             const mapping = this.selectMapping(value, chartInfo.param.valueMapping, chartInfo.param.enable && this.chartInfo.param.enable.valueMapping)
             const legend = this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex)
@@ -103,6 +110,7 @@ export default {
               mapping: mapping
             })
             colorIndex++
+          }
         })
       })
     },
@@ -119,14 +127,12 @@ export default {
         const height = svgDom.getBoundingClientRect().height
         const bodyX = 50
         const bodyY = 50
-        const bodyWidth = width - 2 * bodyX
+        const bodyWidth = width - 3 * bodyX
         const bodyHeight = height - 2 * bodyY
         const svg = d3.select(`#rank-svg-${this.chartId}`)
 
         // 从大到小排序
         let rankData = lodash.cloneDeep(this.rankData)
-        // 过滤掉为0的数据
-        rankData = rankData.filter(item => item.value != 0)
         rankData.sort((a, b) => b.value - a.value)
         rankData = rankData.map((item, index) => {
           return {
@@ -144,8 +150,10 @@ export default {
         const scaleY = d3.scaleBand()
           .domain(rankData.map((d) => d.rank).sort((a, b) => b - a))
           .range([bodyHeight, 0])
-          .paddingInner(0.3)
           .paddingOuter(0.06)
+          .paddingInner(0.6)
+
+        const minWidth = 10
 
         // 渲染柱形
         const bars = svg.append('g')
@@ -159,32 +167,13 @@ export default {
           .attr('y', (d) => scaleY(d.rank))
           .attr('height', scaleY.bandwidth())
           .attr('fill', (d) => d.background)
-          .attr('width', (d) => scaleX(d.value) > 10 ? scaleX(d.value) : 10)
+          .attr('width', (d) => scaleX(d.value) > minWidth ? scaleX(d.value) : minWidth)
+          .style('cursor', 'pointer')
+          .on('mouseenter', this.rankEnter)
+          .on('mousemove', this.rankMove)
+          .on('mouseleave', this.rankLeave)
         bars.exit().remove()
 
-        // 坐标轴
-        const xAxis = d3.axisTop(scaleX)
-          .ticks(6)
-          .tickSize(-(bodyHeight))
-          // .tickSizeOuter(0)
-          // .tickSizeInner(0)
-          .tickFormat(d => {
-            const value = formatScientificNotation(d, 6)
-            let chartUnit = this.chartInfo.unit
-            chartUnit = chartUnit || 2
-            const unit = chartDataFormat.getUnit(chartUnit)
-            return unit.compute(value, null, -1, 2)
-          })
-        const ticks = svg.append('g')
-          .attr('class', 'xAxis')
-          .call(xAxis)
-          .attr('transform', `translate(${bodyX},${bodyY})`)
-        ticks.select('.tick:first-of-type text').remove()
-        ticks.selectAll('.tick text').attr('class', 'tickTest')
-        ticks.select('.tick:first-of-type line').attr('class', 'tickLineFirst')
-        ticks.selectAll('.tick:not(:first-of-type) line').attr('class', 'tickLine')
-        ticks.select('.domain').remove()
-
         // 文本标签
         svg.append('g')
           .attr('transform', `translate(${bodyX},${bodyY})`)
@@ -196,63 +185,59 @@ export default {
           .on('mousemove', this.rankMove)
           .on('mouseleave', this.rankLeave)
           .html((d) => {
-            let flag = true
             // 判断柱子宽度和高度
-            if (scaleY.bandwidth() < 38 || scaleX(d.value) < 120) {
+            if (scaleY.bandwidth() > 10) {
-              flag = false
+              return this.rankFormatterLabel(d)
             }
-            return flag ? this.rankFormatterLabel(d) : ''
           })
-          .attr('x', scaleX(0))
+          .attr('x', (d) => {
+            let x = 0
+            if (scaleX(d.value) > minWidth) {
+              x = scaleX(d.value) + 10
+            } else {
+              x = minWidth + 10
+            }
+            return x
+          })
           .attr('y', (d) => scaleY(d.rank))
           .attr('height', scaleY.bandwidth())
-          .attr('width', (d) => scaleX(d.value) > 10 ? scaleX(d.value) : 10)
           .style('cursor', 'pointer')
+          .style('overflow', 'visible')
+
+        // 生成标签和矩形
+        svg.append('g')
+          .attr('transform', `translate(${bodyX},${bodyY})`)
+          .selectAll('text')
+          .data(rankData)
+          .enter()
+          .append('text')
+          .attr('x', 4)
+          .attr('y', d => scaleY(d.rank) - 12)
+          .text(d => {
+            if (this.chartInfo.param.text !== 'all' && this.chartInfo.param.text !== 'legend') {
+              return ''
+            }
+            const margin = scaleY(1) - scaleY(0) - scaleY.bandwidth()
+            if (margin > 30 || !margin) {
+              return d.alias
+            }
+          })
       })
     },
 
     // 处理label
     rankFormatterLabel (data) {
-      let str = ''
       let valueStr = ''
       if (this.chartInfo.param.text === 'all') {
-        str += data.alias
         valueStr = data.mapping && data.mapping.display ? this.handleDisplay(data.mapping.display, { ...data.labels, value: data.showValue }) : data.showValue
       }
       if (this.chartInfo.param.text === 'value' || !this.chartInfo.param.text) {
         valueStr = data.mapping && data.mapping.display ? this.handleDisplay(data.mapping.display, { ...data.labels, value: data.showValue }) : data.showValue
       }
-      if (this.chartInfo.param.text === 'legend') {
+      if (valueStr) {
-        str += data.alias
-      }
-      if (this.chartInfo.param.text === 'none') {
-        str += ''
-      }
-      if (str && valueStr) {
         return `
-              <div style="width:100%;height: 100%;display: flex;align-items: flex-end;justify-content: center;flex-direction: column;color:#000000">
+              <div style="width:auto;height: 100%;display: flex;justify-content: center;flex-direction: column;">
-                <p style="width:100%;padding:0 12px;box-sizing: border-box;text-overflow: ellipsis;white-space: nowrap;overflow:hidden;text-align:right;color: ${data.mapping && data.mapping.color && data.mapping.color.text}">
+                <p class="chart-label" style="cursor:pointer;white-space: nowrap;color: ${data.mapping && data.mapping.color && data.mapping.color.text}">
-                  <span>${str}</span>
-                </p>
-                <p style="width:100%;padding:0 12px;box-sizing: border-box;text-overflow: ellipsis;white-space: nowrap;overflow:hidden;text-align:right;color: ${data.mapping && data.mapping.color && data.mapping.color.text}">
-                  <i class="${data.mapping && data.mapping.icon}" style="color: ${data.mapping && data.mapping.color && data.mapping.color.icon};font-size:1em;"></i>
-                  <span>${valueStr}</span>
-                </p>
-              </div>
-            `
-      } else if (str) {
-        return `
-              <div style="width:100%;height: 100%;display: flex;align-items: flex-end;justify-content: center;flex-direction: column;color:#000000">
-                <p style="width:100%;padding:0 12px;box-sizing: border-box;text-overflow: ellipsis;white-space: nowrap;overflow:hidden;text-align:right;color: ${data.mapping && data.mapping.color && data.mapping.color.text}">
-                  <i class="${data.mapping && data.mapping.icon}" style="color: ${data.mapping && data.mapping.color && data.mapping.color.icon};font-size:1em;"></i>
-                  <span>${str}</span>
-                </p>
-              </div>
-            `
-      } else if (valueStr) {
-        return `
-              <div style="width:100%;height: 100%;display: flex;align-items: flex-end;justify-content: center;flex-direction: column;color:#000000">
-                <p style="width:100%;padding:0 12px;box-sizing: border-box;text-overflow: ellipsis;white-space: nowrap;overflow:hidden;text-align:right;color: ${data.mapping && data.mapping.color && data.mapping.color.text}">
                   <i class="${data.mapping && data.mapping.icon}" style="color: ${data.mapping && data.mapping.color && data.mapping.color.icon};font-size:1em;"></i>
                   <span>${valueStr}</span>
                 </p>
@@ -265,6 +250,7 @@ export default {
       this.tooltip.title = data.alias
       this.tooltip.value = data.showValue
       this.tooltip.mapping = data.mapping
+      this.tooltip.rank = data.rank
       this.tooltip.show = true
       this.setPosition(e)
     },

nezha-fronted/src/components/chart/chart/chartSankey.vue

@@ -99,6 +99,7 @@ export default {
       originalDatas.forEach((originalData) => {
         originalData.forEach((data, dataIndex) => {
           const value = getMetricTypeValue(data.values, chartInfo.param.statistics)
+          if (value != 0) {
             const obj = {
               value: value,
               realValue: value,
@@ -110,6 +111,7 @@ export default {
               obj.target = data.metric[chartInfo.param.targetLabel]
               sankeyData.push(obj)
             }
+          }
         })
       })
 

nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue

@@ -705,6 +705,7 @@
                       :prop="'param.valueMapping.' + index + '.value'"
                       :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}"
                       class="thresholds-from-item"
+                      key="value"
                     >
                       <el-input-number
                         :controls="false"
@@ -719,6 +720,7 @@
                       :prop="'param.valueMapping.' + index + '.from'"
                       :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}"
                       class="thresholds-from-item"
+                      key="from"
                     >
                       <el-input-number
                         :controls="false"
@@ -733,6 +735,7 @@
                       :prop="'param.valueMapping.' + index + '.to'"
                       :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}"
                       class="thresholds-from-item"
+                      key="to"
                     >
                       <el-input-number
                         :controls="false"
@@ -747,6 +750,7 @@
                       :prop="'param.valueMapping.' + index + '.regx'"
                       :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}"
                       class="thresholds-from-item"
+                      key="regx"
                     >
                       <el-input
                         size="small"

nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue

@@ -620,6 +620,7 @@
                       :prop="'param.valueMapping.' + index + '.value'"
                       :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}"
                       class="thresholds-from-item"
+                      key="value"
                     >
                       <el-input-number
                         :controls="false"
@@ -634,6 +635,7 @@
                       :prop="'param.valueMapping.' + index + '.from'"
                       :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}"
                       class="thresholds-from-item"
+                      key="from"
                     >
                       <el-input-number
                         :controls="false"
@@ -648,6 +650,7 @@
                       :prop="'param.valueMapping.' + index + '.to'"
                       :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}"
                       class="thresholds-from-item"
+                      key="to"
                     >
                       <el-input-number
                         :controls="false"
@@ -662,6 +665,7 @@
                       :prop="'param.valueMapping.' + index + '.regx'"
                       :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}"
                       class="thresholds-from-item"
+                      key="regx"
                     >
                       <el-input
                         size="small"