refactor(refuge-page): restyle graph and add reservation info

RefuAPP · Nov 20, 2023 · 80a7096 · 80a7096
1 parent fd9669e
commit 80a7096
Show file tree

Hide file tree

Showing 16 changed files with 602 additions and 122 deletions.
diff --git a/app/package-lock.json b/app/package-lock.json
diff --git a/app/package.json b/app/package.json
@@ -19,6 +19,7 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^16.0.0",
+    "@angular/cdk": "^16.2.12",
     "@angular/common": "^16.0.0",
     "@angular/compiler": "^16.0.0",
     "@angular/core": "^16.0.0",
@@ -48,8 +49,12 @@
     "@ngrx/store-devtools": "^16.3.0",
     "@ngx-translate/core": "^15.0.0",
     "@ngx-translate/http-loader": "^8.0.0",
+    "@swimlane/ngx-charts": "^20.5.0",
     "@types/lodash": "^4.14.201",
     "@types/scriptjs": "^0.0.4",
+    "d3-scale": "^4.0.2",
+    "d3-selection": "^3.0.0",
+    "d3-shape": "^3.2.0",
     "ionicons": "^7.0.0",
     "jwt-decode": "^3.1.2",
     "lightweight-charts": "^4.1.0",
@@ -75,6 +80,9 @@
     "@commitlint/cli": "^17.8.0",
     "@commitlint/config-conventional": "^17.8.0",
     "@ionic/angular-toolkit": "^9.0.0",
+    "@types/d3-scale": "^4.0.8",
+    "@types/d3-selection": "^3.0.10",
+    "@types/d3-shape": "^3.1.5",
     "@types/jasmine": "~4.3.0",
     "@types/jest": "^29.5.6",
     "@types/node": "^12.11.1",

diff --git a/app/src/app/components/reservation-picker/reservation-picker.component.html b/app/src/app/components/reservation-picker/reservation-picker.component.html
@@ -1,11 +1,24 @@
 <ion-grid>
   <ion-col>
     <ion-datetime presentation="date" [(ngModel)]="date"></ion-datetime>
-  </ion-col>
-  <ion-col>
-    <ion-button (click)="onBookClick()" style="margin-left: 5%">
-      {{ "REFUGE.RESERVATIONS.BUTTON" | translate }}
-      <ion-icon style="margin-left: 5%" name="folder"></ion-icon>
-    </ion-button>
+    <ion-row>
+      <ion-col size="10">
+        <ion-button (click)="onBookClick()" style="width: 100%;">
+          {{ "REFUGE.RESERVATIONS.BUTTON" | translate }}
+          <ion-icon style="margin-left: 5%" name="folder"></ion-icon>
+        </ion-button>
+      </ion-col>
+      <ion-col size="2">
+        <ion-button id="present-info-alert">
+          <ion-icon name="information-circle-outline"></ion-icon>
+        </ion-button>
+      </ion-col>
+      <ion-alert
+        trigger="present-info-alert"
+        header="'REFUGE.RESERVATIONS.INFO.HEADER' | translate"
+        message="'REFUGE.RESERVATIONS.INFO.BODY' | translate"
+        [buttons]="alertButtons"
+      ></ion-alert>
+    </ion-row>
   </ion-col>
 </ion-grid>
diff --git a/app/src/app/components/reservation-picker/reservation-picker.component.scss b/app/src/app/components/reservation-picker/reservation-picker.component.scss
@@ -0,0 +1,6 @@
+#present-info-alert {
+  background: transparent;
+  --background: transparent;
+  color: #3e74b2;
+  font-size: 20px;
+}
diff --git a/app/src/app/components/reservation-picker/reservation-picker.component.ts b/app/src/app/components/reservation-picker/reservation-picker.component.ts
@@ -1,6 +1,7 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { fromISOString } from '../../schemas/night/night';
 import { Refuge } from '../../schemas/refuge/refuge';
+import { TranslateService } from '@ngx-translate/core';
 import { AppState } from 'src/app/state/app.state';
 import { Store } from '@ngrx/store';
 import { addReservation } from '../../state/reservations/reservations.actions';
