[change] Switched geographic map to netjsongraph.js #393

Closes #393

Co-authored-by: Gagan Deep <[email protected]>

openwisp_monitoring/device/apps.py

@@ -327,12 +327,12 @@ def register_dashboard_items(self):
  'monitoring/css/device-map.css',
  'leaflet/leaflet.css',
  'monitoring/css/leaflet.fullscreen.css',
+ 'monitoring/css/netjsongraph.css',
  ),
  'js': (
- 'monitoring/js/device-map.js',
- 'leaflet/leaflet.js',
- 'leaflet/leaflet.extras.js',
+ 'monitoring/js/lib/netjsongraph.min.js',
  'monitoring/js/lib/leaflet.fullscreen.min.js',
+ 'monitoring/js/device-map.js',
  ),
  },
  extra_config={

openwisp_monitoring/device/static/monitoring/css/device-map.css

@@ -1,10 +1,18 @@
-.health-unknown{ color: grey }
-.health-ok{ color: green }
-.health-problem{ color: orange }
-.health-critical{ color: red }
-.health-status{
+.health-unknown {
+ color: grey;
+}
+.health-ok {
+ color: green;
+}
+.health-problem {
+ color: orange;
+}
+.health-critical {
+ color: red;
+}
+.health-status {
  font-weight: bold;
- text-transform: uppercase
+ text-transform: uppercase;
 }
 .map-detail .paginator a {
  padding: 3px 7px;
@@ -19,12 +27,10 @@
  color: #fff;
 }
 #device-map-container {
- margin: 50px 0 0;
- padding: 0 40px;
+ margin: 50px auto;
  position: relative;
-}
-#device-map {
- min-height: 300px;
+ height: 300px;
+ width: 90%;
  border: 1px solid rgba(0, 0, 0, 0.3);
 }
 #device-map-container .ow-loading-spinner {
@@ -33,12 +39,19 @@
  top: 41%;
  left: 49%;
 }
+#device-map-container .leaflet-interactive:focus {
+ outline: none
+}
+#leaflet-config {
+ display: none;
+}
 .no-data {
  display: none;
  position: absolute;
  z-index: 99;
  top: 0;
- left: 0; width: 100%;
+ left: 0;
+ width: 100%;
  text-align: center;
  padding-top: 115px;
 }

openwisp_monitoring/device/static/monitoring/css/leaflet.fullscreen.css

@@ -14,25 +14,23 @@
 
 /* Do not combine these two rules; IE will break. */
 .leaflet-container:-webkit-full-screen {
- width: 100%!important;
- height: 100%!important;
+ width: 100% !important;
+ height: 100% !important;
 }
 .leaflet-container.leaflet-fullscreen-on {
- width: 100%!important;
- height: 100%!important;
+ width: 100% !important;
+ height: 100% !important;
 }
 .leaflet-pseudo-fullscreen {
- position: fixed!important;
- width: 100%!important;
- height: 100%!important;
- top: 0!important;
- left: 0!important;
+ position: fixed !important;
+ width: 100% !important;
+ height: 100% !important;
+ top: 0 !important;
+ left: 0 !important;
  z-index: 99999;
 }
 
-@media
- (-webkit-min-device-pixel-ratio:2),
- (min-resolution:192dpi) {
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .leaflet-control-fullscreen a {
  background-image: url([email protected]);
  }

openwisp_monitoring/device/static/monitoring/css/netjsongraph.css

@@ -0,0 +1,98 @@
+.njg-relativePosition {
+ position: relative;
+ left: 0;
+ right: 0;
+}
+.njg-container {
+ background: #fbfbfb;
+ border-radius: 2px;
+ border: 1px solid #ccc;
+ color: #6d6357;
+ line-height: 20px;
+ max-width: 400px;
+ min-width: 200px;
+ padding: 10px 15px;
+}
+#graphChartContainer {
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ z-index: 0;
+}
+.leaflet-control-zoom {
+ top: 5px;
+}
+.leaflet-control-zoom-in {
+ border-top-left-radius: 5px !important;
+ border-top-right-radius: 5px !important;
+}
+.leaflet-control-zoom-out {
+ border-bottom-left-radius: 5px !important;
+ border-bottom-right-radius: 5px !important;
+}
+.leaflet-control-fullscreen {
+ top: 5px;
+}
+.leaflet-control-fullscreen-button {
+ border-radius: 5px !important;
+}
+.leaflet-control-layers-toggle {
+ height: 35px !important;
+ width: 35px !important;
+ background-size: 20px 20px !important;
+}
+.marker-cluster div {
+ color: #fff;
+ background-color: rgba(53, 60, 68, 0.8) !important;
+}
+.ok div {
+ background-color: rgba(38, 113, 38, 0.8) !important;
+}
+.problem div {
+ background-color: rgba(255, 180, 66, 0.8) !important;
+}
+.critical div {
+ background-color: rgba(167, 45, 29, 0.8) !important;
+}
+.unknown div {
+ background-color: rgba(53, 60, 68, 0.8) !important;
+}
+.njg-controls {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ position: absolute;
+ right: 10px;
+ top: 20px;
+ z-index: 999;
+ background-color: inherit;
+}
+.njg-sideBar {
+ display: none;
+}
+.njg-tooltip {
+ background: #fff !important;
+ border: none !important;
+}
+.njg-tooltip-item {
+ display: flex;
+ align-items: center;
+ width: 100%;
+ padding: 1px 0;
+ flex-wrap: wrap;
+}
+.njg-tooltip-key {
+ display: inline-flex;
+ flex-basis: 40%;
+ flex-wrap: wrap;
+ text-transform: capitalize;
+ font-weight: 600;
+ color: #000;
+}
+.njg-tooltip-value {
+ display: inline-flex;
+ align-items: center;
+ flex-wrap: wrap;
+ flex-basis: 60%;
+ color: #000;
+}