gridviz 3.0.22 → 3.0.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (66) hide show
  1. package/README.md +128 -128
  2. package/dist/gridviz.js +8618 -8579
  3. package/dist/gridviz.min.js +1 -1
  4. package/package.json +74 -74
  5. package/src/button/Button.js +67 -67
  6. package/src/button/FullscreenButton.js +121 -121
  7. package/src/button/ZoomButtons.js +103 -101
  8. package/src/core/Dataset.js +154 -154
  9. package/src/core/Drawable.js +78 -78
  10. package/src/core/GeoCanvas.js +437 -430
  11. package/src/core/Layer.js +23 -23
  12. package/src/core/Legend.js +108 -108
  13. package/src/core/Map.js +542 -516
  14. package/src/core/MultiResolutionDataset.js +93 -93
  15. package/src/core/Style.js +98 -98
  16. package/src/core/Tooltip.js +182 -182
  17. package/src/dataset/COGeo.js +25 -25
  18. package/src/dataset/CSVGrid.js +112 -112
  19. package/src/dataset/GeoTIFF.js +122 -122
  20. package/src/dataset/JSGrid.js +55 -55
  21. package/src/dataset/TiledGrid.js +302 -302
  22. package/src/dataset/worker.js +18 -18
  23. package/src/index.js +77 -77
  24. package/src/layer/BackgroundLayer.js +173 -173
  25. package/src/layer/BackgroundLayerImage.js +81 -81
  26. package/src/layer/BackgroundLayerWMS.js +104 -104
  27. package/src/layer/GeoJSONLayer.js +214 -214
  28. package/src/layer/GridLayer.js +148 -148
  29. package/src/layer/LabelLayer.js +194 -194
  30. package/src/legend/ColorCategoryLegend.js +109 -109
  31. package/src/legend/ColorDiscreteLegend.js +100 -100
  32. package/src/legend/ColorLegend.js +115 -115
  33. package/src/legend/OrientationLegend.js +89 -89
  34. package/src/legend/SizeLegend.js +224 -224
  35. package/src/legend/TernaryLegend.js +302 -302
  36. package/src/style/CompositionStyle.js +291 -291
  37. package/src/style/ContourStyle.js +21 -21
  38. package/src/style/DotDensityStyle.js +133 -133
  39. package/src/style/ImageStyle.js +100 -100
  40. package/src/style/IsoFenceStyle.js +217 -217
  41. package/src/style/JoyPlotStyle.js +127 -127
  42. package/src/style/LegoStyle.js +110 -110
  43. package/src/style/MosaicStyle.js +99 -99
  44. package/src/style/NinjaStarStyle.js +102 -102
  45. package/src/style/PillarStyle.js +207 -207
  46. package/src/style/SegmentStyle.js +105 -105
  47. package/src/style/ShapeColorSizeStyle.js +147 -147
  48. package/src/style/SideCategoryStyle.js +112 -112
  49. package/src/style/SideStyle.js +212 -212
  50. package/src/style/SquareColorCategoryWebGLStyle.js +107 -107
  51. package/src/style/SquareColorWebGLStyle.js +126 -126
  52. package/src/style/StrokeStyle.js +135 -135
  53. package/src/style/TanakaStyle.js +69 -69
  54. package/src/style/TextStyle.js +110 -110
  55. package/src/style/TimeSeriesStyle.js +222 -222
  56. package/src/utils/WebGLRectangleColoring.js +106 -106
  57. package/src/utils/WebGLSquareColoring.js +118 -118
  58. package/src/utils/WebGLSquareColoringAdvanced.js +230 -230
  59. package/src/utils/WebGLSquareColoringCatAdvanced.js +133 -133
  60. package/src/utils/WebGLSquareColoringKS.js +153 -153
  61. package/src/utils/scale.js +218 -218
  62. package/src/utils/stretching.js +120 -120
  63. package/src/utils/ternary.js +208 -208
  64. package/src/utils/utils.js +58 -58
  65. package/src/utils/webGLUtils.js +72 -72
  66. package/src/utils/zoomUtils.js +142 -142
