[gsoc22] Fix realtime data update example

[totallynotvaishnav]

closes #140

[totallynotvaishnav]

Currently, the hosted example doesn't make much sense as we have to set up the server locally. It would be nice if could host the server too. WDYT @nemesisdesign ?

[nemesifier]

Currently, the hosted example doesn't make much sense as we have to set up the server locally. It would be nice if could host the server too. WDYT @nemesisdesign ?

I prefer to keep it simple and add instructions on how to test this locally and find a way to avoid showing it in the examples we host on github pages, is this doable?

[nemesifier]

Can you make sure the instructions in the README are up to date and work?
https://github.com/openwisp/netjsongraph.js/tree/gsoc22#realtime-update

[totallynotvaishnav]

I prefer to keep it simple and add instructions on how to test this locally and find a way to avoid showing it in the examples we host on github pages, is this doable?

Yeah, we can return this example as a response when we start the server locally and remove it from gh-pages.

Can you make sure the instructions in the README are up to date and work?
https://github.com/openwisp/netjsongraph.js/tree/gsoc22#realtime-update

Will do.

[nemesifier]

Here it is how it was done in the old version:
https://github.com/openwisp/netjsongraph.js/blob/master/examples/custom-attributes.html
I was using a CSS class. I guess we can't do the same here.

We shouldn't hardcode a specific property for this, we have to look into a way to allow setting colors depending on a property which could be anything.

It's something like this doable?

const nodeColors = {
  default: 'black',
  gateway: 'orange'
}
const linkColors = {
  up: 'green',
  down: 'red'
}

new NetJSONGraph({
  prepareData: data => {
    data.nodes.map(node => {
        node.color = nodeColors[node.properties.gateway];
    });

    data.links.map(link => {
        link.color = linkColors[node.status];
    })
  }
});

[nemesifier]

If I open the examples locally, I see the real time link, if I click on it, I see Cannot GET /examples/netjson-updateData.html. Is this intended?

Can you disable the hover effect when hovering on nodes and links?

Can you get rid of that legend and have the nodes all of the same color?

Can you change the title to "Live update example"?

[nemesifier]

for example here I would add:

cd examples/realtime_update

[totallynotvaishnav]

If I open the examples locally, I see the real time link, if I click on it, I see Cannot GET /examples/netjson-updateData.html. Is this intended?

Yeah, that example is not useful anymore. I forgot to remove the example from the index page.

Can you disable the hover effect when hovering on nodes and links?

Can you get rid of that legend and have the nodes all of the same color?

I thought of handling this in #113

[totallynotvaishnav]

We shouldn't hardcode a specific property for this, we have to look into a way to allow setting colors depending on a property which could be anything.

It's something like this doable?

Yeah makes sense. I will implement something similar.

[nemesifier]

@totallynotvaishnav you forgot this:

Can you change the title to "Live update example"?

[nemesifier]

You shouldn't change this here unless we also update the README, why are you doing this schange?