gridviz 2.0.50 → 2.0.52

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "gridviz",
-    "version": "2.0.50",
+    "version": "2.0.52",
     "description": "Visualization tool for gridded statistics",
     "keywords": [
         "statistics",

package/src/App.js

@@ -111,7 +111,7 @@ export class App {
                 if (strong) dsc.updateViewCache(this.cg.extGeo)
 
                 //set layer alpha and blend mode
-                this.cg.ctx.globalAlpha = layer.alpha? layer.alpha(zf) : 1.0
+                this.cg.ctx.globalAlpha = layer.alpha ? layer.alpha(zf) : 1.0
                 this.cg.ctx.globalCompositeOperation = layer.blendOperation(zf)
 
                 //draw cells, style by style
@@ -124,14 +124,14 @@ export class App {
 
                         //set style alpha and blend mode
                         //TODO: multiply by layer alpha ?
-                        this.cg.ctx.globalAlpha = s.alpha? s.alpha(zf) : 1.0
+                        this.cg.ctx.globalAlpha = s.alpha ? s.alpha(zf) : 1.0
                         this.cg.ctx.globalCompositeOperation = s.blendOperation(zf)
-        
+
                         s.draw(dsc.getViewCache(), dsc.getResolution(), this.cg)
                     }
 
                 //add legend element
-                if (this.legend && strong)
+                if (this.legend && strong) {
                     for (const s of layer.styles) {
                         if (zf > s.maxZoom) continue
                         if (zf < s.minZoom) continue
@@ -157,6 +157,11 @@ export class App {
                             }
                         }
                     }
+                }
+
+                //restore default alpha and blend operation
+                this.cg.ctx.globalAlpha = 1.0
+                this.cg.ctx.globalCompositeOperation = "normal"
             }
 
             //draw boundary layer

package/src/style/TimeSeriesStyle.js

@@ -21,6 +21,10 @@ export class TimeSeriesStyle extends Style {
          * @type {Array.<string>} */
         this.ts = opts.ts
 
+        /** A function specifying when a value should be considered as "no data" and thus not ignored. The line will have a break at these values.
+         * @type {function(string):boolean} */
+        this.noData = opts.noData || ((v) => v === undefined || v == "" || v === null || isNaN(+v))
+
         //x
         /** in geo unit
          * @type {function(import("../Dataset.js").Cell,number,number):number} */
@@ -112,7 +116,7 @@ export class TimeSeriesStyle extends Style {
         //in geo coordinates
         cg.setCanvasTransform()
 
-        cg.ctx.lineCap = 'butt'
+        cg.ctx.lineCap = "butt"
         for (let c of cells) {
 
             //line width
@@ -185,23 +189,62 @@ export class TimeSeriesStyle extends Style {
                 continue;
             }
 
+            /*/draw line
             if (val0 == undefined || isNaN(val0)) continue
-
-            //draw line
             cg.ctx.beginPath()
             const sX = w / (nb - 1)
             for (let i = 0; i < nb; i++) {
                 const val = c[this.ts[i]]
-                if (val == undefined) break
+                if (val == undefined || isNaN(val)) break
                 if (i == 0)
                     cg.ctx.moveTo(c.x + i * sX + offX, c.y + y0 + (val - val0) * h / ampMax + offY)
                 else
                     cg.ctx.lineTo(c.x + i * sX + offX, c.y + y0 + (val - val0) * h / ampMax + offY)
             }
+            cg.ctx.stroke()*/
+
+
+            //draw line, segment by segment
+            const sX = w / (nb - 1)
+
+            //handle first point
+            let v0 = c[this.ts[0]]
+            if (!this.noData(v0)) {
+                cg.ctx.beginPath()
+                cg.ctx.moveTo(c.x + offX, c.y + y0 + (v0 - val0) * h / ampMax + offY)
+            }
+            //console.log(v0, isNaN(v0))
+
+            let v1
+            for (let i = 1; i < nb; i++) {
+                v1 = c[this.ts[i]]
 
-            cg.ctx.stroke()
+                //draw segment from v0 to v1
+
+                //both points 'no data'
+                if (this.noData(v0) && this.noData(v1)) {
+
+                    //second point 'no data'
+                } else if (!this.noData(v0) && this.noData(v1)) {
+                    cg.ctx.stroke()
+
+                    //first point 'no data'
+                } else if (this.noData(v0) && !this.noData(v1)) {
+                    cg.ctx.beginPath()
+                    cg.ctx.moveTo(c.x + i * sX + offX, c.y + y0 + (v1 - val0) * h / ampMax + offY)
+
+                    //both points have data: trace line
+                } else {
+                    cg.ctx.lineTo(c.x + i * sX + offX, c.y + y0 + (v1 - val0) * h / ampMax + offY)
+                    //if it is the last point, stroke
+                    if (i == nb - 1) cg.ctx.stroke()
+                }
+                v0 = v1
+            }
 
         }
 
     }
+
 }
+