gridviz 3.1.0 → 3.1.1

package/src/legend/ColorCategoryLegend.js

@@ -1,125 +1,127 @@
-//@ts-check
-'use strict'
-
-import { Legend } from '../core/Legend.js'
-
-/**
- * A legend element for color categrories.
- *
- * @module legend
- * @author Joseph Davies, Julien Gaffuri
- */
-export class ColorCategoryLegend extends Legend {
-    /** @param {Object} opts */
-    constructor(opts) {
-        super(opts)
-        opts = opts || {}
-
-        //col/categories array, in display order
-        /**
-         * @private
-         * @type {Array.<[string,string]>} */
-        this.colorLabel = opts.colorLabel || [['gray', '-']]
-
-        /**
-         * @private
-         * @type {import("../core/Style.js").Shape} */
-        this.shape = opts.shape || 'circle'
-        this.dimension = opts.dimension || { r: 8 }
-        this.strokeColor = opts.strokeColor || 'gray'
-        this.strokeWidth = opts.strokeWidth || 1
-        this.setType('category')
-    }
-
-    /**
-     */
-    update() {
-        //clear
-        this.div.selectAll('*').remove()
-
-        //title
-        this.makeTitle()
-
-        //categories
-        const nb = this.colorLabel.length
-        if (nb == 0) return
-
-        for (let i = 0; i < nb; i++) {
-            const cat = this.colorLabel[i]
-
-            //make div for category
-            const d = this.div.append('div').classed('gridviz-legend-category', true)
-            // hovering a category shows only its cells on the map
-            this.bindHover(d, cat[0], {
-                enter: () => d.classed('gridviz-legend-category--active', true).select('svg').select('rect, circle').style('stroke', 'red'),
-                leave: () => d.classed('gridviz-legend-category--active', false).select('svg').select('rect, circle').style('stroke', this.strokeColor),
-            })
-            //to enable vertical centering
-            //.style("position", "relative")
-
-            const sw = this.strokeWidth
-
-            //draw graphic element: box / circle
-            if (this.shape === 'square') {
-                const h = this.dimension.h || 15
-                const w = this.dimension.w || 20
-                d.append('div')
-                    .classed('gridviz-legend-symbol-wrapper', true)
-                    .style('display', 'inline')
-
-                    .append('svg')
-                    .classed('gridviz-legend-graphic', true)
-                    .attr('width', w + 2 * sw)
-                    .attr('height', h + 2 * sw)
-
-                    .append('rect')
-                    .classed('gridviz-legend-swatch', true)
-                    .attr('x', sw)
-                    .attr('y', sw)
-                    .attr('width', w)
-                    .attr('height', h)
-                    .style('fill', cat[0])
-                    .style('stroke', this.strokeColor)
-                    .style('stroke-width', this.strokeWidth)
-            } else if (this.shape === 'circle') {
-                const r = this.dimension.r || 8
-                const h = 2 * r + 2 * sw
-                d.append('div')
-                    .classed('gridviz-legend-symbol-wrapper', true)
-                    .style('display', 'inline')
-
-                    .append('svg')
-                    .classed('gridviz-legend-graphic', true)
-                    .attr('width', h)
-                    .attr('height', h)
-
-                    .append('circle')
-                    .classed('gridviz-legend-swatch', true)
-                    .attr('cx', r + sw)
-                    .attr('cy', r + sw)
-                    .attr('r', r)
-                    .style('fill', cat[0])
-                    .style('stroke', this.strokeColor)
-                    .style('stroke-width', this.strokeWidth)
-            } else {
-                throw new Error('Unexpected shape:' + this.shape)
-            }
-
-            //write label text
-            this.setText(
-                d
-                    .append('div')
-                    //show on right of graphic
-                    .style('display', 'inline')
-
-                    //center vertically
-                    //.style("position", "absolute").style("top", "0").style("bottom", "0")
-
-                    .classed('gridviz-legend-label', true)
-                    .style('padding-left', '5px')
-                    .style('font-size', this.labelFontSizeCSS()),
-                cat[1]
-            )
-        }
-    }
-}
+//@ts-check
+'use strict'
+
+import { Legend } from '../core/Legend.js'
+
+/**
+ * A legend element for color categrories.
+ *
+ * @module legend
+ * @author Joseph Davies, Julien Gaffuri
+ */
+export class ColorCategoryLegend extends Legend {
+    /** @param {Object} opts */
+    constructor(opts) {
+        super(opts)
+        opts = opts || {}
+
+        //col/categories array, in display order
+        /**
+         * @private
+         * @type {Array.<[string,string]>} */
+        this.colorLabel = opts.colorLabel || [['gray', '-']]
+
+        /**
+         * @private
+         * @type {import("../core/Style.js").Shape} */
+        this.shape = opts.shape || 'circle'
+        this.dimension = opts.dimension || { r: 8 }
+        this.strokeColor = opts.strokeColor || 'gray'
+        this.strokeWidth = opts.strokeWidth || 1
+        this.setType('category')
+    }
+
+    /**
+     */
+    update() {
+        //clear
+        this.div.selectAll('*').remove()
+
+        //title
+        this.makeTitle()
+
+        //categories
+        const nb = this.colorLabel.length
+        if (nb == 0) return
+
+        for (let i = 0; i < nb; i++) {
+            const cat = this.colorLabel[i]
+
+            //make div for category
+            const d = this.div.append('div').classed('gridviz-legend-category', true)
+            // hovering a category shows only its cells on the map
+            this.bindHover(d, cat[0], {
+                enter: () => d.classed('gridviz-legend-category--active', true).select('svg').select('rect, circle').style('stroke', 'red'),
+                leave: () => d.classed('gridviz-legend-category--active', false).select('svg').select('rect, circle').style('stroke', this.strokeColor),
+            })
+            //to enable vertical centering
+            //.style("position", "relative")
+
+            const sw = this.strokeWidth
+
+            //draw graphic element: box / circle
+            if (this.shape === 'square') {
+                const h = this.dimension.h || 15
+                const w = this.dimension.w || 20
+                d.append('div')
+                    .classed('gridviz-legend-symbol-wrapper', true)
+                    .style('display', 'inline')
+
+                    .append('svg')
+                    .classed('gridviz-legend-graphic', true)
+                    .attr('width', w + 2 * sw)
+                    .attr('height', h + 2 * sw)
+
+                    .append('rect')
+                    .classed('gridviz-legend-swatch', true)
+                    .attr('x', sw)
+                    .attr('y', sw)
+                    .attr('width', w)
+                    .attr('height', h)
+                    .style('fill', cat[0])
+                    .style('stroke', this.strokeColor)
+                    .style('stroke-width', this.strokeWidth)
+            } else if (this.shape === 'circle') {
+                const r = this.dimension.r || 8
+                const h = 2 * r + 2 * sw
+                d.append('div')
+                    .classed('gridviz-legend-symbol-wrapper', true)
+                    .style('display', 'inline')
+
+                    .append('svg')
+                    .classed('gridviz-legend-graphic', true)
+                    .attr('width', h)
+                    .attr('height', h)
+
+                    .append('circle')
+                    .classed('gridviz-legend-swatch', true)
+                    .attr('cx', r + sw)
+                    .attr('cy', r + sw)
+                    .attr('r', r)
+                    .style('fill', cat[0])
+                    .style('stroke', this.strokeColor)
+                    .style('stroke-width', this.strokeWidth)
+            } else {
+                throw new Error('Unexpected shape:' + this.shape)
+            }
+
+            //write label text
+            this.setText(
+                d
+                    .append('div')
+                    //show on right of graphic
+                    .style('display', 'inline')
+
+                    //center vertically
+                    //.style("position", "absolute").style("top", "0").style("bottom", "0")
+
+                    .classed('gridviz-legend-label', true)
+                    .style('padding-left', '5px')
+                    .style('font-size', this.labelFontSizeCSS())
+                    .style('fill', this.labelColorCSS())
+                    .style('color', this.labelColorCSS()),
+                cat[1]
+            )
+        }
+    }
+}

