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