Mobile dashboard interface

[josh-griffin]

Description

@andreievg @mark-prins @diegoevangelisti @sworup @Chris-Petty

Continuation/rewrite of the Mobile dashboard interface started in 2018.

Context

Ivory Coast require reporting in mobile. Other countries are interested in mobile having a dashboard in mobile. Win win!

Resources

• Feature Branch: https://github.com/openmsupply/mobile/tree/feature/dashboard
• Project board: https://github.com/openmsupply/mobile/projects/8?add_cards_query=is%3Aopen
• Related desktop issue: https://github.com/sussol/msupply/issues/2179
• ZIP of GIF/Pics of the current/old mobile dashboard: MobileDashboard.zip
• Related wiki documentation: here and here

Design discussion

Interface

• The interface for the dashboard was written a year ago Built in reports/dashboard from synced reports and feedback to the user #441.
• Just going to go with this interface, mainly due to time constraints. Can iterate and polish as we move forward.
• This branch is very old and not in a mergeable state. The best way forward is to create a new branch, reusing code where possible.
• This uses VictoryCharts
• Old branch here: https://github.com/openmsupply/mobile/tree/%23441-dashboard

Backend

• The reports are generated on the primary which are reports from the "old" dashboard here and here
• The discussion on the desktop backend is here

Mobile side

• Mobile will be receiving reports via JSON which are precalculated.
• Mobile will store these records as a Report record.

• Where data is the report stringified JSON for a report

Implementation

• Add dependecies, victory chart etc
  • ISSUE: Dashboard dependencies #1706
  • PR: #1706 Add Dashboard dependencies #1717
• Add demo data
  • ISSUE: Dashboard demo data #1707
  • PR: #1707 Add demo data for dashboard #1753
• Add Report class to realm schema
  • ISSUE: Add Report class to realm schema #1708
  • PR: #1708 Report class added to Realm schema #1722
• Add Report getters and setters
  • ISSUE: Add Report class getters and setters #1709
  • PR: #1709 Add report class getters and setters #1723
• Add Report to incomingSyncUtils
  • ISSUE: Add Report to incomingSyncUtils #1710
  • PR: #1710 Add Report to incoming sync utils #1725
• Add dashboard Localization
  • ISSUE: Dashboard localization  #1711
  • PR: #1711 Dashboard localization #1865
• Add Dashboard button to MenuPage
  • ISSUE: Dashboard button on MenuPage #1712
  • PR: #1712 Dashboard button on Menu Page #1731
• Add PieChart component
  • ISSUE: ReportChart component #1713
  • PR: PieChart component #1740
• Add LineChart component
  • ISSUE: LineChart component  #1742
  • PR: #1742 Create Line chart component #1747
• Add BarChart component
  • ISSUE: BarChart component #1741
  • PR: #1741 Create BarChart component #1752
• Add ReportRow component
  • ISSUE: Create ReportRow component #1754
  • PR: #1754 Create ReportRow component #1757
• Add ReportCell component
  • ISSUE: Create ReportCell component #1755
  • PR: #1755 Create ReportCell component #1756
• Add ReportTable component
  • ISSUE: ReportTable component #1744
  • PR: #1744 Create ReportTable component #1758
• Add ReportChart component
  • ISSUE: ReportChart component #1713
  • PR: #1713 Create ReportChart component #1760
• Add ReportSideBar component
  • ISSUE: ReportSideBar component #1714
  • PR: #1714 Create ReportSideBar component #1763
• Add DashboardPage component
  • ISSUE: DashboardPage component #1716
  • PR: #1716 Crete DashboardPage component #1764
• Add Dashboard Reducer
  • ISSUE: Dashboard Reducer #1715
  • PR: #1715 Dashboard Reducer #1819
• Placeholder screen when no dashboard reports
  • ISSUE: Placeholder screen when no dashboard reports #1847
  • PR:
• Add docs string for all files added in feature/Dashboard
  • ISSUE: Add docs string for all files added in feature/Dashboard #1745
  • PR: #1745 Add docs strings for feature/dashboard new files #1932

[diegoevangelisti]

Great job @joshxg, thanks for that. I will start working on this right now, issues from top to bottom.

[andreievg]

@diegoevangelisti, this is the widget that was used in vaccine module, might get some inspiration from it: https://github.com/openmsupply/mobile/blob/vaccine-development/src/widgets/VaccineChart.js

[diegoevangelisti]

@diegoevangelisti, this is the widget that was used in vaccine module, might get some inspiration from it: https://github.com/openmsupply/mobile/blob/vaccine-development/src/widgets/VaccineChart.js

Thanks, pretty useful indeed!

[josh-griffin]

Thanks @diegoevangelisti

#1924 is merged.

Going to keep this open as we do still need:

1. Test cases
2. Documentation (See desktop draft docs here: https://docs.msupply.org.nz/playground:2020-01_sworup_dashboard )
3. Remove the test data file

[diegoevangelisti]

This is all good news. Thanks to you @joshxg!

[josh-griffin]

Fantastic! Thanks @diegoevangelisti this has been merged and released