!52 UI support histogram visualization(3rd commit)

Merge pull request !52 from 潘慧/master_ph

mindinsight/ui/src/locales/zh-cn.json

@@ -46,8 +46,9 @@
     "modelSize": "模型大小",
     "dataProcess": "数据处理",
     "noDataFound":"暂无满足筛选条件的数据",
-    "noDataTips":"请点击“显示全量数据”按钮查看全量数据"
-
+    "noDataTips":"请点击“显示全量数据”按钮查看全量数据",
+    "userDefined": "自定义数据",
+    "metric": "度量指标"
   },
   "dataTraceback": {
     "details": "详情",
@@ -102,21 +103,21 @@
   },
   "histogram": {
     "titleText": "参数分布图",
-    "xAxisTitle": "水平轴",
-    "viewType": "直方图模式",
+    "xAxisTitle": "纵轴",
+    "viewType": "视角",
     "centerValue": "中心值",
     "step": "步骤",
     "relativeTime": "相对时间",
     "absoluteTime": "绝对时间",
-    "overlay": "覆盖",
-    "offset": "偏移",
+    "overlay": "正视",
+    "offset": "俯视",
     "fullScreen": "切换全屏"
   },
   "dataMap": {
-    "titleText": "数据图可视"
+    "titleText": "数据图"
   },
   "graph": {
-    "titleText": "计算图可视",
+    "titleText": "计算图",
     "downloadPic": "下载",
     "nodeInfo": "节点信息",
     "legend": "图例",

mindinsight/ui/src/views/train-manage/histogram.vue

@@ -34,26 +34,28 @@ limitations under the License.
       </div>
       <!-- Area for selecting a view type -->
       <div class="cl-histogram-view-type-select-content">
-        <div class="view-title">{{$t('histogram.xAxisTitle')}}</div>
+        <div class="view-title">{{$t('histogram.viewType')}}</div>
+        <el-radio-group v-model="curViewName"
+                        fill="#00A5A7"
+                        text-color="#FFFFFF"
+                        size="small"
+                        @change="viewTypeChange">
+          <el-radio-button :label=0>{{$t('histogram.overlay')}}</el-radio-button>
+          <el-radio-button :label=1>{{$t('histogram.offset')}}</el-radio-button>
+        </el-radio-group>
+        <div class="view-title"
+             v-if="!!curViewName">{{$t('histogram.xAxisTitle')}}</div>
         <el-radio-group v-model="curAxisName"
                         fill="#00A5A7"
                         text-color="#FFFFFF"
                         size="small"
+                        v-if="!!curViewName"
                         :disabled="curViewName === 0"
                         @change="timeTypeChange">
           <el-radio-button :label=0>{{$t('histogram.step')}}</el-radio-button>
           <el-radio-button :label=1>{{$t('histogram.relativeTime')}}</el-radio-button>
           <el-radio-button :label=2>{{$t('histogram.absoluteTime')}}</el-radio-button>
         </el-radio-group>
-        <div class="view-title">{{$t('histogram.viewType')}}</div>
-        <el-radio-group v-model="curViewName"
-                        fill="#00A5A7"
-                        text-color="#FFFFFF"
-                        size="small"
-                        @change="viewTypeChange">
-          <el-radio-button :label=0>{{$t('histogram.overlay')}}</el-radio-button>
-          <el-radio-button :label=1>{{$t('histogram.offset')}}</el-radio-button>
-        </el-radio-group>
       </div>
       <!-- Content display area -->
       <div class="cl-histogram-show-data-content">
@@ -207,6 +209,13 @@ export default {
       clearInterval(this.autoUpdateTimer);
       this.autoUpdateTimer = null;
     }
+    if (this.curPageArr.length) {
+      this.curPageArr.forEach((item) => {
+        if (item.zr) {
+          item.zr.off('mouseout', 'mousemove');
+        }
+      });
+    }
     // Stop refreshing
     if (this.isReloading) {
       this.$store.commit('setIsReload', false);
@@ -289,6 +298,7 @@ export default {
                 dataList.push({
                   tagName: tagName,
                   sampleIndex: sampleIndex,
+                  zr: null,
                   show: false,
                   fullScreen: false,
                   domId: `${tagName}`,
@@ -368,7 +378,6 @@ export default {
     },
     updateCurPageSamples(sampleIndex) {
       const item = this.originDataArr[sampleIndex];
-      const promiseArr = [];
       if (!item || !item.tagName) {
         return;
       }
@@ -376,18 +385,11 @@ export default {
         train_id: this.trainingJobId,
         tag: item.tagName,
       };
-      promiseArr.push(this.addPromise(params));
-      Promise.all(
-          promiseArr.map(function(promiseItem) {
-            return promiseItem.catch(function(err) {
-              return err;
-            });
-          }),
-      ).then((res) => {
-        if (!res || !res.length || !res[0].data) {
+      RequestService.getHistogramData(params).then((res) => {
+        if (!res || !res.data) {
           return;
         }
-        const data = res[0].data;
+        const data = JSON.parse(JSON.stringify(res.data));
         this.originDataArr[sampleIndex].charData.oriData = this.formOriData(
             data,
         );
@@ -395,22 +397,6 @@ export default {
         this.updateSampleData(sampleIndex, charOption);
       });
     },
-    addPromise(params) {
-      return new Promise((resolve, reject) => {
-        RequestService.getHistogramData(params)
-            .then((res) => {
-              if (res) {
-                res.params = params;
-                resolve(res);
-              }
-            })
-            .catch((error) => {
-              if (error) {
-                reject(error);
-              }
-            });
-      });
-    },
     /**
      * The time display type is changed
      * @param {Number} val Current mode
@@ -604,9 +590,10 @@ export default {
           const sampleIndex = this.originDataArr.length;
           this.originDataArr.push({
             tagName: tagName,
+            sampleIndex: sampleIndex,
+            zr: null,
             show: false,
             fullScreen: false,
-            sampleIndex: sampleIndex,
             domId: `${tagName}`,
             charData: {
               oriData: [],
@@ -644,7 +631,10 @@ export default {
       setTimeout(() => {
         sampleObject.charObj.setOption(sampleObject.charData.charOption, true);
       }, 10);
-      const zr = sampleObject.charObj.getZr();
+      if (sampleObject.zr) {
+        sampleObject.zr.off('mouseout', 'mousemove');
+      }
+      sampleObject.zr = sampleObject.charObj.getZr();
       const p = Math.max(0, d3.precisionRound(0.01, 1.01) - 1);
       const yValueFormat = d3.format('.' + p + 'e');
       const chartData = sampleObject.charData.oriData.chartData;
@@ -751,14 +741,15 @@ export default {
           yIndex,
         };
       }
-      zr.on('mouseout', (e) => {
+      if (sampleObject.zr) {
+        sampleObject.zr.on('mouseout', (e) => {
           if (!rawData || !rawData.length) {
             return;
           }
           this.chartTipFlag = false;
           this.removeTooltip(sampleIndex);
         });
-      zr.on('mousemove', (e) => {
+        sampleObject.zr.on('mousemove', (e) => {
           if (!rawData || !rawData.length) {
             return;
           }
@@ -792,7 +783,10 @@ export default {
             ) {
               chartData[yIndex].items.forEach((item) => {
                 linePoints.push(
-                  sampleObject.charObj.convertToPixel('grid', [item[2], item[3]]),
+                    sampleObject.charObj.convertToPixel('grid', [
+                      item[2],
+                      item[3],
+                    ]),
                 );
               });
             }
@@ -803,7 +797,7 @@ export default {
               },
               z: 999,
             });
-          zr.add(this.zrDrawElement.hoverLine);
+            sampleObject.zr.add(this.zrDrawElement.hoverLine);
             this.zrDrawElement.tooltip = new echarts.graphic.Text({});
             let itemX;
             const x = chartData[yIndex].items[binIndex][2];
@@ -822,7 +816,8 @@ export default {
                     z = items[k][3];
                     break;
                   } else if (items[k][2] < x && nextX > x) {
-                  const proportionX = (x - items[k][2]) / (nextX - items[k][2]);
+                    const proportionX =
+                      (x - items[k][2]) / (nextX - items[k][2]);
                     z = (nextZ - items[k][3]) * proportionX + items[k][3];
                     break;
                   }
@@ -834,7 +829,8 @@ export default {
               };
               if (curViewName === 1) {
                 pt[1] -=
-                ((z - charOption.minZ) / (charOption.maxZ - charOption.minZ)) *
+                  ((z - charOption.minZ) /
+                    (charOption.maxZ - charOption.minZ)) *
                   gridRectY;
                 circleOption.shape = {
                   cx: itemX,
@@ -853,7 +849,7 @@ export default {
                 );
               }
               const dot = new echarts.graphic.Circle(circleOption);
-            zr.add(dot);
+              sampleObject.zr.add(dot);
               this.zrDrawElement.hoverDots.push(dot);
             });
 
@@ -949,7 +945,7 @@ export default {
               },
               z: 2000,
             });
-          zr.add(this.zrDrawElement.tooltipX);
+            sampleObject.zr.add(this.zrDrawElement.tooltipX);
             if (curViewName === 1 && linePoints && linePoints.length) {
               this.zrDrawElement.tooltipY = new echarts.graphic.Text({
                 position: [
@@ -969,10 +965,11 @@ export default {
                 },
                 z: 2000,
               });
-            zr.add(this.zrDrawElement.tooltipY);
+              sampleObject.zr.add(this.zrDrawElement.tooltipY);
             }
           }
         });
+      }
     },
     dealrelativeTime(time) {
       const arr = time.split(' ');
@@ -985,26 +982,27 @@ export default {
      */
     removeTooltip(sampleIndex) {
       const sampleObject = this.originDataArr[sampleIndex];
-      if (sampleObject.charObj) {
-        const zr = sampleObject.charObj.getZr();
+      if (sampleObject.zr) {
         if (this.zrDrawElement.hoverLine) {
-          zr.remove(this.zrDrawElement.hoverLine);
+          sampleObject.zr.remove(this.zrDrawElement.hoverLine);
         }
         if (this.zrDrawElement.tooltip) {
-          zr.remove(this.zrDrawElement.tooltip);
+          sampleObject.zr.remove(this.zrDrawElement.tooltip);
         }
         if (this.zrDrawElement.tooltipY) {
-          zr.remove(this.zrDrawElement.tooltipY);
+          sampleObject.zr.remove(this.zrDrawElement.tooltipY);
         }
         if (
           this.zrDrawElement.hoverDots &&
           this.zrDrawElement.hoverDots.length
         ) {
-          this.zrDrawElement.hoverDots.forEach((dot) => zr.remove(dot));
+          this.zrDrawElement.hoverDots.forEach((dot) =>
+            sampleObject.zr.remove(dot),
+          );
           this.zrDrawElement.hoverDots.length = 0;
         }
         if (this.zrDrawElement.tooltipX) {
-          zr.remove(this.zrDrawElement.tooltipX);
+          sampleObject.zr.remove(this.zrDrawElement.tooltipX);
         }
       }
     },
@@ -1115,6 +1113,8 @@ export default {
       };
     },
     formatCharOption(sampleIndex, charOption) {
+      const colorMin = '#346E69';
+      const colorMax = '#EBFFFD';
       const sampleObject = this.originDataArr[sampleIndex];
       const fullScreenFun = this.toggleFullScreen;
       const curAxisName = this.curAxisName;
@@ -1125,17 +1125,16 @@ export default {
           textStyle: {
             fontSize: '16',
             fontWeight: '600',
+          },
           bottom: 6,
           left: 'center',
         },
-        },
         grid: {
           left: 15,
           top: 60,
           right: 40,
           bottom: 60,
         },
-        color: ['#346E69'],
         xAxis: {
           max: charOption.maxX,
           min: charOption.minX,
@@ -1244,10 +1243,15 @@ export default {
           dimension: 1,
           range: [charOption.minStep, charOption.maxStep],
           inRange: {
-            colorLightness: [0.3, 0.9],
+            color: [colorMin, colorMax],
           },
         };
       } else if (this.curViewName === 0) {
+        option.color = this.getGrientColor(
+            colorMin,
+            colorMax,
+            charOption.seriesData.length,
+        );
         option.series = [];
         charOption.seriesData.forEach((k) => {
           option.series.push({
@@ -1262,6 +1266,66 @@ export default {
       }
       return option;
     },
+    formatColor(str) {
+      if (!str) {
+        return;
+      }
+      const colorReg = /^([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
+      let colorStr = str.toLowerCase().slice(1);
+      if (colorReg.test(colorStr)) {
+        let colorStrNew = '';
+        if (colorStr.length === 3) {
+          for (let i = 0; i < 3; i++) {
+            colorStrNew += colorStrNew
+                .slice(i, i + 1)
+                .concat(colorStrNew.slice(i, i + 1));
+          }
+          colorStr = colorStrNew;
+        }
+        const colorFormat = [];
+        for (let i = 0; i < 6; i += 2) {
+          colorFormat.push(parseInt(`0x${colorStr.slice(i, i + 2)}`));
+        }
+        return colorFormat;
+      } else {
+        return colorStr;
+      }
+    },
+    formatColorToHex(rgb) {
+      const regRgb = /^(rgb|RGB)/g;
+      if (regRgb.test(rgb)) {
+        const colorSplit = rgb.replace(/(?:(|)|rgb|RGB)*/g, '').split(',');
+        let hexStr = '';
+        for (let i = 0; i < colorSplit.length; i++) {
+          let hexItem = Number(colorSplit[i]).toString(16);
+          hexItem = hexItem < 10 ? `0${hexItem}` : hexItem;
+          if (hexItem === '0') {
+            hexItem += hexItem;
+          }
+          hexStr += hexItem;
+        }
+        if (hexStr.length !== 6) {
+          hexStr = rgb;
+        }
+        return hexStr;
+      }
+    },
+    getGrientColor(startColor, endColor, step) {
+      const startRgb = this.formatColor(startColor);
+      const endRgb = this.formatColor(endColor);
+      const gapRgbR = (endRgb[0] - startRgb[0]) / step;
+      const gapRgbG = (endRgb[1] - startRgb[1]) / step;
+      const gapRgbB = (endRgb[2] - startRgb[2]) / step;
+      const colorResult = [];
+      for (let i = 0; i < step; i++) {
+        const sR = parseInt(gapRgbR * i + startRgb[0]);
+        const sG = parseInt(gapRgbG * i + startRgb[1]);
+        const sB = parseInt(gapRgbB * i + startRgb[2]);
+        const hex = this.formatColorToHex(`rgb(${sR},${sG},${sB})`);
+        colorResult.push(hex);
+      }
+      return colorResult;
+    },
     toggleFullScreen(sampleIndex) {
       const sampleObject = this.originDataArr[sampleIndex];
       if (!sampleObject) {
@@ -1370,7 +1434,9 @@ export default {
       padding: 24px 32px;
       text-align: right;
     }
+    // No data available.
     .image-noData {
+      // Set the width and white on the right.
       width: 100%;
       height: 450px;
       display: flex;

mindinsight/ui/src/views/train-manage/training-dashboard.vue

@@ -51,15 +51,15 @@ limitations under the License.
         </div>
       </div>
       <div class="cl-dashboard-con-up"
-           :class="!!histogramTag ? '' : 'no-data-hover'"
+           :class="!!histogramTag && !wrongPlugin ? '' : 'no-data-hover'"
            @click="viewMoreHistogram">
         <div class="cl-dashboard-title">{{$t("histogram.titleText")}}</div>
         <div class="cl-module">
           <div id="distribution-chart"
-               v-show="!!histogramTag"></div>
+               v-show="!!histogramTag && !wrongPlugin"></div>
           <div class="no-data-img"
                key="no-chart-data"
-               v-show="!histogramTag">
+               v-show="!histogramTag || wrongPlugin">
             <img :src="require('@/assets/images/nodata.png')"
                  alt="" />
             <p class='no-data-text'>
@@ -769,15 +769,18 @@ export default {
       if (!tagList) {
         return;
       }
+      let histogramTag = '';
       if (!this.histogramTag || tagList.indexOf(this.histogramTag) === -1) {
-        this.histogramTag = tagList[0] || '';
+        histogramTag = tagList[0] || '';
+      } else {
+        histogramTag = this.histogramTag;
       }
-      if (!this.histogramTag) {
+      if (!histogramTag) {
         return;
       }
       const params = {
         train_id: this.trainingJobId,
-        tag: this.histogramTag,
+        tag: histogramTag,
       };
       // tag
       RequestService.getHistogramData(params).then((res) => {
@@ -790,6 +793,7 @@ export default {
           return;
         }
         const data = res.data;
+        this.histogramTag = histogramTag;
         this.histogramData = this.formOriData(data);
         const charOption = this.formatDataToChar();
         this.updateHistogramSampleData(charOption);
@@ -873,7 +877,7 @@ export default {
         textStyle: {fontFamily: 'Merriweather Sans'},
         title: {
           text: charOption.title || '',
-          textStyle: {fontSize: '16', fontWeight: '600'},
+          textStyle: {fontSize: '12', fontWeight: '400'},
           bottom: 6,
           left: 'center',
         },