gridviz 2.1.3 → 2.1.4

package/package.json

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

package/src/App.js

@@ -354,13 +354,14 @@ export class App {
             const layer = this.layers[i]
             if (!layer.visible) continue
             if (!layer.cellInfoHTML) continue
-            if (layer.cellInfoHTML === 'none') continue
+            //if (layer.cellInfoHTML === 'none') continue
             const dsc = layer.getDatasetComponent(zf)
             if (!dsc) continue
 
             //get cell at mouse position
             /** @type {import('./Dataset').Cell|undefined} */
             const cell = dsc.getCellFromPosition(posGeo, dsc.getViewCache())
+            //console.log(cell, dsc.resolution)
             if (!cell) return undefined
             const html = layer.cellInfoHTML(cell, dsc.getResolution())
             if (!html) return undefined

package/src/Layer.js

@@ -34,7 +34,7 @@ export class Layer {
         /** A function returning the blend operation. The function parameter is the zoom factor.
          * (see CanvasRenderingContext2D: globalCompositeOperation property)
          * @type {GlobalCompositeOperation} */
-        this.blendOperation = opts.blendOperation || (zf => 'normal')
+        this.blendOperation = opts.blendOperation || (zf => "source-over")
 
         /** The minimum zoom factor: Below this level, the layer is not shown.
          * @type {number} */

package/src/Style.js

@@ -46,7 +46,7 @@ export class Style {
         /** A function returning the blend operation. The function parameter is the zoom factor.
          * (see CanvasRenderingContext2D: globalCompositeOperation property)
          * @type {function(number):GlobalCompositeOperation} */
-        this.blendOperation = opts.blendOperation || (zf => 'normal')
+        this.blendOperation = opts.blendOperation || (zf => "source-over")
 
         /** The minimum zoom factor: Below this level, the layer is not shown.
          * @type {number}

package/src/dataset/TiledGrid.js

@@ -137,82 +137,82 @@ export class TiledGrid extends DatasetComponent {
                 if (tile) continue
 
                 //mark tile as loading
-                this.cache[xT][yT] = 'loading'
-                    ; (async () => {
-                        //request tile
+                this.cache[xT][yT] = "loading";
+                (async () => {
+                    //request tile
+                    /** @type {Array.<import("../Dataset").Cell>}  */
+                    let cells
+
+                    try {
                         /** @type {Array.<import("../Dataset").Cell>}  */
-                        let cells
-
-                        try {
-                            /** @type {Array.<import("../Dataset").Cell>}  */
-                            // @ts-ignore
-                            const data = await csv(this.url + xT + '/' + yT + '.csv')
-
-                            if (monitor) monitorDuration('*** TiledGrid parse start')
-
-                            //preprocess/filter
-                            if (this.preprocess) {
-                                cells = []
-                                for (const c of data) {
-                                    const b = this.preprocess(c)
-                                    if (b == false) continue
-                                    cells.push(c)
-                                }
-                            } else {
-                                cells = data
+                        // @ts-ignore
+                        const data = await csv(this.url + xT + '/' + yT + '.csv')
+
+                        //if (monitor) monitorDuration('*** TiledGrid parse start')
+
+                        //preprocess/filter
+                        if (this.preprocess) {
+                            cells = []
+                            for (const c of data) {
+                                const b = this.preprocess(c)
+                                if (b == false) continue
+                                cells.push(c)
                             }
-
-                            if (monitor) monitorDuration('preprocess / filter')
-                        } catch (error) {
-                            //mark as failed
-                            this.cache[xT][yT] = 'failed'
-                            return
-                        }
-
-                        //store tile in cache
-                        if (!this.info) {
-                            console.error('Tile info inknown')
-                            return
+                        } else {
+                            cells = data
                         }
-                        const tile_ = new GridTile(cells, xT, yT, this.info)
-                        this.cache[xT][yT] = tile_
-
-                        if (monitor) monitorDuration('storage')
-
-                        //if no redraw is specified, then leave
-                        if (!redrawFun) return
-
-                        //check if redraw is really needed, that is if:
-
-                        // 1. the dataset belongs to a layer which is visible at the current zoom level
-                        let redraw = false
-                        //go through the layers
-                        const zf = this.app.getZoomFactor()
-                        for (const lay of this.app.layers) {
-                            if (!lay.visible) continue
-                            if (lay.getDatasetComponent(zf) != this) continue
-                            //found one layer. No need to seek more.
-                            redraw = true
-                            break
-                        }
-                        if (monitor) monitorDuration('check redraw 1')
-
-                        if (!redraw) return
-
-                        // 2. the tile is within the view, that is its geo envelope intersects the viewer geo envelope.
-                        const env = this.app.updateExtentGeo()
-                        const envT = tile_.extGeo
-                        if (env.xMax <= envT.xMin) return
-                        if (env.xMin >= envT.xMax) return
-                        if (env.yMax <= envT.yMin) return
-                        if (env.yMin >= envT.yMax) return
-
-                        if (monitor) monitorDuration('check redraw 2')
-                        if (monitor) monitorDuration('*** TiledGrid parse end')
 
-                        //redraw
-                        redrawFun()
-                    })()
+                        //if (monitor) monitorDuration('preprocess / filter')
+                    } catch (error) {
+                        //mark as failed
+                        this.cache[xT][yT] = 'failed'
+                        return
+                    }
+
+                    //store tile in cache
+                    if (!this.info) {
+                        console.error('Tile info inknown')
+                        return
+                    }
+                    const tile_ = new GridTile(cells, xT, yT, this.info)
+                    this.cache[xT][yT] = tile_
+
+                    //if (monitor) monitorDuration('storage')
+
+                    //if no redraw is specified, then leave
+                    if (!redrawFun) return
+
+                    //check if redraw is really needed, that is if:
+
+                    // 1. the dataset belongs to a layer which is visible at the current zoom level
+                    let redraw = false
+                    //go through the layers
+                    const zf = this.app.getZoomFactor()
+                    for (const lay of this.app.layers) {
+                        if (!lay.visible) continue
+                        if (lay.getDatasetComponent(zf) != this) continue
+                        //found one layer. No need to seek more.
+                        redraw = true
+                        break
+                    }
+                    //if (monitor) monitorDuration('check redraw 1')
+
+                    if (!redraw) return
+
+                    // 2. the tile is within the view, that is its geo envelope intersects the viewer geo envelope.
+                    const env = this.app.updateExtentGeo()
+                    const envT = tile_.extGeo
+                    if (env.xMax <= envT.xMin) return
+                    if (env.xMin >= envT.xMax) return
+                    if (env.yMax <= envT.yMin) return
+                    if (env.yMin >= envT.yMax) return
+
+                    //if (monitor) monitorDuration('check redraw 2')
+                    //if (monitor) monitorDuration('*** TiledGrid parse end')
+
+                    //redraw
+                    redrawFun()
+                })()
             }
         }
         return this

