summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAshymad <czilukim@o2.pl>2018-05-16 22:23:59 +0200
committerAshymad <czilukim@o2.pl>2018-05-16 22:23:59 +0200
commit85451495236596b9a3cb701ea957fa0488c9ecac (patch)
treef869b91eaeb757642c6ce3b8eb50c66484764ffa
parent20510c4f85c441d07bf9b8ba2c962f6c92fc7163 (diff)
Slider for changing zoom level.
-rw-r--r--static/package-lock.json31
-rw-r--r--static/package.json3
-rw-r--r--static/src/index.html1
-rw-r--r--static/src/index.js33
4 files changed, 61 insertions, 7 deletions
diff --git a/static/package-lock.json b/static/package-lock.json
index 2b6c9f9..da063d0 100644
--- a/static/package-lock.json
+++ b/static/package-lock.json
@@ -2777,6 +2777,37 @@
"d3-path": "1"
}
},
+ "d3-simple-slider": {
+ "version": "0.2.1",
+ "resolved": "https://registry.npmjs.org/d3-simple-slider/-/d3-simple-slider-0.2.1.tgz",
+ "integrity": "sha512-ZnWLauEEjl6m1eOUrXw5RXwJK4ZzgMRQDjH6KWEM63piYvqHHk8db6W3dfB0y8CUX5nQcSIBZ4209I6ZFihW0w==",
+ "requires": {
+ "d3-array": "^1.2.1",
+ "d3-axis": "^1.0.8",
+ "d3-brush": "^1.0.4",
+ "d3-dispatch": "^1.0.3",
+ "d3-drag": "^1.2.1",
+ "d3-ease": "^1.0.3",
+ "d3-scale": "^1.0.6",
+ "d3-selection": "^1.1.0"
+ },
+ "dependencies": {
+ "d3-scale": {
+ "version": "1.0.7",
+ "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-1.0.7.tgz",
+ "integrity": "sha512-KvU92czp2/qse5tUfGms6Kjig0AhHOwkzXG0+PqIJB3ke0WUv088AHMZI0OssO9NCkXt4RP8yju9rpH8aGB7Lw==",
+ "requires": {
+ "d3-array": "^1.2.0",
+ "d3-collection": "1",
+ "d3-color": "1",
+ "d3-format": "1",
+ "d3-interpolate": "1",
+ "d3-time": "1",
+ "d3-time-format": "2"
+ }
+ }
+ }
+ },
"d3-time": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/d3-time/-/d3-time-1.0.8.tgz",
diff --git a/static/package.json b/static/package.json
index a909fe0..8f409af 100644
--- a/static/package.json
+++ b/static/package.json
@@ -11,7 +11,8 @@
"license": "Apache-2.0",
"dependencies": {
"@stomp/stompjs": "^4.0.3",
- "d3": "^5.4.0"
+ "d3": "^5.4.0",
+ "d3-simple-slider": "^0.2.1"
},
"devDependencies": {
"babel-core": "^6.26.3",
diff --git a/static/src/index.html b/static/src/index.html
index 4a48be3..6fdeb6a 100644
--- a/static/src/index.html
+++ b/static/src/index.html
@@ -6,6 +6,7 @@
</head>
<body>
<div id="title">Connecting...</div>
+ <div id="slider"></div>
<div class="graph"></div>
</body>
</html>
diff --git a/static/src/index.js b/static/src/index.js
index a48158d..7df6f28 100644
--- a/static/src/index.js
+++ b/static/src/index.js
@@ -1,9 +1,10 @@
import * as d3 from 'd3';
+import * as d3s from 'd3-simple-slider';
import * as Stomp from '@stomp/stompjs';
import style from './index.css';
-var beAPI = `${window.location.protocol}//${window.location.host}/api/`
+const beAPI = `${window.location.protocol}//${window.location.host}/api/`
var client;
var subscription;
@@ -24,7 +25,7 @@ d3.json(`${beAPI}stomp`)
function on_connect() {
d3.json(`${beAPI}binding/${Math.floor(Math.random()*1000000000)}`, {
'method': 'PUT',
- 'body': JSON.stringify({'routing_key': 'pc.11373331246'}),
+ 'body': JSON.stringify({'routing_key': 'pc.251756432899072'}),
'headers': {'content-type': 'application/json'}})
.then((res) => {
subscription = client
@@ -47,13 +48,14 @@ function on_message(message) {
}
}
-
const limit = 60 * 5,
duration = 50
var now = new Date(Date.now() - duration)
-var width = window.innerWidth - 10,
- height = window.innerHeight/2
+var width = window.innerWidth - 20,
+ height = window.innerHeight - 50
+
+const domain = 2
var groups = {
x: {
@@ -84,7 +86,7 @@ var x = d3.scaleTime()
.range([0, width])
var y = d3.scaleLinear()
- .domain([-2, 2])
+ .domain([-domain, domain])
.range([0, height])
var line = d3.line()
@@ -135,3 +137,22 @@ function tick(data) {
group.data.shift()
}
}
+
+var slider = d3s.sliderHorizontal()
+ .min(0.1)
+ .max(2)
+ .step(0.1)
+ .default(domain)
+ .width(width/2)
+ .displayValue(false)
+ .on('onchange', val => {
+ y.domain([-val, val])
+ });
+
+d3.select("#slider").append("svg")
+ .attr("width", width)
+ .attr("height", 100)
+ .append("g")
+ .attr("transform", "translate(30,30)")
+ .call(slider);
+