click on time line #187 4

iDataVisualizationLab · Jul 9, 2020 · 4bc504d · 4bc504d
1 parent a552779
commit 4bc504d
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 4 deletions.
diff --git a/JobCircularLayout/index.html b/JobCircularLayout/index.html
@@ -7,6 +7,7 @@
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
     <link rel="stylesheet" href="src/style/main.css">
     <link rel="stylesheet" href="src/style/graph.css">
+    <link rel="stylesheet" href="src/style/timeline.css">
     <link rel="stylesheet" href="src/style/nouislider.css">
 
     <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

diff --git a/JobCircularLayout/src/js/main.js b/JobCircularLayout/src/js/main.js
@@ -44,12 +44,14 @@ function initTimeElement(){
     timelineControl = new Timeline('#timelineControl');
     timelineControl.callbackPlay = request.start.bind(request);
     timelineControl.callbackPause = request.pause.bind(request);
+    timelineControl.step = _.partial(request.request.bind(request),0);
     request.callbackStop = timelineControl.pause.bind(timelineControl);
 
     request.onDataChange.push(timelineControl.domain.bind(timelineControl));
     request.onUpdateTime.push(timelineControl.update.bind(timelineControl));
 
     if (request.isRealTime) {
+        timelineControl.disableHandle(true);
         request.onStartQuery=()=>timelineControl.meassage.text('query data....');
         request.onFinishQuery.push((d)=>(timelineControl.meassage.text(''),d));
         request.setInterval(120000);

diff --git a/JobCircularLayout/src/js/simulation.js b/JobCircularLayout/src/js/simulation.js
@@ -25,7 +25,12 @@ class Simulation {
 
         }
     }
-    request(){
+    request(timesexlapse,index){
+        if(index!=undefined && this.#data)
+            if (_.isDate(index))
+                this.#index = d3.bisect(this.#data.time_stamp,index)
+            else
+                this.#index = index;
         if (this.isRealTime || (!this.isRealTime&&this.#data===undefined)||(this.#index<this.#data.time_stamp.length)) {
             let updatePromise;
             let self = this;

diff --git a/JobCircularLayout/src/js/timeline.js b/JobCircularLayout/src/js/timeline.js
@@ -3,7 +3,9 @@ class Timeline{
     playbutton;
     timelineHolder;
     timeline;
+    timelineHandler;
     meassage;
+    step = ()=>{};
     timeConf={scale:d3.scaleTime().range([0,100])};
     #play=()=>{
         const self = this;
@@ -47,18 +49,51 @@ class Timeline{
         this.playbutton.call(self.playbutton_icon);
 
         this.timelineHolder = this.el.append('div')
-            .attr('class',"progress align-self-center")
+            .attr('class','progress-bar-wrapper align-self-center')
             .style("width", "80%");
         this.timeline = this.timelineHolder.append('div')
+            .attr('class',"progress")
+            .style("width", "100%")
+            .on('click',onClickTimeline)
+            .append('div')
             .attr('class','progress-bar')
             .attr('role',"progressbar")
             .attr('aria-valuenow',"0")
             .attr('aria-valuemin',"0")
             .attr('aria-valuemax',"100");
+        this.timelineHandler = this.timelineHolder
+            .append('div').attr('class','progress-bar-handle align-self-center');
         this.meassage = this.el.append('div')
             .attr('class','message')
             .style("width", "calc(20% - 80px)")
             .append('span');
+
+        this.timelineHandler.call(d3.drag()
+            .on("start", dragstarted)
+            .on("drag", dragged)
+            .on("end", dragended));
+
+        function dragstarted(d) {
+            self.pause();
+        }
+
+        function dragged(d) {
+            // d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);
+        }
+
+        function dragended(d) {
+            // d3.select(this).attr("stroke", null);
+        }
+
+        function onClickTimeline(){
+            self.pause();
+            const mouse = d3.mouse(this);
+            const value = mouse[0]/this.getBoundingClientRect().width*100;
+            self.step(self.timeConf.scale.invert(value));
+        }
+    }
+    disableHandle(isdisable){
+        this.timelineHolder.classed('disabled',isdisable)
     }
     play(){
 
@@ -87,10 +122,12 @@ class Timeline{
             this.currentValue = value;
         else
             this.currentValue = new Date(value);
+        const percentage = this.timeConf.scale(this.currentValue)
         this.timeline
-            .style("width", `${this.timeConf.scale(this.currentValue)}%`)
+            .style("width", `${percentage}%`)
             .attr('aria-valuenow',this.timeConf.scale(this.currentValue))
-            .text(this.currentValue.toLocaleString())
+            .text(this.currentValue.toLocaleString());
+        this.timelineHandler.style('left',`${percentage}%`)
     }
 
 }
diff --git a/JobCircularLayout/src/style/timeline.css b/JobCircularLayout/src/style/timeline.css
@@ -0,0 +1,20 @@
+.progress-bar-wrapper{
+    position: relative;
+}
+.progress-bar-wrapper.disabled{
+    pointer-events: none;
+}
+.progress-bar-wrapper:hover .progress-bar-handle{
+    opacity: 1;
+}
+.progress-bar-handle {
+    position: absolute;
+    top: -0.1rem;
+    width: 1.2rem;
+    height: 1.2rem;
+    background-color: var(--primary);
+    border-radius: 0.6rem;
+    transform: translateX(-50%);
+    transition: left .6s ease;
+    opacity: 0;
+}