gridviz 2.0.38 → 2.0.40

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 +7945 -8887
  3. package/dist/gridviz.min.js +1 -1
  4. package/package.json +77 -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 -168
  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 +174 -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/LegoStyle.js +112 -112
  35. package/src/style/MosaicStyle.js +107 -107
  36. package/src/style/NinjaStarStyle.js +124 -124
  37. package/src/style/PillarStyle.js +230 -230
  38. package/src/style/SegmentStyle.js +142 -142
  39. package/src/style/ShapeColorSizeStyle.js +126 -126
  40. package/src/style/SideCatStyle.js +172 -172
  41. package/src/style/SideStyle.js +218 -218
  42. package/src/style/SquareColorCatWGLStyle.js +120 -120
  43. package/src/style/SquareColorWGLStyle.js +146 -146
  44. package/src/style/StrokeStyle.js +131 -131
  45. package/src/style/TanakaStyle.js +160 -160
  46. package/src/style/TextStyle.js +132 -132
  47. package/src/utils/Utils.js +35 -35
  48. package/src/utils/WebGLRectangleColoring.js +106 -106
  49. package/src/utils/WebGLSquareColoring.js +118 -118
  50. package/src/utils/WebGLSquareColoringAdvanced.js +230 -230
  51. package/src/utils/WebGLSquareColoringCatAdvanced.js +133 -133
  52. package/src/utils/WebGLSquareColoringKS.js +153 -153
  53. package/src/utils/stretching.js +131 -131
  54. package/src/utils/webGLUtils.js +71 -71
  55. package/src/utils/zoomUtils.js +142 -142
  56. package/src/style/KernelSmoothingOldStyle.js +0 -221
  57. package/src/style/KernelSmoothingStyle.js +0 -115
  58. package/src/style/KernelSmoothingWGLStyle.js +0 -130
