From 94d15a0b6b39751ab6d7fe11a6b01677271d1682 Mon Sep 17 00:00:00 2001
From: xiayifan <xiayifan1@huawei.com>
Date: Tue, 14 Jul 2020 15:51:09 +0800
Subject: [PATCH] UI fixed the coordinate axis text is not clearly displayed

---
 .../ui/src/components/histogramUnit.vue       | 49 ++++++++++++-------
 .../ui/src/views/train-manage/histogram.vue   | 49 +++++++++++++------
 .../ui/src/views/train-manage/tensor.vue      |  3 +-
 3 files changed, 68 insertions(+), 33 deletions(-)

diff --git a/mindinsight/ui/src/components/histogramUnit.vue b/mindinsight/ui/src/components/histogramUnit.vue
index 6ff1dbf0..dfbf9b8b 100644
--- a/mindinsight/ui/src/components/histogramUnit.vue
+++ b/mindinsight/ui/src/components/histogramUnit.vue
@@ -173,11 +173,12 @@ export default {
       );
       const fullScreenFun = this.toggleFullScreen;
       const axisName = this.axisName;
+      const that = this;
       const option = {
         grid: {
           left: 24,
           top: 60,
-          right: 50,
+          right: 80,
           bottom: 60,
         },
         xAxis: {
@@ -187,11 +188,7 @@ export default {
           axisLabel: {
             fontSize: '11',
             formatter: function(value) {
-              if (value.toString().length >= 6) {
-                return value.toExponential(3);
-              } else {
-                return Math.round(value * 1000) / 1000;
-              }
+              return that.formateNUmber(value);
             },
           },
           splitLine: {show: false},
@@ -204,6 +201,9 @@ export default {
           boundaryGap: false,
           axisLabel: {
             fontSize: '11',
+            formatter: function(value) {
+              return that.formateNUmber(value);
+            },
           },
         },
         toolbox: {
@@ -276,7 +276,6 @@ export default {
           option.grid.right = 140;
         }
         option.yAxis.inverse = true;
-        const that = this;
         option.yAxis.axisLabel.formatter = function(value) {
           return that.yAxisFormatter(value);
         };
@@ -303,14 +302,12 @@ export default {
       this.removeTooltip();
       if (!this.fullScreen) {
         if (this.axisName === 2) {
-          // this.charObj.setOption({grid: {right: 140}});
           this.charOption.grid.right = 140;
         }
         this.charOption.toolbox.feature.myToolFullScreen.iconStyle.borderColor =
           '#3E98C5';
       } else {
-        // this.charObj.setOption({grid: {right: 40}});
-        this.charOption.grid.right = 40;
+        this.charOption.grid.right = 80;
         this.charOption.toolbox.feature.myToolFullScreen.iconStyle.borderColor =
           '#6D7278';
       }
@@ -388,16 +385,31 @@ export default {
             )
             : [];
         } else if (this.axisName === 1) {
-          data = `${(filter[0].relative_time / 3600).toFixed(3)}h`;
+          data = `${this.formateNUmber(
+              (filter[0].relative_time / 3600).toFixed(3),
+          )}h`;
         } else {
-          data = filter[0].step;
+          data = this.formateNUmber(filter[0].step);
         }
       }
       return data;
     },
     /**
      * Formate time display
-     * @param {Onject} time
+     * @param {Number} value
+     * @return {Number} Formatted number
+     */
+    formateNUmber(value) {
+      value = Number(value);
+      if (value.toString().length > 6) {
+        return value.toExponential(3);
+      } else {
+        return Math.round(value * 1000) / 1000;
+      }
+    },
+    /**
+     * Formate time display
+     * @param {Object} time
      * @return {String} Formatted time
      */
     dealrelativeTime(time) {
@@ -510,9 +522,11 @@ export default {
           hoveredAxis.toString().length >= 6
             ? yValueFormat(hoveredAxis)
             : hoveredAxis
-        }</td><td style="text-align:center;">${hoveredItem.step}</td><td>${(
-          hoveredItem.relative_time / 1000
-        ).toFixed(3)}${unit}</td><td>${this.dealrelativeTime(
+        }</td><td style="text-align:center;">${this.formateNUmber(
+            hoveredItem.step,
+        )}</td><td>${this.formateNUmber(
+            (hoveredItem.relative_time / 1000).toFixed(3),
+        )}${unit}</td><td>${this.dealrelativeTime(
             new Date(hoveredItem.wall_time * 1000).toString(),
         )}</td>`;
         const dom = document.querySelector('#tipTr');
@@ -563,7 +577,8 @@ export default {
                 20 -
                 offsetTop}px`;
             }
-            if (width + e.event.x + 50 > screenWidth && screenWidth > width) {
+            // Blank area on the right of the chart is 80
+            if (width + e.event.x + 80 > screenWidth && screenWidth > width) {
               document.querySelector('#echartTip').style.left = `${e.event.x -
                 width -
                 20}px`;
diff --git a/mindinsight/ui/src/views/train-manage/histogram.vue b/mindinsight/ui/src/views/train-manage/histogram.vue
index 5199eb1e..a89f36cb 100644
--- a/mindinsight/ui/src/views/train-manage/histogram.vue
+++ b/mindinsight/ui/src/views/train-manage/histogram.vue
@@ -770,9 +770,11 @@ export default {
           hoveredAxis.toString().length >= 6
             ? yValueFormat(hoveredAxis)
             : hoveredAxis
-        }</td><td style="text-align:center;">${hoveredItem.step}</td><td>${(
-          hoveredItem.relative_time / 1000
-        ).toFixed(3)}${unit}</td><td>${this.dealrelativeTime(
+        }</td><td style="text-align:center;">${this.formateNUmber(
+            hoveredItem.step,
+        )}</td><td>${this.formateNUmber(
+            (hoveredItem.relative_time / 1000).toFixed(3),
+        )}${unit}</td><td>${this.dealrelativeTime(
             new Date(hoveredItem.wall_time * 1000).toString(),
         )}</td>`;
         const dom = document.querySelector('#tipTr');
@@ -816,7 +818,8 @@ export default {
               20 -
               offsetTop}px`;
           }
-          if (width + e.event.x + 50 > screenWidth && screenWidth > width) {
+          // Blank area on the right of the chart is 80
+          if (width + e.event.x + 80 > screenWidth && screenWidth > width) {
             document.querySelector('#echartTip').style.left = `${e.event.x -
               width -
               20}px`;
@@ -1118,11 +1121,12 @@ export default {
       );
       const fullScreenFun = this.toggleFullScreen;
       const curAxisName = this.curAxisName;
+      const that = this;
       const option = {
         grid: {
           left: 24,
           top: 60,
-          right: 50,
+          right: 80,
           bottom: 60,
         },
         xAxis: {
@@ -1132,11 +1136,7 @@ export default {
           axisLabel: {
             fontSize: '11',
             formatter: function(value) {
-              if (value.toString().length >= 6) {
-                return value.toExponential(3);
-              } else {
-                return Math.round(value * 1000) / 1000;
-              }
+              return that.formateNUmber(value);
             },
           },
           splitLine: {show: false},
@@ -1149,6 +1149,9 @@ export default {
           boundaryGap: false,
           axisLabel: {
             fontSize: '11',
+            formatter: function(value) {
+              return that.formateNUmber(value);
+            },
           },
         },
         toolbox: {
@@ -1222,7 +1225,6 @@ export default {
           option.grid.right = 140;
         }
         option.yAxis.inverse = true;
-        const that = this;
         option.yAxis.axisLabel.formatter = function(value) {
           return that.yAxisFormatter(sampleObject, value);
         };
@@ -1248,16 +1250,33 @@ export default {
       if (filter.length) {
         if (this.curAxisName === 2) {
           data = sampleObject.fullScreen
-            ? this.dealrelativeTime(new Date(filter[0].wall_time * 1000).toString())
+            ? this.dealrelativeTime(
+                new Date(filter[0].wall_time * 1000).toString(),
+            )
             : [];
         } else if (this.curAxisName === 1) {
-          data = `${(filter[0].relative_time / 3600).toFixed(3)}h`;
+          data = `${this.formateNUmber(
+              (filter[0].relative_time / 3600).toFixed(3),
+          )}h`;
         } else {
-          data = filter[0].step;
+          data = this.formateNUmber(filter[0].step);
         }
       }
       return data;
     },
+    /**
+     * Formate time display
+     * @param {Number} value
+     * @return {Number} Formatted number
+     */
+    formateNUmber(value) {
+      value = Number(value);
+      if (value.toString().length > 6) {
+        return value.toExponential(3);
+      } else {
+        return Math.round(value * 1000) / 1000;
+      }
+    },
     formatColor(str) {
       if (!str) {
         return;
@@ -1331,7 +1350,7 @@ export default {
         sampleObject.charOption.toolbox.feature.myToolFullScreen.iconStyle.borderColor =
           '#3E98C5';
       } else {
-        sampleObject.charOption.grid.right = 40;
+        sampleObject.charOption.grid.right = 80;
         sampleObject.charOption.toolbox.feature.myToolFullScreen.iconStyle.borderColor =
           '#6D7278';
       }
diff --git a/mindinsight/ui/src/views/train-manage/tensor.vue b/mindinsight/ui/src/views/train-manage/tensor.vue
index 49a9a350..d2b435de 100644
--- a/mindinsight/ui/src/views/train-manage/tensor.vue
+++ b/mindinsight/ui/src/views/train-manage/tensor.vue
@@ -98,7 +98,7 @@ limitations under the License.
           </div>
           <div class="sample-content"
                v-for="sampleItem in originDataArr"
-               :key="sampleItem.domId"
+               :key="sampleItem.ref"
                :class="sampleItem.fullScreen ? 'char-full-screen' : ''"
                v-show="sampleItem.show">
             <div class="chars-container">
@@ -416,6 +416,7 @@ export default {
      */
     filterChange(data, sampleItem) {
       sampleItem.filterStr = `[${data.toString()}]`;
+      sampleItem.newDataFlag = true;
       this.freshtMartixData(sampleItem);
     },
     /**