gridviz 2.1.7 → 2.1.9

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 (57) hide show
  1. package/README.md +125 -124
  2. package/dist/gridviz.js +8021 -7991
  3. package/dist/gridviz.min.js +1 -1
  4. package/package.json +77 -77
  5. package/src/App.js +705 -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 +101 -101
  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 -172
  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/LGrid.js +54 -54
  22. package/src/dataset/TiledGrid.js +264 -264
  23. package/src/index.js +71 -71
  24. package/src/legend/ColorCategoryLegend.js +124 -124
  25. package/src/legend/ColorDiscreteLegend.js +103 -103
  26. package/src/legend/ColorLegend.js +124 -124
  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/IsoFenceStyle.js +262 -240
  34. package/src/style/JoyPlotStyle.js +135 -135
  35. package/src/style/LegoStyle.js +112 -112
  36. package/src/style/MosaicStyle.js +107 -107
  37. package/src/style/NinjaStarStyle.js +125 -125
  38. package/src/style/PillarStyle.js +230 -230
  39. package/src/style/SegmentStyle.js +142 -142
  40. package/src/style/ShapeColorSizeStyle.js +126 -126
  41. package/src/style/SideCatStyle.js +172 -172
  42. package/src/style/SideStyle.js +216 -216
  43. package/src/style/SquareColorCatWGLStyle.js +120 -120
  44. package/src/style/SquareColorWGLStyle.js +146 -146
  45. package/src/style/StrokeStyle.js +131 -131
  46. package/src/style/TanakaStyle.js +160 -160
  47. package/src/style/TextStyle.js +132 -132
  48. package/src/style/TimeSeriesStyle.js +250 -250
  49. package/src/utils/Utils.js +35 -35
  50. package/src/utils/WebGLRectangleColoring.js +106 -106
  51. package/src/utils/WebGLSquareColoring.js +118 -118
  52. package/src/utils/WebGLSquareColoringAdvanced.js +230 -230
  53. package/src/utils/WebGLSquareColoringCatAdvanced.js +133 -133
  54. package/src/utils/WebGLSquareColoringKS.js +153 -153
  55. package/src/utils/stretching.js +131 -131
  56. package/src/utils/webGLUtils.js +71 -71
  57. 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
+ }