NEZ-3364 fix：dashboard chart 配色方案细节调整

2023-12-18 17:15:11 +08:00
parent 2127032d05
commit a7e177162b
6 changed files with 99 additions and 82 deletions
--- a/nezha-fronted/src/assets/css/common.scss
+++ b/nezha-fronted/src/assets/css/common.scss
@@ -572,7 +572,8 @@ textarea {
 }

 .newAlert-notification{
-  width: auto;
+  box-sizing: border-box;
+  width: 460px;
  padding: 15px 55px 15px 18px;
  align-items: center;
  background: $--background-color-2;
@@ -867,6 +868,9 @@ i.nz-icon-override{
 input::placeholder{
  text-transform:capitalize;
 }
+.text-transform-none input::placeholder{
+  text-transform:none;
+}
 .vue-tags-input {
  .ti-tag.ti-valid {
    max-width: 100%;
--- a/nezha-fronted/src/components/common/nezhaColor.vue
+++ b/nezha-fronted/src/components/common/nezhaColor.vue
@@ -57,12 +57,12 @@ export default {
      type: Array,
      default () {
        return [
-          '#19730E', '#37872D', '#73BF69',
-          '#CC9D00', '#E0B400', '#FADE2A',
-          '#AD0317', '#C4162A', '#F2495C',
-          '#1250B0', '#1F60C4', '#5794F2',
-          '#E55400', '#FA6400', '#FF9830',
-          '#7C2EA3', '#8F3BB8', '#B877D9'
+          '#ad0317', '#e02f44', '#ff7383',
+          '#e55400', '#ff780a', '#ffb357',
+          '#cc9d00', '#f2cc0c', '#ffee52',
+          '#19730e', '#56a64b', '#96d98d',
+          '#124fb0', '#3274d9', '#8ab8ff',
+          '#7c2ea3', '#a352cc', '#ca95e5'
        ]
      }
    },
@@ -96,8 +96,13 @@ export default {
  },
  mounted () {
    if (!this.isTopo) {
-      this.keyName = this.valueArr[0].name
-      this.colors = this.valueArr[0].value || randomcolor() + 'FF'
+      // 默认选中background
+      let index = this.valueArr.findIndex(item => item.key === 'bac')
+      if (index == -1) {
+        index = 0
+      }
+      this.keyName = this.valueArr[index].name
+      this.colors = this.valueArr[index].value || randomcolor() + 'FF'
      this.$emit('colorChange', this.colors, this.keyName)
    } else {
      this.keyName = this.valueArr[0].name
--- a/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue
@@ -207,38 +207,6 @@
          </el-cascader>
        </el-form-item>

-        <!--min-->
-        <el-form-item :label="$t('dashboard.dashboard.chartForm.min')" class="form-item--half-width" v-if="isShowMinMax(chartConfig.type)">
-          <el-input-number
-            size="small"
-            style="margin-top: 2px"
-            :controls="false"
-            @change="change"
-            show-word-limit
-            placeholder="Auto"
-            v-model="chartConfig.param.min"/>
-        </el-form-item>
-        <!--max-->
-        <el-form-item :label="$t('dashboard.dashboard.chartForm.max')" class="form-item--half-width" v-if="isShowMinMax(chartConfig.type)">
-          <el-input-number
-            size="small"
-            style="margin-top: 2px"
-            :controls="false"
-            @change="change"
-            show-word-limit
-            placeholder="Auto"
-            v-model="chartConfig.param.max"/>
-        </el-form-item>
-        <!--decimals-->
-        <el-form-item :label="$t('overall.decimal')" class="form-item--half-width" v-if="isShowDecimals(chartConfig.type)">
-          <el-input-number
-            size="small"
-            style="margin-top: 2px"
-            :controls="false"
-            @change="change"
-            :placeholder="'Default 2'"
-            show-word-limit v-model="chartConfig.param.decimals"/>
-        </el-form-item>
        <!--color Scheme-->
        <el-form-item :label="$t('dashboard.dashboard.chartForm.colorScheme')" class="colorScheme-form-item form-item--half-width" v-if="isShowColorScheme(chartConfig.type)">
          <el-select
@@ -269,6 +237,38 @@
            @colorChange="(color,key)=>{colorChange(color,key)}"
          />
        </el-form-item>
+        <!--decimals-->
+        <el-form-item :label="$t('overall.decimal')" class="form-item--half-width" v-if="isShowDecimals(chartConfig.type)">
+          <el-input-number
+            size="small"
+            style="margin-top: 2px"
+            :controls="false"
+            @change="change"
+            :placeholder="'Default 2'"
+            show-word-limit v-model="chartConfig.param.decimals"/>
+        </el-form-item>
+        <!--min-->
+        <el-form-item :label="$t('dashboard.dashboard.chartForm.min')" class="form-item--half-width" v-if="isShowMinMax(chartConfig.type) || colorByValue">
+          <el-input-number
+            size="small"
+            style="margin-top: 2px"
+            :controls="false"
+            @change="change"
+            show-word-limit
+            placeholder="Auto"
+            v-model="chartConfig.param.min"/>
+        </el-form-item>
+        <!--max-->
+        <el-form-item :label="$t('dashboard.dashboard.chartForm.max')" class="form-item--half-width" v-if="isShowMinMax(chartConfig.type) || colorByValue">
+          <el-input-number
+            size="small"
+            style="margin-top: 2px"
+            :controls="false"
+            @change="change"
+            show-word-limit
+            placeholder="Auto"
+            v-model="chartConfig.param.max"/>
+        </el-form-item>

        <!-- index -->
        <el-form-item
@@ -1157,7 +1157,7 @@
                      </div>
                    </div>
                    <el-form-item :prop="'param.valueMapping.' + index + '.display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item">
-                      <el-input v-model="item.display" style="margin-right: 10px" placeholder="" size="small" @change="change('valueMapping', index)" class="mapping-display-input">
+                      <el-input v-model="item.display" style="margin-right: 10px" size="small" @change="change('valueMapping', index)" class="mapping-display-input text-transform-none" :placeholder="'{{value}}'">
                        <el-dropdown trigger="click" slot="prefix" placement="top-start">
                          <div class="el-dropdown-link">
                            <i v-if="item.icon" class="mapping-icon" :class="item.icon" :style="{ color: item.color.icon }"></i>
--- a/nezha-fronted/src/components/common/rightBox/chart/chartTypeShow.js
+++ b/nezha-fronted/src/components/common/rightBox/chart/chartTypeShow.js
@@ -231,10 +231,12 @@ export default {
    },
    isShowMinMax (type) {
      switch (type) {
-        case 'log' :
-        case 'table' :
-          return false
-        default: return true
+        case 'line':
+        case 'area':
+        case 'point':
+        case 'gauge':
+          return true
+        default: return false
      }
    },
    isTimeSeries (type) {
--- a/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js
+++ b/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js
@@ -305,6 +305,12 @@ export default {
    }
  },
  mixins: [rz],
+  computed: {
+    colorByValue () {
+      const mode = lodash.get(this.chartConfig, 'param.color.mode', 'palette')
+      return mode == 'continuous'
+    }
+  },
  methods: {
    schemeTypeChange (val) {
      const obj = this.$lodash.cloneDeep(this.chartConfig.param.color)
@@ -315,7 +321,7 @@ export default {
      } else if (val === 'fixed') {
        obj.schemeType = 'fixed'
        obj.mode = 'fixed'
-        obj.fixedColor = obj.fixedColor || randomcolor()
+        obj.fixedColor = obj.fixedColor || '#56a64b'
      } else {
        obj.schemeType = val
        obj.mode = 'continuous'
@@ -507,7 +513,7 @@ export default {
        type: 'value',
        show: true,
        value: undefined,
-        display: '',
+        display: '{{value}}',
        color: {
          bac: bacColor + 'FF',
          text: ColorReverse(bacColor) + 'FF',
--- a/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue
@@ -179,39 +179,6 @@
          </el-cascader>
        </el-form-item>

-        <!--min-->
-        <el-form-item :label="$t('dashboard.dashboard.chartForm.min')" class="form-item--half-width" v-if="isShowMinMax(chartConfig.type)">
-          <el-input-number
-            size="small"
-            style="margin-top: 2px"
-            :controls="false"
-            @change="change"
-            show-word-limit
-            placeholder="Auto"
-            v-model="chartConfig.param.min"/>
-        </el-form-item>
-        <!--max-->
-        <el-form-item :label="$t('dashboard.dashboard.chartForm.max')" class="form-item--half-width" v-if="isShowMinMax(chartConfig.type)">
-          <el-input-number
-            size="small"
-            style="margin-top: 2px"
-            :controls="false"
-            @change="change"
-            show-word-limit
-            placeholder="Auto"
-            v-model="chartConfig.param.max"/>
-        </el-form-item>
-        <!--decimals-->
-        <el-form-item :label="$t('config.assetLabel.decimals')" class="form-item--half-width" v-if="isShowDecimals(chartConfig.type)">
-          <el-input-number
-            size="small"
-            style="margin-top: 2px"
-            :controls="false"
-            @change="change"
-            :placeholder="'Default 2'"
-            show-word-limit
-            v-model="chartConfig.param.decimals"/>
-        </el-form-item>
        <!--color Scheme-->
        <el-form-item :label="$t('dashboard.dashboard.chartForm.colorScheme')" class="colorScheme-form-item form-item--half-width" v-if="isShowColorScheme(chartConfig.type)">
          <el-select
@@ -242,6 +209,39 @@
            @colorChange="(color,key)=>{colorChange(color,key)}"
          />
        </el-form-item>
+        <!--decimals-->
+        <el-form-item :label="$t('config.assetLabel.decimals')" class="form-item--half-width" v-if="isShowDecimals(chartConfig.type)">
+          <el-input-number
+            size="small"
+            style="margin-top: 2px"
+            :controls="false"
+            @change="change"
+            :placeholder="'Default 2'"
+            show-word-limit
+            v-model="chartConfig.param.decimals"/>
+        </el-form-item>
+        <!--min-->
+        <el-form-item :label="$t('dashboard.dashboard.chartForm.min')" class="form-item--half-width" v-if="isShowMinMax(chartConfig.type) || colorByValue">
+          <el-input-number
+            size="small"
+            style="margin-top: 2px"
+            :controls="false"
+            @change="change"
+            show-word-limit
+            placeholder="Auto"
+            v-model="chartConfig.param.min"/>
+        </el-form-item>
+        <!--max-->
+        <el-form-item :label="$t('dashboard.dashboard.chartForm.max')" class="form-item--half-width" v-if="isShowMinMax(chartConfig.type) || colorByValue">
+          <el-input-number
+            size="small"
+            style="margin-top: 2px"
+            :controls="false"
+            @change="change"
+            show-word-limit
+            placeholder="Auto"
+            v-model="chartConfig.param.max"/>
+        </el-form-item>

        <!-- index -->
        <el-form-item
@@ -794,7 +794,7 @@
                      </div>
                    </div>
                    <el-form-item :prop="'param.valueMapping.' + index + '.display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item">
-                      <el-input v-model="item.display" style="margin-right: 10px" placeholder="" size="small" @change="change('valueMapping', index)" class="mapping-display-input">
+                      <el-input v-model="item.display" style="margin-right: 10px" size="small" @change="change('valueMapping', index)" class="mapping-display-input text-transform-none" :placeholder="'{{value}}'">
                        <el-dropdown trigger="click" slot="prefix" placement="top-start">
                          <div class="el-dropdown-link">
                            <i v-if="item.icon" class="mapping-icon" :class="item.icon" :style="{ color: item.color.icon }"></i>