fix: zoom in and out buttons

src/app/components/results-menu/results-menu.component.html

@@ -45,7 +45,7 @@
               [resize$]="resize$">
             </app-desktop-results-menu>
 
-            <app-timeseries-results-menu class="w100 h100 results-menu--layout" *ngIf="searchType === SearchTypes.TIMESERIES">
+            <app-timeseries-results-menu class="w100 h100 results-menu--layout" *ngIf="searchType === SearchTypes.TIMESERIES" [resize$]="resize$">
 
             </app-timeseries-results-menu>
             <app-sarviews-results-menu class="w100 h100 results-menu--layout"

src/app/components/results-menu/timeseries-results-menu/timeseries-results-menu.component.html

@@ -87,7 +87,10 @@
 
 	<div class="ts-chart-row">
 		<div id="ts-chart-column" class="ts-column-2">
-			<app-timeseries-chart></app-timeseries-chart>
+			<app-timeseries-chart
+			[zoomIn$]="zoomInChart$"
+			[zoomToFit$]="zoomToFitChart$"
+			[zoomOut$]="zoomOutChart$"></app-timeseries-chart>
 		</div>
 	</div>
 

src/app/components/results-menu/timeseries-results-menu/timeseries-results-menu.component.scss

@@ -5,7 +5,7 @@
 .ts-chart-row {
 	display: flex;
 	flex-direction: row;
-	height: calc(100% - 137px);
+	height: calc(100%);
 }
 
 .ts-chart-card {

src/app/components/results-menu/timeseries-results-menu/timeseries-results-menu.component.ts

@@ -45,6 +45,7 @@ export class TimeseriesResultsMenuComponent implements OnInit, OnDestroy {
 
   public pointHistory = [];
 
+
   constructor(
     private store$: Store<AppState>,
     private screenSize: ScreenSizeService,

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

@@ -1,2 +1,4 @@
 
-<div id="timeseriesChart"></div>
+<div class="chart-wrapper" (resized)="onResized()">
+	<div #timeseriesChart id="timeseriesChart" ></div>
+</div>

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

@@ -1,12 +1,22 @@
 @import "asf-theme";
 
 #timeseriesChart {
-	height: 460px;
-	width: 680px;
+	// height: 460px;
+	// width: 680px;
   }
 
   ::ng-deep .timeseries-base {
 	@include themify($themes) {
 	  fill: lighten(themed('dark-primary-text'), 45%);
 	}
-  }
+  }
+
+.chart-wrapper {
+	height: calc(100% - 1px);
+	width: calc(50% - 30px);
+}
+
+#timeseriesChart {
+	height: 100%;
+	width: 100%;
+}

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

@@ -1,15 +1,20 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
 import { NetcdfService } from '@services';
 
 // import * as models from '@models';
 import * as d3 from 'd3';
+import { Observable } from 'rxjs';
 
 @Component({
   selector: 'app-timeseries-chart',
   templateUrl: './timeseries-chart.component.html',
   styleUrl: './timeseries-chart.component.scss'
 })
 export class TimeseriesChartComponent implements OnInit {
+  @ViewChild('timeseriesChart', { static: true }) timeseriesChart: ElementRef;
+  @Input() zoomIn$: Observable<void>;
+  @Input() zoomOut$: Observable<void>;
+  @Input() zoomToFit$: Observable<void>;
   public json_data: string = '';
   private svg?: any;
   public dataSource = [];
@@ -26,7 +31,7 @@ export class TimeseriesChartComponent implements OnInit {
   private yAxis;
   private dots;
   private margin = { top: 10, right: 30, bottom: 60, left: 20 };
-
+  private thing
 
 
 
@@ -37,16 +42,23 @@ export class TimeseriesChartComponent implements OnInit {
   public ngOnInit(): void {
 
 
-    this.svg = d3.select('#timeseriesChart').append('svg')
-      .attr('width', this.width + this.margin.left + this.margin.right)
-      .attr('height', this.height + this.margin.top + this.margin.bottom)
-      .append('g')
-      .attr('transform', `translate(${this.margin.left}, ${this.margin.top})`);
-      this.drawChart();
+    // this.svg = d3.select('#timeseriesChart').append('svg')
+    //   .attr('width', this.width + this.margin.left + this.margin.right)
+    //   .attr('height', this.height + this.margin.top + this.margin.bottom)
+    //   .append('g')
+    //   .attr('transform', `translate(${this.margin.left}, ${this.margin.top})`);
+    //   this.drawChart();
+    this.createSVG();
 
-      this.netcdfService.getTimeSeries({'lon': 0, 'lat': 0}).subscribe(data => {
-        this.initChart(data);
-      })
+    this.netcdfService.getTimeSeries({'lon': 0, 'lat': 0}).subscribe(data => {
+      this.initChart(data);
+    })
+    this.zoomOut$.subscribe(_ => {
+      this.thing.transition().call(this.zoom.scaleBy, .5);
+    });
+    this.zoomIn$.subscribe(_ => {
+      this.thing.transition().call(this.zoom.scaleBy, 2);
+    });
   }
 
   public initChart(data): void {
@@ -94,7 +106,8 @@ export class TimeseriesChartComponent implements OnInit {
         this.currentTransform = eve.transform;
         this.updateChart();
       });
-    d3.select('#timeseriesChart').selectChild().call(this.zoom)
+      this.thing = d3.select('#timeseriesChart').selectChild()
+    this.thing.call(this.zoom)
 
     this.svg.append('defs').append('SVG:clipPath')
       .attr('id', 'clip')
@@ -141,5 +154,23 @@ export class TimeseriesChartComponent implements OnInit {
   public updateAxis(_axis, _value) {
 
   }
+  public onResized() {
+    this.createSVG();
+  }
+
+  private createSVG() {
+    if (this.svg) {
+      d3.selectAll('#timeseries-chart > svg').remove();
+      d3.selectAll('.tooltip').remove();
+    }
+    this.height = this.timeseriesChart.nativeElement.offsetHeight - this.margin.top - this.margin.bottom;
+    this.width = this.timeseriesChart.nativeElement.offsetWidth - this.margin.left - this.margin.right;
+    this.svg = d3.select(this.timeseriesChart.nativeElement).append('svg')
+      .attr('width', this.width + this.margin.left + this.margin.right)
+      .attr('height', this.height + this.margin.top + this.margin.bottom)
+      .append('g')
+      .attr('transform', `translate(${this.margin.left}, ${this.margin.top})`);
+    this.drawChart();
+  }
 
 }