gridviz 2.0.28 → 2.0.31

package/src/Legend.js

@@ -0,0 +1,86 @@
+//@ts-check
+'use strict'
+
+import { select } from 'd3-selection'
+
+/**
+ * A legend container.
+ *
+ * @author Joseph Davies, Julien Gaffuri
+ */
+export class Legend {
+    /**
+     * @param {Object} opts
+     */
+    constructor(opts) {
+        opts = opts || {}
+
+        /** @type {string} */
+        this.id = opts.id
+
+        //TODO stop using it. Use style method below instead.
+
+        /** @type {number} @deprecated */
+        this.top = opts.top
+        /** @type {number} @deprecated */
+        this.bottom = opts.bottom
+        /** @type {number} @deprecated */
+        this.left = opts.left
+        /** @type {number} @deprecated */
+        this.right = opts.right
+        /** @type {string} @deprecated */
+        this.background = opts.background || 'none'
+        /** @type {string} @deprecated */
+        this.padding = opts.padding || '5px'
+        /** @type {string} @deprecated */
+        this.border = opts.border || '0px'
+        /** @type {string} @deprecated */
+        this['border-radius'] = opts['border-radius'] || 'none'
+        /** @type {string} @deprecated */
+        this['box-shadow'] = opts['box-shadow'] || 'none'
+        /** @type {string} @deprecated */
+        this['font-family'] = opts['font-family'] || 'Helvetica, Arial, sans-serif'
+        /** @type {string} @deprecated */
+        this.width = opts.width
+        /** @type {string} @deprecated */
+        this.height = opts.height
+
+        //the div element
+        if (this.id) this.div = select('#' + this.id)
+
+        if (!this.div || this.div.empty()) {
+            this.div = select(document.createElement('div'))
+            if (this.id) this.div.attr('id', this.id)
+        }
+
+        //set style
+        this.div.style('background', this.background)
+        this.div.style('padding', this.padding)
+        this.div.style('border', this.border)
+        this.div.style('border-radius', this['border-radius'])
+        this.div.style('box-shadow', this['box-shadow'])
+        this.div.style('font-family', this['font-family'])
+
+        if (this.width) this.div.style('width', this.width)
+        if (this.height) this.div.style('height', this.height)
+    }
+
+    /**
+     * Apply a style to the legend div.
+     * @param {string} k
+     * @param {string} v
+     * @returns {this}
+     */
+    style(k, v) {
+        this.div.style(k, v)
+        return this
+    }
+
+    /**
+     * @param {Object} opts
+     * @abstract
+     */
+    update(opts) {
+        console.error('Legend update not implemented yet.')
+    }
+}

package/src/LineLayer.js

