gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat ： 测试vis—network

Browse Source
This commit is contained in:
zhangyu
2020-08-10 15:10:40 +08:00
parent 8c186d1da8
commit 6d0a2f8cfb
5 changed files with 655 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
nezha-fronted/package-lock.json generated
View File

@@ -3894,6 +3894,11 @@
"minimalistic-crypto-utils": "^1.0.0"
}
},
"emitter-component": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/emitter-component/-/emitter-component-1.1.1.tgz",
"integrity": "sha1-Bl4tvtaVm/RwZ57avq95gdEAOrY="
},
"emojis-list": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz",
@@ -5442,6 +5447,11 @@
"pify": "^3.0.0"
}
},
"hammerjs": {
"version": "2.0.8",
"resolved": "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz",
"integrity": "sha1-BO93hiz/K7edMPdpIJWTAiK/YPE="
},
"handle-thing": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.0.tgz",
@@ -6364,6 +6374,11 @@
"verror": "1.10.0"
}
},
"keycharm": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/keycharm/-/keycharm-0.2.0.tgz",
"integrity": "sha1-+m6i5DuQpoAohD0n8gddNajD5vk="
},
"keyv": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/keyv/-/keyv-3.0.0.tgz",
@@ -6899,6 +6914,11 @@
"minimist": "0.0.8"
}
},
"moment": {
"version": "2.27.0",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.27.0.tgz",
"integrity": "sha512-al0MUK7cpIcglMv3YF13qSgdAIqxHTO7brRtaz3DlSULbqfazqkc5kEjNrLDOM7fsjshoFIihnU8snrP7zUvhQ=="
},
"move-concurrently": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
@@ -10113,6 +10133,14 @@
"integrity": "sha1-mEcocL8igTL8vdhoEputEsPAKeM=",
"dev": true
},
"propagating-hammerjs": {
"version": "1.4.7",
"resolved": "https://registry.npmjs.org/propagating-hammerjs/-/propagating-hammerjs-1.4.7.tgz",
"integrity": "sha512-oW9Wd+W2Tp5uOz6Fh4mEU7p+FoyU85smLH/mPga83Loh0pHa6AH4ZHGywvwMk3TWP31l7iUsvJyW265p4Ipwrg==",
"requires": {
"hammerjs": "^2.0.8"
}
},
"proxy-addr": {
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.5.tgz",
@@ -12396,6 +12424,23 @@
"extsprintf": "^1.2.0"
}
},
"vis": {
"version": "4.21.0-EOL",
"resolved": "https://registry.npmjs.org/vis/-/vis-4.21.0-EOL.tgz",
"integrity": "sha512-JVS1mywKg5S88XbkDJPfCb3n+vlg5fMA8Ae2hzs3KHAwD4ryM5qwlbFZ6ReDfY8te7I4NLCpuCoywJQEehvJlQ==",
"requires": {
"emitter-component": "^1.1.1",
"hammerjs": "^2.0.8",
"keycharm": "^0.2.0",
"moment": "^2.18.1",
"propagating-hammerjs": "^1.4.6"
}
},
"vis-network": {
"version": "8.1.0",
"resolved": "https://registry.npmjs.org/vis-network/-/vis-network-8.1.0.tgz",
"integrity": "sha512-h8uMYKKBLDGD20kGzxqCmT2X94rB0oP2OLbBBqG/4sAZXJ4Vhbe+dQQurRg54Xz4wb8R33H719ldEizhWE/NkQ=="
},
"vm-browserify": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",

2
nezha-fronted/package.json
View File

@@ -18,6 +18,8 @@
"node-sass": "^4.13.1",
"pl-table": "^2.5.8",
"quill": "^1.3.7",
"vis": "^4.21.0-EOL",
"vis-network": "^8.1.0",
"vue": "^2.5.2",
"vue-countupjs": "^1.0.0",
"vue-i18n": "^8.15.1",

BIN
nezha-fronted/src/components/charts/a.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

33
nezha-fronted/src/components/charts/chart-list.vue
View File

