fix: possibly fix the scrollbar in all charts

.playground/playground.tsx

@@ -17,18 +17,8 @@
  * under the License. */
 
 import React from 'react';
-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]));
+import { XYChartElementEvent, PartitionElementEvent } from '../src';
+import { example } from '../stories/treemap/6_custom_style';
 
 export class Playground extends React.Component {
   onElementClick = (elements: (XYChartElementEvent | PartitionElementEvent)[]) => {
@@ -38,63 +28,7 @@ export class Playground extends React.Component {
   render() {
     return (
       <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 className="chart">{example()}</div>
       </div>
     );
   }

src/components/tooltip/_tooltip.scss

@@ -1,7 +1,12 @@
 #echTooltipContainerPortal {
   position: absolute;
+  background-color: red;
+  height: 20px;
+  pointer-events: none;
+  z-index: 10000000;
 }
 .echTooltip {
+  opacity: 0.2;
   position: absolute;
   @include euiToolTipStyle;
   @include euiFontSizeXS;

src/components/tooltip/tooltip_portal.tsx

@@ -92,6 +92,10 @@ class TooltipPortalComponent extends React.Component<TooltipPortalProps> {
 
     if (tooltipStyle.left) {
       this.portalNode.style.left = tooltipStyle.left;
+      if (this.tooltipRef.current) {
+        this.tooltipRef.current.style.left = tooltipStyle.anchor === 'right' ? 'auto' : '0px';
+        this.tooltipRef.current.style.right = tooltipStyle.anchor === 'right' ? '0px' : 'auto';
+      }
     }
     if (tooltipStyle.top) {
       this.portalNode.style.top = tooltipStyle.top;

src/components/tooltip/utils.ts

@@ -59,18 +59,21 @@ export function getFinalTooltipPosition(
 ): {
   left: string | null;
   top: string | null;
+  anchor: 'left' | 'right';
 } {
   const { x1, y1, isRotated, padding = 10 } = anchorPosition;
   let left = 0;
   let top = 0;
 
   const x0 = anchorPosition.x0 || anchorPosition.x1;
   const y0 = anchorPosition.y0 || anchorPosition.y1;
+  let anchor: 'left' | 'right' = 'left' as 'left';
 
   if (!isRotated) {
     const leftOfBand = window.pageXOffset + container.left + x0;
     if (x1 + portalWidth + padding > container.width) {
-      left = leftOfBand - tooltip.width - padding;
+      left = leftOfBand - portalWidth - padding;
+      anchor = 'right' as 'right';
     } else {
       left = leftOfBand + (x1 - x0) + padding;
     }
@@ -81,6 +84,7 @@ export function getFinalTooltipPosition(
       top = topOfBand + y0;
     }
   } else {
+    // not sure if this is also fixed no rotated charts
     const leftOfBand = window.pageXOffset + container.left;
     if (x1 + portalWidth > container.width) {
       left = leftOfBand + container.width - tooltip.width;
@@ -98,5 +102,6 @@ export function getFinalTooltipPosition(
   return {
     left: `${Math.round(left)}px`,
     top: `${Math.round(top)}px`,
+    anchor,
   };
 }