199 lines
6.7 KiB
HTML
199 lines
6.7 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Memgraph Demo</title>
|
|
|
|
<link rel="stylesheet" href="demo.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
|
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
|
<link rel="stylesheet" href="cypher/codemirror.css">
|
|
<link rel="stylesheet" href="cypher/neo.css">
|
|
|
|
<link rel="stylesheet" href="https://cdn.rawgit.com/novus/nvd3/v1.8.1/build/nv.d3.css">
|
|
<link rel="stylesheet" href="demo.css">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!-- title row -->
|
|
<div class="row">
|
|
<div class="valign-wrapper">
|
|
<div class="input-field col s2">
|
|
<input value="localhost:7474" id="neo4j_url" type="text" class="validate">
|
|
<label id="neo4j_url" for="neo4j_url">hostname:port</label>
|
|
</div>
|
|
<div class="col s2">
|
|
<button id="run-neo4j"
|
|
class="btn waves-effect waves-light"
|
|
type="submit" name="action">
|
|
Start Neo4j
|
|
</button>
|
|
</div>
|
|
<h1 class="valign center col s4">Graph Benchmark</h1>
|
|
<div class="col s2">
|
|
<button id="run-memgraph" style="float:right;"
|
|
class="btn waves-effect waves-light right-align"
|
|
type="submit" name="action">
|
|
Start Memgraph
|
|
</button>
|
|
</div>
|
|
<div class="input-field col s2">
|
|
<input value="localhost:7475" id="memgraph_url" type="text" class="validate">
|
|
<label id="memgraph_url" for="memgraph_url">hostname:port</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- neo4j cards -->
|
|
<div class="row">
|
|
<div class="col s2">
|
|
<div id="q-0-0" class="card">
|
|
<div class="qps valign-wrapper">
|
|
<div class="col s6">
|
|
<h3 id="text" class="valign center w100">0</h3>
|
|
</div>
|
|
<div class="col s6">
|
|
<canvas id="gauge" width="150" height="60"
|
|
class="valign center"></canvas>
|
|
</div>
|
|
</div>
|
|
<textarea id="query">MATCH (n:Person) RETURN n</textarea>
|
|
</div>
|
|
<div id="q-0-1" class="card">
|
|
<div class="qps valign-wrapper">
|
|
<div class="col s6">
|
|
<h3 id="text" class="valign center w100">0</h3>
|
|
</div>
|
|
<div class="col s6">
|
|
<canvas id="gauge" width="150" height="60"
|
|
class="valign center"></canvas>
|
|
</div>
|
|
</div>
|
|
<textarea id="query">MATCH (n:Person) RETURN n</textarea>
|
|
</div>
|
|
<div id="q-0-2" class="card">
|
|
<div class="qps valign-wrapper">
|
|
<div class="col s6">
|
|
<h3 id="text" class="valign center w100">0</h3>
|
|
</div>
|
|
<div class="col s6">
|
|
<canvas id="gauge" width="150" height="60"
|
|
class="valign center"></canvas>
|
|
</div>
|
|
</div>
|
|
<textarea id="query">MATCH (n:Person) RETURN n</textarea>
|
|
</div>
|
|
<div id="q-0-3" class="card">
|
|
<div class="qps valign-wrapper">
|
|
<div class="col s6">
|
|
<h3 id="text" class="valign center w100">0</h3>
|
|
</div>
|
|
<div class="col s6">
|
|
<canvas id="gauge" width="150" height="60"
|
|
class="valign center"></canvas>
|
|
</div>
|
|
</div>
|
|
<textarea id="query">MATCH (n:Person) RETURN n</textarea>
|
|
</div>
|
|
<div id="q-0-4" class="card">
|
|
<div class="qps valign-wrapper">
|
|
<div class="col s6">
|
|
<h3 id="text" class="valign center w100">0</h3>
|
|
</div>
|
|
<div class="col s6">
|
|
<canvas id="gauge" width="150" height="60"
|
|
class="valign center"></canvas>
|
|
</div>
|
|
</div>
|
|
<textarea id="query">MATCH (n:Person) RETURN n</textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- the graph -->
|
|
<div class="col s8">
|
|
<div class="card">
|
|
<div class="card-content">
|
|
<div id="chart" style="height: 750px;">
|
|
<svg></svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- memgraph cards -->
|
|
<div class="col s2">
|
|
<div id="q-1-0" class="card">
|
|
<div class="qps valign-wrapper">
|
|
<div class="col s6">
|
|
<h3 id="text" class="valign center w100">0</h3>
|
|
</div>
|
|
<div class="col s6">
|
|
<canvas id="gauge" width="150" height="60"
|
|
class="valign center"></canvas>
|
|
</div>
|
|
</div>
|
|
<textarea id="query">MATCH (n:Person) RETURN n</textarea>
|
|
</div>
|
|
<div id="q-1-1" class="card">
|
|
<div class="qps valign-wrapper">
|
|
<div class="col s6">
|
|
<h3 id="text" class="valign center w100">0</h3>
|
|
</div>
|
|
<div class="col s6">
|
|
<canvas id="gauge" width="150" height="60"
|
|
class="valign center"></canvas>
|
|
</div>
|
|
</div>
|
|
<textarea id="query">MATCH (n:Person) RETURN n</textarea>
|
|
</div>
|
|
<div id="q-1-2" class="card">
|
|
<div class="qps valign-wrapper">
|
|
<div class="col s6">
|
|
<h3 id="text" class="valign center w100">0</h3>
|
|
</div>
|
|
<div class="col s6">
|
|
<canvas id="gauge" width="150" height="60"
|
|
class="valign center"></canvas>
|
|
</div>
|
|
</div>
|
|
<textarea id="query">MATCH (n:Person) RETURN n</textarea>
|
|
</div>
|
|
<div id="q-1-3" class="card">
|
|
<div class="qps valign-wrapper">
|
|
<div class="col s6">
|
|
<h3 id="text" class="valign center w100">0</h3>
|
|
</div>
|
|
<div class="col s6">
|
|
<canvas id="gauge" width="150" height="60"
|
|
class="valign center"></canvas>
|
|
</div>
|
|
</div>
|
|
<textarea id="query">MATCH (n:Person) RETURN n</textarea>
|
|
</div>
|
|
<div id="q-1-4" class="card">
|
|
<div class="qps valign-wrapper">
|
|
<div class="col s6">
|
|
<h3 id="text" class="valign center w100">0</h3>
|
|
</div>
|
|
<div class="col s6">
|
|
<canvas id="gauge" width="150" height="60"
|
|
class="valign center"></canvas>
|
|
</div>
|
|
</div>
|
|
<textarea id="query">MATCH (n:Person) RETURN n</textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
|
|
<script type="text/javascript" src="http://bernii.github.io/gauge.js/dist/gauge.min.js"></script>
|
|
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
|
|
<script src="https://cdn.rawgit.com/novus/nvd3/v1.8.1/build/nv.d3.min.js"></script>
|
|
<script src="cypher/codemirror.js"></script>
|
|
<script src="cypher/cypher.js"></script>
|
|
<script src="demo.js"></script>
|
|
|
|
</body>
|