Merge pull request #2032 from asfadmin/andy/DS-5668

Andy/ds 5668
asfadmin · Nov 22, 2024 · d4efca1 · d4efca1
2 parents 746513b + d57d58e
commit d4efca1
Show file tree

Hide file tree

Showing 5 changed files with 148 additions and 22 deletions.
diff --git a/...es-chart/timeseries-chart-temporal-slider/timeseries-chart-temporal-slider.component.scss b/...es-chart/timeseries-chart-temporal-slider/timeseries-chart-temporal-slider.component.scss
@@ -1,7 +1,7 @@
 /* Contenedor principal del slider */
 .displacement-slider {
   display: block;
-  margin: 10px 60px 20px 75px; /* Centra el slider horizontalmente */
+  margin: -10px 60px 20px 75px; /* Centra el slider horizontalmente */
   box-sizing: border-box;
 }
 

diff --git a/src/app/components/timeseries-chart/timeseries-chart.component.html b/src/app/components/timeseries-chart/timeseries-chart.component.html
@@ -1,22 +1,24 @@
 <div class="ts-chart-details">
-  <div class="ts-best-fit-nav">
+  <div class="ts-best-fit-nav"
+       [ngStyle]="{'visibility':formulaOverflow ? 'visible' : 'hidden'}">
     <button mat-flat-button (click)="onButtonClickPlus()" class="ts-best-fit-nav">
       <span class="material-symbols-outlined">
         arrow_forward_ios
       </span>
     </button>
   </div>
   <div class="ts-best-fit-formulas">
-    <cdk-virtual-scroll-viewport
+    <cdk-virtual-scroll-viewport #tsBestFitFormulas
       orientation="horizontal"
       itemSize="50"
       minBufferPx="200"
       maxBufferPx="400"
       class="ts-best-fit-viewport">
-       <div *cdkVirtualFor="let item of items" class="ts-best-fit-item">Series {{item}}</div>
+       <div *cdkVirtualFor="let item of bestFitItems" class="ts-best-fit-item">Series {{item.seriesNumber}}</div>
     </cdk-virtual-scroll-viewport>
   </div>
-  <div class="ts-best-fit-nav">
+  <div class="ts-best-fit-nav"
+       [ngStyle]="{'visibility':formulaOverflow ? 'visible' : 'hidden'}">
     <button mat-flat-button (click)="onButtonClickMinus()">
       <span class="material-symbols-outlined">
         arrow_back_ios
@@ -26,10 +28,6 @@
 </div>
 
 <div #tsChartWrapper class="chart-wrapper" (resized)="onResized()">
-<!--  <div *ngIf="hoveredData" class="chart-details">-->
-<!--    Series: {{hoveredData?.seriesNumber}},&nbsp;&nbsp;{{tooltipDateFormat(hoveredDate)}},&nbsp;&nbsp;{{hoveredData?.short_wavelength_displacement.toFixed(2)}} meters<br>-->
-<!--    Best Fit: y = ax + b-->
-<!--  </div>-->
 	<div #timeseriesChart id="timeseriesChart" [contextMenuTriggerFor]="menu" [contextMenuTriggerData]="{'tooltipData': hoveredData}">
 	</div>
 	<app-timeseries-chart-export class="ts-chart-export-button" [timeSeriesData]="exportableData"></app-timeseries-chart-export>
@@ -44,7 +42,6 @@
 	<mat-menu #menu="matMenu">
 		<ng-template matMenuContent let-tooltipData="tooltipData">
 			<button mat-button (click)="setReference(tooltipData)">Set as Reference</button>
-
 		</ng-template>
 	</mat-menu>
 </div>
diff --git a/src/app/components/timeseries-chart/timeseries-chart.component.scss b/src/app/components/timeseries-chart/timeseries-chart.component.scss
@@ -83,13 +83,13 @@
 
 .ts-chart-config-button {
   position: absolute;
-  top: 18px;
+  top: 54px;
   right: 65px;
 }
 
 .ts-chart-export-button {
   position: absolute;
-  top: 18px;
+  top: 54px;
   right: 210px;
 }
 
