gridviz 2.0.28 → 2.0.29

package/src/style/KernelSmoothingWGLStyle.js

@@ -0,0 +1,130 @@
+//@ts-check
+'use strict'
+
+import { Style } from '../Style'
+import { makeWebGLCanvas } from '../utils/webGLUtils'
+import { WebGLSquareColoringKS } from '../utils/WebGLSquareColoringKS'
+
+/**
+ * @author Julien Gaffuri
+ */
+export class KernelSmoothingStyle extends Style {
+    //see
+    //https://stackoverflow.com/questions/8099979/creating-a-glsl-arrays-of-uniforms
+    //see https://gist.github.com/jasonkit/c5b4fd62e8cbfe2780cc
+
+    /** @param {object} opts */
+    constructor(opts) {
+        super(opts)
+        opts = opts || {}
+
+        /**
+         * The name of the column/attribute of the tabular data where to retrieve the variable for color.
+         * @type {string} */
+        this.colorCol = opts.colorCol
+
+        /**
+         * A function returning the t value (within [0,1]) of the cell.
+         * @type {function(number,number,import("../Style").Stat):number} */
+        this.tFun = opts.tFun || ((v, r, s) => v / s.max)
+
+        /**
+         * Distribution stretching method.
+         * The stretching is performed on GPU side (fragment shader).
+         * @type {{ fun:string, alpha:number }} */
+        this.stretching = opts.stretching
+
+        /**
+         * The sample of the color ramp.
+         * The color is computed on GPU side (fragment shader) based on those values (linear interpolation).
+         * @type {Array.<string>} */
+        this.colors =
+            opts.colors ||
+            [
+                'rgb(158, 1, 66)',
+                'rgb(248, 142, 83)',
+                'rgb(251, 248, 176)',
+                'rgb(137, 207, 165)',
+                'rgb(94, 79, 162)',
+            ].reverse()
+        if (opts.color)
+            this.colors = [
+                opts.color(0),
+                opts.color(0.2),
+                opts.color(0.4),
+                opts.color(0.6),
+                opts.color(0.8),
+                opts.color(1),
+            ]
+
+        /**
+         * A function returning the size of the cells, in geographical unit. All cells have the same size.
+         * @type {function(number,number):number} */
+        this.size = opts.size // (resolution, zf) => ...
+    }
+
+    /**
+     * @param {Array.<import("../Dataset").Cell>} cells
+     * @param {number} r
+     * @param {import("../GeoCanvas").GeoCanvas} cg
+     */
+    draw(cells, r, cg) {
+        //filter
+        if (this.filter) cells = cells.filter(this.filter)
+
+        //zoom factor
+        const zf = cg.getZf()
+
+        //compute color variable statistics
+        const statColor = Style.getStatistics(cells, (c) => c[this.colorCol], true)
+
+        if (!statColor) return
+
+        //create canvas and webgl renderer
+        const cvWGL = makeWebGLCanvas(cg.w + '', cg.h + '')
+        if (!cvWGL) {
+            console.error('No webGL')
+            return
+        }
+
+        //add vertice and fragment data
+        const r2 = r / 2
+        let c,
+            nb = cells.length
+        const verticesBuffer = []
+        //const tBuffer = []
+        for (let i = 0; i < nb; i++) {
+            c = cells[i]
+            const t = this.tFun(c[this.colorCol], r, statColor)
+            if (t == null || t == undefined) continue
+            verticesBuffer.push(c.x + r2, c.y + r2)
+            //tBuffer.push(t > 1 ? 1 : t < 0 ? 0 : t)
+        }
+
+        const sizeGeo = this.size ? this.size(r, zf) : r + 0.2 * zf
+        const wgp = new WebGLSquareColoringKS(cvWGL.gl, this.colors, this.stretching, sizeGeo / zf)
+
+        //TODO - [i,j,t]
+        let data = []
+        for (const c of cells) {
+            const xGL = cg.geoToPixX(c.x + r2) //TODO within [-1,1] ?
+            data.push(xGL)
+            const yGL = cg.geoToPixY(c.y + r2) //TODO within [-1,1] ?
+            data.push(yGL)
+            const t = this.tFun(c[this.colorCol], r, statColor)
+            data.push(t)
+        }
+
+        data = [0.0, 2.0, 1.0, 0.0, 0.0, 0.0]
+
+        //draw
+        wgp.draw(verticesBuffer, data, cg.getWebGLTransform())
+
+        //draw in canvas geo
+        cg.initCanvasTransform()
+        cg.ctx.drawImage(cvWGL.canvas, 0, 0)
+
+        //update legends
+        this.updateLegends({ style: this, r: r, zf: zf, sColor: statColor })
+    }
+}

