[feature] Implement clustering feature #114

closes #114
openwisp · Sep 21, 2022 · d70354d · d70354d
1 parent c51b518
commit d70354d
Show file tree

Hide file tree

Showing 6 changed files with 338 additions and 5 deletions.
diff --git a/examples/netjson-clustering.html b/examples/netjson-clustering.html
@@ -0,0 +1,145 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>netjsongraph.js: basic example</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css"
+      integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
+      crossorigin=""
+    />
+    <!-- theme can be easily customized via css -->
+    <link href="../src/css/netjsongraph-theme.css" rel="stylesheet" />
+    <link href="../src/css/netjsongraph.css" rel="stylesheet" />
+    <style type="text/css">
+      #legend h4 {
+        margin: 10px 0;
+        text-align: center;
+      }
+      #legend {
+        position: absolute;
+        right: 25px;
+        bottom: 25px;
+        width: auto;
+        height: auto;
+        max-width: 250px;
+        padding: 8px 15px;
+        background: #fbfbfb;
+        border-radius: 8px;
+        color: #000;
+        font-family: Arial, sans-serif;
+        font-family: sans-serif;
+        font-size: 14px;
+        z-index: 1000;
+        user-select: text;
+      }
+      #legend p {
+        margin: 10px 0;
+        display: flex;
+        align-items: center;
+      }
+      #legend span {
+        width: 16px;
+        margin-right: 5px;
+      }
+      #legend .link-up,
+      #legend .link-down {
+        display: inline-block;
+        height: 5px;
+        border-bottom-width: 6px;
+        border-bottom-style: solid;
+      }
+      #legend .link-up {
+        color: #3acc38;
+        margin-right: 10px;
+      }
+      #legend .link-down {
+        color: red;
+        margin-right: 10px;
+      }
+
+      @media only screen and (max-width: 850px) {
+        #legend {
+          right: 15px;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <script type="text/javascript" src="../dist/netjsongraph.min.js"></script>
+    <script type="text/javascript">
+      const map = new NetJSONGraph("./data/netjsonmap.json", {
+        render: "map",
+        clustering: true,
+        clusteringThreshold: 50,
+        // set map initial state.
+        mapOptions: {
+          center: [46.86764405052012, 19.675998687744144],
+          zoom: 4,
+          nodeConfig: {
+            label: {
+              offset: [0, -10],
+            },
+          },
+        },
+        linkCategories: [
+          {
+            name: "down",
+            linkStyle: {
+              color: "#c92517",
+              width: 5,
+            },
+            emphasis: {
+              linkStyle: {
+                color: "#FD0101",
+                opacity: 1,
+              },
+            },
+          },
+        ],
+        // Convert to internal json format
+        prepareData: (data) => {
+          data.nodes.map((node) => {
+            node.label = node.name;
+            node.properties = Object.assign(node.properties || {}, {
+              location: node.location,
+            });
+          });
+
+          data.links.map((link) => {
+            link.properties = link.properties || {};
+            if (link.properties.status) {
+              link.category = link.properties.status;
+            }
+          });
+        },
+      });
+
+      const createLegend = (key, name) => {
+        const legendItem = document.createElement("p");
+        const legendIcon = document.createElement("span");
+
+        legendIcon.setAttribute("class", name);
+
+        legends.appendChild(legendItem);
+        legendItem.appendChild(legendIcon);
+
+        legendItem.innerHTML += key;
+        return legendItem;
+      };
+      const legends = document.createElement("div");
+      const legendsHeader = document.createElement("h4");
+      legends.setAttribute("id", "legend");
+      legendsHeader.innerHTML = "Legend";
+      legends.appendChild(legendsHeader);
+      legends.appendChild(createLegend("Up", "link-up"));
+      legends.appendChild(createLegend("Down", "link-down"));
+
+      document.body.appendChild(legends);
+
+      map.render();
+    </script>
+  </body>
+</html>
diff --git a/index.html b/index.html
@@ -158,6 +158,11 @@ <h1>NetJSONGraph.js Example Demos</h1>
           >Geographic map with GeoJSON data</a
         >
       </div>
+      <div class="cards">
+        <a href="./examples/netjson-clustering.html" target="_blank"
+          >Clustering</a
+        >
+      </div>
     </main>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -62,6 +62,7 @@
   "dependencies": {
     "echarts": "^5.3.3",
     "echarts-gl": "^2.0.8",
+    "kdbush": "^3.0.0",
     "leaflet": "^1.8.0",
     "zrender": "^5.3.2"
   }

diff --git a/src/js/netjsongraph.config.js b/src/js/netjsongraph.config.js
@@ -33,6 +33,10 @@ const NetJSONGraphDefaultConfig = {
   svgRender: false,
   switchMode: false,
   maxPointsFetched: 10000,
+  clustering: false,
+  clusteringThreshold: 100,
+  disableClusteringAtLevel: 8,
+  clusterRadius: 80,
   showMetaOnNarrowScreens: false,
   echartsOption: {
     aria: {
@@ -184,6 +188,21 @@ const NetJSONGraphDefaultConfig = {
         },
       },
     },
+    clusterConfig: {
+      symbolSize: 30,
+      itemStyle: {
+        color: "#1566a9",
+      },
+      tooltip: {
+        show: false,
+      },
+      label: {
+        show: true,
+        position: "inside",
+        color: "#fff",
+        offset: [0, 0],
+      },
+    },
     baseOptions: {
       toolbox: {
         show: false,