Resolve "npm packages prüfen"

package-lock.json

@@ -31,6 +31,7 @@
         "ajv": "^8.10.0",
         "angular-tag-cloud-module": "^13.0.0",
         "bootstrap": "4.6.1",
+        "colorjs.io": "^0.4.3",
         "dayjs": "1.10.7",
         "lodash": "^4.17.21",
         "moment": "^2.29.1",
@@ -40,7 +41,6 @@
         "ngx-webstorage": "9.0.0",
         "rxjs": "7.5.2",
         "swagger-ui-dist": "4.2.1",
-        "ts-color-class": "^0.10.1",
         "tslib": "2.3.1",
         "zone.js": "0.11.4"
       },
@@ -8036,6 +8036,11 @@
       "integrity": "sha512-3tlv/dIP7FWvj3BsbHrGLJ6l/oKh1O3TcgBqMn+yyCagOxc23fyzDS6HypQbgxWbkpDnf52p1LuR4eWDQ/K9WQ==",
       "dev": true
     },
+    "node_modules/colorjs.io": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/colorjs.io/-/colorjs.io-0.4.3.tgz",
+      "integrity": "sha512-Jr6NiWFZCuSECl23Bhe4jvDldQsE0ErnWrdl3xIUFy+Bkp0l8r5qt/iZlNH47/xxGP5izcyC8InjoUoI4Po+Pg=="
+    },
     "node_modules/colors": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/colors/-/colors-1.0.3.tgz",
@@ -24176,11 +24181,6 @@
       "integrity": "sha512-XrHUvV5HpdLmIj4uVMxHggLbFSZYIn7HEWsqePZcI50pco+MPqJ50wMGY794X7AOOhxOBAjbkqfAbEe/QMp2Lw==",
       "dev": true
     },
-    "node_modules/ts-color-class": {
-      "version": "0.10.1",
-      "resolved": "https://registry.npmjs.org/ts-color-class/-/ts-color-class-0.10.1.tgz",
-      "integrity": "sha512-FHqcpjbhHWqTzA81eMW4JvrSQcFrqVo1KhRTMfoR1GAupERAr3T/UT2u1T8ryxQVuZCW/kc4p3mv74mh2pVt+A=="
-    },
     "node_modules/ts-jest": {
       "version": "27.1.3",
       "resolved": "https://registry.npmjs.org/ts-jest/-/ts-jest-27.1.3.tgz",
@@ -32241,6 +32241,11 @@
       "integrity": "sha512-3tlv/dIP7FWvj3BsbHrGLJ6l/oKh1O3TcgBqMn+yyCagOxc23fyzDS6HypQbgxWbkpDnf52p1LuR4eWDQ/K9WQ==",
       "dev": true
     },
+    "colorjs.io": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/colorjs.io/-/colorjs.io-0.4.3.tgz",
+      "integrity": "sha512-Jr6NiWFZCuSECl23Bhe4jvDldQsE0ErnWrdl3xIUFy+Bkp0l8r5qt/iZlNH47/xxGP5izcyC8InjoUoI4Po+Pg=="
+    },
     "colors": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/colors/-/colors-1.0.3.tgz",
@@ -44411,11 +44416,6 @@
       "integrity": "sha512-XrHUvV5HpdLmIj4uVMxHggLbFSZYIn7HEWsqePZcI50pco+MPqJ50wMGY794X7AOOhxOBAjbkqfAbEe/QMp2Lw==",
       "dev": true
     },
