Chart WIP

It is reflexive now but not pretty.
asfadmin · Jul 27, 2024 · fbf75ea · fbf75ea
1 parent 153a201
commit fbf75ea
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 36 deletions.
diff --git a/src/app/components/timeseries-chart/timeseries-chart.component.scss b/src/app/components/timeseries-chart/timeseries-chart.component.scss
@@ -4,7 +4,7 @@
 	// height: 460px;
 	// width: 680px;
   }
-  
+
   ::ng-deep .timeseries-base {
 	@include themify($themes) {
 	  fill: lighten(themed('dark-primary-text'), 45%);
@@ -13,10 +13,10 @@
 
 .chart-wrapper {
 	height: calc(100% - 1px);
-	width: calc(50% - 30px);
+	width: calc(100% - 1px);
 }
 
 #timeseriesChart {
 	height: 100%;
 	width: 100%;
-}
+}
diff --git a/src/app/components/timeseries-chart/timeseries-chart.component.ts b/src/app/components/timeseries-chart/timeseries-chart.component.ts
@@ -156,52 +156,30 @@ export class TimeseriesChartComponent implements OnInit {
   }
 
   public onResized() {
-    // this.createSVG();
+    this.createSVG();
   }
 
   private createSVG() {
 
+    this.margin = { top: 10, right: 0, bottom: 25, left: 50 };
+
     if (this.svg) {
       d3.selectAll('#timeseries-chart > svg').remove();
       d3.selectAll('.tooltip').remove();
+      let element = document.getElementById("timeseriesChart");
+      element.innerHTML = "";
     }
 
-    this.margin = { top: 10, right: 0, bottom: 25, left: 50 };
-    this.margin = this.margin;
-
-    const elem = document.getElementById('ts-chart-column');
-    const tsChart = document.getElementById('timeseriesChart');
-
-    this.height = elem.offsetHeight;
-    this.width = tsChart.offsetWidth;
-    // let chartHeight = this.height - this.margin.top - this.margin.bottom;
-    // let chartWidth = this.width - this.margin.left - this.margin.right;
-    let chartWidthMargin =this.width + this.margin.left + this.margin.right;
-    let chartHeightMargin = this.height + this.margin.top + this.margin.bottom;
-
-    // let chartMin = Math.min(chartHeight, chartWidth);
-
-    // 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.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', chartWidthMargin + this.margin.left)
-      .attr('height', chartHeightMargin)
-      .attr('viewBox','-10 -10 '+ chartWidthMargin +' '+ chartHeightMargin)
-      .attr('preserveAspectRatio','xMaxYMax')
+      .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(0,chartMin)');
-
+      .attr('transform', `translate(${this.margin.left}, ${this.margin.top})`);
     this.drawChart();
 
+
   }
 
 }