package/src/style/LegoStyle.js

@@ -0,0 +1,112 @@
+//@ts-check
+'use strict'
+
+import { TanakaStyle } from './TanakaStyle'
+import { StrokeStyle } from './StrokeStyle'
+import { SquareColorCatWGLStyle } from './SquareColorCatWGLStyle'
+import { Style } from '../Style'
+
+/**
+ * @author Julien Gaffuri
+ */
+export class LegoStyle {
+    /**
+     * @param {string} col
+     * @param {object} opts
+     * @returns {Array.<Style>}
+     */
+    static get(col, 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 || [
+            '#00852b', //darker green
+            '#afd246', //light green
+            '#fac80a', //dark yellow
+            '#bb805a', //brown
+            '#d67923', //mostard
+            '#cb4e29', //redish
+            '#b40000', //red
+            '#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)
+        //style to show limits between pieces
+        const sst = new StrokeStyle({
+            strokeColor: () => '#666',
+            strokeWidth: (v, r, s, z) => 0.2 * z,
+            filter: opts.filter,
+        })
+
+        return [
+            ts[0],
+            sst,
+            ts[1],
+            new LegoTopStyle({ colDark: opts.colDark, colBright: opts.colBright, filter: opts.filter }),
+        ]
+    }
+
+    /**
+     * @param {function(string):string} col
+     * @param {object} opts
+     * @returns {Array.<Style>}
+     */
+    static getCat(col, opts) {
+        opts = opts || {}
+
+        opts.colDark = opts.colDark || '#333'
+        opts.colBright = opts.colBright || '#aaa'
+
+        //
+        const s = new SquareColorCatWGLStyle({ colorCol: col, color: opts.color })
+        //style to show limits between pieces
+        const sst = new StrokeStyle({ strokeColor: () => '#666', strokeWidth: (v, r, s, z) => 0.2 * z })
+
+        return [s, sst, new LegoTopStyle({ colDark: opts.colDark, colBright: opts.colBright })]
+    }
+}
+
+/**
+ * A style to draw top circle of lego bricks.
+ */
+class LegoTopStyle extends Style {
+    /** @param {object|undefined} opts */
+    constructor(opts) {
+        super(opts)
+        opts = opts || {}
+        this.colDark = opts.colDark || '#333'
+        this.colBright = opts.colBright || '#aaa'
+    }
+
+    draw(cells, r, cg) {
+        //filter
+        if (this.filter) cells = cells.filter(this.filter)
+
+        cg.ctx.lineWidth = 0.6 * cg.getZf()
+
+        //dark part
+        cg.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()
+        }
+
+        //bright part
+        cg.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()
+        }
+    }
+}

package/src/style/MosaicStyle.js