@@ -122,6 +122,20 @@
@on-drag-chart="editChartForDrag"
@on-edit-chart-block="editData"
></chart-alert-list>
<vis-network
v-if="item.type === 'topology'"
@on-refresh-data="refreshChart"
@on-search-data="searchData"
@on-remove-chart-block="removeChart"
@on-duplicate-chart-block="duplicateChart"
@on-drag-chart="editChartForDrag"
@on-edit-chart-block="editData"
:panel-id="filter.panelId"
:chart-data="item"
:chart-index="index"
>
</vis-network>
</div>
</draggable>
<el-row v-if="dataList.length === 0" class="noData"></el-row>
@@ -139,6 +153,7 @@
import draggable from 'vuedraggable'
import chartDataFormat from "./chartDataFormat";
import chartAlertList from './chart-alert-list'
import visNetwork from './visNetwork'
export default {
name: 'chartList',
props: {
@@ -155,6 +170,7 @@
chartUrl,
chartSingleStat,
draggable,
visNetwork,
},
data() {
return {
@@ -639,6 +655,23 @@
}
this.dataList = [...this.dataTotalList];
this.dataList.push({ // 拓扑图
id: -10,
panelId: 0,
title: this.$t("alert.config.chart.alertNumTrend"),
span: 8,
height: 350,
type: "topology",
prev: -11,
next: -1,
unit: 1,
buildIn: 1,
elements: [{
id: '',
expression: `nz_alert_nums{id="${3333}"}`,
type: ''
}]
});
this.$nextTick(() => {
if (this.dataList.length > 0 ) {
this.dataList.forEach((item,index) => {

574
nezha-fronted/src/components/charts/visNetwork.vue Normal file
View File

@@ -0,0 +1,574 @@
<template>
<div class="nz-chart-resize">
<div class="resize-shadow" ref="resizeShadow"></div>
<div class="resize-box resize-box-table" ref="resizeBox">
<div class="chart-table" :id="'chartTableDiv'+chartIndex" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
<loading :ref="'localLoading'+chartIndex"></loading>
<div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
<el-popover
v-if="isError"
:close-delay=10
placement="top-start"
trigger="hover"
popper-class="chart-error-popper">
<div >{{errorContent}}</div>
<span slot="reference" style="" class="panel-info-corner panel-info-corner--error">
<i class="nz-icon nz-icon-warning fa"></i>
<span class="panel-info-corner-inner"></span>
</span>
</el-popover>
<el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos">
<el-dropdown-menu style="display: none"></el-dropdown-menu>
<span class="el-dropdown-link chart-title" @click="dropdownMenuShow=!dropdownMenuShow">
<span class="chart-title-text">{{chartData.title}}</span>
<span class="chart-title-icon"><i class="el-icon-caret-bottom el-icon--right" :class="{'visible':caretShow,'hidden':!caretShow}"></i></span>
</span>
<ul slot="dropdown" v-show="dropdownMenuShow" :id="'dropdownUl'+chartIndex" class="el-dropdown-menu nz-chart-dropdown" style="position: absolute; top: 30px; left: calc(50% - 79px); transform-origin: center top; z-index: 1000;" >
<li @click="refreshChart" class="el-dropdown-menu__item">
<i class="global-active-color el-icon-refresh-right" style="font-size: 16px;"></i><span>{{$t('dashboard.refresh')}}</span></li>
<li @click="editChart" class="el-dropdown-menu__item">
<i class="nz-icon nz-icon-edit" style="font-size: 14px; margin-right: 11px; margin-left: 1px;"></i>{{$t('dashboard.edit')}}</li>
<li @click="removeChart" class="el-dropdown-menu__item">
<i class="el-icon-delete" style="font-size: 16px;"></i>{{$t('dashboard.delete')}}</li>
<li @click="showAllScreen" class="el-dropdown-menu__item">
<i class="el-icon-full-screen" style="font-size: 16px;"></i>{{$t('dashboard.screen')}}</li>
<li @click="duplicate" class="el-dropdown-menu__item">
<i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('dashboard.duplicate')}}</li>
</ul>
</el-dropdown>
</div>
<div class="mt-10 table-container">
<div id="network_id" class="network"></div>
<button @click="addModel">add model</button>
<button @click="addLine">add line</button>
</div>
<!--全屏-->
<el-dialog class="nz-dialog table-chart-dialog" :title="$t('dashboard.panel.view')" :visible.sync="screenModal" width="96%" @close="screenModal = false" >
<div slot="title">
<!--<span class="nz-dialog-title">{{data.title}}</span>-->
<div class="float-right panel-calendar dialog-tool">
<time-picker ref="calendarPanel" class="nz-dashboard-picker" style="margin-top: -12px;" @change="dateChange"></time-picker>
</div>
</div>
1111111111
<loading :ref="'localLoadingScreen'+chartIndex"></loading>
</el-dialog>
<span class="vue-resizable-handle" @mousedown="startResize"></span>
</div>
</div>
</div>
</template>
<script>
import Vis from 'vis'
import png from './a.png'
import bus from '../../libs/bus';
import {Loading} from 'element-ui';
import chartDataFormat from './chartDataFormat'
import loading from "../common/loading";
import timePicker from '../common/timePicker'
export default {
name: 'home',
components: {
'loading': loading,
'time-picker':timePicker
},
props:{
chartIndex:{
type: Number,
default: 0,
},
chartData: {
type: Object
},
},
watch:{
},
data () {
return {
//其他
tableHeight: 0,
data: {}, // 该图表信息,chartItem
unit:{},
isError:false,
errorContent:'',
pageSizes:[50,100,200],
pageObj: {
pageNo: 1,
pageSize: 50,
total: 0
},
screenPageObj:{
pageNo: 1,
pageSize: 50,
total: 0
},
storedTableData:[],
storedScreanTableData:[],
seriesItem: [], // 保存信息
seriesItemScreen:[],//全屏数据
images: '',
loading:Object,
items: {
metric_name: [], // 每条数据列名称
xAxis: [],
theData: [], // series数据组
},
panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
firstLoad: true, // 是否第一次加载
chartType: 'table', // 图表类型
screenModal: false,
// 查询数据使用
filter: {
start_time: '',
end_time: '',
},
stableFilter: {}, // 保存数据使用,初始化起止时间,单图or多图等
firstShow: false, // 默认不显示操作按钮,
caretShow:false,
dragTitleShow:false,
dropdownMenuShow:false,
divFirstShow:false,
columns: [
{
title:'Element',
key:'element',
sortable: true
}
, {
title: '采集时间',
key: 'time',
width: 160,
render: (h, params) => h('span', bus.timeFormate(params.row.time, 'yyyy-MM-dd hh:mm:ss')),
}, {
title: '数值',
key: 'value',
width: 160,
sortable: true,
render: (h, params) => h('span', this.getNumStr(params.row.value)),
}],
searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],//全屏显示的时间
oldSearchTime: [],
// 拓扑图数据
nodes:[],
edges:[],
// network:null,
container:null,
nodesArray:[
{ id: 0, label: "model",
image: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1906469856,4113625838&fm=26&gp=0.jpg', shape:'image',shapeProperties:{useImageSize:false},
chosen:{
node:(values, id, selected, hovering)=>{
console.log(values, id, selected, hovering);
}
},
physics:false,
x:0,y:0
},
{id: 1, label: "model", x:0,y:10, physics:false,image: png, shape:'image',shapeProperties:{useImageSize:false}},
{id: 2, label: "model", x:10,y:20, physics:false,image: png, shape:'image',shapeProperties:{useImageSize:false}},
{id: 3, label: "model", x:10,y:30, physics:false,image: png, shape:'image',shapeProperties:{useImageSize:false}},
{id: 4, label: "model", x:0,y:40, physics:false,image: png, shape:'image',shapeProperties:{useImageSize:false}},
{id: 5, label: "model", x:0,y:50, physics:false,image: png, shape:'image',shapeProperties:{useImageSize:false}},
{id: 6, label: "model", x:10,y:50, physics:false,image: png, shape:'image',shapeProperties:{useImageSize:false}},
],
edgesArray:[
{id: 0,from: 1, to: 0,label:"hahah",arrows:'from;to'},
{id: 1,from: 2, to: 0},
{id: 2,from: 4, to: 3},
{id: 3,from: 3, to: 0},
{id: 4,from: 3, to: 5},
{id: 5,from: 0, to: 6},
],
options:{},
data:{}
}
},
methods:{
//拓扑图方法
init(){
let this_ = this;
this_.nodes = new Vis.DataSet(this_.nodesArray);
this_.edges = new Vis.DataSet(this_.edgesArray);
this_.container = document.getElementById('network_id');
this_.data = {
nodes: this_.nodes,
edges: this_.edges
};
this_.options = {
autoResize: true,
groups:{
useDefaultGroups: true,
myGroupId:{
/*node options*/
}
},
nodes: {
shape: 'dot',
size: 30,
font: {
size: 32,
},
borderWidth: 2
},
edges: {
width: 2,
smooth:{ //设置两个节点之前的连线的状态
enabled: false //默认是true，设置为false之后，两个节点之前的连线始终为直线，不会出现贝塞尔曲线
}
},
layout:{
randomSeed: 666,
},
physics: { //计算节点之前斥力，进行自动排列的属性
enabled: false, //默认是true，设置为false后，节点将不会自动改变，拖动谁谁动。不影响其他的节点
barnesHut: {
gravitationalConstant: -4000,
centralGravity: 0.3,
springLength: 120,
springConstant: 0.04,
damping: 0.09,
avoidOverlap: 0
}
},
interaction:{
dragNodes: true, //是否能拖动节点
dragView: false, //是否能拖动画布
hover: true, //鼠标移过后加粗该节点和连接线
multiselect: false, //按 ctrl 多选
selectable: true, //是否可以点击选择
selectConnectedEdges: false, //选择节点后是否显示连接线
hoverConnectedEdges: true, //鼠标滑动节点后是否显示连接线
zoomView: true, //是否能缩放画布
navigationButtons:true,
},
manipulation: { //该属性表示可以编辑，出现编辑操作按钮
enabled: false,
},
};
this_.network = new Vis.Network(this_.container, this_.data, this_.options);
},
resetAllNodes() {
let this_ = this;
this_.nodes.clear();
this_.edges.clear();
this_.nodes.add(this_.nodesArray);
this_.edges.add(this_.edgesArray);
this_.data = {
nodes: this_.nodes,
edges: this_.edges
};
this_.network = new Vis.Network(this_.container, this_.data, this_.options);
},
resetAllNodesStabilize() {
let this_ = this;
this_.resetAllNodes();
this_.network.stabilize();
},
setNetworkData(nodes,edges){//动态设置拓扑图数据
let this_ = this;
this.nodes = new Vis.DataSet(nodes);
this.edges = new Vis.DataSet(edges);
this.network.setData({
nodes:this_.nodes,
edges: this_.edges
});
},
addModel(){ // 添加model
console.log(this.network);
let model={
id: 7,
label: "model",
group: 0,
image: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1906469856,4113625838&fm=26&gp=0.jpg',
shape:'image',
shapeProperties:{useImageSize:false},
chosen:{
node:(values, id, selected, hovering)=>{
console.log(values, id, selected, hovering);
}
},
x:-100,
y:-100,
physics:false,
};
this.nodesArray.push(model);
// this.resetAllNodes();
this.setNetworkData(this.nodesArray,this.edgesArray);
},
addLine(){ // 添加line
let edges= {id: 7,from: 7, to: 0,label:"hahah",arrows:'from;to'};
this.edgesArray.push(edges);
this.setNetworkData(this.nodesArray,this.edgesArray);
},
setNodePosition(selId){ // 移动节点后 设置节点坐标
let position = this.network.getPositions([selId]);
let selItem = this.nodesArray.find((item)=>item.id===selId);
console.log(selItem);
selItem.x=position[selId].x;
selItem.y=position[selId].y;
},
// 其他
filterShowData(source,pageObj){
return source.slice((pageObj.pageNo-1)*pageObj.pageSize,pageObj.pageNo*pageObj.pageSize)
},
startResize(e) {
let vm = this;
this.$chartResizeTool.start(vm, this.data, e);
},
screenPageNo(val) {
this.screenPageObj.pageNo = val;
this.seriesItemScreen=this.filterShowData(this.storedScreanTableData, this.screenPageObj)
},
screenPageSize(val) {
this.screenPageObj.pageSize = val;
this.seriesItemScreen=this.filterShowData(this.storedScreanTableData, this.screenPageObj)
},
startLoading(area){
if(area==='screen'){
this.$refs['localLoadingScreen'+this.chartIndex].startLoading();
}else {
this.$refs['localLoading'+this.chartIndex].startLoading();
}
},
endLoading(area){
if(area==='screen'){
this.$refs['localLoadingScreen'+this.chartIndex].endLoading();
}else {
this.$refs['localLoading'+this.chartIndex].endLoading();
}
},
resize(chartItem) {
let deHeight = this.$chartResizeTool.titleHeight+this.$chartResizeTool.chartTableBlankHeight;
let container = document.querySelector('#chartTableDiv' + this.chartIndex + " .table-container");
container.style.height = `calc(100% - ${deHeight*2}px)`;
this.tableHeight = `calc(100% - ${this.$refs.Pagination.$el.offsetHeight}px)`;
this.$nextTick(() => {
container.querySelector(".el-table__body-wrapper")._ps_.update();
});
},
showLoad(chartItem) {
//设置高度 chart-table
this.$nextTick(() => {
this.resize(chartItem);
});
this.startLoading();
this.divFirstShow = true;
},
// 重新请求数据 刷新操作-local
refreshChart() {
this.dropdownMenuShow=false;
this.startLoading();
this.firstShow = false;
this.$emit('on-refresh-data', this.data.id);
},
// 编辑图表
editChart() {
this.dropdownMenuShow=false;
this.$emit('on-edit-chart-block', this.data.id);
},
// 删除该图表
removeChart() {
this.dropdownMenuShow=false;
this.$emit('on-remove-chart-block', this.data.id);
},
//全屏时间条件查询
dateChange(time) {
this.searchTime = [...time];
this.seriesItemScreen = [];
for(let i=0;i<8;i++){
this.seriesItemScreen.push({//表格数据
element:'',
time: '',//采集时间
value: '',//数值
});
}
this.startLoading('screen');
this.$emit('on-search-data', this.data.id, this.searchTime);
},
clickos() {
this.dropdownMenuShow=false;
},
clearChart(){
this.data = {};
},
duplicate(){
this.dropdownMenuShow=false;
const param = {id:this.data.id};
this.$post('panel/'+ this.data.panelId+'/charts/duplicate',(param)).then(response => {
if (response.code === 200) {
this.$message({
duration: 2000,
type: 'success',
message: this.$t("tip.duplicateSuccess")
});
this.$emit('on-duplicate-chart-block', this.data.id,response.data);
}else {
if(response.msg){
this.$message.error(response.msg);
}else if(response.error){
this.$message.error(response.error);
}else {
this.$message.error(response);
}
}
});
},
// 全屏查看
showAllScreen() {
this.dropdownMenuShow=false;
// 初始化同步时间
this.searchTime = [];
this.$set(this.searchTime, 0, this.oldSearchTime[0]);
this.$set(this.searchTime, 1, this.oldSearchTime[1]);
this.$refs.calendarPanel.setCustomTime(this.searchTime);
this.seriesItemScreen = this.seriesItem;
this.screenModal = true;
},
// 设置数据, filter区分
setData(chartItem, seriesItem, panelId, filter,area,errorMsg) {
if(errorMsg && errorMsg!==''){
this.isError = true;
this.errorContent = errorMsg;
}else {
this.isError = false;
this.errorContent = '';
}
if(area==='showFullScreen'){//全屏按时间查询
this.data = chartItem;
this.unit = chartDataFormat.getUnit(this.data.unit);
this.searchTime[0] = filter.start_time;//将列表的查询时间复制给全屏的查询时间
this.searchTime[1] = filter.end_time;
// this.seriesItemScreen = seriesItem;
this.storedScreanTableData=seriesItem;
this.storedScreanTableData=Object.assign([],this.storedScreanTableData.reverse());
this.screenPageObj.total=this.storedScreanTableData.length;
this.seriesItemScreen=this.filterShowData(this.storedScreanTableData,this.screenPageObj);
this.endLoading('screen');
} else{
//设置高度 chart-table
this.divFirstShow = true;
this.$nextTick(() => {
this.resize(chartItem);
});
this.firstShow = true; // 展示操作按键
this.panelIdInner = panelId;
this.data = chartItem;
this.unit = chartDataFormat.getUnit(this.data.unit);
this.storedTableData =seriesItem;
this.storedScreanTableData=seriesItem;
this.storedTableData=Object.assign([],this.storedTableData.reverse());
this.storedScreanTableData=Object.assign([],this.storedScreanTableData.reverse());
this.pageObj.total=this.storedTableData.length;
this.screenPageObj.total=this.storedScreanTableData.length;
this.seriesItem=this.filterShowData(this.storedTableData,this.pageObj);
this.seriesItemScreen =this.filterShowData(this.storedScreanTableData,this.screenPageObj)
if (filter) { // 保存数据,用于同步时间
this.searchTime[0] = filter.start_time;//将列表的查询时间复制给全屏的查询时间
this.searchTime[1] = filter.end_time;
this.oldSearchTime[0] = this.searchTime[0];
this.oldSearchTime[1] = this.searchTime[1];
}
this.endLoading();
}
},
dealLegendAlias:function(legend,expression){
if(/\{\{.+\}\}/.test(expression)){
let labelValue=expression.replace(/(\{\{.+?\}\})/g,function(i){
let label=i.substr(i.indexOf('{{')+2,i.indexOf('}}')-i.indexOf('{{')-2)
let reg=new RegExp(label+'=".+?"')
let value=null;
if(reg.test(legend)){
let find=legend.match(reg)[0];
value=find.substr(find.indexOf('"')+1,find.lastIndexOf('"')-find.indexOf('"')-1);
}
return value?value:label;
})
return labelValue
}else{
return expression;
}
},
// 获取格式
getNumStr(num) {
if (num) {
if (num >= 1000) {
const kbNum = num / 1000;
if (kbNum >= 1000) {
const mbNum = kbNum / 1000;
if (mbNum >= 1000) {
const gbNum = mbNum / 1000;
if (gbNum >= 1000) {
const tbNum = gbNum / 1000;
if (tbNum >= 1000) {
const pbNum = tbNum / 1000;
return `${pbNum.toFixed(2)}PB`;
}
return `${tbNum.toFixed(2)}TB`;
}
return `${gbNum.toFixed(2)}GB`;
}
return `${mbNum.toFixed(2)}MB`;
}
return `${kbNum.toFixed(2)}KB`;
}
return num.toFixed(2);
}
return num;
},
},
mounted(){
this.firstLoad = false;
setTimeout(()=>{
let this_=this
this.init();
this.network.on("click", function (params) {
// params.event = "[original event]";
// document.getElementById('eventSpan').innerHTML = '<h2>Click event:</h2>' + JSON.stringify(params, null, 4);
console.log('click event, getNodeAt returns: ' + this.getNodeAt(params.pointer.DOM),params);
});
this.network.on("dragEnd", function (params) {
// params.event = "[original event]";
// document.getElementById('eventSpan').innerHTML = '<h2>Click event:</h2>' + JSON.stringify(params, null, 4);
console.log('click event, getNodeAt returns: ' + this.getNodeAt(params.pointer.DOM),params);
console.log( this_.network.getPositions());
let selId=params.nodes[0];
this_.setNodePosition(selId)
});
})
}
}
</script>
<style lang="scss">
@import './chart.scss';
</style>
<style scoped>
.table-container{
height: calc(100% - 30px);
}
.network{
height: calc(100% - 30px);
}
</style>