gridviz 2.1.11 → 2.1.13

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 (60) hide show
  1. package/README.md +125 -125
  2. package/dist/gridviz.js +8254 -7887
  3. package/dist/gridviz.min.js +1 -1
  4. package/package.json +77 -77
  5. package/src/App.js +758 -705
  6. package/src/BackgroundLayer.js +182 -182
  7. package/src/BackgroundLayerWMS.js +131 -131
  8. package/src/Dataset.js +76 -76
  9. package/src/DatasetComponent.js +113 -113
  10. package/src/GeoCanvas.js +420 -420
  11. package/src/LabelLayer.js +190 -190
  12. package/src/Layer.js +103 -103
  13. package/src/Legend.js +86 -86
  14. package/src/LineLayer.js +150 -150
  15. package/src/Style.js +129 -129
  16. package/src/Tooltip.js +180 -180
  17. package/src/button/Button.js +54 -0
  18. package/src/button/FullscreenButton.js +98 -0
  19. package/src/button/ZoomButtons.js +72 -0
  20. package/src/dataset/COGeo.js +24 -24
  21. package/src/dataset/CSVGrid.js +104 -104
  22. package/src/dataset/GeoTIFF.js +127 -127
  23. package/src/dataset/GridTile.js +41 -41
  24. package/src/dataset/LGrid.js +54 -54
  25. package/src/dataset/TiledGrid.js +264 -264
  26. package/src/index.js +71 -71
  27. package/src/legend/ColorCategoryLegend.js +124 -124
  28. package/src/legend/ColorDiscreteLegend.js +103 -103
  29. package/src/legend/ColorLegend.js +128 -124
  30. package/src/legend/SegmentOrientationLegend.js +87 -87
  31. package/src/legend/SegmentWidthLegend.js +101 -97
  32. package/src/legend/SizeLegend.js +141 -141
  33. package/src/style/CompositionStyle.js +300 -300
  34. package/src/style/ContourStyle.js +54 -54
  35. package/src/style/DotDensityStyle.js +156 -156
  36. package/src/style/IsoFenceStyle.js +262 -262
  37. package/src/style/JoyPlotStyle.js +135 -135
  38. package/src/style/LegoStyle.js +112 -112
  39. package/src/style/MosaicStyle.js +107 -107
  40. package/src/style/NinjaStarStyle.js +125 -125
  41. package/src/style/PillarStyle.js +230 -230
  42. package/src/style/SegmentStyle.js +142 -142
  43. package/src/style/ShapeColorSizeStyle.js +152 -126
  44. package/src/style/SideCatStyle.js +172 -172
  45. package/src/style/SideStyle.js +216 -216
  46. package/src/style/SquareColorCatWGLStyle.js +120 -120
  47. package/src/style/SquareColorWGLStyle.js +146 -146
  48. package/src/style/StrokeStyle.js +131 -131
  49. package/src/style/TanakaStyle.js +160 -160
  50. package/src/style/TextStyle.js +132 -132
  51. package/src/style/TimeSeriesStyle.js +259 -250
  52. package/src/utils/Utils.js +35 -35
  53. package/src/utils/WebGLRectangleColoring.js +106 -106
  54. package/src/utils/WebGLSquareColoring.js +118 -118
  55. package/src/utils/WebGLSquareColoringAdvanced.js +230 -230
  56. package/src/utils/WebGLSquareColoringCatAdvanced.js +133 -133
  57. package/src/utils/WebGLSquareColoringKS.js +153 -153
  58. package/src/utils/stretching.js +131 -131
  59. package/src/utils/webGLUtils.js +71 -71
  60. package/src/utils/zoomUtils.js +142 -142
