fix some parts of components to support language selection (#511)

frontend/src/metrics/ui/ScalarChart.vue

@@ -500,7 +500,7 @@ export default {
         step: {
           xAxis: {
             type: 'value',
-            name: this.horizontal,
+            name: this.$t('lang.step'),
             axisLabel: {
               fontSize: '11',
             },
@@ -511,7 +511,7 @@ export default {
         relative: {
           xAxis: {
             type: 'value',
-            name: this.horizontal,
+            name: this.$t('lang.relative'),
             axisLabel: {
               fontSize: '11',
             },
@@ -522,7 +522,7 @@ export default {
         wall: {
           xAxis: {
             type: 'time',
-            name: this.horizontal,
+            name: this.$t('lang.wall'),
             axisLabel: {
               fontSize: '11',
               formatter: function(value, index) {

frontend/src/samples/ui/Audio.vue

@@ -6,9 +6,9 @@
       <span class="visual-dl-audio-run-icon">{{ tagInfo.run }}</span>
     </h3>
     <p>
-      <span>Step:</span>
+      <span>{{ $t('lang.step') }}:</span>
       <span>{{ audioData.step }}</span>
-      <span class="visual-del-audio-time">{{ audioData.wallTime | formatTime }}</span>
+      <span class="visual-del-audio-time">{{ audioData.wallTime | formatTime(this.$i18n.locale) }}</span>
     </p>
     <v-slider
       :max="steps"
@@ -52,7 +52,7 @@ export default {
     },
   },
   filters: {
-    formatTime: function(value) {
+    formatTime: function(value, language) {
       if (!value) {
         return;
       }
@@ -62,7 +62,8 @@ export default {
         weekday: 'short', year: 'numeric', month: 'short',
         day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit',
       };
-      return time.toLocaleDateString('en-US', options);
+      let enc = language === 'zh' ? 'zh-CN' : 'en-US';
+      return time.toLocaleDateString(enc, options);
     },
   },
   data() {
@@ -112,7 +113,7 @@ export default {
     tagInfo: function(val) {
       this.currentIndex = 0;
       this.getOriginAudioData();
-    }
+    },
   },
   methods: {
     stopInterval() {

frontend/src/samples/ui/Image.vue

@@ -6,7 +6,7 @@
       <span class="visual-dl-image-run-icon">{{ tagInfo.run }}</span>
     </h3>
     <p>
-      <span>Step:</span>
+      <span>{{ $t('lang.step') }}:</span>
       <span>{{ imgData.step }}</span>
       <span class="visual-del-image-time">{{ imgData.wallTime | formatTime }}</span>
     </p>
@@ -129,7 +129,7 @@ export default {
     tagInfo: function(val) {
       this.currentIndex = 0;
       this.getOriginChartsData();
-    }
+    },
   },
   methods: {
     stopInterval() {

frontend/src/samples/ui/Text.vue

@@ -6,9 +6,9 @@
       <span class="visual-dl-text-run-icon">{{ tagInfo.run }}</span>
     </h3>
     <p>
-      <span>Step:</span>
+      <span>{{ $t('lang.step') }}:</span>
       <span>{{ textData.step }}</span>
-      <span class="visual-del-text-time">{{ textData.wallTime | formatTime }}</span>
+      <span class="visual-del-text-time">{{ textData.wallTime | formatTime(this.$i18n.locale) }}</span>
     </p>
     <v-slider
       :max="steps"
@@ -49,7 +49,7 @@ export default {
     },
   },
   filters: {
-    formatTime: function(value) {
+    formatTime: function(value, language) {
       if (!value) {
         return;
       }
@@ -59,7 +59,8 @@ export default {
         weekday: 'short', year: 'numeric', month: 'short',
         day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit',
       };
-      return time.toLocaleDateString('en-US', options);
+      let enc = language === 'zh' ? 'zh-CN' : 'en-US';
+      return time.toLocaleDateString(enc, options);
     },
   },
   data() {
@@ -109,7 +110,7 @@ export default {
     tagInfo: function(val) {
       this.currentIndex = 0;
       this.getOriginChartsData();
-    }
+    },
   },
   methods: {
     stopInterval() {