Permalink
Cannot retrieve contributors at this time
Name already in use
A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
PowerPanel-Frontend/src/app/statistics/statistics.component.html
Go to fileThis commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
166 lines (162 sloc)
6.55 KB
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="container "> | |
| <!-- | |
| <div class ="row mt-3"> | |
| <div class = "col-md-2"> | |
| <button class="btn btn-primary btn-block m-1" (click)="viewRecent()">Recent</button> | |
| </div> | |
| <div class = "col-md-2"> | |
| <button class="btn btn-primary btn-block m-1" (click)="viewHour()">Last Hour</button> | |
| </div> | |
| <div class = "col-md-2"> | |
| <button class="btn btn-primary btn-block m-1" (click)="viewDay()">Last Day</button> | |
| </div> | |
| <div class = "col-md-2"> | |
| <button class="btn btn-primary btn-block m-1" (click)="viewWeek()">Last Week</button> | |
| </div> | |
| <div class = "col-md-2"> | |
| <button class="btn btn-primary btn-block m-1" (click)="viewMonth()">Last Month</button> | |
| </div> | |
| <div class = "col-md-2"> | |
| <button class="btn btn-primary btn-block m-1" (click)="viewYear()">Last Year</button> | |
| </div> | |
| </div> --> | |
| <div class = "row mt-3"> | |
| <button class="btn btn-primary btn-block m-1" (click) = "goToGraphGen()">Graph</button> | |
| </div> | |
| <div class="row mt-3 text-center" *ngIf = "isRecent"> | |
| <div class="col-md-4"> | |
| <radial-gauge width="200" units="Amps" title="Phase A Current" height="200" major-ticks="0,60,120,180,240,300" [value]="pACurrent" > | |
| </radial-gauge> | |
| </div> | |
| <div class="col-md-4"> | |
| <radial-gauge width="200" units="°C" title="Phase B Current" height="200" major-ticks="0,60,120,180,240,300" [value]="pBCurrent"> | |
| </radial-gauge> | |
| </div> | |
| <div class="col-md-4"> | |
| <radial-gauge width="200" units="°C" title="Phase C Current" height="200" major-ticks="0,60,120,180,240,300" [value]="pCCurrent"> | |
| </radial-gauge> | |
| </div> | |
| <div class="col-md-4"> | |
| <radial-gauge width="200" units="RPM" title="Engine Speed" height="200" major-ticks="0,375,750,1125,1500,1875, 2250, 2625,3000" max-value = "3000" [value]="engineSpeed"> | |
| </radial-gauge> | |
| </div> | |
| <div class="col-md-4"> | |
| <radial-gauge width="200" units="%" title="Fuel Level" height="200" major-ticks="0,12.5,25,37.5,50,62.5,75,87.5,100" max-value = "100" [value]="fuelLevel"> | |
| </radial-gauge> | |
| </div> | |
| <div class="col-md-4"> | |
| <radial-gauge width="200" units="Volts" title="Phase A Voltage" height="200" major-ticks="0,60,120,180,240,300" max-value = "300" [value]="pAVoltage"> | |
| </radial-gauge> | |
| </div> | |
| <div class="col-md-4"> | |
| <radial-gauge width="200" units="Volts" title="Phase B Voltage" height="200" major-ticks="0,60,120,180,240,300" max-value = "300" [value]="pBVoltage"> | |
| </radial-gauge> | |
| </div> | |
| <div class="col-md-4"> | |
| <radial-gauge width="200" units="Volts" title="Phase C Voltage" height="200" major-ticks="0,60,120,180,240,300" max-value = "300" [value]="pCVoltage"> | |
| </radial-gauge> | |
| </div> | |
| <div class="col-md-4"> | |
| <radial-gauge width="200" units="Volts" title="Average Current" height="200" major-ticks="0,125,250,375,500,625,750, 875, 1000" max-value = "1000" [value]=""> | |
| </radial-gauge> | |
| </div> | |
| <!--<div class="col-md-4"> | |
| <div class = "fusioncharts"> | |
| <fusioncharts class = "fusioncharts" type="angulargauge" dataFormat="json" width= "100%" height = "230" [dataSource]="fuelTempGraphData" > | |
| </fusioncharts> | |
| </div> | |
| </div> | |
| <div class="col-md-4"> | |
| <div class = "fusioncharts"> | |
| <fusioncharts class = "fusioncharts" type="angulargauge" dataFormat="json" width= "100%" height = "230" [dataSource]="fuelTempGraphData" > | |
| </fusioncharts> | |
| </div> | |
| </div> --> | |
| </div> | |
| <div class="row mt-3 text-center" *ngIf = "isRecent"> | |
| <div class="col-md-3"> | |
| <linear-gauge width="150" title = "Coolant Temperature" major-ticks = "0,30,60,90,120" max-value = "120" height="350" [value] = "coolantTemp"></linear-gauge> | |
| <!--<radial-gauge width="200" units="°C" title="Oil Temperature" height="200" max-value = "220" major-ticks="0,20,40,60,80,100,120,140,160,180,200,220" highlights='[{"from": 160, "to": 220, "color": "rgba(200, 50, 50, .75)"} | |
| ]' [value]="oilTemp"> | |
| </radial-gauge> --> | |
| </div> | |
| <div class="col-md-3"> | |
| <!--<radial-gauge width="200" units="°C" title="Fuel Temperature" height="200" [value]="fuelTemp"></radial-gauge> --> | |
| <linear-gauge width="150" title = "Oil Pressure" major-ticks = "0,50,100,150,200" max-value = "120" height="350" [value] = "oilPressure"></linear-gauge> | |
| </div> | |
| <div class="col-md-3"> | |
| <!--<radial-gauge width="200" units="°C" title="Fuel Temperature" height="200" [value]="fuelTemp"></radial-gauge> --> | |
| <div (click)= "goToGraphSpec('oil.temp')"> | |
| <linear-gauge width="150" title = "Oil Temperature" major-ticks = "0,50,100,150,200" max-value = "200" height="350" [value]="oilTemp"></linear-gauge> | |
| </div> | |
| </div> | |
| <div class="col-md-3"> | |
| <!--<radial-gauge width="200" units="°C" title="Fuel Temperature" height="200" [value]="fuelTemp"></radial-gauge> --> | |
| <div (click)= "goToGraphSpec('fuel.temp')"> | |
| <linear-gauge width="150" title = "Fuel Temperature" major-ticks = "0,50,100,150,200" max-value = "200" height="350" [value]="fuelTemp"></linear-gauge> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- | |
| <div class="row mt-3 text-center" *ngIf = "isHour"> | |
| <div class="col-md-4"> | |
| hour | |
| </div> | |
| <div class="col-md-4"> | |
| check | |
| </div> | |
| <div class="col-md-4"> | |
| 1 | |
| </div> | |
| </div> | |
| <div class="row mt-3 text-center" *ngIf = "isDay"> | |
| <div class="col-md-4"> | |
| day | |
| </div> | |
| <div class="col-md-4"> | |
| check | |
| </div> | |
| <div class="col-md-4"> | |
| 1 | |
| </div> | |
| </div> | |
| <div class="row mt-3 text-center" *ngIf = "isWeek"> | |
| <div class="col-md-4"> | |
| week | |
| </div> | |
| <div class="col-md-4"> | |
| check | |
| </div> | |
| <div class="col-md-4"> | |
| 1 | |
| </div> | |
| </div> | |
| <div class="row mt-3 text-center" *ngIf = "isMonth"> | |
| <div class="col-md-4"> | |
| month | |
| </div> | |
| <div class="col-md-4"> | |
| check | |
| </div> | |
| <div class="col-md-4"> | |
| 1 | |
| </div> | |
| </div> | |
| <div class="row mt-3 text-center" *ngIf = "isYear"> | |
| <div class="col-md-4"> | |
| year | |
| </div> | |
| <div class="col-md-4"> | |
| check | |
| </div> | |
| <div class="col-md-4"> | |
| 1 | |
| </div> | |
| </div> | |
| </div> | |
| --> | |
| <!-- <div class="stat-temp" id="temp"> | |
| <form class="bubble"> | |
| <input type="number" name="quantity" min="30" max="100" placeholder="65"> | |
| </form> | |
| </div> --> |