@@ -0,0 +1,107 @@
+//@ts-check
+'use strict'
+
+import { Style } from '../Style'
+
+/**
+ * @author Julien Gaffuri
+ */
+export class MosaicStyle extends Style {
+    /** @param {object} opts */
+    constructor(opts) {
+        super(opts)
+        opts = opts || {}
+
+        /** The name of the column/attribute of the tabular data where to retrieve the variable for color.
+         * @type {string} */
+        this.colorCol = opts.colorCol
+
+        /** A function returning the color of the cell.
+         * @type {function(number,number,import("../Style").Stat|undefined):string} */
+        this.color = opts.color || (() => '#EA6BAC')
+
+        /** The mosaic factor, within [0,0.5]. Set to 0 for no mosaic effect. Set to 0.5 for strong mosaic effect.
+         * @type {number} */
+        this.mosaicFactor = opts.mosaicFactor || 0.15
+
+        /** The mosaic shadow factor, within [0,0.5]. Set to 0 for no mosaic shadow. Set to 0.5 for strong mosaic shadow.
+         * @type {number} */
+        this.shadowFactor = opts.shadowFactor || 0.2
+
+        /** The mosaic shadow color.
+         * @type {string} */
+        this.shadowColor = opts.shadowColor || '#555'
+    }
+
+    /**
+     *
+     * @param {Array.<import("../Dataset").Cell>} cells
+     * @param {number} resolution
+     * @param {import("../GeoCanvas").GeoCanvas} cg
+     */
+    draw(cells, resolution, cg) {
+        //filter
+        if (this.filter) cells = cells.filter(this.filter)
+
+        //zoom factor
+        const zf = cg.getZf()
+
+        let statColor
+        if (this.colorCol) {
+            //compute color variable statistics
+            statColor = Style.getStatistics(cells, (c) => c[this.colorCol], true)
+        }
+
+        //set stroke style, for shadow
+        cg.ctx.strokeStyle = this.shadowColor
+        cg.ctx.lineWidth = this.shadowFactor * resolution
+        cg.ctx.lineJoin = 'round'
+        cg.ctx.lineCap = 'butt'
+
+        //function to compute position mosaic effect
+        const d = resolution * this.mosaicFactor
+        const mosaic = () => {
+            return { x: Math.random() * d, y: Math.random() * d }
+        }
+
+        //draw with HTML canvas in geo coordinates
+        cg.setCanvasTransform()
+
+        for (let cell of cells) {
+            //set fill color
+            const col = this.color ? this.color(cell[this.colorCol], resolution, statColor) : undefined
+            if (!col || col === 'none') continue
+            cg.ctx.fillStyle = col
+
+            //get offset
+            const offset = this.offset(cell, resolution, zf)
+
+            //compute position mosaic effect
+            const ll = mosaic(),
+                ul = mosaic(),
+                lr = mosaic(),
+                ur = mosaic()
+
+            //stroke
+            if (this.shadowFactor > 0) {
+                cg.ctx.beginPath()
+                cg.ctx.moveTo(cell.x + offset.dx + ll.x, cell.y + offset.dy + ll.y)
+                cg.ctx.lineTo(cell.x + offset.dx + resolution - lr.x, cell.y + offset.dy + lr.y)
+                cg.ctx.lineTo(cell.x + offset.dx + resolution - ur.x, cell.y + offset.dy + resolution - ur.y)
+                cg.ctx.stroke()
+            }
+
+            //fill
+
+            cg.ctx.beginPath()
+            cg.ctx.moveTo(cell.x + offset.dx + ll.x, cell.y + offset.dy + ll.y)
+            cg.ctx.lineTo(cell.x + offset.dx + resolution - lr.x, cell.y + offset.dy + lr.y)
+            cg.ctx.lineTo(cell.x + offset.dx + resolution - ur.x, cell.y + offset.dy + resolution - ur.y)
+            cg.ctx.lineTo(cell.x + offset.dx + ul.x, cell.y + offset.dy + resolution - ul.y)
+            cg.ctx.fill()
+        }
+
+        //update legends
+        this.updateLegends({ style: this, r: resolution, zf: zf, sColor: statColor })
+    }
+}

package/src/style/NinjaStarStyle.js

