Skip to content

Commit 2b3c2a0

Browse files
HugoHeneaultHugoHeneault
committed
✨(graph): Resize container
1 parent a490e1c commit 2b3c2a0

10 files changed

+3412
-885
lines changed

‎dist/Vue2LeafletHeightGraph.common.js

Lines changed: 149 additions & 129 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/Vue2LeafletHeightGraph.common.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/Vue2LeafletHeightGraph.umd.js

Lines changed: 149 additions & 129 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/Vue2LeafletHeightGraph.umd.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/Vue2LeafletHeightGraph.umd.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/Vue2LeafletHeightGraph.umd.min.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/index.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!-- public/index.html -->
2+
<!DOCTYPE html>
3+
<html lang="en">
4+
<head>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<title>Your App</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
</body>
12+
</html>

‎src/Vue2LeafletHeightGraph.vue

Lines changed: 35 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -50,38 +50,39 @@
5050
if(this.debug) {
5151
console.log('mounted')
5252
}
53-
this.$nextTick(() => {
54-
const map = this.$parent.mapObject;
55-
this.hgInstance = L.control.heightgraph({...this.options,...{
56-
// merges quick settings with options if they are defined
57-
...(this.position && {position: this.position}),
58-
...(this.expand && {expand: this.expand})
59-
}})
60-
this.controlRef = this.hgInstance.addTo(map)
61-
if(this.container) {
62-
const container = document.getElementById(this.container);
63-
container.innerHTML = ''
64-
container.appendChild(this.controlRef.onAdd(map));
53+
const map = this.$parent.mapObject;
54+
this.hgInstance = L.control.heightgraph({...this.options,...{
55+
// merges quick settings with options if they are defined
56+
...(this.position && {position: this.position}),
57+
...(this.expand && {expand: this.expand})
58+
}})
59+
this.controlRef = this.hgInstance.addTo(map)
60+
if(this.container) {
61+
const container = this.getContainer();
62+
container.innerHTML = ''
63+
container.appendChild(this.controlRef.onAdd(map));
64+
window.addEventListener('resize', this.onResize);
6565
66-
try {
67-
document.querySelector('.leaflet-control-container .heightgraph.leaflet-control').hidden = true
68-
} catch (e) {
69-
console.error('Unable to hide the default height graph control')
70-
}
71-
} else {
72-
this.hgInstance.addTo(map)
73-
}
74-
let p = Object.keys(this.availableParsers).includes(this.parser) ? this.parser : 'normal'
75-
let dataCollections = this.availableParsers[p](this.data)
76-
this.hgInstance.addData(dataCollections)
77-
})
66+
67+
try {
68+
document.querySelector('.leaflet-control-container .heightgraph.leaflet-control').hidden = true
69+
} catch (e) {
70+
console.error('Unable to hide the default height graph control')
71+
}
72+
} else {
73+
this.hgInstance.addTo(map)
74+
}
75+
let p = Object.keys(this.availableParsers).includes(this.parser) ? this.parser : 'normal'
76+
let dataCollections = this.availableParsers[p](this.data)
77+
this.hgInstance.addData(dataCollections)
7878
},
7979
beforeDestroy() {
8080
if(this.debug) {
8181
console.log('beforeDestroy')
8282
}
8383
if(this.hgInstance) {
84-
this.hgInstance.remove()
84+
window.removeEventListener('resize', this.onResize);
85+
this.hgInstance.remove()
8586
this.controlRef = null;
8687
}
8788
},
@@ -99,7 +100,16 @@
99100
}
100101
})
101102
}
103+
},
104+
methods: {
105+
onResize() {
106+
const { clientWidth: width, clientHeight: height } = this.getContainer();
107+
this.hgInstance.resize({ width, height: this.options.height || height });
108+
},
109+
getContainer() {
110+
return document.querySelector(this.container) || document.getElementById(this.container);
102111
}
112+
}
103113
}
104114
</script>
105115
<style>

0 commit comments

Comments
 (0)