[change] Updated netjsongraph.js to fix geo map cluster overlap

Co-authored-by: Federico Capoano <f.capoano@openwisp.io>

Author: cestercian

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

@@ -29,6 +29,9 @@
   background-color: #000000;
   color: #fff;
 }
+.map-detail table {
+  width: 100%;
+}
 #device-map-container {
   margin: 50px auto;
   position: relative;

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

@@ -1,27 +1,41 @@
-.leaflet-control-fullscreen a {
+.njg-container .leaflet-control-fullscreen a {
   background: #fff url(fullscreen.png) no-repeat 0 0;
   background-size: 26px 52px;
 }
-.leaflet-touch .leaflet-control-fullscreen a {
+.njg-container .leaflet-touch .leaflet-control-fullscreen a {
   background-position: 2px 2px;
 }
-.leaflet-fullscreen-on .leaflet-control-fullscreen a {
+.njg-container.leaflet-fullscreen-on .leaflet-control-fullscreen a,
+.njg-container .leaflet-container-fullscreen .leaflet-control-fullscreen a {
   background-position: 0 -26px;
 }
-.leaflet-touch.leaflet-fullscreen-on .leaflet-control-fullscreen a {
+.njg-container.leaflet-touch.leaflet-fullscreen-on
+  .leaflet-control-fullscreen
+  a,
+.njg-container
+  .leaflet-touch
+  .leaflet-container-fullscreen
+  .leaflet-control-fullscreen
+  a {
   background-position: 2px -24px;
 }
 
 /* Do not combine these two rules; IE will break. */
-.leaflet-container:-webkit-full-screen {
+.njg-container:has(.leaflet-fullscreen-on) {
+  position: fixed !important;
   width: 100% !important;
   height: 100% !important;
+  top: 0 !important;
+  left: 0 !important;
+  z-index: 99999;
 }
-.leaflet-container.leaflet-fullscreen-on {
+
+.njg-container:has(.leaflet-fullscreen-on) .leaflet-container {
   width: 100% !important;
   height: 100% !important;
 }
-.leaflet-pseudo-fullscreen {
+
+.njg-container .leaflet-container.leaflet-fullscreen-on {
   position: fixed !important;
   width: 100% !important;
   height: 100% !important;
@@ -31,7 +45,7 @@
 }
 
 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-  .leaflet-control-fullscreen a {
+  .njg-container .leaflet-control-fullscreen a {
     background-image: url(fullscreen@2x.png);
   }
 }

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

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