Skip to content

M
mindinsight

MindSpore / mindinsight

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

!62 45 UI support histogram visualization(4th commit) 

Merge pull request !62 from 潘慧/master_ph
上级 513fe853 0af8b771
隐藏空白更改
内联 并排
Showing with 171 addition and 154 deletion
mindinsight/ui/src/views/train-manage/histogram.vue
浏览文件 @ a2dd0c13
......@@ -90,6 +90,7 @@ limitations under the License.
<div class="chars-container">
<div class="char-item-content"
:id="sampleItem.domId"></div>
<div class="tag-title">{{sampleItem.tagName}}</div>
</div>
</div>
</div>
......@@ -213,6 +214,7 @@ export default {
this.curPageArr.forEach((item) => {
if (item.zr) {
item.zr.off('mouseout', 'mousemove');
item.zr = null;
}
});
}
......@@ -354,6 +356,10 @@ export default {
if (!noPageDataNumChange) {
this.curPageArr.forEach((sampleItem) => {
sampleItem.show = false;
if (sampleItem.zr) {
sampleItem.zr.off('mouseout', 'mousemove');
sampleItem.zr = null;
}
});
}
// This interface is used to obtain the current page group and hide the current page group.
......@@ -437,6 +443,12 @@ export default {
* Clear data
*/
clearAllData() {
this.originDataArr.forEach((item) => {
if (item.zr) {
item.zr.off('mouseout', 'mousemove');
item.zr = null;
}
});
this.tagList = [];
this.originDataArr = [];
this.curFullTagDic = {};
......@@ -631,117 +643,118 @@ export default {
setTimeout(() => {
sampleObject.charObj.setOption(sampleObject.charData.charOption, true);
}, 10);
if (sampleObject.zr) {
sampleObject.zr.off('mouseout', 'mousemove');
}
sampleObject.zr = sampleObject.charObj.getZr();
const p = Math.max(0, d3.precisionRound(0.01, 1.01) - 1);
const yValueFormat = d3.format('.' + p + 'e');
const chartData = sampleObject.charData.oriData.chartData;
const rawData = charOption.seriesData;
/**
* get convert point
* @param {Array} pt value
* @return {Array}
*/
function getCoord(pt) {
return sampleObject.charObj.convertToPixel('grid', pt);
}
/**
* find nearest value
* @param {Array} eventPoint value
* @return {Object}
*/
function findNearestValue(eventPoint) {
if (
!eventPoint ||
!eventPoint.length ||
!sampleObject ||
!sampleObject.charObj
) {
return;
}
const value = sampleObject.charObj.convertFromPixel('grid', eventPoint);
let binIndex = null;
let yIndex = null;
let nearestX = Infinity;
let nearestY = -Infinity;
let nearestYData = Infinity;
if (!sampleObject.charData.oriData || !value || !value.length) {
return;
if (!sampleObject.zr) {
sampleObject.zr = sampleObject.charObj.getZr();
const p = Math.max(0, d3.precisionRound(0.01, 1.01) - 1);
const yValueFormat = d3.format('.' + p + 'e');
const chartData = sampleObject.charData.oriData.chartData;
const rawData = charOption.seriesData;
/**
* get convert point
* @param {Array} pt value
* @return {Array}
*/
function getCoord(pt) {
return sampleObject.charObj.convertToPixel('grid', pt);
}
const gridRect = sampleObject.charObj
.getModel()
.getComponent('grid', 0)
.coordinateSystem.getRect();
const gridRectY = gridRect.y - 10;
const x = value[0];
chartData.forEach((dataItem, i) => {
let distY;
let yAxis;
for (let k = 0; k < dataItem.items.length - 1; k++) {
const item = dataItem.items[k];
const itemNext = dataItem.items[k + 1];
const nextX = itemNext[2];
const nextZ = itemNext[3];
if (item.length >= 4) {
if (item[2] < x && nextX >= x) {
const proportionX = (x - item[2]) / (nextX - item[2]);
yAxis = (nextZ - item[3]) * proportionX + item[3];
distY = Math.abs(value[1] - yAxis);
break;
}
}
/**
* find nearest value
* @param {Array} eventPoint value
* @return {Object}
*/
function findNearestValue(eventPoint) {
if (
!eventPoint ||
!eventPoint.length ||
!sampleObject ||
!sampleObject.charObj
) {
return;
}
if (curViewName === 0 && distY < nearestYData) {
nearestYData = distY;
yIndex = i;
} else if (curViewName === 1) {
const pt = getCoord([x, dataItem.step]);
const ptStep = pt[1];
pt[1] -=
((yAxis - charOption.minZ) /
(charOption.maxZ - charOption.minZ)) *
gridRectY;
if (
eventPoint[1] > pt[1] &&
eventPoint[1] < ptStep &&
ptStep > nearestY
) {
nearestY = ptStep;
yIndex = i;
}
const value = sampleObject.charObj.convertFromPixel(
'grid',
eventPoint,
);
let binIndex = null;
let yIndex = null;
let nearestX = Infinity;
let nearestY = -Infinity;
let nearestYData = Infinity;
if (!sampleObject.charData.oriData || !value || !value.length) {
return;
}
});
if (yIndex === null && curViewName === 1) {
chartData.forEach((item, index) => {
if (item.step > value[1]) {
yIndex = yIndex === null ? index : Math.min(yIndex, index);
const gridRect = sampleObject.charObj
.getModel()
.getComponent('grid', 0)
.coordinateSystem.getRect();
const gridRectY = gridRect.y - 10;
const x = value[0];
chartData.forEach((dataItem, i) => {
let distY;
let yAxis;
for (let k = 0; k < dataItem.items.length - 1; k++) {
const item = dataItem.items[k];
const itemNext = dataItem.items[k + 1];
const nextX = itemNext[2];
const nextZ = itemNext[3];
if (item.length >= 4) {
if (item[2] < x && nextX >= x) {
const proportionX = (x - item[2]) / (nextX - item[2]);
yAxis = (nextZ - item[3]) * proportionX + item[3];
distY = Math.abs(value[1] - yAxis);
break;
}
}
}
});
}
if (yIndex !== null) {
const yData = chartData[yIndex].items;
yData.forEach((ele, index) => {
const distX = Math.abs(ele[2] - value[0]);
if (distX < nearestX) {
nearestX = distX;
binIndex = index;
if (curViewName === 0 && distY < nearestYData) {
nearestYData = distY;
yIndex = i;
} else if (curViewName === 1) {
const pt = getCoord([x, dataItem.step]);
const ptStep = pt[1];
pt[1] -=
((yAxis - charOption.minZ) /
(charOption.maxZ - charOption.minZ)) *
gridRectY;
if (
eventPoint[1] > pt[1] &&
eventPoint[1] < ptStep &&
ptStep > nearestY
) {
nearestY = ptStep;
yIndex = i;
}
}
});
binIndex =
binIndex === 0
? 1
: binIndex === yData.length - 1
? yData.length - 2
: binIndex;
if (yIndex === null && curViewName === 1) {
chartData.forEach((item, index) => {
if (item.step > value[1]) {
yIndex = yIndex === null ? index : Math.min(yIndex, index);
}
});
}
if (yIndex !== null) {
const yData = chartData[yIndex].items;
yData.forEach((ele, index) => {
const distX = Math.abs(ele[2] - value[0]);
if (distX < nearestX) {
nearestX = distX;
binIndex = index;
}
});
binIndex =
binIndex === 0
? 1
: binIndex === yData.length - 1
? yData.length - 2
: binIndex;
}
return {
binIndex,
yIndex,
};
}
return {
binIndex,
yIndex,
};
}
if (sampleObject.zr) {
sampleObject.zr.off('mouseout', 'mousemove');
sampleObject.zr.on('mouseout', (e) => {
if (!rawData || !rawData.length) {
return;
......@@ -933,7 +946,6 @@ export default {
this.zrDrawElement.tooltipX = new echarts.graphic.Text({
position: [itemX, gridRect.y + gridRect.height],
style: {
fontFamily: 'Merriweather Sans',
text: Math.round(x * 1000) / 1000,
textFill: '#fff',
textAlign: 'center',
......@@ -947,14 +959,17 @@ export default {
});
sampleObject.zr.add(this.zrDrawElement.tooltipX);
if (curViewName === 1 && linePoints && linePoints.length) {
let text = '';
if (yIndex) {
text = this.yAxisFormatter(sampleIndex, yIndex);
}
this.zrDrawElement.tooltipY = new echarts.graphic.Text({
position: [
gridRect.x + gridRect.width,
linePoints[linePoints.length - 1][1],
],
style: {
fontFamily: 'Merriweather Sans',
text: hoveredItem.step,
text: text,
textFill: '#fff',
textVerticalAlign: 'middle',
fontSize: 12,
......@@ -1067,7 +1082,6 @@ export default {
},
formatDataToChar(dataIndex) {
const dataItem = this.originDataArr[dataIndex].charData.oriData;
const title = this.originDataArr[dataIndex].tagName;
const seriesData = [];
let maxStep = -Infinity;
let minStep = Infinity;
......@@ -1101,7 +1115,6 @@ export default {
});
}
return {
title,
seriesData,
maxStep,
minStep,
......@@ -1119,20 +1132,10 @@ export default {
const fullScreenFun = this.toggleFullScreen;
const curAxisName = this.curAxisName;
const option = {
textStyle: {fontFamily: 'Merriweather Sans'},
title: {
text: charOption.title || '',
textStyle: {
fontSize: '16',
fontWeight: '600',
},
bottom: 6,
left: 'center',
},
grid: {
left: 15,
top: 60,
right: 40,
right: 50,
bottom: 60,
},
xAxis: {
......@@ -1216,24 +1219,7 @@ export default {
option.yAxis.inverse = true;
const that = this;
option.yAxis.axisLabel.formatter = function(value) {
let data = '';
const filter = sampleObject.charData.oriData.chartData.filter(
(k) => k.step === value,
);
if (filter.length) {
if (curAxisName === 2) {
data = sampleObject.fullScreen
? that.dealrelativeTime(
new Date(filter[0].wall_time).toString(),
)
: [];
} else if (curAxisName === 1) {
data = (filter[0].relative_time / 1000).toFixed(3);
} else {
data = filter[0].step;
}
}
return data;
return that.yAxisFormatter(sampleIndex, value);
};
option.visualMap = {
type: 'continuous',
......@@ -1266,6 +1252,25 @@ export default {
}
return option;
},
yAxisFormatter(sampleIndex, value) {
const sampleObject = this.originDataArr[sampleIndex];
let data = '';
const filter = sampleObject.charData.oriData.chartData.filter(
(k) => k.step === value,
);
if (filter.length) {
if (this.curAxisName === 2) {
data = sampleObject.fullScreen
? this.dealrelativeTime(new Date(filter[0].wall_time).toString())
: [];
} else if (this.curAxisName === 1) {
data = `${(filter[0].relative_time / 3600).toFixed(3)}h`;
} else {
data = filter[0].step;
}
}
return data;
},
formatColor(str) {
if (!str) {
return;
......@@ -1331,6 +1336,7 @@ export default {
if (!sampleObject) {
return;
}
this.removeTooltip(sampleIndex);
sampleObject.fullScreen = !sampleObject.fullScreen;
if (sampleObject.fullScreen) {
if (this.curAxisName === 2) {
......@@ -1425,7 +1431,13 @@ export default {
position: relative;
.char-item-content {
width: 100%;
height: 100%;
height: calc(100% - 26px);
}
.tag-title {
width: 100%;
font-size: 16px;
font-weight: 600;
text-align: center;
}
}
}
......
mindinsight/ui/src/views/train-manage/model-traceback.vue
浏览文件 @ a2dd0c13
......@@ -903,7 +903,7 @@ export default {
overflow: hidden;
.top-area {
margin: 24px 32px 16px;
margin: 24px 32px 12px;
display: flex;
justify-content: flex-end;
.checkbox {
......@@ -935,6 +935,7 @@ export default {
}
.btns {
margin-left: 20px;
padding-top: 12px;
.custom-btn {
border: 1px solid #00a5a7;
border-radius: 2px;
......@@ -953,7 +954,7 @@ export default {
.table-container {
background-color: white;
height: calc(60% - 74px);
padding: 12px 32px;
padding: 2px 32px;
position: relative;
.custom-label {
max-width: calc(100% - 25px);
......
mindinsight/ui/src/views/train-manage/training-dashboard.vue
浏览文件 @ a2dd0c13
......@@ -55,8 +55,11 @@ limitations under the License.
@click="viewMoreHistogram">
<div class="cl-dashboard-title">{{$t("histogram.titleText")}}</div>
<div class="cl-module">
<div id="distribution-chart"
v-show="!!histogramTag && !wrongPlugin"></div>
<div id="histogram-char-container"
v-show="!!histogramTag && !wrongPlugin">
<div id="distribution-chart"></div>
<div class="tag-text">{{histogramTag}}</div>
</div>
<div class="no-data-img"
key="no-chart-data"
v-show="!histogramTag || wrongPlugin">
......@@ -670,7 +673,7 @@ export default {
grid: {
top: 20,
bottom: 66,
left: 66,
left: 60,
right: 60,
},
xAxis: [
......@@ -837,7 +840,6 @@ export default {
},
formatDataToChar() {
const dataItem = this.histogramData;
const title = dataItem.tag;
const seriesData = [];
let maxStep = -Infinity;
let minStep = Infinity;
......@@ -862,7 +864,6 @@ export default {
});
}
return {
title,
seriesData,
maxStep,
minStep,
......@@ -874,13 +875,6 @@ export default {
},
formatCharOption(charOption) {
const option = {
textStyle: {fontFamily: 'Merriweather Sans'},
title: {
text: charOption.title || '',
textStyle: {fontSize: '12', fontWeight: '400'},
bottom: 6,
left: 'center',
},
grid: {
left: 15,
top: 126,
......@@ -1840,11 +1834,21 @@ export default {
}
}
#distribution-chart {
height: 100%;
height: calc(100% - 19px);
canvas {
cursor: pointer;
}
}
.histogram-char-container {
height: 100%;
width: 100%;
cursor: pointer;
.tag-text {
font-size: 12px;
font-weight: 400;
text-align: center;
}
}
#dataMapGraph {
.CreatDataset > polygon,
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或