fix chartjs

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",

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",

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),
   },
 ];
 

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],
 })

src/app/components/grouped-vertical-bar-chart/grouped-vertical-bar-chart.component.html

@@ -0,0 +1,18 @@
+<ngx-charts-bar-vertical-2d
+  [view]="view"
+  [scheme]="'flame'"
+  [results]="multi"
+  [gradient]="gradient"
+  [xAxis]="showXAxis"
+  [yAxis]="showYAxis"
+  [legend]="showLegend"
+  [legendPosition]="legendPosition"
+  [showXAxisLabel]="showXAxisLabel"
+  [showYAxisLabel]="showYAxisLabel"
+  [xAxisLabel]="xAxisLabel"
+  [yAxisLabel]="yAxisLabel"
+  [legendTitle]="legendTitle"
+  (select)="onSelect($event)"
+  (activate)="onActivate($event)"
+  (deactivate)="onDeactivate($event)">
+</ngx-charts-bar-vertical-2d>

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<GroupedVerticalBarChartComponent>;
+
+  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();
+  });
+});

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)));
+  }
+}

src/app/components/horizontal-bar-chart/horizontal-bar-chart.component.html

@@ -0,0 +1,18 @@
+<ngx-charts-bar-horizontal
+  [view]="view"
+  [scheme]="'picnic'"
+  [results]="single"
+  [gradient]="gradient"
+  [xAxis]="showXAxis"
+  [yAxis]="showYAxis"
+  [legend]="showLegend"
+  [legendPosition]="legendPosition"
+  [showXAxisLabel]="showXAxisLabel"
+  [showYAxisLabel]="showYAxisLabel"
+  [xAxisLabel]="xAxisLabel"
+  [yAxisLabel]="yAxisLabel"
+  (select)="onSelect($event)"
+  (activate)="onActivate($event)"
+  (deactivate)="onDeactivate($event)">
+  <!-- [scheme]="colorScheme" -->
+</ngx-charts-bar-horizontal>

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<HorizontalBarChartComponent>;
+
+  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();
+  });
+});

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)));
+  }
+}

src/app/components/line-chart/line-chart.component.html

@@ -0,0 +1,18 @@
+<ngx-charts-line-chart
+  [view]="view"
+  [scheme]="'neons'"
+  [legend]="legend"
+  [legendPosition]="legendPosition"
+  [showXAxisLabel]="showXAxisLabel"
+  [showYAxisLabel]="showYAxisLabel"
+  [xAxis]="xAxis"
+  [yAxis]="yAxis"
+  [xAxisLabel]="xAxisLabel"
+  [yAxisLabel]="yAxisLabel"
+  [timeline]="timeline"
+  [results]="multi"
+  (select)="onSelect($event)"
+  (activate)="onActivate($event)"
+  (deactivate)="onDeactivate($event)"
+  >
+</ngx-charts-line-chart>

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<LineChartComponent>;
+
+  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();
+  });
+});

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)));
+  }
+}

src/app/components/pie-chart/pie-chart.component.html

@@ -0,0 +1,15 @@
+<ngx-charts-pie-chart
+  [view]="view"
+  [scheme]="'neons'"
+  [results]="single"
+  [gradient]="gradient"
+  [legend]="showLegend"
+  [legendPosition]="legendPosition"
+  [labels]="showLabels"
+  [doughnut]="isDoughnut"
+  (select)="onSelect($event)"
+  (activate)="onActivate($event)"
+  (deactivate)="onDeactivate($event)"
+  >
+  <!-- [scheme]="colorScheme" -->
+</ngx-charts-pie-chart>

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<PieChartComponent>;
+
+  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();
+  });
+});

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)));
+  }
+
+}

src/app/components/vertical-bar-chart/vertical-bar-chart.component.html

@@ -0,0 +1,16 @@
+<ngx-charts-bar-vertical
+  [view]="view"
+  [scheme]="'ocean'"
+  [results]="single"
+  [gradient]="gradient"
+  [xAxis]="showXAxis"
+  [yAxis]="showYAxis"
+  [legend]="showLegend"
+  [legendPosition]="legendPosition"
+  [showXAxisLabel]="showXAxisLabel"
+  [showYAxisLabel]="showYAxisLabel"
+  [xAxisLabel]="xAxisLabel"
+  [yAxisLabel]="yAxisLabel"
+  (select)="onSelect($event)">
+  <!-- [scheme]="colorScheme" -->
+</ngx-charts-bar-vertical>

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<VerticalBarChartComponent>;
+
+  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();
+  });
+});

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);
+  }
+
+}

src/app/indikator/indikator.module.ts

@@ -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 {}

src/app/indikator/indikator.page.html

@@ -1,13 +1,16 @@
-<ion-header [translucent]="true">
+<ion-header>
   <ion-toolbar>
-    <ion-title>indikator</ion-title>
+    <ion-title>
+      Charts
+    </ion-title>
   </ion-toolbar>
 </ion-header>
 
-<ion-content [fullscreen]="true">
+<ion-content>
-  <ion-header collapse="condense">
+  <ion-card>
-    <ion-toolbar>
+    <ion-card-title class="ion-padding-start">Line Chart</ion-card-title>
-      <ion-title size="large">indikator</ion-title>
+    <ion-card-content class="ion-margin-top" [ngClass]="{'cardContent' : below}">
-    </ion-toolbar>
+      <app-line-chart [view]="view" [legendPosition]="legendPosition"></app-line-chart>
-  </ion-header>
+    </ion-card-content>
+  </ion-card>
 </ion-content>

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];
+    }
+  }
 }