Skip to content

Commit

Permalink
#172 - mobile view fixes + double line graph fix
Browse files Browse the repository at this point in the history
  • Loading branch information
@bracyw
bracyw committed Sep 14, 2024
1 parent e54a09b commit b524790
Show file tree
Hide file tree
Showing 5 changed files with 119 additions and 83 deletions.
30 changes: 26 additions & 4 deletions angular-client/src/components/double-line-graph/double-line-graph.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,9 +47,13 @@ export class DoubleLineGraphComponent implements OnInit {
@Input() title2?: string;
@Input() header?: string;
@Input() graphContainerId!: string;
@Input({ required: false }) timeRangeSec!: number;
options!: ChartOptions;
chart!: ApexCharts;
series: ApexAxisChartSeries = [];
timeDiffMs: number = 0;
isSliding: boolean = false;
timeRangeMs: number = 120000; // 2 minutes in ms

constructor(public dialogService: DialogService) {}

Expand All @@ -68,20 +72,39 @@ export class DoubleLineGraphComponent implements OnInit {
this.series = [
{
name: this.title1,
data: this.data1
data: Array.from(this.data1)
},
{
name: this.title2,
data: this.data2
data: Array.from(this.data2)
}
];
// temp fix, for now just basing change on data1 length...
// even though probably should check data1 also
if (!this.isSliding && this.data1.length > 2) {
this.timeDiffMs = this.data1[this.data1.length - 1].x - this.data1[0].x;
}

if (!this.isSliding && this.timeDiffMs > this.timeRangeMs) {
this.isSliding = true;
this.chart.updateOptions({
...this.options,
xaxis: {
...this.options.xaxis,
range: this.timeRangeMs
}
});
}

this.chart.updateSeries(this.series);
setTimeout(() => {
this.updateChart();
}, 1000);
}, 800);
};

