diff --git a/packages/app/src/api/visualization.js b/packages/app/src/api/visualization.js index 665aa1dc2c..ac2fc5e08e 100644 --- a/packages/app/src/api/visualization.js +++ b/packages/app/src/api/visualization.js @@ -10,10 +10,26 @@ const visualizationQuery = { }, } +const visualizationsQuery = { + visualization: { + resource: 'visualizations', + params: ({ visualizationIds }) => ({ + filter: `id:in:[${visualizationIds}]`, + fields: ['id', 'type'], + }), + }, +} + export const apiFetchVisualization = (dataEngine, id) => { return dataEngine.query(visualizationQuery, { variables: { id } }) } +export const apiFetchVisualizations = (dataEngine, visualizationIds) => { + return dataEngine.query(visualizationsQuery, { + variables: { visualizationIds }, + }) +} + export const apiSaveVisualization = (dataEngine, visualization) => { const mutation = { type: 'create', diff --git a/packages/app/src/assets/AreaIcon.js b/packages/app/src/assets/AreaIcon.js index 7ccb84ed82..1c50c365e4 100644 --- a/packages/app/src/assets/AreaIcon.js +++ b/packages/app/src/assets/AreaIcon.js @@ -8,7 +8,7 @@ const AreaIcon = ({ - + @@ -16,7 +16,7 @@ const AreaIcon = ({ stroke="#1976D2" strokeWidth="2" fill="#63A4FF" - mask="url(#mask-2)" + mask="url(#mask-area-icon)" points="4 28 16 16 26.7935166 26.7935166 33.0558406 20.5311926 53 36 53 51 0 51 0 28" /> diff --git a/packages/app/src/assets/GlobeIcon.js b/packages/app/src/assets/GlobeIcon.js index 0fee7a68d3..660e4d6acd 100644 --- a/packages/app/src/assets/GlobeIcon.js +++ b/packages/app/src/assets/GlobeIcon.js @@ -20,7 +20,7 @@ const GlobeIcon = ({ > - + @@ -28,7 +28,7 @@ const GlobeIcon = ({ id="Oval-4" stroke="#1976D2" strokeWidth="2" - mask="url(#mask-2)" + mask="url(#mask-globe-icon)" cx="24" cy="24" r="23" @@ -37,28 +37,28 @@ const GlobeIcon = ({ id="Path-6" stroke="#1976D2" strokeWidth="2" - mask="url(#mask-2)" + mask="url(#mask-globe-icon)" points="1 21 4 24 8 26 9 24 6 19 11 18 18 12 14 9 16 6 15 3" /> diff --git a/packages/app/src/assets/LineIcon.js b/packages/app/src/assets/LineIcon.js index 22b339eaed..0ad45e2898 100644 --- a/packages/app/src/assets/LineIcon.js +++ b/packages/app/src/assets/LineIcon.js @@ -8,13 +8,13 @@ const LineIcon = ({ - + diff --git a/packages/app/src/assets/YearOverYearLineIcon.js b/packages/app/src/assets/YearOverYearLineIcon.js index 906af07656..0e51020c1f 100644 --- a/packages/app/src/assets/YearOverYearLineIcon.js +++ b/packages/app/src/assets/YearOverYearLineIcon.js @@ -8,25 +8,25 @@ const YearOverYearLineIcon = ({ - + diff --git a/packages/app/src/components/App.js b/packages/app/src/components/App.js index f1f9893f29..c089494293 100644 --- a/packages/app/src/components/App.js +++ b/packages/app/src/components/App.js @@ -32,6 +32,7 @@ export class App extends Component { state = { previousLocation: null, + initialLoadIsComplete: false, } /** @@ -99,7 +100,7 @@ export class App extends Component { fromActions.clearVisualization(store.dispatch, store.getState) fromActions.fromUi.acClearUiInterpretation(store.dispatch) } - + this.setState({ initialLoadIsComplete: true }) this.setState({ previousLocation: location.pathname }) } @@ -179,7 +180,9 @@ export class App extends Component {
- + {this.state.initialLoadIsComplete && ( + + )}
{this.props.ui.rightSidebarOpen && this.props.current && ( diff --git a/packages/app/src/components/Visualization/StartScreen.js b/packages/app/src/components/Visualization/StartScreen.js index 28cc909f4f..a11aa7629c 100644 --- a/packages/app/src/components/Visualization/StartScreen.js +++ b/packages/app/src/components/Visualization/StartScreen.js @@ -10,18 +10,38 @@ import { withStyles } from '@material-ui/core/styles' import { useDataEngine } from '@dhis2/app-runtime' import { VisualizationError } from '../../modules/error' import { GenericError } from '../../assets/ErrorIcons' +import { apiFetchVisualizations } from '../../api/visualization' +import { visTypeIcons } from '@dhis2/analytics' const StartScreen = ({ error, classes }) => { const [mostViewedVisualizations, setMostViewedVisualizations] = useState([]) - const engine = useDataEngine() useEffect(() => { - async function fetchData(engine) { - const result = await apiFetchMostViewedVisualizations(engine, 6) - setMostViewedVisualizations(result.visualization) + async function populateMostViewedVisualizations(engine) { + const mostViewedVisualizationsResult = await apiFetchMostViewedVisualizations( + engine, + 6 + ) + const visualizations = mostViewedVisualizationsResult.visualization + if (visualizations && visualizations.length) { + const visualizationsResult = await apiFetchVisualizations( + engine, + visualizations.map(vis => vis.id) + ) + const visualizationsWithType = + visualizationsResult.visualization.visualizations + const result = visualizations.map(vis => ({ + ...visualizationsWithType.find( + visWithType => visWithType.id === vis.id && visWithType + ), + ...vis, + })) + + setMostViewedVisualizations(result) + } } - fetchData(engine) + populateMostViewedVisualizations(engine) }, []) // eslint-disable-line react-hooks/exhaustive-deps const getContent = () => @@ -44,18 +64,29 @@ const StartScreen = ({ error, classes }) => { -
-

Most viewed charts and tables

- {mostViewedVisualizations.map((visualization, index) => ( -

history.push(`/${visualization.id}`)} - > - {visualization.name} -

- ))} -
+ {mostViewedVisualizations.length > 0 && ( +
+

+ Most viewed charts and tables +

+ {mostViewedVisualizations.map( + (visualization, index) => ( +

+ history.push(`/${visualization.id}`) + } + > + + {visTypeIcons[visualization.type]} + + {visualization.name} +

+ ) + )} +
+ )} ) diff --git a/packages/app/src/components/Visualization/styles/StartScreen.style.js b/packages/app/src/components/Visualization/styles/StartScreen.style.js index c668b5a1ea..9ba69d76c3 100644 --- a/packages/app/src/components/Visualization/styles/StartScreen.style.js +++ b/packages/app/src/components/Visualization/styles/StartScreen.style.js @@ -70,6 +70,8 @@ export default { marginBottom: '12px', }, visualization: { + display: 'flex', + alignItems: 'center', margin: '0 0 12px 0', padding: 0, letterSpacing: '0.1px', @@ -80,4 +82,11 @@ export default { textDecoration: 'underline', }, }, + visIcon: { + height: '16px', + '& svg': { + height: '16px', + marginRight: '8px', + }, + }, } diff --git a/packages/app/src/components/__tests__/App.spec.js b/packages/app/src/components/__tests__/App.spec.js index dd81f87925..9e440e72fd 100644 --- a/packages/app/src/components/__tests__/App.spec.js +++ b/packages/app/src/components/__tests__/App.spec.js @@ -2,7 +2,6 @@ import React from 'react' import { shallow } from 'enzyme' import { App } from '../App' import Snackbar from '../Snackbar/Snackbar' -import Visualization from '../Visualization/Visualization' import * as actions from '../../actions/' import history from '../../modules/history' @@ -73,10 +72,6 @@ describe('App', () => { expect(app().find('div').length).toBeGreaterThan(0) }) - it('renders Visualization component', () => { - expect(app().find(Visualization).length).toBeGreaterThan(0) - }) - it('renders a Snackbar', () => { const snackbar = app().find(Snackbar) expect(snackbar.length).toBeGreaterThan(0)