task: single value chart type

packages/app/i18n/en.pot

@@ -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: 2019-07-02T11:48:24.367Z\n"
-"PO-Revision-Date: 2019-07-02T11:48:24.367Z\n"
+"POT-Creation-Date: 2019-07-08T08:57:31.844Z\n"
+"PO-Revision-Date: 2019-07-08T08:57:31.844Z\n"
 
 msgid "Rename successful"
 msgstr ""
@@ -37,6 +37,11 @@ msgstr ""
 msgid "Update"
 msgstr ""
 
+msgid ""
+"'Single Value' can only show one data item. The first data item is "
+"automatically selected."
+msgstr ""
+
 msgid "Hide"
 msgstr ""
 
@@ -91,7 +96,10 @@ msgstr ""
 msgid "Interpretations"
 msgstr ""
 
-msgid "selected"
+msgid "{{total}} of 1 selected"
+msgstr ""
+
+msgid "{{total}} selected"
 msgstr ""
 
 msgid "Series"
@@ -109,6 +117,9 @@ msgstr ""
 msgid "None selected"
 msgstr ""
 
+msgid "Only '{{name}}' in use"
+msgstr ""
+
 msgid "Unsaved chart"
 msgstr ""
 
@@ -316,6 +327,9 @@ msgstr ""
 msgid "Year over year (column)"
 msgstr ""
 
+msgid "Single value"
+msgstr ""
+
 msgid "Open as Map"
 msgstr ""
 

packages/app/package.json

