!62 45 UI support histogram visualization(4th commit)

Merge pull request !62 from 潘慧/master_ph

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

@@ -90,6 +90,7 @@ limitations under the License.
             <div class="chars-container">
               <div class="char-item-content"
                    :id="sampleItem.domId"></div>
+              <div class="tag-title">{{sampleItem.tagName}}</div>
             </div>
           </div>
         </div>
@@ -213,6 +214,7 @@ export default {
       this.curPageArr.forEach((item) => {
         if (item.zr) {
           item.zr.off('mouseout', 'mousemove');
+          item.zr = null;
         }
       });
     }
@@ -354,6 +356,10 @@ export default {
       if (!noPageDataNumChange) {
         this.curPageArr.forEach((sampleItem) => {
           sampleItem.show = false;
+          if (sampleItem.zr) {
+            sampleItem.zr.off('mouseout', 'mousemove');
+            sampleItem.zr = null;
+          }
         });
       }
       // This interface is used to obtain the current page group and hide the current page group.
@@ -437,6 +443,12 @@ export default {
      * Clear data
      */
     clearAllData() {
+      this.originDataArr.forEach((item) => {
+        if (item.zr) {
+          item.zr.off('mouseout', 'mousemove');
+          item.zr = null;
+        }
+      });
       this.tagList = [];
       this.originDataArr = [];
       this.curFullTagDic = {};
@@ -631,9 +643,7 @@ export default {
       setTimeout(() => {
         sampleObject.charObj.setOption(sampleObject.charData.charOption, true);
       }, 10);
-      if (sampleObject.zr) {
-        sampleObject.zr.off('mouseout', 'mousemove');
-      }
+      if (!sampleObject.zr) {
         sampleObject.zr = sampleObject.charObj.getZr();
         const p = Math.max(0, d3.precisionRound(0.01, 1.01) - 1);
         const yValueFormat = d3.format('.' + p + 'e');
@@ -661,7 +671,10 @@ export default {
           ) {
             return;
           }
-        const value = sampleObject.charObj.convertFromPixel('grid', eventPoint);
+          const value = sampleObject.charObj.convertFromPixel(
+              'grid',
+              eventPoint,
+          );
           let binIndex = null;
           let yIndex = null;
           let nearestX = Infinity;
@@ -741,7 +754,7 @@ export default {
             yIndex,
           };
         }
-      if (sampleObject.zr) {
+        sampleObject.zr.off('mouseout', 'mousemove');
         sampleObject.zr.on('mouseout', (e) => {
           if (!rawData || !rawData.length) {
             return;
@@ -933,7 +946,6 @@ export default {
             this.zrDrawElement.tooltipX = new echarts.graphic.Text({
               position: [itemX, gridRect.y + gridRect.height],
               style: {
-                fontFamily: 'Merriweather Sans',
                 text: Math.round(x * 1000) / 1000,
                 textFill: '#fff',
                 textAlign: 'center',
@@ -947,14 +959,17 @@ export default {
             });
             sampleObject.zr.add(this.zrDrawElement.tooltipX);
             if (curViewName === 1 && linePoints && linePoints.length) {
+              let text = '';
+              if (yIndex) {
+                text = this.yAxisFormatter(sampleIndex, yIndex);
+              }
               this.zrDrawElement.tooltipY = new echarts.graphic.Text({
                 position: [
                   gridRect.x + gridRect.width,
                   linePoints[linePoints.length - 1][1],
                 ],
                 style: {
-                  fontFamily: 'Merriweather Sans',
-                  text: hoveredItem.step,
+                  text: text,
                   textFill: '#fff',
                   textVerticalAlign: 'middle',
                   fontSize: 12,
@@ -1067,7 +1082,6 @@ export default {
     },
     formatDataToChar(dataIndex) {
       const dataItem = this.originDataArr[dataIndex].charData.oriData;
-      const title = this.originDataArr[dataIndex].tagName;
       const seriesData = [];
       let maxStep = -Infinity;
       let minStep = Infinity;
@@ -1101,7 +1115,6 @@ export default {
         });
       }
       return {
-        title,
         seriesData,
         maxStep,
         minStep,
@@ -1119,20 +1132,10 @@ export default {
       const fullScreenFun = this.toggleFullScreen;
       const curAxisName = this.curAxisName;
       const option = {
-        textStyle: {fontFamily: 'Merriweather Sans'},
-        title: {
-          text: charOption.title || '',
-          textStyle: {
-            fontSize: '16',
-            fontWeight: '600',
-          },
-          bottom: 6,
-          left: 'center',
-        },
         grid: {
           left: 15,
           top: 60,
-          right: 40,
+          right: 50,
           bottom: 60,
         },
         xAxis: {
@@ -1216,24 +1219,7 @@ export default {
         option.yAxis.inverse = true;
         const that = this;
         option.yAxis.axisLabel.formatter = function(value) {
-          let data = '';
-          const filter = sampleObject.charData.oriData.chartData.filter(
-              (k) => k.step === value,
-          );
-          if (filter.length) {
-            if (curAxisName === 2) {
-              data = sampleObject.fullScreen
-                ? that.dealrelativeTime(
-                    new Date(filter[0].wall_time).toString(),
-                )
-                : [];
-            } else if (curAxisName === 1) {
-              data = (filter[0].relative_time / 1000).toFixed(3);
-            } else {
-              data = filter[0].step;
-            }
-          }
-          return data;
+          return that.yAxisFormatter(sampleIndex, value);
         };
         option.visualMap = {
           type: 'continuous',
@@ -1266,6 +1252,25 @@ export default {
       }
       return option;
     },
+    yAxisFormatter(sampleIndex, value) {
+      const sampleObject = this.originDataArr[sampleIndex];
+      let data = '';
+      const filter = sampleObject.charData.oriData.chartData.filter(
+          (k) => k.step === value,
+      );
+      if (filter.length) {
+        if (this.curAxisName === 2) {
+          data = sampleObject.fullScreen
+            ? this.dealrelativeTime(new Date(filter[0].wall_time).toString())
+            : [];
+        } else if (this.curAxisName === 1) {
+          data = `${(filter[0].relative_time / 3600).toFixed(3)}h`;
+        } else {
+          data = filter[0].step;
+        }
+      }
+      return data;
+    },
     formatColor(str) {
       if (!str) {
         return;
@@ -1331,6 +1336,7 @@ export default {
       if (!sampleObject) {
         return;
       }
+      this.removeTooltip(sampleIndex);
       sampleObject.fullScreen = !sampleObject.fullScreen;
       if (sampleObject.fullScreen) {
         if (this.curAxisName === 2) {
@@ -1425,7 +1431,13 @@ export default {
           position: relative;
           .char-item-content {
             width: 100%;
-            height: 100%;
+            height: calc(100% - 26px);
+          }
+          .tag-title {
+            width: 100%;
+            font-size: 16px;
+            font-weight: 600;
+            text-align: center;
           }
         }
       }

mindinsight/ui/src/views/train-manage/model-traceback.vue

@@ -903,7 +903,7 @@ export default {
     overflow: hidden;
 
     .top-area {
-      margin: 24px 32px 16px;
+      margin: 24px 32px 12px;
       display: flex;
       justify-content: flex-end;
       .checkbox {
@@ -935,6 +935,7 @@ export default {
       }
       .btns {
         margin-left: 20px;
+        padding-top: 12px;
         .custom-btn {
           border: 1px solid #00a5a7;
           border-radius: 2px;
@@ -953,7 +954,7 @@ export default {
     .table-container {
       background-color: white;
       height: calc(60% - 74px);
-      padding: 12px 32px;
+      padding: 2px 32px;
       position: relative;
       .custom-label {
         max-width: calc(100% - 25px);

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

@@ -55,8 +55,11 @@ limitations under the License.
            @click="viewMoreHistogram">
         <div class="cl-dashboard-title">{{$t("histogram.titleText")}}</div>
         <div class="cl-module">
-          <div id="distribution-chart"
-               v-show="!!histogramTag && !wrongPlugin"></div>
+          <div id="histogram-char-container"
+               v-show="!!histogramTag && !wrongPlugin">
+            <div id="distribution-chart"></div>
+            <div class="tag-text">{{histogramTag}}</div>
+          </div>
           <div class="no-data-img"
                key="no-chart-data"
                v-show="!histogramTag || wrongPlugin">
@@ -670,7 +673,7 @@ export default {
         grid: {
           top: 20,
           bottom: 66,
-          left: 66,
+          left: 60,
           right: 60,
         },
         xAxis: [
@@ -837,7 +840,6 @@ export default {
     },
     formatDataToChar() {
       const dataItem = this.histogramData;
-      const title = dataItem.tag;
       const seriesData = [];
       let maxStep = -Infinity;
       let minStep = Infinity;
@@ -862,7 +864,6 @@ export default {
         });
       }
       return {
-        title,
         seriesData,
         maxStep,
         minStep,
@@ -874,13 +875,6 @@ export default {
     },
     formatCharOption(charOption) {
       const option = {
-        textStyle: {fontFamily: 'Merriweather Sans'},
-        title: {
-          text: charOption.title || '',
-          textStyle: {fontSize: '12', fontWeight: '400'},
-          bottom: 6,
-          left: 'center',
-        },
         grid: {
           left: 15,
           top: 126,
@@ -1840,11 +1834,21 @@ export default {
     }
   }
   #distribution-chart {
-    height: 100%;
+    height: calc(100% - 19px);
     canvas {
       cursor: pointer;
     }
   }
+  .histogram-char-container {
+    height: 100%;
+    width: 100%;
+    cursor: pointer;
+    .tag-text {
+      font-size: 12px;
+      font-weight: 400;
+      text-align: center;
+    }
+  }
 
   #dataMapGraph {
     .CreatDataset > polygon,