gridviz 3.0.35 → 3.0.37

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 (67) hide show
  1. package/README.md +129 -129
  2. package/dist/gridviz.js +21056 -17487
  3. package/dist/gridviz.min.js +2 -2
  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 -103
  8. package/src/core/Dataset.js +232 -154
  9. package/src/core/Drawable.js +78 -78
  10. package/src/core/GeoCanvas.js +443 -443
  11. package/src/core/Layer.js +23 -23
  12. package/src/core/Legend.js +108 -108
  13. package/src/core/Map.js +650 -568
  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 +311 -302
  22. package/src/dataset/worker.js +18 -18
  23. package/src/index.js +79 -79
  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 +276 -276
  28. package/src/layer/GridLayer.js +166 -166
  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/DotDensityStyle.js +133 -133
  38. package/src/style/ImageStyle.js +100 -100
  39. package/src/style/Interpolator.js +258 -258
  40. package/src/style/IsoFenceStyle.js +217 -217
  41. package/src/style/JoyPlotStyle.js +180 -180
  42. package/src/style/LegoStyle.js +132 -132
  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/ShadingRayStyle.js +280 -280
  48. package/src/style/ShadingStyle.js +72 -72
  49. package/src/style/ShapeColorSizeStyle.js +147 -147
  50. package/src/style/SideCategoryStyle.js +112 -112
  51. package/src/style/SideStyle.js +217 -217
  52. package/src/style/SideTanakaStyle.js +154 -154
  53. package/src/style/SquareColorCategoryWebGLStyle.js +311 -294
  54. package/src/style/SquareColorWebGLStyle.js +126 -126
  55. package/src/style/StrokeStyle.js +135 -135
  56. package/src/style/TextStyle.js +110 -110
  57. package/src/style/TimeSeriesStyle.js +222 -222
  58. package/src/utils/WebGLRectangleColoring.js +106 -106
  59. package/src/utils/WebGLSquareColoring.js +114 -118
  60. package/src/utils/WebGLSquareColoringAdvanced.js +223 -227
  61. package/src/utils/WebGLSquareColoringKS.js +153 -153
  62. package/src/utils/scale.js +255 -255
  63. package/src/utils/stretching.js +120 -120
  64. package/src/utils/ternary.js +208 -208
  65. package/src/utils/utils.js +125 -125
  66. package/src/utils/webGLUtils.js +178 -73
  67. package/src/utils/zoomUtils.js +142 -142
