Skip to content

Commit

Permalink
Merge pull request #75 from Northeastern-Electric-Racing/#72-graph-da…
Browse files Browse the repository at this point in the history
…ta-graph-caption

#72-graph-data-graph-caption
  • Loading branch information
Peyton-McKee authored Nov 27, 2023
2 parents bec953c + f16e88c commit f872f73
Show file tree
Hide file tree
Showing 24 changed files with 244 additions and 49 deletions.
10 changes: 10 additions & 0 deletions angular-client/src/api/run.api.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import { urls } from './urls';

/**
* Fetches the run with the given id
* @param id The id of the run to request
* @returns The requested run
*/
export const getRunById = (id: number) => {
return fetch(urls.getRunById(id));
};
7 changes: 6 additions & 1 deletion angular-client/src/api/urls.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,15 @@ const getAllSystems = () => `${baseURL}/systems`;
/* Data */
const getDataByDataTypeName = (dataTypeName: string) => `${baseURL}/data/${dataTypeName}`;

/* Runs */
const getRunById = (id: number) => `${baseURL}/runs/${id}`;

export const urls = {
getAllNodes,

getAllSystems,

getDataByDataTypeName
getDataByDataTypeName,

getRunById
};
2 changes: 2 additions & 0 deletions angular-client/src/app/app.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import ErrorPage from 'src/components/error-page/error-page.component';
import Header from 'src/components/header/header.component';
import LandingHeader from 'src/pages/landing-page/landing-header/landing-header';
import GraphHeader from 'src/pages/graph-page/graph-header/graph-header.component';
import GraphInfo from 'src/pages/graph-page/graph-caption/graph-caption.component';
import { NgApexchartsModule } from 'ng-apexcharts';
import Graph from 'src/pages/graph-page/graph/graph.component';

