Kyvis-Labs / ignition-apexcharts-module

The module provides Perspective ApexCharts components
Apache License 2.0
59 stars 12 forks source link

v1.0.11 Timeline Tooltip Uncaught TypeError #34

Closed nikolai-wolterstorff closed 6 months ago

nikolai-wolterstorff commented 1 year ago

After upgrading to v1.0.11 (Ignition v8.1.20), I am getting a "Uncaught TypeError: Cannot read properties of undefined (reading 'tooltip')" error when hovering over a bar in a Timeline Chart.

nikolai-wolterstorff commented 1 year ago

View with reproducible issue attached. timeline.zip

traviscox commented 1 year ago

This worked in the previous version?

nikolai-wolterstorff commented 1 year ago

1.0.9: bars and tooltip worked. 1.0.10: the chart would display (axis, etc) but not the bars. 1.0.11: the bars are displaying, but no tooltip.

traviscox commented 1 year ago

Ok, that was actually an issue with Apex Charts v 3.36.0. I upgraded to 3.36.3, which is not a release yet but it works.

https://github.com/Kyvis-Labs/ignition-apexcharts-module/releases/tag/1.0.12

nikolai-wolterstorff commented 1 year ago

1.0.12 and 1.0.13 results now in "Uncaught TypeError: Cannot destructure property 'series' of 'undefined' as it is undefined.". Here is the options.tooltip.y.formatter JS:

function (value, { series, seriesIndex, dataPointIndex, w }) {

var ret = value + '<br>';

if ("_tooltip_extra" in w.config.series[seriesIndex].data[dataPointIndex]) {
  var extra = w.config.series[seriesIndex].data[dataPointIndex]._tooltip_extra;
  for (var i=0; i<extra.length; i++) {
    ret += extra[i].label + ': ' + '<span style="font-weight: normal;">' + extra[i].value + '</span>';
    if (i!=extra.length-1) {ret += '<br>';}
  }
  ret += '<br>';
};

ret += 'Chart Time Range:'

return ret;
}
nikolai-wolterstorff commented 1 year ago

View export to reproduce: timeline.zip

traviscox commented 1 year ago

Wow, good find. Fixed that in 1.0.14:

https://github.com/Kyvis-Labs/ignition-apexcharts-module/releases/tag/1.0.14

traviscox commented 1 year ago

Actually, I didn't fix that properly. I don't think it was an issue with the module after all. You can still use 1.0.14. However, I don't think that function allows the other parameters { series, seriesIndex, dataPointIndex, w } in the function:

function(value, { series, seriesIndex, dataPointIndex, w }) { return value }

It works just fine if you remove that:

function(value) { return value }

I can use those parameters in different areas just not for tooltip.y.formatter.

nikolai-wolterstorff commented 1 year ago

That's weird, it shows in the docs you can (https://apexcharts.com/docs/options/tooltip/), and this worked in <= 1.0.10.

nikolai-wolterstorff commented 1 year ago

@traviscox Found a work-around for now. Using console.log(arguments.length), I noticed that arguments go from a length of 1 to 2. When it's 2, the 2nd is the "{ series, seriesIndex, dataPointIndex, w }" object.

options.tooltip.y.formatter:

function (value) {

console.log(value);
console.log(arguments.length);

if (arguments.length >= 2) {
    var keys = Object.keys(arguments[1]);
    console.log(keys);
}

return value;
}
willmt10 commented 1 year ago

Sounds like this may be an issue with ApexCharts and not the Ignition Module (Bullet 3 in this issue).

Never mind. For some reason I thought that post was 2022. Too old to be related.

traviscox commented 1 year ago

I did update the Apex Charts library. I wonder if there is some edge case here. Let me post this on their forums to see what I can find.

traviscox commented 6 months ago

Closed due to inactivity