!66 equally distribute histogram ignoring actual step number to avoid large white space

Merge pull request !66 from wenkai/zhaoting1

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

@@ -640,9 +640,7 @@ export default {
             null,
         );
       }
-      setTimeout(() => {
       sampleObject.charObj.setOption(sampleObject.charData.charOption, true);
-      }, 10);
       if (!sampleObject.zr) {
         sampleObject.zr = sampleObject.charObj.getZr();
         const p = Math.max(0, d3.precisionRound(0.01, 1.01) - 1);
@@ -848,13 +846,13 @@ export default {
                 circleOption.shape = {
                   cx: itemX,
                   cy: pt[1],
-                  r: 2,
+                  r: 1.5,
                 };
               } else {
                 circleOption.shape = {
                   cx: 0,
                   cy: 0,
-                  r: 2,
+                  r: 1.5,
                 };
                 circleOption.position = sampleObject.charObj.convertToPixel(
                     'grid',
@@ -1049,7 +1047,7 @@ export default {
         const chartItem = {
           wall_time: histogram.wall_time,
           relative_time: histogram.wall_time - wallTimeInit,
-          step: histogram.step,
+          step: `${histogram.step}`,
           items: [],
         };
         const chartArr = [];
@@ -1059,7 +1057,7 @@ export default {
           if (!filter.length) {
             chartArr.push([
               histogram.wall_time,
-              histogram.step,
+              `${histogram.step}`,
               xData,
               Math.floor(bucket[2]),
             ]);
@@ -1070,9 +1068,9 @@ export default {
           const minItem = chartArr[0][2];
           const maxItem = chartArr[chartArr.length - 1][2];
           const chartAll = [
-            [histogram.wall_time, histogram.step, minItem, 0],
+            [histogram.wall_time, `${histogram.step}`, minItem, 0],
           ].concat(chartArr, [
-            [histogram.wall_time, histogram.step, maxItem, 0],
+            [histogram.wall_time, `${histogram.step}`, maxItem, 0],
           ]);
           chartItem.items = chartAll;
           chartData.push(chartItem);
@@ -1093,11 +1091,7 @@ export default {
       if (dataItem.chartData && dataItem.chartData.length) {
         dataItem.chartData.forEach((histogram) => {
           const seriesItem = [];
-          girdData.push([
-            histogram.step,
-            histogram.relative_time,
-            histogram.wall_time,
-          ]);
+          girdData.push(histogram.step);
           maxStep = Math.max(maxStep, histogram.step);
           minStep = Math.min(minStep, histogram.step);
           histogram.items.forEach((bucket) => {
@@ -1128,6 +1122,11 @@ export default {
     formatCharOption(sampleIndex, charOption) {
       const colorMin = '#346E69';
       const colorMax = '#EBFFFD';
+      const colorArr = this.getGrientColor(
+          colorMin,
+          colorMax,
+          charOption.seriesData.length,
+      );
       const sampleObject = this.originDataArr[sampleIndex];
       const fullScreenFun = this.toggleFullScreen;
       const curAxisName = this.curAxisName;
@@ -1185,6 +1184,17 @@ export default {
         },
       };
       if (this.curViewName === 1) {
+        const seriesData = [];
+        charOption.seriesData.forEach((item, dataIndex) => {
+          const dataItem = {
+            name: item[1],
+            value: item,
+            itemStyle: {
+              color: colorArr[dataIndex],
+            },
+          };
+          seriesData.push(dataItem);
+        });
         option.series = [
           {
             type: 'custom',
@@ -1209,9 +1219,11 @@ export default {
                 }),
               };
             },
-            data: charOption.seriesData,
+            data: seriesData,
           },
         ];
+        option.yAxis.data = charOption.girdData;
+        option.yAxis.type = 'category';
         option.grid.top = 126;
         if (curAxisName === 2 && sampleObject.fullScreen) {
           option.grid.right = 140;
@@ -1221,23 +1233,8 @@ export default {
         option.yAxis.axisLabel.formatter = function(value) {
           return that.yAxisFormatter(sampleIndex, value);
         };
-        option.visualMap = {
-          type: 'continuous',
-          show: false,
-          min: charOption.minStep,
-          max: charOption.maxStep,
-          dimension: 1,
-          range: [charOption.minStep, charOption.maxStep],
-          inRange: {
-            color: [colorMin, colorMax],
-          },
-        };
       } else if (this.curViewName === 0) {
-        option.color = this.getGrientColor(
-            colorMin,
-            colorMax,
-            charOption.seriesData.length,
-        );
+        option.color = colorArr;
         option.series = [];
         charOption.seriesData.forEach((k) => {
           option.series.push({

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

@@ -807,7 +807,7 @@ export default {
       dataItem.histograms.forEach((histogram, index) => {
         const chartItem = {
           wall_time: histogram.wall_time,
-          step: histogram.step,
+          step: `${histogram.step}`,
           items: [],
         };
         const chartArr = [];
@@ -817,7 +817,7 @@ export default {
           if (!filter.length) {
             chartArr.push([
               histogram.wall_time,
-              histogram.step,
+              `${histogram.step}`,
               xData,
               Math.floor(bucket[2]),
             ]);
@@ -828,9 +828,9 @@ export default {
           const minItem = chartArr[0][2];
           const maxItem = chartArr[chartArr.length - 1][2];
           const chartAll = [
-            [histogram.wall_time, histogram.step, minItem, 0],
+            [histogram.wall_time, `${histogram.step}`, minItem, 0],
           ].concat(chartArr, [
-            [histogram.wall_time, histogram.step, maxItem, 0],
+            [histogram.wall_time, `${histogram.step}`, maxItem, 0],
           ]);
           chartItem.items = chartAll;
           chartData.push(chartItem);
@@ -847,9 +847,11 @@ export default {
       let minX = Infinity;
       let maxZ = -Infinity;
       let minZ = Infinity;
+      const gridData = [];
       if (dataItem.chartData && dataItem.chartData.length) {
         dataItem.chartData.forEach((histogram) => {
           const seriesItem = [];
+          gridData.push(histogram.step);
           maxStep = Math.max(maxStep, histogram.step);
           minStep = Math.min(minStep, histogram.step);
           histogram.items.sort((a, b) => a[0] - b[0]);
@@ -871,17 +873,35 @@ export default {
         minX,
         maxZ,
         minZ,
+        gridData,
       };
     },
     formatCharOption(charOption) {
+      const colorMin = '#346E69';
+      const colorMax = '#EBFFFD';
+      const colorArr = this.getGrientColor(
+          colorMin,
+          colorMax,
+          charOption.seriesData.length,
+      );
+      const seriesData = [];
+      charOption.seriesData.forEach((item, dataIndex) => {
+        const dataItem = {
+          name: item[1],
+          value: item,
+          itemStyle: {
+            color: colorArr[dataIndex],
+          },
+        };
+        seriesData.push(dataItem);
+      });
       const option = {
         grid: {
           left: 15,
-          top: 126,
+          top: 120,
           right: 40,
-          bottom: 60,
+          bottom: 43,
         },
-        color: ['#346E69'],
         xAxis: {
           max: charOption.maxX,
           min: charOption.minX,
@@ -895,6 +915,7 @@ export default {
           splitLine: {show: false},
         },
         yAxis: {
+          type: 'category',
           position: 'right',
           axisLine: {onZero: false, show: false},
           splitLine: {show: true},
@@ -904,17 +925,6 @@ export default {
             fontSize: '11',
           },
         },
-        visualMap: {
-          type: 'continuous',
-          show: false,
-          min: charOption.minStep,
-          max: charOption.maxStep,
-          dimension: 1,
-          range: [charOption.minStep, charOption.maxStep],
-          inRange: {
-            colorLightness: [0.3, 0.9],
-          },
-        },
         series: [
           {
             type: 'custom',
@@ -939,12 +949,72 @@ export default {
                 }),
               };
             },
-            data: charOption.seriesData,
+            data: seriesData,
           },
         ],
       };
       return option;
     },
+    formatColor(str) {
+      if (!str) {
+        return;
+      }
+      const colorReg = /^([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
+      let colorStr = str.toLowerCase().slice(1);
+      if (colorReg.test(colorStr)) {
+        let colorStrNew = '';
+        if (colorStr.length === 3) {
+          for (let i = 0; i < 3; i++) {
+            colorStrNew += colorStrNew
+                .slice(i, i + 1)
+                .concat(colorStrNew.slice(i, i + 1));
+          }
+          colorStr = colorStrNew;
+        }
+        const colorFormat = [];
+        for (let i = 0; i < 6; i += 2) {
+          colorFormat.push(parseInt(`0x${colorStr.slice(i, i + 2)}`));
+        }
+        return colorFormat;
+      } else {
+        return colorStr;
+      }
+    },
+    formatColorToHex(rgb) {
+      const regRgb = /^(rgb|RGB)/g;
+      if (regRgb.test(rgb)) {
+        const colorSplit = rgb.replace(/(?:(|)|rgb|RGB)*/g, '').split(',');
+        let hexStr = '';
+        for (let i = 0; i < colorSplit.length; i++) {
+          let hexItem = Number(colorSplit[i]).toString(16);
+          hexItem = hexItem < 10 ? `0${hexItem}` : hexItem;
+          if (hexItem === '0') {
+            hexItem += hexItem;
+          }
+          hexStr += hexItem;
+        }
+        if (hexStr.length !== 6) {
+          hexStr = rgb;
+        }
+        return hexStr;
+      }
+    },
+    getGrientColor(startColor, endColor, step) {
+      const startRgb = this.formatColor(startColor);
+      const endRgb = this.formatColor(endColor);
+      const gapRgbR = (endRgb[0] - startRgb[0]) / step;
+      const gapRgbG = (endRgb[1] - startRgb[1]) / step;
+      const gapRgbB = (endRgb[2] - startRgb[2]) / step;
+      const colorResult = [];
+      for (let i = 0; i < step; i++) {
+        const sR = parseInt(gapRgbR * i + startRgb[0]);
+        const sG = parseInt(gapRgbG * i + startRgb[1]);
+        const sB = parseInt(gapRgbB * i + startRgb[2]);
+        const hex = this.formatColorToHex(`rgb(${sR},${sG},${sB})`);
+        colorResult.push(hex);
+      }
+      return colorResult;
+    },
     /**
      * update sample data
      * @param {Object} charOption data