Expand All @@ -37,6 +38,7 @@ import Graph from 'src/pages/graph-page/graph/graph.component';
Header,
LandingHeader,
GraphHeader,
GraphInfo,
Graph
],
imports: [
Expand Down
2 changes: 1 addition & 1 deletion angular-client/src/app/context/app-context.component.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<landing-page *ngIf="showLandingPage; else elseBlock" [storage]="storage" />
<ng-template #elseBlock>
<graph-page [serverService]="serverService" [storage]="storage" />
<graph-page [realTime]="true" [serverService]="serverService" [storage]="storage" [runId]="1" />
</ng-template>
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import { StyleVariant } from 'src/utils/enumerations/StyleVariant';
export default class Typography implements OnInit {
@Input() variant!: StyleVariant;
@Input() content?: string | null;
@Input() additionalStyles?: string | null;
@Input() additionalStyles?: string;
style!: string;

ngOnInit(): void {
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
.info-container {
font: small-caption;
width: 100%;
bottom: 0;
background-color: #323232;
border-radius: 10px;
display: flex;
flex-direction: row;
justify-content: space-between;
color: #ffffff;
padding-right: 8px;
padding-left: 8px;
}

.left-info {
text-align: left;
}

.right-info {
text-align: right;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<div class="info-container">
<div class="left-info">
<div *ngIf="dataTypeName && dataTypeUnit; else elseBlock">
<typography variant="header" [content]="dataTypeName" />
<typography variant="subheader" [content]="value + ' ' + dataTypeUnit" />
</div>
<ng-template #elseBlock>
<typography variant="header" content="No Data Selected" />
</ng-template>
</div>
<div class="right-info">
<div class="driver-info">
<typography variant="header" [content]="currentDriver ?? 'No Driver Selected'" />
</div>
<div class="system-info">
<typography variant="subheader" [content]="currentSystem ?? 'No System Selected'" />
<typography variant="subheader" [content]="currentLocation ?? 'No Location Selected'" />
</div>
</div>
</div>
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import { Component, Input } from '@angular/core';
import { Subject } from 'rxjs';
import { DataValue } from 'src/utils/socket.utils';
import { DataType } from 'src/utils/types.utils';

@Component({
selector: 'graph-caption',
styleUrls: ['./graph-caption.component.css'],
templateUrl: './graph-caption.component.html'
})
export default class GraphInfo {
@Input() dataType!: Subject<DataType>;
@Input() currentValue!: Subject<DataValue | undefined>;
@Input() currentDriver?: string;
@Input() currentSystem?: string;
@Input() currentLocation?: string;
dataTypeName?: string;
dataTypeUnit?: string;
value?: string | number;

ngOnInit(): void {
this.dataType.subscribe((dataType: DataType) => {
this.dataTypeName = dataType.name;
this.dataTypeUnit = dataType.unit;
});
this.currentValue.subscribe((value?: DataValue) => {
this.value = value?.value ?? 'No Values';
});
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,6 @@
<typography variant="large-header" content="ARGOS" />
</div>
<div header-right>
<typography variant="large-header" content="Real Time" />
<typography variant="large-header" [content]="realTime ? 'Real Time' : 'Run #' + runId" />
</div>
</header>
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Component } from '@angular/core';
import { Component, Input } from '@angular/core';

/**
* Graph Header Component to display the graph page header.
Expand All @@ -9,4 +9,7 @@ import { Component } from '@angular/core';
templateUrl: './graph-header.component.html',
styleUrls: ['./graph-header.component.css']
})
export default class GraphHeader {}
export default class GraphHeader {
@Input() realTime?: boolean;
@Input() runId!: number;
}
36 changes: 35 additions & 1 deletion angular-client/src/pages/graph-page/graph-page.component.css
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,43 @@
max-height: inherit;
}

.container {
display: flex;
flex-flow: column;
height: 100%;
}

.graph-header {
flex: 0 1 auto;
}

.content-div {
flex: 1 1 auto;
display: flex;
flex-direction: row;
flex-flow: row;
height: 100%;
width: 100%;
}

.sidebar {
flex: 0 1 auto;
}

.right-container {
flex: 1 1 auto;
display: flex;
flex-flow: column;
height: 100%;
overflow: hidden;
padding-right: 16px;
}

.graph {
flex: 4 1 auto;
}

.graph-caption {
flex: 1 0 100px;
margin-bottom: 8px;
margin-right: 8px;
}
22 changes: 17 additions & 5 deletions angular-client/src/pages/graph-page/graph-page.component.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div *ngIf="!nodes || nodesIsLoading; else checkError">
<div *ngIf="!nodes || nodesIsLoading || !run || runIsLoading; else checkError">
<loading-page />
</div>
<ng-template #checkError>
Expand All @@ -7,9 +7,21 @@
</div>
</ng-template>
<ng-template #displayData>
<graph-header />
<div class="content-div">
<sidebar [nodes]="nodes!" [selectDataType]="setSelectedDataType" />
<graph [valuesSubject]="selectedDataTypeValuesSubject" />
<div class="container">
<graph-header class="graph-header" [realTime]="realTime" [runId]="runId" />
<div class="content-div">
<sidebar [nodes]="nodes!" [selectDataType]="setSelectedDataType" class="sidebar" />
<div class="right-container">
<graph [valuesSubject]="selectedDataTypeValuesSubject" class="graph" />
<graph-caption
[dataType]="selectedDataType"
[currentValue]="currentValue"
[currentDriver]="run?.driverName"
[currentSystem]="run?.systemName"
[currentLocation]="run?.locationName"
class="graph-caption"
/>
</div>
</div>
</div>
</ng-template>
56 changes: 39 additions & 17 deletions angular-client/src/pages/graph-page/graph-page.component.ts
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import { Component, Input, OnInit } from '@angular/core';
import { Subject } from 'rxjs';
import { BehaviorSubject, Subject } from 'rxjs';
import { getDataByDataTypeName } from 'src/api/data.api';
import { getAllNodes } from 'src/api/node.api';
import { getRunById } from 'src/api/run.api';
import APIService from 'src/services/api.service';
import Storage from 'src/services/storage.service';
import { DataValue } from 'src/utils/socket.utils';
import { DataType, Node } from 'src/utils/types.utils';
import { DataType, Node, Run } from 'src/utils/types.utils';

@Component({
selector: 'graph-page',
Expand All @@ -15,16 +16,23 @@ import { DataType, Node } from 'src/utils/types.utils';
export default class GraphPage implements OnInit {
@Input() serverService!: APIService;
@Input() storage!: Storage;
@Input() runId!: number;
@Input() realTime?: boolean;

nodes?: Node[];
nodesIsLoading = true;
nodesIsError = false;
nodesError?: Error;
selectedDataType?: DataType;
selectedDataTypeValuesSubject: Subject<DataValue[]> = new Subject<DataValue[]>();

run?: Run;
runIsLoading = true;

selectedDataType: Subject<DataType> = new Subject<DataType>();
selectedDataTypeValuesSubject: BehaviorSubject<DataValue[]> = new BehaviorSubject<DataValue[]>([]);
currentValue: Subject<DataValue | undefined> = new Subject<DataValue | undefined>();
selectedDataTypeValuesIsLoading = false;
selectedDataTypeValuesIsError = false;
selectedDataTypeValuesError?: Error;
realTime?: boolean;

ngOnInit(): void {
const nodeQueryResponse = this.serverService.query<Node[]>(getAllNodes);
Expand All @@ -40,31 +48,45 @@ export default class GraphPage implements OnInit {
this.nodes = data;
});

const runQueryResponse = this.serverService.query<Run>(() => getRunById(this.runId));

runQueryResponse.isLoading.subscribe((isLoading: boolean) => {
this.runIsLoading = isLoading;
});

runQueryResponse.data.subscribe((run) => {
this.run = run;
});

this.setSelectedDataType = (dataType: DataType) => {
this.selectedDataType = dataType;
this.selectedDataType.next(dataType);
if (this.realTime) {
// this.selectedDataTypeValuesSubject =
// this.storage.get(
// JSON.stringify({
// dataType: dataType.name,
// unit: dataType.unit
// })
// ) ?? [];
const key = JSON.stringify({
name: dataType.name,
unit: dataType.unit
});
const valuesSubject = this.storage.get(key);
if (valuesSubject) {
this.selectedDataTypeValuesSubject.next(valuesSubject.getValue());
} else {
this.storage.set(key, this.selectedDataTypeValuesSubject);
}
} else {
this.selectedDataTypeValuesIsLoading = true;
this.selectedDataTypeValuesIsError = false;
this.selectedDataTypeValuesError = undefined;

const queryResponse = this.serverService.query<DataValue[]>(() => getDataByDataTypeName(dataType.name));
queryResponse.isLoading.subscribe((isLoading: boolean) => {
const dataQueryResponse = this.serverService.query<DataValue[]>(() => getDataByDataTypeName(dataType.name));
dataQueryResponse.isLoading.subscribe((isLoading: boolean) => {
this.selectedDataTypeValuesIsLoading = isLoading;
});
queryResponse.error.subscribe((error: Error) => {
dataQueryResponse.error.subscribe((error: Error) => {
this.selectedDataTypeValuesIsError = true;
this.selectedDataTypeValuesError = error;
});
queryResponse.data.subscribe((data: DataValue[]) => {
dataQueryResponse.data.subscribe((data: DataValue[]) => {
this.selectedDataTypeValuesSubject.next(data);
this.currentValue.next(data.pop());
});
}
};
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
:host {
#chart-container {
width: 100%;
height: 100%;
}
11 changes: 1 addition & 10 deletions angular-client/src/pages/graph-page/graph/graph.component.html
Original file line number Diff line number Diff line change
@@ -1,10 +1 @@
<apx-chart
[series]="options.series"
[chart]="options.chart"
[xaxis]="options.xaxis"
[dataLabels]="options.dataLabels"
[markers]="options.markers"
[tooltip]="options.tooltip"
[fill]="options.fill"
[grid]="options.grid"
/>
<div id="chart-container"></div>
Loading

0 comments on commit f872f73

Please sign in to comment.