From da5be3fb572b752cd2d452b837ad4f7ac23d443a Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Thu, 18 Jul 2024 10:14:12 +0200
Subject: [PATCH] Feature/reuse open-color in portfolio proportion chart
 component (#3562)

* Reuse open-color
---
 .../portfolio-proportion-chart.component.ts   | 43 ++++++++++++-------
 1 file changed, 27 insertions(+), 16 deletions(-)

diff --git a/libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.ts b/libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.ts
index c60ed3443..8c9c29282 100644
--- a/libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.ts
+++ b/libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.ts
@@ -29,6 +29,21 @@ import ChartDataLabels from 'chartjs-plugin-datalabels';
 import * as Color from 'color';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
+const {
+  blue,
+  cyan,
+  grape,
+  green,
+  indigo,
+  lime,
+  orange,
+  pink,
+  red,
+  teal,
+  violet,
+  yellow
+} = require('open-color');
+
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [CommonModule, NgxSkeletonLoaderModule],
@@ -350,24 +365,20 @@ export class GfPortfolioProportionChartComponent
     this.isLoading = false;
   }
 
-  /**
-   * Color palette, inspired by https://yeun.github.io/open-color
-   */
   private getColorPalette() {
-    // TODO: Reuse require('open-color')
     return [
-      '#329af0', // blue 5
-      '#20c997', // teal 5
-      '#94d82d', // lime 5
-      '#ff922b', // orange 5
-      '#f06595', // pink 5
-      '#845ef7', // violet 5
-      '#5c7cfa', // indigo 5
-      '#22b8cf', // cyan 5
-      '#51cf66', // green 5
-      '#fcc419', // yellow 5
-      '#ff6b6b', // red 5
-      '#cc5de8' // grape 5
+      blue[5],
+      teal[5],
+      lime[5],
+      orange[5],
+      pink[5],
+      violet[5],
+      indigo[5],
+      cyan[5],
+      green[5],
+      yellow[5],
+      red[5],
+      grape[5]
     ];
   }