Skip to content

Commit

Permalink
feat: graph
Browse files Browse the repository at this point in the history
  • Loading branch information
@sanriodev
sanriodev committed Sep 11, 2024
1 parent 40cfe09 commit e110014
Show file tree
Hide file tree
Showing 4 changed files with 286 additions and 22 deletions.
103 changes: 103 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
"@angular/platform-browser-dynamic": "^17.3.0",
"@angular/router": "^17.3.0",
"@coreui/coreui": "^5.1.2",
"apexcharts": "^3.53.0",
"bootstrap": "^5.3.3",
"ngx-toastr": "^19.0.0",
"rxjs": "~7.8.0",
Expand Down
46 changes: 27 additions & 19 deletions src/app/views/energy-overview/energy-overview.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,34 @@
<div class="card">
<div class="h-100 w-100">
<div class="content">
<h1>Welcome to the Energy Data Component!</h1>
<p>This is a simple Angular component.</p>
<div *ngFor="let data of mockData">
<div class="row col-12">
<table>
<tr>
<th>Batterielevel</th>
<th>Batterie Prozent</th>
<th>Batterie Spannung</th>
<th>Batterie Status</th>
<th>Zeitpunkt</th>
</tr>
<tr>
<th>{{ data.batteryLevel }}</th>
<th>{{ data.batteryPercent }}</th>
<th>{{ data.batteryVoltage }}</th>
<th>{{ data.batteryStatus }}</th>
<th>{{ data.occuredAt | date }}</th>
</tr>
</table>
<div class="row col-12 mb-4">
<div class="card">
<div class="card-header">
<h3>Batterie Level Graph</h3>
</div>
<div class="card-body">
<div #batteryChart>chart</div>
</div>
</div>
</div>
<div class="row col-12 mb-2 table-sm">
<table class="card w-100">
<tr class="card-header m-0">
<th>Batterielevel</th>
<th>Batterie Prozent</th>
<th>Batterie Spannung</th>
<th>Batterie Status</th>
<th>Zeitpunkt</th>
</tr>
<tr *ngFor="let data of mockData" class="card-body">
<th>{{ data.batteryLevel }}</th>
<th>{{ data.batteryPercent }}</th>
<th>{{ data.batteryVoltage }}</th>
<th>{{ data.batteryStatus }}</th>
<th>{{ data.occuredAt | date }}</th>
</tr>
</table>
</div>
</div>
</div>
158 changes: 155 additions & 3 deletions src/app/views/energy-overview/energy-overview.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,180 @@
import { Component, Inject, OnInit } from '@angular/core';
import {
AfterViewInit,
Component,
ElementRef,
Inject,
OnInit,
ViewChild,
} from '@angular/core';
import { EnergyDataService } from '../../services/energy-data.service';
import ApexCharts, { ApexOptions } from 'apexcharts';

@Component({
selector: 'app-energy-overview',
templateUrl: './energy-overview.component.html',
styleUrls: ['./energy-overview.component.scss'],
})
export class EnergyOverviewComponent implements OnInit {
export class EnergyOverviewComponent implements OnInit, AfterViewInit {
constructor(
@Inject(EnergyDataService) private readonly energyService: EnergyDataService
) {}
@ViewChild('batteryChart') chart?: ElementRef<HTMLDivElement>;
energyData: any;
mockDate = new Date();
mockData = [
// {
// batteryLevel: 40,
// batteryPercent: '50%',
// batteryStatus: 'Charging',
// batteryVoltage: '12.5',
// occuredAt: this.mockDate,
// },
{
batteryLevel: 10,
batteryPercent: '50%',
batteryStatus: 'Charging',
batteryVoltage: '12.5',
occuredAt: new Date(
this.mockDate.setHours(this.mockDate.getHours() - 10)
),
},
{
batteryLevel: 15,
batteryPercent: '50%',
batteryStatus: 'Charging',
batteryVoltage: '12.5',
occuredAt: new Date(this.mockDate.setHours(this.mockDate.getHours() - 9)),
},
{
batteryLevel: 33,
batteryPercent: '50%',
batteryStatus: 'Charging',
batteryVoltage: '12.5',
occuredAt: new Date(this.mockDate.setHours(this.mockDate.getHours() - 8)),
},
{
batteryLevel: 25,
batteryPercent: '50%',
batteryStatus: 'Charging',
batteryVoltage: '12.5',
occuredAt: new Date(this.mockDate.setHours(this.mockDate.getHours() - 7)),
},
{
batteryLevel: 50,
batteryPercent: '50%',
batteryStatus: 'Charging',
batteryVoltage: '12.5',
occuredAt: new Date(),
occuredAt: new Date(this.mockDate.setHours(this.mockDate.getHours() - 6)),
},
{
batteryLevel: 64,
batteryPercent: '50%',
batteryStatus: 'Charging',
batteryVoltage: '12.5',
occuredAt: new Date(this.mockDate.setHours(this.mockDate.getHours() - 5)),
},
{
batteryLevel: 80,
batteryPercent: '50%',
batteryStatus: 'Charging',
batteryVoltage: '12.5',
occuredAt: new Date(this.mockDate.setHours(this.mockDate.getHours() - 4)),
},
{
batteryLevel: 100,
batteryPercent: '50%',
batteryStatus: 'Charging',
batteryVoltage: '12.5',
occuredAt: new Date(this.mockDate.setHours(this.mockDate.getHours() - 3)),
},
{
batteryLevel: 78,
batteryPercent: '50%',
batteryStatus: 'Charging',
batteryVoltage: '12.5',
occuredAt: new Date(this.mockDate.setHours(this.mockDate.getHours() - 2)),
},
{
batteryLevel: 54,
batteryPercent: '50%',
batteryStatus: 'Charging',
batteryVoltage: '12.5',
occuredAt: new Date(this.mockDate.setHours(this.mockDate.getHours() - 1)),
},
];
ngOnInit(): void {
this.energyService.getEnergyData().subscribe((data) => {
this.energyData = data;
});
}

ngAfterViewInit() {
this.drawChart();
}

drawChart(force = false) {
// if (!this.mockData) return;
// if (this.chart?.nativeElement.hasChildNodes()) {
// if (force) this.chart.nativeElement.innerHTML = '';
// else return;
// }
const values: { x: number; y: number }[] = [];
if (this.mockData)
this.mockData.forEach((h: any) => {
const value = h.batteryLevel;
const timestamp = new Date(h.occuredAt).getTime();
values.unshift({ x: timestamp, y: value });
});
const options: ApexOptions = {
series: [
{
name: 'Ladestatus in %',
data: values,
},
],
chart: {
id: 'area-datetime',
type: 'area',
height: 400,
zoom: {
enabled: true,
},
animations: {
enabled: false,
},
},
stroke: {
curve: 'smooth',
},
dataLabels: {
enabled: false,
},
xaxis: {
type: 'datetime',
labels: {
datetimeUTC: false,
},
},
yaxis: {
min: 0,
max: 100,
},
tooltip: {
x: {
format: 'dd MMM yyyy, HH mm',
},
},
fill: {
type: 'gradient',
gradient: {
shadeIntensity: 1,
opacityFrom: 0.7,
opacityTo: 0.9,
stops: [0, 100],
},
},
colors: ['#4DBD74'],
};
new ApexCharts(this.chart?.nativeElement, options).render();
}
}

0 comments on commit e110014

Please sign in to comment.