Ntopng webhook + Globe.gl + data filter

2022-02-01 13:56:49 +01:00
parent 414b2d8e69
commit 1b523cf458
14 changed files with 2662 additions and 0 deletions
--- a/public/globe.html
+++ b/public/globe.html
@ -0,0 +1,60 @@
+<head>
+  <style> body { margin: 0; } </style>
+
+  <script src="//unpkg.com/react/umd/react.production.min.js"></script>
+  <script src="//unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
+  <script src="//unpkg.com/babel-standalone"></script>
+
+  <script src="//unpkg.com/react-globe.gl"></script>
+  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+</head>
+
+<body>
+<div id="globeViz"></div>
+
+<script type="text/jsx">
+  // Gen random data
+  var data = {};
+  axios.get("http://localhost:3100/alerts").then(res => {
+    data = res.data;
+    console.log(data)
+    ReactDOM.render(
+    <Globe
+      globeImageUrl="//unpkg.com/three-globe/example/img/earth-night.jpg"
+      backgroundImageUrl="//unpkg.com/three-globe/example/img/night-sky.png"
+      // edges
+      arcsData={data.arc}
+      arcColor={(d) => [d.color[0], d.color[1]]}
+      arcDashLength={(d) => d.stroke - 0.1 + 0.3}
+      // arcDashLength={(d) => d.stroke - 0.1}
+      arcDashGap={(d) => 0.1 + (1 - (d.stroke - 0.1))}
+      arcDashAnimateTime={(d) => (1.1 - d.stroke) * 5000 + 2000}
+      arcStroke={"stroke"}
+      //arcCircularResolution={64}
+      // arcLabel={() => "test"}
+      // labels
+      labelsData={data.loc}
+      labelLat={(d) => d.lat}
+      labelLng={(d) => d.lng}
+      labelText={(d) => d.name}
+      labelSize={(d) => 0.5 + d.size}
+      labelDotRadius={(d) => 0.5 + d.size}
+      labelColor={(d) => d.color}
+      labelResolution={2}
+      // bars
+      hexBinPointsData={data.loc}
+      hexBinPointWeight="size"
+      //hexAltitude={(d) => d.sumWeight / 4}
+      hexBinResolution={4}
+      hexTopColor={(d) => d.color}
+      hexSideColor={(d) => d.color}
+      hexBinMerge={true}
+      enablePointerInteraction={false}
+      />,
+    document.getElementById('globeViz')
+  );
+  }).catch(err => alert(err)) 
+
+  
+</script>
+</body>