gridviz 3.0.9 → 3.0.11

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "gridviz",
-    "version": "3.0.9",
+    "version": "3.0.11",
     "description": "Visualization tool for gridded statistics",
     "keywords": [
         "statistics",
@@ -23,7 +23,7 @@
     "license": "EUPL-1.2",
     "repository": {
         "type": "git",
-        "url": "https://github.com/eurostat/gridviz.git"
+        "url": "git+https://github.com/eurostat/gridviz.git"
     },
     "bugs": {
         "url": "https://github.com/eurostat/gridviz/issues",
@@ -40,7 +40,7 @@
         "start": "export NODE_OPTIONS=--openssl-legacy-provider && webpack --config webpack.config.dev.cjs",
         "start-dev": "webpack --config webpack.config.dev.cjs",
         "server": "webpack serve -c webpack.config.dev.cjs",
-        "doc": "./node_modules/.bin/jsdoc -c docs/jsdoc/jsdoc.conf.json",
+        "doc": "jsdoc -c docs/jsdoc/jsdoc.conf.json",
         "bp": "webpack --config webpack.config.prod.cjs",
         "test": "jest"
     },
@@ -59,16 +59,11 @@
         "jsdoc": "^4.0.2"
     },
     "devDependencies": {
-        "@babel/core": "^7.9.0",
-        "@babel/plugin-transform-runtime": "^7.12.1",
-        "@babel/preset-env": "^7.9.0",
-        "@babel/runtime": "^7.12.1",
+        "@babel/preset-env": "^7.25.4",
         "babel-loader": "^8.1.0",
-        "jest": "^26.6.1",
         "jshint": "^2.12.0",
         "prettier": "2.8.8",
-        "puppeteer": "^9.1.1",
-        "webpack": "^5.89.0",
+        "webpack": "^5.94.0",
         "webpack-cli": "^5.1.4",
         "webpack-dev-server": "^4.15.1",
         "webpack-livereload-plugin": "^3.0.2"

package/src/button/Button.js

@@ -18,16 +18,15 @@ export class Button {
      * opts.y
      */
     constructor(opts = {}) {
-
         this.map = opts.map
         this.parentNode = opts.parentNode || opts.map.container
 
         // the div element
-        if (this.id) this.div = select('#' + this.id)
+        if (opts.id) this.div = select('#' + opts.id)
 
         if (!this.div || this.div.empty()) {
             this.div = select(document.createElement('div'))
-            if (this.id) this.div.attr('id', this.id)
+            if (opts.id) this.div.attr('id', opts.id)
         }
 
         if (opts.title) this.div.attr('title', opts.title)
@@ -37,7 +36,10 @@ export class Button {
         if (opts.onClickFunction) this.div.on('click', opts.onClickFunction)
 
         //set styles
-        this.style('box-shadow', '0 7px 8px rgba(0,47,103,.08), 0 0 22px rgba(0,47,103,.04), 0 12px 17px rgba(0,47,103,.04), 0 -4px 4px rgba(0,47,103,.04)') //.ecl-u-shadow-3
+        this.style(
+            'box-shadow',
+            '0 7px 8px rgba(0,47,103,.08), 0 0 22px rgba(0,47,103,.04), 0 12px 17px rgba(0,47,103,.04), 0 -4px 4px rgba(0,47,103,.04)'
+        ) //.ecl-u-shadow-3
         this.style('background-color', '#ffffff')
         this.style('position', 'absolute')
         this.style('cursor', 'pointer')
@@ -48,7 +50,6 @@ export class Button {
         this.style('height', '30px')
         // this.style(padding , '4px'
 
-
         // append to parent
         this.parentNode.appendChild(this.div.node())
     }

package/src/layer/GeoJSONLayer.js

@@ -29,11 +29,40 @@ export class GeoJSONLayer extends Layer {
          * @type {function(object):boolean} */
         this.preprocess = opts.preprocess
 
+        //for points
+        /**
+         * @private
+         * @type {function(object,number):string} */
+        this.shape = opts.shape || ((f, z) => 'circle')
+        /**
+         * In pixel
+         * @private
+         * @type {function(object,number):number} */
+        this.size = opts.size || ((f, z) => 10)
+        /**
+         * @private
+         * @type {function(object,number):string} */
+        this.strokeStyle = opts.strokeStyle || ((f, z) => 'red')
+        /**
+         * @private
+         * @type {function(object,number):string} */
+        this.fillStyle = opts.fillStyle || ((f, z) => 'black')
+        /**
+         * In pixel
+         * @private
+         * @type {function(object,number):number} */
+        this.lineWidth = opts.lineWidth || ((f, z) => 2)
+
+
+
+        //for lines
+
         /**
          * @private
          * @type {function(object,number):string} */
         this.color = opts.color || ((f, z) => 'gray')
         /**
+         * In pixel
          * @private
          * @type {function(object,number):number} */
         this.width = opts.width || ((f, z) => 2)
@@ -42,6 +71,7 @@ export class GeoJSONLayer extends Layer {
          * @type {function(object,number):Array.<number>|undefined} */
         this.lineDash = opts.lineDash || ((f, z) => undefined)
 
+
         /**
          * @private
          * @type {Array.<object> | undefined} */
@@ -53,6 +83,7 @@ export class GeoJSONLayer extends Layer {
         this.loadingStatus = 'notLoaded'
     }
 
+
     /**
      * Draw the layer.
      * @param {import("../core/GeoCanvas.js").GeoCanvas} geoCanvas The canvas where to draw the layer.
@@ -65,34 +96,73 @@ export class GeoJSONLayer extends Layer {
             return
         }
 
-        //TODO sort lines by width ?
-
         //
         const z = geoCanvas.view.z
 
         for (const f of this.fs) {
-            const cs = f.geometry.coordinates
-            if (cs.length < 2) continue
-
-            //set color
-            const col = this.color(f, z)
-            if (!col || col == 'none') continue
-            geoCanvas.ctx.strokeStyle = col
-
-            //set linewidth
-            const wP = this.width(f, z)
-            if (!wP || wP < 0) continue
-            geoCanvas.ctx.lineWidth = wP * z
-
-            //set line dash
-            const ldP = this.lineDash(f, z)
-            if (ldP) geoCanvas.ctx.setLineDash(ldP)
-
-            //draw line
-            geoCanvas.ctx.beginPath()
-            geoCanvas.ctx.moveTo(cs[0][0], cs[0][1])
-            for (let i = 1; i < cs.length; i++) geoCanvas.ctx.lineTo(cs[i][0], cs[i][1])
-            geoCanvas.ctx.stroke()
+            const gt = f.geometry.type
+
+            if (gt == "Point") {
+                const c = f.geometry.coordinates
+
+                //get style parameters for the point feature
+                const shape = this.shape(f,z)
+                if(!shape || shape=="none") continue
+                const size = this.size(f,z) * z
+                if(!size) continue
+                const strokeStyle = this.strokeStyle(f,z)
+                const fillStyle = this.fillStyle(f,z)
+                const lineWidth = this.lineWidth(f,z) * z
+
+                //set canvas drawing parameters
+                if(strokeStyle) geoCanvas.ctx.strokeStyle = strokeStyle
+                if(fillStyle) geoCanvas.ctx.fillStyle = fillStyle
+                if(lineWidth) geoCanvas.ctx.lineWidth = lineWidth
+
+                if (shape == "circle") {
+                    //draw circle - fill and stroke
+                    geoCanvas.ctx.beginPath()
+                    geoCanvas.ctx.arc(c[0], c[1], size / 2, 0, 2 * Math.PI, false)
+                    if(fillStyle) geoCanvas.ctx.fill()
+                    if(strokeStyle && lineWidth) geoCanvas.ctx.stroke()
+                } else if (shape == "square") {
+                    //draw square - fill and stroke
+                    geoCanvas.ctx.beginPath()
+                    geoCanvas.ctx.rect(c[0] - size / 2, c[1] - size / 2, size, size)
+                    if(fillStyle) geoCanvas.ctx.fill()
+                    if(strokeStyle && lineWidth) geoCanvas.ctx.stroke()
+                } else {
+                    console.error("Unexpected shape for point geojson: " + shape)
+                }
+
+            } else if (gt == "LineString") {
+
+                const cs = f.geometry.coordinates
+                if (cs.length < 2) continue
+
+                //set color
+                const col = this.color(f, z)
+                if (!col || col == 'none') continue
+                geoCanvas.ctx.strokeStyle = col
+
+                //set linewidth
+                const wP = this.width(f, z)
+                if (!wP || wP < 0) continue
+                geoCanvas.ctx.lineWidth = wP * z
+
+                //set line dash
+                const ldP = this.lineDash(f, z)
+                if (ldP) geoCanvas.ctx.setLineDash(ldP)
+
+                //draw line
+                geoCanvas.ctx.beginPath()
+                geoCanvas.ctx.moveTo(cs[0][0], cs[0][1])
+                for (let i = 1; i < cs.length; i++) geoCanvas.ctx.lineTo(cs[i][0], cs[i][1])
+                geoCanvas.ctx.stroke()
+            } else {
+                console.log("Unsupported geometry type in GeoJSONLayer: " + gt)
+            }
+
         }
 
         //...

package/src/legend/ColorDiscreteLegend.js

@@ -82,6 +82,7 @@ export class ColorDiscreteLegend extends Legend {
 
             let label = breaks[i - 1]
             if (isNaN(label) || label == undefined) continue
+            if(this.labelFormat) label = this.labelFormat(label)
 
             //label
             svg.append('text')

package/src/style/SideCategoryStyle.js

@@ -51,6 +51,7 @@ export class SideCategoryStyle extends SideStyle {
         //draw sides
 
         geoCanvas.ctx.lineCap = 'butt'
+        const r2 = resolution*0.5
         for (let side of sides) {
 
             //get category codes for both cells
@@ -73,8 +74,8 @@ export class SideCategoryStyle extends SideStyle {
                 if (code2) {
                     geoCanvas.ctx.beginPath()
                     geoCanvas.ctx.strokeStyle = this.color[code2]
-                    geoCanvas.ctx.moveTo(side.x, side.y + w2)
-                    geoCanvas.ctx.lineTo(side.x + resolution, side.y + w2)
+                    geoCanvas.ctx.moveTo(side.x-r2, side.y + w2)
+                    geoCanvas.ctx.lineTo(side.x+r2, side.y + w2)
                     geoCanvas.ctx.stroke()
                 }
 
@@ -82,8 +83,8 @@ export class SideCategoryStyle extends SideStyle {
                 if (code1) {
                     geoCanvas.ctx.beginPath()
                     geoCanvas.ctx.strokeStyle = this.color[code1]
-                    geoCanvas.ctx.moveTo(side.x, side.y - w2)
-                    geoCanvas.ctx.lineTo(side.x + resolution, side.y - w2)
+                    geoCanvas.ctx.moveTo(side.x-r2, side.y - w2)
+                    geoCanvas.ctx.lineTo(side.x+r2, side.y - w2)
                     geoCanvas.ctx.stroke()
                 }
             } else {
@@ -91,8 +92,8 @@ export class SideCategoryStyle extends SideStyle {
                 if (code2) {
                     geoCanvas.ctx.beginPath()
                     geoCanvas.ctx.strokeStyle = this.color[code2]
-                    geoCanvas.ctx.moveTo(side.x + w2, side.y)
-                    geoCanvas.ctx.lineTo(side.x + w2, side.y + resolution)
+                    geoCanvas.ctx.moveTo(side.x + w2, side.y-r2)
+                    geoCanvas.ctx.lineTo(side.x + w2, side.y+r2)
                     geoCanvas.ctx.stroke()
                 }
 
@@ -100,8 +101,8 @@ export class SideCategoryStyle extends SideStyle {
                 if (code1) {
                     geoCanvas.ctx.beginPath()
                     geoCanvas.ctx.strokeStyle = this.color[code1]
-                    geoCanvas.ctx.moveTo(side.x - w2, side.y)
-                    geoCanvas.ctx.lineTo(side.x - w2, side.y + resolution)
+                    geoCanvas.ctx.moveTo(side.x - w2, side.y-r2)
+                    geoCanvas.ctx.lineTo(side.x - w2, side.y+r2)
                     geoCanvas.ctx.stroke()
                 }
             }