import { Component } from "@angular/core" ; import { ViewComponent } from "../view-component" ; @ Component ( { selector : "app-display-percentage" , templateUrl : "./display-percentage.component.html" , styleUrls : [ "./display-percentage.component.scss" ] , } ) export class DisplayPercentageComponent extends ViewComponent { param percent private static fromPercent ( percent ) { if ( Number . isNaN ( percent ) ) { return "rgba(130,130,130,0.4)" ; } const color = ( percent / 100 ) * 120 ; return "hsl(" + color + ", 100%, 85%)" ; } resultColorStyleBuilder ( value ) { return { "background-color" : DisplayPercentageComponent . fromPercent ( value ) , "border-radius" : "5%" , padding : "5px" , width : "min-content" , } ; } }