@@ -0,0 +1,150 @@
+//@ts-check
+'use strict'
+
+import { json } from 'd3-fetch'
+
+/**
+ * @author Joseph Davies, Julien Gaffuri
+ */
+export class LineLayer {
+    /**
+     * @param {object} opts
+     */
+    constructor(opts) {
+        opts = opts || {}
+
+        /**
+         * @private
+         * @type {string} */
+        this.url = opts.url
+
+        /**
+         * A preprocess to run on each feature after loading.
+         * It can be used to apply some specific treatment before, format the label data, project coordinates, etc.
+         * Return false if the label should not be kept.
+         * @private
+         * @type {function(object):boolean} */
+        this.preprocess = opts.preprocess
+
+        /**
+         * @private
+         * @type {function(object,number):string} */
+        this.color = opts.color || ((f, zf) => 'gray')
+        /**
+         * @private
+         * @type {function(object,number):number} */
+        this.width = opts.width || ((f, zf) => 2)
+        /**
+         * @private
+         * @type {function(object,number):Array.<number>|undefined} */
+        this.lineDash = opts.lineDash || ((f, zf) => undefined)
+
+        /**
+         * @private
+         * @type {Array.<object> | undefined} */
+        this.fs = undefined
+
+        /**
+         * @private
+         * @type {string} */
+        this.loadingStatus = 'notLoaded'
+    }
+
+    /**
+     * Draw the layer.
+     * @param {import("./GeoCanvas").GeoCanvas} cg The canvas where to draw the layer.
+     * @returns {void}
+     */
+    draw(cg) {
+        //load data, if not done yet.
+        if (!this.fs) {
+            this.load(cg.redraw)
+            return
+        }
+
+        //TODO sort lines by width ?
+
+        //zoom factor
+        const zf = cg.getZf()
+
+        //draw in geo coordinates
+        cg.setCanvasTransform()
+
+        for (const f of this.fs) {
+            const cs = f.geometry.coordinates
+            if (cs.length < 2) continue
+
+            //set color
+            const col = this.color(f, zf)
+            if (!col || col == 'none') continue
+            cg.ctx.strokeStyle = col
+
+            //set linewidth
+            const wP = this.width(f, zf)
+            if (!wP || wP < 0) continue
+            cg.ctx.lineWidth = wP * zf
+
+            //set line dash
+            const ldP = this.lineDash(f, zf)
+            if (ldP) cg.ctx.setLineDash(ldP)
+
+            //draw line
+            cg.ctx.beginPath()
+            cg.ctx.moveTo(cs[0][0], cs[0][1])
+            for (let i = 1; i < cs.length; i++) cg.ctx.lineTo(cs[i][0], cs[i][1])
+            cg.ctx.stroke()
+        }
+
+        //...
+        cg.ctx.setLineDash([])
+    }
+
+    /**
+     * Load data for labels, from URL this.url
+     * @param {function():void} callback
+     * @private
+     */
+    async load(callback) {
+        if (!this.url) {
+            console.log('Failed loading boundaries: No URL specified. ' + this.url)
+            this.loadingStatus = 'failed'
+            this.labels = []
+            return
+        }
+
+        //check if data already loaded
+        if (this.loadingStatus != 'notLoaded') return
+
+        //load data
+        this.loadingStatus = 'loading'
+
+        try {
+            const data_ = await json(this.url)
+
+            /** @type { Array.<object> } */
+            const data = data_.features
+
+            //preprocess/filter
+            if (this.preprocess) {
+                this.fs = []
+                for (const c of data) {
+                    const b = this.preprocess(c)
+                    if (b == false) continue
+                    this.fs.push(c)
+                }
+            } else {
+                //store labels
+                this.fs = data
+            }
+
+            this.loadingStatus = 'loaded'
+
+            //redraw
+            if (callback) callback()
+        } catch (error) {
+            console.log('Failed loading boundaries from ' + this.url)
+            this.fs = []
+            this.loadingStatus = 'failed'
+        }
+    }
+}

package/src/Style.js

