Merge e6564a5 into f46b11b

openwisp · Nov 11, 2022 · f019885 · f019885
2 parents f46b11b + e6564a5
commit f019885
Show file tree

Hide file tree

Showing 26 changed files with 416 additions and 389 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -73,3 +73,27 @@ jobs:
         uses: coverallsapp/github-action@master
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
+
+  build-and-deploy:
+    name: Build and Deploy
+    runs-on: ubuntu-20.04
+    if: ${{ github.event_name=='push' }}
+    env:
+      MAPBOX_URL_TEMPLATE: ${{ secrets.MAPBOX_URL_TEMPLATE }}
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Installing dependencies
+        run: |
+          yarn install
+
+      - name: Build
+        run: yarn build
+
+      - name: Deploy
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./dist
diff --git a/index.html b/index.html
@@ -68,98 +68,98 @@ <h1>NetJSONGraph.js Example Demos</h1>
     </header>
     <main>
       <div class="cards">
-        <a href="/examples/netjsongraph.html" target="_blank">Basic usage</a>
+        <a href="./examples/netjsongraph.html" target="_blank">Basic usage</a>
       </div>
       <div class="cards">
-        <a href="/examples/netjsonmap.html" target="_blank">Geographic map</a>
+        <a href="./examples/netjsonmap.html" target="_blank">Geographic map</a>
       </div>
       <div class="cards">
-        <a href="/examples/netjson-multipleInterfaces.html" target="_blank"
+        <a href="./examples/netjson-multipleInterfaces.html" target="_blank"
           >Multiple interfaces</a
         >
       </div>
       <div class="cards">
-        <a href="/examples/netjson-searchElements.html" target="_blank"
+        <a href="./examples/netjson-searchElements.html" target="_blank"
           >Search elements</a
         >
       </div>
       <div class="cards">
-        <a href="/examples/netjson-dateParse.html" target="_blank"
+        <a href="./examples/netjson-dateParse.html" target="_blank"
           >Date parse</a
         >
       </div>
       <div class="cards">
-        <a href="/examples/netjson-switchRenderMode.html" target="_blank"
+        <a href="./examples/netjson-switchRenderMode.html" target="_blank"
           >Switch render mode</a
         >
       </div>
       <div class="cards">
-        <a href="/examples/netjson-switchGraphMode.html" target="_blank"
+        <a href="./examples/netjson-switchGraphMode.html" target="_blank"
           >Switch graph mode</a
         >
       </div>
       <div class="cards">
-        <a href="/examples/netjsongraph-nodeExpand.html" target="_blank"
+        <a href="./examples/netjsongraph-nodeExpand.html" target="_blank"
           >Nodes expand or fold</a
         >
       </div>
       <div class="cards">
-        <a href="/examples/netjsonmap-indoormap.html" target="_blank"
+        <a href="./examples/netjsonmap-indoormap.html" target="_blank"
           >Indoor map</a
         >
       </div>
       <div class="cards">
-        <a href="/examples/netjsonmap-plugins.html" target="_blank"
+        <a href="./examples/netjsonmap-plugins.html" target="_blank"
           >Leaflet plugins</a
         >
       </div>
       <div class="cards">
-        <a href="/examples/netjsongraph-graphGL.html" target="_blank"
+        <a href="./examples/netjsongraph-graphGL.html" target="_blank"
           >GraphGL render for big data</a
         >
       </div>
       <div class="cards">
-        <a href="/examples/netjsongraph-elementsLegend.html" target="_blank"
+        <a href="./examples/netjsongraph-elementsLegend.html" target="_blank"
           >Custom attributes</a
         >
       </div>
       <div class="cards">
-        <a href="/examples/netjsongraph-multipleLinks.html" target="_blank"
+        <a href="./examples/netjsongraph-multipleLinks.html" target="_blank"
           >Multiple links render</a
         >
       </div>
       <div class="cards">