package/package.json CHANGED
@@ -1,74 +1,74 @@
1
- {
2
- "name": "gridviz",
3
- "version": "3.0.22",
4
- "description": "Visualization tool for gridded statistics",
5
- "keywords": [
6
- "statistics",
7
- "grid",
8
- "gridded",
9
- "grids",
10
- "gridded statistics",
11
- "dataviz",
12
- "csv",
13
- "GIS",
14
- "WebGL",
15
- "d3",
16
- "cartography",
17
- "bertin",
18
- "geospatial",
19
- "mapping"
20
- ],
21
- "homepage": "https://github.com/eurostat/gridviz",
22
- "author": "Joseph Davies, Julien Gaffuri",
23
- "license": "EUPL-1.2",
24
- "repository": {
25
- "type": "git",
26
- "url": "git+https://github.com/eurostat/gridviz.git"
27
- },
28
- "bugs": {
29
- "url": "https://github.com/eurostat/gridviz/issues",
30
- "email": "Joseph.DAVIES@ext.ec.europa.eu"
31
- },
32
- "type": "module",
33
- "main": "dist/gridviz.min.js",
34
- "module": "dist/gridviz.min.js",
35
- "exports": {
36
- "umd": "./dist/gridviz.min.js",
37
- "default": "./src/index.js"
38
- },
39
- "scripts": {
40
- "start": "webpack --config webpack.config.dev.cjs",
41
- "server": "webpack serve -c webpack.config.dev.cjs",
42
- "doc": "jsdoc -c docs/jsdoc/jsdoc.conf.json",
43
- "build-prod": "webpack --config webpack.config.prod.cjs",
44
- "test": "jest",
45
- "format": "prettier --write ."
46
- },
47
- "files": [
48
- "dist/**/*.js",
49
- "src/**/*.js"
50
- ],
51
- "dependencies": {
52
- "d3-array": "^3.2.4",
53
- "d3-color": "^3.1.0",
54
- "d3-fetch": "^3.0.1",
55
- "d3-random": "^3.0.1",
56
- "d3-scale": "^4.0.2",
57
- "d3-selection": "^3.0.0",
58
- "d3-zoom": "^3.0.0",
59
- "jsdoc": "^4.0.4"
60
- },
61
- "devDependencies": {
62
- "@babel/preset-env": "^7.25.4",
63
- "babel-loader": "^8.1.0",
64
- "jshint": "^2.12.0",
65
- "prettier": "^2.8.8",
66
- "webpack": "^5.96.1",
67
- "webpack-cli": "^5.1.4",
68
- "webpack-dev-server": "^5.1.0",
69
- "webpack-livereload-plugin": "^3.0.2"
70
- },
71
- "engines": {
72
- "node": ">=14"
73
- }
74
- }
1
+ {
2
+ "name": "gridviz",
3
+ "version": "3.0.24",
4
+ "description": "Visualization tool for gridded statistics",
5
+ "keywords": [
6
+ "statistics",
7
+ "grid",
8
+ "gridded",
9
+ "grids",
10
+ "gridded statistics",
11
+ "dataviz",
12
+ "csv",
13
+ "GIS",
14
+ "WebGL",
15
+ "d3",
16
+ "cartography",
17
+ "bertin",
18
+ "geospatial",
19
+ "mapping"
20
+ ],
21
+ "homepage": "https://github.com/eurostat/gridviz",
22
+ "author": "Joseph Davies, Julien Gaffuri",
23
+ "license": "EUPL-1.2",
24
+ "repository": {
25
+ "type": "git",
26
+ "url": "git+https://github.com/eurostat/gridviz.git"
27
+ },
28
+ "bugs": {
29
+ "url": "https://github.com/eurostat/gridviz/issues",
30
+ "email": "Joseph.DAVIES@ext.ec.europa.eu"
31
+ },
32
+ "type": "module",
33
+ "main": "dist/gridviz.min.js",
34
+ "module": "dist/gridviz.min.js",
35
+ "exports": {
36
+ "umd": "./dist/gridviz.min.js",
37
+ "default": "./src/index.js"
38
+ },
39
+ "scripts": {
40
+ "start": "webpack --config webpack.config.dev.cjs",
41
+ "server": "webpack serve -c webpack.config.dev.cjs",
42
+ "doc": "jsdoc -c docs/jsdoc/jsdoc.conf.json",
43
+ "build-prod": "webpack --config webpack.config.prod.cjs",
44
+ "test": "jest",
45
+ "format": "prettier --write ."
46
+ },
47
+ "files": [
48
+ "dist/**/*.js",
49
+ "src/**/*.js"
50
+ ],
51
+ "dependencies": {
52
+ "d3-array": "^3.2.4",
53
+ "d3-color": "^3.1.0",
54
+ "d3-fetch": "^3.0.1",
55
+ "d3-random": "^3.0.1",
56
+ "d3-scale": "^4.0.2",
57
+ "d3-selection": "^3.0.0",
58
+ "d3-zoom": "^3.0.0",
59
+ "jsdoc": "^4.0.4"
60
+ },
61
+ "devDependencies": {
62
+ "@babel/preset-env": "^7.25.4",
63
+ "babel-loader": "^8.1.0",
64
+ "jshint": "^2.12.0",
65
+ "prettier": "^2.8.8",
66
+ "webpack": "^5.96.1",
67
+ "webpack-cli": "^5.1.4",
68
+ "webpack-dev-server": "^5.1.0",
69
+ "webpack-livereload-plugin": "^3.0.2"
70
+ },
71
+ "engines": {
72
+ "node": ">=14"
73
+ }
74
+ }
@@ -1,67 +1,67 @@
1
- import { select } from 'd3-selection'
2
-
3
- /**
4
- * Parent class for button elements used to interact with the gridviz viewer.
5
- *
6
- * @module button
7
- * @author Joseph Davies, Julien Gaffuri
8
- */
9
- export class Button {
10
- /**
11
- * @param {Object} opts
12
- * opts.parentNode
13
- * opts.id
14
- * opts.title
15
- * opts.class
16
- * opts.onClickFunction
17
- * opts.x
18
- * opts.y
19
- */
20
- constructor(opts = {}) {
21
- this.map = opts.map
22
- this.parentNode = opts.parentNode || opts.map.container
23
-
24
- // the div element
25
- if (opts.id) this.div = select('#' + opts.id)
26
-
27
- if (!this.div || this.div.empty()) {
28
- this.div = select(document.createElement('div'))
29
- if (opts.id) this.div.attr('id', opts.id)
30
- }
31
-
32
- if (opts.title) this.div.attr('title', opts.title)
33
- if (opts.class) this.div.attr('class', opts.class)
34
-
35
- // add events
36
- if (opts.onClickFunction) this.div.on('click', opts.onClickFunction)
37
-
38
- //set styles
39
- this.style(
40
- 'box-shadow',
41
- '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)'
42
- ) //.ecl-u-shadow-3
43
- this.style('background-color', '#ffffff')
44
- this.style('position', 'absolute')
45
- this.style('cursor', 'pointer')
46
- this.style('display', 'flex')
47
- this.style('justify-content', 'center')
48
- this.style('align-items', 'center')
49
- this.style('width', '35px')
50
- this.style('height', '30px')
51
- // this.style(padding , '4px'
52
-
53
- // append to parent
54
- this.parentNode.appendChild(this.div.node())
55
- }
56
-
57
- /**
58
- * Apply a style to the button div.
59
- * @param {string} k
60
- * @param {string} v
61
- * @returns {this}
62
- */
63
- style(k, v) {
64
- this.div.style(k, v)
65
- return this
66
- }
67
- }
1
+ import { select } from 'd3-selection'
2
+
3
+ /**
4
+ * Parent class for button elements used to interact with the gridviz viewer.
5
+ *
6
+ * @module button
7
+ * @author Joseph Davies, Julien Gaffuri
8
+ */
9
+ export class Button {
10
+ /**
11
+ * @param {Object} opts
12
+ * opts.parentNode
13
+ * opts.id
14
+ * opts.title
15
+ * opts.class
16
+ * opts.onClickFunction
17
+ * opts.x
18
+ * opts.y
19
+ */
20
+ constructor(opts = {}) {
21
+ this.map = opts.map
22
+ this.parentNode = opts.parentNode || opts.map.container
23
+
24
+ // the div element
25
+ if (opts.id) this.div = select('#' + opts.id)
26
+
27
+ if (!this.div || this.div.empty()) {
28
+ this.div = select(document.createElement('div'))
29
+ if (opts.id) this.div.attr('id', opts.id)
30
+ }
31
+
32
+ if (opts.title) this.div.attr('title', opts.title)
33
+ if (opts.class) this.div.attr('class', opts.class)
34
+
35
+ // add events
36
+ if (opts.onClickFunction) this.div.on('click', opts.onClickFunction)
37
+
38
+ //set styles
39
+ this.style(
40
+ 'box-shadow',
41
+ '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)'
42
+ ) //.ecl-u-shadow-3
43
+ this.style('background-color', '#ffffff')
44
+ this.style('position', 'absolute')
45
+ this.style('cursor', 'pointer')
46
+ this.style('display', 'flex')
47
+ this.style('justify-content', 'center')
48
+ this.style('align-items', 'center')
49
+ this.style('width', '35px')
50
+ this.style('height', '30px')
51
+ // this.style(padding , '4px'
52
+
53
+ // append to parent
54
+ this.parentNode.appendChild(this.div.node())
55
+ }
56
+
57
+ /**
58
+ * Apply a style to the button div.
59
+ * @param {string} k
60
+ * @param {string} v
61
+ * @returns {this}
62
+ */
63
+ style(k, v) {
64
+ this.div.style(k, v)
65
+ return this
66
+ }
67
+ }
@@ -1,121 +1,121 @@
1
- import { Button } from './Button.js'
2
-
3
- /**
4
- * Button for toggling fullscreen mode
5
- *
6
- * @module button
7
- * @author Joseph Davies, Julien Gaffuri
8
- */
9
- export class FullscreenButton extends Button {
10
- /**
11
- * @param {Object} opts
12
- * opts.parentNode - the node that the button is appended to
13
- * opts.canvas - the gridviz canvas
14
- * opts.id
15
- * opts.title - HTML title attribute
16
- * opts.class - css class
17
- * opts.onClickFunction
18
- * opts.x - x position of the button
19
- * opts.y - y position of the button
20
- */
21
-
22
- // default state
23
- isFullscreen = false
24
-
25
- constructor(opts) {
26
- super(opts)
27
-
28
- // append fullscreen icon to button container
29
- this.div.node().innerHTML = `
30
- <svg
31
- style="height: 1.2rem; width: 1.2rem; fill:black; margin:0;"
32
- focusable="false"
33
- aria-hidden="true"
34
- >
35
- <svg fill="#000000" viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg">
36
- <title/>
37
- <g>
38
- <path d="M30,0H6A5.9966,5.9966,0,0,0,0,6V30a6,6,0,0,0,12,0V12H30A6,6,0,0,0,30,0Z"/>
39
- <path d="M90,0H66a6,6,0,0,0,0,12H84V30a6,6,0,0,0,12,0V6A5.9966,5.9966,0,0,0,90,0Z"/>
40
- <path d="M30,84H12V66A6,6,0,0,0,0,66V90a5.9966,5.9966,0,0,0,6,6H30a6,6,0,0,0,0-12Z"/>
41
- <path d="M90,60a5.9966,5.9966,0,0,0-6,6V84H66a6,6,0,0,0,0,12H90a5.9966,5.9966,0,0,0,6-6V66A5.9966,5.9966,0,0,0,90,60Z"/>
42
- </g>
43
- </svg>
44
- </svg>
45
- `
46
-
47
- //save initial map dimensions
48
- this.defaultHeight = this.map.h
49
- this.defaultWidth = this.map.w
50
-
51
- // event handler
52
- this.div.on('click', (e) => {
53
- this.onClickFunction(e)
54
- })
55
- this.div.on('mouseover', (e) => {
56
- this.style('background-color', 'lightgrey')
57
- })
58
- this.div.on('mouseout', (e) => {
59
- this.style('background-color', '#ffffff')
60
- })
61
-
62
- //set position
63
- if (opts.x) {
64
- this.style('left', opts.x + 'px')
65
- } else {
66
- this.style('right', '10px')
67
- }
68
- if (opts.y) {
69
- this.style('top', opts.y + 'px')
70
- } else {
71
- this.style('top', '90px')
72
- }
73
- }
74
-
75
- onClickFunction(e) {
76
- if (this.isFullscreen) {
77
- this.closeFullscreen(this.map.container)
78
- //resize canvas to default
79
- this.map.h = this.defaultHeight
80
- this.map.w = this.defaultWidth
81
- this.map.geoCanvas.h = this.defaultHeight
82
- this.map.geoCanvas.w = this.defaultWidth
83
- this.map.geoCanvas.canvas.setAttribute('width', '' + this.defaultWidth)
84
- this.map.geoCanvas.canvas.setAttribute('height', '' + this.defaultHeight)
85
- this.map.redraw()
86
- this.isFullscreen = false
87
- } else {
88
- this.openFullscreen(this.map.container)
89
- //resize canvas to fullscreen
90
- this.map.h = window.screen.height
91
- this.map.w = window.screen.width
92
- this.isFullscreen = true
93
- }
94
- }
95
-
96
- /* Open fullscreen */
97
- openFullscreen(elem) {
98
- if (elem.requestFullscreen) {
99
- elem.requestFullscreen()
100
- } else if (elem.webkitRequestFullscreen) {
101
- /* Safari */
102
- elem.webkitRequestFullscreen()
103
- } else if (elem.msRequestFullscreen) {
104
- /* IE11 */
105
- elem.msRequestFullscreen()
106
- }
107
- }
108
-
109
- /* Close fullscreen */
110
- closeFullscreen() {
111
- if (document.exitFullscreen) {
112
- document.exitFullscreen()
113
- } else if (document.webkitExitFullscreen) {
114
- /* Safari */
115
- document.webkitExitFullscreen()
116
- } else if (document.msExitFullscreen) {
117
- /* IE11 */
118
- document.msExitFullscreen()
119
- }
120
- }
121
- }
1
+ import { Button } from './Button.js'
2
+
3
+ /**
4
+ * Button for toggling fullscreen mode
5
+ *
6
+ * @module button
7
+ * @author Joseph Davies, Julien Gaffuri
8
+ */
9
+ export class FullscreenButton extends Button {
10
+ /**
11
+ * @param {Object} opts
12
+ * opts.parentNode - the node that the button is appended to
13
+ * opts.canvas - the gridviz canvas
14
+ * opts.id
15
+ * opts.title - HTML title attribute
16
+ * opts.class - css class
17
+ * opts.onClickFunction
18
+ * opts.x - x position of the button
19
+ * opts.y - y position of the button
20
+ */
21
+
22
+ // default state
23
+ isFullscreen = false
24
+
25
+ constructor(opts) {
26
+ super(opts)
27
+
28
+ // append fullscreen icon to button container
29
+ this.div.node().innerHTML = `
30
+ <svg
31
+ style="height: 1.2rem; width: 1.2rem; fill:black; margin:0;"
32
+ focusable="false"
33
+ aria-hidden="true"
34
+ >
35
+ <svg fill="#000000" viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg">
36
+ <title/>
37
+ <g>
38
+ <path d="M30,0H6A5.9966,5.9966,0,0,0,0,6V30a6,6,0,0,0,12,0V12H30A6,6,0,0,0,30,0Z"/>
39
+ <path d="M90,0H66a6,6,0,0,0,0,12H84V30a6,6,0,0,0,12,0V6A5.9966,5.9966,0,0,0,90,0Z"/>
40
+ <path d="M30,84H12V66A6,6,0,0,0,0,66V90a5.9966,5.9966,0,0,0,6,6H30a6,6,0,0,0,0-12Z"/>
41
+ <path d="M90,60a5.9966,5.9966,0,0,0-6,6V84H66a6,6,0,0,0,0,12H90a5.9966,5.9966,0,0,0,6-6V66A5.9966,5.9966,0,0,0,90,60Z"/>
42
+ </g>
43
+ </svg>
44
+ </svg>
45
+ `
46
+
47
+ //save initial map dimensions
48
+ this.defaultHeight = this.map.h
49
+ this.defaultWidth = this.map.w
50
+
51
+ // event handler
52
+ this.div.on('click', (e) => {
53
+ this.onClickFunction(e)
54
+ })
55
+ this.div.on('mouseover', (e) => {
56
+ this.style('background-color', 'lightgrey')
57
+ })
58
+ this.div.on('mouseout', (e) => {
59
+ this.style('background-color', '#ffffff')
60
+ })
61
+
62
+ //set position
63
+ if (opts.x) {
64
+ this.style('left', opts.x + 'px')
65
+ } else {
66
+ this.style('right', '10px')
67
+ }
68
+ if (opts.y) {
69
+ this.style('top', opts.y + 'px')
70
+ } else {
71
+ this.style('top', '90px')
72
+ }
73
+ }
74
+
75
+ onClickFunction(e) {
76
+ if (this.isFullscreen) {
77
+ this.closeFullscreen(this.map.container)
78
+ //resize canvas to default
79
+ this.map.h = this.defaultHeight
80
+ this.map.w = this.defaultWidth
81
+ this.map.geoCanvas.h = this.defaultHeight
82
+ this.map.geoCanvas.w = this.defaultWidth
83
+ this.map.geoCanvas.canvas.setAttribute('width', '' + this.defaultWidth)
84
+ this.map.geoCanvas.canvas.setAttribute('height', '' + this.defaultHeight)
85
+ this.map.redraw()
86
+ this.isFullscreen = false
87
+ } else {
88
+ this.openFullscreen(this.map.container)
89
+ //resize canvas to fullscreen
90
+ this.map.h = window.screen.height
91
+ this.map.w = window.screen.width
92
+ this.isFullscreen = true
93
+ }
94
+ }
95
+
96
+ /* Open fullscreen */
97
+ openFullscreen(elem) {
98
+ if (elem.requestFullscreen) {
99
+ elem.requestFullscreen()
100
+ } else if (elem.webkitRequestFullscreen) {
101
+ /* Safari */
102
+ elem.webkitRequestFullscreen()
103
+ } else if (elem.msRequestFullscreen) {
104
+ /* IE11 */
105
+ elem.msRequestFullscreen()
106
+ }
107
+ }
108
+
109
+ /* Close fullscreen */
110
+ closeFullscreen() {
111
+ if (document.exitFullscreen) {
112
+ document.exitFullscreen()
113
+ } else if (document.webkitExitFullscreen) {
114
+ /* Safari */
115
+ document.webkitExitFullscreen()
116
+ } else if (document.msExitFullscreen) {
117
+ /* IE11 */
118
+ document.msExitFullscreen()
119
+ }
120
+ }
121
+ }