@@ -0,0 +1,114 @@
+//@ts-check
+'use strict'
+
+/**
+ * Statistics of a set of values
+ * @typedef {{min:number,max:number}} Stat */
+
+/** @typedef {"square"|"circle"|"diamond"|"donut"|"none"} Shape */
+
+/**
+ * A style, to show a grid dataset.
+ *
+ * @abstract
+ *
+ * @author Joseph Davies, Julien Gaffuri
+ */
+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
+     *      minZoom: The minimum zoom level when to show the layer. maxZoom: The maximum zoom level when to show the layer
+     */
+    constructor(opts) {
+        opts = opts || {}
+
+        /** A filter function to apply to the cell list, to filter out some cells not to be drawn (such as for example the cells with value=0).
+         * @protected
+         * @type {function(import('./Dataset').Cell):boolean} */
+        this.filter = opts.filter || (() => true)
+
+        /** An offset. This is to alter the position of all symbols in a given direction. In geographical unit.
+         * @protected
+         * @type {function(import('./Dataset').Cell,number,number):{dx:number,dy:number}} */
+        this.offset = opts.offset || ((c, r, zf) => ({ dx: 0, dy: 0 }))
+
+        /** The minimum zoom factor: Below this level, the layer is not shown.
+         * @type {number}
+         * */
+        this.minZoom = opts.minZoom || 0
+
+        /** The maximum zoom factor: Above this level, the layer is not shown.
+         * @type {number}
+         * */
+        this.maxZoom = opts.maxZoom || Infinity
+
+        //ensure acceptable values for the zoom limits.
+        if (this.minZoom >= this.maxZoom)
+            throw new Error('Unexpected zoom limits for layer. Zoom min should be smaller than zoom max.')
+
+        /**
+         * @public
+         * @type {Array.<import("./Legend").Legend>} */
+        this.legends = []
+    }
+
+    /**
+     * Draw cells.
+     *
+     * @param {Array.<import('./Dataset').Cell>} cells The cells to draw.
+     * @param {number} resolution Their resolution (in geographic unit)
+     * @param {import("./GeoCanvas").GeoCanvas} cg The canvas where to draw them.
+     * @abstract
+     */
+    draw(cells, resolution, cg) {
+        throw new Error('Method draw not implemented.')
+    }
+
+    //getters and setters
+
+    /** @returns {function(import('./Dataset').Cell,number,number):{dx:number,dy:number}} */
+    getOffset() {
+        return this.offset
+    }
+    /** @param {function(import('./Dataset').Cell,number,number):{dx:number,dy:number}} val @returns {this} */
+    setOffset(val) {
+        this.offset = val
+        return this
+    }
+
+    /** Hide all legend elements of the style, if any
+     * @param {object} opts
+     * @returns {this} */
+    updateLegends(opts) {
+        for (const lg of this.legends) lg.update(opts)
+        return this
+    }
+
+    /**
+     * Compute some statistics on a value of some cells.
+     * This is used to define how to draw specifically the cells within the view.
+     * TODO: compute median ?
+     *
+     * @param {Array.<import('./Dataset').Cell>} cells
+     * @param {function(import('./Dataset').Cell):number} valFun
+     * @param {boolean} ignoreZeros
+     * @returns {Stat | undefined}
+     */
+    static getStatistics(cells, valFun, ignoreZeros) {
+        if (!cells || cells.length == 0) return undefined
+        let min = Infinity
+        let max = -Infinity
+        //let sum = 0
+        //let nb = 0
+        for (const cell of cells) {
+            const v = +valFun(cell)
+            if (ignoreZeros && !v) continue
+            if (v < min) min = v
+            if (v > max) max = v
+            //sum += v
+            //nb++
+        }
+        return { min: min, max: max }
+    }
+}

package/src/Tooltip.js

