@forter/chart - npm Package Compare versions

Comparing version 5.21.0 to 5.21.1

CHANGELOG.md

@@ -6,2 +6,10 @@ # Change Log
 
+## [5.21.1](https://github.com/forter/web-components/compare/@forter/chart@5.21.0...@forter/chart@5.21.1) (2022-08-04)
+
+**Note:** Version bump only for package @forter/chart
+
+
+
+
+
 # [5.21.0](https://github.com/forter/web-components/compare/@forter/chart@5.20.2...@forter/chart@5.21.0) (2022-07-28)
@@ -8,0 +16,0 @@

chart-config-builders/basic-config-builder.js

@@ -190,3 +190,10 @@ import { cloneDeep, merge } from 'lodash-es';
       const value = formatEllipsis(ctx, sortedChartData[ctx.index].yFormatted.toString());
-      return [category, '', value];
+      const {
+        height
+      } = ctx.element;
+      const valueHeightThresholds = {
+        WITH_SPACE: 50,
+        NORMAL: 40
+      };
+      return [category, ...(height > valueHeightThresholds.WITH_SPACE ? [''] : []), ...(height > valueHeightThresholds.NORMAL ? [value] : [])];
     };
@@ -193,0 +200,0 @@

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

@@ -165,8 +165,14 @@ import { get } from 'lodash-es';
       dataset.borderColor = dataset.borderColor ? dataset.borderColor : predefinedColor ? predefinedColor : DEFAULT_COLORS[index];
-    } // Checking if chart is a Treemap for color blending
+    }
 
+    const isTreeMap = dataset.type === CHART_TYPES.TREEMAP; // Checking if chart is a Treemap for color blending
 
-    dataset.backgroundColor = dataset.type === CHART_TYPES.TREEMAP ? ctx => blendColorsByPercent(TREEMAP_COLORS.FROM, TREEMAP_COLORS.TO, ctx.index * (1 / dataset.data.length) // Calculates percentage based on index
+    dataset.backgroundColor = isTreeMap ? ctx => blendColorsByPercent(TREEMAP_COLORS.FROM, TREEMAP_COLORS.TO, ctx.index * (1 / dataset.data.length) // Calculates percentage based on index
     ) : translateColorArray(dataset.backgroundColor, context);
-    dataset.borderColor = translateColorArray(dataset.borderColor, context);
+    dataset.borderColor = translateColorArray(dataset.borderColor, context); // Saturating the colors of the blend
+
+    if (isTreeMap) {
+      context.style.filter = 'saturate(1.4)';
+    }
+
     return dataset;
@@ -173,0 +179,0 @@ });

package.json

 {
   "name": "@forter/chart",
-  "version": "5.21.0",
+  "version": "5.21.1",
   "description": "chart from Forter Components",
@@ -60,3 +60,3 @@ "author": "Forter Developers",
   },
-  "gitHead": "41aab0504bb2132cf3e3a05e63fb28b459994239"
+  "gitHead": "dd10d9c62bdebac5b3f1915d7d362e2a24a43738"
 }

src/chart-config-builders/basic-config-builder.js

@@ -174,3 +174,14 @@ import { merge, cloneDeep } from 'lodash-es';
       const value = formatEllipsis(ctx, sortedChartData[ctx.index].yFormatted.toString());
-      return [category, '', value];
+      const { height } = ctx.element;
+
+      const valueHeightThresholds = {
+        WITH_SPACE: 50,
+        NORMAL: 40
+      };
+
+      return [
+        category,
+        ...(height > valueHeightThresholds.WITH_SPACE) ? [''] : [],
+        ...(height > valueHeightThresholds.NORMAL) ? [value] : []
+      ];
     };
@@ -177,0 +188,0 @@

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

@@ -133,4 +133,6 @@ /* eslint-disable max-len */
 
+    const isTreeMap = dataset.type === CHART_TYPES.TREEMAP;
+
     // Checking if chart is a Treemap for color blending
-    dataset.backgroundColor = (dataset.type === CHART_TYPES.TREEMAP)
+    dataset.backgroundColor = (isTreeMap)
       ? ctx => blendColorsByPercent(
@@ -147,2 +149,7 @@ TREEMAP_COLORS.FROM,
 
+    // Saturating the colors of the blend
+    if (isTreeMap) {
+      context.style.filter = 'saturate(1.4)';
+    }
+
     return dataset;
@@ -149,0 +156,0 @@ });

No alert changes

Improved metrics

Total package byte prevSize

243416

increased by0.77%

Lines of code

4040

increased by0.62%

No dependency changes