import uniqBy from 'lodash.uniqby' ; import { Component , h , Prop } from '@stencil/core' ; import { Threshold } from '../../common/types' ; import { COMPARISON_OPERATOR } from '../../common/constants' ; const COMPARISON_SYMBOL = { [ COMPARISON_OPERATOR . EQUAL ] : '=' , [ COMPARISON_OPERATOR . LESS_THAN ] : '<' , [ COMPARISON_OPERATOR . LESS_THAN_EQUAL ] : '<=' , [ COMPARISON_OPERATOR . GREATER_THAN ] : '>' , [ COMPARISON_OPERATOR . GREATER_THAN_EQUAL ] : '>=' , } ; const label = ( threshold ) : string => { if ( threshold . comparisonOperator === COMPARISON_OPERATOR . EQUAL ) { return String ( threshold . value ) ; } return `y ${ COMPARISON_SYMBOL [ threshold . comparisonOperator ] } ${ threshold . value }` ; } ; const key = ( { value , comparisonOperator , color } ) : string => `${ value }-${ comparisonOperator }-${ color }` ; @ Component ( { tag : 'sc-threshold-legend' , styleUrl : 'sc-threshold-legend.css' , shadow : false , } ) export class ScThresholdLegend { @ Prop ( ) thresholds ! : Threshold [ ] ; uniqueThresholds ( ) { return uniqBy ( this . thresholds , key ) ; } render ( ) { return this . uniqueThresholds ( ) . map ( threshold => ( < sc - threshold - legend - row key = { key ( threshold ) } color = { threshold . color } label = { label ( threshold ) } / > ) ) ; } }