gridviz 2.0.41 → 2.0.42

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 (54) hide show
  1. package/README.md +119 -119
  2. package/dist/gridviz.js +15905 -15914
  3. package/dist/gridviz.min.js +2 -2
  4. package/package.json +76 -76
  5. package/src/App.js +642 -642
  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 +101 -101
  10. package/src/GeoCanvas.js +420 -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/TiledGrid.js +264 -264
  22. package/src/index.js +176 -176
  23. package/src/legend/ColorCategoryLegend.js +124 -124
  24. package/src/legend/ColorDiscreteLegend.js +103 -105
  25. package/src/legend/ColorLegend.js +124 -125
  26. package/src/legend/SegmentOrientationLegend.js +87 -87
  27. package/src/legend/SegmentWidthLegend.js +97 -97
  28. package/src/legend/SizeLegend.js +141 -141
  29. package/src/style/CompositionStyle.js +300 -300
  30. package/src/style/ContourStyle.js +54 -54
  31. package/src/style/DotDensityStyle.js +156 -156
  32. package/src/style/JoyPlotStyle.js +135 -135
  33. package/src/style/LegoStyle.js +112 -112
  34. package/src/style/MosaicStyle.js +107 -107
  35. package/src/style/NinjaStarStyle.js +124 -124
  36. package/src/style/PillarStyle.js +230 -230
  37. package/src/style/SegmentStyle.js +142 -142
  38. package/src/style/ShapeColorSizeStyle.js +126 -126
  39. package/src/style/SideCatStyle.js +172 -172
  40. package/src/style/SideStyle.js +218 -218
  41. package/src/style/SquareColorCatWGLStyle.js +120 -120
  42. package/src/style/SquareColorWGLStyle.js +146 -146
  43. package/src/style/StrokeStyle.js +131 -131
  44. package/src/style/TanakaStyle.js +160 -160
  45. package/src/style/TextStyle.js +132 -132
  46. package/src/utils/Utils.js +35 -35
  47. package/src/utils/WebGLRectangleColoring.js +106 -106
  48. package/src/utils/WebGLSquareColoring.js +118 -118
  49. package/src/utils/WebGLSquareColoringAdvanced.js +230 -230
  50. package/src/utils/WebGLSquareColoringCatAdvanced.js +133 -133
  51. package/src/utils/WebGLSquareColoringKS.js +153 -153
  52. package/src/utils/stretching.js +131 -131
  53. package/src/utils/webGLUtils.js +71 -71
  54. package/src/utils/zoomUtils.js +142 -142
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
+ }