Skip to content

M
mindinsight

MindSpore / mindinsight

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

!52 UI support histogram visualization(3rd commit) 

Merge pull request !52 from 潘慧/master_ph
上级 284f2d80 2a24ffd6
隐藏空白更改
内联 并排
Showing with 334 addition and 263 deletion
mindinsight/ui/src/locales/zh-cn.json
浏览文件 @ 4598422c
...@@ -46,8 +46,9 @@ ...@@ -46,8 +46,9 @@
"modelSize": "模型大小", "modelSize": "模型大小",
"dataProcess": "数据处理", "dataProcess": "数据处理",
"noDataFound":"暂无满足筛选条件的数据", "noDataFound":"暂无满足筛选条件的数据",
"noDataTips":"请点击“显示全量数据”按钮查看全量数据" "noDataTips":"请点击“显示全量数据”按钮查看全量数据",
"userDefined": "自定义数据",
"metric": "度量指标"
}, },
"dataTraceback": { "dataTraceback": {
"details": "详情", "details": "详情",
...@@ -102,21 +103,21 @@ ...@@ -102,21 +103,21 @@
}, },
"histogram": { "histogram": {
"titleText": "参数分布图", "titleText": "参数分布图",
"xAxisTitle": "水平轴", "xAxisTitle": "纵轴",
"viewType": "直方图模式", "viewType": "视角",
"centerValue": "中心值", "centerValue": "中心值",
"step": "步骤", "step": "步骤",
"relativeTime": "相对时间", "relativeTime": "相对时间",
"absoluteTime": "绝对时间", "absoluteTime": "绝对时间",
"overlay": "覆盖", "overlay": "正视",
"offset": "偏移", "offset": "俯视",
"fullScreen": "切换全屏" "fullScreen": "切换全屏"
}, },
"dataMap": { "dataMap": {
"titleText": "数据图可视" "titleText": "数据图"
}, },
"graph": { "graph": {
"titleText": "计算图可视", "titleText": "计算图",
"downloadPic": "下载", "downloadPic": "下载",
"nodeInfo": "节点信息", "nodeInfo": "节点信息",
"legend": "图例", "legend": "图例",
......
mindinsight/ui/src/views/train-manage/histogram.vue
浏览文件 @ 4598422c
...@@ -34,26 +34,28 @@ limitations under the License. ...@@ -34,26 +34,28 @@ limitations under the License.
</div> </div>
<!-- Area for selecting a view type --> <!-- Area for selecting a view type -->
<div class="cl-histogram-view-type-select-content"> <div class="cl-histogram-view-type-select-content">
<div class="view-title">{{$t('histogram.xAxisTitle')}}</div> <div class="view-title">{{$t('histogram.viewType')}}</div>
<el-radio-group v-model="curViewName"
fill="#00A5A7"
text-color="#FFFFFF"
size="small"
@change="viewTypeChange">
<el-radio-button :label=0>{{$t('histogram.overlay')}}</el-radio-button>
<el-radio-button :label=1>{{$t('histogram.offset')}}</el-radio-button>
</el-radio-group>
<div class="view-title"
v-if="!!curViewName">{{$t('histogram.xAxisTitle')}}</div>
<el-radio-group v-model="curAxisName" <el-radio-group v-model="curAxisName"
fill="#00A5A7" fill="#00A5A7"
text-color="#FFFFFF" text-color="#FFFFFF"
size="small" size="small"
v-if="!!curViewName"
:disabled="curViewName === 0" :disabled="curViewName === 0"
@change="timeTypeChange"> @change="timeTypeChange">
<el-radio-button :label=0>{{$t('histogram.step')}}</el-radio-button> <el-radio-button :label=0>{{$t('histogram.step')}}</el-radio-button>
<el-radio-button :label=1>{{$t('histogram.relativeTime')}}</el-radio-button> <el-radio-button :label=1>{{$t('histogram.relativeTime')}}</el-radio-button>
<el-radio-button :label=2>{{$t('histogram.absoluteTime')}}</el-radio-button> <el-radio-button :label=2>{{$t('histogram.absoluteTime')}}</el-radio-button>
</el-radio-group> </el-radio-group>
<div class="view-title">{{$t('histogram.viewType')}}</div>
<el-radio-group v-model="curViewName"
fill="#00A5A7"
text-color="#FFFFFF"
size="small"
@change="viewTypeChange">
<el-radio-button :label=0>{{$t('histogram.overlay')}}</el-radio-button>
<el-radio-button :label=1>{{$t('histogram.offset')}}</el-radio-button>
</el-radio-group>
</div> </div>
<!-- Content display area --> <!-- Content display area -->
<div class="cl-histogram-show-data-content"> <div class="cl-histogram-show-data-content">
...@@ -207,6 +209,13 @@ export default { ...@@ -207,6 +209,13 @@ export default {
clearInterval(this.autoUpdateTimer); clearInterval(this.autoUpdateTimer);
this.autoUpdateTimer = null; this.autoUpdateTimer = null;
} }
if (this.curPageArr.length) {
this.curPageArr.forEach((item) => {
if (item.zr) {
item.zr.off('mouseout', 'mousemove');
}
});
}
// Stop refreshing // Stop refreshing
if (this.isReloading) { if (this.isReloading) {
this.$store.commit('setIsReload', false); this.$store.commit('setIsReload', false);
...@@ -289,6 +298,7 @@ export default { ...@@ -289,6 +298,7 @@ export default {
dataList.push({ dataList.push({
tagName: tagName, tagName: tagName,
sampleIndex: sampleIndex, sampleIndex: sampleIndex,
zr: null,
show: false, show: false,
fullScreen: false, fullScreen: false,
domId: `${tagName}`, domId: `${tagName}`,
...@@ -368,7 +378,6 @@ export default { ...@@ -368,7 +378,6 @@ export default {
}, },
updateCurPageSamples(sampleIndex) { updateCurPageSamples(sampleIndex) {
const item = this.originDataArr[sampleIndex]; const item = this.originDataArr[sampleIndex];
const promiseArr = [];
if (!item || !item.tagName) { if (!item || !item.tagName) {
return; return;
} }
...@@ -376,18 +385,11 @@ export default { ...@@ -376,18 +385,11 @@ export default {
train_id: this.trainingJobId, train_id: this.trainingJobId,
tag: item.tagName, tag: item.tagName,
}; };
promiseArr.push(this.addPromise(params)); RequestService.getHistogramData(params).then((res) => {
Promise.all( if (!res || !res.data) {
promiseArr.map(function(promiseItem) {
return promiseItem.catch(function(err) {
return err;
});
}),
).then((res) => {
if (!res || !res.length || !res[0].data) {
return; return;
} }
const data = res[0].data; const data = JSON.parse(JSON.stringify(res.data));
this.originDataArr[sampleIndex].charData.oriData = this.formOriData( this.originDataArr[sampleIndex].charData.oriData = this.formOriData(
data, data,
); );
...@@ -395,22 +397,6 @@ export default { ...@@ -395,22 +397,6 @@ export default {
this.updateSampleData(sampleIndex, charOption); this.updateSampleData(sampleIndex, charOption);
}); });
}, },
addPromise(params) {
return new Promise((resolve, reject) => {
RequestService.getHistogramData(params)
.then((res) => {
if (res) {
res.params = params;
resolve(res);
}
})
.catch((error) => {
if (error) {
reject(error);
}
});
});
},
/** /**
* The time display type is changed * The time display type is changed
* @param {Number} val Current mode * @param {Number} val Current mode
...@@ -604,9 +590,10 @@ export default { ...@@ -604,9 +590,10 @@ export default {
const sampleIndex = this.originDataArr.length; const sampleIndex = this.originDataArr.length;
this.originDataArr.push({ this.originDataArr.push({
tagName: tagName, tagName: tagName,
sampleIndex: sampleIndex,
zr: null,
show: false, show: false,
fullScreen: false, fullScreen: false,
sampleIndex: sampleIndex,
domId: `${tagName}`, domId: `${tagName}`,
charData: { charData: {
oriData: [], oriData: [],
...@@ -644,7 +631,10 @@ export default { ...@@ -644,7 +631,10 @@ export default {
setTimeout(() => { setTimeout(() => {
sampleObject.charObj.setOption(sampleObject.charData.charOption, true); sampleObject.charObj.setOption(sampleObject.charData.charOption, true);
}, 10); }, 10);
const zr = sampleObject.charObj.getZr(); 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 p = Math.max(0, d3.precisionRound(0.01, 1.01) - 1);
const yValueFormat = d3.format('.' + p + 'e'); const yValueFormat = d3.format('.' + p + 'e');
const chartData = sampleObject.charData.oriData.chartData; const chartData = sampleObject.charData.oriData.chartData;
...@@ -751,216 +741,202 @@ export default { ...@@ -751,216 +741,202 @@ export default {
yIndex, yIndex,
}; };
} }
zr.on('mouseout', (e) => { if (sampleObject.zr) {
if (!rawData || !rawData.length) { sampleObject.zr.on('mouseout', (e) => {
return; if (!rawData || !rawData.length) {
} return;
this.chartTipFlag = false; }
this.removeTooltip(sampleIndex); this.chartTipFlag = false;
}); this.removeTooltip(sampleIndex);
zr.on('mousemove', (e) => { });
if (!rawData || !rawData.length) { sampleObject.zr.on('mousemove', (e) => {
return; if (!rawData || !rawData.length) {
} return;
this.removeTooltip(sampleIndex); }
curViewName = this.curViewName; this.removeTooltip(sampleIndex);
const unit = 's'; curViewName = this.curViewName;
const nearestIndex = findNearestValue([e.offsetX, e.offsetY]); const unit = 's';
if ( const nearestIndex = findNearestValue([e.offsetX, e.offsetY]);
nearestIndex && if (
nearestIndex.yIndex !== null && nearestIndex &&
nearestIndex.binIndex !== null nearestIndex.yIndex !== null &&
) { nearestIndex.binIndex !== null
const {binIndex, yIndex} = nearestIndex;
const gridRect = sampleObject.charObj
.getModel()
.getComponent('grid', 0)
.coordinateSystem.getRect();
const gridRectY = gridRect.y - 10;
let linePoints = [];
if (curViewName === 1 && yIndex !== null) {
linePoints = this.makePolyPoints(
yIndex,
getCoord,
gridRectY,
charOption,
);
} else if (
curViewName === 0 &&
chartData[yIndex] &&
chartData[yIndex].items
) { ) {
chartData[yIndex].items.forEach((item) => { const {binIndex, yIndex} = nearestIndex;
linePoints.push( const gridRect = sampleObject.charObj
sampleObject.charObj.convertToPixel('grid', [item[2], item[3]]), .getModel()
.getComponent('grid', 0)
.coordinateSystem.getRect();
const gridRectY = gridRect.y - 10;
let linePoints = [];
if (curViewName === 1 && yIndex !== null) {
linePoints = this.makePolyPoints(
yIndex,
getCoord,
gridRectY,
charOption,
); );
} else if (
curViewName === 0 &&
chartData[yIndex] &&
chartData[yIndex].items
) {
chartData[yIndex].items.forEach((item) => {
linePoints.push(
sampleObject.charObj.convertToPixel('grid', [
item[2],
item[3],
]),
);
});
}
this.zrDrawElement.hoverLine = new echarts.graphic.Polyline({
silent: true,
shape: {
points: linePoints.slice(1, -1),
},
z: 999,
}); });
} sampleObject.zr.add(this.zrDrawElement.hoverLine);
this.zrDrawElement.hoverLine = new echarts.graphic.Polyline({ this.zrDrawElement.tooltip = new echarts.graphic.Text({});
silent: true, let itemX;
shape: { const x = chartData[yIndex].items[binIndex][2];
points: linePoints.slice(1, -1), let z = 0;
}, chartData.forEach((dataItem, index) => {
z: 999, const y = dataItem.step;
}); const pt = getCoord([x, y]);
zr.add(this.zrDrawElement.hoverLine); if (index === yIndex) {
this.zrDrawElement.tooltip = new echarts.graphic.Text({}); z = chartData[yIndex].items[binIndex][3];
let itemX; } else {
const x = chartData[yIndex].items[binIndex][2]; const items = dataItem.items;
let z = 0; for (let k = 1; k < items.length - 1; k++) {
chartData.forEach((dataItem, index) => { const nextX = items[k + 1][2];
const y = dataItem.step; const nextZ = items[k + 1][3];
const pt = getCoord([x, y]); if (items[k][2] === x) {
if (index === yIndex) { z = items[k][3];
z = chartData[yIndex].items[binIndex][3]; break;
} else { } else if (items[k][2] < x && nextX > x) {
const items = dataItem.items; const proportionX =
for (let k = 1; k < items.length - 1; k++) { (x - items[k][2]) / (nextX - items[k][2]);
const nextX = items[k + 1][2]; z = (nextZ - items[k][3]) * proportionX + items[k][3];
const nextZ = items[k + 1][3]; break;
if (items[k][2] === x) { }
z = items[k][3];
break;
} else if (items[k][2] < x && nextX > x) {
const proportionX = (x - items[k][2]) / (nextX - items[k][2]);
z = (nextZ - items[k][3]) * proportionX + items[k][3];
break;
} }
} }
} itemX = pt[0];
itemX = pt[0]; const circleOption = {
const circleOption = { z: 1000,
z: 1000,
};
if (curViewName === 1) {
pt[1] -=
((z - charOption.minZ) / (charOption.maxZ - charOption.minZ)) *
gridRectY;
circleOption.shape = {
cx: itemX,
cy: pt[1],
r: 2,
}; };
} else { if (curViewName === 1) {
circleOption.shape = { pt[1] -=
cx: 0, ((z - charOption.minZ) /
cy: 0, (charOption.maxZ - charOption.minZ)) *
r: 2, gridRectY;
}; circleOption.shape = {
circleOption.position = sampleObject.charObj.convertToPixel( cx: itemX,
'grid', cy: pt[1],
[x, z], r: 2,
); };
} } else {
const dot = new echarts.graphic.Circle(circleOption); circleOption.shape = {
zr.add(dot); cx: 0,
this.zrDrawElement.hoverDots.push(dot); cy: 0,
}); r: 2,
};
circleOption.position = sampleObject.charObj.convertToPixel(
'grid',
[x, z],
);
}
const dot = new echarts.graphic.Circle(circleOption);
sampleObject.zr.add(dot);
this.zrDrawElement.hoverDots.push(dot);
});
const hoveredItem = chartData[yIndex]; const hoveredItem = chartData[yIndex];
this.zrDrawElement.tooltip = new echarts.graphic.Text({}); this.zrDrawElement.tooltip = new echarts.graphic.Text({});
if (!this.chartTipFlag) { if (!this.chartTipFlag) {
this.chartTipFlag = true; this.chartTipFlag = true;
}
if (!hoveredItem || !hoveredItem.items[binIndex]) {
return;
}
let htmlStr = '';
const hoveredAxis = hoveredItem.items[binIndex][3];
htmlStr = `<td>${
hoveredAxis.toString().length >= 6
? yValueFormat(hoveredAxis)
: hoveredAxis
}</td><td style="text-align:center;">${hoveredItem.step}</td><td>${(
hoveredItem.relative_time / 1000
).toFixed(3)}${unit}</td><td>${this.dealrelativeTime(
new Date(hoveredItem.wall_time).toString(),
)}</td>`;
const dom = document.querySelector('#tipTr');
dom.innerHTML = htmlStr;
if (!sampleObject.fullScreen) {
const chartWidth = document.querySelectorAll('.sample-content')[
sampleIndex
].clientWidth;
const chartHeight = document.querySelectorAll('.sample-content')[
sampleIndex
].clientHeight;
const left = document.querySelectorAll('.sample-content')[
sampleIndex
].offsetLeft;
const top = document.querySelectorAll('.sample-content')[
sampleIndex
].offsetTop;
const echartTip = document.querySelector('#echartTip');
echartTip.style.top = `${top + chartHeight - 60}px`;
if (left > echartTip.clientWidth) {
echartTip.style.left = `${left - echartTip.clientWidth}px`;
} else {
echartTip.style.left = `${left + chartWidth}px`;
} }
} else { if (!hoveredItem || !hoveredItem.items[binIndex]) {
const width = document.querySelector('#echartTip').clientWidth; return;
const height = document.querySelector('#echartTip').clientHeight;
const screenWidth = document.body.scrollWidth;
const screenHeight = document.body.scrollHeight;
const scrollTop = document.querySelector(
'.cl-histogram-show-data-content',
).scrollTop;
const offsetTop = document.querySelector(
'.cl-histogram-show-data-content',
).offsetTop;
if (
height + e.event.y + 20 > screenHeight &&
screenHeight > height
) {
document.querySelector('#echartTip').style.top = `${e.event.y +
scrollTop -
height -
20 -
offsetTop}px`;
} else {
document.querySelector('#echartTip').style.top = `${e.event.y +
scrollTop +
20 -
offsetTop}px`;
} }
if (width + e.event.x + 50 > screenWidth && screenWidth > width) { let htmlStr = '';
document.querySelector('#echartTip').style.left = `${e.event.x - const hoveredAxis = hoveredItem.items[binIndex][3];
width - htmlStr = `<td>${
20}px`; hoveredAxis.toString().length >= 6
? yValueFormat(hoveredAxis)
: hoveredAxis
}</td><td style="text-align:center;">${hoveredItem.step}</td><td>${(
hoveredItem.relative_time / 1000
).toFixed(3)}${unit}</td><td>${this.dealrelativeTime(
new Date(hoveredItem.wall_time).toString(),
)}</td>`;
const dom = document.querySelector('#tipTr');
dom.innerHTML = htmlStr;
if (!sampleObject.fullScreen) {
const chartWidth = document.querySelectorAll('.sample-content')[
sampleIndex
].clientWidth;
const chartHeight = document.querySelectorAll('.sample-content')[
sampleIndex
].clientHeight;
const left = document.querySelectorAll('.sample-content')[
sampleIndex
].offsetLeft;
const top = document.querySelectorAll('.sample-content')[
sampleIndex
].offsetTop;
const echartTip = document.querySelector('#echartTip');
echartTip.style.top = `${top + chartHeight - 60}px`;
if (left > echartTip.clientWidth) {
echartTip.style.left = `${left - echartTip.clientWidth}px`;
} else {
echartTip.style.left = `${left + chartWidth}px`;
}
} else { } else {
document.querySelector('#echartTip').style.left = `${e.event.x + const width = document.querySelector('#echartTip').clientWidth;
20}px`; const height = document.querySelector('#echartTip').clientHeight;
const screenWidth = document.body.scrollWidth;
const screenHeight = document.body.scrollHeight;
const scrollTop = document.querySelector(
'.cl-histogram-show-data-content',
).scrollTop;
const offsetTop = document.querySelector(
'.cl-histogram-show-data-content',
).offsetTop;
if (
height + e.event.y + 20 > screenHeight &&
screenHeight > height
) {
document.querySelector('#echartTip').style.top = `${e.event.y +
scrollTop -
height -
20 -
offsetTop}px`;
} else {
document.querySelector('#echartTip').style.top = `${e.event.y +
scrollTop +
20 -
offsetTop}px`;
}
if (width + e.event.x + 50 > screenWidth && screenWidth > width) {
document.querySelector('#echartTip').style.left = `${e.event.x -
width -
20}px`;
} else {
document.querySelector('#echartTip').style.left = `${e.event.x +
20}px`;
}
} }
}
this.zrDrawElement.tooltipX = new echarts.graphic.Text({ this.zrDrawElement.tooltipX = new echarts.graphic.Text({
position: [itemX, gridRect.y + gridRect.height], position: [itemX, gridRect.y + gridRect.height],
style: {
fontFamily: 'Merriweather Sans',
text: Math.round(x * 1000) / 1000,
textFill: '#fff',
textAlign: 'center',
fontSize: 12,
textBackgroundColor: '#333',
textBorderWidth: 2,
textPadding: [5, 7],
rich: {},
},
z: 2000,
});
zr.add(this.zrDrawElement.tooltipX);
if (curViewName === 1 && linePoints && linePoints.length) {
this.zrDrawElement.tooltipY = new echarts.graphic.Text({
position: [
gridRect.x + gridRect.width,
linePoints[linePoints.length - 1][1],
],
style: { style: {
fontFamily: 'Merriweather Sans', fontFamily: 'Merriweather Sans',
text: hoveredItem.step, text: Math.round(x * 1000) / 1000,
textFill: '#fff', textFill: '#fff',
textVerticalAlign: 'middle', textAlign: 'center',
fontSize: 12, fontSize: 12,
textBackgroundColor: '#333', textBackgroundColor: '#333',
textBorderWidth: 2, textBorderWidth: 2,
...@@ -969,10 +945,31 @@ export default { ...@@ -969,10 +945,31 @@ export default {
}, },
z: 2000, z: 2000,
}); });
zr.add(this.zrDrawElement.tooltipY); sampleObject.zr.add(this.zrDrawElement.tooltipX);
if (curViewName === 1 && linePoints && linePoints.length) {
this.zrDrawElement.tooltipY = new echarts.graphic.Text({
position: [
gridRect.x + gridRect.width,
linePoints[linePoints.length - 1][1],
],
style: {
fontFamily: 'Merriweather Sans',
text: hoveredItem.step,
textFill: '#fff',
textVerticalAlign: 'middle',
fontSize: 12,
textBackgroundColor: '#333',
textBorderWidth: 2,
textPadding: [5, 7],
rich: {},
},
z: 2000,
});
sampleObject.zr.add(this.zrDrawElement.tooltipY);
}
} }
} });
}); }
}, },
dealrelativeTime(time) { dealrelativeTime(time) {
const arr = time.split(' '); const arr = time.split(' ');
...@@ -985,26 +982,27 @@ export default { ...@@ -985,26 +982,27 @@ export default {
*/ */
removeTooltip(sampleIndex) { removeTooltip(sampleIndex) {
const sampleObject = this.originDataArr[sampleIndex]; const sampleObject = this.originDataArr[sampleIndex];
if (sampleObject.charObj) { if (sampleObject.zr) {
const zr = sampleObject.charObj.getZr();
if (this.zrDrawElement.hoverLine) { if (this.zrDrawElement.hoverLine) {
zr.remove(this.zrDrawElement.hoverLine); sampleObject.zr.remove(this.zrDrawElement.hoverLine);
} }
if (this.zrDrawElement.tooltip) { if (this.zrDrawElement.tooltip) {
zr.remove(this.zrDrawElement.tooltip); sampleObject.zr.remove(this.zrDrawElement.tooltip);
} }
if (this.zrDrawElement.tooltipY) { if (this.zrDrawElement.tooltipY) {
zr.remove(this.zrDrawElement.tooltipY); sampleObject.zr.remove(this.zrDrawElement.tooltipY);
} }
if ( if (
this.zrDrawElement.hoverDots && this.zrDrawElement.hoverDots &&
this.zrDrawElement.hoverDots.length this.zrDrawElement.hoverDots.length
) { ) {
this.zrDrawElement.hoverDots.forEach((dot) => zr.remove(dot)); this.zrDrawElement.hoverDots.forEach((dot) =>
sampleObject.zr.remove(dot),
);
this.zrDrawElement.hoverDots.length = 0; this.zrDrawElement.hoverDots.length = 0;
} }
if (this.zrDrawElement.tooltipX) { if (this.zrDrawElement.tooltipX) {
zr.remove(this.zrDrawElement.tooltipX); sampleObject.zr.remove(this.zrDrawElement.tooltipX);
} }
} }
}, },
...@@ -1115,6 +1113,8 @@ export default { ...@@ -1115,6 +1113,8 @@ export default {
}; };
}, },
formatCharOption(sampleIndex, charOption) { formatCharOption(sampleIndex, charOption) {
const colorMin = '#346E69';
const colorMax = '#EBFFFD';
const sampleObject = this.originDataArr[sampleIndex]; const sampleObject = this.originDataArr[sampleIndex];
const fullScreenFun = this.toggleFullScreen; const fullScreenFun = this.toggleFullScreen;
const curAxisName = this.curAxisName; const curAxisName = this.curAxisName;
...@@ -1125,9 +1125,9 @@ export default { ...@@ -1125,9 +1125,9 @@ export default {
textStyle: { textStyle: {
fontSize: '16', fontSize: '16',
fontWeight: '600', fontWeight: '600',
bottom: 6,
left: 'center',
}, },
bottom: 6,
left: 'center',
}, },
grid: { grid: {
left: 15, left: 15,
...@@ -1135,7 +1135,6 @@ export default { ...@@ -1135,7 +1135,6 @@ export default {
right: 40, right: 40,
bottom: 60, bottom: 60,
}, },
color: ['#346E69'],
xAxis: { xAxis: {
max: charOption.maxX, max: charOption.maxX,
min: charOption.minX, min: charOption.minX,
...@@ -1244,10 +1243,15 @@ export default { ...@@ -1244,10 +1243,15 @@ export default {
dimension: 1, dimension: 1,
range: [charOption.minStep, charOption.maxStep], range: [charOption.minStep, charOption.maxStep],
inRange: { inRange: {
colorLightness: [0.3, 0.9], color: [colorMin, colorMax],
}, },
}; };
} else if (this.curViewName === 0) { } else if (this.curViewName === 0) {
option.color = this.getGrientColor(
colorMin,
colorMax,
charOption.seriesData.length,
);
option.series = []; option.series = [];
charOption.seriesData.forEach((k) => { charOption.seriesData.forEach((k) => {
option.series.push({ option.series.push({
...@@ -1262,6 +1266,66 @@ export default { ...@@ -1262,6 +1266,66 @@ export default {
} }
return option; 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;
},
toggleFullScreen(sampleIndex) { toggleFullScreen(sampleIndex) {
const sampleObject = this.originDataArr[sampleIndex]; const sampleObject = this.originDataArr[sampleIndex];
if (!sampleObject) { if (!sampleObject) {
...@@ -1370,7 +1434,9 @@ export default { ...@@ -1370,7 +1434,9 @@ export default {
padding: 24px 32px; padding: 24px 32px;
text-align: right; text-align: right;
} }
// No data available.
.image-noData { .image-noData {
// Set the width and white on the right.
width: 100%; width: 100%;
height: 450px; height: 450px;
display: flex; display: flex;
......
mindinsight/ui/src/views/train-manage/training-dashboard.vue
浏览文件 @ 4598422c
...@@ -51,15 +51,15 @@ limitations under the License. ...@@ -51,15 +51,15 @@ limitations under the License.
</div> </div>
</div> </div>
<div class="cl-dashboard-con-up" <div class="cl-dashboard-con-up"
:class="!!histogramTag ? '' : 'no-data-hover'" :class="!!histogramTag && !wrongPlugin ? '' : 'no-data-hover'"
@click="viewMoreHistogram"> @click="viewMoreHistogram">
<div class="cl-dashboard-title">{{$t("histogram.titleText")}}</div> <div class="cl-dashboard-title">{{$t("histogram.titleText")}}</div>
<div class="cl-module"> <div class="cl-module">
<div id="distribution-chart" <div id="distribution-chart"
v-show="!!histogramTag"></div> v-show="!!histogramTag && !wrongPlugin"></div>
<div class="no-data-img" <div class="no-data-img"
key="no-chart-data" key="no-chart-data"
v-show="!histogramTag"> v-show="!histogramTag || wrongPlugin">
<img :src="require('@/assets/images/nodata.png')" <img :src="require('@/assets/images/nodata.png')"
alt="" /> alt="" />
<p class='no-data-text'> <p class='no-data-text'>
...@@ -769,15 +769,18 @@ export default { ...@@ -769,15 +769,18 @@ export default {
if (!tagList) { if (!tagList) {
return; return;
} }
let histogramTag = '';
if (!this.histogramTag || tagList.indexOf(this.histogramTag) === -1) { if (!this.histogramTag || tagList.indexOf(this.histogramTag) === -1) {
this.histogramTag = tagList[0] || ''; histogramTag = tagList[0] || '';
} else {
histogramTag = this.histogramTag;
} }
if (!this.histogramTag) { if (!histogramTag) {
return; return;
} }
const params = { const params = {
train_id: this.trainingJobId, train_id: this.trainingJobId,
tag: this.histogramTag, tag: histogramTag,
}; };
// tag // tag
RequestService.getHistogramData(params).then((res) => { RequestService.getHistogramData(params).then((res) => {
...@@ -790,6 +793,7 @@ export default { ...@@ -790,6 +793,7 @@ export default {
return; return;
} }
const data = res.data; const data = res.data;
this.histogramTag = histogramTag;
this.histogramData = this.formOriData(data); this.histogramData = this.formOriData(data);
const charOption = this.formatDataToChar(); const charOption = this.formatDataToChar();
this.updateHistogramSampleData(charOption); this.updateHistogramSampleData(charOption);
...@@ -873,7 +877,7 @@ export default { ...@@ -873,7 +877,7 @@ export default {
textStyle: {fontFamily: 'Merriweather Sans'}, textStyle: {fontFamily: 'Merriweather Sans'},
title: { title: {
text: charOption.title || '', text: charOption.title || '',
textStyle: {fontSize: '16', fontWeight: '600'}, textStyle: {fontSize: '12', fontWeight: '400'},
bottom: 6, bottom: 6,
left: 'center', left: 'center',
}, },
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或