gridviz 2.0.47 → 2.0.49

package/package.json

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

package/src/App.js

@@ -110,11 +110,23 @@ export class App {
                 //update dataset view cache
                 if (strong) dsc.updateViewCache(this.cg.extGeo)
 
+                //set layer alpha and blend mode
+                this.cg.ctx.globalAlpha = layer.alpha === undefined ? 1 : layer.alpha
+                this.cg.ctx.globalCompositeOperation = layer.blendOperation
+
                 //draw cells, style by style
                 if (strong)
                     for (const s of layer.styles) {
+                        //check if style is visible
+                        if (!s.visible) continue
                         if (zf > s.maxZoom) continue
                         if (zf < s.minZoom) continue
+
+                        //set style alpha and blend mode
+                        //TODO: multiply by layer alpha ?
+                        this.cg.ctx.globalAlpha = s.alpha === undefined ? 1 : s.alpha
+                        this.cg.ctx.globalCompositeOperation = s.blendOperation
+
                         s.draw(dsc.getViewCache(), dsc.getResolution(), this.cg)
                     }
 

package/src/Layer.js

@@ -10,7 +10,7 @@ export class Layer {
     /**
      * @param {import("./Dataset").Dataset} dataset The multi resolution dataset to show.
      * @param {Array.<import("./Style").Style>} styles The styles, ordered in drawing order.
-     * @param {{visible?:boolean,minZoom?:number,maxZoom?:number,pixNb?:number,cellInfoHTML?:function(import("./Dataset").Cell):string}} opts
+     * @param {{visible?:boolean,alpha?:number,blendOperation?:GlobalCompositeOperation,minZoom?:number,maxZoom?:number,pixNb?:number,cellInfoHTML?:function(import("./Dataset").Cell):string}} opts
      *      minZoom: The minimum zoom level when to show the layer. maxZoom: The maximum zoom level when to show the layer
      */
     constructor(dataset, styles, opts = {}) {
@@ -23,7 +23,17 @@ export class Layer {
 
         /** An attribute to specify if a layer should be drawn or not
          * @type {boolean} */
-        this.visible = opts.visible == false ? false : true
+        this.visible = opts.visible === false ? false : true
+
+        /** The alpha of the layer, between 0.0 (fully transparent) and 1.0 (fully opaque).
+         * (see CanvasRenderingContext2D: globalAlpha property)
+         * @type {number|undefined} */
+        this.alpha = opts.alpha
+
+        /** The blend operation
+         * (see CanvasRenderingContext2D: globalCompositeOperation property)
+         * @type {GlobalCompositeOperation} */
+        this.blendOperation = opts.blendOperation || 'normal'
 
         /** The minimum zoom factor: Below this level, the layer is not shown.
          * @type {number} */

package/src/Style.js

@@ -17,7 +17,7 @@
 export class Style {
     /**
      * @abstract
-     * @param {{filter?:function(import('./Dataset').Cell):boolean,offset?:function(import('./Dataset').Cell,number,number):{dx:number,dy:number},minZoom?:number,maxZoom?:number}} opts
+     * @param {{filter?:function(import('./Dataset').Cell):boolean,offset?:function(import('./Dataset').Cell,number,number):{dx:number,dy:number},visible?:boolean,alpha?:number,blendOperation?:GlobalCompositeOperation,minZoom?:number,maxZoom?:number}} opts
      *      minZoom: The minimum zoom level when to show the layer. maxZoom: The maximum zoom level when to show the layer
      */
     constructor(opts) {
@@ -33,6 +33,20 @@ export class Style {
          * @type {function(import('./Dataset').Cell,number,number):{dx:number,dy:number}} */
         this.offset = opts.offset || ((c, r, zf) => ({ dx: 0, dy: 0 }))
 
+        /** An attribute to specify if a style should be drawn or not
+         * @type {boolean} */
+        this.visible = opts.visible === false ? false : true
+
+        /** The alpha of the style, between 0.0 (fully transparent) and 1.0 (fully opaque).
+         * (see CanvasRenderingContext2D: globalAlpha property)
+         * @type {number|undefined} */
+        this.alpha = opts.alpha
+
+        /** The blend operation
+         * (see CanvasRenderingContext2D: globalCompositeOperation property)
+         * @type {GlobalCompositeOperation} */
+        this.blendOperation = opts.blendOperation || 'normal'
+
         /** The minimum zoom factor: Below this level, the layer is not shown.
          * @type {number}
          * */

package/src/index.js

@@ -33,6 +33,7 @@ export { SquareColorWGLStyle } from './style/SquareColorWGLStyle.js'
 export { SquareColorCatWGLStyle } from './style/SquareColorCatWGLStyle.js'
 export { MosaicStyle } from './style/MosaicStyle.js'
 export { NinjaStarStyle } from './style/NinjaStarStyle.js'
+export { TimeSeriesStyle } from './style/TimeSeriesStyle.js'
 
 // export additional layers
 export { BackgroundLayer } from './BackgroundLayer.js'

package/src/style/NinjaStarStyle.js

@@ -85,7 +85,8 @@ export class NinjaStarStyle extends Style {
             const sG2 = s_(cell[this.sizeCol], r, statSize, zf) * r2
 
             //get offset
-            const offset = this.offset(cell, r, zf)
+            //TODO use
+            //const offset = this.offset(cell, r, zf)
 
             //center position
             const cx = cell.x + r2

package/src/style/TimeSeriesStyle.js

@@ -0,0 +1,207 @@
+//@ts-check
+'use strict'
+
+import { Style } from '../Style.js'
+
+/** @typedef {"first"|"bottom"|"center"|"top"|"last"} AnchorModeYEnum */
+
+/**
+ * Show cell as timeseries chart
+ * Can be used for sparkline map of https://datagistips.hypotheses.org/488
+ *
+ * @author Julien Gaffuri
+ */
+export class TimeSeriesStyle extends Style {
+    /** @param {object} opts */
+    constructor(opts) {
+        super(opts)
+        opts = opts || {}
+
+        /** The columns of the time series, ordered in chronological order.
+         * @type {Array.<string>} */
+        this.ts = opts.ts
+
+        //x
+        /** in geo unit
+         * @type {function(import("../Dataset.js").Cell,number,number):number} */
+        this.offsetX = opts.offsetX || ((c, r, zf) => 0)
+        /** @type {function(import("../Dataset.js").Cell,number,number):number} */
+        this.width = opts.width || ((c, r, zf) => r)
+
+        //y
+        /** in geo unit
+         * @type {function(import("../Dataset.js").Cell,number,number):number} */
+        this.offsetY = opts.offsetY || ((c, r, zf) => 0)
+        /** @type {function(import("../Dataset.js").Cell,number,number):number} */
+        this.height = opts.height || ((c, r, zf) => r)
+        /** @type {function(import("../Dataset.js").Cell,number,number):AnchorModeYEnum} */
+        this.anchorModeY = opts.anchorModeY || ((c, r, zf) => "center")
+
+
+        /**
+         * @type {string} */
+        this.lineWidthCol = opts.lineWidthCol
+
+        /** A function returning the width of the line, in geo unit
+         * @type {function(number,number,import("../Style.js").Stat|undefined,number):number} */
+        this.lineWidth = opts.lineWidth || ((v, r, s, zf) => 1.5 * zf)
+
+
+        /**
+         * @type {string} */
+        this.colorCol = opts.colorCol
+
+        /** A function returning the color of the cell.
+         * @type {function(number,number,import("../Style.js").Stat|undefined,number):string} */
+        this.color = opts.color || ((v, r, s, zf) => 'black')
+
+    }
+
+    /**
+     * Draw cells as text.
+     *
+     * @param {Array.<import("../Dataset.js").Cell>} cells
+     * @param {number} r
+     * @param {import("../GeoCanvas.js").GeoCanvas} cg
+     */
+    draw(cells, r, cg) {
+
+        //filter
+        if (this.filter) cells = cells.filter(this.filter)
+
+        //zoom factor
+        const zf = cg.getZf()
+
+        let statWidth
+        if (this.lineWidthCol) {
+            //and compute size variable statistics
+            statWidth = Style.getStatistics(cells, (c) => c[this.lineWidthCol], true)
+        }
+
+        let statColor
+        if (this.colorCol) {
+            //compute color variable statistics
+            statColor = Style.getStatistics(cells, (c) => c[this.colorCol], true)
+        }
+
+        //compute cell amplitude
+        const getAmplitude = c => {
+            let min, max
+            for (let t of this.ts) {
+                const val = c[t];
+                if (val == undefined) continue
+                if (min == undefined || val < min) min = val
+                if (max == undefined || val > max) max = val
+            }
+            if (min == undefined) return undefined
+            return max - min
+        }
+
+        //compute max amplitude
+        let ampMax
+        for (let c of cells) {
+            const amp = getAmplitude(c)
+            if (amp == undefined) continue
+            if (ampMax == undefined || amp > ampMax) ampMax = amp
+        }
+        if (!ampMax) return
+
+        const nb = this.ts.length
+
+        //draw with HTML canvas
+        //in geo coordinates
+        cg.setCanvasTransform()
+
+        cg.ctx.lineCap = 'butt'
+        for (let c of cells) {
+
+            //line width
+            /** @type {number|undefined} */
+            const wG = this.lineWidth ? this.lineWidth(c[this.lineWidthCol], r, statWidth, zf) : undefined
+            if (!wG || wG < 0) continue
+
+            //line color
+            /** @type {string|undefined} */
+            const col = this.color ? this.color(c[this.colorCol], r, statColor, zf) : undefined
+            if (!col) continue
+
+
+            //x
+            const offX = this.offsetX ? this.offsetX(c, r, zf) : 0
+            if (offX == undefined || isNaN(offX)) continue
+            const w = this.width ? this.width(c, r, zf) : r
+            if (w == undefined || isNaN(w)) continue
+
+            //y
+            const offY = this.offsetY ? this.offsetY(c, r, zf) : 0
+            if (offY == undefined || isNaN(offY)) continue
+            const h = this.height ? this.height(c, r, zf) : r
+            if (h == undefined || isNaN(h)) continue
+            const anchY = this.anchorModeY ? this.anchorModeY(c, r, zf) : "center"
+            if (!anchY) continue
+
+            cg.ctx.lineWidth = wG
+            cg.ctx.strokeStyle = col
+
+            //compute anchor Y figures
+            let val0, y0
+            if (anchY === "first") {
+                //get first value
+                val0 = c[this.ts[0]]
+                y0 = 0
+            } else if (anchY === "last") {
+                //get last value
+                val0 = c[this.ts[this.ts.length - 1]]
+                y0 = 0
+            } else if (anchY === "bottom") {
+                //get min
+                for (let t of this.ts) {
+                    const val = +c[t];
+                    if (val == undefined) continue
+                    if (val0 == undefined || val < val0) val0 = val
+                }
+                y0 = 0
+            } else if (anchY === "top") {
+                //get max
+                for (let t of this.ts) {
+                    const val = +c[t];
+                    if (val == undefined) continue
+                    if (val0 == undefined || val > val0) val0 = val
+                }
+                y0 = r
+            } else if (anchY === "center") {
+                //get min and max
+                let min, max
+                for (let t of this.ts) {
+                    const val = c[t];
+                    if (val == undefined) continue
+                    if (min == undefined || val < min) min = val
+                    if (max == undefined || val > max) max = val
+                }
+                val0 = (+max + +min) * 0.5
+                y0 = r / 2
+            } else {
+                console.log("Unexpected anchorModeY: " + anchY)
+                continue;
+            }
+
+            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 (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()
+
+        }
+
+    }
+}