fix(MicroBarChart): Add ellipsis and tooltip (#289)

* fix(MicroBarChart): Add ellipsis to value on overflow, add title to label + value
SAP · Jan 23, 2020 · 41f6971 · 41f6971
1 parent c4568b9
commit 41f6971
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 6 deletions.
diff --git a/packages/charts/src/components/MicroBarChart/__snapshots__/MicroBarChart.test.tsx.snap b/packages/charts/src/components/MicroBarChart/__snapshots__/MicroBarChart.test.tsx.snap
@@ -10,12 +10,14 @@ exports[`Micro Bar Chart Renders with data 1`] = `
     >
       <span
         class="MicroBarChart--label-"
+        title="Bar Number One"
       >
         Bar Number One
       </span>
       <span
         class="MicroBarChart--text-"
         style="font-size:12px"
+        title="10"
       >
         10
       </span>
@@ -38,12 +40,14 @@ exports[`Micro Bar Chart Renders with data 1`] = `
     >
       <span
         class="MicroBarChart--label-"
+        title="Bar Number Two"
       >
         Bar Number Two
       </span>
       <span
         class="MicroBarChart--text-"
         style="font-size:12px"
+        title="100"
       >
         100
       </span>
@@ -73,12 +77,14 @@ exports[`Micro Bar Chart custom colors 1`] = `
     >
       <span
         class="MicroBarChart--label-"
+        title="Bar Number One"
       >
         Bar Number One
       </span>
       <span
         class="MicroBarChart--text-"
         style="font-size:12px"
+        title="10"
       >
         10
       </span>
@@ -101,12 +107,14 @@ exports[`Micro Bar Chart custom colors 1`] = `
     >
       <span
         class="MicroBarChart--label-"
+        title="Bar Number Two"
       >
         Bar Number Two
       </span>
       <span
         class="MicroBarChart--text-"
         style="font-size:12px"
+        title="100"
       >
         100
       </span>
@@ -136,12 +144,14 @@ exports[`Micro Bar Chart element selection 1`] = `
     >
       <span
         class="MicroBarChart--label-"
+        title="Bar Number One"
       >
         Bar Number One
       </span>
       <span
         class="MicroBarChart--text-"
         style="font-size:12px"
+        title="10"
       >
         10
       </span>
@@ -172,12 +182,14 @@ exports[`Micro Bar Chart maxWidth selection 1`] = `
     >
       <span
         class="MicroBarChart--label-"
+        title="Bar Number One"
       >
         Bar Number One
       </span>
       <span
         class="MicroBarChart--text-"
         style="font-size:12px"
+        title="10"
       >
         10
       </span>
@@ -200,12 +212,14 @@ exports[`Micro Bar Chart maxWidth selection 1`] = `
     >
       <span
         class="MicroBarChart--label-"
+        title="Bar Number Two"
       >
         Bar Number Two
       </span>
       <span
         class="MicroBarChart--text-"
         style="font-size:12px"
+        title="100"
       >
         100
       </span>

diff --git a/packages/charts/src/components/MicroBarChart/index.tsx b/packages/charts/src/components/MicroBarChart/index.tsx
@@ -6,7 +6,8 @@ import { resolveColors } from '../../util/populateData';
 const BarStyles = {
   container: {
     display: 'flex',
-    flexDirection: 'column'
+    flexDirection: 'column',
+    overflow: 'hidden'
   },
   labelContainer: {
     display: 'flex',
@@ -29,17 +30,21 @@ const BarStyles = {
     fontWeight: 'normal',
     whiteSpace: 'nowrap',
     textOverflow: 'ellipsis',
-    fontSize: '12px'
+    fontSize: '12px',
+    maxWidth: '70%'
   },
   text: {
+    paddingLeft: '6px',
     display: 'inline-block',
+    overflow: 'hidden',
     fontSize: '14px',
-    wordWrap: 'break-word',
     boxSizing: 'border-box',
     fontFamily: "'72', Arial, Helvetica, sans-serif",
     fontWeight: 'normal',
-    whiteSpace: 'pre-line',
-    color: '#333333'
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
+    color: '#333333',
+    textAlign: 'right'
   }
 };
 
@@ -79,12 +84,15 @@ const MicroBarChart: FC<MicroBarChartPropTypes> = forwardRef(
           return (
             <div key={item.label}>
               <div className={classes.labelContainer}>
-                <span className={classes.label}>{labelFormatter(item.label)}</span>
+                <span className={classes.label} title={`${labelFormatter(item.label)}`}>
+                  {labelFormatter(item.label)}
+                </span>
                 <span
                   className={classes.text}
                   style={{
                     fontSize: '12px'
                   }}
+                  title={`${valueFormatter(item.value)}`}
                 >
                   {valueFormatter(item.value)}
                 </span>