gridviz 3.0.26 → 3.0.28

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 +126 -128
  2. package/dist/gridviz.js +8798 -8706
  3. package/dist/gridviz.min.js +1 -1
  4. package/package.json +73 -73
  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 +154 -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 +544 -544
  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 +78 -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 +224 -214
  28. package/src/layer/GridLayer.js +149 -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/ShadingStyle.js +61 -0
  48. package/src/style/ShapeColorSizeStyle.js +147 -147
  49. package/src/style/SideCategoryStyle.js +112 -112
  50. package/src/style/SideStyle.js +212 -212
  51. package/src/style/SquareColorCategoryWebGLStyle.js +107 -107
  52. package/src/style/SquareColorWebGLStyle.js +126 -126
  53. package/src/style/StrokeStyle.js +135 -135
  54. package/src/style/TanakaStyle.js +69 -69
  55. package/src/style/TextStyle.js +110 -110
  56. package/src/style/TimeSeriesStyle.js +222 -222
  57. package/src/utils/WebGLRectangleColoring.js +106 -106
  58. package/src/utils/WebGLSquareColoring.js +118 -118
  59. package/src/utils/WebGLSquareColoringAdvanced.js +230 -230
  60. package/src/utils/WebGLSquareColoringCatAdvanced.js +133 -133
  61. package/src/utils/WebGLSquareColoringKS.js +153 -153
  62. package/src/utils/scale.js +218 -218
  63. package/src/utils/stretching.js +120 -120
  64. package/src/utils/ternary.js +208 -208
  65. package/src/utils/utils.js +58 -58
  66. package/src/utils/webGLUtils.js +72 -72
  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
+ }