diff --git a/android/app/capacitor.build.gradle b/android/app/capacitor.build.gradle
index 1c2a7a8..27b3447 100644
--- a/android/app/capacitor.build.gradle
+++ b/android/app/capacitor.build.gradle
@@ -10,6 +10,7 @@ android {
apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
dependencies {
implementation project(':capacitor-app')
+ implementation project(':capacitor-device')
implementation project(':capacitor-haptics')
implementation project(':capacitor-keyboard')
implementation project(':capacitor-status-bar')
diff --git a/android/capacitor.settings.gradle b/android/capacitor.settings.gradle
index bd35873..e17e000 100644
--- a/android/capacitor.settings.gradle
+++ b/android/capacitor.settings.gradle
@@ -5,6 +5,9 @@ project(':capacitor-android').projectDir = new File('../node_modules/@capacitor/
include ':capacitor-app'
project(':capacitor-app').projectDir = new File('../node_modules/@capacitor/app/android')
+include ':capacitor-device'
+project(':capacitor-device').projectDir = new File('../node_modules/@capacitor/device/android')
+
include ':capacitor-haptics'
project(':capacitor-haptics').projectDir = new File('../node_modules/@capacitor/haptics/android')
diff --git a/package.json b/package.json
index aa903b7..70b3d52 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
"@capacitor/android": "^6.0.0",
"@capacitor/app": "6.0.0",
"@capacitor/core": "6.0.0",
+ "@capacitor/device": "^6.0.0",
"@capacitor/haptics": "6.0.0",
"@capacitor/keyboard": "6.0.0",
"@capacitor/status-bar": "6.0.0",
@@ -31,7 +32,9 @@
"@ionic/storage-angular": "^4.0.0",
"@swimlane/ngx-charts": "^20.5.0",
"@swimlane/ngx-datatable": "^20.1.0",
+ "chart.js": "^4.4.2",
"ionicons": "^7.0.0",
+ "ng2-charts": "^6.0.1",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.14.2"
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 7fc2798..1bc281d 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -39,6 +39,10 @@ const routes: Routes = [
path: 'tabel',
loadComponent: () => import('./tabel/tabel.page').then((m) => m.TabelPage),
},
+ {
+ path: 'get-identitas',
+ loadChildren: () => import('./get-identitas/get-identitas.module').then( m => m.GetIdentitasPageModule)
+ },
];
@NgModule({
diff --git a/src/app/components/line-chart/line-chart.component.html b/src/app/components/line-chart/line-chart.component.html
index a157c93..97c6dd5 100644
--- a/src/app/components/line-chart/line-chart.component.html
+++ b/src/app/components/line-chart/line-chart.component.html
@@ -2,7 +2,6 @@
[view]="view"
[scheme]="'neons'"
[legend]="legend"
- [legendPosition]="legendPosition"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[xAxis]="xAxis"
diff --git a/src/app/components/line-chart/line-chart.component.ts b/src/app/components/line-chart/line-chart.component.ts
index 245982b..acb7931 100644
--- a/src/app/components/line-chart/line-chart.component.ts
+++ b/src/app/components/line-chart/line-chart.component.ts
@@ -1,5 +1,7 @@
import { Component, Input, OnInit } from '@angular/core';
-import { LegendPosition, NgxChartsModule } from '@swimlane/ngx-charts';
+import { NgxChartsModule } from '@swimlane/ngx-charts';
+import { PengukuranService } from '../../services/pengukuran.service';
+import { Storage } from '@ionic/storage-angular';
@Component({
selector: 'app-line-chart',
@@ -19,43 +21,55 @@ export class LineChartComponent implements OnInit {
showYAxisLabel: boolean = true;
showXAxisLabel: boolean = true;
xAxisLabel: string = 'INDIKATOR KESEHATAN INDIVIDU';
- yAxisLabel: string = 'Grafik';
+ yAxisLabel: string = 'Berat Badan';
timeline: boolean = true;
multi: any[] = [];
@Input() view: any;
- @Input() legendPosition = LegendPosition.Right;
colorScheme: any = {
domain: ['#5AA454', '#E44D25', '#CFC0BB', '#7aa3e5', '#a8385d', '#aae3f5']
};
- constructor() { }
+ constructor(
+ private pengukuranService: PengukuranService,
+ private storage: Storage,) { }
- ngOnInit() {
- this.generateData();
+ async ngOnInit() {
+ await this.storage.create();
+ this.getDataGraph()
+ // this.generateData();
}
+ async getDataGraph() {
+ const id_identitas = await this.storage.get('id_identitas');
+ this.pengukuranService.getGraphByIdentitas(id_identitas).subscribe(
+ async (response: any[]) => {
+ console.log(response);
- generateData() {
- this.multi = [
- {
- "name": "Ryan",
- "series": []
+ // Filter the response to include only the segment with the name "Berat Badan"
+ const filteredResponse = response.filter(series => series.series_name === "Berat Badan");
+
+ // Transform the filtered response into the desired format
+ this.multi = filteredResponse.map(series => ({
+ name: series.series_name,
+ series: series.series_data.map((value: any, index: number) => ({
+ name: (index + 1).toString(), // Use index + 1 as the name
+ value: value
+ }))
+ }));
+ },
+ error => {
+ console.error('Error fetching data:', error);
}
- ];
-
- // Generating data for each day of January 2024
- for (let day = 1; day <= 31; day++) {
- let formattedDay = day < 10 ? `0${day}` : `${day}`;
- this.multi[0].series.push({
- "name": `${formattedDay}-01-2024`,
- "value": this.getRandomValue(1, 50)
- });
- }
+ );
}
+ private getDateByIndex(index: number): string {
+ // Define a method to generate date strings based on index
+ // For demonstration, we use a fixed start date and increment it by one day for each index
+ const startDate = new Date('2024-01-01');
+ const date = new Date(startDate);
+ date.setDate(startDate.getDate() + index);
- getRandomValue(min: number, max: number): number {
- return Math.floor(Math.random() * (max - min + 1)) + min;
+ return date.toISOString().split('T')[0]; // Format date as 'YYYY-MM-DD'
}
-
onSelect(data: any): void {
console.log('Item clicked', JSON.parse(JSON.stringify(data)));
}
diff --git a/src/app/get-identitas/get-identitas-routing.module.ts b/src/app/get-identitas/get-identitas-routing.module.ts
new file mode 100644
index 0000000..02df24b
--- /dev/null
+++ b/src/app/get-identitas/get-identitas-routing.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { GetIdentitasPage } from './get-identitas.page';
+
+const routes: Routes = [
+ {
+ path: '',
+ component: GetIdentitasPage
+ }
+];
+
+@NgModule({
+ imports: [RouterModule.forChild(routes)],
+ exports: [RouterModule],
+})
+export class GetIdentitasPageRoutingModule {}
diff --git a/src/app/get-identitas/get-identitas.module.ts b/src/app/get-identitas/get-identitas.module.ts
new file mode 100644
index 0000000..356a563
--- /dev/null
+++ b/src/app/get-identitas/get-identitas.module.ts
@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { GetIdentitasPageRoutingModule } from './get-identitas-routing.module';
+
+import { GetIdentitasPage } from './get-identitas.page';
+
+@NgModule({
+ imports: [
+ CommonModule,
+ FormsModule,
+ IonicModule,
+ GetIdentitasPageRoutingModule
+ ],
+ declarations: [GetIdentitasPage]
+})
+export class GetIdentitasPageModule {}
diff --git a/src/app/get-identitas/get-identitas.page.html b/src/app/get-identitas/get-identitas.page.html
new file mode 100644
index 0000000..0e77744
--- /dev/null
+++ b/src/app/get-identitas/get-identitas.page.html
@@ -0,0 +1,24 @@
+
+
+
+
+
+ Ambil Identitas
+
+
+
+
+
+
+ Ambil Identitas
+
+
+
+
+
+ ID
+
+
+ Simpan
+
+
\ No newline at end of file
diff --git a/src/app/get-identitas/get-identitas.page.scss b/src/app/get-identitas/get-identitas.page.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/get-identitas/get-identitas.page.spec.ts b/src/app/get-identitas/get-identitas.page.spec.ts
new file mode 100644
index 0000000..9d30f8d
--- /dev/null
+++ b/src/app/get-identitas/get-identitas.page.spec.ts
@@ -0,0 +1,17 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { GetIdentitasPage } from './get-identitas.page';
+
+describe('GetIdentitasPage', () => {
+ let component: GetIdentitasPage;
+ let fixture: ComponentFixture;
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(GetIdentitasPage);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/get-identitas/get-identitas.page.ts b/src/app/get-identitas/get-identitas.page.ts
new file mode 100644
index 0000000..feea476
--- /dev/null
+++ b/src/app/get-identitas/get-identitas.page.ts
@@ -0,0 +1,60 @@
+import { Component, OnInit } from '@angular/core';
+import { Storage } from '@ionic/storage-angular';
+import { ToastController } from '@ionic/angular';
+import { IdentitasServiceService } from '../services/identitas-service.service';
+import { Router } from '@angular/router';
+
+@Component({
+ selector: 'app-get-identitas',
+ templateUrl: './get-identitas.page.html',
+ styleUrls: ['./get-identitas.page.scss'],
+})
+
+export class GetIdentitasPage implements OnInit {
+ public userData = {
+ id: 0,
+ }
+ private idIdentitas: number | null = null;
+
+ constructor(
+ private storage: Storage,
+ private toastController: ToastController,
+ private identitasService: IdentitasServiceService,
+ private router: Router
+ ) { }
+
+ async ngOnInit() {
+ await this.storage.create();
+ const id_identitas = await this.storage.get('id_identitas');
+ }
+ async showToast(message: string, position: 'top' | 'middle' | 'bottom', color: string) {
+ const toast = await this.toastController.create({
+ message: message,
+ duration: 2000,
+ position: position,
+ color: color
+ });
+ toast.present();
+ }
+ async simpanData() {
+ this.identitasService.getIdentitasById(this.userData.id).subscribe(
+ async (response) => {
+ console.log(response.data);
+ await this.storage.set('id_identitas', response.id || response.data.id);
+ this.idIdentitas = response.id || response.data.id;
+ this.handleResponse(response);
+ this.router.navigate(['/identitas']);
+ },
+ error => this.handleError(error)
+ );
+ }
+
+ handleResponse(response: any) {
+ this.showToast('Data Identitas Ditemukan!', 'top', 'success');
+ }
+
+ handleError(error: { message: any; }) {
+ this.showToast(`Data Identitas Tidak Ditemukan!`, 'top', 'danger');
+ }
+ // this.router.navigate(['/identitas']);
+}
\ No newline at end of file
diff --git a/src/app/identitas/identitas.page.html b/src/app/identitas/identitas.page.html
index 3ac82ec..80ae304 100644
--- a/src/app/identitas/identitas.page.html
+++ b/src/app/identitas/identitas.page.html
@@ -8,11 +8,7 @@
-
-
- Identitas
-
-
+ Ambil Identitas
Nama
diff --git a/src/app/identitas/identitas.page.ts b/src/app/identitas/identitas.page.ts
index 50fc1c1..e1cb47f 100644
--- a/src/app/identitas/identitas.page.ts
+++ b/src/app/identitas/identitas.page.ts
@@ -2,6 +2,8 @@ import { Component, OnInit } from '@angular/core';
import { Storage } from '@ionic/storage-angular';
import { ToastController } from '@ionic/angular';
import { IdentitasServiceService } from '../services/identitas-service.service';
+import { Router, NavigationEnd } from '@angular/router';
+import { filter } from 'rxjs/operators';
@Component({
selector: 'app-identitas',
@@ -30,12 +32,27 @@ export class IdentitasPage implements OnInit {
constructor(
private storage: Storage,
private toastController: ToastController,
- private identitasService: IdentitasServiceService
- ) {}
+ private identitasService: IdentitasServiceService,
+ private router: Router
+ ) {
+ // Subscribe to router events and refresh data on NavigationEnd
+ this.router.events.pipe(
+ filter((event): event is NavigationEnd => event instanceof NavigationEnd)
+ ).subscribe(event => {
+ // Check if the event's URL matches the current page's URL
+ if (event.urlAfterRedirects === '/identitas') {
+ this.refreshData();
+ }
+ });
+ }
async ngOnInit() {
await this.storage.create();
+ this.refreshData();
+ }
+ async refreshData() {
const id_identitas = await this.storage.get('id_identitas');
+ console.log(id_identitas, "id identitas")
this.idIdentitas = await this.storage.get('id_identitas');
this.isEdit = !!id_identitas;
if (id_identitas) {
@@ -122,5 +139,8 @@ export class IdentitasPage implements OnInit {
handleError(error: { message: any; }) {
this.showToast(`Error saving data: ${error.message}`, 'top', 'danger');
}
+ getIdentitas(){
+ this.router.navigate(['/get-identitas']);
+ }
}
diff --git a/src/app/indikator/indikator.page.html b/src/app/indikator/indikator.page.html
index 95207f6..07b4b31 100644
--- a/src/app/indikator/indikator.page.html
+++ b/src/app/indikator/indikator.page.html
@@ -16,8 +16,11 @@
Line Chart
-
-
+
+
+
+
+
\ No newline at end of file
diff --git a/src/app/indikator/indikator.page.ts b/src/app/indikator/indikator.page.ts
index 984c981..e008c7e 100644
--- a/src/app/indikator/indikator.page.ts
+++ b/src/app/indikator/indikator.page.ts
@@ -11,14 +11,12 @@ import {
IonButtons,
IonMenuButton,
} from '@ionic/angular/standalone';
-import { LegendPosition } from '@swimlane/ngx-charts';
import { NgClass } from '@angular/common';
-import { GroupedVerticalBarChartComponent } from '../components/grouped-vertical-bar-chart/grouped-vertical-bar-chart.component';
-import { PieChartComponent } from '../components/pie-chart/pie-chart.component';
-import { VerticalBarChartComponent } from '../components/vertical-bar-chart/vertical-bar-chart.component';
-import { LineChartComponent } from '../components/line-chart/line-chart.component';
-import { HorizontalBarChartComponent } from '../components/horizontal-bar-chart/horizontal-bar-chart.component';
+import { Chart, registerables } from 'chart.js';
+import { ChartConfiguration, ChartOptions, ChartType } from "chart.js";
+import { BaseChartDirective } from 'ng2-charts';
+Chart.register(...registerables);
@Component({
selector: 'app-indikator',
templateUrl: './indikator.page.html',
@@ -35,44 +33,83 @@ import { HorizontalBarChartComponent } from '../components/horizontal-bar-chart/
IonCardTitle,
IonCardContent,
NgClass,
- VerticalBarChartComponent,
- GroupedVerticalBarChartComponent,
- PieChartComponent,
- LineChartComponent,
- HorizontalBarChartComponent
+ BaseChartDirective
],
})
export class IndikatorPage implements OnInit {
- view: any;
- legendPosition!: LegendPosition;
- below: boolean = false;
+ public below: boolean = false;
- constructor(private platform: Platform) {}
+ constructor() {}
ngOnInit() {
- // this.changeLegendPostion(false);
- this.handleScreenSizeChange();
- }
- @HostListener('window:resize', ['$event'])
- onResize(event: any) {
- this.handleScreenSizeChange();
+ this.createChart();
}
- changeLegendPostion(defaultValue = true) {
- this.legendPosition = defaultValue ? LegendPosition.Right : LegendPosition.Below;
- this.below = !defaultValue;
- }
+ createChart() {
+ const canvas = document.getElementById('myChart') as HTMLCanvasElement;
+ const ctx = canvas.getContext('2d');
- handleScreenSizeChange() {
- const width = this.platform.width();
- const height = this.platform.height();
- console.log(width, height);
- if (width > height) {
- this.changeLegendPostion();
- this.view = [0.9 * width, 0.9 * height];
- } else {
- this.changeLegendPostion(false);
- this.view = [0.95 * width, 0.35 * height];
+ if (ctx) {
+ // Create a gradient for the chart background
+ const gradient = ctx.createLinearGradient(0, 0, 0, 400);
+ gradient.addColorStop(0, 'rgba(0, 255, 0, 0.5)'); // Green area
+ gradient.addColorStop(0.33, 'rgba(255, 255, 0, 0.5)'); // Yellow area
+ gradient.addColorStop(0.66, 'rgba(255, 0, 0, 0.5)'); // Red area
+
+ // Apply the gradient to the chart background
+ new Chart(ctx, {
+ type: 'line',
+ data: {
+ labels: ['January', 'February', 'March'],
+ datasets: [{
+ label: 'Series A',
+ data: [0.5, 1.5, 2.5],
+ borderColor: 'black',
+ fill: true,
+ }]
+ },
+ options: {
+ responsive: true,
+ scales: {
+ y: {
+ min: 0,
+ max: 3,
+ beginAtZero: true,
+ ticks: {
+ stepSize: 1,
+ callback: function(value) {
+ return value;
+ }
+ }
+ }
+ }
+ },
+ plugins: [{
+ beforeDraw: function (chart) {
+ const ctx = chart.ctx;
+ const chartArea = chart.chartArea;
+ const chartHeight = chartArea.bottom - chartArea.top;
+
+ // Calculate gradient stops
+ const greenStop = chartHeight * 0.33;
+ const yellowStop = chartHeight * 0.66;
+
+ const gradient = ctx.createLinearGradient(0, chartArea.top, 0, chartArea.bottom);
+ gradient.addColorStop(0, 'rgba(0, 255, 0, 0.5)');
+ gradient.addColorStop(greenStop / chartHeight, 'rgba(0, 255, 0, 0.5)');
+ gradient.addColorStop(greenStop / chartHeight, 'rgba(255, 255, 0, 0.5)');
+ gradient.addColorStop(yellowStop / chartHeight, 'rgba(255, 255, 0, 0.5)');
+ gradient.addColorStop(yellowStop / chartHeight, 'rgba(255, 0, 0, 0.5)');
+ gradient.addColorStop(1, 'rgba(255, 0, 0, 0.5)');
+
+ ctx.save();
+ ctx.fillStyle = gradient;
+ ctx.fillRect(chartArea.left, chartArea.top, chartArea.right - chartArea.left, chartArea.bottom - chartArea.top);
+ ctx.restore();
+ },
+ id: ''
+ }]
+ });
}
}
}
\ No newline at end of file
diff --git a/src/app/pemeriksaan/pemeriksaan.page.html b/src/app/pemeriksaan/pemeriksaan.page.html
index 7d9d50c..de25a09 100644
--- a/src/app/pemeriksaan/pemeriksaan.page.html
+++ b/src/app/pemeriksaan/pemeriksaan.page.html
@@ -24,11 +24,6 @@
-
- IMT (Kg/m²)
-
-
-
Tekanan Darah Diastole(mmHg)
@@ -88,6 +83,10 @@
Trigliserida
+
+ HBA1C
+
+
Lingkar Perut
diff --git a/src/app/pemeriksaan/pemeriksaan.page.ts b/src/app/pemeriksaan/pemeriksaan.page.ts
index 0dcc48a..5333d1a 100644
--- a/src/app/pemeriksaan/pemeriksaan.page.ts
+++ b/src/app/pemeriksaan/pemeriksaan.page.ts
@@ -15,7 +15,7 @@ export class PemeriksaanPage implements OnInit {
berat_badan: '',
frekuensi_nafas: '',
golongan_darah: "",
- imt: '',
+ imt: 0,
kadar_asam_urat: '',
kadar_gula_darah: '',
kadar_hb: '',
@@ -30,7 +30,8 @@ export class PemeriksaanPage implements OnInit {
tekanan_darah_sistole: 0,
tinggi_badan: '',
trigliserida: '',
- waktu_pengambilan_gula_darah: ''
+ waktu_pengambilan_gula_darah: '',
+ hba1c: '',
};
private idIdentitas: number | null = null;
diff --git a/src/app/services/pengukuran.service.ts b/src/app/services/pengukuran.service.ts
index 7e5c2c8..b75107d 100644
--- a/src/app/services/pengukuran.service.ts
+++ b/src/app/services/pengukuran.service.ts
@@ -19,4 +19,8 @@ export class PengukuranService {
const url = `${this.apiUrl}?identitas_id=${identitasId}&take=30`;
return this.http.get(url);
}
+ getGraphByIdentitas(identitasId: number): Observable {
+ const url = `${this.apiUrl}/graph?identitas_id=${identitasId}`;
+ return this.http.get(url);
+ }
}
\ No newline at end of file
diff --git a/src/app/tabel/custom-date.module.ts b/src/app/tabel/custom-date.module.ts
new file mode 100644
index 0000000..1a4e728
--- /dev/null
+++ b/src/app/tabel/custom-date.module.ts
@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CustomDatePipe } from './custom-date.pipe'; // Adjust the path as necessary
+
+@NgModule({
+ declarations: [CustomDatePipe],
+ imports: [CommonModule],
+ exports: [CustomDatePipe]
+})
+export class CustomDateModule { }
diff --git a/src/app/tabel/custom-date.pipe.ts b/src/app/tabel/custom-date.pipe.ts
new file mode 100644
index 0000000..231bd5e
--- /dev/null
+++ b/src/app/tabel/custom-date.pipe.ts
@@ -0,0 +1,16 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { formatDate } from '@angular/common';
+
+@Pipe({
+ name: 'customDate'
+})
+export class CustomDatePipe implements PipeTransform {
+
+ transform(value: string): string {
+ if (!value) return '';
+
+ const date = new Date(value);
+ return formatDate(date, 'dd-MM-yyyy HH:mm', 'en-US');
+ }
+
+}
diff --git a/src/app/tabel/tabel.page.html b/src/app/tabel/tabel.page.html
index bfcf033..f407b16 100644
--- a/src/app/tabel/tabel.page.html
+++ b/src/app/tabel/tabel.page.html
@@ -27,6 +27,15 @@
+
+
+
+
+
+
+ {{ value | customDate }}
+
+
diff --git a/src/app/tabel/tabel.page.ts b/src/app/tabel/tabel.page.ts
index be036a2..26dfd7b 100644
--- a/src/app/tabel/tabel.page.ts
+++ b/src/app/tabel/tabel.page.ts
@@ -16,6 +16,7 @@ import {
import { ColumnMode, DatatableComponent, NgxDatatableModule } from '@swimlane/ngx-datatable';
import { PengukuranService } from '../services/pengukuran.service';
import { Storage } from '@ionic/storage-angular';
+import { CustomDateModule } from './custom-date.module';
@Component({
selector: 'app-tabel',
@@ -35,7 +36,8 @@ import { Storage } from '@ionic/storage-angular';
IonInput,
NgxDatatableModule,
IonButtons,
- IonMenuButton
+ IonMenuButton,
+ CustomDateModule
],
})
export class TabelPage implements OnInit {