gridviz 2.1.13 → 2.1.15

package/src/index.js

@@ -1,71 +1,73 @@
-//@ts-check
-'use strict'
-
-// the application
-export { App } from './App.js'
-export { GeoCanvas } from './GeoCanvas.js'
-export { Style } from './Style.js'
-export { Layer } from './Layer.js'
-export { Dataset } from './Dataset.js'
-export { DatasetComponent } from './DatasetComponent.js'
-
-// export dataset types
-export { TiledGrid } from './dataset/TiledGrid.js'
-export { GridTile } from './dataset/GridTile.js'
-export { CSVGrid } from './dataset/CSVGrid.js'
-export { LGrid } from './dataset/LGrid.js'
-//export { GeoTIFF } from "./dataset/GeoTIFF"
-
-// export styles
-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 { SegmentStyle } from './style/SegmentStyle.js'
-export { TextStyle } from './style/TextStyle.js'
-export { PillarStyle } from './style/PillarStyle.js'
-export { SideStyle } from './style/SideStyle.js'
-export { ContourStyle } from './style/ContourStyle.js'
-export { SideCatStyle } from './style/SideCatStyle.js'
-export { DotDensityStyle } from './style/DotDensityStyle.js'
-export { TanakaStyle } from './style/TanakaStyle.js'
-export { LegoStyle } from './style/LegoStyle.js'
-export { SquareColorWGLStyle } from './style/SquareColorWGLStyle.js'
-export { SquareColorCatWGLStyle } from './style/SquareColorCatWGLStyle.js'
-export { MosaicStyle } from './style/MosaicStyle.js'
-export { NinjaStarStyle } from './style/NinjaStarStyle.js'
-export { TimeSeriesStyle } from './style/TimeSeriesStyle.js'
-export { IsoFenceStyle } from './style/IsoFenceStyle.js'
-
-// export additional layers
-export { BackgroundLayer } from './BackgroundLayer.js'
-export { BackgroundLayerWMS } from './BackgroundLayerWMS.js'
-export { LabelLayer } from './LabelLayer.js'
-export { LineLayer as BoundaryLayer } from './LineLayer.js'
-
-// export legends
-export { ColorLegend } from './legend/ColorLegend.js'
-export { ColorDiscreteLegend } from './legend/ColorDiscreteLegend.js'
-export { ColorCategoryLegend } from './legend/ColorCategoryLegend.js'
-export { SizeLegend } from './legend/SizeLegend.js'
-export { SegmentWidthLegend } from './legend/SegmentWidthLegend.js'
-export { SegmentOrientationLegend } from './legend/SegmentOrientationLegend.js'
-
-// export { goToStraight, zoomTo } from "./utils/zoomUtils"
-export * from './utils/stretching.js'
-
-export { getClass } from './utils/Utils.js'
-
-
-
-import { GeoCanvas } from './GeoCanvas.js'
-export const getParameterByName = GeoCanvas.getParameterByName
-
-// set default d3 locale
-import { formatDefaultLocale } from 'd3-format'
-formatDefaultLocale({
-    decimal: '.',
-    thousands: ' ',
-    grouping: [3],
-    currency: ['', '€'],
-})
+//@ts-check
+'use strict'
+
+// the application
+export { App } from './App.js'
+export { GeoCanvas } from './GeoCanvas.js'
+export { Style } from './Style.js'
+export { Layer } from './Layer.js'
+export { Dataset } from './Dataset.js'
+export { DatasetComponent } from './DatasetComponent.js'
+
+// export dataset types
+export { TiledGrid } from './dataset/TiledGrid.js'
+export { GridTile } from './dataset/GridTile.js'
+export { CSVGrid } from './dataset/CSVGrid.js'
+export { LGrid } from './dataset/LGrid.js'
+//export { GeoTIFF } from "./dataset/GeoTIFF"
+
+// 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'
+export { SideStyle } from './style/SideStyle.js'
+export { ContourStyle } from './style/ContourStyle.js'
+export { SideCatStyle } from './style/SideCatStyle.js'
+export { DotDensityStyle } from './style/DotDensityStyle.js'
+export { TanakaStyle } from './style/TanakaStyle.js'
+export { LegoStyle } from './style/LegoStyle.js'
+export { SquareColorWGLStyle } from './style/SquareColorWGLStyle.js'
+export { SquareColorCatWGLStyle } from './style/SquareColorCatWGLStyle.js'
+export { MosaicStyle } from './style/MosaicStyle.js'
+export { NinjaStarStyle } from './style/NinjaStarStyle.js'
+export { TimeSeriesStyle } from './style/TimeSeriesStyle.js'
+export { IsoFenceStyle } from './style/IsoFenceStyle.js'
+
+// export additional layers
+export { BackgroundLayer } from './BackgroundLayer.js'
+export { BackgroundLayerWMS } from './BackgroundLayerWMS.js'
+export { LabelLayer } from './LabelLayer.js'
+export { LineLayer as BoundaryLayer } from './LineLayer.js'
+
+// export legends
+export { ColorLegend } from './legend/ColorLegend.js'
+export { ColorDiscreteLegend } from './legend/ColorDiscreteLegend.js'
+export { ColorCategoryLegend } from './legend/ColorCategoryLegend.js'
+export { SizeLegend } from './legend/SizeLegend.js'
+export { SegmentWidthLegend } from './legend/SegmentWidthLegend.js'
+export { SegmentOrientationLegend } from './legend/SegmentOrientationLegend.js'
+
+// export { goToStraight, zoomTo } from "./utils/zoomUtils"
+export * from './utils/stretching.js'
+
+export { getClass } from './utils/Utils.js'
+
+
+
+import { GeoCanvas } from './GeoCanvas.js'
+export const getParameterByName = GeoCanvas.getParameterByName
+
+// set default d3 locale
+import { formatDefaultLocale } from 'd3-format'
+formatDefaultLocale({
+    decimal: '.',
+    thousands: ' ',
+    grouping: [3],
+    currency: ['', '€'],
+})

