Fix ring chart legend/ring colour missmatch

- ensure legend colours update on changes of data - apply a better custom colour to 'completed' state (rusty red --> sky blue)
cloudfoundry · Jun 15, 2020 · a9d76f0 · a9d76f0
1 parent da6eb12
commit a9d76f0
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 6 deletions.
diff --git a/...tes/workloads/release/tabs/helm-release-summary-tab/helm-release-summary-tab.component.ts b/...tes/workloads/release/tabs/helm-release-summary-tab/helm-release-summary-tab.component.ts
@@ -36,12 +36,17 @@ export class HelmReleaseSummaryTabComponent implements OnDestroy {
   public containersChartData = [];
 
   private successChartColor = '#4DD3A7';
+  private completedChartColour = '#7aa3e5';
 
   public podChartColors = [
     {
       name: 'Running',
       value: this.successChartColor
     },
+    {
+      name: 'Completed',
+      value: this.completedChartColour
+    },
   ];
 
   public containersChartColors = [

diff --git a/src/frontend/packages/core/src/shared/components/ring-chart/ring-chart.component.html b/src/frontend/packages/core/src/shared/components/ring-chart/ring-chart.component.html
@@ -1,15 +1,18 @@
 <div class="app-ring-chart">
   <div class="pie">
-    <ngx-charts-pie-chart [customColors]="customColors" [view]="[120,120]" [animations]="true" [doughnut]="true" [results]="data" [gradient]="false">
+    <ngx-charts-pie-chart [customColors]="customColors" [view]="[120,120]" [animations]="true" [doughnut]="true"
+      [results]="data" [gradient]="false">
     </ngx-charts-pie-chart>
   </div>
   <div class="legend">
     <div class="advanced-pie-legend">
       <div class="total-value" ngx-charts-count-up [countTo]="getTotal()"></div>
       <div class="total-label">{{ label }}</div>
     </div>
-    <ngx-charts-advanced-legend [data]="data" [label]="label" [colors]="colors" [animations]="true" [valueFormatting]="valueFormatting" [labelFormatting]="nameFormatting" [percentageFormatting]="percentageFormatting" (select)="onClick($event)" (activate)="onActivate($event)"
+    <ngx-charts-advanced-legend [data]="data" [label]="label" [colors]="colors" [animations]="true"
+      [valueFormatting]="valueFormatting" [labelFormatting]="nameFormatting"
+      [percentageFormatting]="percentageFormatting" (select)="onClick($event)" (activate)="onActivate($event)"
       (deactivate)="onDeactivate($event)">
     </ngx-charts-advanced-legend>
   </div>
-</div>
+</div>
diff --git a/src/frontend/packages/core/src/shared/components/ring-chart/ring-chart.component.ts b/src/frontend/packages/core/src/shared/components/ring-chart/ring-chart.component.ts
@@ -1,13 +1,13 @@
-import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
-import { ColorHelper } from '@swimlane/ngx-charts';
+import { Component, Input, OnChanges, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
+import { AdvancedLegendComponent, ColorHelper } from '@swimlane/ngx-charts';
 
 @Component({
   selector: 'app-ring-chart',
   templateUrl: './ring-chart.component.html',
   styleUrls: ['./ring-chart.component.scss'],
   encapsulation: ViewEncapsulation.None,
 })
-export class RingChartComponent implements OnInit {
+export class RingChartComponent implements OnInit, OnChanges {
 
   domain: any[];
   colors: ColorHelper;
@@ -24,17 +24,30 @@ export class RingChartComponent implements OnInit {
   @Input() nameFormatting: (value: string) => any = label => label;
   @Input() percentageFormatting: (value: number) => any = percentage => percentage;
 
+  @ViewChild(AdvancedLegendComponent) lineSeriesComponent: AdvancedLegendComponent;
+
   constructor() { }
 
   ngOnInit() {
     if (!this.data) {
       this.data = [];
     }
+  }
+
+  ngOnChanges() {
+    this.update();
+  }
+
+  update() {
     this.domain = this.getDomain();
     this.setColors();
   }
 
   setColors(): void {
+    if (!this.domain) {
+      // Not set yet, can't set colour without it
+      return;
+    }
     this.colors = new ColorHelper(this.scheme, 'ordinal', this.domain, this.customColors || []);
   }