gridviz 2.1.14 → 2.1.16

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "gridviz",
-    "version": "2.1.14",
+    "version": "2.1.16",
     "description": "Visualization tool for gridded statistics",
     "keywords": [
         "statistics",

package/src/App.js

@@ -46,6 +46,9 @@ export class App {
             return
         }
 
+        //https://css-tricks.com/absolute-positioning-inside-relative-positioning/
+        this.container.style.position = "relative"; // container element must have relative positioning
+
         //set dimensions
         /** @type {number} */
         this.w = opts.w || this.container.offsetWidth
@@ -201,8 +204,7 @@ export class App {
         /** @type {boolean} */
         this.showBoundaries = true
 
-        //legend div
-
+        // legend div
         this.legendDivId = opts.legendDivId || 'gvizLegend'
         this.legend = select('#' + this.legendDivId)
         if (this.legend.empty()) {
@@ -214,14 +216,14 @@ export class App {
                 .style('position', 'absolute')
                 .style('width', 'auto')
                 .style('height', 'auto')
-                .style('background', '#FFFFFFCC')
+                .style('background', '#FFFFFF')
                 //.style("padding", this.padding)
                 .style('border', '0px')
-                .style('border-radius', '5px')
+                //.style('border-radius', '5px')
                 .style('box-shadow', '3px 3px 3px grey, -3px -3px 3px #ddd')
                 .style('font-family', 'Helvetica, Arial, sans-serif')
-                .style('top', '20px')
-                .style('right', '20px')
+                .style('bottom', '15px')
+                .style('right', '15px')
             //hide
             //.style("visibility", "hidden")
         }
@@ -305,9 +307,9 @@ export class App {
         this.mouseOverHandler = (e) => focusCell(e)
         this.mouseMoveHandler = (e) => focusCell(e)
         this.mouseOutHandler = (e) => this.tooltip.hide()
-        this.container.addEventListener('mouseover', this.mouseOverHandler)
-        this.container.addEventListener('mousemove', this.mouseMoveHandler)
-        this.container.addEventListener('mouseout', this.mouseOutHandler)
+        this.cg.canvas.addEventListener('mouseover', this.mouseOverHandler)
+        this.cg.canvas.addEventListener('mousemove', this.mouseMoveHandler)
+        this.cg.canvas.addEventListener('mouseout', this.mouseOutHandler)
 
         // add extra logic to onZoomStartFun
         this.cg.onZoomStartFun = (e) => {
@@ -655,8 +657,8 @@ export class App {
             app: this,
             id: opts?.id || 'gridviz-zoom-buttons',
             class: opts?.class,
-            x: opts?.x || this.w - 50,
-            y: opts?.y || 10,
+            x: opts?.x,
+            y: opts?.y,
             onZoom: opts?.onZoom,
             delta: opts?.delta || 0.2
         })
@@ -680,8 +682,8 @@ export class App {
             app: this,
             id: opts?.id || 'gridviz-fullscreen-button',
             class: opts?.class,
-            x: opts?.x || this.w - 50,
-            y: opts?.y || 85,
+            x: opts?.x,
+            y: opts?.y
         })
 
         return this
@@ -721,8 +723,8 @@ export class App {
                         this.redraw()
 
                         //update button positions
-                        if (this.zoomButtons) this.zoomButtons.node.style.left = this.w - 50 + 'px'
-                        if (this.fullscreenButton) this.fullscreenButton.node.style.left = this.w - 50 + 'px'
+                        // if (this.zoomButtons) this.zoomButtons.node.style.left = this.w - 50 + 'px'
+                        // if (this.fullscreenButton) this.fullscreenButton.node.style.left = this.w - 50 + 'px'
                     }
                 })
             }

package/src/Tooltip.js

@@ -28,7 +28,7 @@ export class Tooltip {
         /** @type {string} */
         this.border = opts.border || '0px'
         /** @type {string} */
-        this['border-radius'] = opts['border-radius'] || '5px'
+        this['border-radius'] = opts['border-radius'] || '0px'
         /** @type {string} */
         this['box-shadow'] = opts['box-shadow'] || '5px 5px 5px grey'
         /** @type {string} */
@@ -51,14 +51,16 @@ export class Tooltip {
          * @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)
+
+        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)

