Better map visualizations & default dashboard

Author: nielsdejong

src/card/report/NeoGraphVisReport.js

@@ -147,7 +147,7 @@ class NeoGraphVisReport extends NeoReport {
         nodesMap["" + value['identity']['low']] = {
             id: value['identity']['low'],
             fill: 'seagreen',
-            stroke: "#969696",
+            stroke: "#555",
             radius: 25,
             properties: value['properties'],
             labels: value['labels']
@@ -199,7 +199,7 @@ class NeoGraphVisReport extends NeoReport {
             nodesMap["" + value['start']['low']] = {
                 id: value['start']['low'],
                 fill: 'seagreen',
-                stroke: "#969696",
+                stroke: "#555",
                 radius: 25,
                 properties: [],
                 labels: []
@@ -209,7 +209,7 @@ class NeoGraphVisReport extends NeoReport {
             nodesMap["" + value['end']['low']] = {
                 id: value['end']['low'],
                 fill: 'seagreen',
-                stroke: "#969696",
+                stroke: "#555",
                 radius: 25,
                 properties: [],
                 labels: []

src/card/report/NeoMapReport.js

@@ -1,7 +1,8 @@
 import React from "react";
 import NeoReport from "./NeoReport";
-import {MapContainer, Marker, Popup, TileLayer} from "react-leaflet";
-import * as d3 from "d3";
+import {MapContainer, Polyline, Popup, TileLayer} from "react-leaflet";
+import Marker from 'react-leaflet-enhanced-marker';
+import Icon from "react-materialize/lib/Icon";
 
 class NeoTestReport extends NeoReport {
     constructor(props) {
@@ -18,21 +19,31 @@ class NeoTestReport extends NeoReport {
 
         this.state.width = this.props.clientWidth - 50; //-90 + props.width * 105 - xShift * 0.5;
         this.state.height = -145 + this.props.height * 100;
+        let colors = ["#588c7e", "#f2e394", "#f2ae72", "#d96459", "#5b9aa0", "#d6d4e0", "#b8a9c9", "#622569", "#ddd5af", "#d9ad7c", "#a2836e", "#674d3c", "grey"]
 
         if (width !== this.props.clientWidth - 50 || height !== -145 + this.props.height * 100){
-            const position = [51.505, -0.09]
+            const position = [51.4472055, 4.4601085]
+            let position2 = [51.4972055, 4.4801085];
             this.state.visualization =
                 <MapContainer key={0} style={{"width": this.state.width + "px", "height": this.state.height + "px"}} center={position} zoom={13}
                               scrollWheelZoom={false}>
                     <TileLayer
                         attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                         url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                     />
-                    <Marker position={position}>
+                    <Marker position={position} icon={<div  style={{color: colors[0]}}><Icon className="close">place</Icon></div>}>
                         <Popup>
-                            A pretty CSS3 popup. <br/> Easily customizable.
+                            A pretty CSS3 popup. <br/> Easily customizable. With a lot of text wooooooooooooooooh asdjadnas da sdas
                         </Popup>
                     </Marker>
+                    <Marker position={position2} icon={<div  style={{color: colors[0]}}><Icon className="close">place</Icon></div>}>
+                        <Popup>
+                            A pretty CSS3 popup. <br/> Easily customizable. With a lot of text wooooooooooooooooh asdjadnas da sdas
+                        </Popup>
+                    </Marker>
+                    <Polyline key={0} positions={[
+                        position, position2,
+                    ]} color={colors[0]} />
                 </MapContainer>;
             this.forceUpdate();
         }

src/data/default_dashboard.json

@@ -23,7 +23,7 @@
           "width": 4,
           "height": 4,
           "type": "graph",
-          "query": "CALL db.schema.visualization()",
+          "query": "MATCH (n)-[e]->(m) RETURN n,e,m LIMIT 20",
           "page": 2,
           "properties": [],
           "parameters": "",