import { AbstractDataView } from "./abstract-data.view" ; import { ElevationDataModel } from "@elevate/shared/models" ; export class AscentSpeedDataView extends AbstractDataView { protected elevationData : ElevationDataModel ; constructor ( elevationData , units ) { super ( units ) ; this . mainColor = [ 77 , 51 , 173 ] ; this . setGraphTitleFromUnits ( ) ; this . elevationData = elevationData ; this . setupDistributionGraph ( this . elevationData . ascentSpeedZones ) ; this . setupDistributionTable ( this . elevationData . ascentSpeedZones ) ; } public render ( ) { this . content += this . generateSectionTitle ( "<img src=\"" + this . appResources . tachometerIcon + "\" style=\"vertical-align: baseline; height:20px;\"/> ASCENT SPEED<a target=\"_blank\" href=\"" + this . appResources . settingsLink + "#/zonesSettings/ascent\" style=\"float: right;margin-right: 10px;\"><img src=\"" + this . appResources . cogIcon + "\" style=\"vertical-align: baseline; height:20px;\"/></a>" ) ; this . makeGrid ( 3 , 2 ) ; this . insertDataIntoGrid ( ) ; this . generateCanvasForGraph ( ) ; this . injectToContent ( ) ; } protected insertDataIntoGrid ( ) { const ascentSpeedAvg = this . elevationData . ascentSpeed . avg ; let ascentSpeedAvgDisplay ; if ( ascentSpeedAvg ) { if ( ascentSpeedAvg === - 1 ) { ascentSpeedAvgDisplay = "&infin;" ; } else { ascentSpeedAvgDisplay = ascentSpeedAvg . toFixed ( 0 ) ; } } this . insertContentAtGridPosition ( 0 , 0 , ascentSpeedAvgDisplay , "Avg Ascent Speed or VAM" , "Vm/h" , "displayAdvancedElevationData" ) ; this . insertContentAtGridPosition ( 0 , 1 , this . elevationData . ascentSpeed . lowerQuartile , "25% Quartile Ascent Speed" , "Vm/h" , "displayAdvancedElevationData" ) ; this . insertContentAtGridPosition ( 1 , 1 , this . elevationData . ascentSpeed . median , "50% Quartile Ascent Speed" , "Vm/h" , "displayAdvancedElevationData" ) ; this . insertContentAtGridPosition ( 2 , 1 , this . elevationData . ascentSpeed . upperQuartile , "75% Quartile Ascent Speed" , "Vm/h" , "displayAdvancedElevationData" ) ; } }