import { Component , h , Prop } from '@stencil/core' ; import { DataPoint , DataStream , ViewPort } from '../../../utils/dataTypes' ; import { activePoints , POINT_TYPE } from '../sc-webgl-base-chart/activePoints' ; import { LegendConfig , Threshold , ThresholdColorAndIcon } from '../common/types' ; import { TrendResult } from '../common/trends/types' ; import { getTrendValue } from '../common/trends/trendAnalysis' ; import { getTrendLabel } from '../common/trends/trendConfig' ; import { isSupportedDataType } from '../../../utils/predicates' ; import { breachedThreshold } from '../common/annotations/breachedThreshold' ; import { DATA_ALIGNMENT , LEGEND_POSITION } from '../common/constants' ; import { StreamType } from '../../../utils/dataConstants' ; import { Components } from '../../../components.d' ; import ScLegendRow = Components . ScLegendRow ; const noop = ( ) => { } ; @ Component ( { tag : 'sc-legend' , styleUrl : './sc-legend.css' , shadow : false , } ) export class ScLegend { @ Prop ( ) config ! : LegendConfig ; @ Prop ( ) viewport ! : ViewPort ; @ Prop ( ) dataStreams ! : DataStream [ ] ; @ Prop ( ) updateDataStreamName ! : ( { streamId , name } : { streamId : string ; name : string ; } ) => void ; @ Prop ( ) visualizesAlarms ! : boolean ; @ Prop ( ) isEditing : boolean = false ; @ Prop ( ) isLoading ! : boolean ; @ Prop ( ) thresholds ! : Threshold [ ] ; @ Prop ( ) supportString : boolean ; @ Prop ( ) showDataStreamColor ! : boolean ; @ Prop ( ) trendResults : TrendResult [ ] = [ ] ; visualizedDataStreams = ( ) : DataStream [ ] => { const streams = this . dataStreams . filter ( isSupportedDataType ( this . supportString ) ) ; if ( this . visualizesAlarms ) { return streams ; } return streams . filter ( ( { streamType } ) => streamType !== StreamType . ALARM ) ; } ; /**
     * Returns the given color of a breached threshold, if there is one.
     */ breachedThresholdColor = ( point , dataStream ) : ThresholdColorAndIcon | undefined => { const threshold = breachedThreshold ( { value : point && point . y , date : this . viewport . end , dataStreams : this . dataStreams , dataStream , thresholds : this . thresholds , } ) ; return threshold ? { color : threshold . color , icon : threshold . icon } : undefined ; } ; render ( ) { const points = activePoints ( { viewport : this . viewport , dataStreams : this . dataStreams , selectedDate : this . viewport . end , allowMultipleDates : true , dataAlignment : DATA_ALIGNMENT . EITHER , } ) ; const lastDate = points . length === 0 || points [ 0 ] . point == null ? this . viewport . end . getTime ( ) : points [ 0 ] . point . x ; return ( < div class = "legend-container" style = { { flexDirection : this . config . position === LEGEND_POSITION . RIGHT ? 'column' : 'unset' } } > { this . visualizedDataStreams ( ) . map ( dataStream => { const dataPoint = points . find ( p => p . streamId === dataStream . id ) ; const point = dataPoint ? dataPoint . point : undefined ; const { color : valueColor = undefined , icon = undefined } = this . breachedThresholdColor ( point , dataStream ) || { } ; return [ < sc - legend - row streamId = { dataStream . id } label = { dataStream . name } detailedLabel = { dataStream . detailedName } color = { dataStream . color || 'black' } valueColor = { valueColor } point = { point } pointType = { dataPoint && POINT_TYPE . DATA } unit = { dataStream . unit } updateDataStreamName = { this . updateDataStreamName } isEditing = { this . isEditing } isLoading = { this . isLoading } showDataStreamColor = { this . showDataStreamColor } icon = { icon } / > , ... this . trendResults . reduce ( ( rows , trendResult ) => { if ( trendResult . dataStreamId === dataStream . id ) { rows . push ( < sc - legend - row streamId = { dataStream . id } label = { getTrendLabel ( dataStream . name , trendResult . type ) } detailedLabel = { dataStream . detailedName && getTrendLabel ( dataStream . detailedName , trendResult . type ) } color = { trendResult . color || dataStream . color || 'black' } valueColor = { valueColor } point = { { x : lastDate , y : getTrendValue ( trendResult , lastDate ) , } } pointType = { POINT_TYPE . TREND } unit = { dataStream . unit } updateDataStreamName = { noop } isEditing = { false } isLoading = { this . isLoading } showDataStreamColor = { this . showDataStreamColor } / > ) ; } return rows ; } , [ ] ) , ] ; } ) } < /div>); } }