Skip to content

Commit

Permalink
fix: info popover style and content adjustments
Browse files Browse the repository at this point in the history
  • Loading branch information
@cooper-joe
cooper-joe committed Nov 19, 2024
1 parent 3edb797 commit f0d6374
Show file tree
Hide file tree
Showing 6 changed files with 187 additions and 87 deletions.
9 changes: 7 additions & 2 deletions src/components/DataDimension/Info/CalculationInfo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,8 +57,13 @@ export const CalculationInfo = ({ id, displayNameProp }) => {
<tr>
<th>{i18n.t('Expression description')}</th>
<td>
{data?.calculation.humanReadableExpression ||
i18n.t('None')}
{data?.calculation.humanReadableExpression ? (
<span className="code">
{data.calculation.humanReadableExpression}
</span>
) : (
<span className="none">{i18n.t('None')}</span>
)}
</td>
</tr>
</InfoTable>
Expand Down
38 changes: 22 additions & 16 deletions src/components/DataDimension/Info/DataSetInfo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,15 +36,17 @@ export const DataSetInfo = ({ id, displayNameProp }) => {
data.dataSet.dataSetElements[0].dataElement
.displayName
) : (
<ul>
{data?.dataSet.dataSetElements.map(
({ dataElement }) => (
<li key={dataElement.id}>
{dataElement.displayName}
</li>
)
)}
</ul>
<div className="content-wrap">
<ul>
{data?.dataSet.dataSetElements.map(
({ dataElement }) => (
<li key={dataElement.id}>
{dataElement.displayName}
</li>
)
)}
</ul>
</div>
)}
</td>
</tr>
Expand All @@ -53,14 +55,18 @@ export const DataSetInfo = ({ id, displayNameProp }) => {
<td>
{data?.dataSet.indicators.length === 1 ? (
data.dataSet.indicators[0].displayName
) : data?.dataSet.indicators.length > 1 ? (
<div className="content-wrap">
<ul>
{data.dataSet.indicators.map(
({ id, displayName }) => (
<li key={id}>{displayName}</li>
)
)}
</ul>
</div>
) : (
<ul>
{data?.dataSet.indicators.map(
({ id, displayName }) => (
<li key={id}>{displayName}</li>
)
)}
</ul>
<span className="none">{i18n.t('None')}</span>
)}
</td>
</tr>
Expand Down
72 changes: 47 additions & 25 deletions src/components/DataDimension/Info/IndicatorInfo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,8 +74,16 @@ export const IndicatorInfo = ({ id, displayNameProp }) => {
<tr>
<th>{i18n.t('Numerator expression')}</th>
<td>
{data?.indicator.humanReadableNumeratorExpression ||
i18n.t('None')}
{data?.indicator.humanReadableNumeratorExpression ? (
<span className="code">
{
data.indicator
.humanReadableNumeratorExpression
}
</span>
) : (
<span className="none">{i18n.t('None')}</span>
)}
</td>
</tr>
<tr>
Expand All @@ -85,8 +93,16 @@ export const IndicatorInfo = ({ id, displayNameProp }) => {
<tr>
<th>{i18n.t('Denominator expression')}</th>
<td>
{data?.indicator.humanReadableDenominatorExpression ||
i18n.t('None')}
{data?.indicator.humanReadableDenominatorExpression ? (
<span className="code">
{
data.indicator
.humanReadableDenominatorExpression
}
</span>
) : (
<span className="none">{i18n.t('None')}</span>
)}
</td>
</tr>
<tr>
Expand Down Expand Up @@ -114,13 +130,15 @@ export const IndicatorInfo = ({ id, displayNameProp }) => {
{data.indicator.dataSets.length === 1 ? (
data.indicator.dataSets[0].displayName
) : (
<ul>
{data.indicator.dataSets.map(
({ id, displayName }) => (
<li key={id}>{displayName}</li>
)
)}
</ul>
<div className="content-wrap">
<ul>
{data.indicator.dataSets.map(
({ id, displayName }) => (
<li key={id}>{displayName}</li>
)
)}
</ul>
</div>
)}
</td>
</tr>
Expand All @@ -131,13 +149,15 @@ export const IndicatorInfo = ({ id, displayNameProp }) => {
{data?.indicator.indicatorGroups.length === 1 ? (
data.indicator.indicatorGroups[0].displayName
) : (
<ul>
{data?.indicator.indicatorGroups.map(
({ id, displayName }) => (
<li key={id}>{displayName}</li>
)
)}
</ul>
<div className="content-wrap">
<ul>
{data?.indicator.indicatorGroups.map(
({ id, displayName }) => (
<li key={id}>{displayName}</li>
)
)}
</ul>
</div>
)}
</td>
</tr>
Expand All @@ -148,13 +168,15 @@ export const IndicatorInfo = ({ id, displayNameProp }) => {
{data.indicator.legendSets.length === 1 ? (
data.indicator.legendSets[0].displayName
) : (
<ul>
{data.indicator.legendSets.map(
({ id, displayName }) => (
<li key={id}>{displayName}</li>
)
)}
</ul>
<div className="content-wrap">
<ul>
{data.indicator.legendSets.map(
({ id, displayName }) => (
<li key={id}>{displayName}</li>
)
)}
</ul>
</div>
)}
</td>
</tr>
Expand Down
24 changes: 21 additions & 3 deletions src/components/DataDimension/Info/InfoTable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,16 +37,34 @@ export const InfoTable = ({ data, error, loading, children }) => {
<tr>
<th>{i18n.t('Description')}</th>
<td>
{data.displayDescription || i18n.t('None')}
{data.displayDescription ? (
<div className="content-wrap">
{data.displayDescription}
</div>
) : (
<span className="none">
{i18n.t('None')}
</span>
)}
</td>
</tr>
<tr>
<th>{i18n.t('Code')}</th>
<td>{data.code}</td>
<td>
{data.code ? (
data.code
) : (
<span className="none">
{i18n.t('None')}
</span>
)}
</td>
</tr>
<tr>
<th>{i18n.t('ID')}</th>
<td>{data.id}</td>
<td>
<span className="code">{data.id}</span>
</td>
</tr>
<tr>
<th>{i18n.t('Last updated date')}</th>
Expand Down
87 changes: 51 additions & 36 deletions src/components/DataDimension/Info/ProgramIndicatorInfo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,45 +87,58 @@ export const ProgramIndicatorInfo = ({ id, displayNameProp }) => {
<tr>
<th>{i18n.t('Analytics period boundaries')}</th>
<td>
<ul>
{data?.programIndicator.analyticsPeriodBoundaries.map(
({
analyticsPeriodBoundaryType,
boundaryTarget,
id,
offsetPeriodType,
offsetPeriods,
}) => (
<li key={id}>
<span>{`${i18n.t(
'Type'
)}: ${analyticsPeriodBoundaryType}`}</span>
<span>{`${i18n.t(
'Target'
)}: ${boundaryTarget}`}</span>
{offsetPeriods && offsetPeriodType && (
<div className="content-wrap">
<ul>
{data?.programIndicator.analyticsPeriodBoundaries.map(
({
analyticsPeriodBoundaryType,
boundaryTarget,
id,
offsetPeriodType,
offsetPeriods,
}) => (
<li key={id}>
<span>{`${i18n.t(
'Offset'
)}: ${offsetPeriodType} x ${offsetPeriods}`}</span>
)}
</li>
)
)}
</ul>
'Type'
)}: ${analyticsPeriodBoundaryType}`}</span>
<span>{`${i18n.t(
'Target'
)}: ${boundaryTarget}`}</span>
{offsetPeriods &&
offsetPeriodType && (
<span>{`${i18n.t(
'Offset'
)}: ${offsetPeriodType} x ${offsetPeriods}`}</span>
)}
</li>
)
)}
</ul>
</div>
</td>
</tr>
<tr>
<th>{i18n.t('Expression')}</th>
<td>
{data?.programIndicator.humanReadableExpression ||
i18n.t('None')}
{data?.programIndicator.humanReadableExpression ? (
<span className="code">
{data.programIndicator.humanReadableExpression}
</span>
) : (
<span className="none">{i18n.t('None')}</span>
)}
</td>
</tr>
<tr>
<th>{i18n.t('Filter expression')}</th>
<th>{i18n.t('Filter')}</th>
<td>
{data?.programIndicator.humanReadableFilter ||
i18n.t('None')}
{data?.programIndicator.humanReadableFilter ? (
<span className="code">
{data.programIndicator.humanReadableFilter}
</span>
) : (
<span className="none">{i18n.t('None')}</span>
)}
</td>
</tr>
<tr>
Expand All @@ -145,13 +158,15 @@ export const ProgramIndicatorInfo = ({ id, displayNameProp }) => {
{data.programIndicator.legendSets.length === 1 ? (
data.programIndicator.legendSets[0].displayName
) : (
<ul>
{data.programIndicator.legendSets.map(
({ id, displayName }) => (
<li key={id}>{displayName}</li>
)
)}
</ul>
<div className="content-wrap">
<ul>
{data.programIndicator.legendSets.map(
({ id, displayName }) => (
<li key={id}>{displayName}</li>
)
)}
</ul>
</div>
)}
</td>
</tr>
Expand Down
44 changes: 39 additions & 5 deletions src/components/DataDimension/Info/styles/InfoPopover.style.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,23 +18,57 @@ export default css`
width: 100%;
border-collapse: collapse;
font-size: 13px;
line-height: 17px;
margin: ${spacers.dp4} 0 0 0;
color: ${colors.grey900};
}
.data-table th {
text-align: left;
font-weight: 500;
padding: 6px 0 0 12px;
padding: 8px 0 8px 12px;
width: 128px;
vertical-align: baseline;
vertical-align: top;
}
.data-table td {
padding: 6px 4px 6px 8px;
padding: 8px 4px 8px 16px;
vertical-align: top;
}
.data-table .code {
font-family: monospace;
.data-table .content-wrap {
max-height: 240px;
overflow-y: auto;
}
.data-table tr:hover {
background: ${colors.grey100};
}
ul {
margin: 0;
padding: 0;
list-style: inside;
}
li + li {
margin: ${spacers.dp4} 0 0 0;
}
details ul {
margin: ${spacers.dp4} 0 0 ${spacers.dp16};
}
.data-table .code {
font-size: 11px;
line-height: 15px;
display: inline-block;
border-radius: 2px;
background-color: ${colors.grey200};
// Use outline to give illusion of padding while keeping text aligned vertically with other values
outline: 3px solid ${colors.grey200};
color: ${colors.grey900};
font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo,
Consolas, 'DejaVu Sans Mono', monospace;
font-weight: normal;
}
.data-table .none {
color: ${colors.grey600};
}
`

0 comments on commit f0d6374

Please sign in to comment.