@@ -0,0 +1,150 @@
+//@ts-check
+'use strict'
+
+import { select } from 'd3-selection'
+//import { transition } from "d3-transition";
+
+/**
+ * A generic class to make a tooltip.
+ * It is a div element, which can be moved under the mouse pointer and filled with some information in html.
+ */
+export class Tooltip {
+    /**
+     * @param {object} opts
+     */
+    constructor(opts) {
+        opts = opts || {}
+
+        /** @type {string} */
+        this.div = opts.div || 'tooltip_eurostat'
+        /** @type {string} */
+        this.maxWidth = opts.maxWidth || '20em'
+        /** @type {string} */
+        this.fontSize = opts.fontSize || '1.2em'
+        /** @type {string} */
+        this.background = opts.background || 'white'
+        /** @type {string} */
+        this.padding = opts.padding || '5px'
+        /** @type {string} */
+        this.border = opts.border || '0px'
+        /** @type {string} */
+        this['border-radius'] = opts['border-radius'] || '5px'
+        /** @type {string} */
+        this['box-shadow'] = opts['box-shadow'] || '5px 5px 5px grey'
+        /** @type {string} */
+        this['font-family'] = opts['font-family'] || 'Helvetica, Arial, sans-serif'
+
+        /** @type {number} */
+        this.transitionDuration = opts.transitionDuration || 100
+        /** @type {number} */
+        this.xOffset = opts.xOffset || 30
+        /** @type {number} */
+        this.yOffset = opts.yOffset || 20
+        /** @type {number} */ // e.g. to prevent mouse cursor covering cell being highlighted
+        this.yMouseOffset = opts.yMouseOffset || 0
+        /** @type {number} */
+        this.xMouseOffset = opts.xMouseOffset || 0
+
+        /**
+         * @private
+         * @type {import("d3-selection").Selection} */
+        this.tooltip = select('#' + this.div)
+        if (this.tooltip.empty()) this.tooltip = select('body').append('div').attr('id', this.div)
+
+        //initialise
+        this.tooltip.style('max-width', this.maxWidth)
+        this.tooltip.style('overflow', 'hidden')
+        this.tooltip.style('font-size', this.fontSize)
+        this.tooltip.style('background', this.background)
+        this.tooltip.style('padding', this.padding)
+        this.tooltip.style('border', this.border)
+        this.tooltip.style('border-radius', this['border-radius'])
+        this.tooltip.style('box-shadow', this['box-shadow'])
+        this.tooltip.style('font-family', this['font-family'])
+        this.tooltip.style('position', 'absolute')
+        this.tooltip.style('pointer-events', 'none')
+        this.tooltip.style('opacity', '0')
+    }
+
+    /** Show the tooltip */
+    show() {
+        // @ts-ignore
+        this.tooltip.transition().duration(this.transitionDuration).style('opacity', 1)
+    }
+
+    /** Hide the tooltip */
+    hide() {
+        // @ts-ignore
+        this.tooltip.transition().duration(this.transitionDuration).style('opacity', 0)
+    }
+
+    /**
+     * Set the content of the tooltip.
+     * @param {string} html
+     */
+    html(html) {
+        this.tooltip.html(html)
+    }
+
+    /**
+     * Set the position of the tooltip at the mouse event position.
+     * @param {MouseEvent} event
+     */
+    setPosition(event) {
+        this.tooltip
+            .style('left', event.pageX + this.xOffset + 'px')
+            .style('top', event.pageY - this.yOffset + 'px')
+    }
+
+    /*
+	my.mouseover = function (event, html) {
+		if (html) my.html(html);
+		my.setPosition(event);
+		my.show()
+		//this.ensureTooltipOnScreen();
+	};
+	
+	my.mousemove = function (event) {
+		my.setPosition(event);
+		//this.ensureTooltipOnScreen();
+	};
+	
+	my.mouseout = function () {
+		my.hide();
+	};*/
+
+    style(k, v) {
+        if (arguments.length == 1) return this.tooltip.style(k)
+        this.tooltip.style(k, v)
+        return this
+    }
+
+    attr(k, v) {
+        if (arguments.length == 1) return this.tooltip.attr(k)
+        this.tooltip.attr(k, v)
+        return this
+    }
+
+    /**
+     * @function ensureTooltipOnScreen
+     * @description Prevents the tooltip from overflowing off screen
+     */
+    /*my.ensureTooltipOnScreen = function () {
+		// TODO: parent needs to be the all-encompassing container, not the map SVG id otherwise it just uses the last SVG which will be an inset SVG.
+		let parent = document.getElementById(config.parentContainerId);
+		let bbox = parent.getBBox();
+		let parentWidth = bbox.width;
+		let parentHeight = bbox.height;
+		let node = tooltip.node();
+		//too far right
+		if (node.offsetLeft > parentWidth - node.clientWidth) {
+			node.style.left = node.offsetLeft - (node.clientWidth + config.xOffset * 2) + "px";
+	
+		}
+		//too far down
+		if (node.offsetTop + node.clientHeight > parentHeight) {
+			node.style.top = node.offsetTop - (node.clientHeight + config.yOffset * 2) + "px";
+		}
+	
+	}*/
+}

package/src/dataset/COGeo.js

