gridviz 3.0.1 → 3.0.3

package/src/style/ImageStyle.js

@@ -0,0 +1,81 @@
+//@ts-check
+'use strict'
+
+import { Style } from '../core/Style.js'
+
+/**
+ * @module style
+ * @author Julien Gaffuri
+ */
+export class ImageStyle extends Style {
+
+    /** @param {object} opts */
+    constructor(opts) {
+        super(opts)
+        opts = opts || {}
+
+        /** A function returning the image code of a cell.
+         * @type {function(import('../core/Dataset.js').Cell, number, number, object):string} */
+        this.imageCode = opts.imageCode || (() => '') //(c,r,z,vs) => {}
+
+        /** The dictionnary code -> image
+         *  @type {object}        */
+        this.images = opts.images || {}
+
+        /** The image size in ground meters
+         *  @type {function(import('../core/Dataset.js').Cell, number, number, object):number}        */
+        this.size = opts.size || ((cell, resolution) => resolution)
+    }
+
+    /**
+     * @param {Array.<import("../core/Dataset.js").Cell>} cells
+     * @param {import("../core/GeoCanvas.js").GeoCanvas} geoCanvas
+     * @param {number} resolution
+     * @override
+     */
+    draw(cells, geoCanvas, resolution) {
+
+        //
+        const z = geoCanvas.view.z,
+            resolutionPix = resolution / z
+
+        //get view scale
+        const viewScale = this.viewScale ? this.viewScale(cells, resolution, z) : undefined
+
+        //draw in screen coordinates
+        geoCanvas.initCanvasTransform()
+
+        //
+        for (let cell of cells) {
+
+            //get cell image code
+            const code = this.imageCode(cell, resolution, z, viewScale)
+
+            //get image
+            const image = this.images[code]
+            if (!image) continue
+
+            //size and position values
+            let sizePix = this.size(cell, resolution, z, viewScale) / z
+            if (!sizePix) continue
+            const d = (resolutionPix - sizePix) / 2
+
+            try {
+                geoCanvas.ctx.drawImage(image, geoCanvas.geoToPixX(cell.x) + d, geoCanvas.geoToPixY(cell.y) + d -resolutionPix, sizePix, sizePix)
+
+                /*/red color filter
+                geoCanvas.ctx.globalCompositeOperation = 'source-in';
+                geoCanvas.ctx.fillStyle = 'red';
+                geoCanvas.ctx.fillRect(geoCanvas.geoToPixX(cell.x) + d, geoCanvas.geoToPixY(cell.y) + d, sizePix, sizePix);
+                geoCanvas.ctx.globalCompositeOperation = 'source-over';*/
+            } catch (error) {
+                console.error(error)
+            }
+
+        }
+
+
+        //update legends
+        this.updateLegends({ style: this, resolution: resolution, z: z, viewScale: viewScale })
+    }
+}

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 {

package/src/style/LegoStyle.js

@@ -7,21 +7,18 @@ import { SquareColorCategoryWebGLStyle } from './SquareColorCategoryWebGLStyle.j
 import { Style } from '../core/Style.js'
 
 /**
+ * @module style
  * @author Julien Gaffuri
  */
 export class LegoStyle {
-    /**
-     * @param {string} col
-     * @param {object} opts
-     * @returns {Array.<Style>}
-     */
-    static get(col, opts) {
+
+    static get(value, breaks, colors, opts = {}) {
         opts = opts || {}
 
         //the colors
         //http://www.jennyscrayoncollection.com/2021/06/all-current-lego-colors.html
         //https://leonawicz.github.io/legocolors/reference/figures/README-plot-1.png
-        opts.colors = opts.colors || [
+        /*opts.colors = opts.colors || [
             '#00852b', //darker green
             '#afd246', //light green
             '#fac80a', //dark yellow
@@ -32,18 +29,18 @@ export class LegoStyle {
             '#720012', //dark red
             //"purple",
             //"#eee" //whithe
-        ]
+        ]*/
 
         opts.colDark = opts.colDark || '#333'
         opts.colBright = opts.colBright || '#aaa'
         opts.widthFactor = opts.widthFactor || 0.12
 
         //reuse tanaka as basis
-        const ts = TanakaStyle.get(col, opts)
+        const ts = TanakaStyle.get(value, breaks, colors, opts)
         //style to show limits between pieces
         const sst = new StrokeStyle({
             strokeColor: () => '#666',
-            strokeWidth: (v, r, s, z) => 0.2 * z,
+            strokeWidth: (c, r, z) => 0.2 * z,
             filter: opts.filter,
         })
 
@@ -56,20 +53,21 @@ export class LegoStyle {
     }
 
     /**
-     * @param {function(string):string} col
+     * @param {function(import('../core/Dataset.js').Cell):string} code
+     * @param {object} color
      * @param {object} opts
      * @returns {Array.<Style>}
      */
-    static getCat(col, opts) {
+    static getCategory(code, color, opts) {
         opts = opts || {}
 
         opts.colDark = opts.colDark || '#333'
         opts.colBright = opts.colBright || '#aaa'
 
         //
-        const s = new SquareColorCategoryWebGLStyle({ colorCol: col, color: opts.color })
+        const s = new SquareColorCategoryWebGLStyle({ code: code, color: color })
         //style to show limits between pieces
-        const sst = new StrokeStyle({ strokeColor: () => '#666', strokeWidth: (v, r, s, z) => 0.2 * z })
+        const sst = new StrokeStyle({ strokeColor: () => '#666', strokeWidth: (c, r, z) => 0.2 * z })
 
         return [s, sst, new LegoTopStyle({ colDark: opts.colDark, colBright: opts.colBright })]
     }
@@ -87,26 +85,26 @@ class LegoTopStyle extends Style {
         this.colBright = opts.colBright || '#aaa'
     }
 
-    draw(cells, r, cg) {
+    draw(cells, geoCanvas, r) {
         //filter
         if (this.filter) cells = cells.filter(this.filter)
 
-        cg.ctx.lineWidth = 0.6 * cg.view.z
+        geoCanvas.ctx.lineWidth = 0.6 * geoCanvas.view.z
 
         //dark part
-        cg.ctx.strokeStyle = this.colDark
+        geoCanvas.ctx.strokeStyle = this.colDark
         for (let c of cells) {
-            cg.ctx.beginPath()
-            cg.ctx.arc(c.x + r * 0.5, c.y + r * 0.5, r * 0.55 * 0.5, Math.PI / 4, -Math.PI * (3 / 4), true)
-            cg.ctx.stroke()
+            geoCanvas.ctx.beginPath()
+            geoCanvas.ctx.arc(c.x + r * 0.5, c.y + r * 0.5, r * 0.55 * 0.5, Math.PI / 4, -Math.PI * (3 / 4), true)
+            geoCanvas.ctx.stroke()
         }
 
         //bright part
-        cg.ctx.strokeStyle = this.colBright
+        geoCanvas.ctx.strokeStyle = this.colBright
         for (let c of cells) {
-            cg.ctx.beginPath()
-            cg.ctx.arc(c.x + r * 0.5, c.y + r * 0.5, r * 0.55 * 0.5, Math.PI / 4, -Math.PI * (3 / 4), false)
-            cg.ctx.stroke()
+            geoCanvas.ctx.beginPath()
+            geoCanvas.ctx.arc(c.x + r * 0.5, c.y + r * 0.5, r * 0.55 * 0.5, Math.PI / 4, -Math.PI * (3 / 4), false)
+            geoCanvas.ctx.stroke()
         }
     }
 }

package/src/style/MosaicStyle.js

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

package/src/style/NinjaStarStyle.js

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

package/src/style/PillarStyle.js

@@ -4,6 +4,7 @@
 import { Style } from '../core/Style.js'
 
 /**
+ * @module style
  * @author Julien Gaffuri
  */
 export class PillarStyle extends Style {
@@ -106,7 +107,7 @@ export class PillarStyle extends Style {
             //set width
             geoCanvas.ctx.lineWidth = wG
 
-            //compute cell centre postition
+            //compute cell center postition
             const cx = cell.x + resolution / 2
             const cy = cell.y + resolution / 2
             const ls = hG * this.shadowFactor
@@ -151,7 +152,7 @@ export class PillarStyle extends Style {
             //TODO use that
             //const offset = this.offset(c, resolution, z)
 
-            //compute cell centre postition
+            //compute cell center postition
             const cx = cell.x + resolution / 2
             const cy = cell.y + resolution / 2
 

package/src/style/SegmentStyle.js

@@ -6,6 +6,7 @@ import { Style } from '../core/Style.js'
 /**
  * A style where each cell is represented by a segment whose length, width, color and orientation can vary according to statistical values.
  *
+ * @module style
  * @author Julien Gaffuri
  */
 export class SegmentStyle extends Style {
@@ -83,7 +84,7 @@ export class SegmentStyle extends Style {
             geoCanvas.ctx.strokeStyle = col
             geoCanvas.ctx.lineWidth = wG
 
-            //compute segment centre postition
+            //compute segment center postition
             const cx = cell.x + resolution / 2 + offset.dx
             const cy = cell.y + resolution / 2 + offset.dy
 

package/src/style/ShapeColorSizeStyle.js

@@ -7,6 +7,7 @@ import { Style } from '../core/Style.js'
  * A very generic style that shows grid cells with specific color, size and shape.
  * It can be used to show variables as cell colors, cell size, cell shape, or any combination of the three visual variables.
  *
+ * @module style
  * @author Joseph Davies, Julien Gaffuri
  */
 export class ShapeColorSizeStyle extends Style {
@@ -92,6 +93,34 @@ export class ShapeColorSizeStyle extends Style {
                 geoCanvas.ctx.lineTo(c.x + r2 + s2, c.y + r2)
                 geoCanvas.ctx.lineTo(c.x + r2, c.y + r2 - s2)
                 geoCanvas.ctx.fill()
+            } else if (shape === 'triangle_up') {
+                const dr2 = (size - resolution) / 2
+                geoCanvas.ctx.beginPath()
+                geoCanvas.ctx.moveTo(c.x - dr2, c.y - dr2)
+                geoCanvas.ctx.lineTo(c.x + r2, c.y + resolution + dr2)
+                geoCanvas.ctx.lineTo(c.x + resolution + dr2, c.y - dr2)
+                geoCanvas.ctx.fill()
+            } else if (shape === 'triangle_down') {
+                const dr2 = (size - resolution) / 2
+                geoCanvas.ctx.beginPath()
+                geoCanvas.ctx.moveTo(c.x - dr2, c.y + resolution + dr2)
+                geoCanvas.ctx.lineTo(c.x + r2, c.y - dr2)
+                geoCanvas.ctx.lineTo(c.x + resolution + dr2, c.y + resolution + dr2)
+                geoCanvas.ctx.fill()
+            } else if (shape === 'triangle_left') {
+                const dr2 = (size - resolution) / 2
+                geoCanvas.ctx.beginPath()
+                geoCanvas.ctx.moveTo(c.x + resolution + dr2, c.y + resolution + dr2)
+                geoCanvas.ctx.lineTo(c.x - dr2, c.y + r2)
+                geoCanvas.ctx.lineTo(c.x + resolution + dr2, c.y - dr2)
+                geoCanvas.ctx.fill()
+            } else if (shape === 'triangle_right') {
+                const dr2 = (size - resolution) / 2
+                geoCanvas.ctx.beginPath()
+                geoCanvas.ctx.moveTo(c.x - dr2, c.y - dr2)
+                geoCanvas.ctx.lineTo(c.x + resolution + dr2, c.y + r2)
+                geoCanvas.ctx.lineTo(c.x - dr2, c.y + resolution + dr2)
+                geoCanvas.ctx.fill()
             } else {
                 throw new Error('Unexpected shape:' + shape)
             }

package/src/style/SideCategoryStyle.js

@@ -6,6 +6,7 @@ import { SideStyle } from './SideStyle.js'
 /**
  * A style to show the sides of grid cells based on their different categories.
  *
+ * @module style
  * @author Julien Gaffuri
  */
 export class SideCategoryStyle extends SideStyle {

package/src/style/SideStyle.js

@@ -9,7 +9,7 @@ import { Style } from '../core/Style.js'
  * @typedef {function(Array.<Side>,number, number):*} SideViewScale */
 
 /**
- *
+ * @module style
  * @author Julien Gaffuri
  */
 export class SideStyle extends Style {
@@ -28,6 +28,9 @@ export class SideStyle extends Style {
         /** A function returning the length of a cell side, in geo unit
          * @type {function(Side, number, number, object):number} */
         this.length = opts.length || ((side, resolution, z, sideViewScale) => resolution)
+
+        /** Set to A or true so that the side is drawn as a diamond */
+        this.diamond = opts.diamond
     }
 
     /**
@@ -63,31 +66,51 @@ export class SideStyle extends Style {
             const col = this.color ? this.color(side, resolution, z, viewScale) : undefined
             if (!col || col == 'none') continue
 
-            //width
-            /** @type {number|undefined} */
-            const wG = this.width ? this.width(side, resolution, z, viewScale) : undefined
-            if (!wG || wG <= 0) continue
-
-            //length
-            /** @type {number|undefined} */
-            const lG = this.length ? this.length(side, resolution, z, viewScale) : undefined
-            if (!lG || lG <= 0) continue
-            const lG2 = lG * 0.5
-
-            //set color and width
-            geoCanvas.ctx.strokeStyle = col
-            geoCanvas.ctx.lineWidth = wG
-
-            //draw segment with correct orientation
-            geoCanvas.ctx.beginPath()
-            if (side.or === "v") {
-                geoCanvas.ctx.moveTo(side.x, side.y + r2 - lG2)
-                geoCanvas.ctx.lineTo(side.x, side.y + r2 + lG2)
+            if (this.diamond) {
+
+                //set color
+                geoCanvas.ctx.fillStyle = col
+
+                //draw diamond
+                const x = side.x, y = side.y
+                geoCanvas.ctx.beginPath()
+                geoCanvas.ctx.moveTo(x - r2, y)
+                geoCanvas.ctx.lineTo(x, y + r2)
+                geoCanvas.ctx.lineTo(x + r2, y)
+                geoCanvas.ctx.lineTo(x, y - r2)
+                geoCanvas.ctx.closePath()
+                geoCanvas.ctx.fill()
+
             } else {
-                geoCanvas.ctx.moveTo(side.x + r2 - lG2, side.y)
-                geoCanvas.ctx.lineTo(side.x + r2 + lG2, side.y)
+
+                //width
+                /** @type {number|undefined} */
+                const wG = this.width ? this.width(side, resolution, z, viewScale) : undefined
+                if (!wG || wG <= 0) continue
+
+                //length
+                /** @type {number|undefined} */
+                const lG = this.length ? this.length(side, resolution, z, viewScale) : undefined
+                if (!lG || lG <= 0) continue
+                const lG2 = lG * 0.5
+
+                //set width
+                geoCanvas.ctx.lineWidth = wG
+                //set color
+                geoCanvas.ctx.strokeStyle = col
+
+                //draw segment with correct orientation
+                const x = side.x, y = side.y
+                geoCanvas.ctx.beginPath()
+                if (side.or === "v") {
+                    geoCanvas.ctx.moveTo(x, y - lG2)
+                    geoCanvas.ctx.lineTo(x, y + lG2)
+                } else {
+                    geoCanvas.ctx.moveTo(x - lG2, y)
+                    geoCanvas.ctx.lineTo(x + lG2, y)
+                }
+                geoCanvas.ctx.stroke()
             }
-            geoCanvas.ctx.stroke()
         }
 
         //update legends
@@ -98,14 +121,14 @@ export class SideStyle extends Style {
 
     /**
      * 
-     * @param {Array.<import('../core/Dataset').Cell>} cells The cells to use to build the sides. The side x,y coordinates are those of the left point for horizontal sides, and of the bottom point for vertical sides.
+     * @param {Array.<import('../core/Dataset').Cell>} cells The cells to use to build the sides.
      * @param {number} resolution The cells resolution
      * @param {boolean} withHorizontal Set to true to build horizontal sides, false otherwise.
      * @param {boolean} withVertical Set to true to build vertical sides, false otherwise.
-     * @param {boolean} center Set to true so that the side coordinate are those of its center point rather than its left/bottom point.
+     * @param {boolean} center Set to true so that the side coordinate are those of its center point rather than its left/bottom point (the side x,y coordinates are those of the left point for horizontal sides, and of the bottom point for vertical sides)
      * @returns { Array.<Side> }
      */
-    static buildSides(cells, resolution, withHorizontal = true, withVertical = true, center = false) {
+    static buildSides(cells, resolution, withHorizontal = true, withVertical = true, center = true) {
         /** @type { Array.<Side> } */
         const sides = []
 

package/src/style/SquareColorCategoryWebGLStyle.js

@@ -10,6 +10,7 @@ import { WebGLSquareColoringCatAdvanced } from '../utils/WebGLSquareColoringCatA
  * To show cells as colored squares, from categories.
  * All cells are drawn as squares, with the same size
  *
+ * @module style
  * @author Julien Gaffuri
  */
 export class SquareColorCategoryWebGLStyle extends Style {
@@ -19,8 +20,8 @@ export class SquareColorCategoryWebGLStyle extends Style {
         opts = opts || {}
 
         /**
-         * The name of the column/attribute of the tabular data where to retrieve the category code of the cell, for coloring.
-         * @type {string} */
+         * A function returning the category code of the cell, for coloring.
+         * @type {function(import('../core/Dataset.js').Cell):string} */
         this.code = opts.code
 
         /**
@@ -71,7 +72,7 @@ export class SquareColorCategoryWebGLStyle extends Style {
         const iBuffer = []
         for (let i = 0; i < nb; i++) {
             c = cells[i]
-            const cat = c[this.code]
+            const cat = this.code(c)
             if (cat == undefined) {
                 console.log('Unexpected category: ' + cat)
                 continue

package/src/style/SquareColorWebGLStyle.js

@@ -10,6 +10,7 @@ import { WebGLSquareColoringAdvanced } from '../utils/WebGLSquareColoringAdvance
  * To show cells as colored squares, with computation of the colors on GPU side (faster than JavaScript side).
  * Alls squares with the same size
  *
+ * @module style
  * @author Julien Gaffuri
  */
 export class SquareColorWebGLStyle extends Style {