@forter/chart - npm Package Compare versions

Comparing version 5.28.5 to 5.28.6

CHANGELOG.md

@@ -6,2 +6,10 @@ # Change Log
 
+## [5.28.6](https://github.com/forter/web-components/compare/@forter/chart@5.28.5...@forter/chart@5.28.6) (2023-01-08)
+
+**Note:** Version bump only for package @forter/chart
+
+
+
+
+
 ## [5.28.5](https://github.com/forter/web-components/compare/@forter/chart@5.28.4...@forter/chart@5.28.5) (2023-01-03)
@@ -8,0 +16,0 @@

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

@@ -20,3 +20,2 @@ import { get } from 'lodash-es';
 };
-
 const translateColorArray = (colors, context) => {
@@ -30,3 +29,2 @@ if (!colors) {
 };
-
 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)'];
@@ -186,3 +184,3 @@ const TREEMAP_COLORS = {
 
-export { translateColor, updateColorsInDatasets };
+export { DEFAULT_COLORS, translateColor, translateColorArray, updateColorsInDatasets };
 //# sourceMappingURL=dataset-color-config-builder.js.map

chart-config-builders/doughnut-builder.js

 import { merge } from 'lodash-es';
 import { CHART_TYPES } from '../enums.js';
+import { translateColorArray, DEFAULT_COLORS } from './dataset-color-config-builder.js';
 
 const DEFAULT_DATASET_STYLE = {
   hoverOffset: 4,
-  cutout: '75%',
+  cutout: '50%',
   radius: 87,
@@ -35,3 +36,3 @@ borderRadius: 0
 };
-var doughnutBuilder = ((config, chartJSConfig) => {
+var doughnutBuilder = ((config, chartJSConfig, context) => {
   const {
@@ -43,4 +44,3 @@ series: allSeries = []
 
-  const [dataset] = series;
-  const datasets = extractDataForDoughnutFromDataset(dataset);
+  const datasets = extractDataForDoughnutFromDataset(series, context);
   const merged = { ...DEFAULT_CONFIG,
@@ -54,22 +54,52 @@ data: datasets
 
-const extractDataForDoughnutFromDataset = dataset => {
-  const rawDatasets = {};
-  dataset.aggregation.data.forEach(dataPoint => {
-    const [timeDimension] = dataPoint.dimensions;
-    const {
-      value,
-      style
-    } = dataPoint;
-    rawDatasets[timeDimension] = rawDatasets[timeDimension] ? rawDatasets[timeDimension] : {
-      value: 0,
-      style
-    };
-    rawDatasets[timeDimension].value += value;
-  });
+const extractDataForDoughnutFromDataset = (series, context) => {
   const newDataset = {
     labels: [],
     datasets: [{ ...DEFAULT_DATASET_STYLE,
+      backgroundColor: translateColorArray(DEFAULT_COLORS, context),
       data: []
     }]
   };
+  const rawDatasets = {}; // doughnut with multiple series means that each series represents a slice of the doughnut.
+
+  if (series.length > 1) {
+    series.forEach(s => {
+      const {
+        aggregation: {
+          data
+        }
+      } = s;
+
+      if (!data) {
+        return;
+      }
+
+      const [dataPoint] = data;
+      const {
+        value,
+        style,
+        aggregationLabel
+      } = dataPoint;
+      rawDatasets[aggregationLabel] = {
+        value,
+        style
+      };
+    });
+  } else {
+    // one series means that a dimension was defined, and datasets will be created out of that dimension values
+    const [dataset] = series;
+    dataset.aggregation.data.forEach(dataPoint => {
+      const [timeDimension] = dataPoint.dimensions;
+      const {
+        value,
+        style
+      } = dataPoint;
+      rawDatasets[timeDimension] = rawDatasets[timeDimension] ? rawDatasets[timeDimension] : {
+        value: 0,
+        style
+      };
+      rawDatasets[timeDimension].value += value;
+    });
+  }
+
   Object.entries(rawDatasets).forEach(([key, value], index) => {
@@ -76,0 +106,0 @@ newDataset.labels.push(key);

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

@@ -51,3 +51,3 @@ import { html } from 'lit-element';
 
-  extractDataAndRenderTooltip(tooltipModel, tooltipElement, canvas, previewMode, isMissingDrilldown, seriesType, xAxisType);
+  extractDataAndRenderTooltip(tooltipModel, tooltipElement, canvas, previewMode, isMissingDrilldown, seriesType, xAxisType, chartJSContext);
 };
@@ -111,6 +111,11 @@
 const extractDoughnutData = ({
-  dataPoint
+  dataPoint,
+  chartJSContext
 }) => {
+  const dataArr = chartJSContext.chart.data.datasets[0].data;
+  const sum = dataArr.reduce((accu, current) => accu += current, 0);
+  const ratio = (dataPoint.parsed / sum * 100).toFixed(2); //  debugger
+
   return {
-    tooltipMainInsight: dataPoint.formattedValue,
+    tooltipMainInsight: `${dataPoint.formattedValue} (${ratio}%)`,
     mainInsightLabel: dataPoint.label
@@ -142,3 +147,3 @@ };
   xAxisType
-}) => {
+}, chartJSContext) => {
   /* This is a hack!
@@ -166,3 +171,4 @@ On confetti we declare uppercase seriesType and in the generateBasicChartJSConfig builder in FcChart.js we use it to set up the config type
       return extractDoughnutData({
-        dataPoint
+        dataPoint,
+        chartJSContext
       });
@@ -179,3 +185,3 @@
 
-const extractDataAndRenderTooltip = (tooltipModel, tooltipElement, canvas, previewMode, isMissingDrilldown, seriesType, xAxisType) => {
+const extractDataAndRenderTooltip = (tooltipModel, tooltipElement, canvas, previewMode, isMissingDrilldown, seriesType, xAxisType, chartJSContext) => {
   var _dataPoint$element, _dataPoint$element$op, _dataPoint$element2, _dataPoint$element2$o;
@@ -197,3 +203,3 @@
       xAxisType
-    })
+    }, chartJSContext)
   };
@@ -200,0 +206,0 @@ tooltipElement.innerHTML = renderTooltip(extractedData);

package.json

 {
   "name": "@forter/chart",
-  "version": "5.28.5",
+  "version": "5.28.6",
   "description": "chart from Forter Components",
@@ -61,3 +61,3 @@ "author": "Forter Developers",
   },
-  "gitHead": "9fcb35e5fadc23ecf5281c1bb3cc26c3ea72724e"
+  "gitHead": "85f7c37bc3ff19b09b84ae52a8ab782c7dcc7db3"
 }

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

@@ -19,3 +19,3 @@ /* eslint-disable max-len */
 
-const translateColorArray = (colors, context) => {
+export const translateColorArray = (colors, context) => {
   if (!colors) {
@@ -29,3 +29,3 @@ return;
 
-const DEFAULT_COLORS = [
+export const DEFAULT_COLORS = [
   'var(--fc-turquoise-500)',
@@ -116,3 +116,2 @@ 'var(--fc-ocean-500)',
   const { xAxisType, dimensionsStyle, dataSource } = config;
-
   chartJSConfig.data.datasets = chartJSConfig.data.datasets.map((dataset, index) => {
@@ -119,0 +118,0 @@ if (xAxisType === 'SINGLE_TIME_FIELD') {

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

 import { merge } from 'lodash-es';
 import { CHART_TYPES } from '../enums';
+import { DEFAULT_COLORS, translateColorArray } from './dataset-color-config-builder';
 
 const DEFAULT_DATASET_STYLE = {
   hoverOffset: 4,
-  cutout: '75%',
+  cutout: '50%',
   radius: 87,
-  borderRadius: 0,
+  borderRadius: 0
 };
@@ -37,3 +38,4 @@
 
-export default (config, chartJSConfig) => {
+
+export default (config, chartJSConfig, context) => {
   const { series: allSeries = [] } = config;
@@ -47,5 +49,4 @@
   // assumption - only one series in this case
-  const [dataset] = series;
 
-  const datasets = extractDataForDoughnutFromDataset(dataset);
+  const datasets = extractDataForDoughnutFromDataset(series, context);
   const merged = {
@@ -60,15 +61,3 @@ ...DEFAULT_CONFIG,
 
-const extractDataForDoughnutFromDataset = dataset => {
-  const rawDatasets = {};
-
-  dataset.aggregation.data.forEach(dataPoint => {
-    const [timeDimension] = dataPoint.dimensions;
-    const { value, style } = dataPoint;
-    rawDatasets[timeDimension] = rawDatasets[timeDimension] ? rawDatasets[timeDimension] : {
-      value: 0,
-      style
-    };
-    rawDatasets[timeDimension].value += value;
-  });
-
+const extractDataForDoughnutFromDataset = (series, context) => {
   const newDataset = {
@@ -78,2 +67,3 @@ labels: [],
       ...DEFAULT_DATASET_STYLE,
+      backgroundColor: translateColorArray(DEFAULT_COLORS, context),
       data: [],
@@ -83,2 +73,29 @@ }]
 
+  const rawDatasets = {};
+
+  // doughnut with multiple series means that each series represents a slice of the doughnut.
+  if (series.length > 1) {
+    series.forEach(s => {
+      const { aggregation: { data } } = s;
+      if (!data) {
+        return;
+      }
+      const [dataPoint] = data;
+      const { value, style, aggregationLabel } = dataPoint;
+      rawDatasets[aggregationLabel] = { value, style };
+    });
+  } else {
+    // one series means that a dimension was defined, and datasets will be created out of that dimension values
+    const [dataset] = series;
+    dataset.aggregation.data.forEach(dataPoint => {
+      const [timeDimension] = dataPoint.dimensions;
+      const { value, style } = dataPoint;
+      rawDatasets[timeDimension] = rawDatasets[timeDimension] ? rawDatasets[timeDimension] : {
+        value: 0,
+        style
+      };
+      rawDatasets[timeDimension].value += value;
+    });
+  }
+
   Object.entries(rawDatasets).forEach(([key, value], index) => {
@@ -85,0 +102,0 @@ newDataset.labels.push(key);

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

@@ -41,3 +41,3 @@ import { get, merge } from 'lodash-es';
   // eslint-disable-next-line max-len
-  extractDataAndRenderTooltip(tooltipModel, tooltipElement, canvas, previewMode, isMissingDrilldown, seriesType, xAxisType);
+  extractDataAndRenderTooltip(tooltipModel, tooltipElement, canvas, previewMode, isMissingDrilldown, seriesType, xAxisType, chartJSContext);
 };
@@ -79,5 +79,9 @@
 /* This is the minimal data for tooltip, need to set up a formal requirements by product & design */
-const extractDoughnutData = ({ dataPoint }) => {
+const extractDoughnutData = ({ dataPoint, chartJSContext }) => {
+  const dataArr = chartJSContext.chart.data.datasets[0].data;
+  const sum = dataArr.reduce((accu, current) => accu += current, 0);
+  const ratio = ((dataPoint.parsed / sum) * 100).toFixed(2);
+  //  debugger
   return {
-    tooltipMainInsight: dataPoint.formattedValue,
+    tooltipMainInsight: `${dataPoint.formattedValue} (${ratio}%)`,
     mainInsightLabel: dataPoint.label,
@@ -97,3 +101,3 @@ };
 
-const extractTooltipData = (seriesType, { dataPoint, xAxisType })=> {
+const extractTooltipData = (seriesType, { dataPoint, xAxisType }, chartJSContext)=> {
   /* This is a hack!
@@ -114,3 +118,3 @@ On confetti we declare uppercase seriesType and in the generateBasicChartJSConfig builder in FcChart.js we use it to set up the config type
     case CHART_TYPES.DOUGHNUT:
-      return extractDoughnutData({ dataPoint });
+      return extractDoughnutData({ dataPoint, chartJSContext });
     default:
@@ -122,3 +126,3 @@ return extractDefaultData({ dataPoint, xAxisType });
 // eslint-disable-next-line max-len
-const extractDataAndRenderTooltip = (tooltipModel, tooltipElement, canvas, previewMode, isMissingDrilldown, seriesType, xAxisType) => {
+const extractDataAndRenderTooltip = (tooltipModel, tooltipElement, canvas, previewMode, isMissingDrilldown, seriesType, xAxisType, chartJSContext) => {
   const dataPoint = get(tooltipModel, 'dataPoints[0]');
@@ -137,3 +141,3 @@ const { offsetLeft: positionX, offsetTop: positionY } = canvas;
     isMissingDrilldown,
-    ...extractTooltipData(seriesType, { dataPoint, xAxisType })
+    ...extractTooltipData(seriesType, { dataPoint, xAxisType }, chartJSContext)
   };
@@ -140,0 +144,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

322101

increased by1.39%

Lines of code

5269

increased by0.98%

No dependency changes