gridviz 3.0.18 → 3.0.20

package/package.json

@@ -1,74 +1,74 @@
-{
-    "name": "gridviz",
-    "version": "3.0.18",
-    "description": "Visualization tool for gridded statistics",
-    "keywords": [
-        "statistics",
-        "grid",
-        "gridded",
-        "grids",
-        "gridded statistics",
-        "dataviz",
-        "csv",
-        "GIS",
-        "WebGL",
-        "d3",
-        "cartography",
-        "bertin",
-        "geospatial",
-        "mapping"
-    ],
-    "homepage": "https://github.com/eurostat/gridviz",
-    "author": "Joseph Davies, Julien Gaffuri",
-    "license": "EUPL-1.2",
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/eurostat/gridviz.git"
-    },
-    "bugs": {
-        "url": "https://github.com/eurostat/gridviz/issues",
-        "email": "Joseph.DAVIES@ext.ec.europa.eu"
-    },
-    "type": "module",
-    "main": "dist/gridviz.min.js",
-    "module": "dist/gridviz.min.js",
-    "exports": {
-        "umd": "./dist/gridviz.min.js",
-        "default": "./src/index.js"
-    },
-    "scripts": {
-        "start": "webpack --config webpack.config.dev.cjs",
-        "server": "webpack serve -c webpack.config.dev.cjs",
-        "doc": "jsdoc -c docs/jsdoc/jsdoc.conf.json",
-        "build-prod": "webpack --config webpack.config.prod.cjs",
-        "test": "jest",
-        "format": "prettier --write ."
-    },
-    "files": [
-        "dist/**/*.js",
-        "src/**/*.js"
-    ],
-    "dependencies": {
-        "d3-array": "^3.2.4",
-        "d3-color": "^3.1.0",
-        "d3-fetch": "^3.0.1",
-        "d3-random": "^3.0.1",
-        "d3-scale": "^4.0.2",
-        "d3-selection": "^3.0.0",
-        "d3-zoom": "^3.0.0",
-        "jsdoc": "^4.0.4"
-    },
-    "devDependencies": {
-        "@babel/preset-env": "^7.25.4",
-        "babel-loader": "^8.1.0",
-        "jshint": "^2.12.0",
-        "prettier": "^2.8.8",
-        "webpack": "^5.96.1",
-        "webpack-cli": "^5.1.4",
-        "webpack-dev-server": "^5.1.0",
-        "webpack-livereload-plugin": "^3.0.2"
-    },
-    "engines": {
-        "node": ">=14"
-    }
-}
+{
+    "name": "gridviz",
+    "version": "3.0.20",
+    "description": "Visualization tool for gridded statistics",
+    "keywords": [
+        "statistics",
+        "grid",
+        "gridded",
+        "grids",
+        "gridded statistics",
+        "dataviz",
+        "csv",
+        "GIS",
+        "WebGL",
+        "d3",
+        "cartography",
+        "bertin",
+        "geospatial",
+        "mapping"
+    ],
+    "homepage": "https://github.com/eurostat/gridviz",
+    "author": "Joseph Davies, Julien Gaffuri",
+    "license": "EUPL-1.2",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/eurostat/gridviz.git"
+    },
+    "bugs": {
+        "url": "https://github.com/eurostat/gridviz/issues",
+        "email": "Joseph.DAVIES@ext.ec.europa.eu"
+    },
+    "type": "module",
+    "main": "dist/gridviz.min.js",
+    "module": "dist/gridviz.min.js",
+    "exports": {
+        "umd": "./dist/gridviz.min.js",
+        "default": "./src/index.js"
+    },
+    "scripts": {
+        "start": "webpack --config webpack.config.dev.cjs",
+        "server": "webpack serve -c webpack.config.dev.cjs",
+        "doc": "jsdoc -c docs/jsdoc/jsdoc.conf.json",
+        "build-prod": "webpack --config webpack.config.prod.cjs",
+        "test": "jest",
+        "format": "prettier --write ."
+    },
+    "files": [
+        "dist/**/*.js",
+        "src/**/*.js"
+    ],
+    "dependencies": {
+        "d3-array": "^3.2.4",
+        "d3-color": "^3.1.0",
+        "d3-fetch": "^3.0.1",
+        "d3-random": "^3.0.1",
+        "d3-scale": "^4.0.2",
+        "d3-selection": "^3.0.0",
+        "d3-zoom": "^3.0.0",
+        "jsdoc": "^4.0.4"
+    },
+    "devDependencies": {
+        "@babel/preset-env": "^7.25.4",
+        "babel-loader": "^8.1.0",
+        "jshint": "^2.12.0",
+        "prettier": "^2.8.8",
+        "webpack": "^5.96.1",
+        "webpack-cli": "^5.1.4",
+        "webpack-dev-server": "^5.1.0",
+        "webpack-livereload-plugin": "^3.0.2"
+    },
+    "engines": {
+        "node": ">=14"
+    }
+}

