import { Component , h , Prop , State } from '@stencil/core' ; import { DataStream , SizeConfig , ViewPort } from '../../../utils/dataTypes' ; import { Threshold } from '../common/types' ; import { TrendResult } from '../common/trends/types' ; import { DATA_ALIGNMENT } from '../common/constants' ; /**
 * The parent tooltip container, listens for events to ensure tooltip renders at the correct position at the correct time.
 */ @ Component ( { tag : 'sc-tooltip' , styleUrl : 'sc-tooltip.css' , shadow : false , } ) export class ScTooltip { @ Prop ( ) size ! : SizeConfig ; @ Prop ( ) dataContainer ! : HTMLElement ; @ Prop ( ) dataStreams ! : DataStream [ ] ; @ Prop ( ) viewport ! : ViewPort ; @ Prop ( ) thresholds ! : Threshold [ ] ; @ Prop ( ) trendResults : TrendResult [ ] = [ ] ; @ Prop ( ) maxDurationFromDate ? : number ; @ Prop ( ) showDataStreamColor : boolean = true ; @ Prop ( ) supportString ! : boolean ; @ Prop ( ) visualizesAlarms ! : boolean ; @ Prop ( ) showBlankTooltipRows : boolean = false ; /**
     * If we are drawing data from the data timestamp to timestamp + resolution
     * we want the tooltip to align on the left side
     *
     * Otherwise we are drawing the data from timestamp - resolution to timestamp
     * then we want the tooltip to align on the right side
     */ @ Prop ( ) dataAlignment ! : DATA_ALIGNMENT ; /**
     * CSS Top property for the tooltip container
     */ @ Prop ( ) top : number ; @ Prop ( ) sortPoints : boolean = true ; @ State ( ) selectedDate ? : Date ; componentDidLoad ( ) { this . dataContainer . addEventListener ( 'mousemove' , this . setSelectedDate ) ; this . dataContainer . addEventListener ( 'mouseleave' , this . hideTooltip ) ; this . dataContainer . addEventListener ( 'mousedown' , this . hideTooltip , { capture : true } ) ; } disconnectedCallback ( ) { this . dataContainer . removeEventListener ( 'mousemove' , this . setSelectedDate ) ; this . dataContainer . removeEventListener ( 'mouseleave' , this . hideTooltip ) ; this . dataContainer . removeEventListener ( 'mousedown' , this . hideTooltip ) ; } setSelectedDate = ( { offsetX , buttons } ) => { const isMouseBeingPressed = buttons > 0 ; if ( ! isMouseBeingPressed && offsetX != null ) { const { start , end } = this . viewport ; const { width } = this . size ; const ratio = offsetX / width ; const viewportDuration = end . getTime ( ) - start . getTime ( ) ; const selectedDateMS = start . getTime ( ) + viewportDuration * ratio ; this . selectedDate = new Date ( selectedDateMS ) ; } else { this . selectedDate = undefined ; } } ; hideTooltip = ( ) => { this . selectedDate = undefined ; } ; render ( ) { const resolution = this . dataStreams . length > 0 ? this . dataStreams [ 0 ] . resolution : undefined ; if ( resolution == null || this . selectedDate == null ) { return null ; } return ( < sc - tooltip - rows trendResults = { this . trendResults } size = { this . size } dataStreams = { this . dataStreams } viewport = { this . viewport } selectedDate = { this . selectedDate } thresholds = { this . thresholds } maxDurationFromDate = { this . maxDurationFromDate } showDataStreamColor = { this . showDataStreamColor } dataAlignment = { this . dataAlignment } supportString = { this . supportString } visualizesAlarms = { this . visualizesAlarms } showBlankTooltipRows = { this . showBlankTooltipRows } sortPoints = { this . sortPoints } top = { this . top } / > ) ; } }