Fixing global css issue

openwisp · Dec 23, 2024 · 47dabc9 · 47dabc9
1 parent edc87a7
commit 47dabc9
Show file tree

Hide file tree

Showing 21 changed files with 632 additions and 152 deletions.
diff --git a/public/example_templates/netjson-clustering.html b/public/example_templates/netjson-clustering.html
@@ -14,6 +14,26 @@
     <link href="../lib/css/netjsongraph-theme.css" rel="stylesheet" />
     <link href="../lib/css/netjsongraph.css" rel="stylesheet" />
     <style type="text/css">
+      html, body {
+        margin: 0;
+        padding: 0;
+        height: 100%;
+        width: 100%;
+      }
+
+      .netjsongraph-container {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+      }
+
+      #graphChartContainer {
+        width: 100%;
+        height: 100%;
+      }
+
       #legend h4 {
         margin: 10px 0;
         text-align: center;
@@ -68,9 +88,13 @@
     </style>
   </head>
   <body>
+    <div class="netjsongraph-container">
+     <div id="graphChartContainer"></div>
+    </div>
     <script type="text/javascript">
       const map = new NetJSONGraph("../assets/data/netjsonmap.json", {
         render: "map",
+        container: "#graphChartContainer",
         clustering: true,
         clusteringThreshold: 50,
         // set map initial state.

diff --git a/public/example_templates/netjson-dateParse.html b/public/example_templates/netjson-dateParse.html
@@ -8,6 +8,26 @@
     <link href="../lib/css/netjsongraph-theme.css" rel="stylesheet" />
     <link href="../lib/css/netjsongraph.css" rel="stylesheet" />
     <style>
+       html, body {
+        margin: 0;
+        padding: 0;
+        height: 100%;
+        width: 100%;
+      }
+
+      .netjsongraph-container {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+      }
+
+      #graphChartContainer {
+        width: 100%;
+        height: 100%;
+      }
+
       .njg-date {
         height: fit-content;
         text-align: center;
@@ -23,6 +43,10 @@
   </head>
 
   <body>
+    <div class="netjsongraph-container">
+     <div id="graphChartContainer"></div>
+   </div>
+
     <script type="text/javascript">
       /*
         The demo is used to show the use of the `dataParse` function.
@@ -31,6 +55,7 @@
     */
       // `graph` render defaultly.
       const graph = new NetJSONGraph("../assets/data/netjsonmap.json", {
+        container: "#graphChartContainer",
         // Convert to internal json format，add `time` field.
         prepareData: (data) => {
           data.nodes.map((node) => {

diff --git a/public/example_templates/netjson-multipleInterfaces.html b/public/example_templates/netjson-multipleInterfaces.html
@@ -7,8 +7,32 @@
     <!-- theme can be easily customized via css -->
     <link href="../lib/css/netjsongraph-theme.css" rel="stylesheet" />
     <link href="../lib/css/netjsongraph.css" rel="stylesheet" />
+    <style>
+      html, body {
+        margin: 0;
+        padding: 0;
+        height: 100%;
+        width: 100%;
+      }
+
+      .netjsongraph-container {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+      }
+
+      #graphChartContainer {
+        width: 100%;
+        height: 100%;
+      }
+    </style>
   </head>
   <body>
+     <div class="netjsongraph-container">
+     <div id="graphChartContainer"></div>
+   </div>
     <script type="text/javascript">
       /*
             The demo is used to show how to deal with the `multiple interfaces` in the NetJSON data.
@@ -20,6 +44,7 @@
       const graph = new NetJSONGraph(
         "../assets/data/netjson-multipleInterfaces.json",
         {
+          container: "#graphChartContainer",
           // Asynchronous processing of incoming data formats using WebWorker file.
           dealDataByWorker: "../lib/js/netjsonWorker.js",
         },

diff --git a/public/example_templates/netjson-searchElements.html b/public/example_templates/netjson-searchElements.html
@@ -8,6 +8,26 @@
     <link href="../lib/css/netjsongraph-theme.css" rel="stylesheet" />
     <link href="../lib/css/netjsongraph.css" rel="stylesheet" />
     <style>
+       html, body {
+        margin: 0;
+        padding: 0;
+        height: 100%;
+        width: 100%;
+      }
+
+      .netjsongraph-container {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+      }
+
+      #graphChartContainer {
+        width: 100%;
+        height: 100%;
+      }
+
       .njg-searchBtn {
         border: none;
         border-radius: 5px;
@@ -52,6 +72,10 @@
   </head>
 
   <body>
+     <div class="netjsongraph-container">
+     <div id="graphChartContainer"></div>
+   </div>
+
     <script type="text/javascript">
       /*
                   The demo is used to show the use of the `searchElements` function.
@@ -60,6 +84,7 @@
               */
       // `graph` render defaultly.
       let graph = new NetJSONGraph("../assets/data/netjsonmap.json", {
+        container: "#graphChartContainer",
         onReady: function () {
           let searchContainer = document.createElement("div"),
             searchInput = document.createElement("input"),
@@ -109,4 +134,4 @@
       graph.render();
     </script>
   </body>
-</html>
+</html>
diff --git a/public/example_templates/netjson-switchGraphMode.html b/public/example_templates/netjson-switchGraphMode.html
@@ -15,19 +15,44 @@
     <link href="../lib/css/netjsongraph-theme.css" rel="stylesheet" />
     <link href="../lib/css/netjsongraph.css" rel="stylesheet" />
     <style type="text/css">
+      html, body {
+        margin: 0;
+        padding: 0;
+        height: 100%;
+        width: 100%;
+      }
+
+      .netjsongraph-container {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+      }
+
+      #graphChartContainer {
+        width: 100%;
+        height: 100%;
+      }
+
       .leaflet-control-zoom {
         top: 55px;
         right: 1px;
       }
     </style>
   </head>
   <body>
+    <div class="netjsongraph-container">
+     <div id="graphChartContainer"></div>
+   </div>
+
     <script type="text/javascript">
       /*
           The demo is used to show how to switch the netjsongraph render mode -- `graph` or `map`.
       */
       const map = new NetJSONGraph("../assets/data/netjsonmap.json", {
         render: "map",
+        container: "#graphChartContainer",
         switchMode: true,
         // set map initial state.
         mapOptions: {
@@ -52,4 +77,4 @@
       map.render();
     </script>
   </body>
-</html>
+</html>
diff --git a/public/example_templates/netjson-switchRenderMode.html b/public/example_templates/netjson-switchRenderMode.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <title>netjsongraph.js: basic example</title>
@@ -8,6 +8,27 @@
     <link href="../lib/css/netjsongraph-theme.css" rel="stylesheet" />
     <link href="../lib/css/netjsongraph.css" rel="stylesheet" />
     <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        height: 100%;
+        width: 100%;
+      }
+
+      .netjsongraph-container {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+      }
+
+      #graphChartContainer {
+        width: 100%;
+        height: 100%;
+      }
+
       .switch-wrap input[type="checkbox"] {
         height: 0;
         width: 0;
@@ -28,11 +49,15 @@
   </head>
 
   <body>
+    <div class="netjsongraph-container">
+      <div id="graphChartContainer"></div>
+    </div>
     <script type="text/javascript">
       /*
           The demo is used to show how to switch the netjsongraph render mode -- `svg` or `canvas`.
       */
       const graph = new NetJSONGraph("../assets/data/netjsonmap.json", {
+        container: "#graphChartContainer",
         onReady: function () {
           switchRenderMode(this);
         },
@@ -91,4 +116,4 @@
       }
     </script>
   </body>
-</html>
+</html>
diff --git a/public/example_templates/netjsongraph-elementsLegend.html b/public/example_templates/netjsongraph-elementsLegend.html
@@ -7,12 +7,25 @@
   <link href="../lib/css/netjsongraph-theme.css" rel="stylesheet" />
   <link href="../lib/css/netjsongraph.css" rel="stylesheet" />
   <style>
-    #container {
-      width: 100%;
-      height: 100%;
-      overflow: hidden;
-      overflow-y: scroll;
-    }
+    html, body {
+        margin: 0;
+        padding: 0;
+        height: 100%;
+        width: 100%;
+      }
+
+      .netjsongraph-container {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+      }
+
+      #graphChartContainer {
+        width: 100%;
+        height: 100%;
+      }
 
     #legend h4 {
       margin: 10px 0;
@@ -85,21 +98,22 @@
     }
   </style>
 </head>
-<body>
-  <div id="legend">
-    <h4>Legends</h4>
-    <p><span class="circle node">&nbsp;</span> ordinary node</p>
-    <p><span class="circle gateway">&nbsp;</span> gateway node</p>
-    <p><span class="link wireless">&nbsp;</span> wireless link</p>
-    <p><span class="link ethernet">&nbsp;</span> ethernet link</p>
+ <div class="netjsongraph-container">
+    <div id="graphChartContainer"></div>
+    <div id="legend">
+      <h4>Legends</h4>
+      <p><span class="circle node">&nbsp;</span> ordinary node</p>
+      <p><span class="circle gateway">&nbsp;</span> gateway node</p>
+      <p><span class="link wireless">&nbsp;</span> wireless link</p>
+      <p><span class="link ethernet">&nbsp;</span> ethernet link</p>
+    </div>
   </div>
-  <div id="container"></div>
   <script type="text/javascript">
     /*
           The demo is used to show how to set colorful nodes.
       */
     const graph = new NetJSONGraph("../assets/data/netjson-elementsLegend.json", {
-      el: "#container",
+      container: "#graphChartContainer",
       graphConfig: {
         series: {
           force: {

diff --git a/public/example_templates/netjsongraph-graphGL.html b/public/example_templates/netjsongraph-graphGL.html
@@ -7,8 +7,32 @@
     <!-- theme can be easily customized via css -->
     <link href="../lib/css/netjsongraph-theme.css" rel="stylesheet" />
     <link href="../lib/css/netjsongraph.css" rel="stylesheet" />
+    <style>
+       html, body {
+        margin: 0;
+        padding: 0;
+        height: 100%;
+        width: 100%;
+      }
+
+      .netjsongraph-container {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+      }
+
+      #graphChartContainer {
+        width: 100%;
+        height: 100%;
+      }
+    </style>
   </head>
   <body>
+    <div class="netjsongraph-container">
+      <div id="graphChartContainer"></div>
+    </div>
     <script type="text/javascript">
       /*
           The demo is used to show how to use `graphGL` to render big data.
@@ -17,6 +41,7 @@
       const graph = new NetJSONGraph(
         "../assets/data/netjsongraph-graphGL.json",
         {
+          container: "#graphChartContainer",
           graphConfig: {
             series: {
               type: "graphGL",