gridviz 2.1.13 → 2.1.15

package/src/Style.js

@@ -1,129 +1,131 @@
-//@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},visible?:boolean,alpha?:function(number):number,blendOperation?:function(number):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) {
-        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 }))
-
-        /** An attribute to specify if a style should be drawn or not
-         * @type {boolean} */
-        this.visible = opts.visible === false ? false : true
-
-        /** A function returning the alpha (transparency/opacity), between 0.0 (fully transparent) and 1.0 (fully opaque).
-         *  The function parameter is the zoom factor.
-         * (see CanvasRenderingContext2D: globalAlpha property)
-         * @type {function(number):number|undefined} */
-        this.alpha = opts.alpha
-
-        /** 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 => "source-over")
-
-        /** 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 }
-    }
-}
+//@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.
+ *
+ * @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},visible?:boolean,alpha?:function(number):number,blendOperation?:function(number):GlobalCompositeOperation,minZoom?:number,maxZoom?:number,drawFun?:function}} opts
+     */
+    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 }))
+
+        /** An attribute to specify if a style should be drawn or not
+         * @type {boolean} */
+        this.visible = opts.visible === false ? false : true
+
+        /** A function returning the alpha (transparency/opacity), between 0.0 (fully transparent) and 1.0 (fully opaque).
+         *  The function parameter is the zoom factor.
+         * (see CanvasRenderingContext2D: globalAlpha property)
+         * @type {function(number):number|undefined} */
+        this.alpha = opts.alpha
+
+        /** 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 => "source-over")
+
+        /** 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
+
+        /** A draw function for the style.
+         * @type {function} */
+        this.drawFun = opts.drawFun
+
+        //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) {
+        if (this.drawFun) this.drawFun(cells, resolution, cg)
+        else 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

@@ -1,180 +1,182 @@
-//@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
-        /** @type {HTMLElement} */
-        this.parentElement = opts.parentElement || document.body
-
-        /**
-         * @public
-         * @type {import("d3-selection").Selection} */
-        this.tooltip = select('#' + this.div)
-        if (this.tooltip.empty())
-            this.tooltip = select(
-                '#' + this.parentElement.id && this.parentElement.id != ''
-                    ? '#' + this.parentElement.id
-                    : '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')
-        this.tooltip.style('text-wrap', 'nowrap')
-
-        // aria-labels (thanks to wahlatlas)
-        this.tooltip.attr('role', 'tooltip').attr('aria-live', 'polite')
-    }
-
-    /** 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) {
-        let parentRect = this.parentElement.getBoundingClientRect()
-
-        let x = event.pageX + this.xOffset
-        let y = event.pageY - this.yOffset
-
-        this.tooltip.style('left', x + 'px').style('top', y + 'px')
-
-        this.ensureTooltipInsideContainer(event, parentRect)
-    }
-
-    /*
-	my.mouseover = function (event, html) {
-		if (html) my.html(html);
-		my.setPosition(event);
-		my.show()
-		//this.ensureTooltipInsideContainer();
-	};
-	
-	my.mousemove = function (event) {
-		my.setPosition(event);
-		//this.ensureTooltipInsideContainer();
-	};
-	
-	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 ensureTooltipInsideContainer
-     * @description Prevents the tooltip from overflowing out of the App container (ensures that the tooltip is inside the gridviz container)
-     * @param {MouseEvent} event
-     * @param {DOMRect} parentRect
-     */
-    ensureTooltipInsideContainer = function (event, parentRect) {
-        let node = this.tooltip.node()
-        let parentWidth = parentRect.width
-        let parentHeight = parentRect.height
-
-        //too far right
-        if (node.offsetLeft > parentRect.left + parentWidth - node.clientWidth) {
-            let left = event.x - node.clientWidth - this.xOffset
-            node.style.left = left + 'px'
-            // check if mouse covers tooltip
-            if (node.offsetLeft + node.clientWidth > event.x) {
-                //move tooltip left so it doesnt cover mouse
-                let left2 = event.x - node.clientWidth - this.xOffset
-                node.style.left = left2 + 'px'
-            }
-            // node.style.top = node.offsetTop + config.yOffset + "px";
-        }
-
-        //too far down
-        if (node.offsetTop + node.clientHeight > parentRect.top + parentHeight) {
-            node.style.top = node.offsetTop - node.clientHeight + 'px'
-        }
-
-        //too far up
-        if (node.offsetTop < parentRect.top) {
-            node.style.top = parentRect.top + this.yOffset + 'px'
-        }
-    }
-}
+//@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'] || '0px'
+        /** @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
+        /** @type {HTMLElement} */
+        this.parentElement = opts.parentElement || document.body
+
+        /**
+         * @public
+         * @type {import("d3-selection").Selection} */
+        this.tooltip = select('#' + this.div)
+
+        if (this.tooltip.empty()) {
+            //create tooltip DOM node
+            // this.tooltip = select(
+            //     '#' + this.parentElement.id && this.parentElement.id != ''
+            //         ? '#' + this.parentElement.id
+            //         : 'body'
+            // )
+            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')
+        this.tooltip.style('text-wrap', 'nowrap')
+
+        // aria-labels (thanks to wahlatlas)
+        this.tooltip.attr('role', 'tooltip').attr('aria-live', 'polite')
+    }
+
+    /** 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) {
+        let parentRect = this.parentElement.getBoundingClientRect()
+
+        let x = event.pageX + this.xOffset
+        let y = event.pageY - this.yOffset
+
+        this.tooltip.style('left', x + 'px').style('top', y + 'px')
+
+        this.ensureTooltipInsideContainer(event, parentRect)
+    }
+
+    /*
+	my.mouseover = function (event, html) {
+		if (html) my.html(html);
+		my.setPosition(event);
+		my.show()
+		//this.ensureTooltipInsideContainer();
+	};
+	
+	my.mousemove = function (event) {
+		my.setPosition(event);
+		//this.ensureTooltipInsideContainer();
+	};
+	
+	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 ensureTooltipInsideContainer
+     * @description Prevents the tooltip from overflowing out of the App container (ensures that the tooltip is inside the gridviz container)
+     * @param {MouseEvent} event
+     * @param {DOMRect} parentRect
+     */
+    ensureTooltipInsideContainer = function (event, parentRect) {
+        let node = this.tooltip.node()
+        let parentWidth = parentRect.width
+        let parentHeight = parentRect.height
+
+        //too far right
+        if (node.offsetLeft > parentRect.left + parentWidth - node.clientWidth) {
+            let left = event.x - node.clientWidth - this.xOffset
+            node.style.left = left + 'px'
+            // check if mouse covers tooltip
+            if (node.offsetLeft + node.clientWidth > event.x) {
+                //move tooltip left so it doesnt cover mouse
+                let left2 = event.x - node.clientWidth - this.xOffset
+                node.style.left = left2 + 'px'
+            }
+            // node.style.top = node.offsetTop + config.yOffset + "px";
+        }
+
+        //too far down
+        if (node.offsetTop + node.clientHeight > parentRect.top + parentHeight) {
+            node.style.top = node.offsetTop - node.clientHeight + 'px'
+        }
+
+        //too far up
+        if (node.offsetTop < parentRect.top) {
+            node.style.top = parentRect.top + this.yOffset + 'px'
+        }
+    }
+}