gridviz 2.0.45 → 2.0.46

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 (53) hide show
  1. package/README.md +119 -119
  2. package/dist/gridviz.js +6937 -6937
  3. package/package.json +76 -76
  4. package/src/App.js +668 -668
  5. package/src/BackgroundLayer.js +182 -182
  6. package/src/BackgroundLayerWMS.js +131 -131
  7. package/src/Dataset.js +76 -76
  8. package/src/DatasetComponent.js +101 -101
  9. package/src/GeoCanvas.js +420 -420
  10. package/src/LabelLayer.js +190 -190
  11. package/src/Layer.js +92 -92
  12. package/src/Legend.js +86 -86
  13. package/src/LineLayer.js +150 -150
  14. package/src/Style.js +114 -114
  15. package/src/Tooltip.js +172 -172
  16. package/src/dataset/COGeo.js +24 -24
  17. package/src/dataset/CSVGrid.js +104 -104
  18. package/src/dataset/GeoTIFF.js +127 -127
  19. package/src/dataset/GridTile.js +41 -41
  20. package/src/dataset/TiledGrid.js +264 -264
  21. package/src/index.js +177 -176
  22. package/src/legend/ColorCategoryLegend.js +124 -124
  23. package/src/legend/ColorDiscreteLegend.js +103 -103
  24. package/src/legend/ColorLegend.js +124 -124
  25. package/src/legend/SegmentOrientationLegend.js +87 -87
  26. package/src/legend/SegmentWidthLegend.js +97 -97
  27. package/src/legend/SizeLegend.js +141 -141
  28. package/src/style/CompositionStyle.js +300 -300
  29. package/src/style/ContourStyle.js +54 -54
  30. package/src/style/DotDensityStyle.js +156 -156
  31. package/src/style/JoyPlotStyle.js +135 -135
  32. package/src/style/LegoStyle.js +112 -112
  33. package/src/style/MosaicStyle.js +107 -107
  34. package/src/style/NinjaStarStyle.js +124 -124
  35. package/src/style/PillarStyle.js +230 -230
  36. package/src/style/SegmentStyle.js +142 -142
  37. package/src/style/ShapeColorSizeStyle.js +126 -126
  38. package/src/style/SideCatStyle.js +172 -172
  39. package/src/style/SideStyle.js +218 -218
  40. package/src/style/SquareColorCatWGLStyle.js +120 -120
  41. package/src/style/SquareColorWGLStyle.js +146 -146
  42. package/src/style/StrokeStyle.js +131 -131
  43. package/src/style/TanakaStyle.js +160 -160
  44. package/src/style/TextStyle.js +132 -132
  45. package/src/utils/Utils.js +35 -35
  46. package/src/utils/WebGLRectangleColoring.js +106 -106
  47. package/src/utils/WebGLSquareColoring.js +118 -118
  48. package/src/utils/WebGLSquareColoringAdvanced.js +230 -230
  49. package/src/utils/WebGLSquareColoringCatAdvanced.js +133 -133
  50. package/src/utils/WebGLSquareColoringKS.js +153 -153
  51. package/src/utils/stretching.js +131 -131
  52. package/src/utils/webGLUtils.js +71 -71
  53. 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
+ }