-        <a href="/examples/netjsonmap-nodeTiles.html" target="_blank"
+        <a href="./examples/netjsonmap-nodeTiles.html" target="_blank"
           >JSONDataUpdate using override option</a
         >
       </div>
       <div class="cards">
-        <a href="/examples/netjsonmap-appendData.html" target="_blank"
+        <a href="./examples/netjsonmap-appendData.html" target="_blank"
           >JSONDataUpdate using append option</a
         >
       </div>
       <div class="cards">
-        <a href="/examples/netjsonmap-multipleTiles.html" target="_blank"
+        <a href="./examples/netjsonmap-multipleTiles.html" target="_blank"
           >Multiple tiles render</a
         >
       </div>
       <div class="cards">
-        <a href="/examples/netjsonmap-animation.html" target="_blank"
+        <a href="./examples/netjsonmap-animation.html" target="_blank"
           >Geographic map animated links</a
         >
       </div>
       <div class="cards">
-        <a href="/examples/netjsonmap-appendData2.html" target="_blank"
+        <a href="./examples/netjsonmap-appendData2.html" target="_blank"
           >Append data using arrays</a
         >
       </div>
       <div class="cards">
-        <a href="/examples/njg-geojson.html" target="_blank"
+        <a href="./examples/njg-geojson.html" target="_blank"
           >Geographic map with GeoJSON data</a
         >
       </div>
       <div class="cards">
-        <a href="/examples/netjson-clustering.html" target="_blank"
+        <a href="./examples/netjson-clustering.html" target="_blank"
           >Clustering</a
         >
       </div>

diff --git a/package.json b/package.json
@@ -42,8 +42,10 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@types/jest": "^28.1.6",
     "acorn": "^8.7.1",
+    "copy-webpack-plugin": "^11.0.0",
     "coveralls": "^3.1.1",
     "css-loader": "^6.7.1",
+    "dotenv-webpack": "^8.0.1",
     "eslint": "^8.18.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^8.5.0",

diff --git a/public/example_templates/netjson-clustering.html b/public/example_templates/netjson-clustering.html
@@ -11,8 +11,8 @@
       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" />
+    <link href="../lib/css/netjsongraph-theme.css" rel="stylesheet" />
+    <link href="../lib/css/netjsongraph.css" rel="stylesheet" />
     <style type="text/css">
       #legend h4 {
         margin: 10px 0;
@@ -69,7 +69,7 @@
   </head>
   <body>
     <script type="text/javascript">
