gridviz 3.0.0 → 3.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "gridviz",
-    "version": "3.0.0",
+    "version": "3.0.2",
     "description": "Visualization tool for gridded statistics",
     "keywords": [
         "statistics",
@@ -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 src/ src/dataset src/legend src/style -d docs/jsdoc",
+        "doc": "./node_modules/.bin/jsdoc -c docs/jsdoc/jsdoc.conf.json",
         "bp": "webpack --config webpack.config.prod.cjs",
         "test": "jest"
     },
@@ -55,7 +55,8 @@
         "d3-random": "^3.0.1",
         "d3-scale": "^4.0.2",
         "d3-selection": "^3.0.0",
-        "d3-zoom": "^3.0.0"
+        "d3-zoom": "^3.0.0",
+        "jsdoc": "^4.0.2"
     },
     "devDependencies": {
         "@babel/core": "^7.9.0",

package/src/button/Button.js

@@ -3,6 +3,7 @@ import { select } from 'd3-selection'
 /**
  * Parent class for button elements used to interact with the gridviz viewer.
  *
+ * @module button
  * @author Joseph Davies, Julien Gaffuri
  */
 export class Button {

package/src/button/FullscreenButton.js

@@ -3,6 +3,7 @@ import { Button } from './Button.js'
 /**
  * Button for toggling fullscreen mode
  *
+ * @module button
  * @author Joseph Davies, Julien Gaffuri
  */
 export class FullscreenButton extends Button {

package/src/button/ZoomButtons.js

@@ -3,6 +3,7 @@ import { Button } from './Button.js'
 /**
  * Button for toggling fullscreen mode
  *
+ * @module button
  * @author Joseph Davies, Julien Gaffuri
  */
 export class ZoomButtons extends Button {

package/src/core/Dataset.js

@@ -9,6 +9,7 @@
  * A dataset component, of grid cells.
  * @abstract
  *
+ * @module core
  * @author Joseph Davies, Julien Gaffuri
  */
 export class Dataset {
@@ -20,7 +21,6 @@ export class Dataset {
      * @abstract
      */
     constructor(map, url, resolution, opts = {}) {
-        opts = opts || {}
 
         /**
          * The map.

package/src/core/Drawable.js

@@ -5,6 +5,7 @@
  * This is an abstract class used to group elements shared between Layer and Style classes.
  * 
  * @abstract
+ * @module core
  * @author Joseph Davies, Julien Gaffuri
  */
 export class Drawable {

package/src/core/GeoCanvas.js

@@ -13,6 +13,7 @@ import { zoom as d3zoom, zoomIdentity } from 'd3-zoom'
 /**
  * A HTML canvas for geo data display, enhanced with zoom and pan capabilities.
  *
+ * @module core
  * @author Joseph Davies, Julien Gaffuri
  */
 export class GeoCanvas {

package/src/core/Layer.js

@@ -4,6 +4,7 @@
 import { Drawable } from "./Drawable.js"
 
 /**
+ * @module core
  * @abstract
  * @author Joseph Davies, Julien Gaffuri
  */

package/src/core/Legend.js

@@ -6,6 +6,7 @@ import { select } from 'd3-selection'
 /**
  * A legend container.
  *
+ * @module core
  * @author Joseph Davies, Julien Gaffuri
  */
 export class Legend {

package/src/core/Map.js

@@ -13,6 +13,7 @@ import { select } from 'd3-selection'
 /**
  * A gridviz application.
  *
+ * @module core
  * @author Joseph Davies, Julien Gaffuri
  */
 export class Map {
@@ -135,6 +136,20 @@ export class Map {
         //.style("visibility", "hidden")
     }
 
+    /**
+     * Set/get layer stack.
+     * 
+     * @param {undefined|import("./Layer.js").Layer|import("./Layer.js").Layer[]} layers 
+     * @returns { this | import("./Layer.js").Layer[] }
+     */
+    layers_(layers) {
+        if (arguments.length === 0) return this.layers
+        if (arguments.length === 1)
+            if (Array.isArray(layers)) this.layers = layers
+            else this.layers = [layers]
+        else this.layers = arguments
+        return this
+    }
 
     /** @returns {this} */
     redraw() {

package/src/core/MultiResolutionDataset.js

@@ -7,6 +7,7 @@
  *
  * @abstract
  *
+ * @module core
  * @author Joseph Davies, Julien Gaffuri
  */
 export class MultiResolutionDataset {

package/src/core/Style.js

@@ -13,6 +13,7 @@ import { Drawable } from "./Drawable.js"
 /**
  * A style, to show a grid dataset.
  *
+ * @module core
  * @author Joseph Davies, Julien Gaffuri
  */
 export class Style extends Drawable {
@@ -73,7 +74,7 @@ export class Style extends Drawable {
         return this
     }
 
-    /** Hide all legend elements of the style, if any
+    /** Update legends of the style, if any
      * @param {object} opts
      * @returns {this} */
     updateLegends(opts) {
@@ -81,4 +82,12 @@ export class Style extends Drawable {
         return this
     }
 
+    /**
+     * @param {Array.<import("./Legend").Legend>} legends
+     * @returns {this} */
+    addLegends(legends) {
+        for (let legend of legends)
+            this.legends.push(legend)
+        return this
+    }
 }

package/src/core/Tooltip.js

@@ -7,6 +7,7 @@ import { select } from 'd3-selection'
 /**
  * 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.
+ * @module core
  */
 export class Tooltip {
     /**

package/src/dataset/COGeo.js

@@ -8,6 +8,7 @@ import { Dataset } from '../core/Dataset.js'
  * A dataset composed of a COGeo file.
  * @see https://www.cogeo.org/
  *
+ * @module dataset
  * @author Joseph Davies, Julien Gaffuri
  */
 export class COGeo extends Dataset {

package/src/dataset/CSVGrid.js

@@ -9,6 +9,7 @@ import { Dataset } from '../core/Dataset.js'
 /**
  * A dataset composed of a single CSV file (not tiled).
  *
+ * @module dataset
  * @author Joseph Davies, Julien Gaffuri
  */
 export class CSVGrid extends Dataset {

package/src/dataset/GeoTIFF.js

@@ -8,6 +8,7 @@ import { Dataset } from '../core/Dataset.js'
  * @todo
  * A dataset composed of a single GeoTiff file.
  *
+ * @module dataset
  * @author Joseph Davies, Julien Gaffuri
  */
 export class GeoTIFF extends Dataset {

package/src/dataset/JSGrid.js

@@ -1,16 +1,16 @@
 //@ts-check
 'use strict'
 
-/** @typedef {{ dims: object, crs: string, tileSizeCell: number, originPoint: {x:number,y:number}, resolutionGeo: number, tilingBounds:import("../core/GeoCanvas.js").Envelope }} GridInfo */
-
 import { Dataset } from '../core/Dataset.js'
 
 /**
  * A dataset composed of cells defined in javascript, or loaded outside of gridviz map.
  *
+ * @module dataset
  * @author Joseph Davies, Julien Gaffuri
  */
 export class JSGrid extends Dataset {
+
     /**
      * @param {number} resolution The dataset resolution in geographical unit.
      * @param {Array.<Object>} cells The cells.
@@ -20,7 +20,7 @@ export class JSGrid extends Dataset {
 
         /**
          * @private
-         * @type {Array.<import("../core/MultiResolutionDataset.js").Cell>} */
+         * @type {Array.<import('../core/Dataset.js').Cell>} */
         this.cells = cells || []
     }
 

package/src/dataset/TiledGrid.js

@@ -13,6 +13,7 @@ import { json, csv } from 'd3-fetch'
 /**
  * A tiled dataset, composed of CSV tiles.
  *
+ * @module dataset
  * @author Joseph Davies, Julien Gaffuri
  */
 export class TiledGrid extends Dataset {

package/src/index.js

@@ -3,7 +3,7 @@
 
 // the application
 export { Map } from './core/Map.js'
-//export { GeoCanvas } from './GeoCanvas.js'
+export { GeoCanvas } from './core/GeoCanvas.js'
 export { Style } from './core/Style.js'
 export { Layer } from './core/Layer.js'
 export { MultiResolutionDataset } from './core/MultiResolutionDataset.js'
@@ -25,8 +25,8 @@ export { SideStyle } from './style/SideStyle.js'
 //export { ContourStyle } from './style/ContourStyle.js'
 export { SideCategoryStyle } from './style/SideCategoryStyle.js'
 export { DotDensityStyle } from './style/DotDensityStyle.js'
-//export { TanakaStyle } from './style/TanakaStyle.js'
-//export { LegoStyle } from './style/LegoStyle.js'
+export { TanakaStyle } from './style/TanakaStyle.js'
+export { LegoStyle } from './style/LegoStyle.js'
 export { SquareColorWebGLStyle } from './style/SquareColorWebGLStyle.js'
 export { SquareColorCategoryWebGLStyle } from './style/SquareColorCategoryWebGLStyle.js'
 export { MosaicStyle } from './style/MosaicStyle.js'

package/src/layer/BackgroundLayer.js

@@ -9,6 +9,7 @@ import { Layer } from '../core/Layer.js'
  * See https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames
  * https://www.maptiler.com/google-maps-coordinates-tile-bounds-projection/#6/27.88/44.48
  * 
+ * @module layer
  * @author Julien Gaffuri
  */
 export class BackgroundLayer extends Layer {

package/src/layer/BackgroundLayerWMS.js

@@ -7,6 +7,7 @@ import { Layer } from '../core/Layer.js'
  *
  * A map WMS background layer.
  * 
+ * @module layer
  * @author Julien Gaffuri
  */
 export class BackgroundLayerWMS extends Layer {

package/src/layer/GeoJSONLayer.js

@@ -5,6 +5,7 @@ import { Layer } from '../core/Layer.js'
 import { json } from 'd3-fetch'
 
 /**
+ * @module layer
  * @author Joseph Davies, Julien Gaffuri
  */
 export class GeoJSONLayer extends Layer {

package/src/layer/GridLayer.js

@@ -6,6 +6,7 @@ import { Layer } from '../core/Layer.js'
 /**
  * A layer, which specifies a dataset to be shown with specified styles.
  *
+ * @module layer
  * @author Joseph Davies, Julien Gaffuri
  */
 export class GridLayer extends Layer {
@@ -20,6 +21,7 @@ export class GridLayer extends Layer {
 
         /** @type {import("../core/Dataset").Dataset|import("../core/MultiResolutionDataset").MultiResolutionDataset} */
         this.dataset = dataset
+
         /** @type {Array.<import("../core/Style").Style>} */
         this.styles = styles
 
@@ -121,6 +123,25 @@ export class GridLayer extends Layer {
         return this.dataset.getDataset(z, this.minPixelsPerCell);
     }
 
+
+
+    /**
+     * Set/get style stack.
+     * 
+     * @param {undefined|import("../core/Style").Style|Array.<import("../core/Style").Style>} styles 
+     * @returns { this | Array.<import("../core/Style").Style> }
+     */
+    styles_(styles) {
+        if (arguments.length === 0) return this.styles
+        if (arguments.length === 1)
+            if (Array.isArray(styles)) this.styles = styles
+            else this.styles = [styles]
+        else this.styles = arguments
+        return this
+    }
+
+
+
     /**
      * The default function returning cell information as HTML.
      * This is typically used for tooltip information.

package/src/layer/LabelLayer.js

@@ -13,6 +13,7 @@ import { csv } from 'd3-fetch'
  * If the label data is not in the expected format or in the same CRS as the grid, it can be corrected with the "preprocess" function.
  * The selection of the label, their style (font, weight, etc.) and color can be specified depending on their importance and the zoom level.
  *
+ * @module layer
  * @author Joseph Davies, Julien Gaffuri
  */
 export class LabelLayer extends Layer {

package/src/legend/ColorCategoryLegend.js

@@ -6,6 +6,7 @@ import { Legend } from '../core/Legend.js'
 /**
  * A legend element for color categrories.
  *
+ * @module legend
  * @author Joseph Davies, Julien Gaffuri
  */
 export class ColorCategoryLegend extends Legend {

package/src/legend/ColorDiscreteLegend.js

@@ -7,6 +7,7 @@ import { Legend } from '../core/Legend.js'
  * A legend element for discrete color style.
  * Inspiration: https://observablehq.com/@d3/color-legend
  *
+ * @module legend
  * @author Julien Gaffuri
  */
 export class ColorDiscreteLegend extends Legend {
@@ -43,6 +44,7 @@ export class ColorDiscreteLegend extends Legend {
         //get colors and breaks
         const colors = this.colors(opts.viewScale)
         const breaks = this.breaks(opts.viewScale)
+        if (!breaks) return
 
         //classes
         const nb = colors.length

package/src/legend/ColorLegend.js

@@ -7,6 +7,7 @@ import { Legend } from '../core/Legend.js'
  * A legend element for continuous color style.
  * Inspiration: https://observablehq.com/@d3/color-legend
  *
+ * @module legend
  * @author Joseph Davies, Julien Gaffuri
  */
 export class ColorLegend extends Legend {

package/src/legend/OrientationLegend.js

@@ -6,6 +6,7 @@ import { Legend } from '../core/Legend.js'
 /**
  * A legend element for segment orientation.
  *
+ * @module legend
  * @author Joseph Davies, Julien Gaffuri
  */
 export class OrientationLegend extends Legend {

package/src/legend/SizeLegend.js

@@ -8,6 +8,7 @@ import { max } from 'd3-array'
 /**
  * A legend element for proportional symbols.
  *
+ * @module legend
  * @author Joseph Davies, Julien Gaffuri
  */
 export class SizeLegend extends Legend {
@@ -198,10 +199,11 @@ export function sizeDiscreteViewScaleLegend(classNumber, opts = {}) {
     const f = opts.labelFormat || (x => x)
     const labelText = opts.labelText || defaultLabelText(f)
     const legends = []
+    const viewScaleFun = opts.viewScaleFun || (t => t) //TODO do it differently? At sizelegend level !
     for (let i = classNumber - 1; i >= 0; i--) {
         opts.title = i == classNumber - 1 ? opts.title : undefined
-        opts.size = (viewScale) => viewScale.values[i]
-        opts.label = (viewScale) => labelText(viewScale.breaks[i - 1], viewScale.breaks[i])
+        opts.size = (viewScale) => viewScaleFun(viewScale).values[i]
+        opts.label = (viewScale) => labelText(viewScaleFun(viewScale).breaks[i - 1], viewScaleFun(viewScale).breaks[i])
         legends.push(new SizeLegend(opts))
     }
     return legends

package/src/style/CompositionStyle.js

@@ -11,6 +11,7 @@ import { Style } from '../core/Style.js'
  * For a list of supported symbols, @see CompositionType
  * The symbol can be scaled depending on the cell importance.
  *
+ * @module style
  * @author Julien Gaffuri
  */
 export class CompositionStyle extends Style {

package/src/style/ContourStyle.js

@@ -7,6 +7,7 @@ import { SideStyle } from './SideStyle.js'
 
 /**
  *
+ * @module style
  * @author Julien Gaffuri
  */
 export class ContourStyle extends SideStyle {

package/src/style/DotDensityStyle.js

@@ -9,6 +9,7 @@ import { color } from 'd3-color'
 
 /**
  *
+ * @module style
  * @author Julien Gaffuri
  */
 export class DotDensityStyle extends Style {

package/src/style/IsoFenceStyle.js

@@ -7,6 +7,7 @@ import { SideStyle } from './SideStyle.js'
 /** @typedef {{x:number,y:number,or:"v"|"h",c1:import('../core/Dataset.js').Cell|undefined,c2:import('../core/Dataset.js').Cell|undefined}} Side */
 
 /**
+ * @module style
  * @author Julien Gaffuri
  */
 export class IsoFenceStyle extends Style {
@@ -77,57 +78,7 @@ export class IsoFenceStyle extends Style {
 
         //make sides
         /**  @type {Array.<Side>} */
-        const sides = SideStyle.buildSides(cells, resolution, this.angle % 180 != 90 && this.sVert, this.angle % 180 != 0 && this.sHor, true)
-
-
-
-        /*const sides = []
-
-        //make horizontal sides - except when angle%180=0
-        //sort cells by x and y
-        if (this.angle % 180 != 90 && this.sVert) {
-            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 + resolution == 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 + resolution, 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 - except when angle%180=90
-        //sort cells by y and x
-        if (this.angle % 180 != 0 && this.sHor) {
-            cells.sort((c1, c2) => (c2.y == c1.y ? c1.x - c2.x : c1.y - c2.y))
-            let c1 = cells[0]
-            for (let i = 1; i < cells.length; i++) {
-                let c2 = cells[i]
-
-                if ((c1.x + resolution == 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 + resolution, 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
-            }
-        }*/
+        const sides = SideStyle.buildSides(cells, resolution, this.angle % 180 != 90 && this.sVert, this.angle % 180 != 0 && this.sHor)
 
         //
         if (sides.length == 0) return
@@ -163,15 +114,16 @@ export class IsoFenceStyle extends Style {
 
         //draw sides
         geoCanvas.ctx.lineCap = "round";
-        for (let s of sides) {
+        for (let side of sides) {
+            const c1 = side.c1, c2 = side.c2, x = side.x, y = side.y
 
             //heights - in geo
-            const hG1 = s.c1 ? this.height(s.c1, resolution, z, viewScale) : 0,
-                hG2 = s.c2 ? this.height(s.c2, resolution, z, viewScale) : 0
+            const hG1 = c1 ? this.height(c1, resolution, z, viewScale) : 0,
+                hG2 = c2 ? this.height(c2, resolution, z, viewScale) : 0
 
             //compute totals for both cells
-            const total1 = computeTotal(s.c1, cats),
-                total2 = computeTotal(s.c2, cats)
+            const total1 = computeTotal(c1, cats),
+                total2 = computeTotal(c2, cats)
             if (total1 == 0 && total2 == 0) continue
 
             let cumul1 = 0, cumul2 = 0
@@ -179,8 +131,8 @@ export class IsoFenceStyle extends Style {
                 //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
+                let v1 = c1 ? +c1[column] : 0
+                let v2 = c2 ? +c2[column] : 0
                 if (v1 == 0 && v2 == 0) continue
 
                 //compute heights
@@ -191,26 +143,26 @@ export class IsoFenceStyle extends Style {
 
                 //make path
                 geoCanvas.ctx.beginPath()
-                if (s.or == "h") {
+                if (side.or == "h") {
                     //horizontal side - vertical section
                     //bottom left
-                    geoCanvas.ctx.moveTo(s.x + h1 * cos + dx, s.y - r2 + h1 * sin + dy)
+                    geoCanvas.ctx.moveTo(x + h1 * cos + dx, y - r2 + h1 * sin + dy)
                     //top left
-                    geoCanvas.ctx.lineTo(s.x + h2 * cos + dx, s.y + r2 + h2 * sin + dy)
+                    geoCanvas.ctx.lineTo(x + h2 * cos + dx, y + r2 + h2 * sin + dy)
                     //top right
-                    geoCanvas.ctx.lineTo(s.x + h2n * cos + dx, s.y + r2 + h2n * sin + dy)
+                    geoCanvas.ctx.lineTo(x + h2n * cos + dx, y + r2 + h2n * sin + dy)
                     //bottom right
-                    geoCanvas.ctx.lineTo(s.x + h1n * cos + dx, s.y - r2 + h1n * sin + dy)
+                    geoCanvas.ctx.lineTo(x + h1n * cos + dx, y - r2 + h1n * sin + dy)
                 } else {
                     //vertical side - horizontal section
                     //bottom left
-                    geoCanvas.ctx.moveTo(s.x - r2 + h1 * cos + dx, s.y + h1 * sin + dy)
+                    geoCanvas.ctx.moveTo(x - r2 + h1 * cos + dx, y + h1 * sin + dy)
                     //bottom right
-                    geoCanvas.ctx.lineTo(s.x + r2 + h2 * cos + dx, s.y + h2 * sin + dy)
+                    geoCanvas.ctx.lineTo(x + r2 + h2 * cos + dx, y + h2 * sin + dy)
                     //top right
-                    geoCanvas.ctx.lineTo(s.x + r2 + h2n * cos + dx, s.y + h2n * sin + dy)
+                    geoCanvas.ctx.lineTo(x + r2 + h2n * cos + dx, y + h2n * sin + dy)
                     //top left
-                    geoCanvas.ctx.lineTo(s.x - r2 + h1n * cos + dx, s.y + h1n * sin + dy)
+                    geoCanvas.ctx.lineTo(x - r2 + h1n * cos + dx, y + h1n * sin + dy)
                 }
                 //cg.ctx.closePath()
 
@@ -223,11 +175,11 @@ export class IsoFenceStyle extends Style {
 
                 //TODO draw only one line
                 //draw corner line
-                //if (s.or == "h") {
-                drawCornerLine(s.c1)
-                drawCornerLine(s.c2)
-                //if (this.angle > 0 && s.or == "h") drawCornerLine(s.c2)
-                //else drawCornerLine(s.c2)
+                //if (side.or == "h") {
+                drawCornerLine(c1)
+                drawCornerLine(c2)
+                //if (this.angle > 0 && side.or == "h") drawCornerLine(c2)
+                //else drawCornerLine(c2)
                 //}
             }
         }

package/src/style/JoyPlotStyle.js

@@ -4,7 +4,7 @@
 import { Style } from '../core/Style.js'
 
 /**
- *
+ * @module style
  * @author Julien Gaffuri
  */
 export class JoyPlotStyle extends Style {