package/src/legend/ColorDiscreteLegend.js

@@ -1,114 +1,116 @@
-//@ts-check
-'use strict'
-
-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 {
-    /** @param {Object} opts */
-    constructor(opts) {
-        super(opts)
-        opts = opts || {}
-
-        /** @private @type {function(import('../core/Style').ViewScale):Array.<string>} */
-        this.colors = opts.colors
-        /** @private @type {function(import('../core/Style').ViewScale):Array.<number>} */
-        this.breaks = opts.breaks
-
-        // a number of pixels, or 'fill' for the width of the container
-        this.width = opts.width === 'fill' ? 300 : opts.width || 300
-        this.height = opts.height || 15
-        this.setType('discrete')
-
-        this.tickSize = opts.tickSize || 3
-
-        //label
-        this.invert = opts.invert
-    }
-
-    /**
-     * @param {{viewScale:import('../core/Style').ViewScale} } opts
-     */
-    update(opts) {
-        //clear
-        this.div.selectAll('*').remove()
-
-        //title
-        this.makeTitle()
-
-        //get colors and breaks
-        const colors = this.colors(opts.viewScale)
-        const breaks = this.breaks(opts.viewScale)
-        if (!breaks) return
-
-        //classes
-        const nb = colors.length
-        if (nb == 0) return
-        const width = this.availableWidth(this.width)
-        const w = width / nb
-
-        //make svg element
-        const svg = this.div
-            .append('svg')
-            .classed('gridviz-legend-graphic', true)
-            .attr('width', width)
-            .attr('height', this.height + this.tickSize + 2 + 10)
-
-        //draw graphic elements
-        for (let i = 0; i < nb; i++) {
-            const rect = svg
-                .append('rect')
-                .classed('gridviz-legend-swatch', true)
-                .attr('x', i * w)
-                .attr('y', 0)
-                .attr('width', w)
-                .attr('height', this.height)
-                .style('fill', colors[i])
-            // hovering a class shows only its cells on the map
-            this.bindHover(rect, colors[i], {
-                // a presentation attribute, so that a stylesheet can restyle the active swatch
-                enter: () => rect.classed('gridviz-legend-swatch--active', true).attr('stroke', 'red'),
-                leave: () => rect.classed('gridviz-legend-swatch--active', false).attr('stroke', null),
-            })
-        }
-
-        //tick line
-        for (let i = 1; i < nb; i++) {
-            svg.append('line')
-                .classed('gridviz-legend-tick', true)
-                .attr('x1', w * i)
-                .attr('y1', 0)
-                .attr('x2', w * i)
-                .attr('y2', this.height + this.tickSize)
-                .style('stroke', 'black')
-        }
-
-        //labels
-        for (let i = 1; i < nb; i++) {
-            let label = breaks[i - 1]
-            if (isNaN(label) || label == undefined) continue
-            if (this.labelFormat) label = this.labelFormat(label, i)
-
-            //label
-            svg.append('text')
-                .classed('gridviz-legend-label', true)
-                .attr('id', 'ticklabel_' + i)
-                .attr('x', w * i)
-                .attr('y', this.height + this.tickSize + 2)
-                .style('font-size', this.labelFontSizeCSS())
-                //.style("font-weight", "bold")
-                //.style("font-family", "Arial")
-                .style('text-anchor', 'middle')
-                .style('alignment-baseline', 'top')
-                .style('dominant-baseline', 'hanging')
-                .style('pointer-events', 'none')
-                .text(label)
-        }
-    }
-}
+//@ts-check
+'use strict'
+
+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 {
+    /** @param {Object} opts */
+    constructor(opts) {
+        super(opts)
+        opts = opts || {}
+
+        /** @private @type {function(import('../core/Style').ViewScale):Array.<string>} */
+        this.colors = opts.colors
+        /** @private @type {function(import('../core/Style').ViewScale):Array.<number>} */
+        this.breaks = opts.breaks
+
+        // a number of pixels, or 'fill' for the width of the container
+        this.width = opts.width === 'fill' ? 300 : opts.width || 300
+        this.height = opts.height || 15
+        this.setType('discrete')
+
+        this.tickSize = opts.tickSize || 3
+
+        //label
+        this.invert = opts.invert
+    }
+
+    /**
+     * @param {{viewScale:import('../core/Style').ViewScale} } opts
+     */
+    update(opts) {
+        //clear
+        this.div.selectAll('*').remove()
+
+        //title
+        this.makeTitle()
+
+        //get colors and breaks
+        const colors = this.colors(opts.viewScale)
+        const breaks = this.breaks(opts.viewScale)
+        if (!breaks) return
+
+        //classes
+        const nb = colors.length
+        if (nb == 0) return
+        const width = this.availableWidth(this.width)
+        const w = width / nb
+
+        //make svg element
+        const svg = this.div
+            .append('svg')
+            .classed('gridviz-legend-graphic', true)
+            .attr('width', width)
+            .attr('height', this.height + this.tickSize + 2 + 10)
+
+        //draw graphic elements
+        for (let i = 0; i < nb; i++) {
+            const rect = svg
+                .append('rect')
+                .classed('gridviz-legend-swatch', true)
+                .attr('x', i * w)
+                .attr('y', 0)
+                .attr('width', w)
+                .attr('height', this.height)
+                .style('fill', colors[i])
+            // hovering a class shows only its cells on the map
+            this.bindHover(rect, colors[i], {
+                // a presentation attribute, so that a stylesheet can restyle the active swatch
+                enter: () => rect.classed('gridviz-legend-swatch--active', true).attr('stroke', 'red'),
+                leave: () => rect.classed('gridviz-legend-swatch--active', false).attr('stroke', null),
+            })
+        }
+
+        //tick line
+        for (let i = 1; i < nb; i++) {
+            svg.append('line')
+                .classed('gridviz-legend-tick', true)
+                .attr('x1', w * i)
+                .attr('y1', 0)
+                .attr('x2', w * i)
+                .attr('y2', this.height + this.tickSize)
+                .style('stroke', 'black')
+        }
+
+        //labels
+        for (let i = 1; i < nb; i++) {
+            let label = breaks[i - 1]
+            if (isNaN(label) || label == undefined) continue
+            if (this.labelFormat) label = this.labelFormat(label, i)
+
+            //label
+            svg.append('text')
+                .classed('gridviz-legend-label', true)
+                .attr('id', 'ticklabel_' + i)
+                .attr('x', w * i)
+                .attr('y', this.height + this.tickSize + 2)
+                .style('font-size', this.labelFontSizeCSS())
+                .style('fill', this.labelColorCSS())
+                .style('color', this.labelColorCSS())
+                //.style("font-weight", "bold")
+                //.style("font-family", "Arial")
+                .style('text-anchor', 'middle')
+                .style('alignment-baseline', 'top')
+                .style('dominant-baseline', 'hanging')
+                .style('pointer-events', 'none')
+                .text(label)
+        }
+    }
+}

