gridviz 3.0.18 → 3.0.20

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 (56) hide show
  1. package/README.md +128 -127
  2. package/dist/gridviz.js +7862 -7819
  3. package/dist/gridviz.min.js +1 -1
  4. package/package.json +74 -74
  5. package/src/button/ZoomButtons.js +101 -101
  6. package/src/core/Dataset.js +154 -154
  7. package/src/core/Drawable.js +60 -60
  8. package/src/core/GeoCanvas.js +430 -419
  9. package/src/core/Layer.js +23 -23
  10. package/src/core/Legend.js +108 -108
  11. package/src/core/Map.js +516 -503
  12. package/src/core/MultiResolutionDataset.js +93 -93
  13. package/src/core/Style.js +98 -98
  14. package/src/core/Tooltip.js +1 -0
  15. package/src/dataset/CSVGrid.js +112 -112
  16. package/src/dataset/GeoTIFF.js +122 -122
  17. package/src/dataset/JSGrid.js +55 -55
  18. package/src/dataset/TiledGrid.js +302 -289
  19. package/src/dataset/worker.js +18 -18
  20. package/src/index.js +77 -77
  21. package/src/layer/BackgroundLayer.js +162 -162
  22. package/src/layer/BackgroundLayerImage.js +81 -81
  23. package/src/layer/BackgroundLayerWMS.js +104 -104
  24. package/src/layer/GeoJSONLayer.js +214 -214
  25. package/src/layer/GridLayer.js +148 -148
  26. package/src/layer/LabelLayer.js +194 -194
  27. package/src/legend/ColorCategoryLegend.js +109 -109
  28. package/src/legend/ColorDiscreteLegend.js +100 -100
  29. package/src/legend/ColorLegend.js +115 -115
  30. package/src/legend/OrientationLegend.js +89 -89
  31. package/src/legend/SizeLegend.js +224 -224
  32. package/src/legend/TernaryLegend.js +302 -302
  33. package/src/style/CompositionStyle.js +291 -291
  34. package/src/style/DotDensityStyle.js +133 -133
  35. package/src/style/ImageStyle.js +100 -100
  36. package/src/style/IsoFenceStyle.js +217 -217
  37. package/src/style/JoyPlotStyle.js +127 -127
  38. package/src/style/LegoStyle.js +110 -110
  39. package/src/style/MosaicStyle.js +99 -99
  40. package/src/style/NinjaStarStyle.js +102 -102
  41. package/src/style/PillarStyle.js +207 -207
  42. package/src/style/SegmentStyle.js +105 -105
  43. package/src/style/ShapeColorSizeStyle.js +147 -147
  44. package/src/style/SideCategoryStyle.js +112 -112
  45. package/src/style/SideStyle.js +212 -212
  46. package/src/style/SquareColorCategoryWebGLStyle.js +107 -107
  47. package/src/style/SquareColorWebGLStyle.js +126 -126
  48. package/src/style/StrokeStyle.js +135 -135
  49. package/src/style/TanakaStyle.js +69 -69
  50. package/src/style/TextStyle.js +110 -110
  51. package/src/style/TimeSeriesStyle.js +222 -222
  52. package/src/utils/scale.js +218 -218
  53. package/src/utils/stretching.js +120 -120
  54. package/src/utils/ternary.js +208 -203
  55. package/src/utils/utils.js +58 -58
  56. package/src/utils/webGLUtils.js +72 -72
@@ -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
+ }