@@ -0,0 +1,124 @@
+//@ts-check
+'use strict'
+
+import { Style } from '../Style'
+
+/**
+ *
+ * @author Joseph Davies, Julien Gaffuri
+ */
+export class NinjaStarStyle extends Style {
+    /** @param {object} opts */
+    constructor(opts) {
+        super(opts)
+        opts = opts || {}
+
+        /** The name of the column/attribute of the tabular data where to retrieve the variable for color.
+         * @type {string} */
+        this.colorCol = opts.colorCol
+
+        /** A function returning the color of the cell.
+         * @type {function(number,number,import("../Style").Stat|undefined,number):string} */
+        this.color = opts.color || (() => '#EA6BAC') //(v,r,s,zf) => {}
+
+        /** The name of the column/attribute of the tabular data where to retrieve the variable for size.
+         * @type {string} */
+        this.sizeCol = opts.sizeCol
+
+        /** A function returning the size of a cell, within [0,1]:
+         *  - 0, nothing shown
+         *  - 1, entire square
+         * @type {function(number,number,import("../Style").Stat|undefined,number):number} */
+        this.size = opts.size
+
+        /** A function returning the shape.
+         * @type {function(import("../Dataset").Cell):string} */
+        this.shape = opts.shape || (() => "o")
+    }
+
+    /**
+     *
+     * @param {Array.<import("../Dataset").Cell>} cells
+     * @param {number} r
+     * @param {import("../GeoCanvas").GeoCanvas} cg
+     */
+    draw(cells, r, cg) {
+        //filter
+        if (this.filter) cells = cells.filter(this.filter)
+
+        //zoom factor
+        const zf = cg.getZf()
+
+        let statSize
+        if (this.sizeCol) {
+            //if size is used, sort cells by size so that the biggest are drawn first
+            cells.sort((c1, c2) => c2[this.sizeCol] - c1[this.sizeCol])
+            //and compute size variable statistics
+            statSize = Style.getStatistics(cells, (c) => c[this.sizeCol], true)
+        }
+
+        let statColor
+        if (this.colorCol) {
+            //compute color variable statistics
+            statColor = Style.getStatistics(cells, (c) => c[this.colorCol], true)
+        }
+
+        //draw with HTML canvas
+        //in geo coordinates
+        cg.setCanvasTransform()
+
+        const r2 = r * 0.5
+        for (let cell of cells) {
+            //color
+            const col = this.color ? this.color(cell[this.colorCol], r, statColor, zf) : undefined
+            if (!col || col === 'none') continue
+            cg.ctx.fillStyle = col
+
+            //shape
+            const shape = this.shape ? this.shape(cell) : 'o'
+            if (shape === 'none') continue
+
+            //size
+            /** @type {function(number,number,import("../Style").Stat|undefined,number):number} */
+            let s_ = this.size || (() => 0.5)
+            //size - in geo unit
+            const sG2 = s_(cell[this.sizeCol], r, statSize, zf) * r2
+
+            //get offset
+            const offset = this.offset(cell, r, zf)
+
+            //center position
+            const cx = cell.x + r2
+            const cy = cell.y + r2
+
+            if (shape === 'p') {
+                cg.ctx.beginPath()
+                cg.ctx.moveTo(cx, cy + r2)
+                cg.ctx.lineTo(cx + sG2, cy + sG2)
+                cg.ctx.lineTo(cx + r2, cy)
+                cg.ctx.lineTo(cx + sG2, cy - sG2)
+                cg.ctx.lineTo(cx, cy - r2)
+                cg.ctx.lineTo(cx - sG2, cy - sG2)
+                cg.ctx.lineTo(cx - r2, cy)
+                cg.ctx.lineTo(cx - sG2, cy + sG2)
+                cg.ctx.fill()
+            } else if (shape === 'o') {
+                cg.ctx.beginPath()
+                cg.ctx.moveTo(cx, cy + sG2)
+                cg.ctx.lineTo(cx + r2, cy + r2)
+                cg.ctx.lineTo(cx + sG2, cy)
+                cg.ctx.lineTo(cx + r2, cy - r2)
+                cg.ctx.lineTo(cx, cy - sG2)
+                cg.ctx.lineTo(cx - r2, cy - r2)
+                cg.ctx.lineTo(cx - sG2, cy)
+                cg.ctx.lineTo(cx - r2, cy + r2)
+                cg.ctx.fill()
+            } else {
+                throw new Error('Unexpected shape:' + shape)
+            }
+        }
+
+        //update legends
+        this.updateLegends({ style: this, r: r, zf: zf, sSize: statSize, sColor: statColor })
+    }
+}

package/src/style/PillarStyle.js

