gridviz 2.0.37 → 2.0.39

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 (58) hide show
  1. package/README.md +119 -119
  2. package/dist/gridviz.js +33256 -33296
  3. package/dist/gridviz.min.js +1 -1
  4. package/package.json +78 -78
  5. package/src/App.js +698 -698
  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 +103 -103
  10. package/src/GeoCanvas.js +419 -419
  11. package/src/LabelLayer.js +190 -190
  12. package/src/Layer.js +92 -92
  13. package/src/Legend.js +86 -86
  14. package/src/LineLayer.js +150 -150
  15. package/src/Style.js +114 -114
  16. package/src/Tooltip.js +168 -166
  17. package/src/dataset/COGeo.js +24 -24
  18. package/src/dataset/CSVGrid.js +104 -104
  19. package/src/dataset/GeoTIFF.js +127 -127
  20. package/src/dataset/GridTile.js +41 -41
  21. package/src/dataset/ParquetGrid.js +122 -122
  22. package/src/dataset/TiledGrid.js +296 -296
  23. package/src/index.js +177 -177
  24. package/src/legend/ColorCategoryLegend.js +124 -124
  25. package/src/legend/ColorDiscreteLegend.js +105 -105
  26. package/src/legend/ColorLegend.js +125 -125
  27. package/src/legend/SegmentOrientationLegend.js +87 -87
  28. package/src/legend/SegmentWidthLegend.js +97 -97
  29. package/src/legend/SizeLegend.js +141 -141
  30. package/src/style/CompositionStyle.js +300 -300
  31. package/src/style/ContourStyle.js +54 -54
  32. package/src/style/DotDensityStyle.js +156 -156
  33. package/src/style/JoyPlotStyle.js +135 -135
  34. package/src/style/KernelSmoothingOldStyle.js +221 -221
  35. package/src/style/KernelSmoothingStyle.js +115 -115
  36. package/src/style/KernelSmoothingWGLStyle.js +130 -130
  37. package/src/style/LegoStyle.js +112 -112
  38. package/src/style/MosaicStyle.js +107 -107
  39. package/src/style/NinjaStarStyle.js +124 -124
  40. package/src/style/PillarStyle.js +230 -230
  41. package/src/style/SegmentStyle.js +142 -142
  42. package/src/style/ShapeColorSizeStyle.js +126 -126
  43. package/src/style/SideCatStyle.js +172 -172
  44. package/src/style/SideStyle.js +218 -218
  45. package/src/style/SquareColorCatWGLStyle.js +120 -120
  46. package/src/style/SquareColorWGLStyle.js +146 -146
  47. package/src/style/StrokeStyle.js +131 -131
  48. package/src/style/TanakaStyle.js +160 -160
  49. package/src/style/TextStyle.js +132 -132
  50. package/src/utils/Utils.js +35 -35
  51. package/src/utils/WebGLRectangleColoring.js +106 -106
  52. package/src/utils/WebGLSquareColoring.js +118 -118
  53. package/src/utils/WebGLSquareColoringAdvanced.js +230 -230
  54. package/src/utils/WebGLSquareColoringCatAdvanced.js +133 -133
  55. package/src/utils/WebGLSquareColoringKS.js +153 -153
  56. package/src/utils/stretching.js +131 -131
  57. package/src/utils/webGLUtils.js +71 -71
  58. package/src/utils/zoomUtils.js +142 -142
