Skip to content

V
VisualDL

PaddlePaddle / VisualDL
大约 1 年 前同步成功

通知 88
Star 4655
Fork 642
V
VisualDL

体验新版 GitCode，发现更多精彩内容 >>

未验证 提交 e2b7bfde 编写于 作者: N Nicky Chan 提交者： GitHub
浏览文件
操作

Polish scalar and histogram chart UI, reorganize chart tools, add pinch zoom in support (#303)

上级 71236d3d
隐藏空白更改
内联 并排
Showing with 48 addition and 42 deletion
frontend/src/App.vue
浏览文件 @ e2b7bfde
......@@ -56,7 +56,7 @@ export default {
border solid 1px $-left-border-color
background $-left-border-color
min-height 300px
padding 2%
padding 2% 0% 2% 2%
box-sizing border-box
.right
overflow scroll
......
frontend/src/common/component/ExpandPanel.vue
浏览文件 @ e2b7bfde
......@@ -43,6 +43,7 @@ export default {
line-height 50px
height 50px
padding 0 20px
margin-right 2%
cursor pointer
position relative
.visual-dl-expand-head-info
......@@ -54,8 +55,6 @@ export default {
line-height 20px
font-size 12px
font-weight normal
.visual-dl-expand-panel-content
padding 0 20px
.visual-dl-expand-panel-content:after
content: "";
clear: both;
......
frontend/src/histogram/Histogram.vue
浏览文件 @ e2b7bfde
......@@ -18,7 +18,6 @@
</div>
<div class="visual-dl-page-right">
<div class="visual-dl-page-config-container">
Config
<ui-config
:runsItems="runsItems"
:config="config"
......
frontend/src/histogram/ui/Chart.vue
浏览文件 @ e2b7bfde
......@@ -2,8 +2,8 @@
<div class="visual-dl-histogram-charts">
<div class="visual-dl-chart-box" ref="visual_dl_chart_box">
</div>
<div class="visual-dl-chart-actions">
<v-btn flat class="sm-button" @click="expandArea">
<div>
<v-btn flat @click="expandArea">
<v-icon size="20">settings_overscan</v-icon>
</v-btn>
</div>
......@@ -94,7 +94,7 @@ export default {
text: tag,
textStyle: {
fontSize: '12',
fontFamily: 'Merriweather Sans'
fontWeight: 'normal'
}
};
if (chartType === 'overlay') {
......@@ -183,7 +183,7 @@ export default {
let minStep = Infinity;
grid.top = '42%';
grid.left = '4%';
grid.right = '15%';
grid.right = '10%';
chartData.forEach(function (dataItem) {
let lineData = [];
maxStep = Math.max(dataItem.step, maxStep);
......@@ -197,6 +197,9 @@ export default {
});
let option = {
textStyle: {
fontFamily: 'Merriweather Sans'
},
title,
color: ['#006069'],
visualMap: {
......@@ -216,6 +219,7 @@ export default {
onZero: false
},
axisLabel: {
fontSize: '11',
formatter: function (value) {
return Math.round(value * 100) / 100;
}
......@@ -232,6 +236,9 @@ export default {
inverse: true,
splitLine: {
show: false
},
axisLabel: {
fontSize: '11'
}
},
grid,
......@@ -355,6 +362,7 @@ export default {
zrDrawElement.tooltip = new echarts.graphic.Text({
position: [e.offsetX + 30, e.offsetY - 50],
style: {
fontFamily: 'Merriweather Sans',
text: yValueFormat(hoveredItem.items[nearestIndex.binIndex][3]),
textFill: '#000',
fontSize: 14,
......@@ -375,6 +383,7 @@ export default {
gridRect.y + gridRect.height
],
style: {
fontFamily: 'Merriweather Sans',
text: Math.round(hoveredItem.items[nearestIndex.binIndex][2] * 1000) / 1000,
textFill: '#fff',
textAlign: 'center',
......@@ -394,6 +403,7 @@ export default {
linePoints[linePoints.length - 1][1]
],
style: {
fontFamily: 'Merriweather Sans',
text: hoveredItem.step,
textFill: '#fff',
textVerticalAlign: 'middle',
......@@ -498,28 +508,12 @@ export default {
<style lang="stylus">
.visual-dl-histogram-charts
float left
margin-bottom 20px
margin 20px 30px 10px 0
margin 2% 2% 0 0
background #fff
padding 10px
.visual-dl-chart-box
float left
width 400px
height 300px
.visual-dl-chart-actions
height 50px
margin-left 10%
.sm-form-item
float left
width 100px
margin-top 0px
display block
.sm-button
float left
display block
height 20px
line-height 20px
margin-top 10px
padding 0 10px
</style>
frontend/src/histogram/ui/ChartPage.vue
浏览文件 @ e2b7bfde
......@@ -85,4 +85,5 @@ export default {
content: "";
clear: both;
display: block;
padding-bottom: 2%
</style>
frontend/src/scalars/Scalars.vue
浏览文件 @ e2b7bfde
......@@ -19,8 +19,9 @@
<div class="visual-dl-page-right">
<div class="visual-dl-page-config-container">
<ui-config :runsItems="runsItems"
:config="config"
<ui-config
:runsItems="runsItems"
:config="config"
></ui-config>
</div>
</div>
......
frontend/src/scalars/ui/Chart.vue
浏览文件 @ e2b7bfde
......@@ -164,9 +164,12 @@ export default {
let legendOptions = tagList.map(item => item.run);
let instance = this;
let option = {
textStyle: {
fontFamily: 'Merriweather Sans'
},
color: [
'#008c99',
'#c23531',
'#61a0a8',
'#d48265',
'#91c7ae',
'#749f83',
......@@ -179,15 +182,21 @@ export default {
title: {
text: tag,
textStyle: {
fontSize: '12',
fontFamily: 'Merriweather Sans'
fontSize: 13,
fontWeight: 'normal'
}
},
dataZoom: [{
type: 'inside'
}],
tooltip: {
trigger: 'axis',
axisPointer: {
animation: true
},
textStyle: {
fontSize: '13',
},
position: ['10%', '90%'],
formatter(params, ticket, callback) {
let data = instance.getFormatterPoints(params[0].data);
......@@ -201,26 +210,28 @@ export default {
dataZoom: {},
restore: {},
saveAsImage: {}
},
left: '10%',
top: '90%'
}
},
legend: {
data: legendOptions,
top: '10%'
top: '13%'
},
grid: {
left: '10%',
top: '20%',
left: '12%',
top: '25%',
right: '10%',
bottom: '20%'
bottom: '8%'
},
xAxis: {
type: 'value'
type: 'value',
axisLabel: {
fontSize: '11'
}
},
yAxis: {
type: 'value',
axisLabel: {
fontSize: '11',
formatter(value) {
return value.toString().slice(0, 5);
}
......@@ -522,11 +533,11 @@ export default {
};
let widthPropMap = {
Run: 40,
Time: 90,
Time: 120,
Step: 40,
Value: 50,
Smoothed: 50,
Relative: 40
Smoothed: 60,
Relative: 60
};
let transformedData = data.map(item => {
let data = item.item;
......@@ -567,7 +578,7 @@ export default {
<style lang="stylus">
.visual-dl-page-charts
float left
margin 20px 30px 10px 0
margin 2% 2% 0 0
background: #fff;
padding: 10px;
.visual-dl-chart-actions
......
frontend/src/scalars/ui/ChartPage.vue
浏览文件 @ e2b7bfde
......@@ -78,6 +78,7 @@ export default {
content: "";
clear: both;
display: block;
padding-bottom: 2%
</style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或