@forter/chart - npm Package Compare versions

Comparing version 5.42.6 to 5.42.7

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+## [5.42.7](https://github.com/forter/web-components/compare/@forter/chart@5.42.6...@forter/chart@5.42.7) (2024-09-05)
+
+
+### Bug Fixes
+
+* **chart:** fix tooltip rates show first and prev ([63d9b2c](https://github.com/forter/web-components/commit/63d9b2c))
+
+
+
+
+
 ## [5.42.6](https://github.com/forter/web-components/compare/@forter/chart@5.42.5...@forter/chart@5.42.6) (2024-09-01)
@@ -8,0 +19,0 @@

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

@@ -121,12 +121,38 @@ import { html } from 'lit-element';
 
+const precentFrom = (nominator, demoninator) => {
+  let precentage = nominator / demoninator * 100;
+  precentage = precentage % 1 ? precentage.toFixed(2) : Math.round(precentage);
+  return precentage;
+};
+
 const extractFunnelData = ({
   dataPoint
 }) => {
-  const firstValue = dataPoint.chart.config.data.datasets[0].data[0].y;
-  let precentageFromFirstValue = dataPoint.parsed.y / firstValue * 100;
-  precentageFromFirstValue = precentageFromFirstValue % 1 ? precentageFromFirstValue.toFixed(2) : Math.round(precentageFromFirstValue);
+  const {
+    datasetIndex
+  } = dataPoint;
+
+  const getPointValue = index => dataPoint.chart.config.data.datasets[index].data[0].y;
+
+  let prevValue;
+  let precentageFromPrevValue = 0;
+  const firstValue = getPointValue(0);
+  const hoveredValue = dataPoint.parsed.y;
+  const isFirstItem = datasetIndex === 0;
+
+  if (!isFirstItem) {
+    prevValue = getPointValue(datasetIndex - 1);
+    precentageFromPrevValue = precentFrom(hoveredValue, prevValue);
+  }
+
+  const precentageFromFirstValue = precentFrom(hoveredValue, firstValue);
   return {
     tooltipMainInsight: get(dataPoint, 'raw.yFormatted'),
     mainInsightLabel: get(dataPoint, 'raw.aggregationLabel'),
-    tooltipPositionText: `${precentageFromFirstValue}% `,
+    tooltipPositionText: `
+      ${!isFirstItem ? `
+          <div>${precentageFromFirstValue}% from the first step</div>
+          <div>${precentageFromPrevValue}% from the previous step</div>
+        ` : ``}      
+    `,
     note: get(dataPoint, 'raw.note'),
@@ -133,0 +159,0 @@ cardPosition: 'top'

package.json

 {
   "name": "@forter/chart",
-  "version": "5.42.6",
+  "version": "5.42.7",
   "description": "chart from Forter Components",
@@ -61,3 +61,3 @@ "author": "Forter Developers",
   },
-  "gitHead": "0dcfa63eed6f339afa9d7110d663f6dd05ec5480"
+  "gitHead": "fb1291a88fef8f94d328a5eb07fa07a4f2944710"
 }

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

@@ -116,13 +116,36 @@ import { get, merge } from 'lodash-es';
 };
+const precentFrom = (nominator, demoninator) => {
+  let precentage = (nominator / demoninator) * 100;
+  precentage = precentage % 1
+    ? precentage.toFixed(2)
+    : Math.round(precentage);
+  return precentage;
+};
 
 const extractFunnelData = ({ dataPoint }) => {
-  const firstValue = dataPoint.chart.config.data.datasets[0].data[0].y;
-  let precentageFromFirstValue = (dataPoint.parsed.y / firstValue) * 100;
-  precentageFromFirstValue = precentageFromFirstValue % 1
-    ? precentageFromFirstValue.toFixed(2)
-    : Math.round(precentageFromFirstValue);
+  const { datasetIndex } = dataPoint;
+  const getPointValue = index => dataPoint.chart.config.data.datasets[index].data[0].y;
+  let prevValue; let precentageFromPrevValue = 0;
+  const firstValue = getPointValue(0);
+  const hoveredValue = dataPoint.parsed.y;
+  const isFirstItem = datasetIndex === 0;
+
+  if (!isFirstItem) {
+    prevValue = getPointValue(datasetIndex - 1);
+    precentageFromPrevValue = precentFrom(hoveredValue, prevValue);
+  }
+  const precentageFromFirstValue = precentFrom(hoveredValue, firstValue);
+
   return {
     tooltipMainInsight: get(dataPoint, 'raw.yFormatted'),
     mainInsightLabel: get(dataPoint, 'raw.aggregationLabel'),
-    tooltipPositionText: `${precentageFromFirstValue}% `,
+    tooltipPositionText: `
+      ${
+        !isFirstItem ? `
+          <div>${precentageFromFirstValue}% from the first step</div>
+          <div>${precentageFromPrevValue}% from the previous step</div>
+        `
+        : ``
+}      
+    `,
     note: get(dataPoint, 'raw.note'),
@@ -129,0 +152,0 @@ cardPosition: 'top',

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

419769

increased by0.66%

Lines of code

6607

increased by0.64%

No dependency changes