Skip to content

M
mindinsight

MindSpore / mindinsight

通知 7
Star 3
Fork 2
M
mindinsight
提交 b476d7d4 编写于 作者: M mindspore-ci-bot 提交者： Gitee
浏览文件
操作

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

Merge pull request !66 from wenkai/zhaoting1
上级 92eac0ed 0357d70b
显示空白变更内容
内联 并排
Showing with 117 addition and 50 deletion
mindinsight/ui/src/views/train-manage/histogram.vue
浏览文件 @ b476d7d4
......@@ -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
浏览文件 @ b476d7d4
......@@ -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
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或