From a9d76f027e3298c7d82069522586a905234c0e2f Mon Sep 17 00:00:00 2001
From: Richard Cox <richard.cox@suse.com>
Date: Mon, 15 Jun 2020 15:22:08 +0100
Subject: [PATCH] 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)

---
 .../helm-release-summary-tab.component.ts     |  5 +++++
 .../ring-chart/ring-chart.component.html      |  9 ++++++---
 .../ring-chart/ring-chart.component.ts        | 19 ++++++++++++++++---
 3 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/custom-src/frontend/app/custom/kubernetes/workloads/release/tabs/helm-release-summary-tab/helm-release-summary-tab.component.ts b/custom-src/frontend/app/custom/kubernetes/workloads/release/tabs/helm-release-summary-tab/helm-release-summary-tab.component.ts
index db3dd00963..759e70acda 100644
--- a/custom-src/frontend/app/custom/kubernetes/workloads/release/tabs/helm-release-summary-tab/helm-release-summary-tab.component.ts
+++ b/custom-src/frontend/app/custom/kubernetes/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
index 40cd0d4a96..e69cdf1c90 100644
--- 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,6 +1,7 @@
 <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">
@@ -8,8 +9,10 @@
       <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>
\ No newline at end of file
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
index 0e96a6cece..681984c9d6 100644
--- 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,5 +1,5 @@
-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',
@@ -7,7 +7,7 @@ import { ColorHelper } from '@swimlane/ngx-charts';
   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 || []);
   }