Reorganize and integrate dashboard charts / widgets

[brylie]

When filtering the dashboard via the overview chart, the line chart does not update. Determine how to update the line chart, and/or replace the line chart with an integrated chart.

Additionally, the line chart behaves strangely, and may not be an optimal choice for visualizing the time-series data.

Wireframe

Inspiration

The basic idea of the updated dashboard layout follows:

“Overview first, zoom and filter, then details on demand.”
Ben Schneiderman, “The eyes have it: A task by data type taxonomy for information visualization”
Visual Languages, 1996

Definition of done

• Move overview chart to top of dashboard.
• Add barchart below overview chart, in place of linechart.
• Ensure barchart is filtered when overview chart changes, e.g. when user interacts with it.
• Ensure table and heatmap are filtered, when user interacts with barchart.

[bajiat]

@frenchbread Could you consider taking this task?

[frenchbread]

@bajiat Sure. Self-assigned this task.

[brylie]

@frenchbread what is the status of this task?

[frenchbread]

Task is half-done. Regarding definition of done, so far charts, replacement are done as well as implemented bar chart instead of line chart.

"Dynamic filtering of a chart when user selects specific range on the overview chart" - is still to be done. I've spent hours of trying to debug this issue to have it working. At the same time I have no idea what can cause it.
Widgets like map, datatable do work as expected when overview chart is filtered. But the second dc chart does not.

Possible solutions: I am going to raise a support request at https://github.com/dc-js/dc.js.
@brylie, probably you could try to look at the issue as well and even note what am I missing. (The breaking point was when we moved from regular code to function-based code).

For reference:

Working branch - dashboard-charts-reorganization

[bajiat]

@frenchbread Have you opened up the support request or have you had any other progress?

[frenchbread]

@bajiat Not yet. Still trying to solve it myself.

The thing is that I am pretty sure that this issue is happening NOT on dc.js side, but somewhere in the code structure. Need more time. Probably I'll have to rewrite it one more time.

@brylie If you have time, could you please look into this issue? Would be helpful to hear your opinion.

[brylie]

Damir,
Try bringing all your template code into a single template. That way the
template instance variables will be accessible to any related sections
of the dashboard.

--Brylie

On 28.09.2015 16:55, Damir Mustafin wrote:

@bajiat https://github.com/bajiat Not yet. Still trying to solve it
myself.

The thing is that I am pretty sure that this issue is happening NOT on
dc.js side, but somewhere in the code structure. Need more time.
Probably I'll have to rewrite it one more time.

@brylie https://github.com/brylie If you have time, could you please
look into this issue? Would be helpful to hear your opinion.

—
Reply to this email directly or view it on GitHub
https://github.com/apinf/api-umbrella-dashboard/issues/384#issuecomment-143749859.

[frenchbread]

@brylie Finally got it working! Had to add a function that manually forced dc bar chart to refresh.

[frenchbread]

PR #494 created.