fix: tooltip container scroll issue

.playground/index.html

@@ -23,15 +23,23 @@
 */
         /*        width: 100%;
         height: 100%;*/
+        /* overflow-x: hidden; */
       }
       .chart {
         background: white;
         /*display: inline-block;
         position: relative;
         */
-        width: 300px;
-        height: 300px;
-        margin: 20px;
+        width: 100%;
+        height: 500px;
+        overflow: auto;
+      }
+
+      .testing {
+        background: aquamarine;
+        position: relative;
+        width: 100vw;
+        overflow: auto;
       }
     </style>
   </head>

.playground/playground.tsx

@@ -17,7 +17,18 @@
  * under the License. */
 
 import React from 'react';
-import { Chart, Partition, Settings, PartitionLayout, XYChartElementEvent, PartitionElementEvent } from '../src';
+import { Chart, Partition, Settings, PartitionLayout, XYChartElementEvent, PartitionElementEvent, Datum } from '../src';
+import { mocks } from '../src/mocks/hierarchical';
+import { arrayToLookup, hueInterpolator } from '../src/chart_types/partition_chart/layout/utils/calcs';
+import { regionDimension, countryDimension } from '../src/mocks/hierarchical/dimension_codes';
+import { palettes } from '../src/mocks/hierarchical/palettes';
+import { config } from '../src/chart_types/partition_chart/layout/config/config';
+import { ShapeTreeNode } from '../src/chart_types/partition_chart/layout/types/viewmodel_types';
+
+const regionLookup = arrayToLookup((d: Datum) => d.region, regionDimension);
+const countryLookup = arrayToLookup((d: Datum) => d.country, countryDimension);
+
+const interpolatorTurbo = hueInterpolator(palettes.turbo.map(([r, g, b]) => [r, g, b, 0.7]));
 
 export class Playground extends React.Component {
   onElementClick = (elements: (XYChartElementEvent | PartitionElementEvent)[]) => {
@@ -26,33 +37,64 @@ export class Playground extends React.Component {
   };
   render() {
     return (
-      <div className="chart">
-        <Chart>
-          <Settings onElementClick={this.onElementClick} />
-          <Partition
-            id="111"
-            config={{
-              partitionLayout: PartitionLayout.treemap,
-            }}
-            valueAccessor={(d: { v: number }) => {
-              return d.v;
-            }}
-            data={[
-              { g1: 'a', g2: 'a', v: 1 },
-              { g1: 'a', g2: 'b', v: 1 },
-              { g1: 'b', g2: 'a', v: 1 },
-              { g1: 'b', g2: 'b', v: 1 },
-            ]}
-            layers={[
-              {
-                groupByRollup: (datum: { g1: string }) => datum.g1,
-              },
-              {
-                groupByRollup: (datum: { g2: string }) => datum.g2,
-              },
-            ]}
-          />
-        </Chart>
+      <div className="testing">
+        <div className="chart">
+          <Chart>
+            <Settings showLegend />
+            <Partition
+              id="spec_1"
+              data={mocks.sunburst}
+              valueAccessor={(d: Datum) => d.exportVal as number}
+              valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\xa0Bn`}
+              layers={[
+                {
+                  groupByRollup: (d: Datum) => countryLookup[d.dest].continentCountry.substr(0, 2),
+                  nodeLabel: (d: any) => regionLookup[d].regionName,
+                  fillLabel: {
+                    valueFormatter: (d: number) =>
+                      `${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\xa0Bn`,
+                    fontFamily: 'Phosphate-Inline',
+                    textColor: 'yellow',
+                    textInvertible: false,
+                  },
+                  shape: { fillColor: 'rgba(0,0,0,0)' },
+                },
+                {
+                  groupByRollup: (d: Datum) => d.dest,
+                  nodeLabel: (d: any) => countryLookup[d].name,
+                  fillLabel: {
+                    valueFormatter: (d: number) =>
+                      `${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\xa0Bn`,
+                    textColor: 'black',
+                    textInvertible: false,
+                    fontWeight: 200,
+                    fontStyle: 'normal',
+                    fontFamily: 'Helvetica',
+                    fontVariant: 'small-caps',
+                    valueFont: { fontWeight: 400, fontStyle: 'italic' },
+                  },
+                  shape: {
+                    fillColor: (d: ShapeTreeNode) => {
+                      // primarily, pick color based on parent's index, but then perturb by the index within the parent
+                      return interpolatorTurbo(
+                        (d.parent.sortIndex + d.sortIndex / d.parent.children.length) /
+                          (d.parent.parent.children.length + 1),
+                      );
+                    },
+                  },
+                },
+              ]}
+              config={{
+                partitionLayout: PartitionLayout.treemap,
+                margin: { top: 0, bottom: 0, left: 0, right: 0 },
+                minFontSize: 4,
+                maxFontSize: 84,
+                idealFontSizeJump: 1.15,
+                outerSizeRatio: 1,
+              }}
+            />
+          </Chart>
+        </div>
       </div>
     );
   }

src/chart_types/xy_chart/crosshair/crosshair_utils.test.ts

@@ -31,9 +31,10 @@ describe('Tooltip position', () => {
     top: 0,
     left: 0,
   };
+  const portalWidth = 50;
   describe('horizontal rotated chart', () => {
     it('can position the tooltip on the top left corner', () => {
-      const position = getFinalTooltipPosition(container, tooltip, {
+      const position = getFinalTooltipPosition(container, tooltip, portalWidth, {
         isRotated: false,
         y1: 0,
         y0: 0,
@@ -44,8 +45,9 @@ describe('Tooltip position', () => {
       expect(position.left).toBe('25px');
       expect(position.top).toBe('10px');
     });
+
     it('can position the tooltip on the bottom left corner', () => {
-      const position = getFinalTooltipPosition(container, tooltip, {
+      const position = getFinalTooltipPosition(container, tooltip, portalWidth, {
         isRotated: false,
         y0: 90,
         y1: 90,
@@ -56,8 +58,9 @@ describe('Tooltip position', () => {
       expect(position.left).toBe('25px');
       expect(position.top).toBe('80px');
     });
+
     it('can position the tooltip on the top right corner', () => {
-      const position = getFinalTooltipPosition(container, tooltip, {
+      const position = getFinalTooltipPosition(container, tooltip, portalWidth, {
         isRotated: false,
         y0: 0,
         y1: 0,
@@ -68,8 +71,9 @@ describe('Tooltip position', () => {
       expect(position.left).toBe('65px');
       expect(position.top).toBe('10px');
     });
+
     it('can position the tooltip on the bottom right corner', () => {
-      const position = getFinalTooltipPosition(container, tooltip, {
+      const position = getFinalTooltipPosition(container, tooltip, portalWidth, {
         isRotated: false,
         y0: 90,
         y1: 90,
@@ -80,10 +84,35 @@ describe('Tooltip position', () => {
       expect(position.left).toBe('65px');
       expect(position.top).toBe('80px');
     });
+
+    it('should render on right if portal width is within right side', () => {
+      const position = getFinalTooltipPosition(container, tooltip, 44, {
+        isRotated: false,
+        y0: 0,
+        y1: 0,
+        x0: 50,
+        x1: 50,
+        padding: 5,
+      });
+      expect(position.left).toBe('65px');
+    });
+
+    it('should render on left if portal width is NOT within right side', () => {
+      const position = getFinalTooltipPosition(container, tooltip, 46, {
+        isRotated: false,
+        y0: 0,
+        y1: 0,
+        x0: 50,
+        x1: 50,
+        padding: 5,
+      });
+      expect(position.left).toBe('15px');
+    });
   });
+
   describe('vertical rotated chart', () => {
     it('can position the tooltip on the top left corner', () => {
-      const position = getFinalTooltipPosition(container, tooltip, {
+      const position = getFinalTooltipPosition(container, tooltip, portalWidth, {
         isRotated: true,
         y0: 0,
         y1: 0,
@@ -94,8 +123,9 @@ describe('Tooltip position', () => {
       expect(position.left).toBe('20px');
       expect(position.top).toBe('15px');
     });
+
     it('can position the tooltip on the bottom left corner', () => {
-      const position = getFinalTooltipPosition(container, tooltip, {
+      const position = getFinalTooltipPosition(container, tooltip, portalWidth, {
         isRotated: true,
         y0: 90,
         y1: 90,
@@ -106,8 +136,9 @@ describe('Tooltip position', () => {
       expect(position.left).toBe('20px');
       expect(position.top).toBe('65px');
     });
+
     it('can position the tooltip on the top right corner', () => {
-      const position = getFinalTooltipPosition(container, tooltip, {
+      const position = getFinalTooltipPosition(container, tooltip, portalWidth, {
         isRotated: true,
         y0: 0,
         y1: 0,
@@ -118,8 +149,9 @@ describe('Tooltip position', () => {
       expect(position.left).toBe('70px');
       expect(position.top).toBe('15px');
     });
+
     it('can position the tooltip on the bottom right corner', () => {
-      const position = getFinalTooltipPosition(container, tooltip, {
+      const position = getFinalTooltipPosition(container, tooltip, portalWidth, {
         isRotated: true,
         y0: 90,
         y1: 90,
@@ -130,5 +162,29 @@ describe('Tooltip position', () => {
       expect(position.left).toBe('70px');
       expect(position.top).toBe('65px');
     });
+
+    it('should render on right if portal width is within right side', () => {
+      const position = getFinalTooltipPosition(container, tooltip, 44, {
+        isRotated: true,
+        y0: 0,
+        y1: 0,
+        x0: 50,
+        x1: 50,
+        padding: 5,
+      });
+      expect(position.left).toBe('60px');
+    });
+
+    it('should render on left if portal width is NOT within right side', () => {
+      const position = getFinalTooltipPosition(container, tooltip, 51, {
+        isRotated: true,
+        y0: 0,
+        y1: 0,
+        x0: 50,
+        x1: 50,
+        padding: 5,
+      });
+      expect(position.left).toBe('70px');
+    });
   });
 });

src/components/tooltip/_tooltip.scss

@@ -1,6 +1,5 @@
 #echTooltipContainerPortal {
   position: absolute;
-  width: 256px;
 }
 .echTooltip {
   position: absolute;
@@ -41,7 +40,7 @@
     font-weight: $euiFontWeightBold;
     text-align: right;
     font-feature-settings: 'tnum';
-    margin-left: 8px;
+    margin-left: $euiSizeS;
   }
 
   &__rowHighlighted {

src/components/tooltip/index.ts

@@ -0,0 +1,20 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License. */
+
+/** @internal */
+export { TooltipPortal as Tooltip } from './tooltip_portal';

src/components/tooltip/tooltip.tsx

@@ -0,0 +1,75 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License. */
+
+import classNames from 'classnames';
+import React, { forwardRef, memo, useCallback } from 'react';
+import { TooltipInfo } from './types';
+import { TooltipValueFormatter, TooltipValue } from '../../specs';
+
+interface TooltipProps {
+  info: TooltipInfo;
+  headerFormatter?: TooltipValueFormatter;
+}
+
+const TooltipComponent = forwardRef<HTMLDivElement, TooltipProps>(({ info, headerFormatter }, ref) => {
+  const renderHeader = useCallback(
+    (headerData: TooltipValue | null, formatter?: TooltipValueFormatter) => {
+      if (!headerData || !headerData.isVisible) {
+        return null;
+      }
+      return <div className="echTooltip__header">{formatter ? formatter(headerData) : headerData.value}</div>;
+    },
+    [info.header, headerFormatter],
+  );
+
+  return (
+    <div className="echTooltip" ref={ref}>
+      {renderHeader(info.header, headerFormatter)}
+      <div className="echTooltip__list">
+        {info.values.map(
+          ({ seriesIdentifier, valueAccessor, label, value, markValue, color, isHighlighted, isVisible }, index) => {
+            if (!isVisible) {
+              return null;
+            }
+            const classes = classNames('echTooltip__item', {
+              /* eslint @typescript-eslint/camelcase:0 */
+              echTooltip__rowHighlighted: isHighlighted,
+            });
+            return (
+              <div
+                // NOTE: temporary to avoid errors
+                key={`${seriesIdentifier.key}__${valueAccessor}__${index}`}
+                className={classes}
+                style={{
+                  borderLeftColor: color,
+                }}
+              >
+                <span className="echTooltip__label">{label}</span>
+                <span className="echTooltip__value">{value}</span>
+                {markValue && <span className="echTooltip__markValue">&nbsp;({markValue})</span>}
+              </div>
+            );
+          },
+        )}
+      </div>
+    </div>
+  );
+});
+
+/** @internal */
+export const Tooltip = memo(TooltipComponent);