gridviz 2.1.9 → 2.1.11

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 -125
  2. package/dist/gridviz.js +8036 -8024
  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 +113 -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 -180
  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 -262
  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
@@ -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
+ }