@@ -0,0 +1,230 @@
+//@ts-check
+'use strict'
+
+import { Style } from '../Style'
+
+/**
+ * @author Julien Gaffuri
+ */
+export class PillarStyle extends Style {
+    //TODO make a webGL version ?
+
+    /** @param {object} opts */
+    constructor(opts) {
+        super(opts)
+        opts = opts || {}
+
+        /** @type {string} */
+        this.heightCol = opts.heightCol
+
+        /** A function returning the height of the line representing a cell, in geo unit
+         * @type {function(number,number,import("../Style").Stat|undefined,number):number} */
+        this.height = opts.height
+
+        /** @type {string} */
+        this.colorCol = opts.colorCol
+
+        /** A function returning the color of the line representing a cell.
+         * @type {function(number,number,import("../Style").Stat|undefined):string} */
+        this.color = opts.color || (() => '#c08c59') //bb
+
+        /** @type {string} */
+        this.widthCol = opts.widthCol
+
+        /** A function returning the width of the line representing a cell, in geo unit
+         * @type {function(number,number,import("../Style").Stat|undefined,number):number} */
+        this.width = opts.width || ((v, r) => 0.5 * r)
+
+        /** @type {boolean} */
+        this.simple = opts.simple != undefined
+
+        /** @type {number} */
+        this.viewHeightFactor = opts.viewHeightFactor || 1.5
+        //0,0 is the center
+        /** @type {number} */
+        this.viewSX = opts.viewSX == undefined ? 0 : opts.viewSX
+        /** @type {number} */
+        this.viewSY = opts.viewSY == undefined ? -0.5 : opts.viewSY
+
+        //TODO replace with sun location ?
+        /** @type {number} */
+        this.shadowDirection =
+            opts.shadowDirection == undefined ? (-40.3 * Math.PI) / 180.0 : opts.shadowDirection
+        /** @type {number} */
+        this.shadowFactor = opts.shadowFactor || 0.3
+        /** @type {string} */
+        this.shadowColor = opts.shadowColor || '#00000033'
+
+        /** @type {string} */
+        this.outlineCol = opts.outlineCol || '#FFFFFF'
+        /** @type {number} */
+        this.outlineWidthPix = opts.outlineWidthPix == undefined ? 0.5 : opts.outlineWidthPix
+    }
+
+    /**
+     * Draw cells as segments.
+     *
+     * @param {Array.<import("../Dataset").Cell>} cells
+     * @param {number} r
+     * @param {import("../GeoCanvas").GeoCanvas} cg
+     */
+    draw(cells, r, cg) {
+        //filter
+        if (this.filter) cells = cells.filter(this.filter)
+
+        //zoom factor
+        const zf = cg.getZf()
+
+        let statHeight
+        if (this.heightCol) {
+            //compute size variable statistics
+            statHeight = Style.getStatistics(cells, (c) => c[this.heightCol], true)
+        }
+
+        let statColor
+        if (this.colorCol) {
+            //compute color variable statistics
+            statColor = Style.getStatistics(cells, (c) => c[this.colorCol], true)
+        }
+
+        let statWidth
+        if (this.widthCol) {
+            //and compute size variable statistics
+            statWidth = Style.getStatistics(cells, (c) => c[this.widthCol], true)
+        }
+
+        //get view center geo position
+        const cvx = cg.getCenter().x + this.viewSX * cg.w * zf
+        const cvy = cg.getCenter().y + this.viewSY * cg.h * zf
+        //get view height
+        const H = this.viewHeightFactor * (cg.w + cg.h) * 0.5 * zf
+
+        //sort cells by y and x
+        //const distToViewCenter = (c) => { const dx = cvx - c.x, dy = cvy - c.y; return Math.sqrt(dx * dx + dy * dy) }
+        cells.sort((c1, c2) => 100000000 * (c2.y - c1.y) + c1.x - c2.x)
+
+        cg.ctx.lineCap = this.simple ? 'butt' : 'round'
+
+        //draw in geo coordinates
+        cg.setCanvasTransform()
+
+        //draw shadows
+        cg.ctx.strokeStyle = this.shadowColor
+        cg.ctx.fillStyle = this.shadowColor
+        for (let c of cells) {
+            //width
+            /** @type {number|undefined} */
+            const wG = this.width ? this.width(c[this.widthCol], r, statWidth, zf) : undefined
+            if (!wG || wG < 0) continue
+
+            //height
+            /** @type {number|undefined} */
+            const hG = this.height ? this.height(c[this.heightCol], r, statHeight, zf) : undefined
+            if (!hG || hG < 0) continue
+
+            //get offset
+            //TODO use that
+            const offset = this.offset(c, r, zf)
+
+            //set width
+            cg.ctx.lineWidth = wG
+
+            //compute cell centre postition
+            const cx = c.x + r / 2
+            const cy = c.y + r / 2
+            const ls = hG * this.shadowFactor
+
+            //draw segment
+            cg.ctx.beginPath()
+            cg.ctx.moveTo(cx, cy)
+            cg.ctx.lineTo(cx + ls * Math.cos(this.shadowDirection), cy + ls * Math.sin(this.shadowDirection))
+            cg.ctx.stroke()
+
+            /*
+            if (this.simple) {
+                //draw base circle
+                cg.ctx.beginPath();
+                cg.ctx.arc(
+                    cx, cy,
+                    wG * 0.5,
+                    0, 2 * Math.PI, false);
+                //cg.ctx.stroke();
+                cg.ctx.fill();
+            }*/
+        }
+
+        //draw pillars
+        for (let c of cells) {
+            //color
+            /** @type {string|undefined} */
+            const col = this.color ? this.color(c[this.colorCol], r, statColor) : undefined
+            if (!col) continue
+
+            //width
+            /** @type {number|undefined} */
+            const wG = this.width ? this.width(c[this.widthCol], r, statWidth, zf) : undefined
+            if (!wG || wG < 0) continue
+
+            //height
+            /** @type {number|undefined} */
+            const hG = this.height ? this.height(c[this.heightCol], r, statHeight, zf) : undefined
+            if (!hG || hG < 0) continue
+
+            //get offset
+            //TODO use that
+            const offset = this.offset(c, r, zf)
+
+            //compute cell centre postition
+            const cx = c.x + r / 2
+            const cy = c.y + r / 2
+
+            //compute angle
+            const dx = cx - cvx,
+                dy = cy - cvy
+            const a = Math.atan2(dy, dx)
+            const D = Math.sqrt(dx * dx + dy * dy)
+            const d = (D * hG) / (H - hG)
+
+            if (this.simple) {
+                //draw segment
+                cg.ctx.strokeStyle = col
+                cg.ctx.lineWidth = wG
+                cg.ctx.beginPath()
+                cg.ctx.moveTo(cx, cy)
+                cg.ctx.lineTo(cx + d * Math.cos(a), cy + d * Math.sin(a))
+                cg.ctx.stroke()
+            } else {
+                //draw background segment
+                cg.ctx.strokeStyle = this.outlineCol
+                cg.ctx.lineWidth = wG + 2 * this.outlineWidthPix * zf
+                cg.ctx.beginPath()
+                cg.ctx.moveTo(cx, cy)
+                cg.ctx.lineTo(cx + d * Math.cos(a), cy + d * Math.sin(a))
+                cg.ctx.stroke()
+
+                //draw segment
+                cg.ctx.strokeStyle = col
+                cg.ctx.lineWidth = wG
+                cg.ctx.beginPath()
+                cg.ctx.moveTo(cx, cy)
+                cg.ctx.lineTo(cx + d * Math.cos(a), cy + d * Math.sin(a))
+                cg.ctx.stroke()
+
+                //draw top circle
+                cg.ctx.strokeStyle = this.outlineCol
+                //cg.ctx.fillStyle = "#c08c59"
+                cg.ctx.lineWidth = this.outlineWidthPix * zf
+                cg.ctx.beginPath()
+                cg.ctx.arc(cx + d * Math.cos(a), cy + d * Math.sin(a), wG * 0.5, 0, 2 * Math.PI, false)
+                cg.ctx.stroke()
+                //cg.ctx.fill();
+            }
+        }
+
+        //in case...
+        cg.ctx.lineCap = 'butt'
+
+        //update legends
+        this.updateLegends({ style: this, r: r, zf: zf, sColor: statColor })
+    }
+}