@@ -1,127 +1,127 @@
1
- //@ts-check
2
- 'use strict'
3
-
4
- import { DatasetComponent } from '../DatasetComponent.js'
5
- //import { fromUrl } from "geotiff"
6
-
7
- /**
8
- * @todo
9
- * A dataset composed of a single GeoTiff file.
10
- *
11
- * @author Joseph Davies, Julien Gaffuri
12
- */
13
- export class GeoTIFF extends DatasetComponent {
14
- /**
15
- * @param {string} url The URL of the dataset.
16
- * @param {number} resolution The dataset resolution in geographical unit.
17
- * @param {{preprocess?:(function(import("../Dataset").Cell):boolean)}} opts
18
- */
19
- constructor(url, resolution, opts = {}) {
20
- super(url, resolution, opts)
21
-
22
- /**
23
- * @private
24
- * @type {Array.<import("../Dataset").Cell>} */
25
- this.cells = []
26
-
27
- /**
28
- * @type {string}
29
- * @private */
30
- this.infoLoadingStatus = 'notLoaded'
31
- }
32
-
33
- /**
34
- * Request data within a geographic envelope.
35
- *
36
- * @param {import("../Dataset").Envelope|undefined} e
37
- * @param {function():void} redraw
38
- */
39
- getData(e, redraw) {
40
- //check if data already loaded
41
- if (this.infoLoadingStatus != 'notLoaded') return this
42
-
43
- //load data
44
- this.infoLoadingStatus = 'loading'
45
-
46
- /*
47
-
48
- fromUrl(this.url)
49
- .then(tiff => {
50
- console.log(tiff);
51
-
52
- (async function () {
53
- const image = await tiff.getImage();
54
- const width = image.getWidth();
55
- const height = image.getHeight();
56
- const tileWidth = image.getTileWidth();
57
- const tileHeight = image.getTileHeight();
58
- const samplesPerPixel = image.getSamplesPerPixel();
59
-
60
- //for geotiff
61
- const origin = image.getOrigin();
62
- const resolution = image.getResolution();
63
- const bbox = image.getBoundingBox();
64
-
65
- console.log(image)
66
- console.log(width, height)
67
- console.log(tileWidth, tileHeight)
68
- console.log(samplesPerPixel)
69
- console.log(origin)
70
- console.log(resolution)
71
- console.log(bbox)
72
-
73
- console.log("-------")
74
-
75
- const data = await image.readRasters();
76
- console.log(data)
77
-
78
- })()
79
-
80
- //convert coordinates in numbers
81
- //for (const c of data) { c.x = +c.x; c.y = +c.y; }
82
-
83
- //this.cells = data;
84
-
85
- //execute preprocess, if any
86
- //if (this.preprocess) for (const c of this.cells) this.preprocess(c);
87
-
88
- //TODO check if redraw is necessary
89
- //that is if the dataset belongs to a layer which is visible at the current zoom level
90
-
91
- //execute the callback, usually a draw function
92
- if (redraw) redraw()
93
-
94
- this.infoLoadingStatus = "loaded";
95
-
96
-
97
- })
98
- .catch(() => {
99
- //mark as failed
100
- this.infoLoadingStatus = "failed";
101
- this.cells = []
102
- });
103
- */
104
-
105
- return this
106
- }
107
-
108
- /**
109
- * Fill the view cache with all cells which are within a geographical envelope.
110
- *
111
- * @param {import("../Dataset").Envelope} extGeo
112
- * @returns {void}
113
- */
114
- updateViewCache(extGeo) {
115
- //data not loaded yet
116
- if (!this.cells) return
117
-
118
- this.cellsViewCache = []
119
- for (const cell of this.cells) {
120
- if (+cell.x + this.resolution < extGeo.xMin) continue
121
- if (+cell.x - this.resolution > extGeo.xMax) continue
122
- if (+cell.y + this.resolution < extGeo.yMin) continue
123
- if (+cell.y - this.resolution > extGeo.yMax) continue
124
- this.cellsViewCache.push(cell)
125
- }
126
- }
127
- }
1
+ //@ts-check
2
+ 'use strict'
3
+
4
+ import { DatasetComponent } from '../DatasetComponent.js'
5
+ //import { fromUrl } from "geotiff"
6
+
7
+ /**
8
+ * @todo
9
+ * A dataset composed of a single GeoTiff file.
10
+ *
11
+ * @author Joseph Davies, Julien Gaffuri
12
+ */
13
+ export class GeoTIFF extends DatasetComponent {
14
+ /**
15
+ * @param {string} url The URL of the dataset.
16
+ * @param {number} resolution The dataset resolution in geographical unit.
17
+ * @param {{preprocess?:(function(import("../Dataset").Cell):boolean)}} opts
18
+ */
19
+ constructor(url, resolution, opts = {}) {
20
+ super(url, resolution, opts)
21
+
22
+ /**
23
+ * @private
24
+ * @type {Array.<import("../Dataset").Cell>} */
25
+ this.cells = []
26
+
27
+ /**
28
+ * @type {string}
29
+ * @private */
30
+ this.infoLoadingStatus = 'notLoaded'
31
+ }
32
+
33
+ /**
34
+ * Request data within a geographic envelope.
35
+ *
36
+ * @param {import("../Dataset").Envelope|undefined} e
37
+ * @param {function():void} redraw
38
+ */
39
+ getData(e, redraw) {
40
+ //check if data already loaded
41
+ if (this.infoLoadingStatus != 'notLoaded') return this
42
+
43
+ //load data
44
+ this.infoLoadingStatus = 'loading'
45
+
46
+ /*
47
+
48
+ fromUrl(this.url)
49
+ .then(tiff => {
50
+ console.log(tiff);
51
+
52
+ (async function () {
53
+ const image = await tiff.getImage();
54
+ const width = image.getWidth();
55
+ const height = image.getHeight();
56
+ const tileWidth = image.getTileWidth();
57
+ const tileHeight = image.getTileHeight();
58
+ const samplesPerPixel = image.getSamplesPerPixel();
59
+
60
+ //for geotiff
61
+ const origin = image.getOrigin();
62
+ const resolution = image.getResolution();
63
+ const bbox = image.getBoundingBox();
64
+
65
+ console.log(image)
66
+ console.log(width, height)
67
+ console.log(tileWidth, tileHeight)
68
+ console.log(samplesPerPixel)
69
+ console.log(origin)
70
+ console.log(resolution)
71
+ console.log(bbox)
72
+
73
+ console.log("-------")
74
+
75
+ const data = await image.readRasters();
76
+ console.log(data)
77
+
78
+ })()
79
+
80
+ //convert coordinates in numbers
81
+ //for (const c of data) { c.x = +c.x; c.y = +c.y; }
82
+
83
+ //this.cells = data;
84
+
85
+ //execute preprocess, if any
86
+ //if (this.preprocess) for (const c of this.cells) this.preprocess(c);
87
+
88
+ //TODO check if redraw is necessary
89
+ //that is if the dataset belongs to a layer which is visible at the current zoom level
90
+
91
+ //execute the callback, usually a draw function
92
+ if (redraw) redraw()
93
+
94
+ this.infoLoadingStatus = "loaded";
95
+
96
+
97
+ })
98
+ .catch(() => {
99
+ //mark as failed
100
+ this.infoLoadingStatus = "failed";
101
+ this.cells = []
102
+ });
103
+ */
104
+
105
+ return this
106
+ }
107
+
108
+ /**
109
+ * Fill the view cache with all cells which are within a geographical envelope.
110
+ *
111
+ * @param {import("../Dataset").Envelope} extGeo
112
+ * @returns {void}
113
+ */
114
+ updateViewCache(extGeo) {
115
+ //data not loaded yet
116
+ if (!this.cells) return
117
+
118
+ this.cellsViewCache = []
119
+ for (const cell of this.cells) {
120
+ if (+cell.x + this.resolution < extGeo.xMin) continue
121
+ if (+cell.x - this.resolution > extGeo.xMax) continue
122
+ if (+cell.y + this.resolution < extGeo.yMin) continue
123
+ if (+cell.y - this.resolution > extGeo.yMax) continue
124
+ this.cellsViewCache.push(cell)
125
+ }
126
+ }
127
+ }
@@ -1,41 +1,41 @@
1
- //@ts-check
2
- 'use strict'
3
-
4
- /**
5
- * A grid tile.
6
- *
7
- * @author Joseph Davies, Julien Gaffuri
8
- */
9
- export class GridTile {
10
- /**
11
- * @param {Array.<import("../Dataset").Cell>} cells The tile cells.
12
- * @param {number} xT The X position of the tile.
13
- * @param {number} yT The Y position of the tile.
14
- * @param {import("./CSVGrid").GridInfo} gridInfo The grid info object.
15
- */
16
- constructor(cells, xT, yT, gridInfo) {
17
- /** @type {Array.<import("../Dataset").Cell>} */
18
- this.cells = cells
19
- /** @type {number} */
20
- this.x = xT
21
- /** @type {number} */
22
- this.y = yT
23
-
24
- const r = gridInfo.resolutionGeo
25
- const s = gridInfo.tileSizeCell
26
-
27
- /** @type {import("../Dataset").Envelope} */
28
- this.extGeo = {
29
- xMin: gridInfo.originPoint.x + r * s * this.x,
30
- xMax: gridInfo.originPoint.x + r * s * (this.x + 1),
31
- yMin: gridInfo.originPoint.y + r * s * this.y,
32
- yMax: gridInfo.originPoint.y + r * s * (this.y + 1),
33
- }
34
-
35
- //convert cell coordinates into geographical coordinates
36
- for (let cell of this.cells) {
37
- cell.x = this.extGeo.xMin + cell.x * r
38
- cell.y = this.extGeo.yMin + cell.y * r
39
- }
40
- }
41
- }
1
+ //@ts-check
2
+ 'use strict'
3
+
4
+ /**
5
+ * A grid tile.
6
+ *
7
+ * @author Joseph Davies, Julien Gaffuri
8
+ */
9
+ export class GridTile {
10
+ /**
11
+ * @param {Array.<import("../Dataset").Cell>} cells The tile cells.
12
+ * @param {number} xT The X position of the tile.
13
+ * @param {number} yT The Y position of the tile.
14
+ * @param {import("./CSVGrid").GridInfo} gridInfo The grid info object.
15
+ */
16
+ constructor(cells, xT, yT, gridInfo) {
17
+ /** @type {Array.<import("../Dataset").Cell>} */
18
+ this.cells = cells
19
+ /** @type {number} */
20
+ this.x = xT
21
+ /** @type {number} */
22
+ this.y = yT
23
+
24
+ const r = gridInfo.resolutionGeo
25
+ const s = gridInfo.tileSizeCell
26
+
27
+ /** @type {import("../Dataset").Envelope} */
28
+ this.extGeo = {
29
+ xMin: gridInfo.originPoint.x + r * s * this.x,
30
+ xMax: gridInfo.originPoint.x + r * s * (this.x + 1),
31
+ yMin: gridInfo.originPoint.y + r * s * this.y,
32
+ yMax: gridInfo.originPoint.y + r * s * (this.y + 1),
33
+ }
34
+
35
+ //convert cell coordinates into geographical coordinates
36
+ for (let cell of this.cells) {
37
+ cell.x = this.extGeo.xMin + cell.x * r
38
+ cell.y = this.extGeo.yMin + cell.y * r
39
+ }
40
+ }
41
+ }
@@ -1,54 +1,54 @@
1
- //@ts-check
2
- 'use strict'
3
-
4
- /** @typedef {{ dims: object, crs: string, tileSizeCell: number, originPoint: {x:number,y:number}, resolutionGeo: number, tilingBounds:import("../Dataset.js").Envelope }} GridInfo */
5
-
6
- import { DatasetComponent } from '../DatasetComponent.js'
7
-
8
- /**
9
- * A dataset composed of a single CSV file (not tiled).
10
- *
11
- * @author Joseph Davies, Julien Gaffuri
12
- */
13
- export class LGrid extends DatasetComponent {
14
- /**
15
- * @param {number} resolution The dataset resolution in geographical unit.
16
- * @param {Array.<Object>} cells The cells.
17
- */
18
- constructor(resolution, cells) {
19
- super("", resolution)
20
-
21
- /**
22
- * @private
23
- * @type {Array.<import("../Dataset.js").Cell>} */
24
- this.cells = cells || []
25
- }
26
-
27
- /**
28
- * Request data within a geographic envelope.
29
- *
30
- * @param {import("../Dataset.js").Envelope|undefined} e
31
- * @param {function():void} redraw
32
- */
33
- getData(e, redraw) { return this }
34
-
35
- /**
36
- * Fill the view cache with all cells which are within a geographical envelope.
37
- *
38
- * @param {import("../Dataset.js").Envelope} extGeo
39
- * @returns {void}
40
- */
41
- updateViewCache(extGeo) {
42
- //data not loaded yet
43
- if (!this.cells) return
44
-
45
- this.cellsViewCache = []
46
- for (const cell of this.cells) {
47
- if (+cell.x + this.resolution < extGeo.xMin) continue
48
- if (+cell.x - this.resolution > extGeo.xMax) continue
49
- if (+cell.y + this.resolution < extGeo.yMin) continue
50
- if (+cell.y - this.resolution > extGeo.yMax) continue
51
- this.cellsViewCache.push(cell)
52
- }
53
- }
54
- }
1
+ //@ts-check
2
+ 'use strict'
3
+
4
+ /** @typedef {{ dims: object, crs: string, tileSizeCell: number, originPoint: {x:number,y:number}, resolutionGeo: number, tilingBounds:import("../Dataset.js").Envelope }} GridInfo */
5
+
6
+ import { DatasetComponent } from '../DatasetComponent.js'
7
+
8
+ /**
9
+ * A dataset composed of a single CSV file (not tiled).
10
+ *
11
+ * @author Joseph Davies, Julien Gaffuri
12
+ */
13
+ export class LGrid extends DatasetComponent {
14
+ /**
15
+ * @param {number} resolution The dataset resolution in geographical unit.
16
+ * @param {Array.<Object>} cells The cells.
17
+ */
18
+ constructor(resolution, cells) {
19
+ super("", resolution)
20
+
21
+ /**
22
+ * @private
23
+ * @type {Array.<import("../Dataset.js").Cell>} */
24
+ this.cells = cells || []
25
+ }
26
+
27
+ /**
28
+ * Request data within a geographic envelope.
29
+ *
30
+ * @param {import("../Dataset.js").Envelope|undefined} e
31
+ * @param {function():void} redraw
32
+ */
33
+ getData(e, redraw) { return this }
34
+
35
+ /**
36
+ * Fill the view cache with all cells which are within a geographical envelope.
37
+ *
38
+ * @param {import("../Dataset.js").Envelope} extGeo
39
+ * @returns {void}
40
+ */
41
+ updateViewCache(extGeo) {
42
+ //data not loaded yet
43
+ if (!this.cells) return
44
+
45
+ this.cellsViewCache = []
46
+ for (const cell of this.cells) {
47
+ if (+cell.x + this.resolution < extGeo.xMin) continue
48
+ if (+cell.x - this.resolution > extGeo.xMax) continue
49
+ if (+cell.y + this.resolution < extGeo.yMin) continue
50
+ if (+cell.y - this.resolution > extGeo.yMax) continue
51
+ this.cellsViewCache.push(cell)
52
+ }
53
+ }
54
+ }