Skip to content

Commit

Permalink
feat: implement info popover for dimensions (DHIS2-14774)
Browse files Browse the repository at this point in the history
  • Loading branch information
edoardo committed Oct 30, 2024
1 parent 5b5cea9 commit cb48b82
Show file tree
Hide file tree
Showing 14 changed files with 863 additions and 23 deletions.
79 changes: 62 additions & 17 deletions i18n/en.pot
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@ msgstr ""
"Content-Type: text/plain; charset=utf-8\n"
"Content-Transfer-Encoding: 8bit\n"
"Plural-Forms: nplurals=2; plural=(n != 1)\n"
"POT-Creation-Date: 2024-10-11T12:49:26.846Z\n"
"PO-Revision-Date: 2024-10-11T12:49:26.847Z\n"
"POT-Creation-Date: 2024-10-30T09:04:20.385Z\n"
"PO-Revision-Date: 2024-10-30T09:04:20.386Z\n"

msgid "view only"
msgstr "view only"
Expand Down Expand Up @@ -168,6 +168,66 @@ msgstr "Disaggregation"
msgid "No data"
msgstr "No data"

msgid "Expression"
msgstr "Expression"

msgid "Value type"
msgstr "Value type"

msgid "Aggregation type"
msgstr "Aggregation type"

msgid "Category combo"
msgstr "Category combo"

msgid "Data element groups"
msgstr "Data element groups"

msgid "Legend sets"
msgstr "Legend sets"

msgid "Zero is significant"
msgstr "Zero is significant"

msgid "True"
msgstr "True"

msgid "False"
msgstr "False"

msgid "Period type"
msgstr "Period type"

msgid "Data set elements"
msgstr "Data set elements"

msgid "Indicator type"
msgstr "Indicator type"

msgid "Annualized"
msgstr "Annualized"

msgid "Numerator"
msgstr "Numerator"

msgid "Denominator"
msgstr "Denominator"

msgid "Name"
msgstr "Name"

msgid "Code"
msgstr "Code"

msgid "Description"
msgstr "Description"

msgid "Created by"
msgstr "Created by"

msgid "Last updated"
msgstr "Last updated"

msgid "Search by data item name"
msgstr "Search by data item name"

Expand Down Expand Up @@ -322,12 +382,6 @@ msgstr "Close"
msgid "Rename {{fileType}}"
msgstr "Rename {{fileType}}"

msgid "Name"
msgstr "Name"

msgid "Description"
msgstr "Description"

msgid "Rename"
msgstr "Rename"

Expand Down Expand Up @@ -436,9 +490,6 @@ msgstr "Enter interpretation text"
msgid "Not available offline"
msgstr "Not available offline"

msgid "Created by"
msgstr "Created by"

msgid "Anyone"
msgstr "Anyone"

Expand All @@ -457,9 +508,6 @@ msgstr "Filter by name"
msgid "Created"
msgstr "Created"

msgid "Last updated"
msgstr "Last updated"

msgid "Type"
msgstr "Type"

Expand Down Expand Up @@ -627,9 +675,6 @@ msgstr "Select a group"
msgid "Deselect all"
msgstr "Deselect all"

msgid "Period type"
msgstr "Period type"

msgid "Year"
msgstr "Year"

Expand Down
39 changes: 39 additions & 0 deletions src/components/DataDimension/Info/CalculationInfo.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import { useDataQuery } from '@dhis2/app-runtime'
import PropTypes from 'prop-types'
import React from 'react'
import i18n from '../../../locales/index.js'
import { getCommonFields, InfoTable } from './InfoTable.js'
import styles from './styles/InfoPopover.style.js'

const calculationQuery = {
calculation: {
resource: 'expressionDimensionItems',
id: ({ id }) => id,
params: ({ displayNameProp }) => ({
fields: `${getCommonFields(displayNameProp)},expression`,
}),
},
}

export const CalculationInfo = ({ id, displayNameProp }) => {
const { loading, error, data } = useDataQuery(calculationQuery, {
variables: { id, displayNameProp },
})

return (
<>
<InfoTable data={data?.calculation} loading={loading} error={error}>
<tr>
<th>{i18n.t('Expression')}</th>
<td className="code">{data?.calculation.expression}</td>
</tr>
</InfoTable>
<style jsx>{styles}</style>
</>
)
}

