Multiple Dashboards / Dashboard Improvements #3011

Users should be able to create more than one dashboard.
In addition to that, it might be nice if a default dashboard could be set per website.

Following features need to be integrated:

• Option to create new dashboard and give it a name
• Option to rename current dashboard
• Option to set dashboard as default for currently choosen website
• Option to remove current dashboard
• Option to switch to another existing dashboard
• The dashboard should look good when "Widgetized", and multiple dashboard feature should work well

Nice to have:

• Option to make dashboard layout available for all users (super user only)
• Option to make current layout to the new default layout

Attachment:
bug dashboard menu disappears.png

Attachment: iframe mode menu bug
menu bug.png

That would be a very cool feature for sure!

Some suggestions/ideas:

• When user is not using the feature, it would be nice to keep the UI the same as it is now (not more complicated):
  • Maybe the feature to create new dashboard could be contained in the "Widgets & Dashboard" box?
  • and/or Maybe it could also be available via a discreet link in the Dashboard "sub menu", but on the right of the sub menu (rather than on left, which would be a distraction)?
• Renaming the dashboard "inline" would be nice to have for usability (but not required)
• When creating a new dashboard, there could be an option to create either a "Dashboard with default widgets" or "Blank dashboard"

(In [6027]) fixes #2979, refs #1915, refs #3011 completely refactored dashboard and widget javascripts (now using jquery plugins).
selected metrics in dashboard widgets are now stored in layout, too. also implemented some parts simplifying implementation of #3011 and #1915 and a small suggestion of #2461

• It would be great to check that the feature is well integrated in "Widgetize mode".

For example, CMS such as Wordpress, Drupal, could provide the Dashbard in an Iframe. The multiple dashboard feature would then be amazing to have, as it would directly make the CMS admin area "Piwik aware" just using an Iframe. It would allow to change the date, create several custom reports / dashboards... Along with the Visitor Log widget, this would make any integration of Piwik reports in other HTML softwares very easy, yet VERY useful!

• We could even allow a parameter that says "showDefaultDashboards" that would
  • create 2 or 3 custom dashboard that are related to:
  • Acquisition (referers, campaigns, websites, search)
  • Behavior: Visitors, engagegement
  • Outcomes (Goals, Actions)
  • Making these default dashboard available could help CMS integrators with a ready to use analytics solution available
  • See also other important widget: Visitor Log #3033

Hm. So it should be possible to switch the dashboard in widgetize mode? I currently thought about adding the available dashboards to the menu (as submenu auf "dashboard"). Within the menu it would be directly accessable from other pages aswell. Maybe we could find another solution for widgetize mode like a second dropdown with a list of available dashboards?

I think that it should also appear in the menu like we discussed, as this is the most space efficient and consistent UI.

But, is it possible somehow to also have this submenu show up in the Dashboard Embed iframe mode?

• Maybe when loading in frame, when menu is not there, the submenu code would be callable to display the dashboard names, without the submenu background color and main menu?
  • It would be nice to have the feature working out of the box for all users already using the dashboard. But, this is not required, we can also...
• Maybe add a new "Widget" altogether, that loads and displays the "Main Menu + Dashboard" by default? This way no need to refactor the code, we simply make a simple HTML export of the whole of Piwik..
  • the disadvantage is that it will make the integration more complex, since the menu is quite big, it might not look as good in wordpress/drupal/etc as the version without menu, but still could be useful!

This feature would make the CMS integration plugin easier to build for all external devs: just include the dashboard iframe, and "Real time visitor Log" iframe, and Piwik will be mostly integrated! ;)
what do you think?

Great job Stefan! looking forward to this feature :)

Nice touch on the arrow icon. Useful usbility improvements already...

(In [6142]) fixes #3065, refs #3011 initial version of multiple dashboard feature
refs #2857 fixed id collisions in modal confirm windows by using an role attribute instead of id

(In [6143]) refs #3011 added notification if loaded dashboard is empty

(In [6144]) refs #3011 added possibility to change the default dashboard layout

Excellent work! :) Here is my review:

UX/UI Review

• The CSS in the popover is red font, not very consistent. Could you maybe reuse existing css from the reporting UI, for example the font style used in the datatables? also there should be a bit more padding.
  • mouse cursor should not be "wait" outside of form INPUT. Normal pointer is OK.
  • "defaut dashboard" should be displayed first, then "Empty dashboard". Maybe vertical would be better rather than next to each other.
  • "No" should be "Cancel"
  • rename to "Empty dashboard, I will choose the widgets myself" and "Default dashboard:
• "Save dashboard as default" feature, I think should do something different and be renamed:
  • "Set this dashboard as dashboard to load by default" would move this dashboard to the first submenu position, and would automatically load this dashboard.
  • the current code in saveLayoutAsDefault() could maybe be "Save this Widgets layout as the layout used in other users default Dashboard" ?
  • These 2 features should not be in big blue letters. Maybe the could be in grey text?