package/src/legend/ColorLegend.js

@@ -26,21 +26,39 @@ export class ColorLegend extends Legend {
 
         this.margin = opts.margin || 5
 
+        // a number of pixels, or 'fill' for the width of the container
+        this.width = opts.width === 'fill' ? 300 : opts.width || 300
+        this.height = opts.height || 15
+
         //replace with labels ?
         this.tickSize = opts.tickSize || 6
-        this.ticks = opts.ticks || Math.floor(this.width / 50)
+        /** The number of ticks. By default one for each 50 pixels of the width the legend is drawn at, at least 2.
+         * @type {number} */
+        this.ticks = opts.ticks || Math.max(2, Math.floor(this.width / 50))
+        /** The default number of ticks, when no number is given: it follows the width the legend is drawn at (@see update)
+         * @private */
+        this._defaultTicks = opts.ticks ? undefined : this.ticks
         this.tickFormat = opts.tickFormat
         this.tickUnit = opts.tickUnit
 
-        this.fontSize = opts.fontSize || '0.8em'
+        /** The font size of the tick labels. By default, the one of the legend labels (labelFontSize).
+         * @type {string|undefined} */
+        this.fontSize = opts.fontSize
         this.invert = opts.invert
 
-        // a number of pixels, or 'fill' for the width of the container
-        this.width = opts.width === 'fill' ? 300 : opts.width || 300
-        this.height = opts.height || 15
         this.setType('color')
     }
 