@@ -1,99 +1,99 @@
1
- //@ts-check
2
- 'use strict'
3
-
4
- import { Style } from '../core/Style.js'
5
-
6
- /**
7
- * @module style
8
- * @author Julien Gaffuri
9
- */
10
- export class MosaicStyle extends Style {
11
- /** @param {object} opts */
12
- constructor(opts) {
13
- super(opts)
14
- opts = opts || {}
15
-
16
- /** A function returning the color of the cell.
17
- * @type {function(import('../core/Dataset.js').Cell, number, number, object):string} */
18
- this.color = opts.color || (() => '#EA6BAC') //(c,r,z,vs) => {}
19
-
20
- /** The mosaic factor, within [0,0.5]. Set to 0 for no mosaic effect. Set to 0.5 for strong mosaic effect.
21
- * @type {number} */
22
- this.mosaicFactor = opts.mosaicFactor || 0.15
23
-
24
- /** The mosaic shadow factor, within [0,0.5]. Set to 0 for no mosaic shadow. Set to 0.5 for strong mosaic shadow.
25
- * @type {number} */
26
- this.shadowFactor = opts.shadowFactor || 0.2
27
-
28
- /** The mosaic shadow color.
29
- * @type {string} */
30
- this.shadowColor = opts.shadowColor || '#555'
31
- }
32
-
33
- /**
34
- *
35
- * @param {Array.<import("../core/Dataset").Cell>} cells
36
- * @param {import("../core/GeoCanvas").GeoCanvas} geoCanvas
37
- * @param {number} resolution
38
- */
39
- draw(cells, geoCanvas, resolution) {
40
- //filter
41
- if (this.filter) cells = cells.filter(this.filter)
42
-
43
- //
44
- const z = geoCanvas.view.z
45
- const ctx = geoCanvas.offscreenCtx
46
-
47
- //get view scale
48
- const viewScale = this.viewScale ? this.viewScale(cells, resolution, z) : undefined
49
-
50
- //set stroke style, for shadow
51
- ctx.strokeStyle = this.shadowColor
52
- ctx.lineWidth = this.shadowFactor * resolution
53
- ctx.lineJoin = 'round'
54
- ctx.lineCap = 'butt'
55
-
56
- //function to compute position mosaic effect
57
- const d = resolution * this.mosaicFactor
58
- const mosaic = () => {
59
- return { x: Math.random() * d, y: Math.random() * d }
60
- }
61
-
62
- for (let cell of cells) {
63
- //set fill color
64
- const col = this.color ? this.color(cell, resolution, z, viewScale) : undefined
65
- if (!col || col === 'none') continue
66
- ctx.fillStyle = col
67
-
68
- //get offset
69
- const offset = this.offset(cell, resolution, z)
70
-
71
- //compute position mosaic effect
72
- const ll = mosaic(),
73
- ul = mosaic(),
74
- lr = mosaic(),
75
- ur = mosaic()
76
-
77
- //stroke
78
- if (this.shadowFactor > 0) {
79
- ctx.beginPath()
80
- ctx.moveTo(cell.x + offset.dx + ll.x, cell.y + offset.dy + ll.y)
81
- ctx.lineTo(cell.x + offset.dx + resolution - lr.x, cell.y + offset.dy + lr.y)
82
- ctx.lineTo(cell.x + offset.dx + resolution - ur.x, cell.y + offset.dy + resolution - ur.y)
83
- ctx.stroke()
84
- }
85
-
86
- //fill
87
-
88
- ctx.beginPath()
89
- ctx.moveTo(cell.x + offset.dx + ll.x, cell.y + offset.dy + ll.y)
90
- ctx.lineTo(cell.x + offset.dx + resolution - lr.x, cell.y + offset.dy + lr.y)
91
- ctx.lineTo(cell.x + offset.dx + resolution - ur.x, cell.y + offset.dy + resolution - ur.y)
92
- ctx.lineTo(cell.x + offset.dx + ul.x, cell.y + offset.dy + resolution - ul.y)
93
- ctx.fill()
94
- }
95
-
96
- //update legends
97
- this.updateLegends({ style: this, resolution: resolution, z: z, viewScale: viewScale })
98
- }
99
- }
1
+ //@ts-check
2
+ 'use strict'
3
+
4
+ import { Style } from '../core/Style.js'
5
+
6
+ /**
7
+ * @module style
8
+ * @author Julien Gaffuri
9
+ */
10
+ export class MosaicStyle extends Style {
11
+ /** @param {object} opts */
12
+ constructor(opts) {
13
+ super(opts)
14
+ opts = opts || {}
15
+
16
+ /** A function returning the color of the cell.
17
+ * @type {function(import('../core/Dataset.js').Cell, number, number, object):string} */
18
+ this.color = opts.color || (() => '#EA6BAC') //(c,r,z,vs) => {}
19
+
20
+ /** The mosaic factor, within [0,0.5]. Set to 0 for no mosaic effect. Set to 0.5 for strong mosaic effect.
21
+ * @type {number} */
22
+ this.mosaicFactor = opts.mosaicFactor || 0.15
23
+
24
+ /** The mosaic shadow factor, within [0,0.5]. Set to 0 for no mosaic shadow. Set to 0.5 for strong mosaic shadow.
25
+ * @type {number} */
26
+ this.shadowFactor = opts.shadowFactor || 0.2
27
+
28
+ /** The mosaic shadow color.
29
+ * @type {string} */
30
+ this.shadowColor = opts.shadowColor || '#555'
31
+ }
32
+
33
+ /**
34
+ *
35
+ * @param {Array.<import("../core/Dataset").Cell>} cells
36
+ * @param {import("../core/GeoCanvas").GeoCanvas} geoCanvas
37
+ * @param {number} resolution
38
+ */
39
+ draw(cells, geoCanvas, resolution) {
40
+ //filter
41
+ if (this.filter) cells = cells.filter(this.filter)
42
+
43
+ //
44
+ const z = geoCanvas.view.z
45
+ const ctx = geoCanvas.offscreenCtx
46
+
47
+ //get view scale
48
+ const viewScale = this.viewScale ? this.viewScale(cells, resolution, z) : undefined
49
+
50
+ //set stroke style, for shadow
51
+ ctx.strokeStyle = this.shadowColor
52
+ ctx.lineWidth = this.shadowFactor * resolution
53
+ ctx.lineJoin = 'round'
54
+ ctx.lineCap = 'butt'
55
+
56
+ //function to compute position mosaic effect
57
+ const d = resolution * this.mosaicFactor
58
+ const mosaic = () => {
59
+ return { x: Math.random() * d, y: Math.random() * d }
60
+ }
61
+
62
+ for (let cell of cells) {
63
+ //set fill color
64
+ const col = this.color ? this.color(cell, resolution, z, viewScale) : undefined
65
+ if (!col || col === 'none') continue
66
+ ctx.fillStyle = col
67
+
68
+ //get offset
69
+ const offset = this.offset(cell, resolution, z)
70
+
71
+ //compute position mosaic effect
72
+ const ll = mosaic(),
73
+ ul = mosaic(),
74
+ lr = mosaic(),
75
+ ur = mosaic()
76
+
77
+ //stroke
78
+ if (this.shadowFactor > 0) {
79
+ ctx.beginPath()
80
+ ctx.moveTo(cell.x + offset.dx + ll.x, cell.y + offset.dy + ll.y)
81
+ ctx.lineTo(cell.x + offset.dx + resolution - lr.x, cell.y + offset.dy + lr.y)
82
+ ctx.lineTo(cell.x + offset.dx + resolution - ur.x, cell.y + offset.dy + resolution - ur.y)
83
+ ctx.stroke()
84
+ }
85
+
86
+ //fill
87
+
88
+ ctx.beginPath()
89
+ ctx.moveTo(cell.x + offset.dx + ll.x, cell.y + offset.dy + ll.y)
90
+ ctx.lineTo(cell.x + offset.dx + resolution - lr.x, cell.y + offset.dy + lr.y)
91
+ ctx.lineTo(cell.x + offset.dx + resolution - ur.x, cell.y + offset.dy + resolution - ur.y)
92
+ ctx.lineTo(cell.x + offset.dx + ul.x, cell.y + offset.dy + resolution - ul.y)
93
+ ctx.fill()
94
+ }
95
+
96
+ //update legends
97
+ this.updateLegends({ style: this, resolution: resolution, z: z, viewScale: viewScale })
98
+ }
99
+ }
@@ -1,102 +1,102 @@
1
- //@ts-check
2
- 'use strict'
3
-
4
- import { Style } from '../core/Style.js'
5
-
6
- /**
7
- * @module style
8
- * @author Joseph Davies, Julien Gaffuri
9
- */
10
- export class NinjaStarStyle extends Style {
11
- /** @param {object} opts */
12
- constructor(opts) {
13
- super(opts)
14
- opts = opts || {}
15
-
16
- /** A function returning the color of the cell.
17
- * @type {function(import('../core/Dataset.js').Cell, number, number, object):string} */
18
- this.color = opts.color || (() => '#EA6BAC') //(c,r,z,vs) => {}
19
-
20
- /** A function returning the size of a cell, within [0,1]:
21
- * - 0, nothing shown
22
- * - 1, entire square
23
- * @type {function(import('../core/Dataset.js').Cell, number, number, object):number} */
24
- this.size = opts.size || ((cell, resolution) => resolution) //(c,r,z,vs) => {}
25
-
26
- /** A function returning the shape.
27
- * @type {function(import("../core/Dataset").Cell):string} */
28
- this.shape = opts.shape || (() => 'o')
29
- }
30
-
31
- /**
32
- *
33
- * @param {Array.<import('../core/Dataset.js').Cell>} cells
34
- * @param {import("../core/GeoCanvas").GeoCanvas} geoCanvas
35
- * @param {number} resolution
36
- */
37
- draw(cells, geoCanvas, resolution) {
38
- //filter
39
- if (this.filter) cells = cells.filter(this.filter)
40
-
41
- //
42
- const z = geoCanvas.view.z
43
- const ctx = geoCanvas.offscreenCtx
44
-
45
- //get view scale
46
- const viewScale = this.viewScale ? this.viewScale(cells, resolution, z) : undefined
47
-
48
- const r2 = resolution * 0.5
49
- for (let cell of cells) {
50
- //color
51
- const col = this.color ? this.color(cell, resolution, z, viewScale) : undefined
52
- if (!col || col === 'none') continue
53
- ctx.fillStyle = col
54
-
55
- //size - in geo unit
56
- let k = this.size(cell, resolution, z, viewScale)
57
- k = k < 0 ? 0 : k > 1 ? 1 : k
58
- const sG2 = k * r2
59
-
60
- //shape
61
- const shape = this.shape ? this.shape(cell) : 'o'
62
- if (shape === 'none') continue
63
-
64
- //get offset
65
- //TODO use
66
- //const offset = this.offset(cell, r, z)
67
-
68
- //center position
69
- const cx = cell.x + r2
70
- const cy = cell.y + r2
71
-
72
- if (shape === 'p') {
73
- ctx.beginPath()
74
- ctx.moveTo(cx, cy + r2)
75
- ctx.lineTo(cx + sG2, cy + sG2)
76
- ctx.lineTo(cx + r2, cy)
77
- ctx.lineTo(cx + sG2, cy - sG2)
78
- ctx.lineTo(cx, cy - r2)
79
- ctx.lineTo(cx - sG2, cy - sG2)
80
- ctx.lineTo(cx - r2, cy)
81
- ctx.lineTo(cx - sG2, cy + sG2)
82
- ctx.fill()
83
- } else if (shape === 'o') {
84
- ctx.beginPath()
85
- ctx.moveTo(cx, cy + sG2)
86
- ctx.lineTo(cx + r2, cy + r2)
87
- ctx.lineTo(cx + sG2, cy)
88
- ctx.lineTo(cx + r2, cy - r2)
89
- ctx.lineTo(cx, cy - sG2)
90
- ctx.lineTo(cx - r2, cy - r2)
91
- ctx.lineTo(cx - sG2, cy)
92
- ctx.lineTo(cx - r2, cy + r2)
93
- ctx.fill()
94
- } else {
95
- throw new Error('Unexpected shape:' + shape)
96
- }
97
- }
98
-
99
- //update legends
100
- this.updateLegends({ style: this, resolution: resolution, z: z, viewScale: viewScale })
101
- }
102
- }
1
+ //@ts-check
2
+ 'use strict'
3
+
4
+ import { Style } from '../core/Style.js'
5
+
6
+ /**
7
+ * @module style
8
+ * @author Joseph Davies, Julien Gaffuri
9
+ */
10
+ export class NinjaStarStyle extends Style {
11
+ /** @param {object} opts */
12
+ constructor(opts) {
13
+ super(opts)
14
+ opts = opts || {}
15
+
16
+ /** A function returning the color of the cell.
17
+ * @type {function(import('../core/Dataset.js').Cell, number, number, object):string} */
18
+ this.color = opts.color || (() => '#EA6BAC') //(c,r,z,vs) => {}
19
+
20
+ /** A function returning the size of a cell, within [0,1]:
21
+ * - 0, nothing shown
22
+ * - 1, entire square
23
+ * @type {function(import('../core/Dataset.js').Cell, number, number, object):number} */
24
+ this.size = opts.size || ((cell, resolution) => resolution) //(c,r,z,vs) => {}
25
+
26
+ /** A function returning the shape.
27
+ * @type {function(import("../core/Dataset").Cell):string} */
28
+ this.shape = opts.shape || (() => 'o')
29
+ }
30
+
31
+ /**
32
+ *
33
+ * @param {Array.<import('../core/Dataset.js').Cell>} cells
34
+ * @param {import("../core/GeoCanvas").GeoCanvas} geoCanvas
35
+ * @param {number} resolution
36
+ */
37
+ draw(cells, geoCanvas, resolution) {
38
+ //filter
39
+ if (this.filter) cells = cells.filter(this.filter)
40
+
41
+ //
42
+ const z = geoCanvas.view.z
43
+ const ctx = geoCanvas.offscreenCtx
44
+
45
+ //get view scale
46
+ const viewScale = this.viewScale ? this.viewScale(cells, resolution, z) : undefined
47
+
48
+ const r2 = resolution * 0.5
49
+ for (let cell of cells) {
50
+ //color
51
+ const col = this.color ? this.color(cell, resolution, z, viewScale) : undefined
52
+ if (!col || col === 'none') continue
53
+ ctx.fillStyle = col
54
+
55
+ //size - in geo unit
56
+ let k = this.size(cell, resolution, z, viewScale)
57
+ k = k < 0 ? 0 : k > 1 ? 1 : k
58
+ const sG2 = k * r2
59
+
60
+ //shape
61
+ const shape = this.shape ? this.shape(cell) : 'o'
62
+ if (shape === 'none') continue
63
+
64
+ //get offset
65
+ //TODO use
66
+ //const offset = this.offset(cell, r, z)
67
+
68
+ //center position
69
+ const cx = cell.x + r2
70
+ const cy = cell.y + r2
71
+
72
+ if (shape === 'p') {
73
+ ctx.beginPath()
74
+ ctx.moveTo(cx, cy + r2)
75
+ ctx.lineTo(cx + sG2, cy + sG2)
76
+ ctx.lineTo(cx + r2, cy)
77
+ ctx.lineTo(cx + sG2, cy - sG2)
78
+ ctx.lineTo(cx, cy - r2)
79
+ ctx.lineTo(cx - sG2, cy - sG2)
80
+ ctx.lineTo(cx - r2, cy)
81
+ ctx.lineTo(cx - sG2, cy + sG2)
82
+ ctx.fill()
83
+ } else if (shape === 'o') {
84
+ ctx.beginPath()
85
+ ctx.moveTo(cx, cy + sG2)
86
+ ctx.lineTo(cx + r2, cy + r2)
87
+ ctx.lineTo(cx + sG2, cy)
88
+ ctx.lineTo(cx + r2, cy - r2)
89
+ ctx.lineTo(cx, cy - sG2)
90
+ ctx.lineTo(cx - r2, cy - r2)
91
+ ctx.lineTo(cx - sG2, cy)
92
+ ctx.lineTo(cx - r2, cy + r2)
93
+ ctx.fill()
94
+ } else {
95
+ throw new Error('Unexpected shape:' + shape)
96
+ }
97
+ }
98
+
99
+ //update legends
100
+ this.updateLegends({ style: this, resolution: resolution, z: z, viewScale: viewScale })
101
+ }
102
+ }