Skip to content

Commit 42c8523

Browse files
alan-wualan-wu
authored
Merge pull request #49 from akhuoa/feature/resizing-graphs
Resizing of graphs
2 parents 37e449a + 78cf6f2 commit 42c8523

File tree

8 files changed

+129
-127
lines changed

8 files changed

+129
-127
lines changed

‎package-lock.json‎

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

‎src/App.vue‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,15 +19,20 @@
1919
width: 250px;
2020
}
2121
22+
html, body {
23+
height: 100%;
24+
width: 100%;
25+
margin: 0;
26+
padding: 0;
27+
}
28+
2229
body {
2330
margin: 0px;
2431
}
2532
2633
html {
2734
background: url('../images/background.jpg') no-repeat 0 0 scroll;
2835
background-color: #0c0c0c;
29-
background-size: 100% 100%;
30-
height: 1080px;
31-
width: 1920px;
36+
background-size: cover;
3237
}
3338
</style>

‎src/assets/bottom-right-control.scss‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
.bottom-right-control {
2+
position: relative;
3+
right: 16px;
4+
z-index: 3;
5+
width: 190px;
6+
display: flex;
7+
align-items: center;
8+
justify-content: center;
9+
10+
// Hide controls until parent is hovered
11+
.plotvuer_parent & {
12+
opacity: 0;
13+
transition: opacity 1s cubic-bezier(1, 0.03, 0.58, 1);
14+
}
15+
16+
.plotvuer_parent:hover & {
17+
opacity: 1;
18+
transition: opacity 0.3s;
19+
}
20+
21+
.zoomSelect,
22+
svg.map-icon {
23+
margin-bottom: 0;
24+
}
25+
26+
:deep(.plot-popper) {
27+
padding: 9px 10px;
28+
min-width: 150px;
29+
font-size: 12px;
30+
color: #fff;
31+
background-color: #8300bf;
32+
}
33+
34+
:deep(.plot-popper .popper__arrow::after) {
35+
border-left-color: #8300bf !important;
36+
}
37+
38+
:deep(.el-select__tags-text) {
39+
max-width: 90px;
40+
overflow: hidden;
41+
text-overflow: ellipsis;
42+
white-space: nowrap;
43+
display: inline-block;
44+
vertical-align: middle;
45+
}
46+
47+
:deep(.modebar-container) {
48+
display: none;
49+
}
50+
}

‎src/components/HeatmapPlot.vue‎

Lines changed: 18 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
<el-button class="view-heatmap-button" @click="logToggle">Toggle log</el-button>
3636
</span>
3737
</div>
38-
<plot-controls :parent-element="{element: $refs.plotContainer}" :controls-enabled="!loading" />
38+
<plot-controls :parent-element="{element: $refs.plotlyplot}" :controls-enabled="!loading" />
3939
</div>
4040
</template>
4141

