@forter/chart - npm Package Compare versions

Comparing version 5.8.3 to 5.8.4

CHANGELOG.md

@@ -6,2 +6,10 @@ # Change Log
 
+## [5.8.4](https://github.com/forter/web-components/compare/@forter/chart@5.8.3...@forter/chart@5.8.4) (2021-10-27)
+
+**Note:** Version bump only for package @forter/chart
+
+
+
+
+
 ## [5.8.3](https://github.com/forter/web-components/compare/@forter/chart@5.8.2...@forter/chart@5.8.3) (2021-10-17)
@@ -8,0 +16,0 @@

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

@@ -83,3 +83,12 @@ import { cloneDeep, merge } from 'lodash-es';
 });
+/* eslint-disable max-len */
 
+const getDimensionFieldNamesFromDataSet = dataset => {
+  var _dataset$aggregation, _dataset$aggregation$;
+
+  return (dataset === null || dataset === void 0 ? void 0 : (_dataset$aggregation = dataset.aggregation) === null || _dataset$aggregation === void 0 ? void 0 : (_dataset$aggregation$ = _dataset$aggregation.dimensions) === null || _dataset$aggregation$ === void 0 ? void 0 : _dataset$aggregation$.map(({
+    key
+  }) => key)) || [];
+};
+
 const extractDatasets = config => {
@@ -119,3 +128,9 @@ const {
         label: key,
-        data: value
+        data: value,
+
+        /**
+         * we save dimensionFieldNames on the dataset so later we can grab a specific styling for specific dimension
+         * field with a specific value (example - "american express" from the "paymentMethod" will be colored in purple
+         */
+        dimensionFieldNames: getDimensionFieldNamesFromDataSet(dataset)
       };
@@ -141,3 +156,9 @@ data = merge(data, dataset.style);
       ...dataset.style,
-      label: (xAxisType !== 'SINGLE_NON_TIME_FIELD' || dataset.seriesType === 'LINE') && dataset.label || undefined
+      label: (xAxisType !== 'SINGLE_NON_TIME_FIELD' || dataset.seriesType === 'LINE') && dataset.label || undefined,
+
+      /**
+       * we save dimensionFieldNames on the dataset so later we can grab a specific styling for specific dimension
+       * field with a specific value (example - "american express" from the "paymentMethod" will be colored in purple
+       */
+      dimensionFieldNames: getDimensionFieldNamesFromDataSet(dataset)
     };
@@ -144,0 +165,0 @@

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