CalculationInfo.propTypes = {
displayNameProp: PropTypes.string,
id: PropTypes.string,
}
81 changes: 81 additions & 0 deletions src/components/DataDimension/Info/DataElementInfo.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
import { useDataQuery } from '@dhis2/app-runtime'
import PropTypes from 'prop-types'
import React from 'react'
import i18n from '../../../locales/index.js'
import { getCommonFields, InfoTable } from './InfoTable.js'
import styles from './styles/InfoPopover.style.js'

const dataElementQuery = {
dataElement: {
resource: 'dataElements',
id: ({ id }) => id,
params: ({ displayNameProp }) => ({
fields: `${getCommonFields(
displayNameProp
)},valueType,aggregationType,zeroIsSignificant,categoryCombo[id,displayName],legendSets[id,displayName],dataElementGroups[id,displayName]`,
}),
},
}

export const DataElementInfo = ({ id, displayNameProp }) => {
const { loading, error, data } = useDataQuery(dataElementQuery, {
variables: { id, displayNameProp },
})

return (
<>
<InfoTable data={data?.dataElement} loading={loading} error={error}>
<tr>
<th>{i18n.t('Value type')}</th>
<td>{data?.dataElement.valueType}</td>
</tr>
<tr>
<th>{i18n.t('Aggregation type')}</th>
<td>{data?.dataElement.aggregationType}</td>
</tr>
<tr>
<th>{i18n.t('Category combo')}</th>
<td>{data?.dataElement.categoryCombo.displayName}</td>
</tr>
<tr>
<th>{i18n.t('Data element groups')}</th>
<td>
<ul>
{data?.dataElement.dataElementGroups.map(
({ id, displayName }) => (
<li key={id}>{displayName}</li>
)
)}
</ul>
</td>
</tr>
<tr>
<th>{i18n.t('Legend sets')}</th>
<td>
<ul>
{data?.dataElement.legendSets.map(
({ id, displayName }) => (
<li key={id}>{displayName}</li>
)
)}
</ul>
</td>
</tr>
<tr>
<th>{i18n.t('Zero is significant')}</th>
<td>
{data?.dataElement.zeroIsSignificant
? i18n.t('True')
: i18n.t('False')}
</td>
</tr>
</InfoTable>
<style jsx>{styles}</style>
</>
)
}

DataElementInfo.propTypes = {
displayNameProp: PropTypes.string,
id: PropTypes.string,
}
55 changes: 55 additions & 0 deletions src/components/DataDimension/Info/DataSetInfo.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
import { useDataQuery } from '@dhis2/app-runtime'
import PropTypes from 'prop-types'
import React from 'react'
import i18n from '../../../locales/index.js'
import { getCommonFields, InfoTable } from './InfoTable.js'
import styles from './styles/InfoPopover.style.js'

const dataSetQuery = {
dataSet: {
resource: 'dataSets',
id: ({ id }) => id,
params: ({ displayNameProp }) => ({
fields: `${getCommonFields(
displayNameProp
)},periodType,dataSetElements[dataElement[id,displayName]]`,
}),
},
}

export const DataSetInfo = ({ id, displayNameProp }) => {
const { loading, error, data } = useDataQuery(dataSetQuery, {
variables: { id, displayNameProp },
})

return (
<>
<InfoTable data={data?.dataSet} loading={loading} error={error}>
<tr>
<th>{i18n.t('Period type')}</th>
<td>{data?.dataSet.periodType}</td>
</tr>
<tr>
<th>{i18n.t('Data set elements')}</th>
<td>
<ul>
{data?.dataSet.dataSetElements.map(
({ dataElement }) => (
<li key={dataElement.id}>
{dataElement.displayName}
</li>
)
)}
</ul>
</td>
</tr>
</InfoTable>
<style jsx>{styles}</style>
</>
)
}

DataSetInfo.propTypes = {
displayNameProp: PropTypes.string,
id: PropTypes.string,
}
Loading

0 comments on commit cb48b82

Please sign in to comment.