WIP: slider to replace dropdown

finos · Sep 11, 2024 · cc03f36 · cc03f36
1 parent 503080a
commit cc03f36
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 2 deletions.
diff --git a/web-front-end/angular/main/app/report/report.component.html b/web-front-end/angular/main/app/report/report.component.html
@@ -1,5 +1,5 @@
 <div class="trade-container p-5">
-    <div class="trade-ops mb-4">
+    <nav></nav><div class="trade-ops mb-4">
         <div class="trade-filter me-3">
             <app-ngx-dropdown
                 name="account"
@@ -22,6 +22,16 @@
             >
             </app-ngx-dropdown>
         </div>
+
+      </div>
+
+      <div class="trade-ops mb-4" [hidden]="hideSlider">
+        <ngx-slider
+          [options]="options"
+          [(value)]="value"
+          [(highValue)]="highValue"
+          (userChangeEnd)="onSliderChange($event)">
+        </ngx-slider>
     </div>
 
     <div class="trade-blotter">

diff --git a/web-front-end/angular/main/app/report/report.component.ts b/web-front-end/angular/main/app/report/report.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit, TemplateRef } from '@angular/core';
+import { Options } from '@angular-slider/ngx-slider';
 import { Subject } from 'rxjs';
 import { Account } from '../model/account.model';
 import { TradeInterval, TradePointInTime } from '../model/trade.model';
@@ -23,6 +24,21 @@ export class ReportComponent implements OnInit {
   createTicketResponse: any;
   private account = new Subject<Account>();
   private interval = new Subject<TradeInterval>();
+  points: String[] = [];
+  hideSlider = true;
+  value: number = 0;
+  highValue: number = 1;
+  options: Options = {
+    floor: 0,
+    ceil: 1,
+    step: 1,
+    showTicks: true,
+    translate: (index): string => {
+      if (index === this.points.length) {
+        return 'All';
+      } else {
+        return `v${index}`;
+      }}};
 
   constructor(private accountService: AccountService,
       private symbolService: SymbolService,
@@ -51,6 +67,12 @@ export class ReportComponent implements OnInit {
     interval && this.setInterval(interval);
   }
 
+  onSliderChange(event: any) {
+    console.log('onSliderChange', event);
+    this.value = event.value;
+    this.highValue = event.highValue;
+  }
+
   private setAccount(account: Account) {
     this.accountModel = account;
     this.account.next(account);
@@ -62,9 +84,18 @@ export class ReportComponent implements OnInit {
       console.log('Report Comp : Trade intervals', this.intervals);
 
       intervals.length > 0 && this.setInterval(this.intervals[0]);
+      this.setSliderValues(intervals);
     });
   }
 
+  private setSliderValues(intervals: TradeInterval[]) {
+    const pointsSet = new Set(intervals.map((i) => i.start)
+    .concat(intervals.map((i) => i.end).filter((v, i, a) => v  !== null)));
+    this.points = Array.from(pointsSet).sort();
+    this.options = Object.assign({}, this.options, {ceil: this.points.length});
+    this.hideSlider = false;
+  }
+
   private setInterval(interval: TradeInterval) {
     console.log('setInterval', interval);
     this.intervalModel = interval;

diff --git a/web-front-end/angular/main/app/report/report.module.ts b/web-front-end/angular/main/app/report/report.module.ts
@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { NgxSliderModule } from '@angular-slider/ngx-slider';
 import { ReportComponent } from './report.component';
 import { ClosedPositionBlotterComponent } from './closed-position-blotter/closed-position-blotter.component';
 import { PositionBlotterComponent } from './position-blotter/position-blotter.component';
@@ -23,7 +24,8 @@ import { TypeaheadModule } from 'ngx-bootstrap/typeahead';
     ModalModule.forRoot(),
     AlertModule.forRoot(),
     FormsModule,
-    DropdownModule
+    DropdownModule,
+    NgxSliderModule
   ],
   exports: [ReportComponent, TradeBlotterComponent]
 })

diff --git a/web-front-end/angular/package.json b/web-front-end/angular/package.json
@@ -14,6 +14,7 @@
   "private": true,
   "license": "Apache-2.0",
   "dependencies": {
+    "@angular-slider/ngx-slider": "^17.0.2",
     "@angular/animations": "^17.0.0",
     "@angular/common": "^17.0.0",
     "@angular/compiler": "^17.0.0",