fix: long names for dimensions, chip and tooltip (DHIS2-7932) (#556)

* fix: analytics v2.8.3 for long dimension names DHIS2-7932 * fix: long names in chip * fix: long names in tooltip
dhis2 · Jan 22, 2020 · 2212398 · 2212398
1 parent 7b9f52b
commit 2212398
Show file tree

Hide file tree

Showing 7 changed files with 44 additions and 25 deletions.
diff --git a/packages/app/package.json b/packages/app/package.json
@@ -12,7 +12,7 @@
         "redux-mock-store": "^1.5.3"
     },
     "dependencies": {
-        "@dhis2/analytics": "^2.8.2",
+        "@dhis2/analytics": "2.8.3",
         "@dhis2/d2-ui-core": "^6.5.0",
         "@dhis2/d2-ui-file-menu": "^6.5.0",
         "@dhis2/d2-ui-interpretations": "^6.5.0",

diff --git a/packages/app/src/components/Layout/Chip.js b/packages/app/src/components/Layout/Chip.js
@@ -102,7 +102,7 @@ class Chip extends React.Component {
             : {}),
     })
 
-    renderChipLabel = () => {
+    renderChipLabelSuffix = () => {
         const numberOfItems = this.props.items.length
 
         const getItemsLabel =
@@ -116,9 +116,7 @@ class Chip extends React.Component {
                       total: numberOfItems,
                   })
 
-        return `${this.props.dimensionName}${
-            this.props.items.length > 0 ? `: ${getItemsLabel}` : ''
-        }`
+        return `${this.props.items.length > 0 ? `: ${getItemsLabel}` : ''}`
     }
 
     renderChipIcon = () => {
@@ -188,7 +186,8 @@ class Chip extends React.Component {
                 onMouseOut={this.handleMouseOut}
             >
                 <div style={styles.iconWrapper}>{this.renderChipIcon()}</div>
-                {this.renderChipLabel()}
+                <span style={styles.label}>{this.props.dimensionName}</span>
+                <span>{this.renderChipLabelSuffix()}</span>
                 {hasAxisTooManyItems(
                     this.props.type,
                     this.props.axisId,

diff --git a/packages/app/src/components/Layout/Tooltip.js b/packages/app/src/components/Layout/Tooltip.js
@@ -41,7 +41,7 @@ export class Tooltip extends React.Component {
         <li style={styles.item}>
             <div style={styles.iconWrapper}>
                 <WarningIcon style={styles.icon} />
-                <span>{warningLabel}</span>
+                <span style={styles.warningLabel}>{warningLabel}</span>
             </div>
         </li>
     )

diff --git a/packages/app/src/components/Layout/styles/Chip.style.js b/packages/app/src/components/Layout/styles/Chip.style.js
@@ -2,25 +2,30 @@ import { colors } from '@dhis2/ui-core'
 
 import * as layoutStyle from './style'
 
+const baseChip = {
+    padding: layoutStyle.CHIP_PADDING,
+    fontSize: layoutStyle.CHIP_FONT_SIZE,
+    fontWeight: layoutStyle.CHIP_FONT_WEIGHT,
+    color: layoutStyle.CHIP_COLOR,
+    cursor: 'pointer',
+    minHeight: 24,
+    userSelect: 'none',
+}
+
 export const styles = {
     chipWrapper: {
         display: 'flex',
         margin: layoutStyle.CHIP_MARGIN,
         backgroundColor: layoutStyle.CHIP_BACKGROUND_COLOR,
         borderRadius: layoutStyle.CHIP_BORDER_RADIUS,
         alignItems: 'center',
+        maxWidth: '400px',
     },
     chip: {
-        padding: layoutStyle.CHIP_PADDING,
-        fontSize: layoutStyle.CHIP_FONT_SIZE,
-        fontWeight: layoutStyle.CHIP_FONT_WEIGHT,
-        color: layoutStyle.CHIP_COLOR,
-        cursor: 'pointer',
+        ...baseChip,
         whiteSpace: 'nowrap',
         overflow: 'hidden',
         textOverflow: 'ellipsis',
-        minHeight: 24,
-        userSelect: 'none',
     },
     chipEmpty: {
         backgroundColor: colors.grey300,
@@ -49,18 +54,26 @@ export const styles = {
         display: 'flex',
         alignItems: 'center',
     },
+    label: {
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+    },
 }
 
 styles.chipLeft = {
-    ...styles.chip,
+    ...baseChip,
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
     display: 'flex',
     borderTopRightRadius: '0px',
     borderBottomRightRadius: '0px',
     alignItems: 'center',
 }
 
 styles.chipRight = {
-    ...styles.chip,
+    ...baseChip,
     paddingLeft: '0px',
     borderTopLeftRadius: '0px',
     borderBottomLeftRadius: '0px',

diff --git a/packages/app/src/components/Layout/styles/Tooltip.style.js b/packages/app/src/components/Layout/styles/Tooltip.style.js
@@ -11,6 +11,7 @@ export const styles = {
         borderRadius: '3px',
         position: 'relative',
         top: '5px',
+        maxWidth: '300px',
     },
     list: {
         listStyleType: 'none',
@@ -20,6 +21,9 @@ export const styles = {
     },
     item: {
         marginBottom: '3px',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
     },
     icon: {
         fontSize: '13px',
@@ -30,4 +34,7 @@ export const styles = {
         alignItems: 'center',
         marginBottom: '5px',
     },
+    warningLabel: {
+        whiteSpace: 'normal',
+    },
 }
diff --git a/packages/plugin/package.json b/packages/plugin/package.json
@@ -6,7 +6,7 @@
     "module": "./build/es/lib.js",
     "license": "BSD-3-Clause",
     "dependencies": {
-        "@dhis2/analytics": "^2.8.2",
+        "@dhis2/analytics": "2.8.3",
         "@material-ui/core": "^3.1.2",
         "d2-analysis": "33.2.11",
         "lodash-es": "^4.17.11",

diff --git a/yarn.lock b/yarn.lock
@@ -1243,10 +1243,10 @@
     debug "^3.1.0"
     lodash.once "^4.1.1"
 
-"@dhis2/analytics@^2.1.0":
-  version "2.8.1"
-  resolved "https://registry.yarnpkg.com/@dhis2/analytics/-/analytics-2.8.1.tgz#228af6524f35c864689e28678752f1c8f42072e8"
-  integrity sha512-uIiQA8kIxUdRZEC+y0cwUDQUxBqgq1yVMRdEuevkm1zTuFJxKaNrJ6nZT9WyrVtnxpzYQneK5LsXsjMMo4vl8g==
+"@dhis2/analytics@2.8.3":
+  version "2.8.3"
+  resolved "https://registry.yarnpkg.com/@dhis2/analytics/-/analytics-2.8.3.tgz#062118d257c29d5e28cf4bf035842f112b9eef41"
+  integrity sha512-bF38HNa6vL9JcJApSPE1KvLAb8M3p1nh/ymtcD6ULIhnTTqKy9eOaiz8hulH2NYRG+aJkXFNtp46OhmQGTZ7Ng==
   dependencies:
     "@dhis2/d2-i18n" "^1.0.4"
     "@dhis2/d2-ui-org-unit-dialog" "^6.3.2"
@@ -1262,10 +1262,10 @@
     react-beautiful-dnd "^10.1.1"
     styled-jsx "^3.2.1"
 
-"@dhis2/analytics@^2.8.2":
-  version "2.8.2"
-  resolved "https://registry.yarnpkg.com/@dhis2/analytics/-/analytics-2.8.2.tgz#93f3a407d90b028621ad8aa7df9e5ad7e8ba9595"
-  integrity sha512-Tf/JzetUM5xLjj+oXjAhAc4LG3PYJuwFUF72v1ltfGEaym7pXurqU/RU6/XCUUz2Mkk0GAMoG1peAvVsLzZoQw==
+"@dhis2/analytics@^2.1.0":
+  version "2.8.1"
+  resolved "https://registry.yarnpkg.com/@dhis2/analytics/-/analytics-2.8.1.tgz#228af6524f35c864689e28678752f1c8f42072e8"
+  integrity sha512-uIiQA8kIxUdRZEC+y0cwUDQUxBqgq1yVMRdEuevkm1zTuFJxKaNrJ6nZT9WyrVtnxpzYQneK5LsXsjMMo4vl8g==
   dependencies:
     "@dhis2/d2-i18n" "^1.0.4"
     "@dhis2/d2-ui-org-unit-dialog" "^6.3.2"