feat: show most viewed saved AO (DHIS2-7835) (#547)

packages/app/src/api/mostViewedVisualizations.js

@@ -0,0 +1,12 @@
+const visualizationQuery = {
+    visualization: {
+        resource: 'dataStatistics/favorites',
+        params: {
+            eventType: 'VISUALIZATION_VIEW',
+            pageSize: 5,
+        },
+    },
+}
+
+export const apiFetchMostViewedVisualizations = engine =>
+    engine.query(visualizationQuery)

packages/app/src/components/Visualization/StartScreen.js

@@ -0,0 +1,83 @@
+import React, { useEffect, useState } from 'react'
+import { connect } from 'react-redux'
+import i18n from '@dhis2/d2-i18n'
+import styles from './styles/StartScreen.style'
+import { sGetLoadError } from '../../reducers/loader'
+import PropTypes from 'prop-types'
+import visualizationErrorImg from '../../assets/chart-error-graphic.png'
+import { apiFetchMostViewedVisualizations } from '../../api/mostViewedVisualizations'
+import history from '../../modules/history'
+import { withStyles } from '@material-ui/core/styles'
+import { useDataEngine } from '@dhis2/app-runtime'
+
+const StartScreen = ({ error, classes }) => {
+    const [mostViewedVisualizations, setMostViewedVisualizations] = useState([])
+
+    const engine = useDataEngine()
+
+    useEffect(() => {
+        async function fetchData(engine) {
+            const result = await apiFetchMostViewedVisualizations(engine)
+            setMostViewedVisualizations(result.visualization)
+        }
+        fetchData(engine)
+    }, [])
+
+    const getContent = () =>
+        error ? (
+            <div>
+                <img
+                    src={visualizationErrorImg}
+                    alt={i18n.t('Visualization error')}
+                />
+                <p style={styles.title}>{error}</p>
+            </div>
+        ) : (
+            <div>
+                <div style={styles.section}>
+                    <h3 style={styles.title}>Getting started</h3>
+                    <ul style={styles.guide}>
+                        <li style={styles.guideItem}>
+                            All dimensions that you can use to build
+                            visualizations are shown in the left sidebar
+                        </li>
+                        <li style={styles.guideItem}>
+                            Add dimensions to the layout above
+                        </li>
+                        <li style={styles.guideItem}>
+                            Double click a dimension to add or remove items
+                        </li>
+                    </ul>
+                </div>
+                <div style={styles.section}>
+                    <h3 style={styles.title}>Most viewed charts and tables</h3>
+                    {mostViewedVisualizations.map((visualization, index) => (
+                        <p
+                            key={index}
+                            className={classes.visualization}
+                            onClick={() => history.push(`/${visualization.id}`)}
+                        >
+                            {visualization.name}
+                        </p>
+                    ))}
+                </div>
+            </div>
+        )
+
+    return (
+        <div style={styles.outer}>
+            <div style={styles.inner}>{getContent()}</div>
+        </div>
+    )
+}
+
+StartScreen.propTypes = {
+    classes: PropTypes.object,
+    error: PropTypes.string,
+}
+
+const mapStateToProps = state => ({
+    error: sGetLoadError(state),
+})
+
+export default connect(mapStateToProps)(withStyles(styles)(StartScreen))

packages/app/src/components/Visualization/Visualization.js

@@ -16,7 +16,7 @@ import { acAddMetadata } from '../../actions/metadata'
 import { acSetChart } from '../../actions/chart'
 import { acSetLoadError } from '../../actions/loader'
 
-import BlankCanvas from './BlankCanvas'
+import StartScreen from './StartScreen'
 
 export class Visualization extends Component {
     constructor(props) {
@@ -86,7 +86,7 @@ export class Visualization extends Component {
         const { renderId } = this.state
 
         return !visConfig || error ? (
-            <BlankCanvas />
+            <StartScreen />
         ) : (
             <VisualizationPlugin
                 id={renderId}

packages/app/src/components/Visualization/__tests__/Visualization.spec.js

@@ -6,7 +6,7 @@ import {
     visConfigSelector,
     visFiltersSelector,
 } from '../Visualization'
-import BlankCanvas from '../BlankCanvas'
+import StartScreen from '../StartScreen'
 
 jest.mock('@dhis2/data-visualizer-plugin', () => () => <div />)
 
@@ -36,10 +36,10 @@ describe('Visualization', () => {
             shallowVisualization = undefined
         })
 
-        it('renders a BlankCanvas when error', () => {
+        it('renders a StartScreen when error', () => {
             props.error = 'there was a catastrophic error'
 
-            expect(vis().find(BlankCanvas).length).toEqual(1)
+            expect(vis().find(StartScreen).length).toEqual(1)
         })
 
         it('renders a VisualizationPlugin when no error and visConfig available', () => {

packages/app/src/components/Visualization/styles/StartScreen.style.js

@@ -0,0 +1,62 @@
+import { colors, spacers } from '@dhis2/ui-core'
+
+const error = {
+    fontWeight: 'bold',
+    marginTop: '30px',
+    lineHeight: '22px',
+}
+
+export default {
+    outer: {
+        display: 'flex',
+        justifyContent: 'center',
+        height: '100%',
+    },
+    inner: {
+        padding: `${spacers.dp16} ${spacers.dp24}`,
+        maxWidth: 600,
+        boxSizing: 'border-box',
+        color: colors.grey900,
+        position: 'relative',
+    },
+    title: {
+        ...error,
+        color: colors.grey700,
+        marginTop: 0,
+    },
+    description: {
+        ...error,
+        color: colors.grey500,
+    },
+    section: {
+        textAlign: 'left',
+        background: '#fff',
+        padding: 20,
+        marginBottom: 20,
+        borderRadius: 5,
+    },
+    guide: {
+        lineHeight: '18px',
+        letterSpacing: '0.1px',
+        listStylePosition: 'outside',
+        margin: '0 0 0 12px',
+        padding: '0 0 0 10px',
+    },
+    guideItem: {
+        fontSize: '14px',
+        lineHeight: '18px',
+        letterSpacing: '0.1px',
+        marginBottom: '12px',
+    },
+    visualization: {
+        margin: '0 0 12px 0',
+        padding: 0,
+        letterSpacing: '0.1px',
+        lineHeight: '16px',
+        cursor: 'pointer',
+        fontSize: '14px',
+        '&:hover': {
+            textDecoration: 'underline',
+        },
+    },
+}