From d2877b2e861c0f4fcac5c37baea5e8750ae83124 Mon Sep 17 00:00:00 2001
From: Michael Breu <Michael.Breu@arctis.at>
Date: Wed, 24 May 2023 16:40:14 +0200
Subject: [PATCH] eliminating ts-color-class
---
package-lock.json | 22 ++++++++---------
package.json | 2 +-
.../teaserContent/teaserContent.component.ts | 24 +++++++++++++++----
3 files changed, 31 insertions(+), 17 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index bdae55969..b57518498 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index f01701994..8d02ddae6 100644
--- a/package.json
+++ b/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"
},
diff --git a/src/main/webapp/app/teaserContent/teaserContent.component.ts b/src/main/webapp/app/teaserContent/teaserContent.component.ts
index 6e18aff3f..a542da0a1 100644
--- a/src/main/webapp/app/teaserContent/teaserContent.component.ts
+++ b/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;
--
GitLab