diff --git a/src/chart_types/xy_chart/annotations/annotation_tooltip.ts b/src/chart_types/xy_chart/annotations/annotation_tooltip.ts index 1dedc7d438..7ee3f9946f 100644 --- a/src/chart_types/xy_chart/annotations/annotation_tooltip.ts +++ b/src/chart_types/xy_chart/annotations/annotation_tooltip.ts @@ -17,6 +17,7 @@ * under the License. */ import { Dimensions } from '../../../utils/dimensions'; +import { Position } from '../../../utils/commons'; /** @internal */ export function getFinalAnnotationTooltipPosition( @@ -36,12 +37,12 @@ export function getFinalAnnotationTooltipPosition( anchor: 'left' | 'right'; } { let left = 0; - let anchor: 'left' | 'right' = 'left' as 'left'; + let anchor: Position = Position.Left; const annotationXOffset = window.pageXOffset + container.left + chartDimensions.left + tooltipAnchor.left; if (chartDimensions.left + tooltipAnchor.left + portalWidth + padding >= container.width) { left = annotationXOffset - portalWidth - padding; - anchor = 'right' as 'right'; + anchor = Position.Right; } else { left = annotationXOffset + padding; } diff --git a/src/chart_types/xy_chart/renderer/dom/annotation_tooltips.tsx b/src/chart_types/xy_chart/renderer/dom/annotation_tooltips.tsx index fb3a953adf..b88ff7cf39 100644 --- a/src/chart_types/xy_chart/renderer/dom/annotation_tooltips.tsx +++ b/src/chart_types/xy_chart/renderer/dom/annotation_tooltips.tsx @@ -63,7 +63,7 @@ class AnnotationTooltipComponent extends React.Component * * @unit px */ - static maxWidth = 256; + static MAX_WIDTH = 256; constructor(props: AnnotationTooltipProps) { super(props); @@ -77,7 +77,7 @@ class AnnotationTooltipComponent extends React.Component } else { this.portalNode = document.createElement('div'); this.portalNode.id = ANNOTATION_CONTAINER_ID; - this.portalNode.style.width = `${AnnotationTooltipComponent.maxWidth}px`; + this.portalNode.style.width = `${AnnotationTooltipComponent.MAX_WIDTH}px`; document.body.appendChild(this.portalNode); } } @@ -103,7 +103,7 @@ class AnnotationTooltipComponent extends React.Component } const chartContainerBBox = chartContainerRef.current.getBoundingClientRect(); - const width = Math.min(AnnotationTooltipComponent.maxWidth, chartContainerBBox.width * 0.7); + const width = Math.min(AnnotationTooltipComponent.MAX_WIDTH, chartContainerBBox.width * 0.7); this.portalNode.style.width = `${width}px`; const tooltipBBox = this.tooltipRef.current.getBoundingClientRect(); const tooltipStyle = getFinalAnnotationTooltipPosition( diff --git a/src/components/tooltip/tooltip_portal.tsx b/src/components/tooltip/tooltip_portal.tsx index bc14fa8d6c..8033637d50 100644 --- a/src/components/tooltip/tooltip_portal.tsx +++ b/src/components/tooltip/tooltip_portal.tsx @@ -49,7 +49,7 @@ class TooltipPortalComponent extends React.Component { * * @unit px */ - static maxWidth = 256; + static MAX_WIDTH = 256; portalNode: HTMLDivElement | null = null; tooltipRef: React.RefObject; @@ -64,7 +64,7 @@ class TooltipPortalComponent extends React.Component { } else { this.portalNode = document.createElement('div'); this.portalNode.id = 'echTooltipContainerPortal'; - this.portalNode.style.width = `${TooltipPortalComponent.maxWidth}px`; + this.portalNode.style.width = `${TooltipPortalComponent.MAX_WIDTH}px`; document.body.appendChild(this.portalNode); } } @@ -83,7 +83,7 @@ class TooltipPortalComponent extends React.Component { const chartContainerBBox = chartContainerRef.current.getBoundingClientRect(); const tooltipBBox = this.tooltipRef.current.getBoundingClientRect(); - const width = Math.min(TooltipPortalComponent.maxWidth, chartContainerBBox.width * 0.7); + const width = Math.min(TooltipPortalComponent.MAX_WIDTH, chartContainerBBox.width * 0.7); this.portalNode.style.width = `${width}px`; const tooltipStyle = getFinalTooltipPosition(chartContainerBBox, tooltipBBox, width, position);