• When I delete a dashboard, it reloads but stays on "Loading data..." the widgets of first dashboard are not loaded.
• When clicking on "Dashboard", the submenu is colored only after content is laoded. It should be highlighted orange as early as possible after click before display "Loading data..." before issuing http req :)
• When there is only one dashboard, the name should not be displayed in the submenu. Submenu should be blank.
  • Maybe on the far right side of submenu could be a link "Create a dashboard" that triggers the popover. This link could be in grey as to not distract from analysis?
  • When a new dashboard is created, or deleted, or renamed, the "Loading data..." should display on top of the widgets before the page reloads, to give user feedback the click worked
• When there is only one dashboard "Remove dashboard" and "Rename" options should not be displayed
• When clicking on "Widgets & Dashboard" menu, is it possible to have a smaller initial DIV width (for example width without the widget size, the DIV would expand when a widget is laoded at least once, then stay expanded)
• IFrame mode: very nice!
  • Similar to #3065 it would be nice if the dashboard load would also load the names of all dashboard and widgets of default dadshboard. This would allow to display the name of dashboard on first load which would look good. Currently the emtpy DIV is displayed and then filled with text.
  • For the currently selected dasbhaord, please put in bold orange text
  • Before each dashboard name, can you please put the square design elements? And put more space between each dashboard name (they are too close, hard to differentiate)
  • Please put the menu with dashboard names first, then the "Widgets & Dashboard" menu.
  • When there is only one dashboard, I propose to Not display the menu with dashboard names (similarly to the standard menu behavior). The menuw ith dashboard names only show if there are 2 or more dashboards.
• Very cool the notifications when the dashboard is empty! I love it...
  • When clicking "Reset dashboard", can you bypass the second popover and directly assume "Yes" when asking to reset to default widget layout

Code review

• Code in: getAllDashboards() and addMenus() is very similar and should b erefactored in one function to return all dashboard with friendly name
• Links in templates to rename/create/remove should be displayed if user is not anonymous

looking forward to seeing these few changes! This feature will have a big impact on users... I think it will really improve the "Dashboard widgetize" usage rate!!

(In [6151]) refs #3011 do not ask again if user chooses to reset the dashboard if it is empty

(In [6152]) refs #3011 small adjustments to create dashboard confirm

(In [6153]) refs #3011 display loading div if user performs an action like create, remove or reset

(In [6154]) refs #3011 fixed menu highlighting

(In [6156]) refs #3011 some more adjustments and code improvements

(In [6160]) refs #3011 changed layout of dashboard submenu, renamed default layout function

Great updates & very nice on putting dashboard stuff in a menu, I was already thinking this was necessary. NICE!

• Feedback: Manage dashboard sould not have "cursor" pointer as it's not clickable.

(In [6161]) refs #3011 fixed cursor

(In [6163]) refs #3011 fix notice.
@SteveG maybe this NOTICE could reveal something more?
for example, did we check this is compatible with the old dashboard format?

I guess the very old format used in piwik < 0.2.3 (like "Actions.getActions~Actions.getDownloads|UserCountry.getCountry|Referers.getSearchEngines") will be truncated by the php code. the js code would handle it. I would suggest to completly remove that legacy code (from js, too), as this format is very old. the format used before it was possible to change column layout should work.

(In [6173]) refs #3011 hide remove dashboard link if current dashboard is default dashboard (id=1)

(In [6178]) Refs #3011 #53 Small updates to english strings & ui

More feedback after testing:

• In "Dashboard rename" popover, I think it would be nice to display "The current dashboard is %s" above "Dashboard name [INPUT]"
• Also it would be nice if message "Are you sure you want to delete the current dashboard %s" had the dashboard name in it. I can see how some users would end up deleting the wrong dashboard.
• small bug: when clicking on "Dashboard" main menu, the first dashboard submenu is colored in orange only when the whole dashboard is loaded. Instead it should be highlighted
• Creating an empty dashboard does not work (it creates the dashboard with default widgets)

Bug:

• I created 4 or 5 dashboards
• Then deleted all of them until the last one
• then something interesting happens: the one dashboard left loads as expected, but once it's loaded, the "Dashboard" menu disappears completely (see screenshot)
• Instead it should not disappear :)
• When I create a new dashboard then, the menu re-appears showing both dashboards as expected

(In [6180]) Refs #3011 minor strings updates

Replying to SteveG:

I guess the very old format used in piwik < 0.2.3 (like "Actions.getActions~Actions.getDownloads|UserCountry.getCountry|Referers.getSearchEngines") will be truncated by the php code. the js code would handle it. I would suggest to completly remove that legacy code (from js, too), as this format is very old. the format used before it was possible to change column layout should work.

• Removing legacy code for very old format sounds good to me :)