-    "ts-color-class": {
-      "version": "0.10.1",
-      "resolved": "https://registry.npmjs.org/ts-color-class/-/ts-color-class-0.10.1.tgz",
-      "integrity": "sha512-FHqcpjbhHWqTzA81eMW4JvrSQcFrqVo1KhRTMfoR1GAupERAr3T/UT2u1T8ryxQVuZCW/kc4p3mv74mh2pVt+A=="
-    },
     "ts-jest": {
       "version": "27.1.3",
       "resolved": "https://registry.npmjs.org/ts-jest/-/ts-jest-27.1.3.tgz",

package.json

@@ -107,6 +107,7 @@
     "ajv": "^8.10.0",
     "angular-tag-cloud-module": "^13.0.0",
     "bootstrap": "4.6.1",
+    "colorjs.io": "^0.4.3",
     "dayjs": "1.10.7",
     "lodash": "^4.17.21",
     "moment": "^2.29.1",
@@ -116,7 +117,6 @@
     "ngx-webstorage": "9.0.0",
     "rxjs": "7.5.2",
     "swagger-ui-dist": "4.2.1",
-    "ts-color-class": "^0.10.1",
     "tslib": "2.3.1",
     "zone.js": "0.11.4"
   },

src/main/webapp/app/teaserContent/teaserContent.component.ts

@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { CloudData, CloudOptions } from 'angular-tag-cloud-module';
 import { AutoCompletionEntry, SearchService } from 'app/search/service/search-service';
-import Color from 'ts-color-class';
+import Color from 'colorjs.io';
 
 @Component({
   selector: 'jhi-teaser-content',
@@ -36,7 +36,7 @@ export class TeaserContentComponent implements OnInit {
           this.keywordCloudData.push({
             text: kw.target.toString(),
             weight: Math.min(kw.hitCount.valueOf(), 10),
-            color: this.randomColor('#ffaaee'),
+            color: this.randomColor('#ff7777'),
           })
         );
       },
@@ -53,7 +53,7 @@ export class TeaserContentComponent implements OnInit {
           this.programmingLanguageCloudData.push({
             text: pl.target.toString(),
             weight: Math.min(pl.hitCount.valueOf(), 10),
-            color: this.randomColor('#2222ff'),
+            color: this.randomColor('#7777ff'),
           })
         );
       },
@@ -69,7 +69,7 @@ export class TeaserContentComponent implements OnInit {
           this.contributorCloudData.push({
             text: pl.target.toString(),
             weight: Math.min(pl.hitCount.valueOf(), 10),
-            color: this.randomColor('#aaff44'),
+            color: this.randomColor('#77ff77'),
           })
         );
       },
@@ -106,18 +106,32 @@ export class TeaserContentComponent implements OnInit {
   private randomColor(mainColorHex: string): string {
     try {
       const main = new Color(mainColorHex);
-      const deviation = new Color(mainColorHex);
+      const deviation = new Color('#FFFFFF');
+
+      const redMax = Math.min(main.get('red') * 2, 1.0);
+      const greenMax = Math.min(main.get('green') * 2, 1.0);
+      const blueMax = Math.min(main.get('blue') * 2, 1.0);
+
+      const red = Math.max(redMax - 2 * deviation.get('red') * Math.random(), 0);
+      const green = Math.max(greenMax - 2 * deviation.get('green') * Math.random(), 0);
+      const blue = Math.max(blueMax - 2 * deviation.get('blue') * Math.random(), 0);
+
+      const hexString = new Color('srgb', [red, green, blue]).toString({ format: 'hex' });
+      return hexString;
+      /*
       const upperBound = new Color(
         Math.min(main.getRed() + deviation.getRed(), 255),
         Math.min(main.getGreen() + deviation.getGreen(), 255),
         Math.min(main.getBlue() + deviation.getBlue(), 255)
       );
+      const target2 = 
       const target = new Color(
         Math.max(Math.round(upperBound.getRed() - 2 * deviation.getRed() * Math.random()), 0),
         Math.max(Math.round(upperBound.getGreen() - 2 * deviation.getGreen() * Math.random()), 0),
         Math.max(Math.round(upperBound.getBlue() - 2 * deviation.getBlue() * Math.random()), 0)
       );
       return target.getHex();
+      */
     } catch (e) {
       // console.warn("Cannot create Color:" + e.message);
       return mainColorHex;