Skip to content

G
graph
Commit bfb75d0a authored by wenli.huang@wuban.net.cn's avatar wenli.huang@wuban.net.cn
Browse files
Options

提交

parent 7b5f56c0
Hide whitespace changes
Inline Side-by-side
Showing with 417 additions and 351 deletions
src/App.js
View file @ bfb75d0a
...@@ -10,10 +10,13 @@ class App extends Component { ...@@ -10,10 +10,13 @@ class App extends Component {
AxisY:[], AxisY:[],
Links:[], Links:[],
target:[], target:[],
duration:-10 duration: -50,
interval: null,
requestDuration: -50
} }
componentDidMount(){ componentDidMount(){
fetch(`/api/graph_by_height_and_duration?height=0&duration=-10`,{ let that = this
fetch(`/api/graph_by_height_and_duration?height=0&duration=${that.state.requestDuration}`,{
method:'GET', method:'GET',
headers:{ headers:{
'Content-Type':'application/json;charset=UTF-8' 'Content-Type':'application/json;charset=UTF-8'
...@@ -22,383 +25,446 @@ class App extends Component { ...@@ -22,383 +25,446 @@ class App extends Component {
.then(res => .then(res =>
res.json() res.json()
) )
.then((data) => { .then((resData) => {
let allRows0Arr = []
let allRows1Arr = []
let allRows2Arr = []
let allTopAxisXArr = []
let allBottomAxisXArr = []
let allLinksArr = []
this.setState({ this.setState({
data:data.result.Rows, data: resData.result.Rows,
TopAxisX:data.result.AxisX.TopAxisX, TopAxisX: resData.result.AxisX.TopAxisX,
BottomAxisX:data.result.AxisX.BottomAxisX, BottomAxisX: resData.result.AxisX.BottomAxisX,
AxisY:data.result.AxisY, AxisY: resData.result.AxisY,
Links:data.result.Links, Links: resData.result.Links,
}) }, ()=>{
// handle arr Rows [3 arr]\TopAxisX [...{}]\BottomAxisX [...{}]\Links [...{}]
// console.log(data.result.AxisX.BlockTime,'开始')
var maxtime=moment(data.result.AxisX.BlockTime/1000000) let {Rows, AxisX, Links } = resData.result
maxtime.format('YYYY-MM-DD HH:mm:ss') let {TopAxisX, BottomAxisX} = AxisX
maxtime.add(this.state.duration,'seconds').format('YYYY-MM-DD HH:mm:ss') allRows0Arr = Rows[0]
allRows1Arr = Rows[1]
maxtime.unix() allRows2Arr = Rows[2]
allTopAxisXArr = TopAxisX
allBottomAxisXArr = BottomAxisX
var mintime=moment(data.result.AxisX.BlockTime/1000000) allLinksArr = Links
// console.log(Rows, TopAxisX, BottomAxisX, Links)
var markline=data.result.AxisX.TopAxisX.map(item=>{ that.initChart(resData)
return [ that.interval = setInterval(() => {
{ fetch(`/api/graph_by_height_and_duration?height=0&duration=${that.state.requestDuration}`,{
// name: 'start', method:'GET',
xAxis:item.Time, headers:{
yAxis: 'Block', 'Content-Type':'application/json;charset=UTF-8'
label: { },
show: true, })
lineHeight:25, .then(res =>res.json())
position: 'insideMiddleTop', .then((newData) => {
formatter:item.Value , let {Rows, AxisX, Links } = newData.result
}, let {TopAxisX, BottomAxisX} = AxisX
lineStyle: { color: 'red', type: 'solid',with:30},
}, // allRows0Arr = [...allRows0Arr, ...Rows[0].slice(Rows[0].length-2, Rows[0].length-1)]
{ // allRows1Arr = [...allRows1Arr, ...Rows[1].slice(Rows[1].length-2, Rows[1].length-1)]
// name: 'end', // allRows2Arr = [...allRows2Arr, ...Rows[2].slice(Rows[2].length-2, Rows[2].length-1)]
xAxis: item.Time, // allTopAxisXArr = [...allTopAxisXArr, ...TopAxisX.slice(TopAxisX.length-2, TopAxisX.length-1)]
yAxis: 'Block' // allBottomAxisXArr = [...allBottomAxisXArr, ...BottomAxisX.slice(BottomAxisX.length-2, BottomAxisX.length-1)]
}, // allLinksArr = [...allLinksArr, ...Links.slice(Links.length-2, Links.length-1)]
] allRows0Arr = Rows[0]
}) allRows1Arr = Rows[1]
data.result.AxisX.BottomAxisX.map(item=>{ allRows2Arr = Rows[2]
markline.push( [ allTopAxisXArr = TopAxisX
{ allBottomAxisXArr = BottomAxisX
// name: 'start', allLinksArr = Links
xAxis:item.Time,
yAxis: 'Round',
label: {
show: true, newData.result.Rows[0] = allRows0Arr
lineHeight:10, newData.result.Rows[1] = allRows1Arr
position: 'insideMiddleTop', newData.result.Rows[2] = allRows2Arr
formatter:item.Value, newData.result.AxisX.TopAxisX = allTopAxisXArr
}, newData.result.AxisX.BottomAxisX = allBottomAxisXArr
lineStyle: { color: 'green', type: 'solid',with:30}, newData.result.Links = allLinksArr
}, that.initChart(newData)
{ })
// name: 'end', }, 1000);
xAxis: item.Time, var chartDom = document.getElementById('main');
yAxis: 'Round' var myChart = echarts.init(chartDom);
}, myChart.on('datazoom', function(params){
] ) console.log(params)
clearInterval(that.interval)
})
}) })
})
if(this.state.duration<0){
maxtime=moment(data.result.AxisX.BlockTime/1000000)
mintime=moment(data.result.AxisX.BlockTime/1000000)
// mintime.add(-(this.state.duration),'seconds').format('YYYY-MM-DD HH:mm:ss')
mintime.subtract(-(this.state.duration),'seconds').format('YYYY-MM-DD HH:mm:ss')
moment(data.result.AxisX.BlockTime/1000000).format('YYYY-MM-DD HH:mm:ss')
}
var source= data.result.Rows
var target=[];
for(var i in source){
var list=[];
var lineList=source[i];
for (var j in lineList) {
list.push([
lineList[j].XAsTime,
lineList[j].Type,
lineList[j].Y,
lineList[j].Desc,
lineList[j].Round,
lineList[j].Index,
lineList[j].ID,
lineList[j].Role
]);
}
target.push(list);
}
var chartDom = document.getElementById('main'); }
var myChart = echarts.init(chartDom);
var option; componentWillUnmount() {
const series = []; this.state.interval = null
this.state.AxisY.forEach(function (type) { }
const arr = target.map(function (item) {
const data = item.map((item, index) => { initChart(data) {
var colors var chartDom = document.getElementById('main');
if(item[7]==='Normal'){ var myChart = echarts.init(chartDom);
colors ='#4B4B4B' var dataArr=[]
}else if(item[7]==='Witness'){ // console.log(data.result.AxisX.BlockTime,'开始')
colors ='#4A4CFF' var maxtime=moment(data.result.AxisX.BlockTime/1000000)
}else if(item[7]==='Famous1'){ maxtime.format('YYYY-MM-DD HH:mm:ss')
colors ='#00FFFF' console.log(maxtime.format('YYYY-MM-DD HH:mm:ss'))
}else if(item[7]==='Famous2'){ maxtime.add(this.state.duration,'seconds').format('YYYY-MM-DD HH:mm:ss')
colors ='#06FF02'
} maxtime.unix()
return {
var mintime=moment(data.result.AxisX.BlockTime/1000000)
var markline=data.result.AxisX.TopAxisX.map(item=>{
return [
{
// name: 'start',
xAxis:item.Time,
yAxis: 'Block',
label: { label: {
show: true, show: true,
position: 'top' lineHeight:25,
}, position: 'insideMiddleTop',
emphasis: { formatter:item.Value ,
label: {
show: true,
}
},
name: item[6],
value: item,
// x: item[0],
itemStyle:{
borderWidth: 1,
borderColor: '#333',
color:colors,
}, },
symbolSize:item[3]==item[6]? 15 : 15 lineStyle: { color: 'red', type: 'solid',with:30},
};
})
return data;
})
var newArr=arr.reduce(function(total,currentValue){
return total.concat(currentValue)
})
let links = data.result.Links;
links.map(item=>{
item['source'] = item['Source']
item['target'] = item['Target']
})
// links.pop();
series.push({
name: type,
type: 'graph',
coordinateSystem: 'cartesian2d',
data: newArr,
links: links,
edgeSymbol: ['none', 'arrow'],
edgeSymbolSize: 5,
legendHoverLink: false,
lineStyle: {
color: '#333'
},
itemStyle: {
borderWidth: 1,
borderColor: '#333',
},
label: {
color: '#333',
position: 'center'
},
symbolSize: 15,
markLine:{
symbol:'circle',
data:markline,
}
});
});
function randomData() {
now = new Date(+now + oneDay);
value = value + Math.random() * 21 - 10;
return {
name: now.toString(),
value: [
[now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
Math.round(value)
]
};
}
let datas = [];
let now = new Date(1997, 9, 3);
let oneDay = 24 * 3600 * 1000;
let value = Math.random() * 1000;
for (var i = 0; i < 1000; i++) {
datas.push(randomData());
}
option = {
visualMap: {
show: false,
dimension: 1,
},
legend: {
show: false,
data: this.state.AxisY,
selectedMode: 'single',
right: 100
},
grid: {
left: 40,
bottom: 0,
containLabel: true,
top: 80
},
xAxis: [
{
name:'Time',
axisLabel: {
formatter: (function(value){
// console.log(value,'value')
return moment(parseInt(value/1000000)).format('YYYY-MM-DD HH:mm:ss')
})
}, },
{
max:maxtime.unix()*1000000000, // name: 'end',
// max:maxtime.add(10,'seconds').unix()*1000000000, xAxis: item.Time,
min:mintime.unix()*1000000000, yAxis: 'Block'
splitNumber:10,
axisLine:{
show:true,
symbol: ['none', 'arrow']
}, },
axisTick: { ]
alignWithLabel:true, })
data.result.AxisX.BottomAxisX.map(item=>{
markline.push( [
{
// name: 'start',
xAxis:item.Time,
yAxis: 'Round',
label: {
show: true,
lineHeight:10,
position: 'insideMiddleTop',
formatter:item.Value,
},
lineStyle: { color: 'green', type: 'solid',with:30},
}, },
}, {
// name: 'end',
xAxis: item.Time,
yAxis: 'Round'
},
] )
})
if(this.state.duration<0){
maxtime=moment(data.result.AxisX.BlockTime/1000000)
mintime=moment(data.result.AxisX.BlockTime/1000000)
// mintime.add(-(this.state.duration),'seconds').format('YYYY-MM-DD HH:mm:ss')
mintime.subtract(-(this.state.duration),'seconds').format('YYYY-MM-DD HH:mm:ss')
moment(data.result.AxisX.BlockTime/1000000).format('YYYY-MM-DD HH:mm:ss')
}
var source= data.result.Rows
var target=[];
for(var i in source){
var list=[];
var lineList=source[i];
for (var j in lineList) {
list.push([
lineList[j].XAsTime,
lineList[j].Type,
lineList[j].Y,
lineList[j].Desc,
lineList[j].Round,
lineList[j].Index,
lineList[j].ID,
lineList[j].Role
]);
}
target.push(list);
}
// 上边的轴指的是之前block // var chartDom = document.getElementById('main');
{ // var myChart = echarts.init(chartDom);
axisLine:{ var option;
const series = [];
this.state.AxisY.forEach(function (type) {
const arr = target.map(function (item) {
const data = item.map((item, index) => {
var colors
if(item[7]==='Normal'){
colors ='#4B4B4B'
}else if(item[7]==='Witness'){
colors ='#4A4CFF'
}else if(item[7]==='Famous1'){
colors ='#00FFFF'
}else if(item[7]==='Famous2'){
colors ='#06FF02'
}
return {
label: {
show: true, show: true,
symbol: ['none', 'arrow'] position: 'top'
}, },
axisLabel:{ emphasis: {
inside: false, label: {
show: true,
}
}, },
axisTick: { name: item[6],
alignWithLabel:true, value: item,
// x: item[0],
itemStyle:{
borderWidth: 1,
borderColor: '#333',
color:colors,
}, },
symbolSize:item[3]==item[6]? 15 : 15
};
})
return data;
})
var newArr=arr.reduce(function(total,currentValue){
return total.concat(currentValue)
})
dataArr=arr.reduce(function(total,currentValue){
return total.concat(currentValue)
})
// console.log(dataArr,'初始')
// console.log(dataArr.length,'初始长度')
// console.log(newArr,'new')
let links = data.result.Links;
links.map(item=>{
item['source'] = item['Source']
item['target'] = item['Target']
})
// links.pop();
series.push({
name: type,
type: 'graph',
coordinateSystem: 'cartesian2d',
data: newArr,
links: links,
edgeSymbol: ['none', 'arrow'],
edgeSymbolSize: 5,
legendHoverLink: false,
lineStyle: {
color: '#333'
},
itemStyle: {
borderWidth: 1,
borderColor: '#333',
},
label: {
color: '#333',
position: 'center'
},
symbolSize: 15,
markLine:{
symbol:'circle',
data:markline,
}
});
});
option = {
visualMap: {
show: false,
dimension: 1,
},
legend: {
show: false,
data: this.state.AxisY,
selectedMode: 'single',
right: 100
},
grid: {
left: 40,
bottom: 0,
containLabel: true,
top: 80
},
dataZoom: [
{
type: 'inside',
start: 70,
end: 100
},
{
start: 70,
end: 100,
}
],
xAxis: [
{
name:'Time',
axisLabel: {
formatter: (function(value){
return moment(parseInt(value/1000000)).format('YYYY-MM-DD HH:mm:ss')
})
}, },
{ max:maxtime.add(5,'seconds').unix()*1000000000,
axisLine:{ min:mintime.unix()*1000000000,
show: true, splitNumber:10,
symbol: ['none', 'arrow'] axisLine:{
}, show:true,
axisLabel:{ symbol: ['none', 'arrow']
inside: true,
},
axisTick: {
alignWithLabel:true,
},
}, },
], axisTick: {
yAxis: { alignWithLabel:true,
type: 'category', },
name:'Validator', },
nameTextStyle: {
align: "center", // 上边的轴指的是之前block
lineHeight: 40, {
axisLine:{
show: true,
symbol: ['none', 'arrow']
}, },
data: this.state.AxisY,
triggerEvent: true,
axisLabel:{ axisLabel:{
margin:8, inside: false,
formatter:function(data){ },
var val='' axisTick: {
if(data.length>5){ alignWithLabel:true,
val = data.substr(0,4)+'...';
return val ;
}else {
return data;
}
}
}, },
boundaryGap: false,
// scale: true,
axisTick: {
alignWithLabel: true
}
}, },
toolbox: { {
feature: { axisLine:{
dataZoom: {} show: true,
symbol: ['none', 'arrow']
},
axisLabel:{
inside: true,
},
axisTick: {
alignWithLabel:true,
},
},
],
yAxis: {
type: 'category',
name:'Validator',
nameTextStyle: {
align: "center",
lineHeight: 40,
},
data: this.state.AxisY,
triggerEvent: true,
axisLabel:{
margin:8,
formatter:function(data){
var val=''
if(data.length>5){
val = data.substr(0,4)+'...';
return val ;
}else {
return data;
}
} }
}, },
// dataZoom: { boundaryGap: false,
// type: 'inside' // scale: true,
// }, axisTick: {
alignWithLabel: true
}
series: series, },
}; toolbox: {
myChart.setOption(option); feature: {
window.addEventListener("resize", function () { dataZoom: {}
myChart.resize(); //使图表自适应窗口的大小 }
}) },
extension(myChart); // dataZoom: {
function extension(myChart){ // type: 'inside'
var elementDiv = document.getElementById('extension'); // },
if(!elementDiv){
var div = document.createElement('div') series: series,
div.setAttribute('id', 'extension') };
div.style.display = 'block' myChart.setOption(option);
document.querySelector('html').appendChild(div) // window.addEventListener("resize", function () {
// myChart.resize(); //使图表自适应窗口的大小
// })
this.extension(myChart);
}
extension(myChart) {
var elementDiv = document.getElementById('extension');
if(!elementDiv){
var div = document.createElement('div')
div.setAttribute('id', 'extension')
div.style.display = 'block'
document.querySelector('html').appendChild(div)
}
var styleCss=`position: absolute;margin-left:35px;z-index: 99999;color: #fff;font-size: 12px;padding: 5px;display: inline;border-radius: 4px;background-color: #303133;box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 8px`
myChart.on('mouseover',function(params){
if (params.componentType == 'yAxis') {
var elementDiv = document.querySelector('#extension')
var elementStyle = styleCss
elementDiv.style.cssText = elementStyle
elementDiv.innerHTML = params.value
document.querySelector('html').onmousemove = function (event) {
var elementDiv = document.querySelector('#extension')
var xx = event.pageX - 10
var yy = event.pageY + 15
elementDiv.style.top = yy + 'px'
elementDiv.style.left = xx + 'px'
} }
var styleCss=`position: absolute;margin-left:35px;z-index: 99999;color: #fff;font-size: 12px;padding: 5px;display: inline;border-radius: 4px;background-color: #303133;box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 8px` }else if(params.componentType == "series"){
myChart.on('mouseover',function(params){ if(params.name === params.data.name){
if (params.componentType == 'yAxis') { var elementDiv = document.querySelector('#extension')
var elementStyle = styleCss
elementDiv.style.cssText = elementStyle
elementDiv.innerHTML=`<p>${moment(parseInt(params.data.value[0]/1000000)).format('YYYY-MM-DD HH:mm:ss.SSS')}</p><p>round：${params.data.value[4]}</p>`
document.querySelector('html').onmousemove = function (event) {
var elementDiv = document.querySelector('#extension') var elementDiv = document.querySelector('#extension')
var elementStyle = styleCss var xx = event.pageX - 10
elementDiv.style.cssText = elementStyle var yy = event.pageY + 15
elementDiv.innerHTML = params.value elementDiv.style.top = yy + 'px'
document.querySelector('html').onmousemove = function (event) { elementDiv.style.left = xx + 'px'
var elementDiv = document.querySelector('#extension')
var xx = event.pageX - 10
var yy = event.pageY + 15
elementDiv.style.top = yy + 'px'
elementDiv.style.left = xx + 'px'
}
}
})
myChart.on('mousemove', function (params) {
if(params.componentType == "series"){
if(params.name === params.data.name){
var elementDiv = document.querySelector('#extension')
var elementStyle = styleCss
elementDiv.style.cssText = elementStyle
elementDiv.innerHTML=`<p>${moment(parseInt(params.data.value[0]/1000000)).format('YYYY-MM-DD HH:mm:ss.SSS')}</p><p>round：${params.data.value[4]}</p>`
document.querySelector('html').onmousemove = function (event) {
var elementDiv = document.querySelector('#extension')
var xx = event.pageX - 10
var yy = event.pageY + 15
elementDiv.style.top = yy + 'px'
elementDiv.style.left = xx + 'px'
}
}
} }
}) }
myChart.on('mousemove', function (params) { }else if(params.componentType == "markLine"){
if(params.componentType == "markLine"){ var elementDiv = document.querySelector('#extension')
var elementStyle = styleCss
elementDiv.style.cssText = elementStyle
elementDiv.innerHTML = moment(parseInt(params.data.xAxis/1000000)).format('YYYY-MM-DD HH:mm:ss.SSS')
document.querySelector('html').onmousemove = function (event) {
var elementDiv = document.querySelector('#extension') var elementDiv = document.querySelector('#extension')
var elementStyle = styleCss var xx = event.pageX - 10
elementDiv.style.cssText = elementStyle var yy = event.pageY + 15
elementDiv.innerHTML = moment(parseInt(params.data.xAxis/1000000)).format('YYYY-MM-DD HH:mm:ss.SSS') elementDiv.style.top = yy + 'px'
document.querySelector('html').onmousemove = function (event) { elementDiv.style.left = xx + 'px'
var elementDiv = document.querySelector('#extension')
var xx = event.pageX - 10
var yy = event.pageY + 15
elementDiv.style.top = yy + 'px'
elementDiv.style.left = xx + 'px'
}
} }
})
myChart.on('mouseout', function (params) {
var elementDiv = document.querySelector('#extension')
if (params.componentType == 'yAxis') {
elementDiv.style.cssText = 'display:none'
}
if(params.componentType == "series"){
if(params.name === params.data.name){
elementDiv.style.cssText = 'display:none'
}
}
if(params.componentType == "markLine"){
elementDiv.style.cssText = 'display:none'
}
})
} }
}) })
}
render() { myChart.on('mouseout', function (params) {
return ( var elementDiv = document.querySelector('#extension')
<div id="main" className="container" style={{ padding: '50px', boxSizing:'border-box', width: '100%', height: 1000 }}> if (params.componentType == 'yAxis') {
</div> elementDiv.style.cssText = 'display:none'
); }
} if(params.componentType == "series"){
if(params.name === params.data.name){
elementDiv.style.cssText = 'display:none'
}
}
if(params.componentType == "markLine"){
elementDiv.style.cssText = 'display:none'
}
})
}
render() {
return (
<div id="main" className="container" style={{ padding: '50px', boxSizing:'border-box', width: '100%', height: 900 }}>
</div>
);
}
} }
export default App; export default App;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment