gridviz 3.0.19 → 3.0.21

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