@@ -0,0 +1,24 @@
+//@ts-check
+'use strict'
+
+import { DatasetComponent } from '../DatasetComponent.js'
+
+/**
+ * @todo
+ * A dataset composed of a COGeo file.
+ * @see https://www.cogeo.org/
+ *
+ * @author Joseph Davies, Julien Gaffuri
+ */
+export class COGeo extends DatasetComponent {
+    /**
+     *
+     * @param {String} url
+     * @param {{preprocess?:(function(import("../Dataset").Cell):boolean)}} opts
+     */
+    constructor(url, opts = {}) {
+        super(url, 0, opts)
+    }
+
+    //TODO Use https://geotiffjs.github.io/
+}

package/src/dataset/CSVGrid.js

@@ -0,0 +1,104 @@
+//@ts-check
+'use strict'
+
+/** @typedef {{ dims: object, crs: string, tileSizeCell: number, originPoint: {x:number,y:number}, resolutionGeo: number, tilingBounds:import("../Dataset").Envelope }} GridInfo */
+
+import { csv } from 'd3-fetch'
+import { DatasetComponent } from '../DatasetComponent.js'
+
+/**
+ * A dataset composed of a single CSV file (not tiled).
+ *
+ * @author Joseph Davies, Julien Gaffuri
+ */
+export class CSVGrid extends DatasetComponent {
+    /**
+     * @param {string} url The URL of the dataset.
+     * @param {number} resolution The dataset resolution in geographical unit.
+     * @param {{preprocess?:(function(import("../Dataset").Cell):boolean)}} opts
+     */
+    constructor(url, resolution, opts = {}) {
+        super(url, resolution, opts)
+
+        /**
+         * @private
+         * @type {Array.<import("../Dataset").Cell>} */
+        this.cells = []
+
+        /**
+         * @type {string}
+         * @private  */
+        this.infoLoadingStatus = 'notLoaded'
+    }
+
+    /**
+     * Request data within a geographic envelope.
+     *
+     * @param {import("../Dataset").Envelope|undefined} e
+     * @param {function():void} redraw
+     */
+    getData(e, redraw) {
+        //check if data already loaded
+        if (this.infoLoadingStatus != 'notLoaded') return this
+
+        //load data
+        this.infoLoadingStatus = 'loading'
+        ;(async () => {
+            try {
+                const data = await csv(this.url)
+
+                //convert coordinates in numbers
+                for (const c of data) {
+                    c.x = +c.x
+                    c.y = +c.y
+                }
+
+                //preprocess/filter
+                if (this.preprocess) {
+                    this.cells = []
+                    for (const c of data) {
+                        const b = this.preprocess(c)
+                        if (b == false) continue
+                        this.cells.push(c)
+                    }
+                } else {
+                    this.cells = data
+                }
+
+                //TODO check if redraw is necessary
+                //that is if the dataset belongs to a layer which is visible at the current zoom level
+
+                //execute the callback, usually a draw function
+                if (redraw) redraw()
+
+                this.infoLoadingStatus = 'loaded'
+            } catch (error) {
+                //mark as failed
+                this.infoLoadingStatus = 'failed'
+                this.cells = []
+            }
+        })()
+
+        return this
+    }
+
+    /**
+     * Fill the view cache with all cells which are within a geographical envelope.
+     *
+     * @param {import("../Dataset").Envelope} extGeo
+     * @returns {void}
+     */
+    updateViewCache(extGeo) {
+        //data not loaded yet
+        if (!this.cells) return
+
+        this.cellsViewCache = []
+        for (const cell of this.cells) {
+            if (+cell.x + this.resolution < extGeo.xMin) continue
+            if (+cell.x - this.resolution > extGeo.xMax) continue
+            if (+cell.y + this.resolution < extGeo.yMin) continue
+            if (+cell.y - this.resolution > extGeo.yMax) continue
+            this.cellsViewCache.push(cell)
+        }
+    }
+}