package/src/legend/ColorCategoryLegend.js

@@ -1,124 +1,124 @@
-//@ts-check
-'use strict'
-
-import { Legend } from '../Legend.js'
-
-/**
- * A legend element for color categrories.
- *
- * @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.<Array.<string>>} */
-        this.colCat = opts.colCat || [['gray', '-']]
-
-        /**
-         * @private
-         * @type {import("../Style").Shape} */
-        this.shape = opts.shape || 'circle'
-        this.dimension = opts.dimension || { r: 8 }
-        this.strokeColor = opts.strokeColor || 'gray'
-        this.strokeWidth = opts.strokeWidth || 1
-
-        this.title = opts.title
-        this.titleFontSize = opts.titleFontSize || '0.8em'
-        this.titleFontWeight = opts.titleFontWeight || 'bold'
-
-        //label
-        this.labelFontSize = opts.labelFontSize || '0.8em'
-    }
-
-    /**
-     * @param {{ style: import("../Style").Style, r: number, zf: number, sSize: import("../Style").Stat, sColor: import("../Style").Stat }} opts
-     */
-    update(opts) {
-        //clear
-        this.div.selectAll('*').remove()
-
-        //build
-
-        //title
-        if (this.title)
-            this.div
-                .append('div')
-                .style('font-size', this.titleFontSize)
-                .style('font-weight', this.titleFontWeight)
-                .style('margin-bottom', '7px')
-                .text(this.title)
-
-        //categories
-        const nb = this.colCat.length
-        if (nb == 0) return
-
-        for (let i = 0; i < nb; i++) {
-            const cat = this.colCat[i]
-
-            //make div for category
-            const d = this.div.append('div')
-            //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')
-                    .style('display', 'inline')
-
-                    .append('svg')
-                    .attr('width', w + 2 * sw)
-                    .attr('height', h + 2 * sw)
-
-                    .append('rect')
-                    .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')
-                    .style('display', 'inline')
-
-                    .append('svg')
-                    .attr('width', h)
-                    .attr('height', h)
-
-                    .append('circle')
-                    .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
-            d.append('div')
-                //show on right of graphic
-                .style('display', 'inline')
-
-                //center vertically
-                //.style("position", "absolute").style("top", "0").style("bottom", "0")
-
-                .style('padding-left', '5px')
-                .style('font-size', this.labelFontSize)
-                .text(cat[1])
-        }
-    }
-}
+//@ts-check
+'use strict'
+
+import { Legend } from '../Legend.js'
+
+/**
+ * A legend element for color categrories.
+ *
+ * @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.<Array.<string>>} */
+        this.colCat = opts.colCat || [['gray', '-']]
+
+        /**
+         * @private
+         * @type {import("../Style").Shape} */
+        this.shape = opts.shape || 'circle'
+        this.dimension = opts.dimension || { r: 8 }
+        this.strokeColor = opts.strokeColor || 'gray'
+        this.strokeWidth = opts.strokeWidth || 1
+
+        this.title = opts.title
+        this.titleFontSize = opts.titleFontSize || '0.8em'
+        this.titleFontWeight = opts.titleFontWeight || 'bold'
+
+        //label
+        this.labelFontSize = opts.labelFontSize || '0.8em'
+    }
+
+    /**
+     * @param {{ style: import("../Style").Style, r: number, zf: number, sSize: import("../Style").Stat, sColor: import("../Style").Stat }} opts
+     */
+    update(opts) {
+        //clear
+        this.div.selectAll('*').remove()
+
+        //build
+
+        //title
+        if (this.title)
+            this.div
+                .append('div')
+                .style('font-size', this.titleFontSize)
+                .style('font-weight', this.titleFontWeight)
+                .style('margin-bottom', '7px')
+                .text(this.title)
+
+        //categories
+        const nb = this.colCat.length
+        if (nb == 0) return
+
+        for (let i = 0; i < nb; i++) {
+            const cat = this.colCat[i]
+
+            //make div for category
+            const d = this.div.append('div')
+            //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')
+                    .style('display', 'inline')
+
+                    .append('svg')
+                    .attr('width', w + 2 * sw)
+                    .attr('height', h + 2 * sw)
+
+                    .append('rect')
+                    .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')
+                    .style('display', 'inline')
+
+                    .append('svg')
+                    .attr('width', h)
+                    .attr('height', h)
+
+                    .append('circle')
+                    .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
+            d.append('div')
+                //show on right of graphic
+                .style('display', 'inline')
+
+                //center vertically
+                //.style("position", "absolute").style("top", "0").style("bottom", "0")
+
+                .style('padding-left', '5px')
+                .style('font-size', this.labelFontSize)
+                .text(cat[1])
+        }
+    }
+}

