add histogram

mindinsight/ui/src/components/header.vue

@@ -38,6 +38,7 @@ limitations under the License.
     <div class="cl-header-right"
          v-if="this.$route.path.indexOf('/scalar') > 0
          || this.$route.path.indexOf('/image') > 0
+         || this.$route.path.indexOf('/histogram') > 0
          || this.$route.path.indexOf('/training-dashboard') > 0">
       <!-- automatic refresh switch -->
       <el-switch v-model="isTimeReload"

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

@@ -7,7 +7,8 @@
     "reset": "重置",
     "tagFilterPlaceHolder": "请输入需要的标签(支持正则表达式)",
     "dataError": "获取到的数据异常",
-    "regIllegal": "请输入正确的检索条件"
+    "regIllegal": "请输入正确的检索条件",
+    "stayTuned": "敬请期待"
   },
   "symbols": {
     "leftbracket": "(",
@@ -99,6 +100,18 @@
     "setBright": "亮度调整",
     "setContrast": "对比度调整"
   },
+  "histogram": {
+    "titleText": "参数分布图",
+    "xAxisTitle": "水平轴",
+    "viewType": "直方图模式",
+    "centerValue": "中心值",
+    "step": "步骤",
+    "relativeTime": "相对时间",
+    "absoluteTime": "绝对时间",
+    "overlay": "覆盖",
+    "offset": "偏移",
+    "fullScreen": "切换全屏"
+  },
   "dataMap": {
     "titleText": "数据图可视"
   },
@@ -146,11 +159,12 @@
     "50545002": "请求API的HTTP方法错误",
     "50545005": "训练作业不存在",
     "50545007": "Summary数据正在被加载，请等待Summary数据加载结束",
-    "50545009": "查询的节点不在图中",
+    "50545009": "查询的节点不在图中，请刷新",
     "5054500A": "训练作业ID进行URL解码失败",
     "5054500C": "计算图不存在，请刷新",
     "5054500D": "图片数据不存在，请刷新",
     "5054500E": "标量数据不存在，请刷新",
+    "5054500F": "参数分布图数据不存在，请刷新",
 
     "50542082": "模型名称缺失",
     "50542085": "模型名称不合法",

mindinsight/ui/src/router.js

@@ -46,6 +46,10 @@ export default new Router({
       path: '/train-manage/image',
       component: () => import('./views/train-manage/image.vue'),
     },
+    {
+      path: '/train-manage/histogram',
+      component: () => import('./views/train-manage/histogram.vue'),
+    },
     {
       path: '/train-manage/graph',
       component: () => import('./views/train-manage/graph.vue'),

mindinsight/ui/src/services/request-service.js

@@ -114,4 +114,11 @@ export default {
       params: params,
     });
   },
+  getHistogramData(params) {
+    return axios({
+      method: 'get',
+      url: '/v1/mindinsight/datavisual/histograms',
+      params: params,
+    });
+  },
 };

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

@@ -809,16 +809,60 @@ export default {
               _this.$t('scalar.absoluteTime') +
               '</td></tr>';
             let strBody = '';
+            const runArr=[];
+            const detialArr=[];
+            let curStep=null;
             let dataCount = 0;
             params.forEach((parma) => {
               if (parma.componentIndex % 2 === 0) {
+                let addFlag=true;
                 const curIndex = parseInt(parma.componentIndex / 2);
-                let curSerieOriData;
+                const curSerieOriData=_this.charData[curIndex]
+                 ? _this.charData[curIndex].valueData
+                 : null;
 
-                if (_this.charData[curIndex]) {
-                  curSerieOriData = _this.charData[curIndex].valueData;
+                if (!curSerieOriData) {
+                  return;
+                }
+                if (curStep===null) {
+                  curStep=curSerieOriData.stepData[parma.dataIndex][0];
+                } else {
+                  if (
+                    curSerieOriData.stepData[parma.dataIndex][0]===curStep
+                  ) {
+                    const sameRunIndex=[];
+                    runArr.forEach((runName, index)=>{
+                      if (parma.seriesName === runName) {
+                        sameRunIndex.push(index);
+                      }
+                    });
+                    if (sameRunIndex.length) {
+                      sameRunIndex.forEach((sameIndex) => {
+                        if (
+                          detialArr[sameIndex] &&
+                          detialArr[sameIndex].value ===
+                            curSerieOriData.stepData[parma.dataIndex][1] &&
+                          detialArr[sameIndex].wallTime ===
+                            curSerieOriData.absData[parma.dataIndex][0]
+                        ) {
+                          addFlag = false;
+                        }
+                      });
+                    }
+                  } else {
+                    addFlag = false;
+                  }
+                }
 
+                if (addFlag) {
                   dataCount++;
+                  runArr.push(parma.seriesName);
+                  detialArr.push({
+                    value: curSerieOriData.stepData[parma.dataIndex][1],
+                    step: curSerieOriData.stepData[parma.dataIndex][0],
+                    wallTime: curSerieOriData.absData[parma.dataIndex][0],
+                    dataIndex: parma.dataIndex,
+                  });
                   strBody +=
                     `<td style="border-radius:50%;width:15px;height:15px;vertical-align: middle;` +
                     `margin-right: 5px;background-color:` +