(In [6186]) refs #3011 fixed main menu disappearing bug

(In [6187]) refs #3011 removed legacy code for old dashboard format

(In [6188]) refs #3011 fixed bug - creating empty dashboard

(In [6209]) refs #3011 fixed css for embedded dashboard if dashboard menu is empty

Great for recent fixes thanks! I think the feature now looks nearly perfect and SUPER useful... because in fact it's so many new features packed in such a few niceoptions! :)

I did a final check of the feature and here is the review.

Pending bugs

• the parameter idDashboard stays in the hash key when clicking on Actions>Pages for example
• when clicking on "Dashboard" main menu, the first dashboard submenu is colored in orange only when the dashboard http request is loaded. Instead the menu should be highlighted as early as possible when the menu is clicked (or even on click).
• When clicking on Dashboard1, then dashboard2, I notice the text moves slightly on the left. For example Dashboard1 is selected, bold and orange. Then click on dashboard2. dashboard 1 goes font-weight:normal shifting dashboard2 to the left a few pixels. Note: the problem also appears in teh Iframe embed mode where it looks worse because the whole menu offsets which is visible.
  • it is not critical, but it is really not ideal for UX, it feels like something happened by mistake ;)
  • Would it be possible to prevent this shifting? for example leaving the same Width to the element as they loaded initially or something else?
• Iframe mode: the menu "Widgets & Dashboard" would look better on the righ tof the Analytics menu. Because when users connect to piwik the analytics is always the most important so menu with custom dashboards is best on top-left position
  • When only one dashboard, it displays fine, but then is hidden when the menu is hovered.
• Iframe mode: If it's very easy to do, I think it would be good to have the calendar in the Dashboard output :)

UX Suggestions

• In "Dashboard rename" popover, I think it would be nice to display "The current dashboard is %s" above "Dashboard name [INPUT]"
• would be nice if "Are you sure you want to delete the current dashboard" had the dashboard name inside, to prevent users deleting the wrong dashboard.

Appart from these I can't think of anything to say.. really nice & well integrated in the current system.

Is it as good as you hoped it to be? ;)

(In [6225]) refs #3011 unset idDashboard param in url if user switches to another page

(In [6226]) refs #3011 added date selector to embedded dashboard

(In [6228]) refs #3011 fixes problem with menu highlight

(In [6229]) refs #3011 fixes bug with menu items flipping around on hover

(In [6230]) refs #3011 always display old dashboard name in rename dialog

(In [6232]) refs #3011 display current dashboards name in remove dialog

(In [6241]) refs #3011 fixes margin in embedded dashboard

I guess, most should be fixed now.
Regarding the menu position, I would prefer to leave the dashboards list on the right, as the width of that list might change and so the positions of the widget menu and date selector would change, too.

Great changes!

Feedback / Small issues:

• Click on a custom dashboard does not change the hash string, it stays at &idDashboard=1 but should be &idDashboard=2 to ensure users can restore custom dashboard.
• When removing the idDashboard from hash there is still a trailing & in the hash string. Then when clicking it keeps adding a & such as: &date=yesterday&&&idDashboard=1
• In iframe mode, the dashboard names are displayed outside of the menu (see screenshot)
• In popover to rename could pressing "Enter" also validate the popover? Pushing Enter key works in "Reset" and "Set as default" but not in the "Rename" popover

Appart from these last details it looks excellent... Kuddos!!

(In [6263]) refs #3011 fixes some css problems and bug with menu items flipping around on hover; added new empty template for embedded dashboard, as <html> markup was rendered twice in that case

(In [6265]) refs #3011 clean urls when removing params (also remove &)

(In [6266]) refs #3011 use empty layout only for dashboard

Great!!
It looks perfect now, should ticket be closed?

(In [6312]) refs #3011, refs #1353
Embed dashboard now works with token_auth, it is also possible to create new dashboards, change layout, and add any widget.
the sparklines also work.

Known bug:

• The graph metrics picker does not display on hover for unknown reason in embed dashboard

(In [6315]) refs #3011 fixes bug with graph metrics picker not working in embedded mode

Thanks for the fix!

I notice another thing: the ajax request for loading the custom dashboards and widgets are maybe not using the .queueAjax() helper? because clicking on another submenu should "cancel" the currently loading widgets and start the new requests

Also 'Loading data...' does not display when clicking on a custom dashboard

(In [6316]) Refs #3011 minor css changes

(In [6317]) refs #3011 use global queueAjaxRequest / abortQueueAjax methods for loading dashboards

(In [6318]) refs #3011 added missing loading data to embedded mode

Everything now looks perfect but I'll let you the pleasure of closing the ticket ok? ;-)

:)

Released RC4 on demo but the feature is broken! HELP please! :)

(In [6423]) refs #3011 fixed problem with loading dashboards

Sorry I introduced this bug. Thanks for the fix :)