agrilink/frontend-smartfarming
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: fix slicing parameter in dashboard

Browse Source
This commit is contained in:
Desy Ayurianti 2024-09-20 14:59:54 +07:00
parent 4a77bab8f2
commit 30a4eae0d3
10 changed files with 112 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
agrilink_vocpro/src/app/pages/dashboard/dashboard.component.html
View File

@ -8,6 +8,39 @@
</div>
<div class="card-container">
<div class="card-parameter">
<div>
<app-gauge-chart
[gaugeTitle]="nitrogenTitle"
[gaugeData]="nitrogenData"
[colorStops]="nitrogenColorStops"
[maxValue]="nitrogenMaxValue"
[satuanData]="nitrogenSatuanData">
</app-gauge-chart>
</div>
</div>
<div class="card-parameter">
<div>
<app-gauge-chart
[gaugeTitle]="pottasiumTitle"
[gaugeData]="pottasiumData"
[colorStops]="pottasiumColorStops"
[maxValue]="pottasiumMaxValue"
[satuanData]="pottasiumSatuanData">
</app-gauge-chart>
</div>
</div>
<div class="card-parameter">
<div>
<app-gauge-chart
[gaugeTitle]="phosphorusTitle"
[gaugeData]="phosphorusData"
[colorStops]="phosphorusColorStops"
[maxValue]="phosphorusMaxValue"
[satuanData]="phosphorusSatuanData">
</app-gauge-chart>
</div>
</div>
<div class="card-parameter">
<div>
<app-gauge-chart
@ -32,29 +65,6 @@
</app-gauge-chart>
</div>
</div>
<div class="card-parameter">
<div>
<app-gauge-chart
[gaugeTitle]="suhuTitle"
[gaugeData]="suhuData"
[colorStops]="suhuColorStops"
[maxValue]="suhuMaxValue"
[satuanData]="suhuSatuanData">
</app-gauge-chart>
</div>
</div>
<div class="card-parameter">
<div>
<app-gauge-chart
[gaugeTitle]="kelembabanTanahTitle"
[gaugeData]="kelembabanTanahData"
[colorStops]="kelembabanTanahColorStops"
[maxValue]="kelembabanTanahMaxValue"
[satuanData]="kelembabanTanahSatuanData">
</app-gauge-chart>
</div>
</div>
</div>
<div class="graph">

6
agrilink_vocpro/src/app/pages/dashboard/dashboard.component.scss
View File

@ -34,7 +34,7 @@
padding: 20px 0px 20px 0px;
border-radius: 8px;
text-align: center;
flex: 1 1 40%;
flex: 1 1 30%;
min-width: 200px;
}
@ -55,13 +55,13 @@
}
@media (max-width: 768px) {
.card-suhu, .card-cahaya, .card-kelembapan {
.card-parameter{
flex: 1 1 45%;
}
}
@media (max-width: 576px) {
.card-suhu, .card-cahaya, .card-kelembapan {
.card-parameter{
flex: 1 1 100%;
}
}

21
agrilink_vocpro/src/app/pages/dashboard/dashboard.component.ts
View File

@ -40,4 +40,25 @@ export class DashboardComponent{
kelembabanTanahSatuanData: string = '%';
kelembabanTanahTitle: string = 'Kelembapan Tanah';
//nitrogen
nitrogenData: number = 1063;
nitrogenColorStops: [number, string][] = [[0, '#364732'], [1, '#364732']];
nitrogenMaxValue: number = 2000;
nitrogenSatuanData: string = 'NPM';
nitrogenTitle: string = 'Nitrogen';
//pottasium
pottasiumData: number = 1000;
pottasiumColorStops: [number, string][] = [[0, '#472e49'], [1, '#472e49']];
pottasiumMaxValue: number = 2000;
pottasiumSatuanData: string = 'NPM';
pottasiumTitle: string = 'Pottasium';
//phospor
phosphorusData: number = 1000;
phosphorusColorStops: [number, string][] = [[0, '#663440'], [1, '#663440']];
phosphorusMaxValue: number = 2000;
phosphorusSatuanData: string = 'NPM';
phosphorusTitle: string = 'Phosporus';
}

7
agrilink_vocpro/src/app/pages/dashboard/layouts/layouts.component.html
View File

@ -1,9 +1,10 @@
<div class="container-fluid">
<div class="row flex-nowrap">
<div class="col-auto col-md-3 col-xl-2 px-sm-2 px-0 background">
<div class="row">
<div class="col-auto col-md-3 col-xl-2 px-sm-2 px-0 background sidebar-fixed">
<app-sidebar></app-sidebar>
</div>
<div class="col py-3">
<div class="col py-3 content-area">
<router-outlet></router-outlet>
</div>
</div>

20
agrilink_vocpro/src/app/pages/dashboard/layouts/layouts.component.scss
View File

@ -1,4 +1,22 @@
.background{
.background {
background-color: #16423C;
border-radius: 0px 15px 15px 0px;
}
.sidebar-fixed {
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 16.67%;
z-index: 1000;
overflow-y: auto;
}
.content-area {
margin-left: 16.67%;
overflow-y: auto;
padding-left: 1rem;
padding-right: 1rem;
height: 100vh;
}

6
agrilink_vocpro/src/app/pages/dashboard/layouts/sidebar/sidebar.component.html
View File

@ -13,13 +13,13 @@
</li> -->
</ul>
<hr>
<!-- <div class="dropdown pb-4">
<div class="dropdown pb-4">
<a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false">
<img src="https://github.com/mdo.png" alt="hugenerd" width="30" height="30" class="rounded-circle">
<span class="d-none d-sm-inline mx-1">loser</span>
</a>
<ul class="dropdown-menu dropdown-menu-dark text-small shadow" aria-labelledby="dropdownUser1">
<li><a class="dropdown-item" routerLink='/login'>Sign out</a></li>
<li><a class="dropdown-item" routerLink='/auth'>Sign out</a></li>
</ul>
</div> -->
</div>
</div>

4
agrilink_vocpro/src/app/pages/dashboard/layouts/sidebar/sidebar.component.scss
View File

@ -3,6 +3,10 @@
border-radius: 0px 15px 15px 0px;
}
.container{
font-family: 'Poppins', sans-serif;
}
.title{
color: white;
}

3
agrilink_vocpro/src/app/pages/dashboard/page/gauge-chart/gauge-chart.component.ts
View File

@ -88,9 +88,6 @@ export class GaugeChartComponent {
style: {
fontSize: '15px',
fontFamily: 'Poppins, sans-serif',
color: 'white',
backgroundColor: 'transparent',
border: 'none'
}
}
}] as Highcharts.SeriesSolidgaugeOptions[]