ngOnInit(): void {
this.timeRangeMs = (this.timeRangeSec ?? 120) * 1000;

this.series = [
{
name: this.title1,
Expand Down Expand Up @@ -128,7 +151,6 @@ export class DoubleLineGraphComponent implements OnInit {
xaxis: {
type: 'category',
tickAmount: 2,
range: 120000,
labels: {
show: true,
style: {
Expand Down
15 changes: 12 additions & 3 deletions ...r-client/src/pages/charging-page/charging-page-mobile/charging-page-mobile.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,18 @@
<state-of-charge-display style="width: 80%; height: 123px" />
<current-display style="width: 80%; height: 122px" />
<pack-temp style="width: 80%; height: 122px" />
<cell-temp-display style="width: 80%; height: 375px" />
<high-low-cell-display style="width: 80%; height: 400px" />
<pack-voltage-display style="width: 80%; height: 290px" />
<cell-temp-display style="width: 80%; height: 210px" />
<info-background style="width: 80%">
<cell-temp-graph></cell-temp-graph>
</info-background>
<high-low-cell-display style="width: 80%; height: 200px" />
<info-background style="width: 80%">
<high-low-cell-graph></high-low-cell-graph>
</info-background>
<pack-voltage-display style="width: 80%; height: 120px" />
<info-background style="width: 80%">
<pack-voltage-graph></pack-voltage-graph>
</info-background>
<fault-display style="width: 80%; height: 375px" />
</vstack>
</vstack>
47 changes: 18 additions & 29 deletions ...ges/charging-page/components/cell-temp/cell-temp-display/cell-temp-display.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,34 +1,23 @@
<info-background svgIcon="thermostat" title="Cell Temp" [button]="resetGraphButton">
<vstack>
<div *ngIf="!isDesktop" style="padding-top: 20px"></div>
<hstack>
<vstack style="width: 10%; padding-bottom: 30px">
<typography variant="info-value" [content]="avgTemp.toString() + '°'" />
<typography variant="info-subtitle" content="Avg. Temp" />
</vstack>
<div *ngIf="!isDesktop" style="padding-top: 20px"></div>
<hstack>
<vstack style="width: 10%; padding-bottom: 30px">
<typography variant="info-value" [content]="avgTemp.toString() + '°'" />
<typography variant="info-subtitle" content="Avg. Temp" />
</vstack>

<div *ngIf="!isDesktop" style="padding-left: 20px"></div>
<!--TODO: temp fix for divider setting pixel height: is only way for divider to show-->
<divider style="height: 100px"></divider>
<div *ngIf="!isDesktop" style="padding-right: 20px"></div>
<div *ngIf="!isDesktop" style="padding-left: 20px"></div>
<!--TODO: temp fix for divider setting pixel height: is only way for divider to show-->
<divider style="height: 100px"></divider>
<div *ngIf="!isDesktop" style="padding-right: 20px"></div>

<vstack style="width: 10%; padding-bottom: 30px">
<typography variant="info-value" [content]="maxTemp.toString() + '°'" />
<typography variant="info-subtitle" content="Max. Temp" />
</vstack>
<!--TODO: (temp fix: padding-bottom) temp fix for voltage graph being centered (and not all the way on bottom of comp)-->
<!--if it is not desktop, we want to show graph seperately... TODO: need to figure out best logic for enforcing that this is done...
<vstack style="width: 10%; padding-bottom: 30px">
<typography variant="info-value" [content]="maxTemp.toString() + '°'" />
<typography variant="info-subtitle" content="Max. Temp" />
</vstack>
<!--TODO: (temp fix: padding-bottom) temp fix for voltage graph being centered (and not all the way on bottom of comp)-->
<!--if it is not desktop, we want to show graph seperately... TODO: need to figure out best logic for enforcing that this is done...
or just don't enforce -->
<cell-temp-graph
style="width: 85%; padding-bottom: 30px"
[resetGraph]="resetGraph"
*ngIf="isDesktop"
></cell-temp-graph>
</hstack>
<cell-temp-graph
style="width: 100%; padding-bottom: 30px"
[resetGraph]="resetGraph"
*ngIf="!isDesktop"
></cell-temp-graph>
</vstack>
<cell-temp-graph style="width: 85%; padding-bottom: 30px" [resetGraph]="resetGraph" *ngIf="isDesktop"></cell-temp-graph>
</hstack>
</info-background>
90 changes: 57 additions & 33 deletions ...-page/components/high-low-cell/high-low-cell-display/high-low-cell-display.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,41 +1,65 @@
<info-background svgIcon="electric_meter" title="Cell Voltage" [button]="resetGraphButton">
<vstack>
<hstack spacing="30px">
<vstack style="width: 10%">
<hstack>
<typography variant="info-value" [content]="delta.toFixed(3) + 'V'" additionalStyles="fontSize:20px" />
</hstack>
<typography variant="info-subtitle" content="Delta" additionalStyles="fontSize:15px" />
</vstack>
<hstack spacing="30px">
<vstack style="width: 10%">
<hstack>
<typography
variant="info-value"
[content]="delta.toFixed(3) + 'V'"
additionalStyles="fontSize:40px"
*ngIf="isDesktop"
/>
<typography
variant="info-value"
[content]="delta.toFixed(3) + 'V'"
additionalStyles="fontSize:20px"
*ngIf="!isDesktop"
/>
</hstack>
<typography variant="info-subtitle" content="Delta" additionalStyles="fontSize:15px" />
</vstack>

<!--TODO: temp fix for divider setting pixel height: is only way for divider to show-->
<divider style="height: 100px"></divider>
<!--TODO: temp fix for divider setting pixel height: is only way for divider to show-->
<divider style="height: 100px"></divider>

<vstack style="width: 10%">
<typography variant="info-value" [content]="lowCellVoltage.toFixed(3) + 'V'" additionalStyles="fontSize:20px" />
<typography variant="info-subtitle" content="Low Cell" additionalStyles="fontSize:15px" />
</vstack>
<vstack style="width: 10%">
<typography
variant="info-value"
[content]="lowCellVoltage.toFixed(3) + 'V'"
additionalStyles="fontSize:40px"
*ngIf="isDesktop"
/>
<typography
variant="info-value"
[content]="lowCellVoltage.toFixed(3) + 'V'"
additionalStyles="fontSize:20px"
*ngIf="!isDesktop"
/>
<typography variant="info-subtitle" content="Low Cell" additionalStyles="fontSize:15px" />
</vstack>

<!--TODO: temp fix for divider setting pixel height: is only way for divider to show-->
<divider style="height: 100px"></divider>
<!--TODO: temp fix for divider setting pixel height: is only way for divider to show-->
<divider style="height: 100px"></divider>

<vstack style="width: 10%">
<hstack>
<typography variant="info-value" [content]="highCellVoltage.toFixed(3) + 'V'" additionalStyles="fontSize:20px" />
</hstack>
<typography variant="info-subtitle" content="High Cell" additionalStyles="fontSize:15px" />
</vstack>
<vstack style="width: 10%">
<hstack>
<typography
variant="info-value"
[content]="highCellVoltage.toFixed(3) + 'V'"
additionalStyles="fontSize:40px"
*ngIf="isDesktop"
/>
<typography
variant="info-value"
[content]="highCellVoltage.toFixed(3) + 'V'"
additionalStyles="fontSize:20px"
*ngIf="!isDesktop"
/>
</hstack>
<typography variant="info-subtitle" content="High Cell" additionalStyles="fontSize:15px" />
</vstack>

<!--On desktop view we don't want the graph component to be in a horizontal stack-->
<high-low-cell-graph style="width: 70%; padding-bottom: 5vh" [resetGraph]="resetGraph" *ngIf="isDesktop">
</high-low-cell-graph>
</hstack>
<!--We want the graph to be in a vertical stack-->
<high-low-cell-graph
style="width: 100%; padding-bottom: 5vh; height: 280px"
[resetGraph]="resetGraph"
*ngIf="!isDesktop"
>
<!--On desktop view we don't want the graph component to be in a horizontal stack-->
<high-low-cell-graph style="width: 70%; padding-bottom: 5vh" [resetGraph]="resetGraph" *ngIf="isDesktop">
</high-low-cell-graph>
</vstack>
</hstack>
</info-background>
20 changes: 6 additions & 14 deletions ...ing-page/components/pack-voltage/pack-voltage-display/pack-voltage-display.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,12 @@
<info-background svgIcon="electric_meter" title="Pack. Voltage" [button]="resetGraphButton">
<vstack>
<div *ngIf="!isDesktop" style="padding-top: 20px"></div>
<hstack>
<hstack style="width: 15%">
<typography variant="info-value" [content]="voltage.toString() + 'V'" />
</hstack>
<pack-voltage-graph
style="width: 80%; padding-bottom: 5vh"
[resetGraph]="resetGraph"
*ngIf="isDesktop"
></pack-voltage-graph>
<hstack>
<hstack style="width: 15%">
<typography variant="info-value" [content]="voltage.toString() + 'V'" />
</hstack>
<pack-voltage-graph
style="width: 100%; padding-bottom: 5vh"
style="width: 80%; padding-bottom: 5vh"
[resetGraph]="resetGraph"
*ngIf="!isDesktop"
*ngIf="isDesktop"
></pack-voltage-graph>
</vstack>
</hstack>
</info-background>

0 comments on commit b524790

Please sign in to comment.