Comments (1)
Hello, with your workaround, my histogram does not resize and shifts from the slider.
I managed to set the width to 100% by updating the width (and the key) of the slider at the end of the resize event.
You can get the width of the parent with a ref to it and call the clientWidth property.
<div ref="parent">
<HistogramSlider
:key="parentWidth"
:width="parentWidth"
:bar-height="100"
:data="data"
/>
</div>
data() {
return {
parentWidth: 300,
resizer: {
time: null,
timeout: false,
delta: 300,
},
}
},
destroyed() {
window.removeEventListener('resize', this.resizeEvent)
},
mounted() {
window.addEventListener('resize', this.resizeEvent)
this.$nextTick().then(() => {
// Trigger one time to update parentWidth variable
this.resizeSlider()
})
},
methods: {
resizeEvent() {
this.resizer.time = new Date()
if (this.resizer.timeout === false) {
this.resizer.timeout = true
setTimeout(this.resizeEnd, this.resizer.delta)
}
},
resizeEnd() {
if (new Date() - this.resizer.time < this.resizer.delta) {
setTimeout(this.resizeEnd, this.resizer.delta)
} else {
this.resizer.timeout = false
this.resizeSlider()
}
},
resizeSlider() {
if (this.$refs.parent) this.parentWidth = this.$refs.parent.clientWidth - 24 // Remove padding 12px
else this.parentWidth = 300 // Default value
},
},
There may be an easier or shorter way to do this.
I hope this helps someone.
End of resize event source : https://stackoverflow.com/questions/5489946/how-to-wait-for-the-end-of-resize-event-and-only-then-perform-an-action
from vue-histogram-slider.
Related Issues (20)
- Histogram Tooltips HOT 1
- Support for v-model HOT 7
- Support multi-color gradient for color prop
- How to update the data in realtime using ajax?
- Disable zoom in Histogram HOT 3
- How can I use histogram-slider using CDN?
- The range is not working properly when min = 0. HOT 1
- How can one set min + max dynamically using a reactive property? HOT 1
- Histogram Not Updating HOT 6
- Updating from, to on mount renders partial histogram bars HOT 1
- Using vue-histogram without global registration HOT 2
- vue-histogram-slider v 0.3.8 not working properly with vue v 2.6.11
- Non-passive event listeners destroying performance
- Vue 3 support? HOT 1
- Import error HOT 2
- Showing Column
- Change data
- Unable to write a custom test in cypress
- Preselect "from" and "to" displaying the whole data set
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-histogram-slider.