-      const map = new NetJSONGraph("../../public/assets/data/netjsonmap.json", {
+      const map = new NetJSONGraph("../assets/data/netjsonmap.json", {
         render: "map",
         clustering: true,
         clusteringThreshold: 50,

diff --git a/public/example_templates/netjson-dateParse.html b/public/example_templates/netjson-dateParse.html
@@ -5,8 +5,8 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <!-- theme can be easily customized via css -->
-    <link href="../../src/css/netjsongraph-theme.css" rel="stylesheet" />
-    <link href="../../src/css/netjsongraph.css" rel="stylesheet" />
+    <link href="../lib/css/netjsongraph-theme.css" rel="stylesheet" />
+    <link href="../lib/css/netjsongraph.css" rel="stylesheet" />
     <style>
       .njg-date {
         height: fit-content;
@@ -30,25 +30,22 @@
         Of course you can also call directly.
     */
       // `graph` render defaultly.
-      const graph = new NetJSONGraph(
-        "../../public/assets/data/netjsonmap.json",
-        {
-          // Convert to internal json format，add `time` field.
-          prepareData: (data) => {
-            data.nodes.map((node) => {
-              node.label = node.name;
-              node.properties = node.properties || {};
-              node.properties.time =
-                node.properties.time || "2000-01-01T00:00:00.000Z";
-            });
-            data.links.map((link) => {
-              link.properties = link.properties || {};
-              link.properties.time =
-                link.properties.time || "1999-12-31T23:59:59.999Z";
-            });
-          },
+      const graph = new NetJSONGraph("../assets/data/netjsonmap.json", {
+        // Convert to internal json format，add `time` field.
+        prepareData: (data) => {
+          data.nodes.map((node) => {
+            node.label = node.name;
+            node.properties = node.properties || {};
+            node.properties.time =
+              node.properties.time || "2000-01-01T00:00:00.000Z";
+          });
+          data.links.map((link) => {
+            link.properties = link.properties || {};
+            link.properties.time =
+              link.properties.time || "1999-12-31T23:59:59.999Z";
+          });
         },
-      );
+      });
 
       graph.render();
 

diff --git a/public/example_templates/netjson-multipleInterfaces.html b/public/example_templates/netjson-multipleInterfaces.html
@@ -5,8 +5,8 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <!-- theme can be easily customized via css -->
-    <link href="../../src/css/netjsongraph-theme.css" rel="stylesheet" />
-    <link href="../../src/css/netjsongraph.css" rel="stylesheet" />
+    <link href="../lib/css/netjsongraph-theme.css" rel="stylesheet" />
+    <link href="../lib/css/netjsongraph.css" rel="stylesheet" />
   </head>
   <body>
     <script type="text/javascript">
@@ -18,10 +18,10 @@
         */
       // `graph` render defaultly.
       const graph = new NetJSONGraph(
-        "../../public/assets/data/netjson-multipleInterfaces.json",
+        "../assets/data/netjson-multipleInterfaces.json",
         {
           // Asynchronous processing of incoming data formats using WebWorker file.
-          dealDataByWorker: "../../src/js/netjsonWorker.js",
+          dealDataByWorker: "../lib/js/netjsonWorker.js",
         },
       );
       graph.render();

diff --git a/public/example_templates/netjson-searchElements.html b/public/example_templates/netjson-searchElements.html
@@ -5,8 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta charset="utf-8" />
     <!-- theme can be easily customized via css -->
-    <link href="../../src/css/netjsongraph-theme.css" rel="stylesheet" />
-    <link href="../../src/css/netjsongraph.css" rel="stylesheet" />
+    <link href="../lib/css/netjsongraph-theme.css" rel="stylesheet" />
+    <link href="../lib/css/netjsongraph.css" rel="stylesheet" />
     <style>
       .njg-searchBtn {
         border: none;
@@ -59,7 +59,7 @@
                   See the following comments for details.
               */
       // `graph` render defaultly.
-      let graph = new NetJSONGraph("../../public/assets/data/netjsonmap.json", {
+      let graph = new NetJSONGraph("../assets/data/netjsonmap.json", {
         onReady: function () {
           let searchContainer = document.createElement("div"),
             searchInput = document.createElement("input"),

diff --git a/public/example_templates/netjson-switchGraphMode.html b/public/example_templates/netjson-switchGraphMode.html
@@ -10,10 +10,10 @@
       integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
       crossorigin=""
     />
-    <link href="../../lib/css/leaflet-draw.css" rel="stylesheet" />
+    <link href="../lib/css/leaflet-draw.css" rel="stylesheet" />
     <!-- theme can be easily customized via css -->
-    <link href="../../src/css/netjsongraph-theme.css" rel="stylesheet" />
-    <link href="../../src/css/netjsongraph.css" rel="stylesheet" />
+    <link href="../lib/css/netjsongraph-theme.css" rel="stylesheet" />
+    <link href="../lib/css/netjsongraph.css" rel="stylesheet" />
     <style type="text/css">
       .leaflet-control-zoom {
         top: 55px;
@@ -26,7 +26,7 @@
       /*
           The demo is used to show how to switch the netjsongraph render mode -- `graph` or `map`.
       */
-      const map = new NetJSONGraph("../../public/assets/data/netjsonmap.json", {
+      const map = new NetJSONGraph("../assets/data/netjsonmap.json", {
         render: "map",
         switchMode: true,
         // set map initial state.

diff --git a/public/example_templates/netjson-switchRenderMode.html b/public/example_templates/netjson-switchRenderMode.html
@@ -5,8 +5,8 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <!-- theme can be easily customized via css -->
-    <link href="../../src/css/netjsongraph-theme.css" rel="stylesheet" />
-    <link href="../../src/css/netjsongraph.css" rel="stylesheet" />
+    <link href="../lib/css/netjsongraph-theme.css" rel="stylesheet" />
+    <link href="../lib/css/netjsongraph.css" rel="stylesheet" />
     <style>
       .switch-wrap input[type="checkbox"] {
         height: 0;
@@ -32,14 +32,11 @@
       /*
           The demo is used to show how to switch the netjsongraph render mode -- `svg` or `canvas`.
       */
-      const graph = new NetJSONGraph(
-        "../../public/assets/data/netjsonmap.json",
-        {
-          onReady: function () {
-            switchRenderMode(this);
-          },
+      const graph = new NetJSONGraph("../assets/data/netjsonmap.json", {
+        onReady: function () {
+          switchRenderMode(this);
         },
-      );
+      });
 
       graph.render();
 

diff --git a/public/example_templates/netjsongraph-elementsLegend.html b/public/example_templates/netjsongraph-elementsLegend.html
@@ -4,8 +4,8 @@
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- theme can be easily customized via css -->
-  <link href="../../src/css/netjsongraph-theme.css" rel="stylesheet" />
-  <link href="../../src/css/netjsongraph.css" rel="stylesheet" />
+  <link href="../lib/css/netjsongraph-theme.css" rel="stylesheet" />
+  <link href="../lib/css/netjsongraph.css" rel="stylesheet" />
   <style>
     #container {
       width: 100%;
@@ -98,7 +98,7 @@ <h4>Legends</h4>
     /*
           The demo is used to show how to set colorful nodes.
       */
-    const graph = new NetJSONGraph("../../public/assets/data/netjson-elementsLegend.json", {
+    const graph = new NetJSONGraph("../assets/data/netjson-elementsLegend.json", {
       el: "#container",
       graphConfig: {
         series: {

diff --git a/public/example_templates/netjsongraph-graphGL.html b/public/example_templates/netjsongraph-graphGL.html
@@ -5,8 +5,8 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <!-- theme can be easily customized via css -->
-    <link href="../../src/css/netjsongraph-theme.css" rel="stylesheet" />
-    <link href="../../src/css/netjsongraph.css" rel="stylesheet" />
+    <link href="../lib/css/netjsongraph-theme.css" rel="stylesheet" />
+    <link href="../lib/css/netjsongraph.css" rel="stylesheet" />
   </head>
   <body>
     <script type="text/javascript">
@@ -15,7 +15,7 @@
       */
       // `graph` render defaultly.
       const graph = new NetJSONGraph(
-        "../../public/assets/data/netjsongraph-graphGL.json",
+        "../assets/data/netjsongraph-graphGL.json",
         {
           graphConfig: {
             series: {

diff --git a/public/example_templates/netjsongraph-multipleLinks.html b/public/example_templates/netjsongraph-multipleLinks.html
@@ -5,8 +5,8 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <!-- theme can be easily customized via css -->
-    <link href="../../src/css/netjsongraph-theme.css" rel="stylesheet" />
-    <link href="../../src/css/netjsongraph.css" rel="stylesheet" />
+    <link href="../lib/css/netjsongraph-theme.css" rel="stylesheet" />
+    <link href="../lib/css/netjsongraph.css" rel="stylesheet" />
   </head>
 
   <body>
@@ -17,7 +17,7 @@
         */
       // `graph` render defaultly.
       const graph = new NetJSONGraph(
-        "../../public/assets/data/netjsongraph-multipleLinks.json",
+        "../assets/data/netjsongraph-multipleLinks.json",
         {
           graphConfig: {
             // set force layout params