+    /**
+     * The number of ticks of the bar, for a width of it: the one given, or one for each 50 pixels (at least two: the two ends).
+     * @param {number} width The width the bar is drawn at, in pixels.
+     * @returns {number}
+     */
+    tickCount(width) {
+        if (this._defaultTicks !== undefined && this.ticks === this._defaultTicks) return Math.max(2, Math.floor(width / 50))
+        return Math.max(2, this.ticks)
+    }
+
     /**
      * @param {{viewScale:import('../core/Style').ViewScale} } opts
      */
@@ -52,6 +70,9 @@ export class ColorLegend extends Legend {
         this.makeTitle()
 
         const width = this.availableWidth(this.width)
+        // without a given number of ticks: one for each 50 pixels of the width the legend is drawn at (the one of its container
+        // with width:'fill'). At least two: the two ends.
+        const nbTicks = this.tickCount(width)
         const svgW = width + 2 * this.margin
         const svgH = this.height + this.margin + this.tickSize + 10
         const svg = this.div.append('svg').classed('gridviz-legend-graphic', true).attr('width', svgW).attr('height', svgH)
@@ -75,8 +96,8 @@ export class ColorLegend extends Legend {
                 .style('fill', this.colorScale(t, opts.viewScale))
         }
 
-        for (let i = 0; i < this.ticks; i++) {
-            let t = i / (this.ticks - 1)
+        for (let i = 0; i < nbTicks; i++) {
+            let t = i / (nbTicks - 1)
 
             //tick line
             g.append('line')
@@ -93,10 +114,11 @@ export class ColorLegend extends Legend {
                 .attr('id', 'ticklabel_' + i)
                 .attr('x', w * t)
                 .attr('y', h + this.tickSize + 2)
-                .style('font-size', this.fontSize)
+                .style('font-size', this.fontSize || this.labelFontSizeCSS())
+                .style('fill', this.labelColorCSS())
                 //.style("font-weight", "bold")
                 //.style("font-family", "Arial")
-                .style('text-anchor', i == 0 ? 'start' : i == this.ticks - 1 ? 'end' : 'middle')
+                .style('text-anchor', i == 0 ? 'start' : i == nbTicks - 1 ? 'end' : 'middle')
                 .style('alignment-baseline', 'top')
                 .style('dominant-baseline', 'hanging')
                 .style('pointer-events', 'none')
@@ -107,8 +129,8 @@ export class ColorLegend extends Legend {
 
         //label text format
         const f = this.tickFormat && this.tickFormat != 'text' ? this.tickFormat : (v) => v
-        for (let i = 0; i < this.ticks; i++) {
-            let t = i / (this.ticks - 1)
+        for (let i = 0; i < nbTicks; i++) {
+            let t = i / (nbTicks - 1)
 
             const v = this.textScale(t, opts.viewScale)
             const text = (v ? f(v) : '0') + (this.tickUnit ? this.tickUnit : '')