oguzhaninan / vue-histogram-slider Goto Github PK

Would it be possible to specify a log scale rather than linear scale? Or to expose underlying d3 settings somehow so that I can accomplish that myself?
Thanks!

Hi,
Thanks for your work on this component!

I was using vue-histogram-slider successfully at v0.3.4, inside my nuxt app which is using typescript.

If I try to update the version of vue-histogram-slider to v0.3.5 or higher, it produces an error in the browser window: "render function or template not defined in component"

And in the console, npm dev command shows this error:
[Vue warn]: Failed to resolve async component: () => webpack_require.e(/*! import() / 1).then(webpack_require.bind(null, /! ./.vue */ "./components//.vue"))
Reason: ReferenceError: window is not defined

I think this might be due to this commit, which references "window" on line 161.

I think this trips Nuxt up if it's trying to server-side render, because there is no "window" object in node.
It may be possible to work around this with a plugin such as mentioned here, but I think it would be simpler just to check for window before referencing it?

Hi, I tried to use CDN histogram-slider in html file but It didn´t work. Is there any example to use like this? I will really appreciate it.

The current implementation of vue histogram suggests to register the component globally in the app.
This leads to the components being bundled at places we don't need it.

Also, registering the component locally leads to infinite recursion.

Is there a way we can register the component locally?

How can I set sliders' width to 100%?
I have tried to set it like this :width="'100%'" but got a type error cause it was expecting number as a prop.

My workaround:
I took a wrapper class and added CSS like this
.rangeSlider .vue-histogram-slider-wrapper { width: 100% !important; }

Is there any better way to do it?

Steps to reproduce

1. Update the from and to range of the histogram using the update() method once the histogram is mounted.
2. Once in a while, refresh the page/re-mount the component.

Observation
The histogram is partially rendered.

I think the canvas is in the midst of painting the graph while an update is triggered.
The extent to which the bars are rendered depends on how quick the component renders. If the component is moderately light, the partial rendering of the histogram is visible as shown:

This is taken from the example histogram provided in the source directory.

A possible workaround is an explicit wait for the rendering of the histogram to complete, would be great if there could be an event raised once the histogram has completed rendering.

It'd be great if the component would support v-model for the selected values, so that the reactiveness is maintained rather than having to listen to the events being triggered (which is what I assume you have to do at the moment to get the new values?).

I'm tried to use the component in a work project but it is not render properly then I tried to do the same example from the documentation with the following versions vue-histogram-slider v 0.3.8 not working properly with vue v 2.6.11 and error persist.

I believe vue-histogram-slider is based on another library called histogram-slider. I've tried to implement a fix for this as I think we just need to specify passive in any 'touchstart' event listeners. It looks like both the original library and the Vue wrapper have this issue.

All modern browsers report this for each item you iterate through when adding data to the histogram. It kills performance and there is no way that I can see to simply suppress it.

I have over 400 of these messages in my application each time the positions update which is whenever the user moves a map:

If these event listeners were updated to have '{ passive: true }', I believe it would correct the issue. I was thinking maybe @oguzhaninan has this setup where he could pull in the updated library and update each 'touchstart' event listener in 15 minutes. I see that there hasn't been an update in two years though. If I can correct this, should we create a new repository where we can keep an updated version? What do you guys suggest?

@oguzhaninan want to chime in? What do you want to do with this if anything? I think it should be kept alive but maybe it needs to be rewritten for Vue3; is this the reason for abandoning it?

Can I make handle size bigger? It's not super fun on mobile, but I think it would be if the handle size could be changed. Is there already a prop for this?

Hey, is it possible to disable the zoom via props so that the scale of the histogram remains fixed?

It seems that this slider uses IDs and classes that prevent you from having more than one slider present on the same component at the same time.

The result is that any sliders created after the first one end up taking up the same space on the page.

How do you prevent this from happening and use more than one slider per page/component?

Hi it would be really helpful if you can tell a way how to add a test on it.

Hi how can i customize data for histogram like: data: [10,5,4,20,100]
Thank you

Is there any way to change the histogram data when you click on a button? I have a currency converter and I want to change the values from the data with the new values when I change the currency.

This is an AMAZING package. Would really appreciate it if you could migrate it for Vue 3

I have implemented a slider for price range slider.

Here I attached the screenshot,
I wanted to update the price value once it changes.
thanks.

I'm trying to use this library with Vue 2 and Node 16. However, I get the following error when importing the library using this command:

import HistogramSlider from 'vue-histogram-slider'

The error is:

export 'default' (imported as 'HistogramSlider') was not found in 'vue-histogram-slider' (module has no exports)

Any idea why this is happening?

When passing an array of data to the histogram it doesn't update visually. Inspecting the histogram object does in fact show the data in place.

created() { let locations = this.$store.getters['map/activeLocations'] for (let location in locations) { this.data.push(locations[location].price) }

This pulls my location data and writes it to 'data' which is in a reactive state. Should I be pushing the data into the vue-histogram-slider a different way? I can inspect the histogram object and view the data I just pushed into it, yet the histogram bars do not update.

Is there any way to show tooltip values on the graph?

Currently, when I provide an array of colors to the colors prop of VueHistogramSlider, it'll only use the first two colors of any array that I provide.
I was hoping it would use a multi-color gradient using as many colors as I provide.

Is this something that will be supported at all?

Hi, I've started using your component and it is amazing, I want to know if there is a way to change the design to not show the data as bars but a chart area instead, something like this:

Is it possible? If not, Do you have any idea of how to achieve it?

For example, if I have a data set that goes from 1 to 100, if I set min to 50 and max to 70, then all the values from 1 to 100 are not displayed when the component is rendered, so I assume that instead of min and max it should be from and to, but I dont see these as options.

Is there an alternative for this?

I set the data property to a computed property of the containing component and the slider doesn't update the bars.

If I change the section and then go back to where the slider is used then it updates. It seems that it only gets rendered on mount.

I'm using nuxt and it's failing as window is exposed to load jquery here: https://github.com/oguzhaninan/vue-histogram-slider/blob/master/src/lib/range-slider.js#L14

If should at least check if window exists :)

When setting the grid="false" the placement of the handles are slightly of:

When setting it to true it works:

Is it possible to have tooltip on hovering Histogram bars and being able to customize data in that tooltip?

if min equals 0, the range min would become the smallest value in the dataset, instead of 0.

I have got some buttons outside of histogram slider that set the time range on the slider. For example past hour or past day. This used to work and I updated the sliders from property like this:

this.$refs.histogramSlider.update({from: this.sinceTime})

However after an update it started throwing the above error and it's not updating anything. The rest of the slider is working as intended.

Am I updating it wrong?

Hi, is there any way to update the data values in realtime using ajax?
as I can see, the update method only works for "from" & "to".

This component is very great but I can't use it on a commercial single page application without opening source code. Is it wanted ? Or do you have the possibility to change the license ?

As the title says: How can one set min + max dynamically using a reactive property?