Hover info is sticky on touch interfaces even after the source graph is changed
Chưa có ai nhận issue này.
- Ngôn ngữ chính
- JavaScript
- Star
- 18.3k
- Fork
- 2k
- Merge trung bình
- 2 ngày 12 giờ
- Pull request đã merge (30 ngày)
- 28
Mô tả
On touch interface, hover info displays when a data point is clicked. This is perfect. Although, the info seems to be sticky even after changing the source graph . I haven’t found a straightforward way to change this. I’ve tried using various parameters like clear_on_unhover, hoverData, hoverinfo, selectedpoints. Looks like the interaction gets captured as a click on touch so I tried to work with properties like clickData.
Below is a minimal working example and and some screenshots to illustrate. The app has a dropdown menu and an a graph. The graph changes with the dropdown selection. The hover info lingers even if the graph is change using the dropdown. Ideally, the label could disappear when the source graph is changed. This would be great for a touch interface friendly UX as the hover label is a nice way to pack in more info on a small display like mobile.
Thanks for looking into this! @Coding-with-Adam
# Import modules
import plotly.graph_objs as go
import dash
from dash import dcc
from dash import html
from dash.dependencies import Input, Output
# App layout
app = dash.Dash(__name__)
app.layout = html.Div([
dcc.Dropdown(
id='dropdown',
options=[
{'label': 'Graph 1', 'value': 1},
{'label': 'Graph 2', 'value': 2}
],
value=1
),
dcc.Store(id='click-data-store'),
dcc.Graph(id='graph')
])
# Dropdown graph callback
@app.callback(
Output('graph', 'figure'),
[Input('dropdown', 'value')]
)
def update_graph(selected_value):
figure = go.Figure()
if selected_value == 1:
figure.add_trace(go.Bar(x=['ABCT','DEFR','GHIP'], y=[4, 5, 6], name='Graph 1'))
elif selected_value == 2:
figure.add_trace(go.Bar(x=['JKWW','STVP','CXYZ'], y=[3, 10, 4], name='Graph 2'))
return figure
# Run app
if __name__ == '__main__':
app.run_server(debug=False, host="0.0.0.0", port=1005)
Hướng dẫn đóng góp
Bắt đầu từ đâu
- Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
- Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
- Fork repository và làm thay đổi trên một nhánh.
- Mở pull request có tham chiếu số hiệu của issue.
Hướng nghiên cứu
Bắt đầu bằng cách chạy ứng dụng Dash tối thiểu trong issue trên giao diện cảm ứng, chọn một điểm dữ liệu và thay đổi biểu đồ nguồn của dropdown. Theo dõi cách việc cập nhật biểu đồ tương tác với trạng thái click hoặc hover được ghi nhận; được xem là hoàn tất khi nhãn hover cũ biến mất lúc biểu đồ nguồn thay đổi mà không làm hỏng hành vi hover trên cảm ứng.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- javascript
- Lĩnh vực
- data-visualization, frontend
- Loại issue
- Lỗi
- Độ khó
- 4/5
- Thời gian dự kiến
- 3-5 ngày
- Mức độ hoạt động
- Đình trệ
- Độ rõ ràng
- Khá rõ ràng
- Mức phù hợp với người mới
- 35/100