!1128 UI / Add relative time unit to change button and make xAxis label horizontal display

From: @weiyanxi
Reviewed-by: @yelihua,@ouwenchang
Signed-off-by: @ouwenchang

mindinsight/ui/src/components/histogram-unit.vue

@@ -402,9 +402,7 @@ export default {
             )
             : [];
         } else if (this.axisName === 1) {
-          data = `${this.formateNUmber(
-              (filter[0].relative_time).toFixed(0),
-          )}s`;
+          data = this.formateNUmber(filter[0].relative_time.toFixed(0));
         } else {
           data = this.formateNUmber(filter[0].step);
         }

mindinsight/ui/src/views/train-manage/compare-plate.vue

@@ -55,9 +55,15 @@ limitations under the License.
                         text-color="#FFFFFF"
                         size="small "
                         @change="timeTypeChange">
-          <el-radio-button :label="$t('scalar.step')"></el-radio-button>
-          <el-radio-button :label="$t('scalar.relativeTime')"></el-radio-button>
-          <el-radio-button :label="$t('scalar.absoluteTime')"></el-radio-button>
+          <el-radio-button :label="$t('scalar.step')">
+            {{$t('scalar.step')}}
+          </el-radio-button>
+          <el-radio-button :label="$t('scalar.relativeTime')">
+            {{$t('scalar.relativeTime') + $t('symbols.leftbracket') + 's' + $t('symbols.rightbracket')}}
+          </el-radio-button>
+          <el-radio-button :label="$t('scalar.absoluteTime')">
+            {{$t('scalar.absoluteTime')}}
+          </el-radio-button>
         </el-radio-group>
         <div class="xaxis-title">{{$t('scalar.smoothness')}}</div>
         <el-slider v-model="smoothValue"
@@ -593,7 +599,6 @@ export default {
           axisLabel: {
             color: '#9EA4B3',
             interval: 0,
-            rotate: that.isActive === 2 ? 0 : 90,
             formatter: (value) => {
               if (sampleObject.zoomDataXTimer) {
                 clearTimeout(sampleObject.zoomDataXTimer);
@@ -1113,8 +1118,6 @@ export default {
 
             sampleObject.charData.charOption.xAxis.minInterval =
               this.isActive === 0 ? 1 : 0;
-            sampleObject.charData.charOption.xAxis.axisLabel.rotate =
-              this.isActive === 2 ? 0 : 90;
             sampleObject.updateFlag = true;
             sampleObject.charObj.clear();
             this.updateOrCreateChar(sampleObject.sampleIndex);

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

@@ -59,9 +59,15 @@ limitations under the License.
                         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-button :label=0>
+            {{$t('histogram.step')}}
+          </el-radio-button>
+          <el-radio-button :label=1>
+            {{$t('histogram.relativeTime') + $t('symbols.leftbracket') + 's' + $t('symbols.rightbracket')}}
+          </el-radio-button>
+          <el-radio-button :label=2>
+            {{$t('histogram.absoluteTime')}}
+          </el-radio-button>
         </el-radio-group>
       </div>
       <!-- Content display area -->
@@ -1179,7 +1185,7 @@ export default {
             )
             : [];
         } else if (this.curAxisName === 1) {
-          data = `${this.formateNUmber(filter[0].relative_time.toFixed(0))}s`;
+          data = this.formateNUmber(filter[0].relative_time.toFixed(0));
         } else {
           data = this.formateNUmber(filter[0].step);
         }

mindinsight/ui/src/views/train-manage/scalar-compare.vue

@@ -83,9 +83,15 @@ limitations under the License.
                       text-color="#FFFFFF"
                       size="small "
                       @change="timeTypeChange">
-        <el-radio-button :label="$t('scalar.step')"></el-radio-button>
-        <el-radio-button :label="$t('scalar.relativeTime')"></el-radio-button>
-        <el-radio-button :label="$t('scalar.absoluteTime')"></el-radio-button>
+          <el-radio-button :label="$t('scalar.step')">
+            {{$t('scalar.step')}}
+          </el-radio-button>
+          <el-radio-button :label="$t('scalar.relativeTime')">
+            {{$t('scalar.relativeTime') + $t('symbols.leftbracket') + 's' + $t('symbols.rightbracket')}}
+          </el-radio-button>
+          <el-radio-button :label="$t('scalar.absoluteTime')">
+            {{$t('scalar.absoluteTime')}}
+          </el-radio-button>
       </el-radio-group>
       <div class="xaxis-title">{{$t('scalar.smoothness')}}</div>
       <el-slider v-model="smoothValue"
@@ -445,8 +451,6 @@ export default {
             ].valueData[this.curBenchX];
           });
           this.charOption.xAxis[0].minInterval = this.isActive === 0 ? 1 : 0;
-          this.charOption.xAxis[0].axisLabel.rotate =
-            this.isActive === 2 ? 0 : 90;
 
           this.updateOrCreateChar();
         }
@@ -781,7 +785,6 @@ export default {
             axisLabel: {
               color: '#9EA4B3',
               interval: 0,
-              rotate: _this.isActive === 2 ? 0 : 90,
               formatter(value) {
                 if (_this.isActive === 2) {
                   const date = new Date(value * 1000);

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

@@ -54,9 +54,15 @@ limitations under the License.
                         text-color="#FFFFFF"
                         size="small "
                         @change="timeTypeChange">
-          <el-radio-button :label="$t('scalar.step')"></el-radio-button>
-          <el-radio-button :label="$t('scalar.relativeTime')"></el-radio-button>
-          <el-radio-button :label="$t('scalar.absoluteTime')"></el-radio-button>
+          <el-radio-button :label="$t('scalar.step')">
+            {{$t('scalar.step')}}
+          </el-radio-button>
+          <el-radio-button :label="$t('scalar.relativeTime')">
+            {{$t('scalar.relativeTime') + $t('symbols.leftbracket') + 's' + $t('symbols.rightbracket')}}
+          </el-radio-button>
+          <el-radio-button :label="$t('scalar.absoluteTime')">
+            {{$t('scalar.absoluteTime')}}
+          </el-radio-button>
         </el-radio-group>
         <div class="xaxis-title">{{$t('scalar.smoothness')}}</div>
         <el-slider v-model="smoothValue"
@@ -272,6 +278,7 @@ import multiselectGroupComponents from '../../components/multiselect-group.vue';
 import autoUpdate from '../../mixins/auto-update.vue';
 import threshold from '../../mixins/threshold.vue';
 
+
 export default {
   mixins: [threshold, autoUpdate],
   data() {
@@ -699,7 +706,6 @@ export default {
           axisLabel: {
             color: '#9EA4B3',
             interval: 0,
-            rotate: that.isActive === 2 ? 0 : 90,
             formatter(value) {
               if (that.isActive === 2) {
                 if (sampleObject.fullScreen) {
@@ -1133,7 +1139,6 @@ export default {
             const optionxAxis = sampleObject.charData.charOption.xAxis;
             const seriesData = sampleObject.charData.charOption.series[0];
             optionxAxis.minInterval = this.isActive === 0 ? 1 : 0;
-            optionxAxis.axisLabel.rotate = this.isActive === 2 ? 0 : 90;
             sampleObject.updateFlag = true;
             sampleObject.charObj.clear();
 

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

@@ -73,9 +73,15 @@ limitations under the License.
                         v-if="!!curDataType && !!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-button :label="0">
+            {{$t('histogram.step')}}
+          </el-radio-button>
+          <el-radio-button :label="1">
+            {{$t('histogram.relativeTime') + $t('symbols.leftbracket') + 's' + $t('symbols.rightbracket')}}
+          </el-radio-button>
+          <el-radio-button :label="2">
+            {{$t('histogram.absoluteTime')}}
+          </el-radio-button>
         </el-radio-group>
       </div>
       <!-- Content display area -->

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

@@ -912,7 +912,6 @@ export default {
             axisLabel: {
               color: '#9EA4B3',
               interval: 0,
-              rotate: 90,
               formatter(value) {
                 const symbol = Math.abs(value);
                 if (symbol.toString().length > 6) {