Skip to content

M
mindinsight

MindSpore / mindinsight

通知 8
Star 4
Fork 2
M
mindinsight
提交 0ab992b4 编写于 作者: M mindspore-ci-bot 提交者： Gitee
浏览文件
操作

!401 Adding scalar single point judgment and optimize chart drawing logic 

Merge pull request !401 from 王卫宁/wwn2
上级 143f8248 bcef2513
隐藏空白更改
内联 并排
Showing with 217 addition and 105 deletion
mindinsight/ui/src/views/train-manage/scalar.vue
浏览文件 @ 0ab992b4
...@@ -259,6 +259,7 @@ export default { ...@@ -259,6 +259,7 @@ export default {
curBenchX: 'stepData', // Front axle reference curBenchX: 'stepData', // Front axle reference
curAxisName: this.$t('scalar.step'), // Current chart tip curAxisName: this.$t('scalar.step'), // Current chart tip
axisBenchChangeTimer: null, // Horizontal axis reference switching timing axisBenchChangeTimer: null, // Horizontal axis reference switching timing
yAxisScaleTimer: null, // yAxis scale timer
compare: false, // Comparison Page compare: false, // Comparison Page
scalarCompare: this.$t('scalar')['comparison'], scalarCompare: this.$t('scalar')['comparison'],
abort: false, // charts that have not been drawn. abort: false, // charts that have not been drawn.
...@@ -370,6 +371,10 @@ export default { ...@@ -370,6 +371,10 @@ export default {
clearTimeout(this.axisBenchChangeTimer); clearTimeout(this.axisBenchChangeTimer);
this.axisBenchChangeTimer = null; this.axisBenchChangeTimer = null;
} }
if (this.yAxisScaleTimer) {
clearTimeout(this.yAxisScaleTimer);
this.yAxisScaleTimer = null;
}
}, },
mounted() { mounted() {
if (!this.$route.query || !this.$route.query.train_id) { if (!this.$route.query || !this.$route.query.train_id) {
...@@ -576,6 +581,7 @@ export default { ...@@ -576,6 +581,7 @@ export default {
if (!res || !res.data || !res.data.metadatas) { if (!res || !res.data || !res.data.metadatas) {
if (sampleObject.charObj) { if (sampleObject.charObj) {
sampleObject.charObj.clear(); sampleObject.charObj.clear();
sampleObject.onePoint = false;
} }
return; return;
} }
...@@ -641,6 +647,15 @@ export default { ...@@ -641,6 +647,15 @@ export default {
sampleObject.charData.charOption = this.formateCharOption( sampleObject.charData.charOption = this.formateCharOption(
sampleIndex, sampleIndex,
); );
const tempOption = sampleObject.charData.charOption;
if (
tempOption.series[0].data.length === 1 ||
sampleObject.onePoint
) {
tempOption.series[0].showSymbol = true;
} else {
tempOption.series[0].showSymbol = false;
}
this.$forceUpdate(); this.$forceUpdate();
...@@ -648,41 +663,9 @@ export default { ...@@ -648,41 +663,9 @@ export default {
if (sampleObject.charObj) { if (sampleObject.charObj) {
sampleObject.charObj.hideLoading(); sampleObject.charObj.hideLoading();
} }
// Draw chart // Draw chart
if (!this.compare) { if (!this.compare) {
this.updateOrCreateChar(sampleIndex); this.updateOrCreateChar(sampleIndex, true);
this.getCache();
if (
this.thresholdLocal &&
this.thresholdLocal[this.decodeTrainingJobId] &&
this.thresholdLocal[this.decodeTrainingJobId][
sampleObject.tagName
]
) {
const tempStorgeArr = JSON.parse(
JSON.stringify(
this.thresholdLocal[this.decodeTrainingJobId][
sampleObject.tagName
],
),
);
let pieceStr = '';
pieceStr = this.formatePieceStr(tempStorgeArr);
sampleObject.pieceStr = pieceStr;
tempStorgeArr.forEach((item) => {
item.color = this.thresholdColor;
});
if (sampleObject.charObj) {
this.setVisualMap(sampleObject, tempStorgeArr);
}
} else {
sampleObject.pieceStr = '';
sampleObject.charData.charOption.series[0].markLine = false;
}
} else { } else {
this.abort = true; this.abort = true;
} }
...@@ -696,6 +679,99 @@ export default { ...@@ -696,6 +679,99 @@ export default {
}); });
}, },
/**
* set one point style
* @param {Object} sampleObject
*/
setOnePoint(sampleObject) {
const that = this;
sampleObject.charObj.on('datazoom', function(params) {
const xAxisObject = params.batch[0];
const yAxisObject = params.batch[1];
const charData = sampleObject.charData.charOption.series[0].data;
const tempCharOption = sampleObject.charData.charOption;
// one point
if (charData.length === 1) {
sampleObject.onePoint = true;
tempCharOption.series[0].showSymbol = true;
sampleObject.charObj.setOption(tempCharOption, false);
return;
}
let filtetArr = [];
for (let i = 0; i < charData.length; i++) {
if (
Math.ceil(charData[i][0] * 10000) / 10000 >=
xAxisObject.startValue &&
Math.floor(charData[i][0] * 10000) / 10000 <=
xAxisObject.endValue &&
Math.ceil(charData[i][1] * 10000) / 10000 >=
yAxisObject.startValue &&
Math.floor(charData[i][1] * 10000) / 10000 <= yAxisObject.endValue
) {
filtetArr.push(charData[i]);
if (filtetArr.length > 1) {
filtetArr = [];
break;
}
}
}
if (filtetArr.length === 1) {
sampleObject.onePoint = true;
tempCharOption.series[0].showSymbol = true;
} else {
sampleObject.onePoint = false;
tempCharOption.series[0].showSymbol = false;
}
if (
tempCharOption.visualMap &&
tempCharOption.visualMap['pieces'] &&
tempCharOption.visualMap['pieces'].length > 0
) {
tempCharOption.visualMap = null;
tempCharOption.series[0].markLine = null;
that.updateVisualMap(sampleObject);
} else {
sampleObject.charObj.setOption(tempCharOption, false);
}
});
},
/**
* set restore
* @param {Object} sampleObject
*/
setRestore(sampleObject) {
const that = this;
sampleObject.charObj.on('restore', function(params) {
const charData = sampleObject.charData.charOption.series[0].data;
const tempCharOption = sampleObject.charData.charOption;
// one point
if (charData.length === 1) {
sampleObject.onePoint = true;
tempCharOption.series[0].showSymbol = true;
sampleObject.charObj.setOption(tempCharOption, false);
return;
}
sampleObject.onePoint = false;
tempCharOption.series[0].showSymbol = false;
if (
tempCharOption.visualMap &&
tempCharOption.visualMap['pieces'] &&
tempCharOption.visualMap['pieces'].length > 0
) {
tempCharOption.visualMap = null;
tempCharOption.series[0].markLine = null;
that.updateVisualMap(sampleObject);
} else {
sampleObject.charObj.setOption(tempCharOption, false);
}
});
},
/** /**
* Formatting Chart Data * Formatting Chart Data
* @param {Number} sampleIndex Chart subscript * @param {Number} sampleIndex Chart subscript
...@@ -822,7 +898,6 @@ export default { ...@@ -822,7 +898,6 @@ export default {
width: 2, width: 2,
}, },
}, },
axisLabel: { axisLabel: {
color: '#9EA4B3', color: '#9EA4B3',
formatter(value) { formatter(value) {
...@@ -968,7 +1043,8 @@ export default { ...@@ -968,7 +1043,8 @@ export default {
strBody += strBody +=
`<tr><td style="border-radius:50%;width:15px;height:15px;vertical-align: middle;` + `<tr><td style="border-radius:50%;width:15px;height:15px;vertical-align: middle;` +
`margin-right: 5px;background-color:${ `margin-right: 5px;background-color:${
parma.color === that.thresholdColor parma.color === that.thresholdColor &&
sampleObject.charData.charOption.visualMap
? that.thresholdColor ? that.thresholdColor
: sampleObject.colors : sampleObject.colors
};` + };` +
...@@ -1053,13 +1129,47 @@ export default { ...@@ -1053,13 +1129,47 @@ export default {
return tempOption; return tempOption;
}, },
/**
* update visualMap
* @param {Object} sampleObject
*/
updateVisualMap(sampleObject) {
this.getCache();
if (
this.thresholdLocal &&
this.thresholdLocal[this.decodeTrainingJobId] &&
this.thresholdLocal[this.decodeTrainingJobId][sampleObject.tagName]
) {
const tempStorgeArr = JSON.parse(
JSON.stringify(
this.thresholdLocal[this.decodeTrainingJobId][sampleObject.tagName],
),
);
let pieceStr = '';
pieceStr = this.formatePieceStr(tempStorgeArr);
sampleObject.pieceStr = pieceStr;
tempStorgeArr.forEach((item) => {
item.color = this.thresholdColor;
});
if (sampleObject.charObj) {
this.setVisualMap(sampleObject, tempStorgeArr);
}
} else {
sampleObject.pieceStr = '';
sampleObject.charData.charOption.series[0].markLine = null;
}
},
/** /**
* Updating or Creating a Specified chart * Updating or Creating a Specified chart
* @param {Number} sampleIndex Chart subscript * @param {Number} sampleIndex Chart subscript
* @param {Boolen} resetAnimate restart the animation * @param {Boolean} isSetVisualMap isSetVisualMap
*/ */
updateOrCreateChar(sampleIndex, resetAnimate) { updateOrCreateChar(sampleIndex, isSetVisualMap) {
const sampleObject = this.originDataArr[sampleIndex]; const sampleObject = this.originDataArr[sampleIndex];
if (!sampleObject) { if (!sampleObject) {
return; return;
...@@ -1081,11 +1191,11 @@ export default { ...@@ -1081,11 +1191,11 @@ export default {
null, null,
); );
sampleObject.charObj.setOption(sampleObject.charData.charOption, true); sampleObject.charObj.setOption(sampleObject.charData.charOption, true);
this.setOnePoint(sampleObject);
this.setRestore(sampleObject);
} }
if (isSetVisualMap) {
// if run's display reopen the animation this.updateVisualMap(sampleObject);
if (resetAnimate) {
sampleObject.charData.charOption.animation = true;
} }
}, },
...@@ -1206,6 +1316,14 @@ export default { ...@@ -1206,6 +1316,14 @@ export default {
this.isActive === 2 ? 0 : 90; this.isActive === 2 ? 0 : 90;
sampleObject.updateFlag = true; sampleObject.updateFlag = true;
sampleObject.charObj.clear(); sampleObject.charObj.clear();
if (sampleObject.charData.charOption.series[0].data.length === 1) {
sampleObject.charData.charOption.series[0].showSymbol = true;
sampleObject.onePoint = true;
} else {
sampleObject.charData.charOption.series[0].showSymbol = false;
sampleObject.onePoint = false;
}
this.updateOrCreateChar(sampleObject.sampleIndex); this.updateOrCreateChar(sampleObject.sampleIndex);
} }
}); });
...@@ -1633,80 +1751,75 @@ export default { ...@@ -1633,80 +1751,75 @@ export default {
*/ */
yAxisScale(sampleIndex) { yAxisScale(sampleIndex) {
if (this.isTimeReload) {
this.autoUpdateSamples();
}
if (this.yAxisScaleTimer) {
clearTimeout(this.yAxisScaleTimer);
this.yAxisScaleTimer = null;
}
const sampleObject = this.originDataArr[sampleIndex]; const sampleObject = this.originDataArr[sampleIndex];
if (!sampleObject) { if (!sampleObject) {
return; return;
} }
const log = !sampleObject.log; this.yAxisScaleTimer = setTimeout(() => {
if (log) { const log = !sampleObject.log;
sampleObject.charData.charOption.toolbox.feature.myTool2.iconStyle.borderColor =
'#3E98C5';
sampleObject.charData.charOption.yAxis.type = 'log';
} else {
sampleObject.charData.charOption.yAxis.type = 'value';
sampleObject.charData.charOption.toolbox.feature.myTool2.iconStyle.borderColor =
'#666';
}
sampleObject.charData.oriData.forEach((originData, index) => {
if (log) { if (log) {
sampleObject.charData.charOption.series[ sampleObject.charData.charOption.toolbox.feature.myTool2.iconStyle.borderColor =
index * 2 '#3E98C5';
].data = this.formateSmoothData( sampleObject.charData.charOption.yAxis.type = 'log';
sampleObject.charData.oriData[index].logData[this.curBenchX],
);
sampleObject.charData.charOption.series[index * 2 + 1].data =
sampleObject.charData.oriData[index].logData[this.curBenchX];
} else { } else {
sampleObject.charData.charOption.series[ sampleObject.charData.charOption.yAxis.type = 'value';
index * 2 sampleObject.charData.charOption.toolbox.feature.myTool2.iconStyle.borderColor =
].data = this.formateSmoothData( '#666';
sampleObject.charData.oriData[index].valueData[this.curBenchX],
);
sampleObject.charData.charOption.series[index * 2 + 1].data =
sampleObject.charData.oriData[index].valueData[this.curBenchX];
} }
}); sampleObject.charData.oriData.forEach((originData, index) => {
sampleObject.log = log; if (log) {
sampleObject.updateFlag = true; sampleObject.charData.charOption.series[
sampleObject.charObj.clear(); index * 2
].data = this.formateSmoothData(
sampleObject.charData.oriData[index].logData[this.curBenchX],
);
sampleObject.charData.charOption.series[index * 2 + 1].data =
sampleObject.charData.oriData[index].logData[this.curBenchX];
} else {
sampleObject.charData.charOption.series[
index * 2
].data = this.formateSmoothData(
sampleObject.charData.oriData[index].valueData[this.curBenchX],
);
sampleObject.charData.charOption.series[index * 2 + 1].data =
sampleObject.charData.oriData[index].valueData[this.curBenchX];
}
});
sampleObject.log = log;
sampleObject.updateFlag = true;
sampleObject.charObj.clear();
const tempOption = sampleObject.charData.charOption; const tempOption = sampleObject.charData.charOption;
if ( const dataObj = tempOption.series[0];
tempOption.visualMap &&
tempOption.visualMap['pieces'] &&
tempOption.visualMap['pieces'].length > 0
) {
tempOption.visualMap = null;
tempOption.series[0].markLine = null;
sampleObject.charObj.setOption(tempOption, true);
this.getCache(); // one point
if (dataObj.data.length === 1) {
tempOption.series[0].showSymbol = true;
sampleObject.onePoint = true;
} else {
tempOption.series[0].showSymbol = false;
sampleObject.onePoint = false;
}
if ( if (
this.thresholdLocal && tempOption.visualMap &&
this.thresholdLocal[this.decodeTrainingJobId] && tempOption.visualMap['pieces'] &&
this.thresholdLocal[this.decodeTrainingJobId][sampleObject.tagName] tempOption.visualMap['pieces'].length > 0
) { ) {
const tempStorgeArr = JSON.parse( tempOption.visualMap = null;
JSON.stringify( tempOption.series[0].markLine = null;
this.thresholdLocal[this.decodeTrainingJobId][ sampleObject.charObj.setOption(tempOption, true);
sampleObject.tagName this.updateVisualMap(sampleObject);
],
),
);
tempStorgeArr.forEach((item) => {
item.color = this.thresholdColor;
});
if (sampleObject.charObj) {
this.setVisualMap(sampleObject, tempStorgeArr);
}
} else { } else {
sampleObject.pieceStr = ''; this.updateOrCreateChar(sampleIndex);
sampleObject.charData.charOption.series[0].markLine = false;
} }
} else { }, 500);
this.updateOrCreateChar(sampleIndex);
}
}, },
/** /**
...@@ -1814,13 +1927,12 @@ export default { ...@@ -1814,13 +1927,12 @@ export default {
) { ) {
tempCharOption.visualMap = null; tempCharOption.visualMap = null;
tempCharOption.series[0].markLine = null; tempCharOption.series[0].markLine = null;
tempCharOption.series[0].lineStyle.color = sampleItem.colors; tempCharOption.series[0].lineStyle['color'] = sampleItem.colors;
} }
sampleItem.charObj.setOption(tempCharOption, true); sampleItem.charObj.setOption(tempCharOption, false);
if (this.isTimeReload) { if (this.isTimeReload) {
this.autoUpdateSamples(); this.autoUpdateSamples();
} }
this.$forceUpdate();
}) })
.catch(() => { .catch(() => {
if (this.isTimeReload) { if (this.isTimeReload) {
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或