fix: fix radar resize issue

phodal · Apr 22, 2020 · ec9bdcd · ec9bdcd
1 parent f5943c1
commit ec9bdcd
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 24 deletions.
diff --git a/projects/ledge-render/src/lib/chart/ledge-tech-radar/ledge-tech-radar.component.html b/projects/ledge-render/src/lib/chart/ledge-tech-radar/ledge-tech-radar.component.html
@@ -1,3 +1,3 @@
-<div id="radar">
+<div #chart class="ledge-tech-radar">
 
 </div>
diff --git a/projects/ledge-render/src/lib/chart/ledge-tech-radar/ledge-tech-radar.component.ts b/projects/ledge-render/src/lib/chart/ledge-tech-radar/ledge-tech-radar.component.ts
@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, Input, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';
 import { LedgeListItem } from '../../components/model/ledge-chart.model';
 import * as d3 from 'd3';
 
@@ -7,7 +7,9 @@ import * as d3 from 'd3';
   templateUrl: './ledge-tech-radar.component.html',
   styleUrls: ['./ledge-tech-radar.component.scss']
 })
-export class LedgeTechRadarComponent implements OnInit, AfterViewInit, OnChanges {
+export class LedgeTechRadarComponent implements OnInit, OnChanges {
+  @ViewChild('chart', {static: false}) chartEl: ElementRef;
+
   @Input()
   data: LedgeListItem[];
 
@@ -23,7 +25,17 @@ export class LedgeTechRadarComponent implements OnInit, AfterViewInit, OnChanges
   }
 
   ngOnInit(): void {
-    this.rebuildRadarData();
+
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.data) {
+      this.data = changes.data.currentValue;
+      this.rebuildRadarData();
+      setTimeout(() => {
+        this.renderData(this.trData);
+      });
+    }
   }
 
   private rebuildRadarData() {
@@ -49,10 +61,6 @@ export class LedgeTechRadarComponent implements OnInit, AfterViewInit, OnChanges
     }
   }
 
-  ngOnChanges(changes: SimpleChanges): void {
-    this.rebuildRadarData();
-  }
-
   getLevelByName(name: string) {
     let level = 0;
     switch (name.toLowerCase()) {
@@ -75,19 +83,16 @@ export class LedgeTechRadarComponent implements OnInit, AfterViewInit, OnChanges
     return level;
   }
 
-  ngAfterViewInit(): void {
-    this.renderData(this.trData);
-  }
-
   private renderData(treeData) {
+    const chartElement = this.chartEl.nativeElement;
+
     // based on: https://cofinpro.github.io/Tech-Radar/
     let axisLabels = ['', 'Adopt', 'Trail', 'Assess', 'Hold'].reverse();
     if (this.config && !!this.config.hiddenLegend) {
       axisLabels = ['', '', '', '', ''];
     }
 
     const cfg = {
-      id: '#radar',
       w: 600,				// Width of the circle
       h: 600,				// Height of the circle
       margin: {top: 10, right: 20, bottom: 10, left: 10}, // The margins of the SVG
@@ -97,7 +102,7 @@ export class LedgeTechRadarComponent implements OnInit, AfterViewInit, OnChanges
       color: d3.schemeCategory10	// Color function
     };
 
-    const radar = d3.select(cfg.id);
+    const radar = d3.select(chartElement);
     drawChart(enrichData(treeData));
 
     function drawChart(data) {
@@ -118,7 +123,7 @@ export class LedgeTechRadarComponent implements OnInit, AfterViewInit, OnChanges
       // Initiate the radar chart SVG
       const width = cfg.w + cfg.margin.left + cfg.margin.right;
       const height = cfg.h + cfg.margin.top + cfg.margin.bottom;
-      const svg = d3.select(cfg.id)
+      const svg = d3.select(chartElement)
         .append('div')
         .attr('id', 'radarChart')
         .append('svg')
@@ -236,7 +241,7 @@ export class LedgeTechRadarComponent implements OnInit, AfterViewInit, OnChanges
         });
 
       // draw the legend
-      const legendSection = d3.select(cfg.id)
+      const legendSection = d3.select(chartElement)
         .selectAll('.legend')
         .data(data)
         .join('div')

diff --git a/src/styles/mdstyles/_tech-radar.scss b/src/styles/mdstyles/_tech-radar.scss
@@ -37,7 +37,7 @@ $black: #000;
 }
 
 /** Radar **/
-#radar {
+.ledge-tech-radar{
   /* Disable some webkit features to make the radar feel more native */
   -webkit-user-select: none;
   -webkit-tap-highlight-color: transparent;
@@ -55,12 +55,12 @@ $black: #000;
 }
 
 /* swap the last to legends as they run clockwise around the circle */
-#radar > .legend-2 {
+.ledge-tech-radar> .legend-2 {
   grid-row: 3;
   grid-column: 2;
 }
 
-#radar > .legend-3 {
+.ledge-tech-radar> .legend-3 {
   grid-row: 3;
   grid-column: 1;
 }
@@ -79,7 +79,7 @@ $black: #000;
 }
 
 @media (min-width: 1000px) {
-  #radar {
+  .ledge-tech-radar{
     grid-template-columns: 1fr 3fr 1fr;
     grid-template-rows: 1fr 1fr;
   }
@@ -95,22 +95,22 @@ $black: #000;
     color: $black;
   }
 
-  #radar > .legend-0 {
+  .ledge-tech-radar> .legend-0 {
     grid-column: 1;
     grid-row: 1;
   }
 
-  #radar > .legend-1 {
+  .ledge-tech-radar> .legend-1 {
     grid-column: 3;
     grid-row: 1;
   }
 
-  #radar > .legend-2 {
+  .ledge-tech-radar> .legend-2 {
     grid-column: 3;
     grid-row: 2
   }
 
-  #radar > .legend-3 {
+  .ledge-tech-radar> .legend-3 {
     grid-column: 1;
     grid-row: 2;
   }