sbrugman
commented
2 years ago Quick wins
- Substantial part of the data for the plotly javascript is the layout. This is the same for the plots. Reusing the same layout reduced the total file size by 50% in my experiments. Templates may be used as best practise: https://plotly.com/python/templates/#saving-and-distributing-custom-themes.
- Reports are slow to render. This can be solved by lazy loading the rendering of the plots (visible only, or one feature at a time). One example solution is using jQuery https://github.com/morr/jquery.appear, but many similar options exist. Feature-wise, we could leverage the custom-js https://github.com/ing-bank/popmon/blob/master/popmon/visualization/templates/assets/js/custom-script.js.
Improvements
- The layout above should reflect a consistent style that is readable and clear (be sure to use the same yellow/red, which differs from the default).
- The hover text for the histograms are difficult to read due to the overlay. Use unified hover mode: https://plotly.com/python/hover-text-and-formatting/#unified-hovermode
- The heatmaps have little padding. The aspect-ratio could be set to square: https://plotly.com/python/heatmaps/#controlling-aspect-ratio, and/or padding should be added
- The toolbar for the plots should be simplified by removing redundant icons :https://stackoverflow.com/questions/56659593/how-to-remove-icons-in-plotly-dash-chart-tool-bar/56659783#56659783. At least the logo and lasso tool can be removed.
Follow-up features:
- By default, the plotly express JS could be integrally included in the HTML file. The CDN option could be a new feature, as bootstrap could also be hosted by a third party. (the
online_reportoption) - Cross filter functionality would be awesome, where selecting a time-window on one plot also updates the others, e.g. https://plotly.github.io/plotly.js-crossfilter.js/
closes ing-bank/popmon#164