fix: show chart toolbar

asfadmin · Oct 24, 2024 · 156c370 · 156c370
1 parent 2965c72
commit 156c370
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 21 deletions.
diff --git a/src/app/components/timeseries-chart/timeseries-chart.component.html b/src/app/components/timeseries-chart/timeseries-chart.component.html
@@ -1,17 +1,13 @@
-
 <div #tsChartWrapper class="chart-wrapper" (resized)="onResized()">
-		<div #timeseriesChart id="timeseriesChart" >
-		<app-chart-modal class="ts-chart-config-button"></app-chart-modal>
-		<app-timeseries-chart-zoom class="ts-chart-zoom"
-		(zoomInEvent)="onZoomIn()"
-		(zoomOutEvent)="onZoomOut()"
-		(zoomToFitEvent)="onZoomToFit()"
-	  ></app-timeseries-chart-zoom>
+	<div #timeseriesChart id="timeseriesChart">
+	</div>
+	<app-chart-modal class="ts-chart-config-button"></app-chart-modal>
+	<app-timeseries-chart-zoom class="ts-chart-zoom" (zoomInEvent)="onZoomIn()" (zoomOutEvent)="onZoomOut()"
+		(zoomToFitEvent)="onZoomToFit()"></app-timeseries-chart-zoom>
 
-		</div>
-		@if(isLoading){
-			<div class="disp-spinner">
-				<mat-spinner></mat-spinner>
-			</div>
-		}
-</div>
+	@if(isLoading){
+	<div class="disp-spinner">
+		<mat-spinner></mat-spinner>
+	</div>
+	}
+</div>
diff --git a/src/app/components/timeseries-chart/timeseries-chart.component.scss b/src/app/components/timeseries-chart/timeseries-chart.component.scss
@@ -35,7 +35,7 @@
 .ts-chart-config-button {
   position: absolute;
   top: 18px;
-  right: 30px;
+  right: 65px;
 }
 
 ::ng-deep .loading-rect {
@@ -52,7 +52,7 @@
 .ts-chart-zoom {
   position: absolute;
   top: 17px;
-  right: 60px;
+  right: 95px;
 }
 
 
diff --git a/src/app/components/timeseries-chart/timeseries-chart.component.ts b/src/app/components/timeseries-chart/timeseries-chart.component.ts
@@ -67,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: 120, bottom: 60, left: 55 };
+  public margin = { top: 10, right: 60, bottom: 60, left: 55 };
   private thing: d3.Selection<SVGGElement, {}, HTMLElement, any>
   private hoveredElement;
   private data: any;
@@ -132,17 +132,17 @@ export class TimeseriesChartComponent implements OnInit, OnDestroy {
 
   public onZoomIn(): void {
     this.thing.transition().call(this.zoom.scaleBy, 2);
-    this.drawChart();
+    this.updateChart();
   }
 
   public onZoomOut(): void {
     this.thing.transition().call(this.zoom.scaleBy, .5);
-    this.drawChart();
+    this.updateChart();
   }
 
   public onZoomToFit(): void {
     this.thing.transition().call(this.zoom.transform, d3.zoomIdentity);
-    this.drawChart();
+    this.updateChart();
   }
 
   public initChart(data): void {