@@ -1,104 +1,104 @@
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").Envelope }} GridInfo */
5
-
6
- import { csv } from 'd3-fetch'
7
- import { DatasetComponent } from '../DatasetComponent.js'
8
-
9
- /**
10
- * A dataset composed of a single CSV file (not tiled).
11
- *
12
- * @author Joseph Davies, Julien Gaffuri
13
- */
14
- export class CSVGrid extends DatasetComponent {
15
- /**
16
- * @param {string} url The URL of the dataset.
17
- * @param {number} resolution The dataset resolution in geographical unit.
18
- * @param {{preprocess?:(function(import("../Dataset").Cell):boolean)}} opts
19
- */
20
- constructor(url, resolution, opts = {}) {
21
- super(url, resolution, opts)
22
-
23
- /**
24
- * @private
25
- * @type {Array.<import("../Dataset").Cell>} */
26
- this.cells = []
27
-
28
- /**
29
- * @type {string}
30
- * @private */
31
- this.infoLoadingStatus = 'notLoaded'
32
- }
33
-
34
- /**
35
- * Request data within a geographic envelope.
36
- *
37
- * @param {import("../Dataset").Envelope|undefined} e
38
- * @param {function():void} redraw
39
- */
40
- getData(e, redraw) {
41
- //check if data already loaded
42
- if (this.infoLoadingStatus != 'notLoaded') return this
43
-
44
- //load data
45
- this.infoLoadingStatus = 'loading'
46
- ;(async () => {
47
- try {
48
- const data = await csv(this.url)
49
-
50
- //convert coordinates in numbers
51
- for (const c of data) {
52
- c.x = +c.x
53
- c.y = +c.y
54
- }
55
-
56
- //preprocess/filter
57
- if (this.preprocess) {
58
- this.cells = []
59
- for (const c of data) {
60
- const b = this.preprocess(c)
61
- if (b == false) continue
62
- this.cells.push(c)
63
- }
64
- } else {
65
- this.cells = data
66
- }
67
-
68
- //TODO check if redraw is necessary
69
- //that is if the dataset belongs to a layer which is visible at the current zoom level
70
-
71
- //execute the callback, usually a draw function
72
- if (redraw) redraw()
73
-
74
- this.infoLoadingStatus = 'loaded'
75
- } catch (error) {
76
- //mark as failed
77
- this.infoLoadingStatus = 'failed'
78
- this.cells = []
79
- }
80
- })()
81
-
82
- return this
83
- }
84
-
85
- /**
86
- * Fill the view cache with all cells which are within a geographical envelope.
87
- *
88
- * @param {import("../Dataset").Envelope} extGeo
89
- * @returns {void}
90
- */
91
- updateViewCache(extGeo) {
92
- //data not loaded yet
93
- if (!this.cells) return
94
-
95
- this.cellsViewCache = []
96
- for (const cell of this.cells) {
97
- if (+cell.x + this.resolution < extGeo.xMin) continue
98
- if (+cell.x - this.resolution > extGeo.xMax) continue
99
- if (+cell.y + this.resolution < extGeo.yMin) continue
100
- if (+cell.y - this.resolution > extGeo.yMax) continue
101
- this.cellsViewCache.push(cell)
102
- }
103
- }
104
- }
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").Envelope }} GridInfo */
5
+
6
+ import { csv } from 'd3-fetch'
7
+ import { DatasetComponent } from '../DatasetComponent.js'
8
+
9
+ /**
10
+ * A dataset composed of a single CSV file (not tiled).
11
+ *
12
+ * @author Joseph Davies, Julien Gaffuri
13
+ */
14
+ export class CSVGrid extends DatasetComponent {
15
+ /**
16
+ * @param {string} url The URL of the dataset.
17
+ * @param {number} resolution The dataset resolution in geographical unit.
18
+ * @param {{preprocess?:(function(import("../Dataset").Cell):boolean)}} opts
19
+ */
20
+ constructor(url, resolution, opts = {}) {
21
+ super(url, resolution, opts)
22
+
23
+ /**
24
+ * @private
25
+ * @type {Array.<import("../Dataset").Cell>} */
26
+ this.cells = []
27
+
28
+ /**
29
+ * @type {string}
30
+ * @private */
31
+ this.infoLoadingStatus = 'notLoaded'
32
+ }
33
+
34
+ /**
35
+ * Request data within a geographic envelope.
36
+ *
37
+ * @param {import("../Dataset").Envelope|undefined} e
38
+ * @param {function():void} redraw
39
+ */
40
+ getData(e, redraw) {
41
+ //check if data already loaded
42
+ if (this.infoLoadingStatus != 'notLoaded') return this
43
+
44
+ //load data
45
+ this.infoLoadingStatus = 'loading'
46
+ ;(async () => {
47
+ try {
48
+ const data = await csv(this.url)
49
+
50
+ //convert coordinates in numbers
51
+ for (const c of data) {
52
+ c.x = +c.x
53
+ c.y = +c.y
54
+ }
55
+
56
+ //preprocess/filter
57
+ if (this.preprocess) {
58
+ this.cells = []
59
+ for (const c of data) {
60
+ const b = this.preprocess(c)
61
+ if (b == false) continue
62
+ this.cells.push(c)
63
+ }
64
+ } else {
65
+ this.cells = data
66
+ }
67
+
68
+ //TODO check if redraw is necessary
69
+ //that is if the dataset belongs to a layer which is visible at the current zoom level
70
+
71
+ //execute the callback, usually a draw function
72
+ if (redraw) redraw()
73
+
74
+ this.infoLoadingStatus = 'loaded'
75
+ } catch (error) {
76
+ //mark as failed
77
+ this.infoLoadingStatus = 'failed'
78
+ this.cells = []
79
+ }
80
+ })()
81
+
82
+ return this
83
+ }
84
+
85
+ /**
86
+ * Fill the view cache with all cells which are within a geographical envelope.
87
+ *
88
+ * @param {import("../Dataset").Envelope} extGeo
89
+ * @returns {void}
90
+ */
91
+ updateViewCache(extGeo) {
92
+ //data not loaded yet
93
+ if (!this.cells) return
94
+
95
+ this.cellsViewCache = []
96
+ for (const cell of this.cells) {
97
+ if (+cell.x + this.resolution < extGeo.xMin) continue
98
+ if (+cell.x - this.resolution > extGeo.xMax) continue
99
+ if (+cell.y + this.resolution < extGeo.yMin) continue
100
+ if (+cell.y - this.resolution > extGeo.yMax) continue
101
+ this.cellsViewCache.push(cell)
102
+ }
103
+ }
104
+ }
@@ -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
+ }