@@ -14,7 +15,10 @@ export class ReservationPickerComponent implements OnInit {
   @Input({ required: true }) refuge!: Refuge;
   date = '';
 
-  constructor(private store: Store<AppState>) {}
+  alertButtons = [this.translate.instant('REFUGE.RESERVATIONS.INFO.OKAY')];
+
+  constructor(private store: Store<AppState>, private translate: TranslateService) {
+  }
 
   ngOnInit() {}
 

diff --git a/app/src/app/components/reservations-chart/reservations-chart.component.html b/app/src/app/components/reservations-chart/reservations-chart.component.html
@@ -1,6 +1,26 @@
-<h3 class="ion-padding-top ion-padding-start">
+<h3 class="ion-padding-start" style="margin-bottom: 30px">
   {{ "REFUGE.OCCUPATION.HISTORIAL" | translate }}
 </h3>
-<div class="graphic-info">
-  <div #chart></div>
+<div class="modal-card">
+<ngx-charts-bar-vertical
+  #verticalBarChart
+  [scheme]="colorScheme"
+  [results]="days"
+  [gradient]=false
+  [xAxis]=true
+  [yAxis]=true
+  [legend]=false
+  [showXAxisLabel]=true
+  [showYAxisLabel]=true
+  [xAxisLabel]= "'REFUGE.OCCUPATION.XLABEL' | translate"
+  [yAxisLabel]= "'REFUGE.OCCUPATION.YLABEL' | translate"
+  [xAxisTickFormatting]="xAxisTickFormatting"
+  (select)="onSelect()">
+  <ng-template #tooltipTemplate let-model="model">
+    <!-- fields are series/name/value -->
+    <div class="tt">
+      Custom tooltip -
+    </div>
+  </ng-template>
+</ngx-charts-bar-vertical>
 </div>
diff --git a/app/src/app/components/reservations-chart/reservations-chart.component.scss b/app/src/app/components/reservations-chart/reservations-chart.component.scss
@@ -0,0 +1,3 @@
+:host ::ng-deep .ngx-charts text {
+  fill: var(--ion-color-light-contrast) !important;
+}
diff --git a/app/src/app/components/reservations-chart/reservations-chart.component.ts b/app/src/app/components/reservations-chart/reservations-chart.component.ts
@@ -1,96 +1,88 @@
-import {
-  AfterViewInit,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  Input,
-  OnInit,
-  ViewChild,
-} from '@angular/core';
-import { Refuge } from '../../schemas/refuge/refuge';
-import { createChart } from 'lightweight-charts';
-import { getChartConfiguration } from '../../pages/refuge/chart-configuration';
-import {
-  OccupationService,
-  WeeklyOccupation,
-} from '../../services/occupation/occupation.service';
+import {AfterViewInit, ChangeDetectorRef, Component, Input, OnInit, ViewChild} from '@angular/core';
+import {Refuge} from '../../schemas/refuge/refuge';
+import {BarVerticalComponent, Color, LegendOptions, LegendPosition, ScaleType} from '@swimlane/ngx-charts';
+import {OccupationService} from '../../services/occupation/occupation.service';
+import {of} from 'rxjs';
+import {random} from "lodash";
 
 @Component({
   selector: 'app-reservations-chart',
   templateUrl: './reservations-chart.component.html',
   styleUrls: ['./reservations-chart.component.scss'],
 })
 export class ReservationsChartComponent implements OnInit, AfterViewInit {
-  @Input({ required: true }) refuge!: Refuge;
-  @ViewChild('chart', { static: false }) chart?: ElementRef;
+  @Input({required: true}) refuge!: Refuge;
+  //    Get vertical bar component with viewchiod
+  @ViewChild('verticalBarChart') verticalBarChart?: BarVerticalComponent;
+  testDate1 = new Date('2023-10-14');
+  testDate2 = new Date('2023-10-15');
+
+  testObservable = of([
+    {
+      testDate1: 1,
+      testDate2: 2,
+    },
+  ]);
+
+  days: { name: string, value: number, tooltipText: string }[] = [];
+
+  view = [700, 400] as [number, number];
+
+  gradient = false;
+
+  colorScheme: Color = {
+    name: 'custom',
+    selectable: true,
+    group: ScaleType.Linear,
+    domain: [],
+  };
+  xAxisTickFormatting = (value: string) => {
+    if (value === new Date().getUTCDate().toString()) {
+      return 'Today';
+    }
+    return value
+  }
 
   constructor(
     private changeDetectorRef: ChangeDetectorRef,
     private occupationService: OccupationService,
-  ) {}
+  ) {
+  }
 
-  ngOnInit() {}
+  onSelect() {
+    console.log('myballs');
+  }
 
-  ngAfterViewInit() {
-    this.createAndStartChart();
+  getLabels() {
+    return this.days.map(entry => entry.name);
   }
 
-  private createAndStartChart() {
-    this.changeDetectorRef.detectChanges();
-    if (this.chart === undefined) {
-      console.log('chart undefined');
-      return;
+  ngOnInit() {
+    // Populate the multi array based on date conditions
+    for (let i = -7; i <= 7; i++) {
+      const currentDate = new Date(Date.now() + i * 24 * 60 * 60 * 1000);
+
+      const color =
+        i === 0 ? '#01579b' : '#7aa3e5'; // Use different colors for the current day and the rest
+
+      this.days.push({
+        name: currentDate.getUTCDate().toString(),
+        value: random(0, 12),
+        tooltipText: "myballs",
+      });
+
+      this.colorScheme.domain.push(color);
     }
-    const chartElement = this.chart.nativeElement;
-    const chart = createChart(
-      chartElement,
-      getChartConfiguration(
-        this.getTextColorFromCss(),
-        this.getBackgroundColorFromCss(),
-      ),
-    );
-    chart.applyOptions({
-      timeScale: {
-        fixLeftEdge: true,
-        rightBarStaysOnScroll: true,
-      },
-    });
-    // Create chart adjusting the size to the current div size
-    const lineSeries = chart.addLineSeries();
-    this.occupationService.getWeeklyOccupationMock(this.refuge.id).subscribe({
-      next: (response) => {
-        // TODO check for errors here
-        const occupation = response as WeeklyOccupation;
-        const data = occupation.weekly_data
-          .map((dayData) => {
-            return {
-              time: `${dayData.date.getFullYear()}-${
-                dayData.date.getMonth() + 1
-              }-${this.getFormattedDayDate(dayData.date)}`,
-              value: dayData.count,
-            };
-          })
-          .reverse();
-        lineSeries.setData(data);
-        this.occupationService.getTodayOccupationMock().subscribe({
-          next: (response) => {
-            const time = new Date();
-            const timeString = `${time.getFullYear()}-${
-              time.getMonth() + 1
-            }-${this.getFormattedDayDate(time)}`;
-            lineSeries.update({ time: timeString, value: response });
-          },
-        });
-      },
-    });
-    chart.timeScale().fitContent();
+
   }
 
-  private getFormattedDayDate(date: Date): string {
-    if (date.getDate() < 10) {
-      return `0${date.getDate()}`;
-    }
-    return `${date.getDate()}`;
+  ngAfterViewInit() {
+    this.verticalBarChart!.activeEntries = [
+      {
+        name: '14',
+        value: 5,
+      },
+    ];
   }
 
   private getBackgroundColorFromCss(): string {