@@ -106,7 +106,7 @@
 }
 .ts-chart-zoom {
   position: absolute;
-  top: 17px;
+  top: 54px;
   right: 95px;
 }
 :host ::ng-deep .ts-reference-point {

diff --git a/src/app/components/timeseries-chart/timeseries-chart.component.ts b/src/app/components/timeseries-chart/timeseries-chart.component.ts
@@ -28,11 +28,11 @@ interface TimeSeriesData {
   color: string,
 }
 
-// interface TimeSeriesFit {
-//   seriesNumber: number,
-//   color: string,
-//   formula: string
-// }
+interface TimeSeriesFit {
+  seriesNumber: number,
+  color: string,
+  formula: string
+}
 
 interface DataReady {
   name: string,
@@ -57,6 +57,8 @@ export class TimeseriesChartComponent implements OnInit, OnDestroy {
   viewPorts: QueryList<CdkVirtualScrollViewport>;
   @ViewChild('tsChartWrapper', { static: true }) tsChartWrapper: ElementRef;
   @ViewChild('timeseriesChart', { static: true }) timeseriesChart: ElementRef;
+  @ViewChild('tsBestFitFormulas', { static: true }) tsBestFitFormulas: ElementRef;
+  @ViewChild(CdkVirtualScrollViewport) virtualScroll: CdkVirtualScrollViewport;
   @Input() zoomIn$: Observable<void>;
   @Input() zoomOut$: Observable<void>;
   @Input() zoomToFit$: Observable<void>;
@@ -102,7 +104,131 @@ export class TimeseriesChartComponent implements OnInit, OnDestroy {
   public lastStartDate: Date = new Date();
   public lastEndDate: Date = new Date();
   public items = Array.from({length: 100000}).map((_, i) => `Item #${i}`);
-  // public bestFitItems: TimeSeriesFit[] = [];
+  public formulaOverflow = false;
+  // Tyler this is where you would put the series and their best fit formulas
+  public bestFitItems: TimeSeriesFit[] = [
+    {
+      seriesNumber: 1,
+      color: 'red',
+      formula: 'e=mcsquared'
+    },
+    {
+      seriesNumber: 2,
+      color: 'blue',
+      formula: 'e=mcsquared'
+    },
+    {
+      seriesNumber: 3,
+      color: 'red',
+      formula: 'e=mcsquared'
+    },
+    {
+      seriesNumber: 4,
+      color: 'red',
+      formula: 'e=mcsquared'
+    },
+    {
+      seriesNumber: 5,
+      color: 'blue',
+      formula: 'e=mcsquared'
+    },
+    {
+      seriesNumber: 6,
+      color: 'red',
+      formula: 'e=mcsquared'
+    },
+    {
+      seriesNumber: 7,
+      color: 'red',
+      formula: 'e=mcsquared'
+    },
+    {
+      seriesNumber: 8,
+      color: 'blue',
+      formula: 'e=mcsquared'
+    },
+    {
+      seriesNumber: 9,
+      color: 'red',
+      formula: 'e=mcsquared'
+    },
+    {
+      seriesNumber: 10,
+      color: 'red',
+      formula: 'e=mcsquared'
+    },
+    {
+      seriesNumber: 11,
+      color: 'blue',
+      formula: 'e=mcsquared'
+    },
+    {
+      seriesNumber: 12,
+      color: 'red',
+      formula: 'e=mcsquared'
+    },
+    {
+      seriesNumber: 12,
+      color: 'red',
+      formula: 'e=mcsquared'
+    },
+    {
+      seriesNumber: 13,
+      color: 'blue',
+      formula: 'e=mcsquared'
+    },
+    {
+      seriesNumber: 14,
+      color: 'red',
+      formula: 'e=mcsquared'
+    },
+    {
+      seriesNumber: 15,
+      color: 'red',
+      formula: 'e=mcsquared'
+    },
+    {
+      seriesNumber: 16,
+      color: 'blue',
+      formula: 'e=mcsquared'
+    },
+    {
+      seriesNumber: 17,
+      color: 'red',
+      formula: 'e=mcsquared'
+    },
+    {
+      seriesNumber: 18,
+      color: 'red',
+      formula: 'e=mcsquared'
+    },
+    {
+      seriesNumber: 19,
+      color: 'blue',
+      formula: 'e=mcsquared'
+    },
+    {
+      seriesNumber: 20,
+      color: 'red',
+      formula: 'e=mcsquared'
+    },
+    {
+      seriesNumber: 21,
+      color: 'red',
+      formula: 'e=mcsquared'
+    },
+    {
+      seriesNumber: 22,
+      color: 'blue',
+      formula: 'e=mcsquared'
+    },
+    {
+      seriesNumber: 23,
+      color: 'red',
+      formula: 'e=mcsquared'
+    },
+
+  ];
   private linearFitLine;
 
   public exportableData: { [index:string]: {}[]} = {}
@@ -218,9 +344,14 @@ export class TimeseriesChartComponent implements OnInit, OnDestroy {
       wkt => ({ point: cache[wkt], state: chartStates[wkt] })
     );
     this.data = allPointsData;
+    this.formulaOverflow = this.isOverflowing();
     this.initChart(this.data)
   }
 
+  public isOverflowing(): boolean {
+    return this.virtualScroll.measureRenderedContentSize() > this.virtualScroll.getViewportSize();
+  }
+
   public translateChartText() {
     this.xAxisTitle = this.language.translate.instant('SCENE') + ' ' +
       this.language.translate.instant('DATE');
@@ -229,7 +360,6 @@ export class TimeseriesChartComponent implements OnInit, OnDestroy {
   }
 
   public onButtonClickPlus() {
-    // console.log(this.viewPorts.toArray());
     this.viewPorts
       .toArray()
       .forEach((el) => el.scrollToIndex(this.scrollIndex, 'smooth'));
@@ -238,7 +368,6 @@ export class TimeseriesChartComponent implements OnInit, OnDestroy {
   }
 
   onButtonClickMinus() {
-    // console.log(this.viewPorts.toArray());
     if (this.scrollIndex <= 2) {
       this.scrollIndex = 1;
     }

diff --git a/src/styles.scss b/src/styles.scss
@@ -851,7 +851,7 @@ $d-height: 550px;
   margin-top: -2px;
 }
 
-.ts-chart-details {
+.ts-best-fit-formulas {
   .cdk-virtual-scrollable {
     overflow-y: clip;
     overflow-x: auto;