package/src/button/ZoomButtons.js

@@ -1,101 +1,101 @@
-import { Button } from './Button.js'
-
-/**
- * Button for toggling fullscreen mode
- *
- * @module button
- * @author Joseph Davies, Julien Gaffuri
- */
-export class ZoomButtons extends Button {
-    /**
-     * @param {Object} opts
-     */
-    constructor(opts) {
-        super(opts)
-
-        this.onZoom = opts.onZoom // custom user event handler
-        this.delta = opts.delta || 0.2
-
-        // Create zoom in button
-        this.zoomInBtn = document.createElement('a')
-        this.zoomInBtn.id = 'zoom-in'
-        this.zoomInBtn.className = 'gridviz-zoom-button'
-        this.zoomInBtn.title = 'Zoom in'
-        this.zoomInBtn.textContent = '+'
-        this.zoomInBtn.addEventListener('click', (e) => {
-            this.zoomIn(e)
-        })
-        this.zoomInBtn.addEventListener('mouseover', () => {
-            this.zoomInBtn.style.backgroundColor = 'lightgrey'
-        })
-        this.zoomInBtn.addEventListener('mouseout', () => {
-            this.zoomInBtn.style.backgroundColor = '#ffffff'
-        })
-
-        // Create zoom out button
-        this.zoomOutBtn = document.createElement('a')
-        this.zoomOutBtn.id = 'zoom-out'
-        this.zoomOutBtn.className = 'gridviz-zoom-button'
-        this.zoomOutBtn.title = 'Zoom out'
-        this.zoomOutBtn.textContent = '-'
-        this.zoomOutBtn.addEventListener('click', (e) => {
-            this.zoomOut(e)
-        })
-        this.zoomOutBtn.addEventListener('mouseover', () => {
-            this.zoomOutBtn.style.backgroundColor = 'lightgrey'
-        })
-        this.zoomOutBtn.addEventListener('mouseout', () => {
-            this.zoomOutBtn.style.backgroundColor = '#ffffff'
-        })
-
-        // Set common styles for buttons
-        const buttons = [this.zoomInBtn, this.zoomOutBtn]
-        buttons.forEach((btn, index) => {
-            btn.style.alignItems = 'center'
-            btn.style.justifyContent = 'center'
-            btn.style.display = 'flex'
-            btn.style.border = 'none'
-            btn.style.color = 'black'
-            btn.style.textAlign = 'center'
-            btn.style.textDecoration = 'none'
-            btn.style.padding = '4px'
-            btn.style.fontSize = '24px'
-            btn.style.fontWeight = 'bold'
-            btn.style.userSelect = 'none'
-            btn.style.backgroundColor = '#ffffff'
-            if (index === 0) btn.style.borderBottom = '1px solid grey' // Zoom in button only
-        })
-
-        // Unset parent class height and display for dual buttons
-        this.style('height', 'unset')
-        this.style('display', 'unset')
-
-        // Set position
-        if (opts.x) {
-            this.style('left', opts.x + 'px')
-        } else {
-            this.style('right', '10px')
-        }
-        if (opts.y) {
-            this.style('top', opts.y + 'px')
-        } else {
-            this.style('top', '10px')
-        }
-
-        // Append buttons to the container
-        this.div.node().appendChild(this.zoomInBtn)
-        this.div.node().appendChild(this.zoomOutBtn)
-    }
-
-    /* Zoom in */
-    zoomIn(e) {
-        this.map.setZoom(this.map.getZoom() * (1 - this.delta)).redraw()
-        if (this.onZoom) this.onZoom(e)
-    }
-
-    /* Zoom out */
-    zoomOut(e) {
-        this.map.setZoom(this.map.getZoom() * (1 + this.delta)).redraw()
-        if (this.onZoom) this.onZoom(e)
-    }
-}
+import { Button } from './Button.js'
+
+/**
+ * Button for toggling fullscreen mode
+ *
+ * @module button
+ * @author Joseph Davies, Julien Gaffuri
+ */
+export class ZoomButtons extends Button {
+    /**
+     * @param {Object} opts
+     */
+    constructor(opts) {
+        super(opts)
+
+        this.onZoom = opts.onZoom // custom user event handler
+        this.delta = opts.delta || 0.2
+
+        // Create zoom in button
+        this.zoomInBtn = document.createElement('a')
+        this.zoomInBtn.id = 'zoom-in'
+        this.zoomInBtn.className = 'gridviz-zoom-button'
+        this.zoomInBtn.title = 'Zoom in'
+        this.zoomInBtn.textContent = '+'
+        this.zoomInBtn.addEventListener('click', (e) => {
+            this.zoomIn(e)
+        })
+        this.zoomInBtn.addEventListener('mouseover', () => {
+            this.zoomInBtn.style.backgroundColor = 'lightgrey'
+        })
+        this.zoomInBtn.addEventListener('mouseout', () => {
+            this.zoomInBtn.style.backgroundColor = '#ffffff'
+        })
+
+        // Create zoom out button
+        this.zoomOutBtn = document.createElement('a')
+        this.zoomOutBtn.id = 'zoom-out'
+        this.zoomOutBtn.className = 'gridviz-zoom-button'
+        this.zoomOutBtn.title = 'Zoom out'
+        this.zoomOutBtn.textContent = '-'
+        this.zoomOutBtn.addEventListener('click', (e) => {
+            this.zoomOut(e)
+        })
+        this.zoomOutBtn.addEventListener('mouseover', () => {
+            this.zoomOutBtn.style.backgroundColor = 'lightgrey'
+        })
+        this.zoomOutBtn.addEventListener('mouseout', () => {
+            this.zoomOutBtn.style.backgroundColor = '#ffffff'
+        })
+
+        // Set common styles for buttons
+        const buttons = [this.zoomInBtn, this.zoomOutBtn]
+        buttons.forEach((btn, index) => {
+            btn.style.alignItems = 'center'
+            btn.style.justifyContent = 'center'
+            btn.style.display = 'flex'
+            btn.style.border = 'none'
+            btn.style.color = 'black'
+            btn.style.textAlign = 'center'
+            btn.style.textDecoration = 'none'
+            btn.style.padding = '4px'
+            btn.style.fontSize = '24px'
+            btn.style.fontWeight = 'bold'
+            btn.style.userSelect = 'none'
+            btn.style.backgroundColor = '#ffffff'
+            if (index === 0) btn.style.borderBottom = '1px solid grey' // Zoom in button only
+        })
+
+        // Unset parent class height and display for dual buttons
+        this.style('height', 'unset')
+        this.style('display', 'unset')
+
+        // Set position
+        if (opts.x) {
+            this.style('left', opts.x + 'px')
+        } else {
+            this.style('right', '10px')
+        }
+        if (opts.y) {
+            this.style('top', opts.y + 'px')
+        } else {
+            this.style('top', '10px')
+        }
+
+        // Append buttons to the container
+        this.div.node().appendChild(this.zoomInBtn)
+        this.div.node().appendChild(this.zoomOutBtn)
+    }
+
+    /* Zoom in */
+    zoomIn(e) {
+        this.map.setZoom(this.map.getZoom() * (1 - this.delta)).redraw()
+        if (this.onZoom) this.onZoom(e)
+    }
+
+    /* Zoom out */
+    zoomOut(e) {
+        this.map.setZoom(this.map.getZoom() * (1 + this.delta)).redraw()
+        if (this.onZoom) this.onZoom(e)
+    }
+}

