gridviz 2.1.13 → 2.1.14

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 +124 -125
  2. package/dist/gridviz.js +8341 -8339
  3. package/dist/gridviz.min.js +1 -1
  4. package/package.json +77 -77
  5. package/src/App.js +758 -758
  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 +131 -129
  16. package/src/Tooltip.js +180 -180
  17. package/src/button/Button.js +54 -54
  18. package/src/button/FullscreenButton.js +98 -98
  19. package/src/button/ZoomButtons.js +72 -72
  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 -128
  30. package/src/legend/SegmentOrientationLegend.js +87 -87
  31. package/src/legend/SegmentWidthLegend.js +101 -101
  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 -152
  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 -259
  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,131 +1,131 @@
1
- //@ts-check
2
- 'use strict'
3
-
4
- /**
5
- * Some function [0,1]->[0,1] to stretch range of values.
6
- * @see https://github.com/eurostat/gridviz/blob/master/docs/reference.md#stretching
7
- * @see https://observablehq.com/@jgaffuri/stretching
8
- */
9
-
10
- /**
11
- * Function [0,1]->[0,1] to stretch range of values.
12
- * Polynomial
13
- *
14
- * @param {number} t The value to stretch, within [0,1]
15
- * @param {number} alpha 1: no stretching. <1: show low values. >1: show high values.
16
- * @returns {number} The stretched value, within [0,1]
17
- */
18
- export const sPow = (t, alpha = 3) => Math.pow(t, alpha)
19
-
20
- /**
21
- * Function [0,1]->[0,1] to stretch range of values.
22
- * Polynomial (reverse)
23
- *
24
- * @param {number} t The value to stretch, within [0,1]
25
- * @param {number} alpha 1: no stretching. <1: show low values. >1: show high values.
26
- * @returns {number} The stretched value, within [0,1]
27
- */
28
- export const sPowRev = (t, alpha = 3) => 1 - Math.pow(1 - t, 1 / alpha)
29
-
30
- /**
31
- * Function [0,1]->[0,1] to stretch range of values.
32
- * Exponential
33
- *
34
- * @param {number} t The value to stretch, within [0,1]
35
- * @param {number} alpha 0: no stretching. -Inf: show low values. Inf: show high values.
36
- * @returns {number} The stretched value, within [0,1]
37
- */
38
- export const sExp = (t, alpha = 3) => (alpha == 0 ? t : (Math.exp(t * alpha) - 1) / (Math.exp(alpha) - 1))
39
-
40
- /**
41
- * Function [0,1]->[0,1] to stretch range of values.
42
- * Exponential (reverse)
43
- *
44
- * @param {number} t The value to stretch, within [0,1]
45
- * @param {number} alpha 0: no stretching. -Inf: show low values. Inf: show high values.
46
- * @returns {number} The stretched value, within [0,1]
47
- */
48
- export const sExpRev = (t, alpha = 3) =>
49
- alpha == 0 ? t : 1 - (1 / alpha) * Math.log(Math.exp(alpha) * (1 - t) + t)
50
-
51
- /**
52
- * Function [0,1]->[0,1] to stretch range of values.
53
- * Circle, show low values
54
- * NB: sCircleHigh and sCircleLow are inverse functions of each other.
55
- *
56
- * @param {number} t The value to stretch, within [0,1]
57
- * @param {number} alpha 0: no stretching. 1: perfect circle section
58
- * @returns {number} The stretched value, within [0,1]
59
- */
60
- export const sCircleLow = (t, alpha = 0.8) => {
61
- if (alpha == 0) return t
62
- if (alpha == 1) return Math.sqrt(t * (2 - t))
63
- const a = alpha / (1 - alpha)
64
- return Math.sqrt(1 / (a * a) + t * (2 / a + 2 - t)) - 1 / a
65
- }
66
-
67
- /**
68
- * Function [0,1]->[0,1] to stretch range of values.
69
- * Circle, show high values
70
- * NB: sCircleHigh and sCircleLow are inverse functions of each other.
71
- *
72
- * @param {number} t The value to stretch, within [0,1]
73
- * @param {number} alpha 0: no stretching. 1: perfect circle section
74
- * @returns {number} The stretched value, within [0,1]
75
- */
76
- export const sCircleHigh = (t, alpha = 0.8) => 1 - sCircleLow(1 - t, alpha)
77
-
78
- /**
79
- * Inverse functions
80
- */
81
-
82
- /**
83
- * Inverse function of sExp
84
- * @param {number} y
85
- * @param {number} alpha
86
- * @returns {number}
87
- */
88
- export const sExpInverse = (y, alpha = 3) =>
89
- alpha == 0 ? y : (1 / alpha) * Math.log(1 - y + y * Math.exp(alpha))
90
-
91
- /**
92
- * Inverse function of sExpRev
93
- * @param {number} y
94
- * @param {number} alpha
95
- * @returns {number}
96
- */
97
- export const sExpRevInverse = (y, alpha = 3) => (Math.exp(-alpha * y) - 1) / (Math.exp(-alpha) - 1)
98
-
99
- /**
100
- * Inverse function of sPow
101
- * @param {number} y
102
- * @param {number} alpha
103
- * @returns {number}
104
- */
105
-
106
- export const sPowInverse = (y, alpha = 3) => Math.pow(y, 1 / alpha)
107
-
108
- /**
109
- * Inverse function of sPowRev
110
- * @param {number} y
111
- * @param {number} alpha
112
- * @returns {number}
113
- */
114
- export const sPowRevInverse = (y, alpha = 3) => 1 - Math.pow(1 - y, alpha)
115
-
116
- //test code
117
- /*
118
- for (let i = 0; i <= 1; i += 0.001) {
119
- //const v = gviz.sExp(gviz.sExpInverse(i));
120
- //const v = gviz.sExpInverse(gviz.sExp(i));
121
- //const v = gviz.sExpRev(gviz.sExpRevInverse(i));
122
- //const v = gviz.sExpRevInverse(gviz.sExpRev(i));
123
- //const v = gviz.sPow(gviz.sPowInverse(i));
124
- //const v = gviz.sPowInverse(gviz.sPow(i));
125
- //const v = gviz.sPowRev(gviz.sPowRevInverse(i));
126
- //const v = gviz.sPowRevInverse(gviz.sPowRev(i));
127
- //const v = gviz.sCircleLow(gviz.sCircleHigh(i));
128
- //const v = gviz.sCircleHigh(gviz.sCircleLow(i));
129
- console.log(i - v)
130
- }
131
- */
1
+ //@ts-check
2
+ 'use strict'
3
+
4
+ /**
5
+ * Some function [0,1]->[0,1] to stretch range of values.
6
+ * @see https://github.com/eurostat/gridviz/blob/master/docs/reference.md#stretching
7
+ * @see https://observablehq.com/@jgaffuri/stretching
8
+ */
9
+
10
+ /**
11
+ * Function [0,1]->[0,1] to stretch range of values.
12
+ * Polynomial
13
+ *
14
+ * @param {number} t The value to stretch, within [0,1]
15
+ * @param {number} alpha 1: no stretching. <1: show low values. >1: show high values.
16
+ * @returns {number} The stretched value, within [0,1]
17
+ */
18
+ export const sPow = (t, alpha = 3) => Math.pow(t, alpha)
19
+
20
+ /**
21
+ * Function [0,1]->[0,1] to stretch range of values.
22
+ * Polynomial (reverse)
23
+ *
24
+ * @param {number} t The value to stretch, within [0,1]
25
+ * @param {number} alpha 1: no stretching. <1: show low values. >1: show high values.
26
+ * @returns {number} The stretched value, within [0,1]
27
+ */
28
+ export const sPowRev = (t, alpha = 3) => 1 - Math.pow(1 - t, 1 / alpha)
29
+
30
+ /**
31
+ * Function [0,1]->[0,1] to stretch range of values.
32
+ * Exponential
33
+ *
34
+ * @param {number} t The value to stretch, within [0,1]
35
+ * @param {number} alpha 0: no stretching. -Inf: show low values. Inf: show high values.
36
+ * @returns {number} The stretched value, within [0,1]
37
+ */
38
+ export const sExp = (t, alpha = 3) => (alpha == 0 ? t : (Math.exp(t * alpha) - 1) / (Math.exp(alpha) - 1))
39
+
40
+ /**
41
+ * Function [0,1]->[0,1] to stretch range of values.
42
+ * Exponential (reverse)
43
+ *
44
+ * @param {number} t The value to stretch, within [0,1]
45
+ * @param {number} alpha 0: no stretching. -Inf: show low values. Inf: show high values.
46
+ * @returns {number} The stretched value, within [0,1]
47
+ */
48
+ export const sExpRev = (t, alpha = 3) =>
49
+ alpha == 0 ? t : 1 - (1 / alpha) * Math.log(Math.exp(alpha) * (1 - t) + t)
50
+
51
+ /**
52
+ * Function [0,1]->[0,1] to stretch range of values.
53
+ * Circle, show low values
54
+ * NB: sCircleHigh and sCircleLow are inverse functions of each other.
55
+ *
56
+ * @param {number} t The value to stretch, within [0,1]
57
+ * @param {number} alpha 0: no stretching. 1: perfect circle section
58
+ * @returns {number} The stretched value, within [0,1]
59
+ */
60
+ export const sCircleLow = (t, alpha = 0.8) => {
61
+ if (alpha == 0) return t
62
+ if (alpha == 1) return Math.sqrt(t * (2 - t))
63
+ const a = alpha / (1 - alpha)
64
+ return Math.sqrt(1 / (a * a) + t * (2 / a + 2 - t)) - 1 / a
65
+ }
66
+
67
+ /**
68
+ * Function [0,1]->[0,1] to stretch range of values.
69
+ * Circle, show high values
70
+ * NB: sCircleHigh and sCircleLow are inverse functions of each other.
71
+ *
72
+ * @param {number} t The value to stretch, within [0,1]
73
+ * @param {number} alpha 0: no stretching. 1: perfect circle section
74
+ * @returns {number} The stretched value, within [0,1]
75
+ */
76
+ export const sCircleHigh = (t, alpha = 0.8) => 1 - sCircleLow(1 - t, alpha)
77
+
78
+ /**
79
+ * Inverse functions
80
+ */
81
+
82
+ /**
83
+ * Inverse function of sExp
84
+ * @param {number} y
85
+ * @param {number} alpha
86
+ * @returns {number}
87
+ */
88
+ export const sExpInverse = (y, alpha = 3) =>
89
+ alpha == 0 ? y : (1 / alpha) * Math.log(1 - y + y * Math.exp(alpha))
90
+
91
+ /**
92
+ * Inverse function of sExpRev
93
+ * @param {number} y
94
+ * @param {number} alpha
95
+ * @returns {number}
96
+ */
97
+ export const sExpRevInverse = (y, alpha = 3) => (Math.exp(-alpha * y) - 1) / (Math.exp(-alpha) - 1)
98
+
99
+ /**
100
+ * Inverse function of sPow
101
+ * @param {number} y
102
+ * @param {number} alpha
103
+ * @returns {number}
104
+ */
105
+
106
+ export const sPowInverse = (y, alpha = 3) => Math.pow(y, 1 / alpha)
107
+
108
+ /**
109
+ * Inverse function of sPowRev
110
+ * @param {number} y
111
+ * @param {number} alpha
112
+ * @returns {number}
113
+ */
114
+ export const sPowRevInverse = (y, alpha = 3) => 1 - Math.pow(1 - y, alpha)
115
+
116
+ //test code
117
+ /*
118
+ for (let i = 0; i <= 1; i += 0.001) {
119
+ //const v = gviz.sExp(gviz.sExpInverse(i));
120
+ //const v = gviz.sExpInverse(gviz.sExp(i));
121
+ //const v = gviz.sExpRev(gviz.sExpRevInverse(i));
122
+ //const v = gviz.sExpRevInverse(gviz.sExpRev(i));
123
+ //const v = gviz.sPow(gviz.sPowInverse(i));
124
+ //const v = gviz.sPowInverse(gviz.sPow(i));
125
+ //const v = gviz.sPowRev(gviz.sPowRevInverse(i));
126
+ //const v = gviz.sPowRevInverse(gviz.sPowRev(i));
127
+ //const v = gviz.sCircleLow(gviz.sCircleHigh(i));
128
+ //const v = gviz.sCircleHigh(gviz.sCircleLow(i));
129
+ console.log(i - v)
130
+ }
131
+ */
@@ -1,71 +1,71 @@
1
- //@ts-check
2
- 'use strict'
3
-
4
- /**
5
- * @param {string} width
6
- * @param {string} height
7
- * @param {object} opts
8
- * @returns {{canvas:HTMLCanvasElement, gl:WebGLRenderingContext}}
9
- */
10
- export function makeWebGLCanvas(width, height, opts) {
11
- const canvas = document.createElement('canvas')
12
- canvas.setAttribute('width', width)
13
- canvas.setAttribute('height', height)
14
- const gl = canvas.getContext('webgl', opts)
15
- if (!gl) {
16
- throw new Error('Unable to initialize WebGL. Your browser or machine may not support it.')
17
- }
18
- return { canvas: canvas, gl: gl }
19
- }
20
-
21
- /**
22
- * Initialize a shader program, so WebGL knows how to draw our data
23
- *
24
- * @param {WebGLRenderingContext} gl
25
- * @param {...WebGLShader} shaders
26
- * @returns {WebGLProgram}
27
- */
28
- export function initShaderProgram(gl, ...shaders) {
29
- /** @type {WebGLProgram|null} */
30
- const program = gl.createProgram()
31
- if (program == null) throw new Error('Cannot create webGL program')
32
- for (const shader of shaders) gl.attachShader(program, shader)
33
- gl.linkProgram(program)
34
- if (gl.getProgramParameter(program, gl.LINK_STATUS)) return program
35
- throw new Error(gl.getProgramInfoLog(program) || 'Cannot create webGL program (2)')
36
- }
37
-
38
- /**
39
- * Creates a shader of the given type, uploads the source and compiles it.
40
- *
41
- * @param {WebGLRenderingContext} gl
42
- * @param {number} type
43
- * @param {...string} sources
44
- * @returns {WebGLShader}
45
- */
46
- export function createShader(gl, type, ...sources) {
47
- /** @type {WebGLShader|null} */
48
- const shader = gl.createShader(type)
49
- if (shader == null) throw new Error('Cannot create webGL shader')
50
- gl.shaderSource(shader, sources.join('\n'))
51
- gl.compileShader(shader)
52
- if (gl.getShaderParameter(shader, gl.COMPILE_STATUS)) return shader
53
- throw new Error(gl.getShaderInfoLog(shader) || 'Cannot create webGL shader (2)')
54
- }
55
-
56
- /**
57
- * Check if webGL is supported
58
- *
59
- * @returns {boolean}
60
- */
61
- export function checkWebGLSupport() {
62
- try {
63
- const canvas = document.createElement('canvas')
64
- return !!window.WebGLRenderingContext &&
65
- (canvas.getContext('webgl') || canvas.getContext('experimental-webgl'))
66
- ? true
67
- : false
68
- } catch (err) {
69
- return false
70
- }
71
- }
1
+ //@ts-check
2
+ 'use strict'
3
+
4
+ /**
5
+ * @param {string} width
6
+ * @param {string} height
7
+ * @param {object} opts
8
+ * @returns {{canvas:HTMLCanvasElement, gl:WebGLRenderingContext}}
9
+ */
10
+ export function makeWebGLCanvas(width, height, opts) {
11
+ const canvas = document.createElement('canvas')
12
+ canvas.setAttribute('width', width)
13
+ canvas.setAttribute('height', height)
14
+ const gl = canvas.getContext('webgl', opts)
15
+ if (!gl) {
16
+ throw new Error('Unable to initialize WebGL. Your browser or machine may not support it.')
17
+ }
18
+ return { canvas: canvas, gl: gl }
19
+ }
20
+
21
+ /**
22
+ * Initialize a shader program, so WebGL knows how to draw our data
23
+ *
24
+ * @param {WebGLRenderingContext} gl
25
+ * @param {...WebGLShader} shaders
26
+ * @returns {WebGLProgram}
27
+ */
28
+ export function initShaderProgram(gl, ...shaders) {
29
+ /** @type {WebGLProgram|null} */
30
+ const program = gl.createProgram()
31
+ if (program == null) throw new Error('Cannot create webGL program')
32
+ for (const shader of shaders) gl.attachShader(program, shader)
33
+ gl.linkProgram(program)
34
+ if (gl.getProgramParameter(program, gl.LINK_STATUS)) return program
35
+ throw new Error(gl.getProgramInfoLog(program) || 'Cannot create webGL program (2)')
36
+ }
37
+
38
+ /**
39
+ * Creates a shader of the given type, uploads the source and compiles it.
40
+ *
41
+ * @param {WebGLRenderingContext} gl
42
+ * @param {number} type
43
+ * @param {...string} sources
44
+ * @returns {WebGLShader}
45
+ */
46
+ export function createShader(gl, type, ...sources) {
47
+ /** @type {WebGLShader|null} */
48
+ const shader = gl.createShader(type)
49
+ if (shader == null) throw new Error('Cannot create webGL shader')
50
+ gl.shaderSource(shader, sources.join('\n'))
51
+ gl.compileShader(shader)
52
+ if (gl.getShaderParameter(shader, gl.COMPILE_STATUS)) return shader
53
+ throw new Error(gl.getShaderInfoLog(shader) || 'Cannot create webGL shader (2)')
54
+ }
55
+
56
+ /**
57
+ * Check if webGL is supported
58
+ *
59
+ * @returns {boolean}
60
+ */
61
+ export function checkWebGLSupport() {
62
+ try {
63
+ const canvas = document.createElement('canvas')
64
+ return !!window.WebGLRenderingContext &&
65
+ (canvas.getContext('webgl') || canvas.getContext('experimental-webgl'))
66
+ ? true
67
+ : false
68
+ } catch (err) {
69
+ return false
70
+ }
71
+ }