@@ -0,1 +1,4 @@
+import { get } from 'lodash-es';
+
+/* eslint-disable max-len */
 const translateColor = (color, context) => {
@@ -26,6 +29,57 @@ if (!color) {
 
-const DEFAULT_COLORS = ['var(--fc-turquoise-500)', 'var(--fc-ocean-500)', 'var(--fc-blue-500)', 'var(--fc-marine-500)', 'var(--fc-indigo-500)', 'var(--fc-purple-500)', 'var(--fc-pink-purple-500)', 'var(--fc-magenta-500)'];
+const DEFAULT_COLORS = ['var(--fc-turquoise-500)', 'var(--fc-ocean-500)', 'var(--fc-blue-500)', 'var(--fc-marine-500)', 'var(--fc-indigo-500)', 'var(--fc-purple-500)', 'var(--fc-pink-purple-500)', 'var(--fc-magenta-500)', 'var(--fc-blue-gray-500)', 'var(--fc-gray-500)'];
+
+const getDimensionValueColor = ({
+  dimensionsStyle,
+  dataSource,
+  dimensionField,
+  normalizedDimensionValue
+}) => {
+  var _get;
+
+  return (_get = get(dimensionsStyle, `${dataSource}.${dimensionField}.${normalizedDimensionValue}`)) === null || _get === void 0 ? void 0 : _get.color;
+};
+
+const getPredefinedDimensionValuesColors = ({
+  dimensionsStyle,
+  dataSource,
+  dimensionFieldNames,
+  data,
+  xAxisType,
+  label
+}) => {
+  // depending on the x axis type, this function extracts dimension value styling that were predefined in the dimensionsStyle object
+  if (xAxisType === 'SINGLE_NON_TIME_FIELD') {
+    let colors = data.map(({
+      dimensions
+    }) => {
+      const [dimensionField] = dimensionFieldNames;
+      const [dimensionValue] = dimensions;
+      const normalizedDimensionValue = dimensionValue.toLowerCase();
+      return getDimensionValueColor({
+        dimensionsStyle,
+        dimensionField,
+        normalizedDimensionValue,
+        dataSource
+      });
+    });
+    colors = colors.filter(Boolean);
+    return colors;
+  } else if (xAxisType === 'SINGLE_TIME_FIELD_SINGLE_NON_TIME_FIELD') {
+    const [, dimensionField] = dimensionFieldNames;
+    const normalizedDimensionValue = label.toLowerCase();
+    return getDimensionValueColor({
+      dimensionsStyle,
+      dimensionField,
+      normalizedDimensionValue,
+      dataSource
+    });
+  }
+};
+
 const updateColorsInDatasets = (config, chartJSConfig, context) => {
   const {
-    xAxisType
+    xAxisType,
+    dimensionsStyle,
+    dataSource
   } = config;
@@ -38,8 +92,30 @@ chartJSConfig.data.datasets = chartJSConfig.data.datasets.map((dataset, index) => {
     } else if (xAxisType === 'SINGLE_NON_TIME_FIELD') {
-      dataset.backgroundColor = dataset.backgroundColor || DEFAULT_COLORS;
-      dataset.borderColor = dataset.borderColor || DEFAULT_COLORS;
+      const {
+        dimensionFieldNames,
+        data
+      } = dataset;
+      const predefinedColors = getPredefinedDimensionValuesColors({
+        dimensionsStyle,
+        dataSource,
+        dimensionFieldNames,
+        data,
+        xAxisType
+      });
+      dataset.backgroundColor = dataset.backgroundColor ? dataset.backgroundColor : (predefinedColors === null || predefinedColors === void 0 ? void 0 : predefinedColors.length) > 0 ? predefinedColors : DEFAULT_COLORS;
+      dataset.borderColor = dataset.borderColor ? dataset.borderColor : (predefinedColors === null || predefinedColors === void 0 ? void 0 : predefinedColors.length) > 0 ? predefinedColors : DEFAULT_COLORS;
     } else {
       // in this case the datasets are per different dimension values
-      dataset.backgroundColor = dataset.backgroundColor || DEFAULT_COLORS[index];
-      dataset.borderColor = dataset.borderColor || DEFAULT_COLORS[index];
+      const {
+        dimensionFieldNames,
+        label
+      } = dataset;
+      const predefinedColor = getPredefinedDimensionValuesColors({
+        dimensionsStyle,
+        dataSource,
+        dimensionFieldNames,
+        xAxisType,
+        label
+      });
+      dataset.backgroundColor = dataset.backgroundColor ? dataset.backgroundColor : predefinedColor ? predefinedColor : DEFAULT_COLORS[index];
+      dataset.borderColor = dataset.borderColor ? dataset.borderColor : predefinedColor ? predefinedColor : DEFAULT_COLORS[index];
     }
@@ -46,0 +122,0 @@

package.json

 {
   "name": "@forter/chart",
-  "version": "5.8.3",
+  "version": "5.8.4",
   "description": "chart from Forter Components",
@@ -59,3 +59,3 @@ "author": "Forter Developers",
   },
-  "gitHead": "bea5254128eee4dc85eb62ca3098537b9782d681"
+  "gitHead": "6cdf0fe6979971f9109bdb752517cb80e2543e40"
 }

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

@@ -91,2 +91,5 @@ import { merge, cloneDeep } from 'lodash-es';
 
+/* eslint-disable max-len */
+const getDimensionFieldNamesFromDataSet = dataset => dataset?.aggregation?.dimensions?.map(({ key }) => key) || [];
+
 const extractDatasets = config => {
@@ -118,3 +121,8 @@ const { series = [], xAxisType } = config;
         label: key,
-        data: value
+        data: value,
+        /**
+         * we save dimensionFieldNames on the dataset so later we can grab a specific styling for specific dimension
+         * field with a specific value (example - "american express" from the "paymentMethod" will be colored in purple
+         */
+        dimensionFieldNames: getDimensionFieldNamesFromDataSet(dataset)
       };
@@ -143,3 +151,8 @@
           dataset.label) ||
-        undefined
+        undefined,
+      /**
+       * we save dimensionFieldNames on the dataset so later we can grab a specific styling for specific dimension
+       * field with a specific value (example - "american express" from the "paymentMethod" will be colored in purple
+       */
+      dimensionFieldNames: getDimensionFieldNamesFromDataSet(dataset)
     };
@@ -146,0 +159,0 @@

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

@@ -0,1 +1,4 @@
+/* eslint-disable max-len */
+import { get } from 'lodash-es';
+
 export const translateColor = (color, context) => {
@@ -32,8 +35,30 @@ if (!color) {
   'var(--fc-pink-purple-500)',
-  'var(--fc-magenta-500)'
+  'var(--fc-magenta-500)',
+  'var(--fc-blue-gray-500)',
+  'var(--fc-gray-500)'
 ];
 
+const getDimensionValueColor = ({ dimensionsStyle, dataSource, dimensionField, normalizedDimensionValue }) => get(dimensionsStyle, `${dataSource}.${dimensionField}.${normalizedDimensionValue}`)?.color;
 
+const getPredefinedDimensionValuesColors = ({ dimensionsStyle, dataSource, dimensionFieldNames, data, xAxisType, label }) => {
+  // depending on the x axis type, this function extracts dimension value styling that were predefined in the dimensionsStyle object
+  if (xAxisType === 'SINGLE_NON_TIME_FIELD') {
+    let colors = data.map(({ dimensions }) => {
+      const [dimensionField] = dimensionFieldNames;
+      const [dimensionValue] = dimensions;
+      const normalizedDimensionValue = dimensionValue.toLowerCase();
+      return getDimensionValueColor({ dimensionsStyle, dimensionField, normalizedDimensionValue, dataSource });
+    });
+    colors = colors.filter(Boolean);
+    return colors;
+  } else if (xAxisType === 'SINGLE_TIME_FIELD_SINGLE_NON_TIME_FIELD') {
+    const [, dimensionField] = dimensionFieldNames;
+    const normalizedDimensionValue = label.toLowerCase();
+    return getDimensionValueColor({ dimensionsStyle, dimensionField, normalizedDimensionValue, dataSource });
+  }
+};
+
+
 export const updateColorsInDatasets = (config, chartJSConfig, context) => {
-  const { xAxisType } = config;
+  const { xAxisType, dimensionsStyle, dataSource } = config;
 
@@ -46,8 +71,12 @@ chartJSConfig.data.datasets = chartJSConfig.data.datasets.map((dataset, index) => {
     } else if (xAxisType === 'SINGLE_NON_TIME_FIELD') {
-      dataset.backgroundColor = dataset.backgroundColor || DEFAULT_COLORS;
-      dataset.borderColor = dataset.borderColor || DEFAULT_COLORS;
+      const { dimensionFieldNames, data } = dataset;
+      const predefinedColors = getPredefinedDimensionValuesColors({ dimensionsStyle, dataSource, dimensionFieldNames, data, xAxisType });
+      dataset.backgroundColor = dataset.backgroundColor ? dataset.backgroundColor : (predefinedColors?.length > 0 ? predefinedColors : DEFAULT_COLORS);
+      dataset.borderColor = dataset.borderColor ? dataset.borderColor : (predefinedColors?.length > 0 ? predefinedColors : DEFAULT_COLORS);
     } else {
       // in this case the datasets are per different dimension values
-      dataset.backgroundColor = dataset.backgroundColor || DEFAULT_COLORS[index];
-      dataset.borderColor = dataset.borderColor || DEFAULT_COLORS[index];
+      const { dimensionFieldNames, label } = dataset;
+      const predefinedColor = getPredefinedDimensionValuesColors({ dimensionsStyle, dataSource, dimensionFieldNames, xAxisType, label });
+      dataset.backgroundColor = dataset.backgroundColor ? dataset.backgroundColor : (predefinedColor ? predefinedColor : DEFAULT_COLORS[index]);
+      dataset.borderColor = dataset.borderColor ? dataset.borderColor : (predefinedColor ? predefinedColor : DEFAULT_COLORS[index]);
     }
@@ -54,0 +83,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

164107

increased by7.56%

Lines of code

2965

increased by4.51%

No dependency changes