package/src/core/Dataset.js

@@ -1,154 +1,154 @@
-//@ts-check
-'use strict'
-
-/**
- * A grid cell.
- * @typedef {{x: number, y: number}} Cell */
-
-/**
- * A dataset component, of grid cells.
- * @abstract
- *
- * @module core
- * @author Joseph Davies, Julien Gaffuri
- */
-export class Dataset {
-    /**
-     * @param {import("./Map.js").Map} map The map.
-     * @param {string} url The URL of the dataset.
-     * @param {number} resolution The dataset resolution, in the CRS geographical unit.
-     * @param {{preprocess?:function(Cell):boolean, mixedResolution?:function(Cell):number}} opts
-     * @abstract
-     */
-    constructor(map, url, resolution, opts = {}) {
-        /**
-         * The map.
-         * @protected
-         * @type {import("./Map.js").Map} */
-        this.map = map
-
-        /**
-         * The url of the dataset.
-         * @protected
-         * @type {string} */
-        this.url = url
-
-        /**
-         * The dataset resolution in geographical unit.
-         * @protected
-         * @type {number} */
-        this.resolution = resolution
-
-        /**
-         * In case the dataset is a dataset with cells having different resolution,
-         * this is the function returning the resolution of each cell.
-         * @protected
-         * @type {(function(Cell):number )| undefined } */
-        this.mixedResolution = opts.mixedResolution
-
-        /**
-         * A preprocess to run on each cell after loading. It can be used to apply some specific treatment before or compute a new column. And also to determine which cells to keep after loading.
-         * @type {(function(Cell):boolean )| undefined } */
-        this.preprocess = opts.preprocess || undefined
-
-        /** The cells within the view
-         * @protected
-         * @type {Array.<Cell>} */
-        this.cellsViewCache = []
-    }
-
-    /**
-     * Request data within a geographic envelope.
-     *
-     * @abstract
-     * @param {import("./GeoCanvas").Envelope|undefined} extGeo
-     * @returns {this}
-     */
-    getData(extGeo = undefined) {
-        throw new Error('Method getData not implemented.')
-    }
-
-    /**
-     * Fill the view cache with all cells which are within a geographical envelope.
-     * @abstract
-     * @param {import("./GeoCanvas").Envelope} extGeo The view geographical envelope.
-     * @returns {void}
-     */
-    updateViewCache(extGeo) {
-        throw new Error('Method updateViewCache not implemented.')
-    }
-
-    /**
-     * Get a cell under a given position, if any.
-     *
-     * @param {{x:number,y:number}} posGeo
-     * @param {Array.<Cell>} cells Some cells from the dataset (a subset if necessary, usually the view cache).
-     * @returns {Cell|undefined}
-     */
-    getCellFromPosition(posGeo, cells) {
-        //compute candidate cell position
-        /** @type {number} */
-        //const r = this.getResolution()
-        /** @type {number} */
-        //const cellX = r * Math.floor(posGeo.x / r)
-        /** @type {number} */
-        //const cellY = r * Math.floor(posGeo.y / r)
-
-        /*/get cell
-        for (const cell of cells) {
-            if (cell.x != cellX) continue
-            if (cell.y != cellY) continue
-            return cell
-        }
-        return undefined*/
-
-        //rare case of mixed resolution dataset
-        if (this.mixedResolution) {
-            for (const c of cells) {
-                /** @type {number} */
-                const r = +this.mixedResolution(c)
-                if (posGeo.x < c.x) continue
-                else if (c.x + r < posGeo.x) continue
-                else if (posGeo.y < c.y) continue
-                else if (c.y + r < posGeo.y) continue
-                else return c
-            }
-            return undefined
-        }
-
-        //common case
-
-        /** @type {number} */
-        const r = this.getResolution()
-        for (const cell of cells) {
-            if (posGeo.x < cell.x) continue
-            else if (cell.x + r < posGeo.x) continue
-            else if (posGeo.y < cell.y) continue
-            else if (cell.y + r < posGeo.y) continue
-            else return cell
-        }
-        return undefined
-    }
-
-    //getters and setters
-
-    /** @returns {number} */
-    getResolution() {
-        return this.resolution
-    }
-
-    /** @returns {Array.<Cell>} */
-    getViewCache() {
-        return this.cellsViewCache
-    }
-
-    /**
-     * Return the relevant dataset for a specified zoom.
-     * @param {number} z
-     * @param {number} minPixelsPerCell
-     * @returns {Dataset|undefined}
-     * */
-    getDataset(z, minPixelsPerCell) {
-        return this
-    }
-}
+//@ts-check
+'use strict'
+
+/**
+ * A grid cell.
+ * @typedef {{x: number, y: number}} Cell */
+
+/**
+ * A dataset component, of grid cells.
+ * @abstract
+ *
+ * @module core
+ * @author Joseph Davies, Julien Gaffuri
+ */
+export class Dataset {
+    /**
+     * @param {import("./Map.js").Map} map The map.
+     * @param {string} url The URL of the dataset.
+     * @param {number} resolution The dataset resolution, in the CRS geographical unit.
+     * @param {{preprocess?:function(Cell):boolean, mixedResolution?:function(Cell):number}} opts
+     * @abstract
+     */
+    constructor(map, url, resolution, opts = {}) {
+        /**
+         * The map.
+         * @protected
+         * @type {import("./Map.js").Map} */
+        this.map = map
+
+        /**
+         * The url of the dataset.
+         * @protected
+         * @type {string} */
+        this.url = url
+
+        /**
+         * The dataset resolution in geographical unit.
+         * @protected
+         * @type {number} */
+        this.resolution = resolution
+
+        /**
+         * In case the dataset is a dataset with cells having different resolution,
+         * this is the function returning the resolution of each cell.
+         * @protected
+         * @type {(function(Cell):number )| undefined } */
+        this.mixedResolution = opts.mixedResolution
+
+        /**
+         * A preprocess to run on each cell after loading. It can be used to apply some specific treatment before or compute a new column. And also to determine which cells to keep after loading.
+         * @type {(function(Cell):boolean )| undefined } */
+        this.preprocess = opts.preprocess || undefined
+
+        /** The cells within the view
+         * @protected
+         * @type {Array.<Cell>} */
+        this.cellsViewCache = []
+    }
+
+    /**
+     * Request data within a geographic envelope.
+     *
+     * @abstract
+     * @param {import("./GeoCanvas").Envelope|undefined} extGeo
+     * @returns {this}
+     */
+    getData(extGeo = undefined) {
+        throw new Error('Method getData not implemented.')
+    }
+
+    /**
+     * Fill the view cache with all cells which are within a geographical envelope.
+     * @abstract
+     * @param {import("./GeoCanvas").Envelope} extGeo The view geographical envelope.
+     * @returns {void}
+     */
+    updateViewCache(extGeo) {
+        throw new Error('Method updateViewCache not implemented.')
+    }
+
+    /**
+     * Get a cell under a given position, if any.
+     *
+     * @param {{x:number,y:number}} posGeo
+     * @param {Array.<Cell>} cells Some cells from the dataset (a subset if necessary, usually the view cache).
+     * @returns {Cell|undefined}
+     */
+    getCellFromPosition(posGeo, cells) {
+        //compute candidate cell position
+        /** @type {number} */
+        //const r = this.getResolution()
+        /** @type {number} */
+        //const cellX = r * Math.floor(posGeo.x / r)
+        /** @type {number} */
+        //const cellY = r * Math.floor(posGeo.y / r)
+
+        /*/get cell
+        for (const cell of cells) {
+            if (cell.x != cellX) continue
+            if (cell.y != cellY) continue
+            return cell
+        }
+        return undefined*/
+
+        //rare case of mixed resolution dataset
+        if (this.mixedResolution) {
+            for (const c of cells) {
+                /** @type {number} */
+                const r = +this.mixedResolution(c)
+                if (posGeo.x < c.x) continue
+                else if (c.x + r < posGeo.x) continue
+                else if (posGeo.y < c.y) continue
+                else if (c.y + r < posGeo.y) continue
+                else return c
+            }
+            return undefined
+        }
+
+        //common case
+
+        /** @type {number} */
+        const r = this.getResolution()
+        for (const cell of cells) {
+            if (posGeo.x < cell.x) continue
+            else if (cell.x + r < posGeo.x) continue
+            else if (posGeo.y < cell.y) continue
+            else if (cell.y + r < posGeo.y) continue
+            else return cell
+        }
+        return undefined
+    }
+
+    //getters and setters
+
+    /** @returns {number} */
+    getResolution() {
+        return this.resolution
+    }
+
+    /** @returns {Array.<Cell>} */
+    getViewCache() {
+        return this.cellsViewCache
+    }
+
+    /**
+     * Return the relevant dataset for a specified zoom.
+     * @param {number} z
+     * @param {number} minPixelsPerCell
+     * @returns {Dataset|undefined}
+     * */
+    getDataset(z, minPixelsPerCell) {
+        return this
+    }
+}