utm_medium=referral&utm_source=cc-ribbon&utm_campaign=ST-RMA-4-21 " target="_blank">
Would you like to learn more about how to determine if you need an RMA? - REGISTER TODAY!
cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
310
Views
10
Helpful
3
Replies
tjnielsetj
Beginner

NeXtUI Path tooltip

I have created paths showing bandwidth utilization based on color, but I would like to add a tooltip showing values and a link to Grafana to show timebased graphing.  I have not been able to find tooltip options for paths, only links.  Is this possible?  Would it be better to draw new links to represent bandwidth and if so, can I use the same properties for links as I did for Path?  Being:  

 

pathPadding: [20, '50%'],
"arrow": "end",
"pathStyle": {'fill': bw2color(bw_value), 'stroke-width': '0px'},
"reverse": reverse

1 ACCEPTED SOLUTION

Accepted Solutions

Unfortunately I also didn't found this API docs.
But I catch this with jquery/js

 

For example

 

$(document).ready(function(){
    // Display div
    $('path').mouseover(function(event) {
        // If you put bw and grafana attribute to path level as i wrote above
        // You can catch  them from path
        url = $(this).attr('grafana');
        // Display div below mouse cursor
        $("#display_div").show().css('left',(event.pageX+10)+'px').css('top',(event.pageY+10)+'px').html("<img src="+url+">" );
    });
    // Hide div
    $('path').mouseout(function (event) {
        $("#display_div").hide()
    });
});
#display_div {
        position: absolute;
        border: 1px solid #d3d3d3;
        z-index: 999999;
        display: none;
    }

<div id="display_div"></div>

 

View solution in original post

3 REPLIES 3
Yury.Nazarov
Beginner

Hi, I solved similar problem as follows, may be it will be useful.

 

1. You can extend nx.graphic.Topology.Link class via inheritance and add some custom properties.

For example bw and grafana with default value None

 

let ExtendedLinkConfig = {
    "properties": {
        "bw": "None",
        "grafana": "None",
    }
}
nx.define('ExtendedLink', nx.graphic.Topology.Link, ExtendedLinkConfig);

 


2. register them into topologyConfig

 

 

var topologyConfig = {
  linkConfig: {
      // ...        
      bw:   'model.bw',
      grafana: 'model.grafana',
  },
// New class for draw link layer linkInstanceClass: 'ExtendedLink', }

 


3. Don't forget add new properties and your value (current bw, link to grafana graph, etc...) for them in array links=[] for rendering topology links

 

"links": [
      {
"id": 1,
"source": 1,
"target": 2, "bw": "....", // Your data "grafana": "url_to_graph", // Your data },
// ... ]

 

4. Then, you can get this properties for draw path layer

 

// Get link obj with id 1. 
link = topology.getLink(1)

pathStyle: {
    // Set link properties for path properties
    "bw": link._bw,
    "grafana": link._grafana,
},

 

After that you can get this properties via mouse events on path layer and show data like it was in php weathermap.

Thank you, this gets me close, I think the problem I have now is figuring out how to trigger a mouse event over a path and pass which path the mouse went over so I know which links info to display.  The API ref for path doesn't show an event like that, only dragged and moved.  

Unfortunately I also didn't found this API docs.
But I catch this with jquery/js

 

For example

 

$(document).ready(function(){
    // Display div
    $('path').mouseover(function(event) {
        // If you put bw and grafana attribute to path level as i wrote above
        // You can catch  them from path
        url = $(this).attr('grafana');
        // Display div below mouse cursor
        $("#display_div").show().css('left',(event.pageX+10)+'px').css('top',(event.pageY+10)+'px').html("<img src="+url+">" );
    });
    // Hide div
    $('path').mouseout(function (event) {
        $("#display_div").hide()
    });
});
#display_div {
        position: absolute;
        border: 1px solid #d3d3d3;
        z-index: 999999;
        display: none;
    }

<div id="display_div"></div>

 

View solution in original post

Content for Community-Ad

This widget could not be displayed.