提交 52b00f9a 编写于 作者: B BingBlog 提交者: Qiao Longfei

frontend add graph (#63)

* fix the tooltip index error

* frontend add graph
上级 da60dbc1
/**
* get mock data
*
* @param {string} path request path
* @param {Object} queryParam query params
* @param {Object} postParam post params
* @return {Object}
*/
module.exports = function (path, queryParam, postParam) {
return {
// moock delay
_timeout: 0,
// mock http status
_status: 200,
// mock response data
_data: {
status: 0,
msg: 'SUCCESS',
data: {
title: {
text: 'Graph 简单示例'
},
tooltip: {},
animationDurationUpdate: 1500,
animationEasingUpdate: 'quinticInOut',
series : [
{
type: 'graph',
layout: 'none',
symbolSize: 50,
roam: true,
label: {
normal: {
show: true
}
},
edgeSymbol: ['circle', 'arrow'],
edgeSymbolSize: [4, 10],
edgeLabel: {
normal: {
textStyle: {
fontSize: 20
}
}
},
data: [{
name: '节点1',
x: 300,
y: 300
}, {
name: '节点2',
x: 800,
y: 300
}, {
name: '节点3',
x: 550,
y: 100
}, {
name: '节点4',
x: 550,
y: 500
}],
// links: [],
links: [{
source: 0,
target: 1,
symbolSize: [5, 20],
label: {
normal: {
show: true
}
},
lineStyle: {
normal: {
width: 5,
curveness: 0.2
}
}
}, {
source: '节点2',
target: '节点1',
label: {
normal: {
show: true
}
},
lineStyle: {
normal: { curveness: 0.2 }
}
}, {
source: '节点1',
target: '节点3'
}, {
source: '节点2',
target: '节点3'
}, {
source: '节点2',
target: '节点4'
}, {
source: '节点1',
target: '节点4'
}],
lineStyle: {
normal: {
opacity: 0.9,
width: 2,
curveness: 0
}
}
}
]
}
}
};
};
...@@ -39,6 +39,11 @@ export default { ...@@ -39,6 +39,11 @@ export default {
url: '/histograms', url: '/histograms',
title: 'HISTOGRAMS', title: 'HISTOGRAMS',
name: 'histograms' name: 'histograms'
},
{
url: '/graphs',
title: 'GRAPHS',
name: 'graphs'
} }
] ]
}; };
......
<template>
<div class="visual-dl-scalar-container">
<div class="visual-dl-scalar-left">
<div class="visual-dl-scalar-config-container">
<ui-config
runsItems="{{runsItems}}"
config="{=config=}"
on-fitScreen="handleFitScreen"
></ui-config>
</div>
</div>
<div class="visual-dl-scalar-right">
<ui-chart
filtScreen="{{filtScreen}}"
></ui-chart>
</div>
</div>
</template>
<script>
import {getPluginHistogramsTags, getRuns} from '../service';
import config from './ui/config';
import chart from './ui/chart';
export default {
components: {
'ui-config': config,
'ui-chart': chart
},
initData() {
return {
runsArray: [],
tags: [],
config: {
groupNameReg: '.*',
horizontal: 'step',
chartType: 'offset',
runs: [],
running: true
}
};
},
inited() {
getPluginHistogramsTags().then(({errno, data}) => {
this.data.set('tags', data);
// filter when inited
let groupNameReg = this.data.get('config.groupNameReg');
this.filterTagsList(groupNameReg);
});
getRuns().then(({errno, data}) => {
this.data.set('runsArray', data);
this.data.set('config.runs', data);
});
},
filterTagsList(groupNameReg) {
let tagsList = this.data.get('tagsList') || [];
let regExp = new RegExp(groupNameReg);
let filtedTagsList = tagsList.filter(item => regExp.test(item.tag));
this.data.set('filteredTagsList', filtedTagsList);
},
handleFitScreen() {
this.data.set('filtScreen', {
filtScreen: true
});
}
};
</script>
<style lang="stylus">
@import '../style/variables';
+prefix-classes('visual-dl-scalar-')
.container
padding-left 300px
position relative
.left
width 280px
min-height 300px
border solid 1px #e4e4e4
position absolute
left 0
.right
width 100%
overflow hidden
border solid 1px #e4e4e4
min-height 300px
padding 20px
</style>
import {router} from 'san-router';
import Graph from './Graph';
router.add({
target: '#content',
rule: '/graphs',
Component: Graph
});
<template>
<div class="visual-dl-charts">
<div class="visual-dl-chart-box">
</div>
</div>
</template>
<script>
// libs
import echarts from 'echarts';
// service
import {getPluginGraphsGraphs} from '../../service';
export default {
initData() {
return {
width: 800,
height: 600,
data: [
{
name: 'train',
value: []
}
]
};
},
inited() {
this.watch('originData', data => {
this.initChartChartOption(data);
});
this.watch('filtScreen', filtScreen => {
this.myChart.clear();
let data = this.data.get('originData');
this.initChartChartOption(data);
});
},
attached() {
this.initCharts();
},
initCharts(tagInfo) {
this.createChart();
this.getOriginChartsData();
},
createChart() {
let el = this.el.getElementsByClassName('visual-dl-chart-box')[0];
this.myChart = echarts.init(el);
},
initChartChartOption(data) {
this.setChartOptions(data);
},
setChartOptions(data) {
this.myChart.setOption(data);
},
getOriginChartsData() {
getPluginGraphsGraphs().then(({data}) => {
this.data.set('originData', data);
});
}
};
</script>
<style lang="stylus">
.visual-dl-charts
float left
margin-bottom 20px
.visual-dl-chart-box
width 800px
height 600px
</style>
<template>
<div class="visual-dl-graph-config-com">
<ui-button
on-click="handleFitScreen"
variants="raised info">
<ui-icon style="margin-right: 6px">fullscreen</ui-icon>
Fit to screen
</ui-button>
<!--
<ui-dropdown-menu
label="Session runs"
items="{{sessionItems}}"
value="{=config.session=}"
/>
-->
</div>
</template>
<script>
import Button from 'san-mui/Button';
import Icon from 'san-mui/Icon';
import DropDownMenu from '../../common/component/DropDownMenu';
export default {
components: {
'ui-dropdown-menu': DropDownMenu,
'ui-button': Button,
'ui-icon': Icon
},
initData() {
return {
config: {
groupName: 'aa',
isActualImageSize: [],
runs: []
},
sessionItems: [
{
name: 'step1',
value: 'step1'
},
{
name: 'step2',
value: 'step2'
},
{
name: 'step3',
value: 'step3'
}
]
};
},
handleFitScreen() {
this.fire('fitScreen');
}
};
</script>
<style lang="stylus">
@import '../../style/variables';
+prefix-classes('visual-dl-graph-')
.config-com
width 90%
margin 20px auto
.visual-dl-graph-config-com
.sm-button
width 100%
.sm-icon
width 36px
height 26px
</style>
<template> <template>
<div class="visual-dl-scalar-config-com"> <div class="visual-dl-histogram-config-com">
<san-text-field <san-text-field
hintText="input a tag group name to search" hintText="input a tag group name to search"
label="Group name RegExp" label="Group name RegExp"
...@@ -92,10 +92,10 @@ export default { ...@@ -92,10 +92,10 @@ export default {
</script> </script>
<style lang="stylus"> <style lang="stylus">
@import '../../style/variables'; @import '../../style/variables';
+prefix-classes('visual-dl-scalar-') +prefix-classes('visual-dl-histogram-')
.config-com .config-com
width 90% width 90%
margin 0 auto margin 20px auto
.run-toggle .run-toggle
width 100% width 100%
margin-top 20px margin-top 20px
......
<template> <template>
<div class="visual-dl-scalar-config-com"> <div class="visual-dl-image-config-com">
<san-text-field <san-text-field
hintText="input a tag group name to search" hintText="input a tag group name to search"
label="Group name RegExp" label="Group name RegExp"
...@@ -44,10 +44,10 @@ export default { ...@@ -44,10 +44,10 @@ export default {
</script> </script>
<style lang="stylus"> <style lang="stylus">
@import '../../style/variables'; @import '../../style/variables';
+prefix-classes('visual-dl-scalar-') +prefix-classes('visual-dl-image-')
.config-com .config-com
width 90% width 90%
margin 0 auto margin 20px auto
.run-toggle .run-toggle
width 100% width 100%
margin-top 20px margin-top 20px
......
...@@ -6,6 +6,7 @@ import './home/index'; ...@@ -6,6 +6,7 @@ import './home/index';
import './scalars/index'; import './scalars/index';
import './images/index'; import './images/index';
import './histogram/index'; import './histogram/index';
import './graph/index';
import App from './App'; import App from './App';
new App({ new App({
......
...@@ -130,7 +130,7 @@ export default { ...@@ -130,7 +130,7 @@ export default {
+prefix-classes('visual-dl-scalar-') +prefix-classes('visual-dl-scalar-')
.config-com .config-com
width 90% width 90%
margin 0 auto margin 20px auto
.run-toggle .run-toggle
width 100% width 100%
margin-top 20px margin-top 20px
......
...@@ -14,3 +14,5 @@ export const getPluginHistogramsTags = makeService('/data/plugin/histograms/tags ...@@ -14,3 +14,5 @@ export const getPluginHistogramsTags = makeService('/data/plugin/histograms/tags
export const getPluginHistogramsHistograms = makeService('/data/plugin/histograms/histograms'); export const getPluginHistogramsHistograms = makeService('/data/plugin/histograms/histograms');
export const getPluginGraphsGraphs = makeService('/data/plugin/graphs/graphs');
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册