Merge pull request #1994 from asfadmin/andy/DS-5552-Multiline-ASF

Series Labels and more

src/app/components/timeseries-chart/timeseries-chart.component.ts

@@ -9,6 +9,7 @@ import { AppState } from '@store';
 import * as chartsStore from '@store/charts';
 import { SubSink } from 'subsink';
 import { AsfLanguageService } from "@services/asf-language.service";
+// import {style} from '@angular/animations';
 
 interface TimeSeriesChartPoint {
   aoi: string
@@ -66,7 +67,7 @@ export class TimeseriesChartComponent implements OnInit, OnDestroy {
   // private dots: d3.Selection<SVGCircleElement, TimeSeriesChartPoint, SVGGElement, {}>;
   private lineGraph: d3.Selection<SVGGElement, {}, HTMLDivElement, any>;
   private toolTip: d3.Selection<HTMLDivElement, unknown, HTMLElement, any>
-  public margin = { top: 10, right: 20, bottom: 60, left: 55 };
+  public margin = { top: 10, right: 120, bottom: 60, left: 55 };
   private thing: d3.Selection<SVGGElement, {}, HTMLElement, any>
   private hoveredElement;
   private data: any;
@@ -327,6 +328,37 @@ export class TimeseriesChartComponent implements OnInit, OnDestroy {
       .attr('class', 'ts-chart-label')
       .text(this.yAxisTitle);
 
+    // Add a legend at the end of each line
+    // @ts-ignore
+    this.svg
+      .selectAll("seriesLabels")
+      .data(this.dataReadyForChart)
+      .join('g')
+        .append("text")
+          .datum(d => { return {name: d.name, value: d.values[d.values.length - 1]}; }) // keep only the last value of each time series
+      // .data(d => d.values)
+      // // .data(this.dataSource)
+      // // .data(groups.values())
+      // .enter()
+      // .append('circle')
+      // .attr('cx', (d) => this.x(Date.parse(d.date)))
+      // .attr('cy', (d) => this.y(d.unwrapped_phase))
+        .attr("transform",d => `translate(${this.x(Date.parse(d.value.date))},${this.y(d.value.unwrapped_phase)})`) // Put the text at the position of the last point
+        .attr("x", 12) // shift the text a bit more right
+        .text(d => {
+          if (d.name.replace(/\s/g, '').substring(0, 5).toUpperCase() === 'POINT') {
+            const longLat = d.name.substring(6).replace(/[\(\)]/g, '');
+            const longLatParsed = longLat.split(' ');
+            const pointLong = parseFloat(longLatParsed[0]).toFixed(2);
+            const pointLat = parseFloat(longLatParsed[1]).toFixed(2);
+            return `${pointLat}, ${pointLong}`;
+          }
+          return d.name;
+        } )
+        // @ts-ignore
+        .style("fill", function (d: DataReady){ return colorPalette(d.name) })
+        .style("font-size", 10)
+
     // this.svg
     //   .on("pointerenter", pointerentered)
     //   .on("pointermove", pointermoved)