feat: add best fit data for chart list

asfadmin · Nov 22, 2024 · 718c7d2 · 718c7d2
1 parent 7b9559d
commit 718c7d2
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 127 deletions.
diff --git a/src/app/components/timeseries-chart/timeseries-chart.component.html b/src/app/components/timeseries-chart/timeseries-chart.component.html
@@ -10,11 +10,17 @@
   <div class="ts-best-fit-formulas">
     <cdk-virtual-scroll-viewport #tsBestFitFormulas
       orientation="horizontal"
-      itemSize="50"
+      itemSize="140"
       minBufferPx="200"
       maxBufferPx="400"
       class="ts-best-fit-viewport">
-       <div *cdkVirtualFor="let item of bestFitItems" class="ts-best-fit-item">Series {{item.seriesNumber}}</div>
+       <div *cdkVirtualFor="let item of bestFitItems" class="ts-best-fit-item">
+        <div [style.background-color]="item.color" class="ts-color-swatch"></div>
+        <div style="display: flex; flex-direction: column;">
+          <div>Series {{item.seriesNumber}}</div>
+          <div>{{item.formula}}</div>
+        </div>
+      </div>
     </cdk-virtual-scroll-viewport>
   </div>
   <div class="ts-best-fit-nav"

diff --git a/src/app/components/timeseries-chart/timeseries-chart.component.scss b/src/app/components/timeseries-chart/timeseries-chart.component.scss
@@ -37,7 +37,7 @@
 
 
 .ts-best-fit-formulas .ts-best-fit-viewport {
-  height: 30px;
+  height: 35px;
   width: 100%;
   border: none;
 }
@@ -48,9 +48,18 @@
 }
 
 .ts-best-fit-item {
-  width: 100px;
+  width: 120px;
   height: 100%;
   //writing-mode: vertical-lr;
+  display: flex;
+  align-items: center;
+  margin-left: 10px;
+  margin-right: 10px;
+}
+.ts-color-swatch {
+  width: 15px;
+  height: 15px;
+  margin-right: 5px;
 }
 
 ::ng-deep .cdk-virtual-scrollable {

diff --git a/src/app/components/timeseries-chart/timeseries-chart.component.ts b/src/app/components/timeseries-chart/timeseries-chart.component.ts
@@ -63,7 +63,6 @@ export class TimeseriesChartComponent implements OnInit, OnDestroy {
   @Input() zoomOut$: Observable<void>;
   @Input() zoomToFit$: Observable<void>;
 
-  public linearFitEquations : {[key: string]: {m: number, b: number}};
   // @Input() chartData: models.timeseriesChartItemState[];
 
   // public scrollIndex = 1;
@@ -107,126 +106,6 @@ export class TimeseriesChartComponent implements OnInit, OnDestroy {
   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;
@@ -639,7 +518,7 @@ export class TimeseriesChartComponent implements OnInit, OnDestroy {
           .style('opacity', 0);
       })
       .attr('r', 5);
-      this.linearFitEquations = {}
+      this.bestFitItems = [];
       if(this.dataReadyForChart.length > 0 && this.linearFitLineIndex.length > 0) {
         this.linearFitLine = this.svg.append('g')
           .attr('id', 'linesParent2')
@@ -649,7 +528,11 @@ export class TimeseriesChartComponent implements OnInit, OnDestroy {
         for(let linearFitData of filteredData) {
 
           let regression = linearRegression(linearFitData.values.map((x,i) => [i, x.short_wavelength_displacement]));
-          this.linearFitEquations[linearFitData.name] = regression;
+          this.bestFitItems.push({
+            seriesNumber: linearFitData.values[0].seriesNumber,
+            color: linearFitData.values[0].color,
+            formula: `y = ${regression.m.toFixed(2)}x ${regression.b < 0 ? '-' : '+'} ${Math.abs(regression.b).toFixed(2)}`
+          })
           let lineregression = linearRegressionLine(regression);
 
           let line = d3.line()