package/src/legend/ColorDiscreteLegend.js

@@ -1,103 +1,103 @@
-//@ts-check
-'use strict'
-
-import { Legend } from '../Legend.js'
-
-/**
- * A legend element for discrete color style.
- * Inspiration: https://observablehq.com/@d3/color-legend
- *
- * @author Julien Gaffuri
- */
-export class ColorDiscreteLegend extends Legend {
-    /** @param {Object} opts */
-    constructor(opts) {
-        super(opts)
-        opts = opts || {}
-
-        /** @private @type {Array.<Array.<string>>} */
-        this.colors = opts.colors
-        /** @private @type {Array.<Array.<string>>} */
-        this.breaksText = opts.breaksText
-
-        this.width = opts.width || 300
-        this.height = opts.height || 15
-
-        this.title = opts.title
-        this.titleFontSize = opts.titleFontSize || '0.8em'
-        this.titleFontWeight = opts.titleFontWeight || 'bold'
-
-        this.tickSize = opts.tickSize || 3
-
-        //label
-        this.labelFontSize = opts.labelFontSize || '0.8em'
-        this.invert = opts.invert
-    }
-
-    /**
-     * @param {{ style: import("../Style").Style, r: number, zf: number, sSize: import("../Style").Stat, sColor: import("../Style").Stat }} opts
-     */
-    update(opts) {
-        //clear
-        this.div.selectAll('*').remove()
-
-        //build
-
-        //title
-        if (this.title)
-            this.div
-                .append('div')
-                .style('font-size', this.titleFontSize)
-                .style('font-weight', this.titleFontWeight)
-                .style('margin-bottom', '7px')
-                .text(this.title)
-
-        //classes
-        const nb = this.colors.length
-        if (nb == 0) return
-        const w = this.width / nb
-
-        //make svg element
-        const svg = this.div
-            .append('svg')
-            .attr('width', this.width)
-            .attr('height', this.height + this.tickSize + 2 + 10)
-
-        //draw graphic elements
-        for (let i = 0; i < nb; i++) {
-            svg.append('rect')
-                .attr('x', i * w)
-                .attr('y', 0)
-                .attr('width', w)
-                .attr('height', this.height)
-                .style('fill', this.colors[i])
-        }
-
-        //tick line
-        for (let i = 1; i < nb; i++) {
-            svg.append('line')
-                .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++) {
-            //prepare label
-            svg.append('text')
-                .attr('id', 'ticklabel_' + i)
-                .attr('x', w * i)
-                .attr('y', this.height + this.tickSize + 2)
-                .style('font-size', this.labelFontSize)
-                //.style("font-weight", "bold")
-                //.style("font-family", "Arial")
-                .style('text-anchor', i == 0 ? 'start' : i == this.ticks - 1 ? 'end' : 'middle')
-                .style('alignment-baseline', 'top')
-                .style('dominant-baseline', 'hanging')
-                .style('pointer-events', 'none')
-                .text(this.breaksText[i - 1])
-        }
-    }
-}
+//@ts-check
+'use strict'
+
+import { Legend } from '../Legend.js'
+
+/**
+ * A legend element for discrete color style.
+ * Inspiration: https://observablehq.com/@d3/color-legend
+ *
+ * @author Julien Gaffuri
+ */
+export class ColorDiscreteLegend extends Legend {
+    /** @param {Object} opts */
+    constructor(opts) {
+        super(opts)
+        opts = opts || {}
+
+        /** @private @type {Array.<Array.<string>>} */
+        this.colors = opts.colors
+        /** @private @type {Array.<Array.<string>>} */
+        this.breaksText = opts.breaksText
+
+        this.width = opts.width || 300
+        this.height = opts.height || 15
+
+        this.title = opts.title
+        this.titleFontSize = opts.titleFontSize || '0.8em'
+        this.titleFontWeight = opts.titleFontWeight || 'bold'
+
+        this.tickSize = opts.tickSize || 3
+
+        //label
+        this.labelFontSize = opts.labelFontSize || '0.8em'
+        this.invert = opts.invert
+    }
+
+    /**
+     * @param {{ style: import("../Style").Style, r: number, zf: number, sSize: import("../Style").Stat, sColor: import("../Style").Stat }} opts
+     */
+    update(opts) {
+        //clear
+        this.div.selectAll('*').remove()
+
+        //build
+
+        //title
+        if (this.title)
+            this.div
+                .append('div')
+                .style('font-size', this.titleFontSize)
+                .style('font-weight', this.titleFontWeight)
+                .style('margin-bottom', '7px')
+                .text(this.title)
+
+        //classes
+        const nb = this.colors.length
+        if (nb == 0) return
+        const w = this.width / nb
+
+        //make svg element
+        const svg = this.div
+            .append('svg')
+            .attr('width', this.width)
+            .attr('height', this.height + this.tickSize + 2 + 10)
+
+        //draw graphic elements
+        for (let i = 0; i < nb; i++) {
+            svg.append('rect')
+                .attr('x', i * w)
+                .attr('y', 0)
+                .attr('width', w)
+                .attr('height', this.height)
+                .style('fill', this.colors[i])
+        }
+
+        //tick line
+        for (let i = 1; i < nb; i++) {
+            svg.append('line')
+                .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++) {
+            //prepare label
+            svg.append('text')
+                .attr('id', 'ticklabel_' + i)
+                .attr('x', w * i)
+                .attr('y', this.height + this.tickSize + 2)
+                .style('font-size', this.labelFontSize)
+                //.style("font-weight", "bold")
+                //.style("font-family", "Arial")
+                .style('text-anchor', i == 0 ? 'start' : i == this.ticks - 1 ? 'end' : 'middle')
+                .style('alignment-baseline', 'top')
+                .style('dominant-baseline', 'hanging')
+                .style('pointer-events', 'none')
+                .text(this.breaksText[i - 1])
+        }
+    }
+}