package/src/index.js

@@ -35,6 +35,7 @@ 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 { IsoFenceStyle } from './style/IsoFenceStyle.js'
 
 // export additional layers
 export { BackgroundLayer } from './BackgroundLayer.js'

package/src/style/IsoFenceStyle.js

@@ -0,0 +1,232 @@
+//@ts-check
+'use strict'
+
+import { Style } from '../Style.js'
+
+/** @typedef {{x:number,y:number,or:"v"|"h",c1:import('../Dataset.js').Cell|undefined,c2:import('../Dataset.js').Cell|undefined}} Side */
+
+/**
+ * @author Julien Gaffuri
+ */
+export class IsoFenceStyle extends Style {
+
+    /** @param {object} opts */
+    constructor(opts) {
+        super(opts)
+        opts = opts || {}
+
+        /**
+         * The dictionary (string -> color) which give the color of each category.
+         * @type {object} */
+        this.color = opts.color
+
+        /** The column where to get the height values.
+         * @type {string} */
+        this.heightCol = opts.heightCol
+
+        /** A function returning the height of a cell.
+         * @type {function(number,number,import("../Style").Stat|undefined,number):number} */
+        this.height = opts.height || ((v, r, s, zf) => r * 0.4)
+
+        /** The perspective angle.
+         * @type {number} */
+        this.angle = opts.angle != undefined ? opts.angle : 45
+
+        /** A function returning the corner line stroke style.
+         * @type {function(import('../Dataset.js').Cell,number,number):string} */
+        this.cornerLineStrokeColor = opts.cornerLineStrokeColor || ((c, r, zf) => "#333")
+
+        /** A function returning the corner line width.
+        * @type {function(import('../Dataset.js').Cell,number,number):number} */
+        this.cornerLineWidth = opts.cornerLineWidth || ((c, r, zf) => 0.8 * zf)
+    }
+
+    /**
+     * Draw cells as segments.
+     *
+     * @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 stat
+        if (this.heightCol) {
+            //if size is used, sort cells by size so that the biggest are drawn first
+            cells.sort((c1, c2) => c2[this.heightCol] - c1[this.heightCol])
+            //and compute statistics
+            stat = Style.getStatistics(cells, (c) => c[this.heightCol], true)
+        }
+
+        //nb categories - used for radar and agepyramid
+        const cats = Object.keys(this.color)
+
+        //draw in geo coordinates
+        cg.setCanvasTransform()
+
+        //half resolution
+        const r2 = r / 2
+
+        //height
+        /** @type {function(number,number,import("../Style").Stat|undefined,number):number} */
+        let h_ = this.height
+
+        //make sides
+        /**  @type {Array.<Side>} */
+        const sides = []
+
+        //make horizontal sides
+        //sort cells by x and y
+        cells.sort((c1, c2) => (c2.x == c1.x ? c1.y - c2.y : c1.x - c2.x))
+        let c1 = cells[0]
+        for (let i = 1; i < cells.length; i++) {
+            let c2 = cells[i]
+
+            if ((c1.y + r == c2.y) && (c1.x == c2.x))
+                //cells in same column and touch along horizontal side
+                //make shared side
+                sides.push({ x: c1.x + r2, y: c2.y, or: 'h', c1: c1, c2: c2 })
+            else {
+                //cells do not touch along horizontal side
+                //make two sides: top one for c1, bottom for c2
+                sides.push({ x: c1.x + r2, y: c1.y + r, or: 'h', c1: c1, c2: undefined })
+                sides.push({ x: c2.x + r2, y: c2.y, or: 'h', c1: undefined, c2: c2 })
+            }
+
+            c1 = c2
+        }
+
+        //make vertical sides
+        //sort cells by y and x
+        cells.sort((c1, c2) => (c2.y == c1.y ? c1.x - c2.x : c1.y - c2.y))
+        c1 = cells[0]
+        for (let i = 1; i < cells.length; i++) {
+            let c2 = cells[i]
+
+            if ((c1.x + r == c2.x) && (c1.y == c2.y))
+                //cells in same row and touch along vertical side
+                //make shared side
+                sides.push({ x: c2.x, y: c1.y + r2, or: 'v', c1: c1, c2: c2 })
+            else {
+                //cells do not touch along vertical side
+                //make two sides: right one for c1, left for c2
+                sides.push({ x: c1.x + r, y: c1.y + r2, or: 'v', c1: c1, c2: undefined })
+                sides.push({ x: c2.x, y: c2.y + r2, or: 'v', c1: undefined, c2: c2 })
+            }
+
+            c1 = c2
+        }
+
+        //
+        if (sides.length == 0) return
+
+        //angle in radians
+        const aRad = this.angle * Math.PI / 180, cos = Math.cos(aRad), sin = Math.sin(aRad)
+
+        //draw in geo coordinates
+        cg.setCanvasTransform()
+
+        //sort sides so that the north east ones are drown first
+        sides.sort((s1, s2) => (Math.hypot(s2.x, s2.y) - Math.hypot(s1.x, s1.y)))
+
+        //draw sides
+        for (let s of sides) {
+
+            //heights - in geo
+            /** @type {number} */
+            const hG1 = s.c1 ? h_(s.c1[this.heightCol], r, stat, zf) : 0
+            /** @type {number} */
+            const hG2 = s.c2 ? h_(s.c2[this.heightCol], r, stat, zf) : 0
+
+            //compute totals for both cells
+            const total1 = computeTotal(s.c1, cats)
+            const total2 = computeTotal(s.c2, cats)
+            if (total1 == 0 && total2 == 0) continue
+
+            let cumul1 = 0, cumul2 = 0
+            for (let [column, color] of Object.entries(this.color)) {
+                //draw stripe of side s and category column
+
+                //get values for both cells
+                let v1 = s.c1 ? +s.c1[column] : 0
+                let v2 = s.c2 ? +s.c2[column] : 0
+                if (v1 == 0 && v2 == 0) continue
+
+                //compute heights
+                const h1 = total1 > 0 ? hG1 * cumul1 / total1 : 0
+                const h1n = total1 > 0 ? hG1 * (cumul1 + v1) / total1 : 0
+                const h2 = total2 > 0 ? hG2 * cumul2 / total2 : 0
+                const h2n = total2 > 0 ? hG2 * (cumul2 + v2) / total2 : 0
+
+                //make path
+                cg.ctx.beginPath()
+                if (s.or == "h") {
+                    //horizontal side - vertical section
+                    //bottom left
+                    cg.ctx.moveTo(s.x + h1 * cos, s.y - r2 + h1 * sin)
+                    //top left
+                    cg.ctx.lineTo(s.x + h2 * cos, s.y + r2 + h2 * sin)
+                    //top right
+                    cg.ctx.lineTo(s.x + h2n * cos, s.y + r2 + h2n * sin)
+                    //bottom right
+                    cg.ctx.lineTo(s.x + h1n * cos, s.y - r2 + h1n * sin)
+                } else {
+                    //vertical side - horizontal section
+                    //bottom left
+                    cg.ctx.moveTo(s.x - r2 + h1 * cos, s.y + h1 * sin)
+                    //bottom right
+                    cg.ctx.lineTo(s.x + r2 + h2 * cos, s.y + h2 * sin)
+                    //top right
+                    cg.ctx.lineTo(s.x + r2 + h2n * cos, s.y + h2n * sin)
+                    //top left
+                    cg.ctx.lineTo(s.x - r2 + h1n * cos, s.y + h1n * sin)
+                }
+                cg.ctx.closePath()
+
+                //fill
+                cg.ctx.fillStyle = color
+                cg.ctx.fill()
+
+                cumul1 += v1
+                cumul2 += v2
+                //break
+            }
+        }
+
+        //draw corner lines
+        for (let c of cells) {
+            //height - in geo
+            const hG = h_(c[this.heightCol], r, stat, zf)
+
+            cg.ctx.strokeStyle = this.cornerLineStrokeColor ? this.cornerLineStrokeColor(c, r, zf) : "#333"
+            cg.ctx.lineWidth = this.cornerLineWidth ? this.cornerLineWidth(c, r, zf) : 0.8 * zf
+
+            cg.ctx.beginPath()
+            cg.ctx.moveTo(c.x + r2, c.y + r2)
+            cg.ctx.lineTo(c.x + r2 + hG * cos, c.y + r2 + hG * sin)
+            cg.ctx.closePath()
+            cg.ctx.stroke()
+        }
+
+        //update legends
+        this.updateLegends({ style: this, r: r, zf: zf, sSize: stat })
+    }
+}
+
+
+
+const computeTotal = (cell, categories) => {
+    if (!cell) return 0
+    let total = 0
+    for (let column of categories) {
+        const v = cell[column]
+        if (!v) continue
+        total += +v
+    }
+    return total || 0
+}

