rudovjan / highcharts-tooltip-delay Goto Github PK

Instead of "if (point === chart.hoverPoint || $.inArray(chart.hoverPoint, point) )"
there should be "if (point === chart.hoverPoint || $.inArray(chart.hoverPoint, point) > -1)"

Hi

I am looking forward to use this great plugin for my app. The only thing that stops me is that I am using npm thus I am not able to start using this until there is no package.json file in your repo.
Could you please add package.json with minimum info?

Best regards,
Andrey

Hi, I'd like to use this plugin in a closed source app, but I can't do so with the current GPL license. Would you consider switching to a more permissive license, like MIT?

Thanks!

IMHO, the delay is more useful for the initial show such that it is not triggered inadvertently. If the tooltip is already visible, the subsequent hovers should update it with no delay. Having a separate option called initialDelay will be helpful in this regard.

It seems a tooltip delay is useful in cases where there are many series on a chart; in such scenarios, I'd like to see an option to prevent display of the tooltip if the user has moused out before the delay is completed - in this way, you can mouse around on the chart without a tooltip following you everywhere, unless you explicitly wait around above a Point.

For charts that have multiple series, the tooltip delay method inadvertently cancels the timer for potentially valid events. This is because timerId is a single value when it needs to hold a separate value for each series. This required a mild refactor:

(function (H) {

    var timerId = {};

    H.wrap(H.Tooltip.prototype, 'refresh', function (proceed) {

        var seriesName = arguments[1].series.name;

        var delayForDisplay = this.chart.options.tooltip.delayForDisplay ? this.chart.options.tooltip.delayForDisplay : 1000;

        if (timerId[seriesName]) {
            clearTimeout(timerId[seriesName]);
            delete timerId[seriesName];
        }

        timerId[seriesName] = window.setTimeout(function () {
            var point = this.refreshArguments[0];

            if (point === this.chart.hoverPoint || $.inArray(this.chart.hoverPoint, point) > -1) {
                proceed.apply(this.tooltip, this.refreshArguments);
            }

        }.bind({
                refreshArguments: Array.prototype.slice.call(arguments, 1),
                chart: this.chart,
                tooltip: this
        }), delayForDisplay);

    });

}(Highcharts));

timerId has become an object, with the timer for each series stored as the series name key. This allows each series' previous hover points to be canceled without affecting other series.

Additionally, because the setTimeout callback may be called multiple times (once for each series), I set their context instead of relying exclusively on closures.

Hey. I use npm and vue-js. I connected your plugin like this:

import Vue from 'vue';
import HighchartsVue from 'highcharts-vue';
import Highcharts from 'highcharts/highcharts';
import HighchartTooltipDelay from 'highcharts-tooltip-delay';

HighchartTooltipDelay(Highcharts);

Vue.use(HighchartsVue, { highcharts: Highcharts });

// init vue ...

But I get the error: IMG HERE

tooltip-delay.dist.js:47 Uncaught ReferenceError: Highcharts is not defined
    at Object.../node_modules/highcharts-tooltip-delay/tooltip-delay.dist.js ...

Living example here

Connecting other plugins in the same way works fine!
What am I doing wrong? Thanks in advance!

There seems to be an issue with the delay if the shared property is set to true in a combined column and spline chart. The behavior that I'm seeing is that the delay is ignored and the tooltip displays instantly.
tooltip: {
shared: true,
delayForDisplay: 1000,
}

Here's what the code looks like:

if (delayForDisplay) {
    window.setTimeout(function () {
        ...
    }, delayForDisplay || 1000);
}
...

Because if(delayForDisplay) only executes if delayForDisplay is truthy, delayForDisplay || 1000 will never || to 1000.

Hi, Check this example.
http://jsfiddle.net/5r6pmt44/

If tooltip is shared and then you hide all series except 1, Let's say for ex- Hide all except Tokyo series. Now mouse hover on each point you will see tooltip appears for previous point and not for current mousehover point.

So i am trying to do a npm install which now pulls the new version 1.2.0, the build fails as i cant uglify the es6 syntax in the new code. Also if you could publish your work on npm that would be great, as with the package.json i can download it through git repo, but as its not versioned i am forced to get the latest always