@forter/chart - npm Package Compare versions

Comparing version 5.31.6 to 5.32.0

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+# [5.32.0](https://github.com/forter/web-components/compare/@forter/chart@5.31.6...@forter/chart@5.32.0) (2023-05-28)
+
+
+### Features
+
+* **chart:** fixed period over period colors ([#1296](https://github.com/forter/web-components/issues/1296)) ([a56cebb](https://github.com/forter/web-components/commit/a56cebb))
+
+
+
+
+
 ## [5.31.6](https://github.com/forter/web-components/compare/@forter/chart@5.31.5...@forter/chart@5.31.6) (2023-03-28)
@@ -8,0 +19,0 @@

chart-config-builders/dataset-color-config-builder.js

@@ -28,2 +28,16 @@ import { get } from 'lodash-es';
 };
+/**
+ *
+ * @param {string} color color to add opacity to
+ * @param {number} opacity opacity to apply, in decimal
+ * @return {string|*} color with the applied opacity
+ */
+
+const addOpacity = (color, opacity) => {
+  if (color.includes('rgb')) {
+    return color.replace(')', `, ${opacity})`);
+  } else if (color.includes('#')) {
+    return `${color}${opacity * 100}`;
+  }
+};
 const DEFAULT_COLORS = ['var(--fc-turquoise-500)', 'var(--fc-ocean-500)', 'var(--fc-brand-blue-500)', 'var(--fc-indigo-500)', 'var(--fc-purple-500)', 'var(--fc-pink-purple-500)', 'var(--fc-magenta-500)', 'var(--fc-orange-500)', 'var(--fc-gold-500)', 'var(--fc-olive-500)'];
@@ -188,3 +202,3 @@ const TREEMAP_COLORS = {
 
-export { DEFAULT_COLORS, translateColor, translateColorArray, updateColorsInDatasets };
+export { DEFAULT_COLORS, addOpacity, translateColor, translateColorArray, updateColorsInDatasets };
 //# sourceMappingURL=dataset-color-config-builder.js.map

chart-config-builders/period-over-period-builder.js

@@ -1,2 +0,2 @@
-import { translateColor } from './dataset-color-config-builder.js';
+import { translateColor, addOpacity } from './dataset-color-config-builder.js';
 import moment from 'moment';
@@ -134,4 +134,5 @@ import { isPeriodOverPeriodChart, NEGATIVE_COLOR, POSITIVE_COLOR } from './period-over-period.helpers.js';
         const color = dataset.periodOverPeriod.positiveChangeIsGood ? NEGATIVE_COLOR : POSITIVE_COLOR;
-        const translatedColor = translateColor(color, context);
-        dataset.fill.above = `${translatedColor}40`;
+        let translatedColor = translateColor(color, context);
+        translatedColor = addOpacity(translatedColor, 0.4);
+        dataset.fill.above = translatedColor;
       }
@@ -154,4 +155,5 @@ } else if (period === POP_SCALES.CURRENT) {
         const color = ((_dataset$periodOverPe = dataset.periodOverPeriod) === null || _dataset$periodOverPe === void 0 ? void 0 : _dataset$periodOverPe.positiveChangeIsGood) ? POSITIVE_COLOR : NEGATIVE_COLOR;
-        const translatedColor = translateColor(color, context);
-        dataset.fill.above = `${translatedColor}40`;
+        let translatedColor = translateColor(color, context);
+        translatedColor = addOpacity(translatedColor, 0.4);
+        dataset.fill.above = translatedColor;
       }
@@ -158,0 +160,0 @@ }

package.json

 {
   "name": "@forter/chart",
-  "version": "5.31.6",
+  "version": "5.32.0",
   "description": "chart from Forter Components",
@@ -61,3 +61,3 @@ "author": "Forter Developers",
   },
-  "gitHead": "96e7f7c9a24fdea0d2ca2d52dcdd52801d0e28d9"
+  "gitHead": "d5c6f796c443846c1805bc3dc4d5be625c6c5fb6"
 }

src/chart-config-builders/dataset-color-config-builder.js

@@ -27,3 +27,17 @@ /* eslint-disable max-len */
 
+/**
+ *
+ * @param {string} color color to add opacity to
+ * @param {number} opacity opacity to apply, in decimal
+ * @return {string|*} color with the applied opacity
+ */
+export const addOpacity = (color, opacity) => {
+  if (color.includes('rgb')) {
+    return color.replace(')', `, ${opacity})`);
+  } else if (color.includes('#')) {
+    return `${color}${opacity * 100}`;
+  }
+};
 
+
 export const DEFAULT_COLORS = [
@@ -30,0 +44,0 @@ 'var(--fc-turquoise-500)',

src/chart-config-builders/period-over-period-builder.js

@@ -7,3 +7,3 @@ import moment from 'moment';
 } from './period-over-period.helpers';
-import { translateColor } from './dataset-color-config-builder';
+import { addOpacity, translateColor } from './dataset-color-config-builder';
 
@@ -130,8 +130,8 @@ export default (config, chartJSConfig, context) => {
       };
-
       if (hasPositiveChangeField) {
         const color = dataset.periodOverPeriod.positiveChangeIsGood
           ? NEGATIVE_COLOR : POSITIVE_COLOR;
-        const translatedColor = translateColor(color, context);
-        dataset.fill.above = `${translatedColor}40`;
+        let translatedColor = translateColor(color, context);
+        translatedColor = addOpacity(translatedColor, 0.4);
+        dataset.fill.above = translatedColor;
       }
@@ -154,4 +154,5 @@ } else if (period === POP_SCALES.CURRENT) {
         ? POSITIVE_COLOR : NEGATIVE_COLOR;
-        const translatedColor = translateColor(color, context);
-        dataset.fill.above = `${translatedColor}40`;
+        let translatedColor = translateColor(color, context);
+        translatedColor = addOpacity(translatedColor, 0.4);
+        dataset.fill.above = translatedColor;
       }
@@ -158,0 +159,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

339533

increased by0.65%

Lines of code

5435

increased by0.56%

No dependency changes