@@ -69,7 +69,8 @@ export default {
6969
filterY: [],
7070
loading: false,
7171
logScale: false,
72-
logDataValues: markRaw([])
72+
logDataValues: markRaw([]),
73+
resizeObserver: null,
7374
}
7475
},
7576
computed: {
@@ -104,14 +105,26 @@ export default {
104105
},
105106
mounted: function () {
106107
this.loadData(this.sourceData)
108+
this.resizeObserver = new ResizeObserver(() => {
109+
if (this.$refs.plotlyplot) {
110+
Plotly.Plots.resize(this.$refs.plotlyplot)
111+
}
112+
})
113+
this.resizeObserver.observe(this.$refs.plotContainer)
114+
},
115+
beforeUnmount: function () {
116+
if (this.resizeObserver) {
117+
this.resizeObserver.disconnect()
118+
}
107119
},
108120
methods: {
109121
loadData(sourceData) {
110122
if (sourceData.url) {
111123
this.loading = true
112124
DataManager.loadFile(sourceData.url, this.dataReady) // Use url
113125
} else {
114-
Plotly.react(this.$refs.plotlyplot, this.sourceData.data, this.sourceData.layout ? this.sourceData.layout : this.layout, this.options) // Use plolty input
126+
const layout = this.sourceData.layout ? this.sourceData.layout : this.layout
127+
Plotly.react(this.$refs.plotlyplot, this.sourceData.data, layout, this.options) // Use plolty input
115128
}
116129
},
117130
dataReady(data) {
@@ -191,7 +204,8 @@ export default {
191204
}
192205
]
193206
const heatmapLayout = {title: {text: this.plotTitle}}
194-
Plotly.react(this.$refs.plotlyplot, tdata, {...this.layout, ...heatmapLayout, ...this.plotLayout}, this.options) //this.getOptions())
207+
const layout = {...this.layout, ...heatmapLayout, ...this.plotLayout}
208+
Plotly.react(this.$refs.plotlyplot, tdata, layout, this.options) //this.getOptions())
195209
},
196210
populateColumnHeaders(parsedData) {
197211
let all_data = parsedData.data
@@ -224,13 +238,6 @@ export default {
224238
text-align: left;
225239
}
226240
227-
.bottom-right-control {
228-
position: absolute;
229-
bottom: 16px;
230-
right: 16px;
231-
z-index: 3;
232-
}
233-
234241
@media only screen and (max-width: 48em) {
235242
.ui-controls {
236243
position: absolute;
@@ -325,24 +332,4 @@ export default {
325332
margin-right: 2px;
326333
margin-top: 2px;
327334
}
328-
329-
.bottom-right-control :deep( .plot-popper ){
330-
padding: 9px 10px;
331-
min-width: 150px;
332-
font-size: 12px;
333-
color: #fff;
334-
background-color: #8300bf;
335-
}
336-
.bottom-right-control :deep( .plot-popper .popper__arrow::after ){
337-
border-left-color: #8300bf !important;
338-
}
339-
340-
.bottom-right-control :deep( .el-select__tags-text ){
341-
max-width: 90px;
342-
overflow: hidden;
343-
text-overflow: ellipsis;
344-
white-space: nowrap;
345-
display: inline-block;
346-
vertical-align: middle;
347-
}
348335
</style>

‎src/components/PlotControls.vue‎

Lines changed: 30 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div class="container">
2+
<div class="controls-container">
33
<map-svg-sprite-color />
44
<div ref="zoomControls" :class="{inactive: !controlsEnabled}" class="bottom-right-control">
55
<el-popover
@@ -38,8 +38,14 @@
3838
/>
3939
</template>
4040
</el-popover>
41-
42-
<el-select size="small" v-model="selectZoom" placeholder="100%" class="zoomSelect" @change="selectZoomChange">
41+
42+
<el-select
43+
size="small"
44+
v-model="selectZoom"
45+
placeholder="100%"
46+
class="zoomSelect"
47+
@change="selectZoomChange"
48+
>
4349
<el-option
4450
v-for="item in zoomSelect"
4551
:key="item.value"
@@ -213,31 +219,42 @@ export default {
213219
},
214220
mounted: function () {
215221
this.createZoomPercentages()
216-
setTimeout( ()=> {this.parentElement.element.addEventListener('wheel', this.handleWheel)}, 1000)
222+
setTimeout(() => {
223+
if (this.parentElement?.element) {
224+
this.parentElement.element.addEventListener('wheel', this.handleWheel)
225+
}
226+
}, 1000)
217227
},
218228
beforeUnmount: function () {
219-
this.parentElement.element.removeEventListener('wheel', this.handleWheel)
229+
if (this.parentElement?.element) {
230+
this.parentElement.element.removeEventListener('wheel', this.handleWheel)
231+
}
220232
}
221233
}
222234
</script>
223235
224236
225237
<style scoped>
238+
@import '../assets/bottom-right-control.scss';
239+
240+
.controls-container {
241+
width: 100%;
242+
height: auto;
243+
display: flex;
244+
align-items: center;
245+
justify-content: flex-end;
246+
position: absolute;
247+
bottom: 8px;
248+
right: 0;
249+
}
250+
226251
.controls {
227252
padding-left: 55px;
228253
padding-top: 5px;
229254
align-items: left;
230255
text-align: left;
231256
}
232257
233-
.bottom-right-control {
234-
position: absolute;
235-
bottom: 16px;
236-
right: 16px;
237-
z-index: 3;
238-
width: 190px;
239-
}
240-
241258
@media only screen and (max-width: 48em) {
242259
.ui-controls {
243260
position: absolute;
@@ -340,24 +357,4 @@ export default {
340357
margin-right: 2px;
341358
margin-top: 2px;
342359
}
343-
344-
.bottom-right-control :deep( .plot-popper ){
345-
padding: 9px 10px;
346-
min-width: 150px;
347-
font-size: 12px;
348-
color: #fff;
349-
background-color: #8300bf;
350-
}
351-
.bottom-right-control :deep( .plot-popper .popper__arrow::after ){
352-
border-left-color: #8300bf !important;
353-
}
354-
355-
.bottom-right-control :deep( .el-select__tags-text ){
356-
max-width: 90px;
357-
overflow: hidden;
358-
text-overflow: ellipsis;
359-
white-space: nowrap;
360-
display: inline-block;
361-
vertical-align: middle;
362-
}
363360
</style>

‎src/components/PlotVuer-original.vue‎

Lines changed: 2 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -487,6 +487,8 @@ export default {
487487
<style scoped src="element-ui/lib/theme-chalk/index.css"></style>
488488

489489
<style scoped>
490+
@import '../assets/bottom-right-control.scss';
491+
490492
.plotvuer_parent {
491493
height: 100%;
492494
width: 100%;
@@ -501,13 +503,6 @@ export default {
501503
text-align: left;
502504
}
503505
504-
.bottom-right-control {
505-
position: absolute;
506-
bottom: 16px;
507-
right: 16px;
508-
z-index: 3;
509-
}
510-
511506
@media only screen and (max-width: 48em) {
512507
.ui-controls {
513508
position: absolute;
@@ -608,26 +603,4 @@ export default {
608603
right: 50%;
609604
position: absolute;
610605
}
611-
.bottom-right-control :deep( .plot-popper ){
612-
padding: 9px 10px;
613-
min-width: 150px;
614-
font-size: 12px;
615-
color: #fff;
616-
background-color: #8300bf;
617-
}
618-
.bottom-right-control :deep( .plot-popper .popper__arrow::after ){
619-
border-left-color: #8300bf !important;
620-
}
621-
622-
.bottom-right-control :deep( .el-select__tags-text ){
623-
max-width: 90px;
624-
overflow: hidden;
625-
text-overflow: ellipsis;
626-
white-space: nowrap;
627-
display: inline-block;
628-
vertical-align: middle;
629-
}
630-
.bottom-right-control :deep( .modebar-container ){
631-
display: none;
632-
}
633606
</style>

‎src/components/PlotVuer.vue‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -135,9 +135,12 @@ export default {
135135
<style scoped>
136136
.plotvuer_parent {
137137
height: 100%;
138+
min-height: 160px;
138139
width: 100%;
140+
padding-bottom: 8px;
139141
position: relative;
140142
overflow: hidden;
143+
box-sizing: border-box;
141144
}
142145
</style>
143146

0 commit comments

Comments
 (0)