fix: chart imports

RefuAPP · Nov 21, 2023 · 5a74ea7 · 5a74ea7
1 parent 67e5dfb
commit 5a74ea7
Showing 3 changed files with 55 additions and 7 deletions.
diff --git a/app/src/app/components/refuge/refuge.page.html b/app/src/app/components/refuge/refuge.page.html
@@ -23,7 +23,10 @@
 
   <div class="about-info">
     <app-refuge-info [refuge]="refuge!"></app-refuge-info>
-    <ion-grid *ngIf="!platformIsMobile()">
+    <ion-grid
+      *ngIf="!platformIsMobile()"
+      style="margin-bottom: 30px; margin-top: 15px; margin-inline: 20px"
+    >
       <ion-row>
         <ion-col>
           <ion-row>
@@ -33,6 +36,8 @@ <h3 class="ion-padding-top ion-padding-start">
           </ion-row>
           <ion-row>
             <app-reservation-picker
+              class="ion-justify-content-center"
+              size="1"
               [refuge]="refuge!"
               (reservation)="createReservation($event)"
             ></app-reservation-picker>
@@ -46,20 +51,26 @@ <h3 class="ion-padding-top ion-padding-start">
             </ng-container>
           </ion-row>
         </ion-col>
-        <ion-col size="8">
+        <ion-col style="margin-bottom: 50px">
           <app-reservations-chart [refuge]="refuge!"></app-reservations-chart>
         </ion-col>
       </ion-row>
     </ion-grid>
-    <ion-grid *ngIf="platformIsMobile()">
+
+    <ion-grid
+      *ngIf="platformIsMobile()"
+      style="margin-bottom: 30px; margin-top: 15px; margin-inline: 20px"
+    >
       <ion-col>
         <ion-row>
-          <h3 class="ion-padding-top ion-padding-start">
+          <h3 class="ion-padding-start" style="margin-top: 10px">
             {{ "REFUGE.RESERVATIONS.HEADER" | translate }}
           </h3>
         </ion-row>
         <ion-row>
           <app-reservation-picker
+            class="ion-justify-content-center"
+            size="1"
             [refuge]="refuge!"
             (reservation)="createReservation($event)"
           ></app-reservation-picker>

diff --git a/app/src/app/components/reservations-chart/reservations-chart.component.ts b/app/src/app/components/reservations-chart/reservations-chart.component.ts
@@ -25,10 +25,24 @@ import { random } from 'lodash';
 })
 export class ReservationsChartComponent implements OnInit, AfterViewInit {
   @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,
@@ -42,10 +56,17 @@ export class ReservationsChartComponent implements OnInit, AfterViewInit {
     return value;
   };
 
-  constructor() {}
+  constructor(
+    private changeDetectorRef: ChangeDetectorRef,
+    private occupationService: OccupationService,
+  ) {}
 
   onSelect() {
-    console.log('On Select');
+    console.log('myballs');
+  }
+
+  getLabels() {
+    return this.days.map((entry) => entry.name);
   }
 
   ngOnInit() {
@@ -58,7 +79,7 @@ export class ReservationsChartComponent implements OnInit, AfterViewInit {
       this.days.push({
         name: currentDate.getUTCDate().toString(),
         value: random(0, 12),
-        tooltipText: 'test',
+        tooltipText: 'myballs',
       });
 
       this.colorScheme.domain.push(color);
@@ -73,4 +94,18 @@ export class ReservationsChartComponent implements OnInit, AfterViewInit {
       },
     ];
   }
+
+  private getBackgroundColorFromCss(): string {
+    const element = document.querySelector('ion-content');
+    if (element == null) return 'white';
+    const style = window.getComputedStyle(element);
+    return style.backgroundColor;
+  }
+
+  private getTextColorFromCss(): string {
+    const element = document.querySelector('ion-content');
+    if (element == null) return 'black';
+    const style = window.getComputedStyle(element);
+    return style.color;
+  }
 }
diff --git a/app/src/app/pages/home/home.module.ts b/app/src/app/pages/home/home.module.ts
@@ -14,6 +14,7 @@ import { RefugeInfoComponent } from '../../components/refuge-info/refuge-info.co
 import { ReservationPickerComponent } from '../../components/reservation-picker/reservation-picker.component';
 import { ReservationsPageModule } from '../reservations/reservations.module';
 import { ReservationsChartComponent } from '../../components/reservations-chart/reservations-chart.component';
+import { BarChartModule } from '@swimlane/ngx-charts';
 
 @NgModule({
   imports: [
@@ -23,6 +24,7 @@ import { ReservationsChartComponent } from '../../components/reservations-chart/
     HomePageRoutingModule,
     TranslateModule,
     ReservationsPageModule,
+    BarChartModule,
   ],
   declarations: [
     HomePage,