package/src/Legend.js CHANGED
@@ -1,86 +1,86 @@
1
- //@ts-check
2
- 'use strict'
3
-
4
- import { select } from 'd3-selection'
5
-
6
- /**
7
- * A legend container.
8
- *
9
- * @author Joseph Davies, Julien Gaffuri
10
- */
11
- export class Legend {
12
- /**
13
- * @param {Object} opts
14
- */
15
- constructor(opts) {
16
- opts = opts || {}
17
-
18
- /** @type {string} */
19
- this.id = opts.id
20
-
21
- //TODO stop using it. Use style method below instead.
22
-
23
- /** @type {number} @deprecated */
24
- this.top = opts.top
25
- /** @type {number} @deprecated */
26
- this.bottom = opts.bottom
27
- /** @type {number} @deprecated */
28
- this.left = opts.left
29
- /** @type {number} @deprecated */
30
- this.right = opts.right
31
- /** @type {string} @deprecated */
32
- this.background = opts.background || 'none'
33
- /** @type {string} @deprecated */
34
- this.padding = opts.padding || '5px'
35
- /** @type {string} @deprecated */
36
- this.border = opts.border || '0px'
37
- /** @type {string} @deprecated */
38
- this['border-radius'] = opts['border-radius'] || 'none'
39
- /** @type {string} @deprecated */
40
- this['box-shadow'] = opts['box-shadow'] || 'none'
41
- /** @type {string} @deprecated */
42
- this['font-family'] = opts['font-family'] || 'Helvetica, Arial, sans-serif'
43
- /** @type {string} @deprecated */
44
- this.width = opts.width
45
- /** @type {string} @deprecated */
46
- this.height = opts.height
47
-
48
- //the div element
49
- if (this.id) this.div = select('#' + this.id)
50
-
51
- if (!this.div || this.div.empty()) {
52
- this.div = select(document.createElement('div'))
53
- if (this.id) this.div.attr('id', this.id)
54
- }
55
-
56
- //set style
57
- this.div.style('background', this.background)
58
- this.div.style('padding', this.padding)
59
- this.div.style('border', this.border)
60
- this.div.style('border-radius', this['border-radius'])
61
- this.div.style('box-shadow', this['box-shadow'])
62
- this.div.style('font-family', this['font-family'])
63
-
64
- if (this.width) this.div.style('width', this.width)
65
- if (this.height) this.div.style('height', this.height)
66
- }
67
-
68
- /**
69
- * Apply a style to the legend div.
70
- * @param {string} k
71
- * @param {string} v
72
- * @returns {this}
73
- */
74
- style(k, v) {
75
- this.div.style(k, v)
76
- return this
77
- }
78
-
79
- /**
80
- * @param {Object} opts
81
- * @abstract
82
- */
83
- update(opts) {
84
- console.error('Legend update not implemented yet.')
85
- }
86
- }
1
+ //@ts-check
2
+ 'use strict'
3
+
4
+ import { select } from 'd3-selection'
5
+
6
+ /**
7
+ * A legend container.
8
+ *
9
+ * @author Joseph Davies, Julien Gaffuri
10
+ */
11
+ export class Legend {
12
+ /**
13
+ * @param {Object} opts
14
+ */
15
+ constructor(opts) {
16
+ opts = opts || {}
17
+
18
+ /** @type {string} */
19
+ this.id = opts.id
20
+
21
+ //TODO stop using it. Use style method below instead.
22
+
23
+ /** @type {number} @deprecated */
24
+ this.top = opts.top
25
+ /** @type {number} @deprecated */
26
+ this.bottom = opts.bottom
27
+ /** @type {number} @deprecated */
28
+ this.left = opts.left
29
+ /** @type {number} @deprecated */
30
+ this.right = opts.right
31
+ /** @type {string} @deprecated */
32
+ this.background = opts.background || 'none'
33
+ /** @type {string} @deprecated */
34
+ this.padding = opts.padding || '5px'
35
+ /** @type {string} @deprecated */
36
+ this.border = opts.border || '0px'
37
+ /** @type {string} @deprecated */
38
+ this['border-radius'] = opts['border-radius'] || 'none'
39
+ /** @type {string} @deprecated */
40
+ this['box-shadow'] = opts['box-shadow'] || 'none'
41
+ /** @type {string} @deprecated */
42
+ this['font-family'] = opts['font-family'] || 'Helvetica, Arial, sans-serif'
43
+ /** @type {string} @deprecated */
44
+ this.width = opts.width
45
+ /** @type {string} @deprecated */
46
+ this.height = opts.height
47
+
48
+ //the div element
49
+ if (this.id) this.div = select('#' + this.id)
50
+
51
+ if (!this.div || this.div.empty()) {
52
+ this.div = select(document.createElement('div'))
53
+ if (this.id) this.div.attr('id', this.id)
54
+ }
55
+
56
+ //set style
57
+ this.div.style('background', this.background)
58
+ this.div.style('padding', this.padding)
59
+ this.div.style('border', this.border)
60
+ this.div.style('border-radius', this['border-radius'])
61
+ this.div.style('box-shadow', this['box-shadow'])
62
+ this.div.style('font-family', this['font-family'])
63
+
64
+ if (this.width) this.div.style('width', this.width)
65
+ if (this.height) this.div.style('height', this.height)
66
+ }
67
+
68
+ /**
69
+ * Apply a style to the legend div.
70
+ * @param {string} k
71
+ * @param {string} v
72
+ * @returns {this}
73
+ */
74
+ style(k, v) {
75
+ this.div.style(k, v)
76
+ return this
77
+ }
78
+
79
+ /**
80
+ * @param {Object} opts
81
+ * @abstract
82
+ */
83
+ update(opts) {
84
+ console.error('Legend update not implemented yet.')
85
+ }
86
+ }
package/src/LineLayer.js CHANGED
@@ -1,150 +1,150 @@
1
- //@ts-check
2
- 'use strict'
3
-
4
- import { json } from 'd3-fetch'
5
-
6
- /**
7
- * @author Joseph Davies, Julien Gaffuri
8
- */
9
- export class LineLayer {
10
- /**
11
- * @param {object} opts
12
- */
13
- constructor(opts) {
14
- opts = opts || {}
15
-
16
- /**
17
- * @private
18
- * @type {string} */
19
- this.url = opts.url
20
-
21
- /**
22
- * A preprocess to run on each feature after loading.
23
- * It can be used to apply some specific treatment before, format the label data, project coordinates, etc.
24
- * Return false if the label should not be kept.
25
- * @private
26
- * @type {function(object):boolean} */
27
- this.preprocess = opts.preprocess
28
-
29
- /**
30
- * @private
31
- * @type {function(object,number):string} */
32
- this.color = opts.color || ((f, zf) => 'gray')
33
- /**
34
- * @private
35
- * @type {function(object,number):number} */
36
- this.width = opts.width || ((f, zf) => 2)
37
- /**
38
- * @private
39
- * @type {function(object,number):Array.<number>|undefined} */
40
- this.lineDash = opts.lineDash || ((f, zf) => undefined)
41
-
42
- /**
43
- * @private
44
- * @type {Array.<object> | undefined} */
45
- this.fs = undefined
46
-
47
- /**
48
- * @private
49
- * @type {string} */
50
- this.loadingStatus = 'notLoaded'
51
- }
52
-
53
- /**
54
- * Draw the layer.
55
- * @param {import("./GeoCanvas").GeoCanvas} cg The canvas where to draw the layer.
56
- * @returns {void}
57
- */
58
- draw(cg) {
59
- //load data, if not done yet.
60
- if (!this.fs) {
61
- this.load(cg.redraw)
62
- return
63
- }
64
-
65
- //TODO sort lines by width ?
66
-
67
- //zoom factor
68
- const zf = cg.getZf()
69
-
70
- //draw in geo coordinates
71
- cg.setCanvasTransform()
72
-
73
- for (const f of this.fs) {
74
- const cs = f.geometry.coordinates
75
- if (cs.length < 2) continue
76
-
77
- //set color
78
- const col = this.color(f, zf)
79
- if (!col || col == 'none') continue
80
- cg.ctx.strokeStyle = col
81
-
82
- //set linewidth
83
- const wP = this.width(f, zf)
84
- if (!wP || wP < 0) continue
85
- cg.ctx.lineWidth = wP * zf
86
-
87
- //set line dash
88
- const ldP = this.lineDash(f, zf)
89
- if (ldP) cg.ctx.setLineDash(ldP)
90
-
91
- //draw line
92
- cg.ctx.beginPath()
93
- cg.ctx.moveTo(cs[0][0], cs[0][1])
94
- for (let i = 1; i < cs.length; i++) cg.ctx.lineTo(cs[i][0], cs[i][1])
95
- cg.ctx.stroke()
96
- }
97
-
98
- //...
99
- cg.ctx.setLineDash([])
100
- }
101
-
102
- /**
103
- * Load data for labels, from URL this.url
104
- * @param {function():void} callback
105
- * @private
106
- */
107
- async load(callback) {
108
- if (!this.url) {
109
- console.log('Failed loading boundaries: No URL specified. ' + this.url)
110
- this.loadingStatus = 'failed'
111
- this.labels = []
112
- return
113
- }
114
-
115
- //check if data already loaded
116
- if (this.loadingStatus != 'notLoaded') return
117
-
118
- //load data
119
- this.loadingStatus = 'loading'
120
-
121
- try {
122
- const data_ = await json(this.url)
123
-
124
- /** @type { Array.<object> } */
125
- const data = data_.features
126
-
127
- //preprocess/filter
128
- if (this.preprocess) {
129
- this.fs = []
130
- for (const c of data) {
131
- const b = this.preprocess(c)
132
- if (b == false) continue
133
- this.fs.push(c)
134
- }
135
- } else {
136
- //store labels
137
- this.fs = data
138
- }
139
-
140
- this.loadingStatus = 'loaded'
141
-
142
- //redraw
143
- if (callback) callback()
144
- } catch (error) {
145
- console.log('Failed loading boundaries from ' + this.url)
146
- this.fs = []
147
- this.loadingStatus = 'failed'
148
- }
149
- }
150
- }
1
+ //@ts-check
2
+ 'use strict'
3
+
4
+ import { json } from 'd3-fetch'
5
+
6
+ /**
7
+ * @author Joseph Davies, Julien Gaffuri
8
+ */
9
+ export class LineLayer {
10
+ /**
11
+ * @param {object} opts
12
+ */
13
+ constructor(opts) {
14
+ opts = opts || {}
15
+
16
+ /**
17
+ * @private
18
+ * @type {string} */
19
+ this.url = opts.url
20
+
21
+ /**
22
+ * A preprocess to run on each feature after loading.
23
+ * It can be used to apply some specific treatment before, format the label data, project coordinates, etc.
24
+ * Return false if the label should not be kept.
25
+ * @private
26
+ * @type {function(object):boolean} */
27
+ this.preprocess = opts.preprocess
28
+
29
+ /**
30
+ * @private
31
+ * @type {function(object,number):string} */
32
+ this.color = opts.color || ((f, zf) => 'gray')
33
+ /**
34
+ * @private
35
+ * @type {function(object,number):number} */
36
+ this.width = opts.width || ((f, zf) => 2)
37
+ /**
38
+ * @private
39
+ * @type {function(object,number):Array.<number>|undefined} */
40
+ this.lineDash = opts.lineDash || ((f, zf) => undefined)
41
+
42
+ /**
43
+ * @private
44
+ * @type {Array.<object> | undefined} */
45
+ this.fs = undefined
46
+
47
+ /**
48
+ * @private
49
+ * @type {string} */
50
+ this.loadingStatus = 'notLoaded'
51
+ }
52
+
53
+ /**
54
+ * Draw the layer.
55
+ * @param {import("./GeoCanvas").GeoCanvas} cg The canvas where to draw the layer.
56
+ * @returns {void}
57
+ */
58
+ draw(cg) {
59
+ //load data, if not done yet.
60
+ if (!this.fs) {
61
+ this.load(cg.redraw)
62
+ return
63
+ }
64
+
65
+ //TODO sort lines by width ?
66
+
67
+ //zoom factor
68
+ const zf = cg.getZf()
69
+
70
+ //draw in geo coordinates
71
+ cg.setCanvasTransform()
72
+
73
+ for (const f of this.fs) {
74
+ const cs = f.geometry.coordinates
75
+ if (cs.length < 2) continue
76
+
77
+ //set color
78
+ const col = this.color(f, zf)
79
+ if (!col || col == 'none') continue
80
+ cg.ctx.strokeStyle = col
81
+
82
+ //set linewidth
83
+ const wP = this.width(f, zf)
84
+ if (!wP || wP < 0) continue
85
+ cg.ctx.lineWidth = wP * zf
86
+
87
+ //set line dash
88
+ const ldP = this.lineDash(f, zf)
89
+ if (ldP) cg.ctx.setLineDash(ldP)
90
+
91
+ //draw line
92
+ cg.ctx.beginPath()
93
+ cg.ctx.moveTo(cs[0][0], cs[0][1])
94
+ for (let i = 1; i < cs.length; i++) cg.ctx.lineTo(cs[i][0], cs[i][1])
95
+ cg.ctx.stroke()
96
+ }
97
+
98
+ //...
99
+ cg.ctx.setLineDash([])
100
+ }
101
+
102
+ /**
103
+ * Load data for labels, from URL this.url
104
+ * @param {function():void} callback
105
+ * @private
106
+ */
107
+ async load(callback) {
108
+ if (!this.url) {
109
+ console.log('Failed loading boundaries: No URL specified. ' + this.url)
110
+ this.loadingStatus = 'failed'
111
+ this.labels = []
112
+ return
113
+ }
114
+
115
+ //check if data already loaded
116
+ if (this.loadingStatus != 'notLoaded') return
117
+
118
+ //load data
119
+ this.loadingStatus = 'loading'
120
+
121
+ try {
122
+ const data_ = await json(this.url)
123
+
124
+ /** @type { Array.<object> } */
125
+ const data = data_.features
126
+
127
+ //preprocess/filter
128
+ if (this.preprocess) {
129
+ this.fs = []
130
+ for (const c of data) {
131
+ const b = this.preprocess(c)
132
+ if (b == false) continue
133
+ this.fs.push(c)
134
+ }
135
+ } else {
136
+ //store labels
137
+ this.fs = data
138
+ }
139
+
140
+ this.loadingStatus = 'loaded'
141
+
142
+ //redraw
143
+ if (callback) callback()
144
+ } catch (error) {
145
+ console.log('Failed loading boundaries from ' + this.url)
146
+ this.fs = []
147
+ this.loadingStatus = 'failed'
148
+ }
149
+ }
150
+ }