4
agrilink_vocpro/src/app/pages/dashboard/page/graph/graph.component.html
View File

@ -1,9 +1,11 @@
<div class="container-graph">
<select class="form-select" id="parameterSelect" (change)="updateChart()">
<option value="humidity">Kelembaban Udara</option>
<option value="humidityTanah">Kelembaban Tanah</option>
<option value="temperature">Suhu</option>
<option value="light">Intensitas Cahaya</option>
<option value="nitrogen">Nitrogen</option>
<option value="phosphorus">Phosphorus</option>
<option value="pottasium">Pottasium</option>
</select>
<select class="form-select" id="timeframeSelect" (change)="updateChart()">

21
agrilink_vocpro/src/app/pages/dashboard/page/graph/graph.component.ts
View File

@ -183,6 +183,9 @@ export class GraphComponent implements OnInit {
const suhuColor = '#8F5A62';
const intensitasCahayaColor = '#DF9B55';
const humidityTanahColor = '#493e30';
const nitrogenColor = '#364732';
const pottasiumColor = '#472e49';
const phosphorusColor = '#663440';
switch (parameter) {
case 'humidity':
@ -209,6 +212,24 @@ export class GraphComponent implements OnInit {
newColor = humidityTanahColor;
newLabels = timeframe === 'hourly' ? this.labelHourly : (timeframe === 'daily' ? this.labelDaily : this.labelMonthly);
break;
case 'nitrogen':
newLabel = timeframe === 'hourly' ? 'Nitrogen Per Jam' : (timeframe === 'daily' ? 'Nitrogen Harian' : 'Nitrogen Bulanan');
newData = timeframe === 'hourly' ? this.nitrogenData : (timeframe === 'daily' ? this.dailyNitrogenData : this.monthlyNitrogenData);
newColor = nitrogenColor;
newLabels = timeframe === 'hourly' ? this.labelHourly : (timeframe === 'daily' ? this.labelDaily : this.labelMonthly);
break;
case 'pottasium':
newLabel = timeframe === 'hourly' ? 'Pottasium Per Jam' : (timeframe === 'daily' ? 'Pottasium Harian' : 'Pottasium Bulanan');
newData = timeframe === 'hourly' ? this.pottasiumData : (timeframe === 'daily' ? this.dailyPottasiumData: this.monthlyPottasiumData);
newColor = pottasiumColor;
newLabels = timeframe === 'hourly' ? this.labelHourly : (timeframe === 'daily' ? this.labelDaily : this.labelMonthly);
break;
case 'phosphorus':
newLabel = timeframe === 'hourly' ? 'Phosphorus Per Jam' : (timeframe === 'daily' ? 'Phosphorus Harian' : 'Phosphorus Bulanan');
newData = timeframe === 'hourly' ? this.phosphorusData : (timeframe === 'daily' ? this.dailyPhosphorusData : this.monthlyPhosphorusData);
newColor = phosphorusColor;
newLabels = timeframe === 'hourly' ? this.labelHourly : (timeframe === 'daily' ? this.labelDaily : this.labelMonthly);
break;
default:
newLabel = 'Kelembapan Per Jam';
newData = this.humidityData;