**Use case**
On a dashboard, I’m looking at chart A, where there is a spike. I want to see 
if it happens at the same time as a dip in charts B and C on that dashboard.

Suggestion: Hovering over chart A at position X produces a visual indicator 
(e.g. a vertical line) on all other charts at position X. The tooltip for that 
position is also displayed with X, Y information for all the charts. This 
method of showing time correlated events visually will be called Visual 
Correlation (VC).

**Scope**
For the initial release of this feature, the following scope is proposed.

- Visual Correlation only works between Time Series charts on a dashboard.
- Time granularity of the charts should be same e.g. week, day, hour etc. for 
VC to work.

**Mock View**
Below is a mock view of VC at work. Note that the 3 time series charts all have 
the same time granularity (year) and the guide line and tooltip all show up for 
the same year on all 3 charts.

![visual correlation between charts on a 
dashboard](https://user-images.githubusercontent.com/31935303/45866055-624d9200-bd34-11e8-9bc8-07e35e6569f7.jpg)

**UI Design**
TBD
Some things to consider:
We probably want a dashboard button that enables/disables VC.

**Proposed Architecture**
The idea here is to build a bi-directional Chart <---> Dashboard dispatch 
system. This will be a Publisher-Subscriber architecture, where the source 
chart (being hovered on) is the publisher, the dashboard is the broker, and the 
destination charts are the subscribers. A proposed flow of events is outlined 
below. 

**Proposed Development**
When a mouse is hovered over a specific chart,  the elementMousemove event 
dispatch is triggered and a handler function is called. We will override this 
dispatch to instead dispatch on a custom mouseMoveHandler function.
The custom mouseMoveHandler function calls the original handler function and an 
additional setHover function with a hoverPosition arg. The setHover function 
propagates all the way to dashboardState.
If we MapStateToProps in ChartContainer.jsx, we can pass hoverPosition state as 
a prop to Chart.jsx.
When a time series Chart receives a change in hoverPosition prop, it will call 
a renderGuideline function and pass the hoverPosition arg, which  will draw the 
guideline.
Additionally time series Charts will also need to enable tooltip and position 
the tooltip at the correct position with the x,y values. (need to figure out 
how to do this)

**Github working branch**
https://github.com/tc-dc/superset/tree/jrahman/VisualCorrelation


[ Full content available at: 
https://github.com/apache/incubator-superset/issues/5955 ]
This message was relayed via gitbox.apache.org for [email protected]

Reply via email to