package/src/button/Button.js

@@ -1,3 +1,5 @@
+import { select } from 'd3-selection'
+
 /**
  * Parent class for button elements used to interact with the gridviz viewer.
  *
@@ -19,36 +21,46 @@ export class Button {
 
         this.app = opts.app
         this.parentNode = opts.parentNode || opts.app.container
-        this.id = opts.id || 'button-' + Math.random()
 
-        // create HTML node
-        this.node = document.createElement('div')
-        this.node.id = this.id
-        if (opts.title) this.node.title = opts.title
-        if (opts.class) this.node.classList.add(opts.class) 
+        // the div element
+        if (this.id) this.div = select('#' + this.id)
+
+        if (!this.div || this.div.empty()) {
+            this.div = select(document.createElement('div'))
+            if (this.id) this.div.attr('id', this.id)
+        }
+
+        if (opts.title) this.div.attr('title',opts.title)
+        if (opts.class) this.div.attr('class',opts.class)
 
         // add events
-        if (opts.onClickFunction) this.node.addEventListener('onclick', opts.onClickFunction)
-        this.node.addEventListener('mouseover', (e)=>{this.node.style.backgroundColor = 'lightgrey'})
-        this.node.addEventListener('mouseout', (e)=>{this.node.style.backgroundColor = '#ffffff'})
+        if (opts.onClickFunction) this.div.on('click', opts.onClickFunction)
 
         //set styles
-        this.node.classList.add(opts.class)
-        this.node.style.boxShadow =
-            '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.node.style.backgroundColor = '#ffffff' //.ecl-u-bg-white
-        this.node.style.position = 'absolute'
-        this.node.style.cursor = 'pointer'
-         this.node.style.display = 'flex'
-        this.node.style.justifyContent = 'center'
-        this.node.style.alignItems = 'center'
-        this.node.style.width = '30px'
-        this.node.style.height = '30px'
-        // this.node.style.padding = '4px'
-        this.node.style.top = opts.y + 'px'
-        this.node.style.left = opts.x + 'px'
+        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')
+        this.style('display' , 'flex')
+        this.style('justify-content' , 'center')
+        this.style('align-items' , 'center')
+        this.style('width' , '30px')
+        this.style('height' , '30px')
+        // this.style(padding , '4px'
+
 
         // append to parent
-        this.parentNode.appendChild(this.node)
+        this.parentNode.appendChild(this.div.node())
+    }
+
+    /**
+     * Apply a style to the button div.
+     * @param {string} k
+     * @param {string} v
+     * @returns {this}
+     */
+    style(k, v) {
+        this.div.style(k, v)
+        return this
     }
 }

package/src/button/FullscreenButton.js

@@ -25,7 +25,7 @@ export class FullscreenButton extends Button {
         super(opts)
 
         // append fullscreen icon to button container
-        this.node.innerHTML = `
+        this.div.node().innerHTML = `
         <svg
             style="height: 1.2rem; width: 1.2rem; fill:black; margin:0;"
             focusable="false"
@@ -48,21 +48,43 @@ export class FullscreenButton extends Button {
         this.defaultWidth = this.app.w
 
         // event handler
-        this.node.addEventListener('click', (e) => {
+        this.div.on('click', (e) => {
             this.onClickFunction(e)
         })
+        this.div.on('mouseover', (e) => {
+            this.style('background-color', 'lightgrey')
+        })
+        this.div.on('mouseout', (e) => {
+            this.style('background-color', '#ffffff')
+        })
 
+        //set position
+        if (opts.x) {
+            this.style('left', opts.x + 'px')
+        } else {
+            this.style('right', '10px')
+        }
+        if (opts.y) {
+            this.style('top', opts.y + 'px')
+        } else {
+            this.style('top', '90px')
+        }
     }
 
     onClickFunction(e) {
         if (this.isFullscreen) {
-            this.closeFullscreen(containerDiv)
+            this.closeFullscreen(this.app.container)
             //resize canvas to default
             this.app.h = this.defaultHeight
             this.app.w = this.defaultWidth
+            this.app.cg.h = this.defaultHeight
+            this.app.cg.w = this.defaultWidth
+            this.app.cg.canvas.setAttribute('width', '' + this.defaultWidth)
+            this.app.cg.canvas.setAttribute('height', '' + this.defaultHeight)
+            this.app.redraw()
             this.isFullscreen = false
         } else {
-            this.openFullscreen(containerDiv)
+            this.openFullscreen(this.app.container)
             //resize canvas to fullscreen
             this.app.h = window.screen.height
             this.app.w = window.screen.width

package/src/button/ZoomButtons.js

@@ -1,6 +1,5 @@
 import { Button } from './Button.js'
 
-
 /**
  * Button for toggling fullscreen mode
  *
@@ -19,43 +18,67 @@ export class ZoomButtons extends Button {
         // zoom in btn
         this.zoomInBtn = document.createElement('a')
         this.zoomInBtn.innerHTML = `<a id="zoomin" class="gridviz-zoom-button" title="Zoom in">+</a>`
-        this.zoomInBtn.title = 'Zoom in';
-        this.zoomInBtn.addEventListener('click', (e)=>{this.zoomIn(e)})
-        this.zoomInBtn.addEventListener('mouseover', (e)=>{this.zoomInBtn.style.backgroundColor = 'lightgrey'})
-        this.zoomInBtn.addEventListener('mouseout', (e)=>{this.zoomInBtn.style.backgroundColor = '#ffffff'})
+        this.zoomInBtn.title = 'Zoom in'
+        this.zoomInBtn.addEventListener('click', (e) => {
+            this.zoomIn(e)
+        })
+        this.zoomInBtn.addEventListener('mouseover', (e) => {
+            this.zoomInBtn.style.backgroundColor = 'lightgrey'
+        })
+        this.zoomInBtn.addEventListener('mouseout', (e) => {
+            this.zoomInBtn.style.backgroundColor = '#ffffff'
+        })
 
         // zoom out btn
         this.zoomOutBtn = document.createElement('a')
         this.zoomOutBtn.innerHTML = `<a id="zoomin" class="gridviz-zoom-button" title="Zoom out">-</a>`
-        this.zoomOutBtn.title = 'Zoom out';
-        this.zoomOutBtn.addEventListener('click', (e)=>{this.zoomOut(e)})
-        this.zoomOutBtn.addEventListener('mouseover', (e)=>{this.zoomOutBtn.style.backgroundColor = 'lightgrey'})
-        this.zoomOutBtn.addEventListener('mouseout', (e)=>{this.zoomOutBtn.style.backgroundColor = '#ffffff'})
+        this.zoomOutBtn.title = 'Zoom out'
+        this.zoomOutBtn.addEventListener('click', (e) => {
+            this.zoomOut(e)
+        })
+        this.zoomOutBtn.addEventListener('mouseover', (e) => {
+            this.zoomOutBtn.style.backgroundColor = 'lightgrey'
+        })
+        this.zoomOutBtn.addEventListener('mouseout', (e) => {
+            this.zoomOutBtn.style.backgroundColor = '#ffffff'
+        })
 
         //set styles
         let btns = [this.zoomInBtn, this.zoomOutBtn]
-        btns.forEach((btn, i)=>{
-            btn.style.alignItems = 'center';
-            btn.style.justifyContent = 'center';
-            btn.style.display = 'flex';
-            btn.style.border = 'none';
-            btn.style.color = 'black';
-            btn.style.textAlign = 'center';
-            btn.style.textDecoration = 'none';
-            btn.style.padding = '4px';
-            btn.style.fontSize = '20px';
-            btn.style.fontWeight = 'bold';
-            btn.style.userSelect = 'none';
-            if (i==0) btn.style.borderBottom = '1px solid grey'
+        btns.forEach((btn, i) => {
+            btn.style.alignItems = 'center'
+            btn.style.justifyContent = 'center'
+            btn.style.display = 'flex'
+            btn.style.border = 'none'
+            btn.style.color = 'black'
+            btn.style.textAlign = 'center'
+            btn.style.textDecoration = 'none'
+            btn.style.padding = '4px'
+            btn.style.fontSize = '20px'
+            btn.style.fontWeight = 'bold'
+            btn.style.userSelect = 'none'
+            if (i == 0) btn.style.borderBottom = '1px solid grey'
         })
 
-        // unset parent class height
-        this.node.style.height="unset"
-        this.node.style.display="unset"
+        // unset parent class height and display for dual buttons
+        this.style('height', 'unset')
+        this.style('display', 'unset')
+
+        //set position
+        if (opts.x) {
+            this.style('left', opts.x + 'px')
+        } else {
+            this.style('right', '10px')
+        }
+        if (opts.y) {
+            this.style('top', opts.y + 'px')
+        } else {
+            this.style('top', '10px')
+        }
 
         // append to button container
-        this.node.appendChild(this.zoomInBtn)
-        this.node.appendChild(this.zoomOutBtn)
+        this.div.node().appendChild(this.zoomInBtn)
+        this.div.node().appendChild(this.zoomOutBtn)
     }
 
     /* Zoom in */

package/src/index.js

@@ -18,9 +18,11 @@ export { LGrid } from './dataset/LGrid.js'
 
 // export styles
 export { ShapeColorSizeStyle } from './style/ShapeColorSizeStyle.js'
+export { ShapeColorSizeStyle_ } from './style/ShapeColorSizeStyle_.js'
 export { StrokeStyle } from './style/StrokeStyle.js'
 export { JoyPlotStyle } from './style/JoyPlotStyle.js'
 export { CompositionStyle } from './style/CompositionStyle.js'
+export { CompositionStyle_ } from './style/CompositionStyle_.js'
 export { SegmentStyle } from './style/SegmentStyle.js'
 export { TextStyle } from './style/TextStyle.js'
 export { PillarStyle } from './style/PillarStyle.js'

package/src/style/CompositionStyle_.js

@@ -0,0 +1,293 @@
+//@ts-check
+'use strict'
+
+import { Style } from '../Style.js'
+
+/** @typedef {"flag"|"piechart"|"ring"|"segment"|"radar"|"agepyramid"|"halftone"} CompositionType */
+
+/**
+ * A style showing the composition of a total in different categories, with different color hues.
+ * It consists of a symbol with different parts, whose size reflect the proportion of the corresponding category.
+ * For a list of supported symbols, @see CompositionType
+ * The symbol can be scaled depending on the cell importance.
+ *
+ * @author Julien Gaffuri
+ */
+export class CompositionStyle_ extends Style {
+    /** @param {object} opts */
+    constructor(opts) {
+        super(opts)
+        opts = opts || {}
+
+        /** A function returning the view scale.
+         * @type {function(Array.<import('../Dataset.js').Cell>,number, number):object} */
+        this.viewScale = opts.viewScale
+
+        /**
+         * The dictionary (string -> color) which give the color of each category.
+         * @type {object} */
+        this.color = opts.color
+
+        /**
+         * A function returning the type of decomposition symbol of a cell, @see CompositionType
+         * @type {function(import("../Dataset.js").Cell,number, number,object):CompositionType} */
+        this.type = opts.type
+
+        /** A function returning the size of a cell in geographical unit.
+         * @type {function(import('../Dataset.js').Cell,number, number,object):number} */
+        this.size = opts.size
+
+        /** For style types with stripes (flag, segment), the orientation of the stripes (0 for horizontal, other for vertical).
+         * @type {function(import("../Dataset.js").Cell,number,number,object):number} */
+        this.stripesOrientation = opts.stripesOrientation || (() => 0) //(c,r,zf,vc) => ...
+
+        /** The function specifying an offset angle for a radar, halftone or pie chart style.
+         * The angle is specified in degree. The rotation is anti-clockwise.
+         * @type {function(import("../Dataset.js").Cell,number,number,object):number} */
+        this.offsetAngle = opts.offsetAngle || (() => 0) //(cell,r,zf,vc) => ...
+
+        /** The function specifying the height of the age pyramid, in geo unit.
+         * @type {function(import("../Dataset.js").Cell,number,number,object):number} */
+        this.agePyramidHeight = opts.agePyramidHeight || ((c, r, zf) => r) //(cell,r,zf,vc) => ...
+
+        /** For pie chart, this is parameter for internal radius, so that the pie chart looks like a donut.
+         * 0 for normal pie charts, 0.5 to empty half of the radius.
+         * @type {number} */
+        this.pieChartInternalRadiusFactor = opts.pieChartInternalRadiusFactor || 0
+    }
+
+    /**
+     * Draw cells as squares depending on their value.
+     *
+     * @param {Array.<import("../Dataset.js").Cell>} cells
+     * @param {number} r
+     * @param {import("../GeoCanvas.js").GeoCanvas} cg
+     */
+    draw(cells, r, cg) {
+        //filter
+        if (this.filter) cells = cells.filter(this.filter)
+
+        //zoom factor
+        const zf = cg.getZf()
+
+        //get view scale
+        const vc = this.viewScale ? this.viewScale(cells, r, zf) : undefined
+
+        //nb categories - used for radar and agepyramid
+        const nbCat = Object.entries(this.color).length
+
+        //draw in geo coordinates
+        cg.setCanvasTransform()
+
+        //draw calls
+        for (let cell of cells) {
+
+            //size
+            const sG = this.size ? this.size(cell, r, zf, vc) : r
+            if (!sG) continue
+
+            //get offset
+            const offset = this.offset(cell, r, zf)
+
+            //get symbol type
+            const type_ = this.type ? this.type(cell, r, zf, vc) : 'flag'
+
+            //compute center position
+            const xc = cell.x + offset.dx + (type_ === 'agepyramid' ? 0 : r * 0.5)
+            const yc = cell.y + offset.dy + (type_ === 'agepyramid' ? 0 : r * 0.5)
+
+            //compute offset angle, when relevant
+            const offAng = this.offsetAngle ? (this.offsetAngle(cell, r, zf, vc) * Math.PI) / 180 : 0
+
+            if (type_ === 'agepyramid' || type_ === 'radar' || type_ === 'halftone') {
+                //get cell category max value
+                let maxVal = -Infinity
+                for (let key of Object.keys(this.color)) {
+                    const v = +cell[key]
+                    if (v > maxVal) maxVal = v
+                }
+
+                //cumul
+                let cumul = 0
+                if (type_ === 'agepyramid' && this.agePyramidHeight)
+                    cumul = (r - this.agePyramidHeight(cell, r, zf, vc)) / 2
+                if (type_ === 'radar' || type_ === 'halftone') cumul = Math.PI / 2 + offAng
+
+                //compute the increment, which is the value to increment the cumul for each category
+                const incr =
+                    type_ === 'agepyramid'
+                        ? (this.agePyramidHeight ? this.agePyramidHeight(cell, r, zf, vc) : r) / nbCat
+                        : type_ === 'radar' || type_ === 'halftone'
+                            ? (2 * Math.PI) / nbCat
+                            : undefined
+                if (incr === undefined) throw new Error('Unexpected symbol type:' + type_)
+
+                for (let [column, color] of Object.entries(this.color)) {
+                    if (type_ === 'agepyramid') {
+                        //set category color
+                        cg.ctx.fillStyle = color
+
+                        //get category value
+                        const val = cell[column]
+
+                        //compute category length - in geo
+                        /** @type {number} */
+                        const wG = (sG * val) / maxVal
+
+                        //draw bar
+                        cg.ctx.fillRect(xc + (r - wG) / 2, yc + cumul, wG, incr)
+
+                        //next height
+                        cumul += incr
+                    } else if (type_ === 'radar') {
+                        //set category color
+                        cg.ctx.fillStyle = color
+
+                        //get categroy value
+                        const val = cell[column]
+
+                        //compute category radius - in geo
+                        /** @type {number} */
+                        //const rG = this.radius(val, r, stat, cellStat, zf)
+                        const rG = (sG / 2) * Math.sqrt(val / maxVal)
+
+                        //draw angular sector
+                        cg.ctx.beginPath()
+                        cg.ctx.moveTo(xc, yc)
+                        cg.ctx.arc(xc, yc, rG, cumul - incr, cumul)
+                        cg.ctx.lineTo(xc, yc)
+                        cg.ctx.fill()
+
+                        //next angular sector
+                        cumul += incr
+                    } else if (type_ === 'halftone') {
+                        //set category color
+                        cg.ctx.fillStyle = color
+
+                        //get categroy value
+                        const val = cell[column]
+
+                        //compute category radius - in geo
+                        /** @type {number} */
+                        const rG = sG * 0.333 * Math.sqrt(val / maxVal)
+
+                        //draw circle
+                        cg.ctx.beginPath()
+                        cg.ctx.arc(
+                            xc + r * 0.25 * Math.cos(cumul),
+                            yc + r * 0.25 * Math.sin(cumul),
+                            rG,
+                            0,
+                            2 * Math.PI
+                        )
+                        cg.ctx.fill()
+
+                        //next angular sector
+                        cumul += incr
+                    } else {
+                        throw new Error('Unexpected symbol type:' + type_)
+                    }
+                }
+            } else {
+                //compute total
+                let total = 0
+                for (let column of Object.keys(this.color)) {
+                    const v = +cell[column]
+                    if (!v) continue
+                    total += v
+                }
+                if (!total || isNaN(total)) continue
+
+                //draw decomposition symbol
+                let cumul = 0
+                const d = r * (1 - sG / r) * 0.5
+                const ori = this.stripesOrientation(cell, r, zf, vc)
+
+                for (let [column, color] of Object.entries(this.color)) {
+                    //get share
+                    const share = cell[column] / total
+                    if (!share || isNaN(share)) continue
+
+                    //set color
+                    cg.ctx.fillStyle = color
+
+                    //draw symbol part
+                    if (type_ === 'flag') {
+                        //draw flag stripe
+                        if (ori == 0) {
+                            //horizontal
+                            cg.ctx.fillRect(
+                                cell.x + d + offset.dx,
+                                cell.y + d + cumul * sG + offset.dy,
+                                sG,
+                                share * sG
+                            )
+                        } else {
+                            //vertical
+                            cg.ctx.fillRect(
+                                cell.x + d + cumul * sG + offset.dx,
+                                cell.y + d + offset.dy,
+                                share * sG,
+                                sG
+                            )
+                        }
+                    } else if (type_ === 'piechart') {
+                        //draw pie chart angular sector
+
+                        //compute angles
+                        const a1 = cumul * 2 * Math.PI
+                        const a2 = (cumul + share) * 2 * Math.PI
+
+                        //draw
+                        cg.ctx.beginPath()
+                        cg.ctx.moveTo(xc, yc)
+                        cg.ctx.arc(xc, yc, sG * 0.5, a1 + offAng, a2 + offAng)
+                        if (this.pieChartInternalRadiusFactor)
+                            cg.ctx.arc(
+                                xc,
+                                yc,
+                                sG * 0.5 * this.pieChartInternalRadiusFactor,
+                                a1 + offAng,
+                                a2 + offAng,
+                                true
+                            )
+                        cg.ctx.closePath()
+                        cg.ctx.fill()
+                    } else if (type_ === 'ring') {
+                        //draw ring
+                        cg.ctx.beginPath()
+                        cg.ctx.arc(xc, yc, Math.sqrt(1 - cumul) * sG * 0.5, 0, 2 * Math.PI)
+                        cg.ctx.fill()
+                    } else if (type_ === 'segment') {
+                        //draw segment sections
+                        const wG = (sG * sG) / r
+                        if (ori == 0) {
+                            //horizontal
+                            cg.ctx.fillRect(
+                                cell.x + offset.dx,
+                                cell.y + (r - wG) / 2 + cumul * wG + offset.dy,
+                                r,
+                                share * wG
+                            )
+                        } else {
+                            //vertical
+                            cg.ctx.fillRect(
+                                cell.x + cumul * r + offset.dx,
+                                cell.y + (r - wG) / 2 + offset.dy,
+                                share * r,
+                                wG
+                            )
+                        }
+                    } else {
+                        throw new Error('Unexpected symbol type:' + type_)
+                    }
+
+                    cumul += share
+                }
+            }
+        }
+
+        //update legends
+        this.updateLegends({ style: this, r: r, zf: zf, viewScale: vc })
+    }
+}