Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Chart crashes while hovering mouse when x-axis is datetime #7357

Open
yoshiokatsuneo opened this issue Mar 3, 2025 · 2 comments
Open

Chart crashes while hovering mouse when x-axis is datetime #7357

yoshiokatsuneo opened this issue Mar 3, 2025 · 2 comments

Comments

@yoshiokatsuneo
Copy link
Contributor

yoshiokatsuneo commented Mar 3, 2025

Issue Summary

Redash chart crashes while hovering mouse when x-axis value is datetime.

Steps to Reproduce

  1. Create a following query (on QueryResult datasource, for example.)
with tbl as (
    select DATE('2025-02-01') as t, 0 as grp, 1 as cnt
    union all
    select DATE('2025-03-02') as t, 2 as grp, 2 as cnt
    union all
    select DATE('2025-03-03') as t, 8 as grp, 7 as cnt
)
select * from tbl
Image
  1. Create line chart with grouping.
Image
  1. Hover mouse on the chart and move between "2025-03-02" and "2025-03-03".
Image
  1. Redash UI crashes.

Error message:
"It seems like we encountered an error. Try refreshing this page or contact your administrator."

Image

Chrome console shows following error

TypeError: Cannot read properties of null (reading 'textContent')
    at Z.text (d3.js:788:15)
    at t.convertToTspans (svg_text_utils.js:30:24)
    at Z.call (d3.js:975:14)
    at SVGGElement.<anonymous> (hover.js:1162:18)
    at d3.js:962:16
    at pe (d3.js:968:30)
    at Z.each (d3.js:961:12)
    at A (hover.js:1111:17)
    at hover.js:725:23
    at hover.js:80:22
Image

Technical details:

  • Redash Version: 25.03.0-dev (3275a9e)
  • Browser/OS: Chrome / Mac OS
  • How did you install Redash: built from source code.

The cause of the error

When x-axis is datetime, the label is shown like "May 2, 2025" including white space.

But, plotly.js(verion 1) uses the value before the first space as the key of the label.

https://github.com/plotly/plotly.js/blob/v1.58.5/src/components/fx/hover.js#L783

var commonAttr = hovermode.charAt(0) === 'y' ? 'yLabel' : 'xLabel';
var t0 = c0[commonAttr];
var t00 = (String(t0) || '').split(' ')[0];
...

    function filterClosePoints(hoverData) {
        return hoverData.filter(function(d) {
            return (d.zLabelVal !== undefined) ||
                (d[commonAttr] || '').split(' ')[0] === t00;
        });
    }

This makes plotly.js unstable, and cause exception.

I think upgrading plotly.js to version 2 or 3 will solve the issue.

@stetizu1
Copy link

stetizu1 commented Mar 4, 2025

+1 having the same issue

Image

@yoshiokatsuneo
Copy link
Contributor Author

I created a PR to fix the issue by upgrading plotly.js.
#7359

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants