tsviewer 0.1.0

package/src/components/TSScrubber.vue

@@ -0,0 +1,420 @@
+<template>
+    <div class="timeseries-scrubber">
+        <div class="dateWrap">
+            <div>{{ ts_start_str }}</div>
+            <div>{{ fullDateStr }}</div>
+            <div>{{ ts_end_str }}</div>
+        </div>
+        <div class="noselect">
+            <div id="scrubber" noselect>
+                <div id="canvasWrap" ref="canvasWrap">
+                    <canvas id="segmentsCanvas" class="canvas" ref="segmentsCanvas"
+                        :width="_cpCanvasScaler(cWidth, pixelRatio,0)"
+                        :height="_cpCanvasScaler(viewportHeight-2, pixelRatio,0)"
+                        :style="canvasStyle"></canvas>
+                    <canvas id="annotationCanvas" class="canvas" ref="annotationCanvas"
+                        :width="_cpCanvasScaler(cWidth, pixelRatio, 0)"
+                        :height="_cpCanvasScaler(viewportHeight-2, pixelRatio,0)"
+                        :style="canvasStyle"></canvas>
+                    <canvas id="iCanvas" class="canvas" ref="iCanvas" :width="_cpCanvasScaler(cWidth, pixelRatio, 0)" :height="_cpCanvasScaler(viewportHeight, pixelRatio,0)"
+                        @click="_onTap"
+                        v-on:mousemove="_onMouseMove"
+                        v-on:mousedown="_onMouseDown"
+                        v-on:mouseup="_onMouseUp"
+                        v-on:mouseenter="_onMouseEnter"
+                        v-on:mouseout="_onMouseOut"
+                        :style="iCanvasStyle"></canvas>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import { map } from 'ramda'
+    import ViewerActiveTool from '@/mixins/viewer-active-tool'
+    import Request from '@/mixins/request'
+    export default {
+        name: 'TimeseriesScrubber',
+        mixins: [
+            Request,
+            ViewerActiveTool
+        ],
+        props: {
+            ts_start: Number,
+            ts_end: Number,
+            cWidth: Number,
+            constants: Object,
+            start: Number,
+            duration: Number,
+            cursorLoc:Number,
+            labelWidth:Number
+        },
+        computed: {
+            activeViewer: function() {
+              return this.$store.getters.activeViewer
+            },
+            viewerChannels: function() {
+              return this.$store.getters.viewerChannels
+            },
+            viewerAnnotations: function() {
+              return this.$store.getters.viewerAnnotations
+            },
+            ts_start_str: function() {
+                return this.getUTCTimeString(this.ts_start)
+            },
+            ts_end_str: function() {
+                return this.getUTCTimeString(this.ts_end)
+            },
+            fullDateStr: function(){
+                if (this.hoverTxt !== '') {
+                    return this.hoverTxt;
+                } else if(this.start > 0) {
+                    const d = new Date(this.start/1000).toUTCString();
+                    return d.substring(0, d.length - 3);
+                }
+                return ''
+            },
+            canvasStyle: function() {
+                return {
+                    width: this.labelWidth + this.cWidth - 8 + 5 +'px',
+                    height: '28px'
+                }
+            },
+            iCanvasStyle: function() {
+                return {
+                    width: this.labelWidth + this.cWidth - 8 + 5 +'px',
+                    height: '30px'
+                }
+            },
+            scrubberCWidth: function() {
+                return this.cWidth + this.labelWidth - 8 + 5
+            },
+            period: function() {
+                return Math.floor((this.ts_end - this.ts_start) / this.cWidth)
+            }
+        },
+        watch: {
+            start: function() {
+                this.render()
+            },
+            duration: function() {
+                this.render()
+            },
+            cWidth: function() {
+                this.render()
+            }
+        },
+        data: function () {
+            return {
+                pixelRatio: 1,
+                scrubberHeight: 28,
+                viewportHeight: 30,
+                mouseDown: false,
+                hoverTxt:'',
+                pointerMode: 'point',
+                patternCnvs: null,
+                annotations: [],
+                segmentSpans: [],
+                segments:[]
+            }
+        },
+        mounted: function () {
+            this.segments = new Array(5000);
+            this.segments = this.segments.fill(0, 0, 4999);
+            this.pixelRatio = this.getScreenPixelRatio()
+            this.patternCnvs = this.createPinstripeCanvas()
+            this.renderViewPort()
+        },
+        methods: {
+            _cpCanvasScaler: function(sz, pixelRatio, offset) {
+                return pixelRatio * (sz + offset);
+            },
+            getScreenPixelRatio: function() {
+                let ctx = this.$refs.iCanvas.getContext('2d');
+                let dpr = window.devicePixelRatio || 1
+                let bsr = ctx.webkitBackingStorePixelRatio ||
+                ctx.mozBackingStorePixelRatio ||
+                ctx.msBackingStorePixelRatio ||
+                ctx.oBackingStorePixelRatio ||
+                ctx.backingStorePixelRatio || 1;
+                return dpr / bsr;
+            },
+            getUTCTimeString: function(d) {
+                if(d > 0) {
+                    d = d / 1000;
+                    d = new Date(d);
+                    return ( ('0' + d.getUTCHours()).slice(-2) + ':' +
+                        ('0' + d.getUTCMinutes()).slice(-2) + ':' + ('0' + d.getUTCSeconds()).slice(-2) );
+                }
+            },
+            getUTCDateString: function(d, s) {
+                if (s !== '') {
+                    return s;
+                } else if(d > 0) {
+                    d = new Date(d/1000);
+                    return ( d.toDateString() );
+                }
+            },
+            // ------- Mouse Interactions -------
+            _onTap: function(e) {
+                const cCoord = this.$refs.iCanvas.getBoundingClientRect();
+                const cClickOffset = e.clientX - cCoord.left;
+                const realStart = ( cClickOffset/this.scrubberCWidth ) * (this.ts_end - this.ts_start );
+                this.$emit('setStart', realStart + this.ts_start)
+            },
+            _onMouseMove: function(e) {
+                if (!this.mouseDown) {
+                    const cCoord = this.$refs.iCanvas.getBoundingClientRect();
+                    const cHoverOffset = e.clientX - cCoord.left;
+                    const cEnd = this.cStart + this.cDuration;
+                    const oldMode = this.pointerMode;
+                    const inResizeArea = cHoverOffset > this.cStart - 10 && cHoverOffset < cEnd + 10;
+                    if (inResizeArea) {
+                        this.pointerMode = 'drag';
+                        this.$refs.iCanvas.setAttribute('dragme', true);
+                        this.$refs.iCanvas.removeAttribute('resizeme');
+                    } else {
+                        this.pointerMode = 'point';
+                        this.$refs.iCanvas.removeAttribute('dragme');
+                        this.$refs.iCanvas.removeAttribute('resizeme');
+                    }
+                    //update hoverTxt
+                    const realStart = ( (cHoverOffset)/this.cWidth ) * (this.ts_end - this.ts_start ) + this.ts_start;
+                    const d = new Date(realStart/1000).toUTCString();
+                    this.hoverTxt = d.substring(0, d.length - 3);
+                    if (oldMode !== this.pointerMode) {
+                        this.render();
+                    }
+                } else {
+                    // is Dragging
+                    const _dx = e.clientX - this.clickX
+                    const realStart = ( (_dx)/this.cWidth ) * (this.ts_end - this.ts_start );
+                    const setStart = this.startDragTime + realStart;
+                    this.$emit('setStart', setStart)
+                    const d = new Date((realStart+ this.ts_start)/1000);
+                    this.hoverTxt = d.toUTCString();
+                }
+            },
+            _onMouseUp: function() {
+                this.mouseDown = false;
+            },
+            _onMouseDown: function(e) {
+                this.mouseDown = true;
+                this.clickX = e.clientX
+                this.startDragTime = this.start;
+            },
+            _onMouseEnter: function() {
+                this.mouseDown = false;
+            },
+            _onMouseOut: function() {
+                this.hoverTxt = '';
+            },
+                        // -------
+            // ------- Annotation Functions -------
+            initSegmentSpans: function() {
+                // GET SEGMENTS AND GAPS
+                /*let fetchSpan = Math.min(this.constants['SEGMENTSPAN'], (this.ts_end - this.ts_start));
+                for (let i=0; i<this.viewerChannels.length; i++) {
+                    this._requestSegmentSpan(this.viewerChannels[i].id,
+                    i, this.ts_start, (this.ts_start + fetchSpan), 0)
+                }*/
+            },
+            getAnnotations: function() {
+                const layerIds = map(obj => obj.id, this.viewerAnnotations);
+                const baseUrl = `${this.config.apiUrl}/timeseries/${this.activeViewer.content.id}/annotations/window`;
+                var url = baseUrl + `?api_key=${this.$store.state.userToken}&aggregation=count&start=${this.ts_start}&end=${this.ts_end}&period=${this.period}&mergePeriods=true`
+                for (let i in layerIds) {
+                    url = url + `&layerIds=${layerIds[i]}`
+                }
+                this.sendXhr(url)
+                .then(resp => {
+                    console.log(resp)
+                    this.annotations = resp;
+                    this.render();
+                })
+            },
+            // -------
+            // ------- Render Functions -------
+            render: function() {
+                this.renderViewPort();
+                this.renderTimelimeLine();
+                this.renderSegments();
+            },
+            renderViewPort: function() {
+                this.$nextTick(() => {
+                    const ctx = this.$refs.iCanvas.getContext('2d');
+                    ctx.setTransform(this.pixelRatio, 0, 0, this.pixelRatio, 0, 0);
+                    ctx.clearRect(0, 0, this.cWidth, this.viewportHeight);
+                    this.cStart = ( (((this.start - this.ts_start)/(this.ts_end-this.ts_start)) * this.cWidth ) + 0.5) |0;
+                    this.cDuration = ((((this.duration)/(this.ts_end-this.ts_start)) * this.cWidth) +0.5) |0;
+                    // Viewport
+                    ctx.fillStyle = 'rgb(80,80,80)';
+                    ctx.strokeStyle= 'rgb(80,80,80)';
+                    ctx.strokeRect(this.cStart +0.5, 0.5, this.cDuration, this.viewportHeight-1);
+                    ctx.fillRect(this.cStart - 2, (this.viewportHeight/2 - 5) | 0, 2, 10);
+                    ctx.fillRect(this.cStart + this.cDuration + 1, (this.viewportHeight/2 - 5) | 0, 2, 10);
+                    // // Cursor
+                    const cursorCLoc = this.cStart + (this.cursorLoc*this.cDuration);
+                    if( cursorCLoc > (this.cStart +0.5) ) {
+                        ctx.strokeStyle = 'red';
+                        ctx.beginPath();
+                        ctx.moveTo(cursorCLoc, 0);
+                        ctx.lineTo(cursorCLoc, this.viewportHeight-1)
+                        ctx.stroke();
+                    }
+                })
+            },
+            renderSegments: function() {
+              this.$nextTick(() => {
+                const ctx = this.$refs.segmentsCanvas.getContext('2d');
+                ctx.setTransform(this.pixelRatio, 0, 0, this.pixelRatio, 0, 0);
+                ctx.fillStyle = ctx.createPattern(this.patternCnvs, 'repeat');
+                ctx.clearRect(0, 0, this.cWidth, this.viewportHeight);
+                for (let i = 1; i < this.segmentSpans.length; i += 2) {
+                  const xStart = (this.cWidth * this.segmentSpans[i]) / 5000;
+                  const xEnd = (this.cWidth * this.segmentSpans[i + 1]) / 5000;
+                  ctx.fillRect(xStart, 2, xEnd - xStart, this.viewportHeight - 6)
+                }
+              })
+            },
+            renderTimelimeLine: function() {
+                const ctx = this.$refs.annotationCanvas.getContext('2d');
+                ctx.setTransform(this.pixelRatio, 0, 0, this.pixelRatio, 0, 0);
+                ctx.clearRect(0, 0, this.cWidth, this.scrubberHeight);
+                const xStart = this.ts_start;
+                const xEnd = this.ts_end;
+                const annotationLayers = this.annotations;
+                let annotationIndex = 0;
+                const layerSpacing = 0;
+                const layerHeight = Math.floor(((this.scrubberHeight-2) / Object.keys(annotationLayers).length - layerSpacing));
+                const annPanelLayers = this.viewerAnnotations;
+                let color = 'rgb(0,0,0)';
+                for ( const annotation in annotationLayers ) {
+                  // eslint-disable-next-line
+                  if (annotationLayers.hasOwnProperty(annotation)) {
+                  // find color
+                  for (let i=0; i<annPanelLayers.length; i++) {
+                    if (annPanelLayers[i].id === parseInt(annotation)) {
+                    annotationIndex = i;
+                    color = annPanelLayers[i].color;
+                    break;
+                    }
+                  }
+                  this.plotAnnotations(ctx, xStart, xEnd, layerSpacing, layerHeight, annotationLayers[annotation], annotationIndex, color);
+                  }
+                }
+            },
+            plotAnnotations: function(ctx, xStart, xEnd, layerSpacing, layerHeight, annotations, rank, color) {
+              this.$nextTick(() => {
+                ctx.setTransform(this.pixelRatio, 0, 0, this.pixelRatio, 0, 0);
+                ctx.fillStyle = color;
+                for (let i = 0; i < annotations.length; i++) {
+                  if (annotations[i].value > 0) {
+                    const xPosStart = ((annotations[i].start - xStart) / (xEnd - xStart)) * this.cWidth;
+                    const xPosEnd = ((annotations[i].end - xStart) / (xEnd - xStart)) * this.cWidth;
+                    let cw = xPosEnd - xPosStart;
+                    if (cw < 1) {
+                      cw = 1;
+                    }
+                    const yPos = 1 + rank * ((layerHeight - 1) + layerSpacing) + rank;
+                    ctx.fillRect(xPosStart, yPos, cw, layerHeight);
+                  }
+                }
+              })
+            },
+            /** Creates a canvas filled with a 45-degree pinstripe.
+            * @returns the filled HTMLCanvasElement. */
+            createPinstripeCanvas: function() {
+                const patternCanvas = document.createElement('canvas');
+                const pctx = patternCanvas.getContext('2d', { antialias: true });
+                const colour = 'rgb(220,220,220)';
+                const CANVAS_SIDE_LENGTH = 5;
+                const WIDTH = CANVAS_SIDE_LENGTH;
+                const HEIGHT = CANVAS_SIDE_LENGTH;
+                const DIVISIONS = 10;
+                patternCanvas.width = WIDTH;
+                patternCanvas.height = HEIGHT;
+                pctx.fillStyle = colour;
+                // Top line
+                pctx.beginPath();
+                pctx.moveTo(0, HEIGHT * (1 / DIVISIONS));
+                pctx.lineTo(WIDTH * (1 / DIVISIONS), 0);
+                pctx.lineTo(0, 0);
+                pctx.lineTo(0, HEIGHT * (1 / DIVISIONS));
+                pctx.fill();
+                // Middle line
+                pctx.beginPath();
+                pctx.moveTo(WIDTH, HEIGHT * (1 / DIVISIONS));
+                pctx.lineTo(WIDTH * (1 / DIVISIONS), HEIGHT);
+                pctx.lineTo(0, HEIGHT);
+                pctx.lineTo(0, HEIGHT * ((DIVISIONS - 1) / DIVISIONS));
+                pctx.lineTo(WIDTH * ((DIVISIONS - 1) / DIVISIONS), 0);
+                pctx.lineTo(WIDTH, 0);
+                pctx.lineTo(WIDTH, HEIGHT * (1 / DIVISIONS));
+                pctx.fill();
+                // Bottom line
+                pctx.beginPath();
+                pctx.moveTo(WIDTH, HEIGHT * ((DIVISIONS - 1) / DIVISIONS));
+                pctx.lineTo(WIDTH * ((DIVISIONS - 1) / DIVISIONS), HEIGHT);
+                pctx.lineTo(WIDTH, HEIGHT);
+                pctx.lineTo(WIDTH, HEIGHT * ((DIVISIONS - 1) / DIVISIONS));
+                pctx.fill();
+                return patternCanvas;
+            },
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    .timeseries-scrubber {
+        //background: $white;
+        padding: 0px 8px 8px 8px;
+    }
+    .dateWrap {
+        padding: 8px 0;
+        font-size: 12px;
+        text-transform: uppercase;
+        color: #71747C;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+    }
+    #scrubber {
+        background: white;
+        box-shadow: 0 0 0px 1px #c5c5c5 inset;
+        box-sizing: border-box;
+        position: relative;
+        display: flex;
+    }
+    #canvasWrap {
+        height: 30px;
+        position: relative;
+    }
+    .noselect {
+        -webkit-touch-callout: none; /* iOS Safari */
+        -webkit-user-select: none;   /* Chrome/Safari/Opera */
+        -khtml-user-select: none;    /* Konqueror */
+        -moz-user-select: none;      /* Firefox */
+        -ms-user-select: none;       /* Internet Explorer/Edge */
+        user-select: none;           /* Non-prefixed version, currently not supported by any browser */
+    }
+    .canvas {
+        position: absolute;
+        top: 0;
+        left: 0;
+        cursor: pointer;
+    }
+    .canvas[dragme] {
+        cursor: move;
+    }
+    .canvas[resizeme] {
+        cursor: ew-resize;
+    }
+    #annotationCanvas {
+        margin-top: 1px;
+    }
+    #iCanvas {
+        margin-left: 0px
+    }
+</style>