-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
#155 Charging Page
- Loading branch information
Showing
87 changed files
with
1,291 additions
and
49 deletions.
There are no files selected for viewing
Binary file not shown.
Binary file not shown.
Binary file not shown.
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
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
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
6 changes: 6 additions & 0 deletions
6
angular-client/src/components/double-line-graph/double-line-graph.component.css
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| :host { | ||
| display: block; | ||
| width: 100%; | ||
| height: 100%; | ||
| position: relative; | ||
| } |
1 change: 1 addition & 0 deletions
1
angular-client/src/components/double-line-graph/double-line-graph.component.html
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| <div style="height: 100%; width: 100%" [id]="graphContainerId"></div> |
194 changes: 194 additions & 0 deletions
194
angular-client/src/components/double-line-graph/double-line-graph.component.ts
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,194 @@ | ||
| import { Component, Input, OnInit } from '@angular/core'; | ||
| import * as ApexCharts from 'apexcharts'; | ||
| import { | ||
| ApexAxisChartSeries, | ||
| ApexXAxis, | ||
| ApexYAxis, | ||
| ApexDataLabels, | ||
| ApexChart, | ||
| ApexMarkers, | ||
| ApexGrid, | ||
| ApexTooltip, | ||
| ApexFill, | ||
| ApexStroke, | ||
| ApexLegend | ||
| } from 'ng-apexcharts'; | ||
| import { DialogService } from 'primeng/dynamicdialog'; | ||
| import { GraphDialog } from '../graph-dialog/graph-dialog.component'; | ||
| import { GraphData } from 'src/utils/types.utils'; | ||
|
|
||
| type ChartOptions = { | ||
| series: ApexAxisChartSeries; | ||
| chart: ApexChart; | ||
| xaxis: ApexXAxis; | ||
| yaxis: ApexYAxis; | ||
| dataLabels: ApexDataLabels; | ||
| markers: ApexMarkers; | ||
| grid: ApexGrid; | ||
| tooltip: ApexTooltip; | ||
| fill: ApexFill; | ||
| stroke: ApexStroke; | ||
| legend: ApexLegend; | ||
| colors: string[]; | ||
| }; | ||
|
|
||
| @Component({ | ||
| selector: 'double-line-graph', | ||
| templateUrl: './double-line-graph.component.html', | ||
| styleUrls: ['./double-line-graph.component.css'], | ||
| providers: [DialogService] | ||
| }) | ||
| export class DoubleLineGraphComponent implements OnInit { | ||
| @Input() data1!: GraphData[]; | ||
| @Input() color1!: string; // Must be hex | ||
| @Input() title1?: string; | ||
| @Input() data2!: GraphData[]; | ||
| @Input() color2!: string; // Must be hex | ||
| @Input() title2?: string; | ||
| @Input() header?: string; | ||
| @Input() graphContainerId!: string; | ||
| options!: ChartOptions; | ||
| chart!: ApexCharts; | ||
| series: ApexAxisChartSeries = []; | ||
|
|
||
| constructor(public dialogService: DialogService) {} | ||
|
|
||
| openDialog = () => { | ||
| this.dialogService.open(GraphDialog, { | ||
| header: this.header, | ||
| data: { | ||
| data: this.data1, | ||
| color: this.color1, | ||
| title: this.title1 | ||
| } | ||
| }); | ||
| }; | ||
|
|
||
| updateChart = () => { | ||
| this.series = [ | ||
| { | ||
| name: this.title1, | ||
| data: this.data1 | ||
| }, | ||
| { | ||
| name: this.title2, | ||
| data: this.data2 | ||
| } | ||
| ]; | ||
| this.chart.updateSeries(this.series); | ||
| setTimeout(() => { | ||
| this.updateChart(); | ||
| }, 1000); | ||
| }; | ||
|
|
||
| ngOnInit(): void { | ||
| this.series = [ | ||
| { | ||
| name: this.title1, | ||
| data: this.data1 | ||
| }, | ||
| { | ||
| name: this.title2, | ||
| data: this.data2 | ||
| } | ||
| ]; | ||
|
|
||
| this.options = { | ||
| series: this.series, | ||
| chart: { | ||
| id: 'graph', | ||
| type: 'line', | ||
| height: '100%', | ||
| zoom: { | ||
| autoScaleYaxis: true | ||
| }, | ||
| animations: { | ||
| enabled: true, | ||
| easing: 'linear', | ||
| dynamicAnimation: { | ||
| speed: 1000 | ||
| } | ||
| }, | ||
| toolbar: { | ||
| show: false | ||
| } | ||
| // background: '#5A5A5A' | ||
| }, | ||
| colors: [this.color1, this.color2], // Set series colors here | ||
| dataLabels: { | ||
| enabled: false | ||
| }, | ||
| stroke: { | ||
| curve: 'straight', | ||
| width: 2 | ||
| }, | ||
| markers: { | ||
| size: 0 | ||
| }, | ||
| xaxis: { | ||
| type: 'category', | ||
| tickAmount: 2, | ||
| labels: { | ||
| show: true, | ||
| style: { | ||
| colors: '#FFFFFF' | ||
| }, | ||
| formatter: (value) => { | ||
| return '' + new Date(value).getHours() + ':' + new Date(value).getMinutes() + ':' + new Date(value).getSeconds(); | ||
| } | ||
| }, | ||
| axisBorder: { | ||
| show: false | ||
| }, | ||
| axisTicks: { | ||
| show: false | ||
| } | ||
| }, | ||
| yaxis: { | ||
| tickAmount: 2, | ||
| labels: { | ||
| style: { | ||
| colors: '#FFFFFF' | ||
| } | ||
| } | ||
| }, | ||
| tooltip: { | ||
| theme: 'dark', | ||
| x: { | ||
| // format by hours and minutes and seconds | ||
| format: 'M/d/yy, h:mm:ss' | ||
| } | ||
| }, | ||
| fill: { | ||
| type: 'linear', | ||
| gradient: { | ||
| shadeIntensity: 1, | ||
| opacityFrom: 1, | ||
| opacityTo: 1, | ||
| stops: [0, 100, 0, 100] | ||
| } | ||
| }, | ||
| grid: { | ||
| show: false | ||
| }, | ||
| legend: { | ||
| labels: { | ||
| colors: '#fffff4' // Set legend label color to black | ||
| } | ||
| } | ||
| }; | ||
|
|
||
| // Delay rendering to ensure the container is available | ||
| setTimeout(() => { | ||
| const chartContainer = document.getElementById(this.graphContainerId); | ||
| if (!chartContainer) { | ||
| console.log('Container with id ' + this.graphContainerId + ' not found'); | ||
| return; | ||
| } | ||
|
|
||
| this.chart = new ApexCharts(chartContainer, this.options); | ||
| this.chart.render(); | ||
| this.updateChart(); | ||
| }, 100); | ||
| } | ||
| } |
File renamed without changes.
Empty file.
Empty file.
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
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
13 changes: 9 additions & 4 deletions
13
angular-client/src/components/info-background/info-background.component.html
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
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
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
9 changes: 5 additions & 4 deletions
9
angular-client/src/components/latency-display/latency-display.html
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,8 @@ | ||
| <info-background title="Latency" icon="timelapse"> | ||
| <hstack> | ||
| <typography variant="subheader" content="Latency:" /> | ||
| <div class="latency-display-body"> | ||
| <div class="latency-display-dot" [style.background-color]="mapColor(latency, medVal)"></div> | ||
| <typography variant="info-value" [content]="latency.toString()" /> | ||
| <typography variant="info-unit" content="ms" /> | ||
| <typography variant="subheader" [content]="latency.toString()" additionalStyles="font-size:25px" /> | ||
| <typography variant="info-unit" content="ms" additionalStyles="padding-top: 5px; font-size:15px;" /> | ||
| </div> | ||
| </info-background> | ||
| </hstack> |
Oops, something went wrong.