package/src/style/SideStyle.js

@@ -64,8 +64,6 @@ export class SideStyle extends Style {
         /**  @type {Array.<Side>} */
         const sides = []
 
-        const epsilon = r * 0.001
-
         //make horizontal sides
         //sort cells by x and y
         cells.sort((c1, c2) => (c2.x == c1.x ? c1.y - c2.y : c1.x - c2.x))
@@ -73,7 +71,7 @@ export class SideStyle extends Style {
         for (let i = 1; i < cells.length; i++) {
             let c2 = cells[i]
 
-            if (Math.abs(c1.y + r - c2.y) <= epsilon && Math.abs(c1.x - c2.x) <= epsilon)
+            if ((c1.y + r == c2.y) && (c1.x == c2.x))
                 //cells in same column and touch along horizontal side
                 //make shared side
                 sides.push({
@@ -109,7 +107,7 @@ export class SideStyle extends Style {
         for (let i = 1; i < cells.length; i++) {
             let c2 = cells[i]
 
-            if (Math.abs(c1.x + r - c2.x) <= epsilon && Math.abs(c1.y - c2.y) <= epsilon)
+            if ((c1.x + r == c2.x) && (c1.y == c2.y))
                 //cells in same row and touch along vertical side
                 //make shared side
                 sides.push({