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
@@ -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
+ }