diff --git a/package-lock.json b/package-lock.json index 414f5ee..2c33bac 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,7 +8,7 @@ "name": "paijo", "version": "0.0.1", "dependencies": { - "@angular/animations": "^17.0.2", + "@angular/animations": "^17.3.8", "@angular/common": "^17.0.2", "@angular/compiler": "^17.0.2", "@angular/core": "^17.0.2", diff --git a/package.json b/package.json index 866f9e1..75d492b 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,7 @@ }, "private": true, "dependencies": { - "@angular/animations": "^17.0.2", + "@angular/animations": "^17.3.8", "@angular/common": "^17.0.2", "@angular/compiler": "^17.0.2", "@angular/core": "^17.0.2", diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 503fc06..87fa218 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -21,7 +21,7 @@ const routes: Routes = [ }, { path: 'indikator', - loadChildren: () => import('./indikator/indikator.module').then( m => m.IndikatorPageModule) + loadComponent: () => import('./indikator/indikator.page').then((m) => m.IndikatorPage), }, ]; diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 34b715b..8bf742f 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,7 +1,7 @@ import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { RouteReuseStrategy } from '@angular/router'; - +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { IonicModule, IonicRouteStrategy } from '@ionic/angular'; import { AppComponent } from './app.component'; @@ -9,7 +9,7 @@ import { AppRoutingModule } from './app-routing.module'; @NgModule({ declarations: [AppComponent], - imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule], + imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, BrowserAnimationsModule], providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }], bootstrap: [AppComponent], }) diff --git a/src/app/components/grouped-vertical-bar-chart/grouped-vertical-bar-chart.component.html b/src/app/components/grouped-vertical-bar-chart/grouped-vertical-bar-chart.component.html new file mode 100644 index 0000000..dd1a43c --- /dev/null +++ b/src/app/components/grouped-vertical-bar-chart/grouped-vertical-bar-chart.component.html @@ -0,0 +1,18 @@ + + \ No newline at end of file diff --git a/src/app/components/grouped-vertical-bar-chart/grouped-vertical-bar-chart.component.scss b/src/app/components/grouped-vertical-bar-chart/grouped-vertical-bar-chart.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/components/grouped-vertical-bar-chart/grouped-vertical-bar-chart.component.spec.ts b/src/app/components/grouped-vertical-bar-chart/grouped-vertical-bar-chart.component.spec.ts new file mode 100644 index 0000000..c8a9912 --- /dev/null +++ b/src/app/components/grouped-vertical-bar-chart/grouped-vertical-bar-chart.component.spec.ts @@ -0,0 +1,24 @@ +import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; +import { IonicModule } from '@ionic/angular'; + +import { GroupedVerticalBarChartComponent } from './grouped-vertical-bar-chart.component'; + +describe('GroupedVerticalBarChartComponent', () => { + let component: GroupedVerticalBarChartComponent; + let fixture: ComponentFixture; + + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + declarations: [ GroupedVerticalBarChartComponent ], + imports: [IonicModule.forRoot()] + }).compileComponents(); + + fixture = TestBed.createComponent(GroupedVerticalBarChartComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + })); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/grouped-vertical-bar-chart/grouped-vertical-bar-chart.component.ts b/src/app/components/grouped-vertical-bar-chart/grouped-vertical-bar-chart.component.ts new file mode 100644 index 0000000..dfba553 --- /dev/null +++ b/src/app/components/grouped-vertical-bar-chart/grouped-vertical-bar-chart.component.ts @@ -0,0 +1,91 @@ +import { Component, Input, OnInit } from '@angular/core'; +import { LegendPosition, NgxChartsModule } from '@swimlane/ngx-charts'; + +@Component({ + selector: 'app-grouped-vertical-bar-chart', + templateUrl: './grouped-vertical-bar-chart.component.html', + styleUrls: ['./grouped-vertical-bar-chart.component.scss'], + standalone: true, + imports: [NgxChartsModule], +}) +export class GroupedVerticalBarChartComponent implements OnInit { + + // options + showXAxis: boolean = true; + showYAxis: boolean = true; + gradient: boolean = true; + showLegend: boolean = true; + showXAxisLabel: boolean = true; + xAxisLabel: string = 'Country'; + showYAxisLabel: boolean = true; + yAxisLabel: string = 'Population'; + legendTitle: string = 'Years'; + @Input() view: any; + @Input() legendPosition = LegendPosition.Right; + + colorScheme: any = { + domain: ['#5AA454', '#C7B42C', '#AAAAAA'], + }; + + multi: any[] = []; + + constructor() {} + + ngOnInit() { + this.multi = [ + { + name: 'Germany', + series: [ + { + name: '2010', + value: 7300000, + }, + { + name: '2011', + value: 8940000, + }, + ], + }, + + { + name: 'USA', + series: [ + { + name: '2010', + value: 7870000, + }, + { + name: '2011', + value: 8270000, + }, + ], + }, + + { + name: 'France', + series: [ + { + name: '2010', + value: 5000002, + }, + { + name: '2011', + value: 5800000, + }, + ], + }, + ]; + } + + onSelect(data: any): void { + console.log('Item clicked', JSON.parse(JSON.stringify(data))); + } + + onActivate(data: any): void { + console.log('Activate', JSON.parse(JSON.stringify(data))); + } + + onDeactivate(data: any): void { + console.log('Deactivate', JSON.parse(JSON.stringify(data))); + } +} diff --git a/src/app/components/horizontal-bar-chart/horizontal-bar-chart.component.html b/src/app/components/horizontal-bar-chart/horizontal-bar-chart.component.html new file mode 100644 index 0000000..bdc2cdd --- /dev/null +++ b/src/app/components/horizontal-bar-chart/horizontal-bar-chart.component.html @@ -0,0 +1,18 @@ + + + \ No newline at end of file diff --git a/src/app/components/horizontal-bar-chart/horizontal-bar-chart.component.scss b/src/app/components/horizontal-bar-chart/horizontal-bar-chart.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/components/horizontal-bar-chart/horizontal-bar-chart.component.spec.ts b/src/app/components/horizontal-bar-chart/horizontal-bar-chart.component.spec.ts new file mode 100644 index 0000000..f5b99d2 --- /dev/null +++ b/src/app/components/horizontal-bar-chart/horizontal-bar-chart.component.spec.ts @@ -0,0 +1,24 @@ +import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; +import { IonicModule } from '@ionic/angular'; + +import { HorizontalBarChartComponent } from './horizontal-bar-chart.component'; + +describe('HorizontalBarChartComponent', () => { + let component: HorizontalBarChartComponent; + let fixture: ComponentFixture; + + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + declarations: [ HorizontalBarChartComponent ], + imports: [IonicModule.forRoot()] + }).compileComponents(); + + fixture = TestBed.createComponent(HorizontalBarChartComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + })); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/horizontal-bar-chart/horizontal-bar-chart.component.ts b/src/app/components/horizontal-bar-chart/horizontal-bar-chart.component.ts new file mode 100644 index 0000000..dbaccda --- /dev/null +++ b/src/app/components/horizontal-bar-chart/horizontal-bar-chart.component.ts @@ -0,0 +1,58 @@ +import { Component, Input, OnInit } from '@angular/core'; +import { LegendPosition, NgxChartsModule } from '@swimlane/ngx-charts'; + +@Component({ + selector: 'app-horizontal-bar-chart', + templateUrl: './horizontal-bar-chart.component.html', + styleUrls: ['./horizontal-bar-chart.component.scss'], + standalone: true, + imports: [NgxChartsModule], +}) +export class HorizontalBarChartComponent implements OnInit { + // options + showXAxis: boolean = true; + showYAxis: boolean = true; + gradient: boolean = false; + showLegend: boolean = true; + showXAxisLabel: boolean = true; + yAxisLabel: string = 'Country'; + showYAxisLabel: boolean = true; + xAxisLabel: string = 'Population'; + @Input() view: any; + @Input() legendPosition = LegendPosition.Below; + single: any[] = []; + colorScheme: any = { + domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'], + }; + + constructor() {} + + ngOnInit() { + this.single = [ + { + "name": "Germany", + "value": 8940000 + }, + { + "name": "USA", + "value": 5000000 + }, + { + "name": "France", + "value": 7200000 + } + ]; + } + + onSelect(data: any): void { + console.log('Item clicked', JSON.parse(JSON.stringify(data))); + } + + onActivate(data: any): void { + console.log('Activate', JSON.parse(JSON.stringify(data))); + } + + onDeactivate(data: any): void { + console.log('Deactivate', JSON.parse(JSON.stringify(data))); + } +} diff --git a/src/app/components/line-chart/line-chart.component.html b/src/app/components/line-chart/line-chart.component.html new file mode 100644 index 0000000..a157c93 --- /dev/null +++ b/src/app/components/line-chart/line-chart.component.html @@ -0,0 +1,18 @@ + + \ No newline at end of file diff --git a/src/app/components/line-chart/line-chart.component.scss b/src/app/components/line-chart/line-chart.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/components/line-chart/line-chart.component.spec.ts b/src/app/components/line-chart/line-chart.component.spec.ts new file mode 100644 index 0000000..ca25565 --- /dev/null +++ b/src/app/components/line-chart/line-chart.component.spec.ts @@ -0,0 +1,24 @@ +import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; +import { IonicModule } from '@ionic/angular'; + +import { LineChartComponent } from './line-chart.component'; + +describe('LineChartComponent', () => { + let component: LineChartComponent; + let fixture: ComponentFixture; + + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + declarations: [ LineChartComponent ], + imports: [IonicModule.forRoot()] + }).compileComponents(); + + fixture = TestBed.createComponent(LineChartComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + })); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/line-chart/line-chart.component.ts b/src/app/components/line-chart/line-chart.component.ts new file mode 100644 index 0000000..245982b --- /dev/null +++ b/src/app/components/line-chart/line-chart.component.ts @@ -0,0 +1,70 @@ +import { Component, Input, OnInit } from '@angular/core'; +import { LegendPosition, NgxChartsModule } from '@swimlane/ngx-charts'; + +@Component({ + selector: 'app-line-chart', + templateUrl: './line-chart.component.html', + styleUrls: ['./line-chart.component.scss'], + standalone: true, + imports: [NgxChartsModule], +}) +export class LineChartComponent implements OnInit { + + // options + legend: boolean = true; + showLabels: boolean = true; + animations: boolean = true; + xAxis: boolean = true; + yAxis: boolean = true; + showYAxisLabel: boolean = true; + showXAxisLabel: boolean = true; + xAxisLabel: string = 'INDIKATOR KESEHATAN INDIVIDU'; + yAxisLabel: string = 'Grafik'; + timeline: boolean = true; + multi: any[] = []; + @Input() view: any; + @Input() legendPosition = LegendPosition.Right; + colorScheme: any = { + domain: ['#5AA454', '#E44D25', '#CFC0BB', '#7aa3e5', '#a8385d', '#aae3f5'] + }; + + constructor() { } + + ngOnInit() { + this.generateData(); + } + + generateData() { + this.multi = [ + { + "name": "Ryan", + "series": [] + } + ]; + + // 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) + }); + } + } + + getRandomValue(min: number, max: number): number { + return Math.floor(Math.random() * (max - min + 1)) + min; + } + + onSelect(data: any): void { + console.log('Item clicked', JSON.parse(JSON.stringify(data))); + } + + onActivate(data: any): void { + console.log('Activate', JSON.parse(JSON.stringify(data))); + } + + onDeactivate(data: any): void { + console.log('Deactivate', JSON.parse(JSON.stringify(data))); + } +} diff --git a/src/app/components/pie-chart/pie-chart.component.html b/src/app/components/pie-chart/pie-chart.component.html new file mode 100644 index 0000000..a44f710 --- /dev/null +++ b/src/app/components/pie-chart/pie-chart.component.html @@ -0,0 +1,15 @@ + + + \ No newline at end of file diff --git a/src/app/components/pie-chart/pie-chart.component.scss b/src/app/components/pie-chart/pie-chart.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/components/pie-chart/pie-chart.component.spec.ts b/src/app/components/pie-chart/pie-chart.component.spec.ts new file mode 100644 index 0000000..1cdbc49 --- /dev/null +++ b/src/app/components/pie-chart/pie-chart.component.spec.ts @@ -0,0 +1,24 @@ +import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; +import { IonicModule } from '@ionic/angular'; + +import { PieChartComponent } from './pie-chart.component'; + +describe('PieChartComponent', () => { + let component: PieChartComponent; + let fixture: ComponentFixture; + + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + declarations: [ PieChartComponent ], + imports: [IonicModule.forRoot()] + }).compileComponents(); + + fixture = TestBed.createComponent(PieChartComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + })); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/pie-chart/pie-chart.component.ts b/src/app/components/pie-chart/pie-chart.component.ts new file mode 100644 index 0000000..57218e7 --- /dev/null +++ b/src/app/components/pie-chart/pie-chart.component.ts @@ -0,0 +1,60 @@ +import { Component, Input, OnInit } from '@angular/core'; +import { LegendPosition, NgxChartsModule } from '@swimlane/ngx-charts'; + +@Component({ + selector: 'app-pie-chart', + templateUrl: './pie-chart.component.html', + styleUrls: ['./pie-chart.component.scss'], + standalone: true, + imports: [NgxChartsModule], +}) +export class PieChartComponent implements OnInit { + + // options + gradient: boolean = true; + showLegend: boolean = true; + showLabels: boolean = true; + isDoughnut: boolean = false; + @Input() view: any; + @Input() legendPosition = LegendPosition.Right; + colorScheme: any = { + domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'] + }; + single: any[] = []; + + constructor() { } + + ngOnInit() { + this.single = [ + { + "name": "Germany", + "value": 8940000 + }, + { + "name": "USA", + "value": 5000000 + }, + { + "name": "France", + "value": 7200000 + }, + { + "name": "UK", + "value": 6200000 + } + ]; + } + + onSelect(data: any): void { + console.log('Item clicked', JSON.parse(JSON.stringify(data))); + } + + onActivate(data: any): void { + console.log('Activate', JSON.parse(JSON.stringify(data))); + } + + onDeactivate(data: any): void { + console.log('Deactivate', JSON.parse(JSON.stringify(data))); + } + +} diff --git a/src/app/components/vertical-bar-chart/vertical-bar-chart.component.html b/src/app/components/vertical-bar-chart/vertical-bar-chart.component.html new file mode 100644 index 0000000..6844b54 --- /dev/null +++ b/src/app/components/vertical-bar-chart/vertical-bar-chart.component.html @@ -0,0 +1,16 @@ + + + \ No newline at end of file diff --git a/src/app/components/vertical-bar-chart/vertical-bar-chart.component.scss b/src/app/components/vertical-bar-chart/vertical-bar-chart.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/components/vertical-bar-chart/vertical-bar-chart.component.spec.ts b/src/app/components/vertical-bar-chart/vertical-bar-chart.component.spec.ts new file mode 100644 index 0000000..2f3336d --- /dev/null +++ b/src/app/components/vertical-bar-chart/vertical-bar-chart.component.spec.ts @@ -0,0 +1,24 @@ +import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; +import { IonicModule } from '@ionic/angular'; + +import { VerticalBarChartComponent } from './vertical-bar-chart.component'; + +describe('VerticalBarChartComponent', () => { + let component: VerticalBarChartComponent; + let fixture: ComponentFixture; + + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + declarations: [ VerticalBarChartComponent ], + imports: [IonicModule.forRoot()] + }).compileComponents(); + + fixture = TestBed.createComponent(VerticalBarChartComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + })); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/vertical-bar-chart/vertical-bar-chart.component.ts b/src/app/components/vertical-bar-chart/vertical-bar-chart.component.ts new file mode 100644 index 0000000..dfbf88a --- /dev/null +++ b/src/app/components/vertical-bar-chart/vertical-bar-chart.component.ts @@ -0,0 +1,52 @@ +import { Component, Input, OnInit } from '@angular/core'; +import { NgxChartsModule, LegendPosition } from '@swimlane/ngx-charts'; + +@Component({ + selector: 'app-vertical-bar-chart', + templateUrl: './vertical-bar-chart.component.html', + styleUrls: ['./vertical-bar-chart.component.scss'], + standalone: true, + imports: [NgxChartsModule] +}) +export class VerticalBarChartComponent implements OnInit { + + // options + showXAxis = true; + showYAxis = true; + gradient = false; + showLegend = true; + showXAxisLabel = true; + xAxisLabel = 'Country'; + showYAxisLabel = true; + yAxisLabel = 'Population'; + @Input() view: any; + @Input() legendPosition = LegendPosition.Below; + colorScheme: any = { + domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'] + }; + single: any[] = []; + + constructor() { } + + ngOnInit() { + this.single = [ + { + "name": "Germany", + "value": 8940000 + }, + { + "name": "USA", + "value": 5000000 + }, + { + "name": "France", + "value": 7200000 + } + ]; + } + + onSelect(event: any) { + console.log(event); + } + +} diff --git a/src/app/indikator/indikator.module.ts b/src/app/indikator/indikator.module.ts deleted file mode 100644 index 76cf239..0000000 --- a/src/app/indikator/indikator.module.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { FormsModule } from '@angular/forms'; - -import { IonicModule } from '@ionic/angular'; - -import { IndikatorPageRoutingModule } from './indikator-routing.module'; - -import { IndikatorPage } from './indikator.page'; - -@NgModule({ - imports: [ - CommonModule, - FormsModule, - IonicModule, - IndikatorPageRoutingModule - ], - declarations: [IndikatorPage] -}) -export class IndikatorPageModule {} diff --git a/src/app/indikator/indikator.page.html b/src/app/indikator/indikator.page.html index 7548e1f..5985f53 100644 --- a/src/app/indikator/indikator.page.html +++ b/src/app/indikator/indikator.page.html @@ -1,13 +1,16 @@ - + - indikator + + Charts + - - - - indikator - - - + + + 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 f8db67d..92a98c2 100644 --- a/src/app/indikator/indikator.page.ts +++ b/src/app/indikator/indikator.page.ts @@ -1,15 +1,74 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, HostListener } from '@angular/core'; +import { Platform } from '@ionic/angular'; +import { + IonHeader, + IonToolbar, + IonTitle, + IonContent, + IonCard, + IonCardTitle, + IonCardContent, +} 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'; @Component({ selector: 'app-indikator', templateUrl: './indikator.page.html', styleUrls: ['./indikator.page.scss'], + standalone: true, + imports: [ + IonHeader, + IonToolbar, + IonTitle, + IonContent, + IonCard, + IonCardTitle, + IonCardContent, + NgClass, + VerticalBarChartComponent, + GroupedVerticalBarChartComponent, + PieChartComponent, + LineChartComponent, + HorizontalBarChartComponent + ], }) export class IndikatorPage implements OnInit { + view: any; + legendPosition!: LegendPosition; + below: boolean = false; - constructor() { } + constructor(private platform: Platform) {} ngOnInit() { + // this.changeLegendPostion(false); + this.handleScreenSizeChange(); + } + @HostListener('window:resize', ['$event']) + onResize(event: any) { + this.handleScreenSizeChange(); } -} + changeLegendPostion(defaultValue = true) { + this.legendPosition = defaultValue ? LegendPosition.Right : LegendPosition.Below; + this.below = !defaultValue; + } + + 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]; + } + } +} \ No newline at end of file