mirror of
https://github.com/librenms/librenms.git
synced 2024-10-07 16:52:45 +00:00
72 lines
2.0 KiB
Markdown
72 lines
2.0 KiB
Markdown
|
# Vis JS Configuration
|
||
|
|
|
||
|
|
The [Network Maps](Network-Map.md) and [Dependency Maps](Dependency-Map.md) all use a common configuration for
|
||
|
|
the vis.js library, which affects the way the maps are rendered, as well
|
||
|
|
as the way that users can interact with the maps. This configuration can
|
||
|
|
be adjusted by following the instructions below.
|
||
|
|
|
||
|
|
[This link](https://visjs.github.io/vis-network/docs/network/) will
|
||
|
|
show you all the options and explain what they do.
|
||
|
|
|
||
|
|
You may also access the dynamic configuration interface [example
|
||
|
|
here](https://visjs.github.io/vis-network/examples/network/other/configuration.html)
|
||
|
|
from within LibreNMS by adding the following to config.php
|
||
|
|
|
||
|
|
```php
|
||
|
|
$config['network_map_vis_options'] = '{
|
||
|
|
"configure": { "enabled": true},
|
||
|
|
}';
|
||
|
|
```
|
||
|
|
|
||
|
|
### Note
|
||
|
|
|
||
|
|
You may want to disable the automatic page refresh while you're
|
||
|
|
tweaking your configuration, as the refresh will reset the dynamic
|
||
|
|
configuration UI to the values currently saved in config.php This can
|
||
|
|
be done by clicking on the Settings Icon then Refresh Pause.
|
||
|
|
|
||
|
|
### Configurator Output
|
||
|
|
|
||
|
|
Once you've achieved your desired map appearance, click the generate
|
||
|
|
options button at the bottom to be given the necessary parameters to
|
||
|
|
add to your config.php file. You will need to paste the generated
|
||
|
|
config into config.php the format will need to look something like
|
||
|
|
this. Note that the configurator will output the config with `var options`
|
||
|
|
you will need to strip them out and at the end of the config you need to
|
||
|
|
add an `}';` see the example below.
|
||
|
|
|
||
|
|
```php
|
||
|
|
$config['network_map_vis_options'] = '{
|
||
|
|
"nodes": {
|
||
|
|
"color": {
|
||
|
|
"background": "rgba(20,252,18,1)"
|
||
|
|
},
|
||
|
|
"font": {
|
||
|
|
"face": "tahoma"
|
||
|
|
},
|
||
|
|
"physics": false
|
||
|
|
},
|
||
|
|
"edges": {
|
||
|
|
"smooth": {
|
||
|
|
"forceDirection": "none"
|
||
|
|
}
|
||
|
|
},
|
||
|
|
"interaction": {
|
||
|
|
"hover": true,
|
||
|
|
"multiselect": true,
|
||
|
|
"navigationButtons": true
|
||
|
|
},
|
||
|
|
"manipulation": {
|
||
|
|
"enabled": true
|
||
|
|
},
|
||
|
|
"physics": {
|
||
|
|
"barnesHut": {
|
||
|
|
"avoidOverlap": 0.11
|
||
|
|
},
|
||
|
|
"minVelocity": 0.75
|
||
|
|
}
|
||
|
|
}';
|
||
|
|
```
|
||
|
|
|
||
|
|
|