DHIS2

Presenting data

1
2
3
4

Importing the UI Library

Because we initialized our application with the DHIS2 CLI we've already added the DHIS2 UI components to our project. But if this doesn't work, or you want to use these components in other projects you can download it with yarn.

yarn add @dhis2/ui

Finding the loading icon in Storybook

As mentioned in the previous section Storybook is a great tool for discovering UI components and learning how to implement them. The component we will be using is the CircularLoader. You can find this component on the left-hand side of Storybook in the "Feedback - Loading Indicators" Folder.

If you click on the docs tab in Storybook you will see everything you need to know in order to implement this in your program. Feel free to test the different properties you can send to the loading component.

Add the circular loader to Browse.js

You have to import the component and then display it when the useDataQuery hook is loading. It may only be visible for a split second or two, so try refreshing the page several times to make sure that it's showing correctly.

Solution

You should try to implement this component yourself before looking at the solution.

import React from 'react'
import { useDataQuery } from '@dhis2/app-runtime'
import { CircularLoader } from '@dhis2/ui'


const dataQuery = {
    dataSets: {
        resource: 'dataSets/aLpVgfXiz0f',
        params: {
            fields: [
                'name',
                'id',
                'dataSetElements[dataElement[id, displayName]',
            ],
        },
    },
    dataValueSets: {
        resource: 'dataValueSets',
        params: {
            orgUnit: 'KiheEgvUZ0i',
            dataSet: 'aLpVgfXiz0f',
            period: '2020',
        },
    },
}


function mergeData(data) {
    return data.dataSets.dataSetElements.map(d => {
        let matchedValue = data.dataValueSets.dataValues.find(dataValues => {
            if (dataValues.dataElement == d.dataElement.id) {
                return true
            }
        })


        return {
            displayName: d.dataElement.displayName,
            id: d.dataElement.id,
            value: matchedValue.value,
        }
    })
}


export function Browse() {
    const { loading, error, data } = useDataQuery(dataQuery)
    if (error) {
        return <span>ERROR: {error.message}</span>
    }


    if (loading) {
        return <CircularLoader large />
    }


    if (data) {
        let mergedData = mergeData(data)
        console.log(mergedData)
    }


    return <h1>Browse</h1>
}

Now that you've got the loading icon in place, let's add a table that presents the data from the API.

PrevNext