[gsoc22] Fix realtime data update example

.prettierignore

@@ -28,3 +28,5 @@ yarn-error.log*
 
 #other
 lib/
+*.min.js
+*.map

README.md

@@ -122,8 +122,7 @@ You can also customize some global properties with [`echartsOption`](https://ech
 
 #### Realtime Update
 
-If you want to update the data dynamically, you have to write function to get updated data.
-Then you only need call `JSONDataUpdate` and pass the data to update the view.
+We use [socket.io](https://socket.io/) to monitor data changes which supports WebSockets and Polling. You can call `JSONDataUpdate` when the data change event occurs and pass the data to update the view.
 
 ```JS
 /**
@@ -145,32 +144,29 @@ const graph = new NetJSONGraph("./data/netjsonmap.json", {
 
 graph.render();
 
-const socket = io("http://localhost:8078");
+const socket = io("http://localhost:3000/",{ transports : ['websocket'] });
+
 socket.on("connect", function() {
-    console.log("client connect");
+    console.log("client connected");
 });
 socket.on("disconnect", function() {
-    console.log("client disconnected.");
+    console.log("client disconnected");
 });
 // Self-monitoring server， re-render when the data changes.
 socket.on("netjsonChange", graph.utils.JSONDataUpdate.bind(graph));
 ```
 
-Demo is [here](https://openwisp.github.io/netjsongraph.js/examples/netjson-updateData.html).
-I use [socket.io](https://socket.io/) to monitor data changes, which supports WebSocket or polling.
-And I build a simple local server using the express framework and nodeJS. Before testing, you need to open it.
-
-The code to build a local server can be found [here](https://github.com/openwisp/netjsongraph.js/tree/gsoc2019/examples/data/netjsonnode/).
-
-Execute in this directory:
+You can see this in action by executing the following commands:
 
 ```
-npm install
+cd examples/realtime_update
+
+yarn install
 
-node index.js
+yarn dev
 ```
 
-Then open the demo page, you will find that the nodes and links in the view change after 5 seconds.
+In this demo the nodes and links change after 5 seconds.
 
 #### Search elements
 

examples/realtime_update/assets/netjsongraph-theme.css

@@ -0,0 +1,147 @@
+h3 {
+  display: block;
+  font-size: 1.17em;
+  margin-block-start: 1em;
+  margin-block-end: 1em;
+  margin-inline-start: 0px;
+  margin-inline-end: 0px;
+  font-weight: bold;
+}
+
+p {
+  display: block;
+  margin-block-start: 1em;
+  margin-block-end: 1em;
+  margin-inline-start: 0px;
+  margin-inline-end: 0px;
+}
+
+#njg-indoorImgInput {
+  position: absolute;
+  right: 70px;
+  top: 20px;
+  width: 150px;
+  z-index: 1;
+}
+
+.switch-wrap {
+  position: absolute;
+  left: 50px;
+  bottom: 45px;
+  z-index: 1;
+}
+
+.switch-wrap input[type="checkbox"] {
+  height: 25px;
+  width: 60px;
+  opacity: 0;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  left: 5em;
+  top: 0;
+  z-index: 1;
+  cursor: pointer;
+}
+.switch-wrap label {
+  display: inline-block;
+  width: 60px;
+  height: 25px;
+  border: 1px solid #dfdfdf;
+  outline: none;
+  border-radius: 16px;
+  box-sizing: border-box;
+  background: #ffffff;
+  cursor: pointer;
+  transition: border-color 0.3s, background-color 0.3s;
+  vertical-align: middle;
+  position: relative;
+  margin: 0 5px;
+}
+.switch-wrap label::before {
+  content: "";
+  position: absolute;
+  top: 1px;
+  left: 2px;
+  transition: transform 0.3s;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 1);
+  background-color: #fff;
+}
+.switch-wrap input[type="checkbox"]:checked + label {
+  background: grey;
+}
+.switch-wrap input[type="checkbox"]:checked + label:before {
+  transform: translateX(34px);
+}
+.njg-date {
+  position: absolute;
+  right: 0;
+  bottom: 20px;
+  z-index: 1;
+}
+
+@font-face {
+  font-family: "iconfont";
+  src: url("iconfont.eot?t=1554537125905"); /* IE9 */
+  src: url("iconfont.eot?t=1554537125905#iefix") format("embedded-opentype"),
+    /* IE6-IE8 */
+      url("data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALUAAsAAAAABoQAAAKGAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAqBEIEuATYCJAMICwYABCAFhG0HLRvRBcguoRzbUaRIzQw73HPLf7QTlBZ2D/IcIqjWsJ69DaJClJGADlmhijCpCBUFUgELGaHg/4X/3P9am73DJNR5j3rniUuYJZWV+Sv+d1DrkBIhatJGhdBMSonZDe5mGYwm3qYronsgVPRfaegmrtP2H/dOG0u7QOYDymWugZ+6AOOtgY41KLISyrjHcAqrwkXmf5xApQ4ZykLfyDjUyWhcIC5sU4W6gk+W5WS5UNqwNItbJcrTdQrcRN+Pf0pRR1JSoLK1814DOr6Kp7H/u+8oQPETcHUJCowBmdhqjK1IC5mSVhmr0gOOVRx81QcGcVStkP86KqwGbcB7Jr4neNTCBDL0jgKLk9zkWpoZV083Lk3aU+QEjguciAOc6rXwcih7x22pDzGBTA58/6i7Kf9X4OyAnUy7Lf+SwMWzebmVOkI2slFyqJCVI4UN6dZul2us9Ehnd6SGqrxTzKCfFY+pPRQE/8sGl1onvrwqg8/d6kiTDXOA8kvZg7+MP7AmW0JSppPz0J6M5rIkVFpOv8jV6GWqquX5LKG8wJchKdMOhXJ96IwfgxJVxqFUuWmoNKp/dZUmUlrkCow4YRDqnUNS6x4K9R7RGf8MJVq9Qqn6SEOlnWjasspA2A3zklQmA7UNtPUwEK6RG+LiUTJXPFXmhRF1kmRiB7GYK5ST/RSQXGJGsmqWmAUKGfrYx04jzwsxkqFDOucs5qiSz4umN+X00IcG8ySiYsSANBuQTRcKiKAxa6h8fhQxrfCoZAeiyTqJSAm7f1SUUxiA7pcFgxCP8kpilamEMQEJUsiH+tgg4vGEUNQ8yEF0LMeaEIlU5Hk9MVSW217h/7pNUInUKXhVobhUAwAAAA==")
+      format("woff2"),
+    url("iconfont.woff?t=1554537125905") format("woff"),
+    url("iconfont.ttf?t=1554537125905") format("truetype"),
+    /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+      url("iconfont.svg?t=1554537125905#iconfont") format("svg"); /* iOS 4.1- */
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 30px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-eye:hover {
+  color: red;
+}
+
+.icon-eye:before {
+  content: "\e63f";
+  position: relative;
+  top: -2px;
+}
+
+.njg-selectIcon {
+  position: absolute;
+  right: 20px;
+  top: 20px;
+  z-index: 999;
+  width: 35px;
+  height: 35px;
+  line-height: 35px;
+  text-align: center;
+  background: #fbfbfb;
+  border-radius: 4px;
+  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
+  border: 1px solid #ccc;
+  color: #6d6357;
+}
+
+.njg-searchInput {
+  width: 250px;
+  height: 20px;
+}
+.njg-searchBtn {
+  padding: 5px 10px;
+  margin-left: 10px;
+  background-color: white;
+}
+.njg-searchContainer {
+  position: absolute;
+  left: 300px;
+  top: 10px;
+  z-index: 1;
+}

examples/realtime_update/assets/netjsongraph.css

@@ -0,0 +1,105 @@
+* {
+  margin: 0;
+  padding: 0;
+  outline: none;
+}
+html,
+body {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  font-family: Arial, sans-serif;
+  font-family: sans-serif;
+  font-size: 14px;
+}
+
+.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;
+}
+
+.njg-overlay {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  z-index: 999;
+  visibility: hidden;
+  user-select: text;
+}
+
+.njg-metadata {
+  position: absolute;
+  left: 10px;
+  top: 10px;
+  width: 200px;
+  word-break: break-all;
+  z-index: 999;
+  user-select: text;
+}
+
+.njg-close {
+  cursor: pointer;
+  position: absolute;
+  right: 10px;
+  top: 10px;
+}
+.njg-close:before {
+  content: "\2716";
+}
+
+#graphChartContainer {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  z-index: 0;
+}
+
+#loadingContainer {
+  position: fixed;
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: 100%;
+  z-index: 100;
+  /* background-color: red; */
+}
+
+.loadingElement {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 100px;
+  height: 100px;
+  text-align: center;
+}
+.loadingSprite {
+  margin: 0 auto;
+  width: 40px;
+  height: 40px;
+  background: url("./loading.gif") center no-repeat;
+  background-size: contain;
+}
+
+.loadingTip {
+  font-size: 18px;
+  font-weight: bold;
+  text-align: center;
+}
+
+.njg-tooltip {
+  background: rgba(251, 251, 251, 0.9) !important;
+  border: none !important;
+}