import { AbstractDataView } from "./abstract-data.view" ; import { PowerDataModel } from "@elevate/shared/models" ; export class CyclingPowerCurveView extends AbstractDataView { protected powerData : PowerDataModel ; constructor ( powerData , units ) { super ( units , "scatter-line" , true ) ; this . mainColor = [ 63 , 64 , 72 ] ; this . powerData = powerData ; this . graphTitle = "Power best efforts vs. time" ; this . setupScatterLineGraph ( this . powerData . powerCurve . map ( split => { return { x : split . time , y : split . watts } ; } ) ) ; this . setupPointDataTable ( this . powerData . powerCurve ) ; } public render ( ) { this . content += this . generateSectionTitle ( "<img src=\"" + this . appResources . boltIcon + "\" style=\"vertical-align: baseline; height:20px;\"/> POWER CURVE <a target=\"_blank\" href=\"" + this . appResources . settingsLink + "#/zonesSettings/power\" style=\"float: right;margin-right: 10px;\"><img src=\"" + this . appResources . cogIcon + "\" style=\"vertical-align: baseline; height:20px;\"/></a>" ) ; this . makeGrid ( 3 , 4 ) ; this . generateCanvasForGraph ( ) ; this . injectToContent ( ) ; } protected insertDataIntoGrid ( ) { return ; } }