@@ -25,7 +25,7 @@
         "webpack-bundle-analyzer": "^3.0.3"
     },
     "dependencies": {
-        "@dhis2/analytics": "2.1.1",
+        "@dhis2/analytics": "^2.2.0",
         "@dhis2/d2-i18n": "^1.0.3",
         "@dhis2/d2-ui-core": "6.1.0",
         "@dhis2/d2-ui-file-menu": "6.1.0",

packages/app/src/assets/SingleValueIcon.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import SvgIcon from '@material-ui/core/SvgIcon';
+
+const SingleValueIcon = ({
+    style = { paddingRight: '8px', width: 24, height: 24 },
+}) => (
+    <SvgIcon viewBox="0,0,48,48" style={style}>
+        <path
+            d="M45,9.59a2,2,0,0,1,2,2v25a2,2,0,0,1-2,2H3a2,2,0,0,1-2-2v-25a2,2,0,0,1,2-2H45m0-1H3a3,3,0,0,0-3,3v25a3,3,0,0,0,3,3H45a3,3,0,0,0,3-3v-25a3,3,0,0,0-3-3Z"
+            fill="#9e9e9e"
+        />
+        <path
+            d="M13.06,31H10.82V20.16L7.51,21.29V19.4l5.26-1.94h.29Z"
+            fill="#1976d2"
+        />
+        <path
+            d="M27,31H18V29.46l4.5-4.91a10.45,10.45,0,0,0,1.38-1.81,2.91,2.91,0,0,0,.42-1.46,2.2,2.2,0,0,0-.55-1.56,1.86,1.86,0,0,0-1.46-.59,2.2,2.2,0,0,0-1.7.66,2.65,2.65,0,0,0-.6,1.83H17.69a4.36,4.36,0,0,1,.56-2.22,3.9,3.9,0,0,1,1.6-1.54,5.19,5.19,0,0,1,2.41-.54,4.54,4.54,0,0,1,3.1,1A3.41,3.41,0,0,1,26.5,21a4.66,4.66,0,0,1-.57,2.12,11.88,11.88,0,0,1-1.87,2.52l-3.3,3.53H27Z"
+            fill="#1976d2"
+        />
+        <path
+            d="M32.68,23.23h1.38a2.47,2.47,0,0,0,1.64-.54,1.9,1.9,0,0,0,.61-1.53,2.1,2.1,0,0,0-.51-1.5,2,2,0,0,0-1.54-.53,2.13,2.13,0,0,0-1.49.52A1.76,1.76,0,0,0,32.18,21H29.93a3.39,3.39,0,0,1,.55-1.89A3.74,3.74,0,0,1,32,17.79a5.15,5.15,0,0,1,2.21-.47,4.68,4.68,0,0,1,3.18,1,3.57,3.57,0,0,1,1.15,2.83A2.87,2.87,0,0,1,38,22.87a3.53,3.53,0,0,1-1.49,1.21,3.28,3.28,0,0,1,1.69,1.2,3.24,3.24,0,0,1,.58,1.95,3.63,3.63,0,0,1-1.25,2.89,4.82,4.82,0,0,1-3.28,1.08,4.82,4.82,0,0,1-3.19-1,3.44,3.44,0,0,1-1.24-2.77h2.25a1.88,1.88,0,0,0,.6,1.45,2.29,2.29,0,0,0,1.61.56,2.34,2.34,0,0,0,1.65-.56,2.09,2.09,0,0,0,.6-1.61,2.13,2.13,0,0,0-.63-1.65A2.7,2.7,0,0,0,34,25H32.68Z"
+            fill="#1976d2"
+        />
+    </SvgIcon>
+);
+
+export default SingleValueIcon;

packages/app/src/components/DimensionsPanel/Dialogs/DialogManager.js

@@ -8,6 +8,7 @@ import isEqual from 'lodash-es/isEqual';
 import Dialog from '@material-ui/core/Dialog';
 import DialogActions from '@material-ui/core/DialogActions';
 
+import i18n from '@dhis2/d2-i18n';
 import {
     DataDimension,
     DynamicDimension,
@@ -37,6 +38,7 @@ import {
     sGetUiItemsByDimension,
     sGetUiActiveModalDialog,
     sGetUiParentGraphMap,
+    sGetUiType,
 } from '../../../reducers/ui';
 import { sGetDimensions } from '../../../reducers/dimensions';
 import { sGetMetadata } from '../../../reducers/metadata';
@@ -46,6 +48,7 @@ import {
     getOrgUnitsFromIds,
     removeLastPathSegment,
 } from '../../../modules/orgUnit';
+import { isSingleValue } from '../../../modules/chartTypes';
 
 export class DialogManager extends Component {
     state = {
@@ -129,9 +132,14 @@ export class DialogManager extends Component {
         return this.props.selectedItems[dialogId]
             ? this.props.selectedItems[dialogId]
                   .filter(id => this.props.metadata[id])
-                  .map(id => ({
+                  .map((id, index) => ({
                       id,
                       name: this.props.metadata[id].name,
+                      isActive:
+                          dialogId === DIMENSION_ID_DATA &&
+                          isSingleValue(this.props.type)
+                              ? index === 0
+                              : true,
                   }))
             : [];
     };
@@ -171,6 +179,7 @@ export class DialogManager extends Component {
         const {
             displayNameProperty,
             dialogId,
+            type,
             dimensions,
             removeUiItems,
             setUiItems,
@@ -187,10 +196,18 @@ export class DialogManager extends Component {
             const selectedItems = this.getSelectedItems(dialogId);
 
             if (dialogId === DIMENSION_ID_DATA) {
+                const infoBoxMessage =
+                    isSingleValue(type) && selectedItems.length > 1
+                        ? i18n.t(
+                              "'Single Value' can only show one data item. The first data item is automatically selected."
+                          )
+                        : null;
+
                 return (
                     <DataDimension
                         displayNameProp={displayNameProperty}
                         selectedDimensions={selectedItems}
+                        infoBoxMessage={infoBoxMessage}
                         {...dimensionProps}
                     />
                 );
@@ -265,6 +282,7 @@ DialogManager.propTypes = {
     dimensions: PropTypes.object,
     metadata: PropTypes.object,
     selectedItems: PropTypes.object,
+    type: PropTypes.string,
 };
 
 DialogManager.defaultProps = {
@@ -281,6 +299,7 @@ const mapStateToProps = state => ({
     dxIds: sGetUiItemsByDimension(state, DIMENSION_ID_DATA),
     ouIds: sGetUiItemsByDimension(state, DIMENSION_ID_ORGUNIT),
     selectedItems: sGetUiItems(state),
+    type: sGetUiType(state),
 });
 
 export default connect(

packages/app/src/components/DimensionsPanel/Dialogs/__tests__/__snapshots__/DialogManager.spec.js.snap

@@ -82,6 +82,7 @@ exports[`The DialogManager component renders OUDimension content with display:no
     />
   </div>
   <DataDimension
+    infoBoxMessage={null}
     onSelect={[Function]}
     selectedDimensions={Array []}
   />
@@ -119,6 +120,7 @@ exports[`The DialogManager component renders the DataDimension content in dialog
   open={false}
 >
   <DataDimension
+    infoBoxMessage={null}
     onSelect={[Function]}
     selectedDimensions={Array []}
   />

packages/app/src/components/Layout/Chip.js

@@ -1,16 +1,18 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import i18n from '@dhis2/d2-i18n';
-import { FIXED_DIMENSIONS } from '@dhis2/analytics';
+import { FIXED_DIMENSIONS, DIMENSION_ID_DATA } from '@dhis2/analytics';
+import WarningIcon from '@material-ui/icons/Warning';
 
 import Menu from './Menu';
 import Tooltip from './Tooltip';
 import { setDataTransfer } from '../../modules/dnd';
 import { sGetDimensions } from '../../reducers/dimensions';
-import { sGetUiItemsByDimension } from '../../reducers/ui';
+import { sGetUiItemsByDimension, sGetUiType } from '../../reducers/ui';
 import DynamicDimensionIcon from '../../assets/DynamicDimensionIcon';
 import { sGetMetadata } from '../../reducers/metadata';
 import { styles } from './styles/Chip.style';
+import { isSingleValue } from '../../modules/chartTypes';
 
 const TOOLTIP_ENTER_DELAY = 500;
 
@@ -70,10 +72,25 @@ class Chip extends React.Component {
         return <DynamicDimensionIcon style={styles.dynamicDimensionIcon} />;
     };
 
-    renderChip = () => {
-        const itemsLabel = `: ${this.props.items.length} ${i18n.t('selected')}`;
+    isSingleValueDataDimension = () =>
+        isSingleValue(this.props.type) &&
+        this.props.dimensionId === DIMENSION_ID_DATA &&
+        this.props.items.length > 1;
 
-        const chipLabel = `${this.props.dimensionName}${
+    renderChip = () => {
+        const itemsLabel = this.isSingleValueDataDimension()
+            ? i18n.t('{{total}} of 1 selected', {
+                  total: this.props.items.length,
+              })
+            : i18n.t('{{total}} selected', {
+                  total: this.props.items.length,
+              });
+
+        const activeItemIds = this.isSingleValueDataDimension()
+            ? this.props.items.slice(0, 1)
+            : [];
+
+        const chipLabel = `${this.props.dimensionName}: ${
             this.props.items.length > 0 ? itemsLabel : ''
         }`;
         const anchorEl = document.getElementById(this.id);
@@ -82,6 +99,11 @@ class Chip extends React.Component {
             ...styles.chipWrapper,
             ...(!this.props.items.length ? styles.chipEmpty : {}),
         };
+        const warningIcon = this.isSingleValueDataDimension() ? (
+            <div style={styles.warningIconWrapper}>
+                <WarningIcon style={styles.warningIcon} />
+            </div>
+        ) : null;
 
         return (
             <div
@@ -99,6 +121,7 @@ class Chip extends React.Component {
                 >
                     <div style={styles.iconWrapper}>{icon}</div>
                     {chipLabel}
+                    {warningIcon}
                 </div>
                 <div style={styles.chipRight}>
                     <Menu
@@ -109,6 +132,7 @@ class Chip extends React.Component {
                 {anchorEl && (
                     <Tooltip
                         dimensionId={this.props.dimensionId}
+                        activeItemIds={activeItemIds}
                         open={this.state.tooltipOpen}
                         anchorEl={anchorEl}
                     />
@@ -126,6 +150,7 @@ const mapStateToProps = (state, ownProps) => ({
     dimensionName: (sGetDimensions(state)[ownProps.dimensionId] || {}).name,
     items: sGetUiItemsByDimension(state, ownProps.dimensionId) || emptyItems,
     metadata: sGetMetadata(state),
+    type: sGetUiType(state),
 });
 
 export default connect(mapStateToProps)(Chip);

packages/app/src/components/Layout/Layout.js

@@ -4,6 +4,7 @@ import { connect } from 'react-redux';
 import DefaultLayout from './DefaultLayout/DefaultLayout';
 import YearOverYearLayout from './YearOverYearLayout/YearOverYearLayout';
 import PieLayout from './PieLayout/PieLayout';
+import SingleValueLayout from './SingleValueLayout/SingleValueLayout';
 import {
     COLUMN,
     STACKED_COLUMN,
@@ -16,6 +17,7 @@ import {
     GAUGE,
     YEAR_OVER_YEAR_LINE,
     YEAR_OVER_YEAR_COLUMN,
+    SINGLE_VALUE,
 } from '../../modules/chartTypes';
 import { sGetUiType } from '../../reducers/ui';
 
@@ -31,6 +33,7 @@ const layoutMap = {
     [GAUGE]: PieLayout,
     [YEAR_OVER_YEAR_LINE]: YearOverYearLayout,
     [YEAR_OVER_YEAR_COLUMN]: YearOverYearLayout,
+    [SINGLE_VALUE]: SingleValueLayout,
 };
 
 const getLayoutByType = (type, props) => {

packages/app/src/components/Layout/SingleValueLayout/SingleValueLayout.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { AXIS_NAME_COLUMNS, AXIS_NAME_FILTERS } from '@dhis2/analytics';
+
+import DefaultAxis from '../DefaultLayout/DefaultAxis';
+import defaultAxisStyles from '../DefaultLayout/styles/DefaultAxis.style';
+import defaultLayoutStyles from '../DefaultLayout/styles/DefaultLayout.style';
+
+const Layout = () => (
+    <div id="layout-ct" style={defaultLayoutStyles.ct}>
+        <div
+            id="axis-group-1"
+            style={{
+                ...defaultLayoutStyles.axisGroup,
+                ...defaultLayoutStyles.axisGroupLeft,
+            }}
+        >
+            <DefaultAxis
+                axisName={AXIS_NAME_COLUMNS}
+                style={{
+                    ...defaultLayoutStyles.filters,
+                    ...defaultAxisStyles.axisContainerLeft,
+                }}
+            />
+        </div>
+        <div
+            id="axis-group-2"
+            style={{
+                ...defaultLayoutStyles.axisGroup,
+                ...defaultLayoutStyles.axisGroupRight,
+            }}
+        >
+            <DefaultAxis
+                axisName={AXIS_NAME_FILTERS}
+                style={defaultLayoutStyles.filters}
+            />
+        </div>
+    </div>
+);
+
+export default Layout;

packages/app/src/components/Layout/Tooltip.js

@@ -11,6 +11,7 @@ import { styles } from './styles/Tooltip.style';
 
 const labels = {
     noneSelected: i18n.t('None selected'),
+    onlyOneInUse: name => i18n.t("Only '{{name}}' in use", { name }),
 };
 
 const emptyItems = [];
@@ -37,20 +38,40 @@ export class Tooltip extends React.Component {
     );
 
     render() {
-        const { itemIds, metadata } = this.props;
+        const { itemIds, activeItemIds, metadata } = this.props;
 
-        const names = itemIds.length
-            ? itemIds.map(id => (metadata[id] ? metadata[id].name : id))
-            : [labels.noneSelected];
+        let names = [];
+
+        if (activeItemIds.length) {
+            if (activeItemIds.length === 1) {
+                const id = activeItemIds[0];
+                names = [
+                    labels.onlyOneInUse(metadata[id] ? metadata[id].name : id),
+                ];
+            } else {
+                names = activeItemIds.map(id =>
+                    metadata[id] ? metadata[id].name : id
+                );
+            }
+        } else if (itemIds.length) {
+            names = itemIds.map(id => (metadata[id] ? metadata[id].name : id));
+        } else {
+            names = [labels.noneSelected];
+        }
 
         return names.length ? this.renderTooltip(names) : '';
     }
 }
 
+Tooltip.defaultProps = {
+    activeItemIds: [],
+};
+
 Tooltip.propTypes = {
     open: PropTypes.bool.isRequired,
     anchorEl: PropTypes.object.isRequired,
     dimensionId: PropTypes.string.isRequired,
+    activeItemIds: PropTypes.array,
 };
 
 const mapStateToProps = (state, ownProps) => ({