@lgv/visualization-map 1.0.4 → 1.1.2
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.
- package/.gitlab-ci.yml +47 -4
- package/example/index.html +14 -13
- package/example/main.js +191 -106
- package/example/style.css +1 -54
- package/example/webpack.common.js +1 -1
- package/example/webpack.dev.js +1 -8
- package/example/webpack.prod.js +1 -1
- package/package.json +13 -16
- package/src/configuration.js +6 -5
- package/src/index.js +2 -2
- package/src/structure/index.js +15 -0
- package/src/visualization/index.js +17 -4
- package/tests/visualizationmap_test.js +39 -0
- package/webpack.common.js +2 -8
- package/tests/_setup-browser-env.js +0 -3
- package/tests/init_test.js +0 -10
- package/webpack.dev.js +0 -19
package/.gitlab-ci.yml
CHANGED
|
@@ -7,12 +7,10 @@ include:
|
|
|
7
7
|
###################################### GITLAB TEMPLATES ######################################
|
|
8
8
|
- template: Security/SAST.gitlab-ci.yml
|
|
9
9
|
|
|
10
|
-
|
|
11
|
-
file: "node/module/nodejs-scan-sast.yml"
|
|
12
|
-
|
|
10
|
+
# overwrites
|
|
13
11
|
- project: "lgensinger/cicd-templates"
|
|
14
12
|
file: "node/module/semgrep-sast.yml"
|
|
15
|
-
|
|
13
|
+
|
|
16
14
|
###################################### TESTING ######################################
|
|
17
15
|
|
|
18
16
|
# unit test
|
|
@@ -34,3 +32,48 @@ include:
|
|
|
34
32
|
# npm
|
|
35
33
|
- project: "lgensinger/cicd-templates"
|
|
36
34
|
file: "node/module/publish.yml"
|
|
35
|
+
|
|
36
|
+
###################################### ANCHORS ######################################
|
|
37
|
+
|
|
38
|
+
.convert-css: &convert-css
|
|
39
|
+
- cp -a node_modules/leaflet/dist/leaflet.css leafletCss.js
|
|
40
|
+
- sed -i '1s/^/export default `\n/' leafletCss.js
|
|
41
|
+
- echo "\`" >> leafletCss.js
|
|
42
|
+
- mv leafletCss.js src/visualization/
|
|
43
|
+
|
|
44
|
+
###################################### OVERWRITES ######################################
|
|
45
|
+
|
|
46
|
+
unit test:
|
|
47
|
+
script:
|
|
48
|
+
# make npm less noisy
|
|
49
|
+
- npm config set loglevel=error
|
|
50
|
+
# install module locally
|
|
51
|
+
- npm install .
|
|
52
|
+
# convert leaflet css for js
|
|
53
|
+
- *convert-css
|
|
54
|
+
# run tests
|
|
55
|
+
- npm run test
|
|
56
|
+
|
|
57
|
+
coverage:
|
|
58
|
+
script:
|
|
59
|
+
# make npm less noisy
|
|
60
|
+
- npm config set loglevel=error
|
|
61
|
+
# install module locally
|
|
62
|
+
- npm install .
|
|
63
|
+
# convert leaflet css for js
|
|
64
|
+
- *convert-css
|
|
65
|
+
# run tests
|
|
66
|
+
- npm run coverage
|
|
67
|
+
|
|
68
|
+
npm:
|
|
69
|
+
script:
|
|
70
|
+
- npm config set //registry.npmjs.org/:_authToken ${NPM_TOKEN}
|
|
71
|
+
# install module
|
|
72
|
+
- npm install
|
|
73
|
+
# convert leaflet css for js
|
|
74
|
+
- *convert-css
|
|
75
|
+
- ls -l src/visualization
|
|
76
|
+
# build module for distribution
|
|
77
|
+
- npm run build
|
|
78
|
+
# publish
|
|
79
|
+
- npm publish --access public
|
package/example/index.html
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<html>
|
|
2
2
|
|
|
3
3
|
<head>
|
|
4
|
-
<title>Map</title>
|
|
4
|
+
<title>Visualization Map</title>
|
|
5
5
|
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
|
6
6
|
<link href="style.css" rel="stylesheet" />
|
|
7
7
|
<script src="main.js" defer="defer" type="module"></script>
|
|
@@ -12,19 +12,20 @@
|
|
|
12
12
|
<header>
|
|
13
13
|
|
|
14
14
|
<hgroup>
|
|
15
|
-
<h1>
|
|
15
|
+
<h1>Activity Calendar</h1>
|
|
16
16
|
<p>@lgv</p>
|
|
17
17
|
</hgroup>
|
|
18
18
|
|
|
19
19
|
<div>
|
|
20
|
-
<a target="_blank" href="https://gitlab.com/lgensinger/
|
|
21
|
-
<a target="_blank" href="https://www.npmjs.com/package/@lgv/
|
|
20
|
+
<a target="_blank" href="https://gitlab.com/lgensinger/Visualization-map">git</a>
|
|
21
|
+
<a target="_blank" href="https://www.npmjs.com/package/@lgv/Visualization-map">npm</a>
|
|
22
22
|
</div>
|
|
23
23
|
|
|
24
24
|
</header>
|
|
25
25
|
|
|
26
26
|
<main>
|
|
27
27
|
|
|
28
|
+
<div id="legend"></div>
|
|
28
29
|
<figure></figure>
|
|
29
30
|
|
|
30
31
|
<section>
|
|
@@ -43,19 +44,19 @@
|
|
|
43
44
|
</thead>
|
|
44
45
|
<tbody>
|
|
45
46
|
<tr>
|
|
46
|
-
<td>
|
|
47
|
-
<td>
|
|
48
|
-
<td>onclick for an individual svg
|
|
47
|
+
<td>rectangle</td>
|
|
48
|
+
<td>cell-click</td>
|
|
49
|
+
<td>onclick for an individual svg rectangle element</td>
|
|
49
50
|
</tr>
|
|
50
51
|
<tr>
|
|
51
|
-
<td>
|
|
52
|
-
<td>
|
|
53
|
-
<td>mouseover for an individual svg
|
|
52
|
+
<td>rectangle</td>
|
|
53
|
+
<td>cell-mouseover</td>
|
|
54
|
+
<td>mouseover for an individual svg rectangle element</td>
|
|
54
55
|
</tr>
|
|
55
56
|
<tr>
|
|
56
|
-
<td>
|
|
57
|
-
<td>
|
|
58
|
-
<td>move mouse outside the bounds of an svg
|
|
57
|
+
<td>rectangle</td>
|
|
58
|
+
<td>cell-mouseout</td>
|
|
59
|
+
<td>move mouse outside the bounds of an svg rectangle element to clear the mouseover</td>
|
|
59
60
|
</tr>
|
|
60
61
|
</tbody>
|
|
61
62
|
</table>
|
package/example/main.js
CHANGED
|
@@ -3,103 +3,192 @@ import { VisualizationMap } from "../src/index.js";
|
|
|
3
3
|
import { processEvent, renderDefault } from "@lgv/visualization-chart";
|
|
4
4
|
|
|
5
5
|
let data = {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
6
|
+
"type": "FeatureCollection",
|
|
7
|
+
"features": [
|
|
8
|
+
{
|
|
9
|
+
"type": "Feature",
|
|
10
|
+
"properties": {
|
|
11
|
+
count: 1,
|
|
12
|
+
label: "Location 1"
|
|
13
|
+
},
|
|
14
|
+
"geometry": {
|
|
15
|
+
"coordinates": [
|
|
16
|
+
18.062765600621873,
|
|
17
|
+
12.663774440419019
|
|
18
|
+
],
|
|
19
|
+
"type": "Point"
|
|
20
|
+
}
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"type": "Feature",
|
|
24
|
+
"properties": {
|
|
25
|
+
count: 10,
|
|
26
|
+
label: "Location 2"
|
|
27
|
+
},
|
|
28
|
+
"geometry": {
|
|
29
|
+
"coordinates": [
|
|
30
|
+
29.622556347633008,
|
|
31
|
+
5.115698030885994
|
|
32
|
+
],
|
|
33
|
+
"type": "Point"
|
|
34
|
+
}
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
"type": "Feature",
|
|
38
|
+
"properties": {
|
|
39
|
+
count: 5,
|
|
40
|
+
label: "Location 3"
|
|
41
|
+
},
|
|
42
|
+
"geometry": {
|
|
43
|
+
"coordinates": [
|
|
44
|
+
22.001919683771263,
|
|
45
|
+
5.0783972844275524
|
|
46
|
+
],
|
|
47
|
+
"type": "Point"
|
|
48
|
+
}
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
"type": "Feature",
|
|
52
|
+
"properties": {
|
|
53
|
+
count: 4,
|
|
54
|
+
label: "Location 4"
|
|
55
|
+
},
|
|
56
|
+
"geometry": {
|
|
57
|
+
"coordinates": [
|
|
58
|
+
3.7080161063010166,
|
|
59
|
+
17.385867435583762
|
|
60
|
+
],
|
|
61
|
+
"type": "Point"
|
|
62
|
+
}
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
"type": "Feature",
|
|
66
|
+
"properties": {
|
|
67
|
+
count: 10,
|
|
68
|
+
label: "Location 5"
|
|
69
|
+
},
|
|
70
|
+
"geometry": {
|
|
71
|
+
"coordinates": [
|
|
72
|
+
15.763662744611167,
|
|
73
|
+
0.33649372615336404
|
|
74
|
+
],
|
|
75
|
+
"type": "Point"
|
|
76
|
+
}
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
"type": "Feature",
|
|
80
|
+
"properties": {
|
|
81
|
+
count: 3,
|
|
82
|
+
label: "Location 6"
|
|
83
|
+
},
|
|
84
|
+
"geometry": {
|
|
85
|
+
"coordinates": [
|
|
86
|
+
20.70456836788253,
|
|
87
|
+
23.01271125320183
|
|
88
|
+
],
|
|
89
|
+
"type": "Point"
|
|
90
|
+
}
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
"type": "Feature",
|
|
94
|
+
"properties": {
|
|
95
|
+
count: 10,
|
|
96
|
+
label: "Location 7"
|
|
97
|
+
},
|
|
98
|
+
"geometry": {
|
|
99
|
+
"coordinates": [
|
|
100
|
+
31.337189091518155,
|
|
101
|
+
24.365958828608953
|
|
102
|
+
],
|
|
103
|
+
"type": "Point"
|
|
104
|
+
}
|
|
105
|
+
},
|
|
106
|
+
{
|
|
107
|
+
"type": "Feature",
|
|
108
|
+
"properties": {
|
|
109
|
+
count: 5,
|
|
110
|
+
label: "Location 8"
|
|
111
|
+
},
|
|
112
|
+
"geometry": {
|
|
113
|
+
"coordinates": [
|
|
114
|
+
28.850876840412553,
|
|
115
|
+
24.742190322913345
|
|
116
|
+
],
|
|
117
|
+
"type": "Point"
|
|
118
|
+
}
|
|
119
|
+
},
|
|
120
|
+
{
|
|
121
|
+
"type": "Feature",
|
|
122
|
+
"properties": {
|
|
123
|
+
count: 4,
|
|
124
|
+
label: "Location 9"
|
|
125
|
+
},
|
|
126
|
+
"geometry": {
|
|
127
|
+
"coordinates": [
|
|
128
|
+
32.37619704771498,
|
|
129
|
+
24.256530145993054
|
|
130
|
+
],
|
|
131
|
+
"type": "Point"
|
|
132
|
+
}
|
|
133
|
+
},
|
|
134
|
+
{
|
|
135
|
+
"type": "Feature",
|
|
136
|
+
"properties": {
|
|
137
|
+
count: 4,
|
|
138
|
+
label: "Location 10"
|
|
139
|
+
},
|
|
140
|
+
"geometry": {
|
|
141
|
+
"coordinates": [
|
|
142
|
+
30.275664062537686,
|
|
143
|
+
21.682011648964462
|
|
144
|
+
],
|
|
145
|
+
"type": "Point"
|
|
146
|
+
}
|
|
147
|
+
},
|
|
148
|
+
{
|
|
149
|
+
"type": "Feature",
|
|
150
|
+
"properties": {
|
|
151
|
+
count: 2,
|
|
152
|
+
label: "Location 11"
|
|
153
|
+
},
|
|
154
|
+
"geometry": {
|
|
155
|
+
"coordinates": [
|
|
156
|
+
39.022152577684665,
|
|
157
|
+
10.875401127042196
|
|
158
|
+
],
|
|
159
|
+
"type": "Point"
|
|
160
|
+
}
|
|
161
|
+
},
|
|
162
|
+
{
|
|
163
|
+
"type": "Feature",
|
|
164
|
+
"properties": {
|
|
165
|
+
count: 1,
|
|
166
|
+
label: "Location 12"
|
|
167
|
+
},
|
|
168
|
+
"geometry": {
|
|
169
|
+
"coordinates": [
|
|
170
|
+
41.840330659695155,
|
|
171
|
+
10.435191953454591
|
|
172
|
+
],
|
|
173
|
+
"type": "Point"
|
|
174
|
+
}
|
|
175
|
+
},
|
|
176
|
+
{
|
|
177
|
+
"type": "Feature",
|
|
178
|
+
"properties": {
|
|
179
|
+
count: 8,
|
|
180
|
+
label: "Location 13"
|
|
181
|
+
},
|
|
182
|
+
"geometry": {
|
|
183
|
+
"coordinates": [
|
|
184
|
+
41.580757204890375,
|
|
185
|
+
9.488254743480155
|
|
186
|
+
],
|
|
187
|
+
"type": "Point"
|
|
188
|
+
}
|
|
41
189
|
}
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
"type": "Feature",
|
|
45
|
-
"properties": {},
|
|
46
|
-
"geometry": {
|
|
47
|
-
"coordinates": [
|
|
48
|
-
[
|
|
49
|
-
[
|
|
50
|
-
-0.11372536280845225,
|
|
51
|
-
51.495850326660104
|
|
52
|
-
],
|
|
53
|
-
[
|
|
54
|
-
-0.11372536280845225,
|
|
55
|
-
51.484758714307475
|
|
56
|
-
],
|
|
57
|
-
[
|
|
58
|
-
-0.09431987304824929,
|
|
59
|
-
51.484758714307475
|
|
60
|
-
],
|
|
61
|
-
[
|
|
62
|
-
-0.09431987304824929,
|
|
63
|
-
51.495850326660104
|
|
64
|
-
],
|
|
65
|
-
[
|
|
66
|
-
-0.11372536280845225,
|
|
67
|
-
51.495850326660104
|
|
68
|
-
]
|
|
69
|
-
]
|
|
70
|
-
],
|
|
71
|
-
"type": "Polygon"
|
|
72
|
-
}
|
|
73
|
-
},
|
|
74
|
-
{
|
|
75
|
-
"type": "Feature",
|
|
76
|
-
"properties": {},
|
|
77
|
-
"geometry": {
|
|
78
|
-
"coordinates": [
|
|
79
|
-
[
|
|
80
|
-
[
|
|
81
|
-
-0.1074645619268324,
|
|
82
|
-
51.52894445636778
|
|
83
|
-
],
|
|
84
|
-
[
|
|
85
|
-
-0.10883628720753791,
|
|
86
|
-
51.52166505153471
|
|
87
|
-
],
|
|
88
|
-
[
|
|
89
|
-
-0.10013275748593742,
|
|
90
|
-
51.52599979138691
|
|
91
|
-
],
|
|
92
|
-
[
|
|
93
|
-
-0.1074645619268324,
|
|
94
|
-
51.52894445636778
|
|
95
|
-
]
|
|
96
|
-
]
|
|
97
|
-
],
|
|
98
|
-
"type": "Polygon"
|
|
99
|
-
}
|
|
100
|
-
}
|
|
101
|
-
]
|
|
102
|
-
};
|
|
190
|
+
]
|
|
191
|
+
};
|
|
103
192
|
|
|
104
193
|
// get elements
|
|
105
194
|
let container = document.getElementsByTagName("figure")[0];
|
|
@@ -119,17 +208,13 @@ function startup(data,container) {
|
|
|
119
208
|
h1.innerHTML = `${title} <span>v${packageJson.version}</span>`;
|
|
120
209
|
|
|
121
210
|
// render source data
|
|
122
|
-
renderDefault(data,sourceContainer,outputContainer);
|
|
123
|
-
|
|
124
|
-
// determine configs
|
|
125
|
-
let width = container.offsetWidth;
|
|
126
|
-
let height = width*0.75;
|
|
211
|
+
//renderDefault(data,sourceContainer,outputContainer);
|
|
127
212
|
|
|
128
213
|
// initialize
|
|
129
|
-
const
|
|
214
|
+
const ac = new VisualizationMap(null,data);
|
|
130
215
|
|
|
131
216
|
// render visualization
|
|
132
|
-
|
|
217
|
+
ac.render(container);
|
|
133
218
|
|
|
134
219
|
}
|
|
135
220
|
|
|
@@ -138,6 +223,6 @@ document.onload = startup(data,container);
|
|
|
138
223
|
|
|
139
224
|
// attach events
|
|
140
225
|
container.outputContainer = outputContainer;
|
|
141
|
-
//container.addEventListener("
|
|
142
|
-
//container.addEventListener("
|
|
143
|
-
//container.addEventListener("
|
|
226
|
+
//container.addEventListener("cell-click",processEvent);
|
|
227
|
+
//container.addEventListener("cell-mouseover", processEvent);
|
|
228
|
+
//container.addEventListener("cell-mouseout", processEvent);
|
package/example/style.css
CHANGED
|
@@ -1,55 +1,2 @@
|
|
|
1
1
|
@import "~highlight.js/styles/atom-one-dark.css";
|
|
2
|
-
@import "~@lgv/visualization-chart/src/example/style/index.css";
|
|
3
|
-
|
|
4
|
-
main > hgroup {
|
|
5
|
-
align-items: center;
|
|
6
|
-
display: flex;
|
|
7
|
-
justify-content: space-between;
|
|
8
|
-
margin-bottom: 1em;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
main > hgroup h1 {
|
|
12
|
-
font-size: 1.5em;
|
|
13
|
-
font-weight: 700;
|
|
14
|
-
margin-right: 1em;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
main hgroup div {
|
|
18
|
-
display: flex;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
main button {
|
|
22
|
-
border: 0.2em;
|
|
23
|
-
border-style: solid;
|
|
24
|
-
cursor: pointer;
|
|
25
|
-
font-size: 0.75em;
|
|
26
|
-
padding: 0.5em;
|
|
27
|
-
text-transform: uppercase;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
main hgroup div button {
|
|
31
|
-
border: 0 none;
|
|
32
|
-
background: #525252;
|
|
33
|
-
border-radius: 1em;
|
|
34
|
-
color: white;
|
|
35
|
-
text-transform: none;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
main hgroup div button:first-of-type {
|
|
39
|
-
border-bottom-right-radius: 0;
|
|
40
|
-
border-top-right-radius: 0;
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
main hgroup div button:last-of-type {
|
|
44
|
-
background: #292929;
|
|
45
|
-
border-bottom-left-radius: 0;
|
|
46
|
-
border-top-left-radius: 0;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
main button:hover {
|
|
50
|
-
background: grey;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
main figure {
|
|
54
|
-
max-width: 100%;
|
|
55
|
-
}
|
|
2
|
+
@import "~@lgv/visualization-chart/src/example/style/index.css";
|
package/example/webpack.dev.js
CHANGED
|
@@ -14,14 +14,7 @@ const webpackConfig = merge(visConfig, commonConfig, {
|
|
|
14
14
|
devServer: {
|
|
15
15
|
allowedHosts: ["all"],
|
|
16
16
|
client: {
|
|
17
|
-
webSocketURL:
|
|
18
|
-
hostname: "0.0.0.0",
|
|
19
|
-
pathname: "/ws",
|
|
20
|
-
password: "dev-server",
|
|
21
|
-
port: 8080,
|
|
22
|
-
protocol: "ws",
|
|
23
|
-
username: "webpack",
|
|
24
|
-
}
|
|
17
|
+
webSocketURL: "ws://0.0.0.0:8080/ws"
|
|
25
18
|
},
|
|
26
19
|
static: {
|
|
27
20
|
directory: path.resolve(__dirname, "dist"),
|
package/example/webpack.prod.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lgv/visualization-map",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.1.2",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "ES6 d3.js core visualization scaffold object and utilities for maps.",
|
|
6
6
|
"main": "src/index.js",
|
|
@@ -11,10 +11,9 @@
|
|
|
11
11
|
"scripts": {
|
|
12
12
|
"build": "webpack build --config webpack.prod.js",
|
|
13
13
|
"build-example": "webpack build --config example/webpack.dev.js",
|
|
14
|
-
"coverage": "c8 --reporter=html --reporter=text ava
|
|
14
|
+
"coverage": "c8 --reporter=html --reporter=text ava",
|
|
15
15
|
"example": "webpack serve --config example/webpack.dev.js",
|
|
16
|
-
"
|
|
17
|
-
"test": "npx ava --verbose --serial --timeout 1m --node-arguments='--experimental-json-modules'"
|
|
16
|
+
"test": "npx ava --verbose --serial --timeout 1m"
|
|
18
17
|
},
|
|
19
18
|
"repository": {
|
|
20
19
|
"type": "git",
|
|
@@ -32,27 +31,25 @@
|
|
|
32
31
|
},
|
|
33
32
|
"homepage": "https://gitlab.com/lgensinger/visualization-map#readme",
|
|
34
33
|
"devDependencies": {
|
|
35
|
-
"
|
|
36
|
-
"
|
|
37
|
-
"c8": "^
|
|
34
|
+
"@fontsource/inter": "^5.2.5",
|
|
35
|
+
"ava": "^6.2.0",
|
|
36
|
+
"c8": "^10.1.3",
|
|
38
37
|
"css-loader": "^7.1.2",
|
|
39
38
|
"file-loader": "^6.2.0",
|
|
40
|
-
"
|
|
41
|
-
"html-webpack-plugin": "^
|
|
42
|
-
"
|
|
43
|
-
"
|
|
44
|
-
"webpack-
|
|
39
|
+
"highlight.js": "^11.10.0",
|
|
40
|
+
"html-bundler-webpack-plugin": "^4.19.2",
|
|
41
|
+
"jsdom": "^26.0.0",
|
|
42
|
+
"lorem-ipsum": "^2.0.8",
|
|
43
|
+
"webpack-cli": "^6.0.1",
|
|
44
|
+
"webpack-dev-server": "^5.2.1"
|
|
45
45
|
},
|
|
46
46
|
"dependencies": {
|
|
47
|
-
"@lgv/visualization-chart": "^1.
|
|
47
|
+
"@lgv/visualization-chart": "^1.2.3",
|
|
48
48
|
"leaflet": "^1.9.4"
|
|
49
49
|
},
|
|
50
50
|
"ava": {
|
|
51
51
|
"files": [
|
|
52
52
|
"tests/*_test.js"
|
|
53
|
-
],
|
|
54
|
-
"require": [
|
|
55
|
-
"./tests/_setup-browser-env.js"
|
|
56
53
|
]
|
|
57
54
|
}
|
|
58
55
|
}
|
package/src/configuration.js
CHANGED
|
@@ -1,14 +1,15 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { configuration as config, configurationLayout as configLayout } from "@lgv/visualization-chart";
|
|
2
|
+
import packagejson from "../package.json" with { type: "json" };
|
|
2
3
|
|
|
3
4
|
const configuration = {
|
|
4
|
-
branding:
|
|
5
|
-
name: packagejson.name.
|
|
5
|
+
branding: config.branding,
|
|
6
|
+
name: packagejson.name.split("/")[1]
|
|
6
7
|
};
|
|
7
8
|
|
|
8
9
|
const configurationLayout = {
|
|
9
|
-
height:
|
|
10
|
+
height: configLayout.height,
|
|
10
11
|
tileserver: process.env.LGV_TILESERVER || "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
|
|
11
|
-
width:
|
|
12
|
+
width: configLayout.width
|
|
12
13
|
}
|
|
13
14
|
|
|
14
15
|
export { configuration, configurationLayout };
|
package/src/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { configurationLayout } from "./configuration.js";
|
|
1
|
+
import { configuration, configurationLayout } from "./configuration.js";
|
|
2
2
|
|
|
3
3
|
import { MapLayout } from "./layout/map.js";
|
|
4
4
|
|
|
@@ -6,4 +6,4 @@ import { MapData } from "./structure/index.js";
|
|
|
6
6
|
|
|
7
7
|
import { VisualizationMap } from "./visualization/index.js";
|
|
8
8
|
|
|
9
|
-
export { configurationLayout, MapData, MapLayout, VisualizationMap };
|
|
9
|
+
export { configuration, configurationLayout, MapData, MapLayout, VisualizationMap };
|
package/src/structure/index.js
CHANGED
|
@@ -13,6 +13,21 @@ class MapData extends ChartData {
|
|
|
13
13
|
|
|
14
14
|
}
|
|
15
15
|
|
|
16
|
+
/**
|
|
17
|
+
* Enrich data with id if missing.
|
|
18
|
+
* @param {data} object - usually array; mapped object of visualization values
|
|
19
|
+
* @returns An object or array of data specifically formatted to the visualization type.
|
|
20
|
+
*/
|
|
21
|
+
enrichId(data) {
|
|
22
|
+
return data ? {type:data.type,features: data.features.map((d,i) => {
|
|
23
|
+
|
|
24
|
+
let result = d;
|
|
25
|
+
if (!Object.keys(d.properties).includes("id")) result.properties.id = i;
|
|
26
|
+
return d;
|
|
27
|
+
|
|
28
|
+
})} : data;
|
|
29
|
+
}
|
|
30
|
+
|
|
16
31
|
}
|
|
17
32
|
|
|
18
33
|
export { MapData };
|
|
@@ -2,9 +2,9 @@ import { select } from "d3-selection";
|
|
|
2
2
|
import { LinearGrid } from "@lgv/visualization-chart";
|
|
3
3
|
import { mean } from "d3-array";
|
|
4
4
|
import L from "leaflet";
|
|
5
|
-
import "leaflet/dist/leaflet.css";
|
|
6
|
-
import "leaflet/dist/images/marker-shadow.png";
|
|
7
5
|
|
|
6
|
+
import leafletCss from "./leafletCss.js";
|
|
7
|
+
import { MapData as MD } from "../structure/index.js";
|
|
8
8
|
import { configuration, configurationLayout } from "../configuration.js";
|
|
9
9
|
|
|
10
10
|
/**
|
|
@@ -20,9 +20,9 @@ import { configuration, configurationLayout } from "../configuration.js";
|
|
|
20
20
|
class VisualizationMap extends LinearGrid {
|
|
21
21
|
|
|
22
22
|
constructor(dom=null, data, width=configurationLayout.width, height=configurationLayout.height, MapData=null, tileServerUrl=configurationLayout.tileserver, label=configuration.branding, name=configuration.name) {
|
|
23
|
-
|
|
23
|
+
|
|
24
24
|
// initialize inheritance
|
|
25
|
-
super(data, width, height, MapData, label, name);
|
|
25
|
+
super(data, width, height, MapData ? MapData : new MD(data), label, name);
|
|
26
26
|
|
|
27
27
|
let x = 0;
|
|
28
28
|
let y = 0;
|
|
@@ -46,6 +46,19 @@ class VisualizationMap extends LinearGrid {
|
|
|
46
46
|
// if dom node provided set as the map container
|
|
47
47
|
if (dom) this.container = select(dom);
|
|
48
48
|
|
|
49
|
+
// if running in a browser
|
|
50
|
+
if (typeof window !== "undefined") {
|
|
51
|
+
|
|
52
|
+
// generate stylesheet
|
|
53
|
+
let style = document.createElement("style");
|
|
54
|
+
style.type = "text/css";
|
|
55
|
+
|
|
56
|
+
// add to document head
|
|
57
|
+
style.appendChild(document.createTextNode(leafletCss));
|
|
58
|
+
document.head.appendChild(style);
|
|
59
|
+
|
|
60
|
+
}
|
|
61
|
+
|
|
49
62
|
}
|
|
50
63
|
|
|
51
64
|
/**
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import test from "ava";
|
|
2
|
+
import { JSDOM } from "jsdom";
|
|
3
|
+
import { LoremIpsum } from "lorem-ipsum";
|
|
4
|
+
|
|
5
|
+
/******************** PARAMS ********************/
|
|
6
|
+
|
|
7
|
+
const lorem = new LoremIpsum();
|
|
8
|
+
const rando = d => Math.floor(Math.random() * d);
|
|
9
|
+
const randoLatLng = d => ((Math.random() * (180 - -180)) + -180).toFixed(6) * 1;
|
|
10
|
+
|
|
11
|
+
let data = {type: "FeatureCollection",features:[...Array(50).keys().map(i => ({
|
|
12
|
+
type: "Feature",
|
|
13
|
+
properties: { label: `Location ${i}`},
|
|
14
|
+
geometry: { coordinates: [randoLatLng,randoLatLng], type: "Point"}
|
|
15
|
+
}))]};
|
|
16
|
+
|
|
17
|
+
let div = "<div></div>";
|
|
18
|
+
let figure = "<figure></figure>";
|
|
19
|
+
|
|
20
|
+
/******************** INITIALIZE ********************/
|
|
21
|
+
|
|
22
|
+
test("initialize", async t => {
|
|
23
|
+
|
|
24
|
+
let imports = `import { VisualizationMap } from "../src/index.js";`
|
|
25
|
+
let initClass = `window.vm = new VisualizationMap(null,${data});`
|
|
26
|
+
|
|
27
|
+
const dom = new JSDOM(`${div}${figure}<script defer="defer" type="module">${imports}${initClass}</script>`, { runScripts: "dangerously" });
|
|
28
|
+
|
|
29
|
+
//t.true(vm.branding == brand);
|
|
30
|
+
//t.true(vm.data.toString() == data.toString());
|
|
31
|
+
//t.true(typeof vm.center[0] === "number");
|
|
32
|
+
//t.true(typeof vm.center[1] === "number");
|
|
33
|
+
//t.true(vm.name == name);
|
|
34
|
+
//t.true(vm.prefix == brand);
|
|
35
|
+
//t.true(vm.tileServerUrl == configurationLayout.tileserver);
|
|
36
|
+
|
|
37
|
+
t.pass();
|
|
38
|
+
|
|
39
|
+
});
|
package/webpack.common.js
CHANGED
|
@@ -15,9 +15,7 @@ const commonConfig = {
|
|
|
15
15
|
plugins: [
|
|
16
16
|
new webpack.DefinePlugin({
|
|
17
17
|
"process.env": {
|
|
18
|
-
"
|
|
19
|
-
"LGV_TILESERVER": JSON.stringify(process.env.LGV_TILESERVER),
|
|
20
|
-
"LGV_WIDTH": JSON.stringify(process.env.LGV_WIDTH)
|
|
18
|
+
"LGV_TILESERVER": JSON.stringify(process.env.LGV_TILESERVER)
|
|
21
19
|
}
|
|
22
20
|
})
|
|
23
21
|
],
|
|
@@ -36,11 +34,7 @@ const commonConfig = {
|
|
|
36
34
|
},
|
|
37
35
|
{
|
|
38
36
|
test: /\.(png|jpe?g|gif)$/i,
|
|
39
|
-
use: [
|
|
40
|
-
{
|
|
41
|
-
loader: 'file-loader',
|
|
42
|
-
}
|
|
43
|
-
]
|
|
37
|
+
use: ["file-loader"]
|
|
44
38
|
}
|
|
45
39
|
]
|
|
46
40
|
}
|
package/tests/init_test.js
DELETED
package/webpack.dev.js
DELETED
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import { commonConfig } from "./webpack.common.js";
|
|
2
|
-
|
|
3
|
-
import HtmlWebpackPlugin from "html-webpack-plugin";
|
|
4
|
-
import { merge } from "webpack-merge";
|
|
5
|
-
|
|
6
|
-
const webpackConfig = merge(commonConfig, {
|
|
7
|
-
|
|
8
|
-
mode: "development",
|
|
9
|
-
|
|
10
|
-
plugins: [
|
|
11
|
-
new HtmlWebpackPlugin({
|
|
12
|
-
title: "Development",
|
|
13
|
-
})
|
|
14
|
-
]
|
|
15
|
-
|
|
16
|
-
});
|
|
17
|
-
|
|
18
|
-
export { webpackConfig };
|
|
19
|
-
export default webpackConfig;
|