feat: initial commit for dashboard
This commit is contained in:
Desy Ayurianti
parent
fbba089059
commit
78b48ce344
16
agrilink_vocpro/.editorconfig
Normal file
16
agrilink_vocpro/.editorconfig
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
# Editor configuration, see https://editorconfig.org
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
|
||||
[*.ts]
|
||||
quote_type = single
|
||||
|
||||
[*.md]
|
||||
max_line_length = off
|
||||
trim_trailing_whitespace = false
|
||||
42
agrilink_vocpro/.gitignore
vendored
Normal file
42
agrilink_vocpro/.gitignore
vendored
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
|
||||
|
||||
# Compiled output
|
||||
/dist
|
||||
/tmp
|
||||
/out-tsc
|
||||
/bazel-out
|
||||
|
||||
# Node
|
||||
/node_modules
|
||||
npm-debug.log
|
||||
yarn-error.log
|
||||
|
||||
# IDEs and editors
|
||||
.idea/
|
||||
.project
|
||||
.classpath
|
||||
.c9/
|
||||
*.launch
|
||||
.settings/
|
||||
*.sublime-workspace
|
||||
|
||||
# Visual Studio Code
|
||||
.vscode/*
|
||||
!.vscode/settings.json
|
||||
!.vscode/tasks.json
|
||||
!.vscode/launch.json
|
||||
!.vscode/extensions.json
|
||||
.history/*
|
||||
|
||||
# Miscellaneous
|
||||
/.angular/cache
|
||||
.sass-cache/
|
||||
/connect.lock
|
||||
/coverage
|
||||
/libpeerconnection.log
|
||||
testem.log
|
||||
/typings
|
||||
|
||||
# System files
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
4
agrilink_vocpro/.vscode/extensions.json
vendored
Normal file
4
agrilink_vocpro/.vscode/extensions.json
vendored
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
|
||||
"recommendations": ["angular.ng-template"]
|
||||
}
|
||||
20
agrilink_vocpro/.vscode/launch.json
vendored
Normal file
20
agrilink_vocpro/.vscode/launch.json
vendored
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
{
|
||||
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"name": "ng serve",
|
||||
"type": "chrome",
|
||||
"request": "launch",
|
||||
"preLaunchTask": "npm: start",
|
||||
"url": "http://localhost:4200/"
|
||||
},
|
||||
{
|
||||
"name": "ng test",
|
||||
"type": "chrome",
|
||||
"request": "launch",
|
||||
"preLaunchTask": "npm: test",
|
||||
"url": "http://localhost:9876/debug.html"
|
||||
}
|
||||
]
|
||||
}
|
||||
42
agrilink_vocpro/.vscode/tasks.json
vendored
Normal file
42
agrilink_vocpro/.vscode/tasks.json
vendored
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
{
|
||||
// For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
|
||||
"version": "2.0.0",
|
||||
"tasks": [
|
||||
{
|
||||
"type": "npm",
|
||||
"script": "start",
|
||||
"isBackground": true,
|
||||
"problemMatcher": {
|
||||
"owner": "typescript",
|
||||
"pattern": "$tsc",
|
||||
"background": {
|
||||
"activeOnStart": true,
|
||||
"beginsPattern": {
|
||||
"regexp": "(.*?)"
|
||||
},
|
||||
"endsPattern": {
|
||||
"regexp": "bundle generation complete"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "npm",
|
||||
"script": "test",
|
||||
"isBackground": true,
|
||||
"problemMatcher": {
|
||||
"owner": "typescript",
|
||||
"pattern": "$tsc",
|
||||
"background": {
|
||||
"activeOnStart": true,
|
||||
"beginsPattern": {
|
||||
"regexp": "(.*?)"
|
||||
},
|
||||
"endsPattern": {
|
||||
"regexp": "bundle generation complete"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
27
agrilink_vocpro/README.md
Normal file
27
agrilink_vocpro/README.md
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
# AgrilinkVocpro
|
||||
|
||||
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.2.4.
|
||||
|
||||
## Development server
|
||||
|
||||
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
|
||||
|
||||
## Code scaffolding
|
||||
|
||||
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
|
||||
|
||||
## Build
|
||||
|
||||
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
|
||||
|
||||
## Running unit tests
|
||||
|
||||
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
|
||||
|
||||
## Running end-to-end tests
|
||||
|
||||
Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
|
||||
|
||||
## Further help
|
||||
|
||||
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
|
||||
113
agrilink_vocpro/angular.json
Normal file
113
agrilink_vocpro/angular.json
Normal file
|
|
@ -0,0 +1,113 @@
|
|||
{
|
||||
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
||||
"version": 1,
|
||||
"newProjectRoot": "projects",
|
||||
"projects": {
|
||||
"agrilink_vocpro": {
|
||||
"projectType": "application",
|
||||
"schematics": {
|
||||
"@schematics/angular:component": {
|
||||
"style": "scss"
|
||||
}
|
||||
},
|
||||
"root": "",
|
||||
"sourceRoot": "src",
|
||||
"prefix": "app",
|
||||
"architect": {
|
||||
"build": {
|
||||
"builder": "@angular-devkit/build-angular:application",
|
||||
"options": {
|
||||
"outputPath": "dist/agrilink_vocpro",
|
||||
"index": "src/index.html",
|
||||
"browser": "src/main.ts",
|
||||
"polyfills": [
|
||||
"zone.js"
|
||||
],
|
||||
"tsConfig": "tsconfig.app.json",
|
||||
"inlineStyleLanguage": "scss",
|
||||
"assets": [
|
||||
{
|
||||
"glob": "**/*",
|
||||
"input": "public"
|
||||
}
|
||||
],
|
||||
"styles": [
|
||||
"src/styles.scss",
|
||||
"node_modules/bootstrap/dist/css/bootstrap.min.css",
|
||||
"node_modules/bootstrap-icons/font/bootstrap-icons.css"
|
||||
],
|
||||
"scripts": [
|
||||
"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
|
||||
]
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"budgets": [
|
||||
{
|
||||
"type": "initial",
|
||||
"maximumWarning": "500kB",
|
||||
"maximumError": "1MB"
|
||||
},
|
||||
{
|
||||
"type": "anyComponentStyle",
|
||||
"maximumWarning": "2kB",
|
||||
"maximumError": "4kB"
|
||||
}
|
||||
],
|
||||
"outputHashing": "all"
|
||||
},
|
||||
"development": {
|
||||
"optimization": false,
|
||||
"extractLicenses": false,
|
||||
"sourceMap": true
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "production"
|
||||
},
|
||||
"serve": {
|
||||
"builder": "@angular-devkit/build-angular:dev-server",
|
||||
"configurations": {
|
||||
"production": {
|
||||
"buildTarget": "agrilink_vocpro:build:production"
|
||||
},
|
||||
"development": {
|
||||
"buildTarget": "agrilink_vocpro:build:development"
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "development"
|
||||
},
|
||||
"extract-i18n": {
|
||||
"builder": "@angular-devkit/build-angular:extract-i18n"
|
||||
},
|
||||
"test": {
|
||||
"builder": "@angular-devkit/build-angular:karma",
|
||||
"options": {
|
||||
"polyfills": [
|
||||
"zone.js",
|
||||
"zone.js/testing"
|
||||
],
|
||||
"tsConfig": "tsconfig.spec.json",
|
||||
"inlineStyleLanguage": "scss",
|
||||
"assets": [
|
||||
{
|
||||
"glob": "**/*",
|
||||
"input": "public"
|
||||
}
|
||||
],
|
||||
"styles": [
|
||||
"src/styles.scss",
|
||||
"node_modules/bootstrap/dist/css/bootstrap.min.css",
|
||||
"node_modules/bootstrap-icons/font/bootstrap-icons.css"
|
||||
],
|
||||
"scripts": [
|
||||
"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"cli": {
|
||||
"analytics": false
|
||||
}
|
||||
}
|
||||
14504
agrilink_vocpro/package-lock.json
generated
Normal file
14504
agrilink_vocpro/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
42
agrilink_vocpro/package.json
Normal file
42
agrilink_vocpro/package.json
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
{
|
||||
"name": "agrilink-vocpro",
|
||||
"version": "0.0.0",
|
||||
"scripts": {
|
||||
"ng": "ng",
|
||||
"start": "ng serve",
|
||||
"build": "ng build",
|
||||
"watch": "ng build --watch --configuration development",
|
||||
"test": "ng test"
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "^18.2.0",
|
||||
"@angular/common": "^18.2.0",
|
||||
"@angular/compiler": "^18.2.0",
|
||||
"@angular/core": "^18.2.0",
|
||||
"@angular/forms": "^18.2.0",
|
||||
"@angular/platform-browser": "^18.2.0",
|
||||
"@angular/platform-browser-dynamic": "^18.2.0",
|
||||
"@angular/router": "^18.2.0",
|
||||
"bootstrap": "^5.3.3",
|
||||
"bootstrap-icons": "^1.11.3",
|
||||
"chart.js": "^4.4.4",
|
||||
"highcharts-angular": "^4.0.1",
|
||||
"rxjs": "~7.8.0",
|
||||
"tslib": "^2.3.0",
|
||||
"zone.js": "~0.14.10"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "^18.2.4",
|
||||
"@angular/cli": "^18.2.4",
|
||||
"@angular/compiler-cli": "^18.2.0",
|
||||
"@types/jasmine": "~5.1.0",
|
||||
"jasmine-core": "~5.2.0",
|
||||
"karma": "~6.4.0",
|
||||
"karma-chrome-launcher": "~3.2.0",
|
||||
"karma-coverage": "~2.2.0",
|
||||
"karma-jasmine": "~5.1.0",
|
||||
"karma-jasmine-html-reporter": "~2.1.0",
|
||||
"typescript": "~5.5.2"
|
||||
}
|
||||
}
|
||||
BIN
agrilink_vocpro/public/favicon.ico
Normal file
BIN
agrilink_vocpro/public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
1
agrilink_vocpro/src/app/app.component.html
Normal file
1
agrilink_vocpro/src/app/app.component.html
Normal file
|
|
@ -0,0 +1 @@
|
|||
<router-outlet></router-outlet>
|
||||
0
agrilink_vocpro/src/app/app.component.scss
Normal file
0
agrilink_vocpro/src/app/app.component.scss
Normal file
29
agrilink_vocpro/src/app/app.component.spec.ts
Normal file
29
agrilink_vocpro/src/app/app.component.spec.ts
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
import { TestBed } from '@angular/core/testing';
|
||||
import { AppComponent } from './app.component';
|
||||
|
||||
describe('AppComponent', () => {
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [AppComponent],
|
||||
}).compileComponents();
|
||||
});
|
||||
|
||||
it('should create the app', () => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
const app = fixture.componentInstance;
|
||||
expect(app).toBeTruthy();
|
||||
});
|
||||
|
||||
it(`should have the 'agrilink_vocpro' title`, () => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
const app = fixture.componentInstance;
|
||||
expect(app.title).toEqual('agrilink_vocpro');
|
||||
});
|
||||
|
||||
it('should render title', () => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
fixture.detectChanges();
|
||||
const compiled = fixture.nativeElement as HTMLElement;
|
||||
expect(compiled.querySelector('h1')?.textContent).toContain('Hello, agrilink_vocpro');
|
||||
});
|
||||
});
|
||||
13
agrilink_vocpro/src/app/app.component.ts
Normal file
13
agrilink_vocpro/src/app/app.component.ts
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { RouterOutlet } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
standalone: true,
|
||||
imports: [RouterOutlet],
|
||||
templateUrl: './app.component.html',
|
||||
styleUrl: './app.component.scss'
|
||||
})
|
||||
export class AppComponent {
|
||||
title = 'agrilink_vocpro';
|
||||
}
|
||||
8
agrilink_vocpro/src/app/app.config.ts
Normal file
8
agrilink_vocpro/src/app/app.config.ts
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
|
||||
import { provideRouter } from '@angular/router';
|
||||
|
||||
import { routes } from './app.routes';
|
||||
|
||||
export const appConfig: ApplicationConfig = {
|
||||
providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)]
|
||||
};
|
||||
26
agrilink_vocpro/src/app/app.routes.ts
Normal file
26
agrilink_vocpro/src/app/app.routes.ts
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
import { Routes } from '@angular/router';
|
||||
import { DashboardComponent } from './pages/dashboard/dashboard.component';
|
||||
import { LayoutsComponent } from './pages/dashboard/layouts/layouts.component';
|
||||
import { GraphComponent } from './pages/dashboard/page/graph/graph.component';
|
||||
|
||||
export const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
redirectTo:'dashboard',
|
||||
pathMatch:'full'
|
||||
},
|
||||
{
|
||||
path: '',
|
||||
component: LayoutsComponent,
|
||||
children:[
|
||||
{
|
||||
path: 'dashboard',
|
||||
component: DashboardComponent,
|
||||
},
|
||||
{
|
||||
path: 'graph',
|
||||
component: GraphComponent
|
||||
},
|
||||
]
|
||||
}
|
||||
];
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<div class="container">
|
||||
<div>
|
||||
<h1 class="title">Good Evening</h1>
|
||||
<h3 class="description">Welcome to your management system</h3>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="update">Latets Update: 06/09/2024 15:39:21</h2>
|
||||
</div>
|
||||
|
||||
<div class="card-container">
|
||||
<div class="card-parameter">
|
||||
<div>
|
||||
<app-gauge-chart
|
||||
[gaugeTitle]="kelembabanTitle"
|
||||
[gaugeData]="kelembabanData"
|
||||
[colorStops]="kelembabanColorStops"
|
||||
[maxValue]="kelembabanMaxValue"
|
||||
[satuanData]="kelembabanSatuanData">
|
||||
</app-gauge-chart>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-parameter">
|
||||
<div>
|
||||
<app-gauge-chart
|
||||
[gaugeTitle]="intensitasCahayaTitle"
|
||||
[gaugeData]="intensitasCahayaData"
|
||||
[colorStops]="intensitasCahayaColorStops"
|
||||
[maxValue]="intensitasCahayaMaxValue"
|
||||
[satuanData]="intensitasCahayaSatuanData"
|
||||
>
|
||||
</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">
|
||||
<div class="title-graph"> Monitoring </div>
|
||||
<div class="graph">
|
||||
<app-graph></app-graph>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
.container {
|
||||
font-family: "Poppins", sans-serif;
|
||||
}
|
||||
|
||||
.title {
|
||||
color: #49473C;
|
||||
font-size: 30px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.description {
|
||||
color: #49473C;
|
||||
font-size: 15px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.update{
|
||||
color: #49473C;
|
||||
font-size: 15px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.card-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
margin-top: 20px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.card-parameter{
|
||||
border: 1px solid #16423C;
|
||||
color: #16423C;
|
||||
padding: 20px 0px 20px 0px;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
flex: 1 1 40%;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.card-content{
|
||||
text-align: center;
|
||||
margin:auto;
|
||||
}
|
||||
|
||||
.title-graph{
|
||||
color: #49473C;
|
||||
font-size: 23px;
|
||||
font-weight: 400;
|
||||
margin-top: 45px;
|
||||
}
|
||||
|
||||
.graph{
|
||||
margin-top: 22px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.card-suhu, .card-cahaya, .card-kelembapan {
|
||||
flex: 1 1 45%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.card-suhu, .card-cahaya, .card-kelembapan {
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { DashboardComponent } from './dashboard.component';
|
||||
|
||||
describe('DashboardComponent', () => {
|
||||
let component: DashboardComponent;
|
||||
let fixture: ComponentFixture<DashboardComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [DashboardComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(DashboardComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { RouterOutlet } from '@angular/router';
|
||||
import { SidebarComponent } from './layouts/sidebar/sidebar.component';
|
||||
import { GaugeChartComponent } from './page/gauge-chart/gauge-chart.component';
|
||||
import { GraphComponent } from './page/graph/graph.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-dashboard',
|
||||
standalone: true,
|
||||
imports: [RouterOutlet, SidebarComponent, GaugeChartComponent, GraphComponent],
|
||||
templateUrl: './dashboard.component.html',
|
||||
styleUrl: './dashboard.component.scss'
|
||||
})
|
||||
export class DashboardComponent{
|
||||
//kelembaban
|
||||
kelembabanData: number = 90;
|
||||
kelembabanColorStops: [number, string][] = [[0, '#16423C'], [1, '#16423C']];
|
||||
kelembabanMaxValue: number = 100;
|
||||
kelembabanSatuanData: string = '%';
|
||||
kelembabanTitle: string = 'Kelembapan Udara';
|
||||
|
||||
//suhu
|
||||
suhuData: number = 35;
|
||||
suhuColorStops: [number, string][] = [[0, '#663440'], [1, '#663440']];
|
||||
suhuMaxValue: number = 100;
|
||||
suhuSatuanData: string = '°C';
|
||||
suhuTitle: string = 'Suhu';
|
||||
|
||||
//intensitas cahaya
|
||||
intensitasCahayaData: number = 3469;
|
||||
intensitasCahayaColorStops: [number, string][] = [[0, '#b35b03'], [1, '#b35b03']];
|
||||
intensitasCahayaMaxValue: number = 4000;
|
||||
intensitasCahayaSatuanData: string = 'lux';
|
||||
intensitasCahayaTitle: string = 'Intensitas Cahaya';
|
||||
|
||||
//kelembaban tanah
|
||||
kelembabanTanahData: number = 90;
|
||||
kelembabanTanahColorStops: [number, string][] = [[0, '#493e30'], [1, '#493e30']];
|
||||
kelembabanTanahMaxValue: number = 100;
|
||||
kelembabanTanahSatuanData: string = '%';
|
||||
kelembabanTanahTitle: string = 'Kelembapan Tanah';
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +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">
|
||||
<app-sidebar></app-sidebar>
|
||||
</div>
|
||||
<div class="col py-3">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
.background{
|
||||
background-color: #16423C;
|
||||
border-radius: 0px 15px 15px 0px;
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { LayoutsComponent } from './layouts.component';
|
||||
|
||||
describe('LayoutsComponent', () => {
|
||||
let component: LayoutsComponent;
|
||||
let fixture: ComponentFixture<LayoutsComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [LayoutsComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(LayoutsComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { RouterOutlet } from '@angular/router';
|
||||
import { SidebarComponent } from './sidebar/sidebar.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-layouts',
|
||||
standalone: true,
|
||||
imports: [RouterOutlet, SidebarComponent],
|
||||
templateUrl: './layouts.component.html',
|
||||
styleUrl: './layouts.component.scss'
|
||||
})
|
||||
export class LayoutsComponent {
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<div class="d-flex flex-column align-items-center align-items-sm-start px-3 pt-2 text-white min-vh-100">
|
||||
<a href="/" class="d-flex align-items-center pb-3 mb-md-0 me-md-auto text-white text-decoration-none">
|
||||
<span class="fs-5 d-none d-sm-inline space">Agrilink Vocpro</span>
|
||||
</a>
|
||||
<ul class="nav nav-pills flex-column mb-sm-auto mb-0 align-items-center align-items-sm-start" id="menu">
|
||||
<li>
|
||||
<a routerLink='/dashboard' data-bs-toggle="collapse" class="nav-link px-0 align-middle">
|
||||
<i class="bi bi-graph-up title"></i> <span class="ms-1 d-none d-sm-inline menu">Dashboard</span> </a>
|
||||
</li>
|
||||
<!-- <li>
|
||||
<a routerLink='/graph' data-bs-toggle="collapse" class="nav-link px-0 align-middle">
|
||||
<i class="bi bi-graph-up title"></i> <span class="ms-1 d-none d-sm-inline menu">Graph</span> </a>
|
||||
</li> -->
|
||||
</ul>
|
||||
<hr>
|
||||
<!-- <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>
|
||||
</ul>
|
||||
</div> -->
|
||||
</div>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
.background{
|
||||
background-color: #16423C;
|
||||
border-radius: 0px 15px 15px 0px;
|
||||
}
|
||||
|
||||
.title{
|
||||
color: white;
|
||||
}
|
||||
|
||||
.space{
|
||||
margin-bottom: 15px;
|
||||
margin-top: 15px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.menu{
|
||||
color: white;
|
||||
font-size: 15px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.container-sidebar{
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { SidebarComponent } from './sidebar.component';
|
||||
|
||||
describe('SidebarComponent', () => {
|
||||
let component: SidebarComponent;
|
||||
let fixture: ComponentFixture<SidebarComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [SidebarComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(SidebarComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { RouterLink } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector: 'app-sidebar',
|
||||
standalone: true,
|
||||
imports: [RouterLink],
|
||||
templateUrl: './sidebar.component.html',
|
||||
styleUrl: './sidebar.component.scss'
|
||||
})
|
||||
export class SidebarComponent {
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<div *ngIf="isLoading" class="loading-overlay">
|
||||
<div class="loading-state">
|
||||
<div class="loading"></div>
|
||||
</div>
|
||||
</div>
|
||||
<highcharts-chart
|
||||
class="gauge-chart"
|
||||
[Highcharts]="Highcharts"
|
||||
[options]="chartOptions"
|
||||
>
|
||||
</highcharts-chart>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
.gauge-chart{
|
||||
width: 50%;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.loading {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
border: 7px solid #ddd;
|
||||
border-top-color: rgb(28, 12, 203);
|
||||
animation: loading 1s linear infinite;
|
||||
}
|
||||
|
||||
.loading-state {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: 9999;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.loading-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { GaugeChartComponent } from './gauge-chart.component';
|
||||
|
||||
describe('GaugeChartComponent', () => {
|
||||
let component: GaugeChartComponent;
|
||||
let fixture: ComponentFixture<GaugeChartComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [GaugeChartComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(GaugeChartComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
import { Component, Input } from '@angular/core';
|
||||
import * as Highcharts from 'highcharts';
|
||||
import HighchartsMore from 'highcharts/highcharts-more';
|
||||
import HC_solidGauge from 'highcharts/modules/solid-gauge';
|
||||
import { HighchartsChartModule } from 'highcharts-angular';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
|
||||
HighchartsMore(Highcharts);
|
||||
HC_solidGauge(Highcharts);
|
||||
|
||||
@Component({
|
||||
selector: 'app-gauge-chart',
|
||||
standalone: true,
|
||||
imports: [HighchartsChartModule, CommonModule],
|
||||
templateUrl: './gauge-chart.component.html',
|
||||
styleUrls: ['./gauge-chart.component.scss']
|
||||
})
|
||||
export class GaugeChartComponent {
|
||||
@Input() gaugeTitle: string = 'Gauge';
|
||||
@Input() gaugeData: number = 0;
|
||||
@Input() colorStops: [number, string][] = [];
|
||||
@Input() maxValue: number = 100;
|
||||
@Input() satuanData: string = '';
|
||||
|
||||
isLoading: boolean = true;
|
||||
|
||||
Highcharts: typeof Highcharts = Highcharts;
|
||||
|
||||
chartOptions: Highcharts.Options = {};
|
||||
|
||||
constructor() {}
|
||||
|
||||
ngOnChanges() {
|
||||
this.isLoading = false;
|
||||
this.chartOptions = {
|
||||
|
||||
chart: {
|
||||
type: 'solidgauge',
|
||||
height: '100%',
|
||||
backgroundColor: 'transparent'
|
||||
},
|
||||
credits: {
|
||||
enabled: false
|
||||
},
|
||||
title: {
|
||||
text: this.gaugeTitle,
|
||||
style: {
|
||||
fontSize: '15px',
|
||||
fontFamily: 'Poppins, sans-serif',
|
||||
}
|
||||
},
|
||||
pane: {
|
||||
startAngle: -180,
|
||||
endAngle: 180,
|
||||
background: [{
|
||||
innerRadius: '50%',
|
||||
outerRadius: '110%',
|
||||
shape: 'arc'
|
||||
}]
|
||||
},
|
||||
yAxis: {
|
||||
min: 0,
|
||||
max: this.maxValue,
|
||||
stops: this.colorStops.length ? this.colorStops : [
|
||||
[0.1, '#55BF3B'],
|
||||
[0.5, '#DDDF0D'],
|
||||
[0.9, '#DF5353']
|
||||
],
|
||||
lineWidth: 0,
|
||||
tickWidth: 0,
|
||||
tickAmount: 2,
|
||||
labels: {
|
||||
enabled: false
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: this.gaugeTitle,
|
||||
data: [this.gaugeData],
|
||||
tooltip: {
|
||||
valueSuffix: this.satuanData
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
y: -10,
|
||||
x: 0,
|
||||
borderColor: 'transparent',
|
||||
borderWidth: 0,
|
||||
style: {
|
||||
fontSize: '15px',
|
||||
fontFamily: 'Poppins, sans-serif',
|
||||
color: 'white',
|
||||
backgroundColor: 'transparent',
|
||||
border: 'none'
|
||||
}
|
||||
}
|
||||
}] as Highcharts.SeriesSolidgaugeOptions[]
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<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>
|
||||
</select>
|
||||
|
||||
<select class="form-select" id="timeframeSelect" (change)="updateChart()">
|
||||
<option value="hourly">Per Jam</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<canvas id="myChart"></canvas>
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
.chart-container {
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
canvas {
|
||||
width: max-content;
|
||||
height: 80%!important;
|
||||
margin: 20px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.form-select{
|
||||
width: max-content;
|
||||
margin-top: 20px;
|
||||
display: flexbox;
|
||||
flex-direction: column;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.container-graph{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: left;
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 768px) {
|
||||
canvas{
|
||||
display: flex;
|
||||
width: max-content;
|
||||
flex: 1 1 45%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
canvas{
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { GraphComponent } from './graph.component';
|
||||
|
||||
describe('GraphComponent', () => {
|
||||
let component: GraphComponent;
|
||||
let fixture: ComponentFixture<GraphComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [GraphComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(GraphComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,221 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import { Chart, LineController, LineElement, PointElement, LinearScale, Title, CategoryScale, Tooltip, Filler } from 'chart.js';
|
||||
|
||||
@Component({
|
||||
selector: 'app-graph',
|
||||
standalone: true,
|
||||
imports: [],
|
||||
templateUrl: './graph.component.html',
|
||||
styleUrl: './graph.component.scss'
|
||||
})
|
||||
export class GraphComponent implements OnInit {
|
||||
chart: any;
|
||||
humidityData = [65, 59, 80, 81, 56, 55, 40, 41,
|
||||
60, 65, 59, 80, 81, 56, 55, 40,
|
||||
41, 60, 65, 59, 80, 81, 56, 55
|
||||
];
|
||||
temperatureData = [22, 23, 25, 24, 26, 27, 28, 29,
|
||||
25, 23, 22, 24, 26, 27, 28, 29,
|
||||
29, 28, 28, 25, 25, 25, 26, 27
|
||||
];
|
||||
lightData = [200, 220, 230, 210, 250, 240, 260, 265,
|
||||
270, 200, 220, 230, 210, 250, 240, 260,
|
||||
265, 270, 200, 220, 230, 210, 250, 240
|
||||
];
|
||||
|
||||
nitrogenData = [
|
||||
0, 100, 200, 300, 400, 500, 600, 700, 800, 900,
|
||||
1000, 1100, 1200, 1300, 1400, 1500, 1600, 1700,
|
||||
1800, 1900, 2000
|
||||
]
|
||||
|
||||
humidityTanahData = [
|
||||
0, 10, 20, 30, 40, 50, 60, 70, 80, 90,
|
||||
100, 110, 120, 130, 140, 150, 160, 170,
|
||||
180, 190, 200
|
||||
]
|
||||
|
||||
pottasiumData = [
|
||||
90, 100, 110, 120, 130, 140, 150, 160, 170, 180,
|
||||
190, 200, 210, 220, 230, 240, 250, 260, 270, 280,
|
||||
290, 300, 310, 320
|
||||
]
|
||||
|
||||
phosphorusData = [
|
||||
90, 100, 110, 120, 130, 140, 150, 160, 170, 180,
|
||||
190, 200, 210, 220, 230, 240, 250, 260, 270, 280,
|
||||
290, 300, 310, 320
|
||||
]
|
||||
|
||||
soilData = [
|
||||
90, 100, 110, 120, 130, 140, 150, 160, 170, 180,
|
||||
190, 200, 210, 220, 230, 240, 250, 260, 270, 280,
|
||||
290, 300, 310, 320
|
||||
]
|
||||
|
||||
|
||||
//data daily
|
||||
dailyHumidityData = [65, 70, 75, 80, 85, 90, 95];
|
||||
dailyTemperatureData = [25, 26, 27, 28, 29, 30, 31];
|
||||
dailyLightData = [220, 230, 240, 250, 260, 270, 280];
|
||||
dailyNitrogenData = [1000, 1100, 1200, 1300, 1400, 1500, 1600];
|
||||
dailyHumidityTanahData = [100, 110, 120, 130, 140, 150];
|
||||
dailyPottasiumData = [1000, 1100, 1200, 1300, 1400, 1500, 1600];
|
||||
dailyPhosphorusData = [1000, 1100, 1200, 1300, 1400, 1500, 1600];
|
||||
dailySoilData = [1000, 1100, 1200, 1300, 1400, 1500, 1600];
|
||||
|
||||
//data weekly
|
||||
weeklyHumidityData = [60, 65, 70, 75, 80, 85, 90];
|
||||
weeklyTemperatureData = [25, 26, 27, 28, 29, 30, 31];
|
||||
weeklyLightData = [220, 230, 240, 250, 260, 270, 280];
|
||||
weeklyNitrogenData = [1000, 1100, 1200, 1300, 1400, 1500, 1600];
|
||||
weeklyHumidityTanahData = [100, 110, 120, 130, 140, 150];
|
||||
weeklyPottasiumData = [1000, 1100, 1200, 1300, 1400, 1500, 1600];
|
||||
weeklyPhosphorusData = [1000, 1100, 1200, 1300, 1400, 1500, 1600];
|
||||
weeklySoilData = [1000, 1100, 1200, 1300, 1400, 1500, 1600];
|
||||
|
||||
//data bulanan
|
||||
monthlyHumidityData = [65, 70, 75, 80, 85, 90, 95, 100, 105, 110, 115, 120];
|
||||
monthlyTemperatureData = [25, 26, 27, 28, 29, 30, 31, 32, 33, 33, 33, 33.5];
|
||||
monthlyLightData = [220, 230, 240, 250, 260, 270, 280, 290, 300, 310, 320, 330];
|
||||
monthlyNitrogenData = [1000, 1100, 1200, 1300, 1400, 1500, 1600, 1700, 1800, 1900, 2000, 2100];
|
||||
monthlyHumidityTanahData = [100, 110, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210];
|
||||
monthlyPottasiumData = [1000, 1100, 1200, 1300, 1400, 1500, 1600, 1700, 1800, 1900, 2000, 2100];
|
||||
monthlyPhosphorusData = [1000, 1100, 1200, 1300, 1400, 1500, 1600, 1700, 1800, 1900, 2000, 2100];
|
||||
monthlySoilData = [1000, 1100, 1200, 1300, 1400, 1500, 1600, 1700, 1800, 1900, 2000, 2100];
|
||||
|
||||
|
||||
labelHourly = [
|
||||
'01.00', '02.00', '03.00', '04.00', '05.00', '06.00', '07.00', '08.00',
|
||||
'09.00', '10.00', '11.00', '12.00', '13.00', '14.00', '15.00', '16.00',
|
||||
'17.00', '18.00', '19.00', '20.00', '21.00', '22.00', '23.00', '24.00'
|
||||
]
|
||||
labelDaily = ['Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu', 'Minggu'];
|
||||
labelWeekly = ['Minggu 1', 'Minggu 2', 'Minggu 3', 'Minggu 4', 'Minggu 5', 'Minggu 6', 'Minggu 7'];
|
||||
labelMonthly = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];
|
||||
|
||||
ngOnInit(): void {
|
||||
Chart.register(LineController, LineElement, PointElement, LinearScale, Title, CategoryScale, Tooltip, Filler);
|
||||
this.createChart(this.humidityData, 'Kelembapan', '#16423C', this.labelHourly);
|
||||
}
|
||||
|
||||
createChart(data: number[], label: string, borderColor: string, labels: string[]): void {
|
||||
const canvas = document.getElementById('myChart') as HTMLCanvasElement;
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
if (this.chart) {
|
||||
this.chart.destroy();
|
||||
}
|
||||
|
||||
if (ctx) {
|
||||
this.chart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [{
|
||||
label,
|
||||
data,
|
||||
borderColor,
|
||||
borderWidth: 1.5,
|
||||
fill: false,
|
||||
backgroundColor: borderColor + '4D',
|
||||
tension: 0.5,
|
||||
pointRadius: 5,
|
||||
pointHoverRadius: 8,
|
||||
pointBackgroundColor: borderColor,
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
tooltip: {
|
||||
enabled: true,
|
||||
mode: 'nearest',
|
||||
intersect: false,
|
||||
callbacks: {
|
||||
label: (tooltipItem: any) => {
|
||||
const datasetLabel = tooltipItem.dataset.label.toLowerCase();
|
||||
const formattedValue = tooltipItem.formattedValue;
|
||||
if (datasetLabel.includes('suhu')) {
|
||||
return `${tooltipItem.dataset.label}: ${formattedValue}°C`;
|
||||
} else if (datasetLabel.includes('cahaya')) {
|
||||
return `${tooltipItem.dataset.label}: ${formattedValue} lux`;
|
||||
} else if (datasetLabel.includes('nitrogen') || datasetLabel.includes('pottasium') || datasetLabel.includes('phosphorus') || datasetLabel.includes('soil')) {
|
||||
return `${tooltipItem.dataset.label}: ${formattedValue} NPM`;
|
||||
} else {
|
||||
return `${tooltipItem.dataset.label}: ${formattedValue} %`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
legend: {
|
||||
display: true
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
beginAtZero: true
|
||||
},
|
||||
y: {
|
||||
beginAtZero: true
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
console.error('Failed to show chart');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
updateChart(): void {
|
||||
const parameter = (document.getElementById('parameterSelect') as HTMLSelectElement).value;
|
||||
const timeframe = (document.getElementById('timeframeSelect') as HTMLSelectElement).value;
|
||||
|
||||
let newData: number[];
|
||||
let newLabel: string;
|
||||
let newColor: string;
|
||||
let newLabels: string[];
|
||||
|
||||
const kelembapanColor = '#16423C';
|
||||
const suhuColor = '#8F5A62';
|
||||
const intensitasCahayaColor = '#DF9B55';
|
||||
const humidityTanahColor = '#493e30';
|
||||
|
||||
switch (parameter) {
|
||||
case 'humidity':
|
||||
newLabel = timeframe === 'hourly' ? 'Kelembapan Udara Per Jam' : (timeframe === 'daily' ? 'Kelembapan Harian' : 'Kelembapan Bulanan');
|
||||
newData = timeframe === 'hourly' ? this.humidityData : (timeframe === 'daily' ? this.dailyHumidityData : this.monthlyHumidityData);
|
||||
newColor = kelembapanColor;
|
||||
newLabels = timeframe === 'hourly' ? this.labelHourly : (timeframe === 'daily' ? this.labelDaily : this.labelMonthly);
|
||||
break;
|
||||
case 'temperature':
|
||||
newLabel = timeframe === 'hourly' ? 'Suhu Per Jam' : (timeframe === 'daily' ? 'Suhu Harian' : 'Suhu Bulanan');
|
||||
newData = timeframe === 'hourly' ? this.temperatureData : (timeframe === 'daily' ? this.dailyTemperatureData : this.monthlyTemperatureData);
|
||||
newColor = suhuColor;
|
||||
newLabels = timeframe === 'hourly' ? this.labelHourly : (timeframe === 'daily' ? this.labelDaily : this.labelMonthly);
|
||||
break;
|
||||
case 'light':
|
||||
newLabel = timeframe === 'hourly' ? 'Intensitas Cahaya Per Jam' : (timeframe === 'daily' ? 'Intensitas Cahaya Harian' : 'Intensitas Cahaya Bulanan');
|
||||
newData = timeframe === 'hourly' ? this.lightData : (timeframe === 'daily' ? this.dailyLightData : this.monthlyLightData);
|
||||
newColor = intensitasCahayaColor;
|
||||
newLabels = timeframe === 'hourly' ? this.labelHourly : (timeframe === 'daily' ? this.labelDaily : this.labelMonthly);
|
||||
break;
|
||||
case 'humidityTanah':
|
||||
newLabel = timeframe === 'hourly' ? 'Kelembaban Tanah Per Jam' : (timeframe === 'daily' ? 'Kelembaban Tanah Harian' : 'Kelembaban Tanah Bulanan');
|
||||
newData = timeframe === 'hourly' ? this.humidityTanahData : (timeframe === 'daily' ? this.dailyHumidityTanahData : this.monthlyHumidityData);
|
||||
newColor = humidityTanahColor;
|
||||
newLabels = timeframe === 'hourly' ? this.labelHourly : (timeframe === 'daily' ? this.labelDaily : this.labelMonthly);
|
||||
break;
|
||||
default:
|
||||
newLabel = 'Kelembapan Per Jam';
|
||||
newData = this.humidityData;
|
||||
newColor = kelembapanColor;
|
||||
newLabels = this.labelHourly;
|
||||
}
|
||||
|
||||
this.createChart(newData, newLabel, newColor, newLabels);
|
||||
}
|
||||
}
|
||||
27
agrilink_vocpro/src/index.html
Normal file
27
agrilink_vocpro/src/index.html
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>AgrilinkVocpro</title>
|
||||
<base href="/">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>
|
||||
<script src="https://code.highcharts.com/modules/exporting.js"></script>
|
||||
<script src="https://code.highcharts.com/modules/export-data.js"></script>
|
||||
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<app-root></app-root>
|
||||
</body>
|
||||
</html>
|
||||
6
agrilink_vocpro/src/main.ts
Normal file
6
agrilink_vocpro/src/main.ts
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
import { bootstrapApplication } from '@angular/platform-browser';
|
||||
import { appConfig } from './app/app.config';
|
||||
import { AppComponent } from './app/app.component';
|
||||
|
||||
bootstrapApplication(AppComponent, appConfig)
|
||||
.catch((err) => console.error(err));
|
||||
3
agrilink_vocpro/src/styles.scss
Normal file
3
agrilink_vocpro/src/styles.scss
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
body{
|
||||
font-family: "Poppins", sans-serif;
|
||||
}
|
||||
15
agrilink_vocpro/tsconfig.app.json
Normal file
15
agrilink_vocpro/tsconfig.app.json
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
|
||||
/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "./out-tsc/app",
|
||||
"types": []
|
||||
},
|
||||
"files": [
|
||||
"src/main.ts"
|
||||
],
|
||||
"include": [
|
||||
"src/**/*.d.ts"
|
||||
]
|
||||
}
|
||||
33
agrilink_vocpro/tsconfig.json
Normal file
33
agrilink_vocpro/tsconfig.json
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
|
||||
/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
|
||||
{
|
||||
"compileOnSave": false,
|
||||
"compilerOptions": {
|
||||
"outDir": "./dist/out-tsc",
|
||||
"strict": true,
|
||||
"noImplicitOverride": true,
|
||||
"noPropertyAccessFromIndexSignature": true,
|
||||
"noImplicitReturns": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"skipLibCheck": true,
|
||||
"isolatedModules": true,
|
||||
"esModuleInterop": true,
|
||||
"sourceMap": true,
|
||||
"declaration": false,
|
||||
"experimentalDecorators": true,
|
||||
"moduleResolution": "bundler",
|
||||
"importHelpers": true,
|
||||
"target": "ES2022",
|
||||
"module": "ES2022",
|
||||
"lib": [
|
||||
"ES2022",
|
||||
"dom"
|
||||
]
|
||||
},
|
||||
"angularCompilerOptions": {
|
||||
"enableI18nLegacyMessageIdFormat": false,
|
||||
"strictInjectionParameters": true,
|
||||
"strictInputAccessModifiers": true,
|
||||
"strictTemplates": true
|
||||
}
|
||||
}
|
||||
15
agrilink_vocpro/tsconfig.spec.json
Normal file
15
agrilink_vocpro/tsconfig.spec.json
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
|
||||
/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "./out-tsc/spec",
|
||||
"types": [
|
||||
"jasmine"
|
||||
]
|
||||
},
|
||||
"include": [
|
||||
"src/**/*.spec.ts",
|
||||
"src/**/*.d.ts"
|
||||
]
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user