fix(tooltip): fix overflow for long series names (#274)

Allow long series names in the tooltip to wrap to the next line, refactor tooltip table into a list. fix #270
elastic · Aug 5, 2019 · 717486f · 717486f
1 parent 18edde6
commit 717486f
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 58 deletions.
diff --git a/src/components/_tooltip.scss b/src/components/_tooltip.scss
@@ -7,45 +7,40 @@
   pointer-events: none;
   user-select: none;
 
-  table {
-    border-collapse: collapse;
-    border-spacing: 0;
-    td,
-    th {
-      padding: 3px;
-    }
+  &__list {
+    margin: $euiSizeXS;
   }
-  table {
-    width: 100%;
-  }
-}
 
-.echTooltip__header {
-  @include euiToolTipTitle;
-  padding: $euiSizeXS ($euiSizeXS * 2);
-}
+  &__header {
+    @include euiToolTipTitle;
+    padding: $euiSizeXS ($euiSizeXS * 2);
+  }
 
-.echTooltip__label {
-  @include euiTextTruncate;
-  // Border indicates series color
-  border-left: $euiSizeXS solid transparent;
-}
+  &__item {
+    display: flex;
+    padding: 3px;
+    box-sizing: border-box;
+    border-left: $euiSizeXS solid transparent;
+  }
 
-.echTooltip__value {
-  font-weight: $euiFontWeightBold;
-  text-align: right;
-  font-feature-settings: 'tnum';
-}
+  &__label {
+    @include euiTextOverflowWrap;
+    min-width: 1px;
+    flex: 1;
+  }
 
-.echTooltip__rowHighlighted {
-  background-color: transparentize($euiColorGhost, .9);
-  border-radius: $euiBorderRadius;
-}
+  &__value {
+    font-weight: $euiFontWeightBold;
+    text-align: right;
+    font-feature-settings: 'tnum';
+    margin-left: 8px;
+  }
 
-.echTooltip--hidden {
-  opacity: 0;
-}
+  &__rowHighlighted {
+    background-color: transparentize($euiColorGhost, 0.9);
+  }
 
-.echTooltip__table {
-  margin: $euiSizeXS;
+  &--hidden {
+    opacity: 0;
+  }
 }
diff --git a/src/components/tooltips.tsx b/src/components/tooltips.tsx
@@ -21,36 +21,33 @@ class TooltipsComponent extends React.Component<TooltipProps> {
 
   render() {
     const { isTooltipVisible, tooltipData, tooltipPosition, tooltipHeaderFormatter } = this.props.chartStore!;
+
     if (!isTooltipVisible.get()) {
       return <div className="echTooltip echTooltip--hidden" />;
     }
+
     return (
       <div className="echTooltip" style={{ transform: tooltipPosition.transform }}>
         <div className="echTooltip__header">{this.renderHeader(tooltipData[0], tooltipHeaderFormatter)}</div>
-        <div className="echTooltip__table">
-          <table>
-            <tbody>
-              {tooltipData.slice(1).map(({ name, value, color, isHighlighted }, index) => {
-                const classes = classNames({
-                  /* eslint @typescript-eslint/camelcase:0 */
-                  echTooltip__rowHighlighted: isHighlighted,
-                });
-                return (
-                  <tr key={`row-${index}`} className={classes}>
-                    <td
-                      className="echTooltip__label"
-                      style={{
-                        borderLeftColor: color,
-                      }}
-                    >
-                      {name}
-                    </td>
-                    <td className="echTooltip__value">{value}</td>
-                  </tr>
-                );
-              })}
-            </tbody>
-          </table>
+        <div className="echTooltip__list">
+          {tooltipData.slice(1).map(({ name, value, color, isHighlighted, seriesKey }) => {
+            const classes = classNames('echTooltip__item', {
+              /* eslint @typescript-eslint/camelcase:0 */
+              echTooltip__rowHighlighted: isHighlighted,
+            });
+            return (
+              <div
+                key={seriesKey}
+                className={classes}
+                style={{
+                  borderLeftColor: color,
+                }}
+              >
+                <span className="echTooltip__label">{name}</span>
+                <span className="echTooltip__value">{value}</span>
+              </div>
+            );
+          })}
         </div>
       </div>
     );