logitude-dashboard-library 3.2.35 → 3.2.37

package/dist/features/Dashboard/ChartsComponents/FusionCharts/FusionChartTooltip.d.ts

@@ -1,3 +1,3 @@
 import { SeriesMeasure } from "../../../../types/SeriesMeasure";
 import { ReactWidgetPM } from "../../../../types/widget";
-export declare function buildToolTip(widget: ReactWidgetPM, value: any, seriesName: SeriesMeasure, label: any, index: number): string;
+export declare function buildToolTip(widget: ReactWidgetPM, value: any, seriesMeasure: SeriesMeasure, label: any, index: number, groupbyId?: string | null, secGroupbyId?: string | null): string;

package/dist/index.js

@@ -2096,9 +2096,75 @@ var CustomChart = function CustomChart(props) {
   }, project()));
 };
 
-function buildToolTip(widget, value, seriesName, label, index) {
+function buildToolTip(widget, value, seriesMeasure, label, index, groupbyId, secGroupbyId) {
+  if (groupbyId === void 0) {
+    groupbyId = null;
+  }
+
+  if (secGroupbyId === void 0) {
+    secGroupbyId = null;
+  }
+
   var padding = widget.TypeCode == 'line' && index > 0 ? 'padding-top: 3px' : '';
-  return "\n    <div style=\"min-width: 108px;" + padding + "\">\n        <div style=\"display: flex;align-items: center;margin-bottom: 6px;\">\n            <span style=\"margin: 0; min-height: 10px; min-width: 10px; height: 10px; width: 10px; background-color: transparent; border-radius: 50%; display: inline-block;\"></span>\n            <p style=\" margin: 0; margin-left: 4px; white-space: pre-line; font-family: 'Manrope'; font-style: normal;font-weight: 400; font-size: 11px; line-height: 100%;  color: #323232;\"> " + getTooltiplabel(label, seriesName) + "</p>\n        </div>\n        <hr style=\"margin: 0;border-top: 1px solid #F0F0F0;\">\n        <div style=\"display: flex;align-items: center;margin:0;margin-top: 6px;\">\n            <p style=\"margin: 0;font-family: 'Manrope'; white-space: pre-line; font-style: normal;font-weight: 400; font-size: 11px;line-height: 100%;color: #A4A4A4;\"> " + getMeasureType(seriesName) + "</p>\n            <p style=\"margin: 0;margin-left: 6px; white-space: pre-line; font-family: 'Manrope';font-style: normal;font-weight: 500;font-size: 11px;line-height: 100%;  color: #323232;\">" + getTooltipValue(value, seriesName) + "</p>\n            " + getTooltipPercentage(widget) + " </div>\n    </div>\n    ";
+  var customToolTip = "\n    <div style=\"min-width: 108px;" + padding + "\">\n\n        <div style=\"display: flex;align-items: center;margin-bottom: 6px;\">\n            <span style=\"margin: 0; min-height: 10px; min-width: 10px; height: 10px; width: 10px; background-color: transparent; border-radius: 50%; display: inline-block;\"></span>\n            <p style=\" margin: 0; margin-left: 4px; white-space: pre-line; font-family: 'Manrope'; font-style: normal;font-weight: 400; font-size: 11px; line-height: 100%;  color: #323232;\"> " + getTooltiplabel(label, seriesMeasure) + "</p>\n        </div>\n\n        <hr style=\"margin: 0;border-top: 1px solid #F0F0F0;\">\n\n        <div style=\"display: flex;align-items: center;margin:0;margin-top: 6px;\">\n            <p style=\"margin: 0;font-family: 'Manrope'; white-space: pre-line; font-style: normal;font-weight: 400; font-size: 11px;line-height: 100%;color: #A4A4A4;\"> " + getMeasureType(seriesMeasure) + "</p>\n            <p style=\"margin: 0;margin-left: 6px; white-space: pre-line; font-family: 'Manrope';font-style: normal;font-weight: 500;font-size: 11px;line-height: 100%;  color: #A4A4A4;\">" + getTooltipValue(value, seriesMeasure) + "</p>\n            " + getTooltipPercentage(widget) + " </div> ";
+
+  if (RenderStackedChartTotalsAndPercentages(widget, seriesMeasure)) {
+    customToolTip += "<div>\n\n            <hr style=\"margin-top: 6px;border-top: 1px solid #F0F0F0;\">\n\n            <div style=\"display: flex; flex-direction: column; gap: 6px; flex-d align-items: center;margin:0;margin-top: 6px;\">\n                <p style=\"margin: 0;font-family: 'Manrope'; white-space: pre-line; font-style: normal;font-weight: 400; font-size: 11px;line-height: 100%;color: #A4A4A4;\"> " + getGroupValuePercentage(seriesMeasure, groupbyId, secGroupbyId) + "</p>\n                <p style=\"margin: 0;white-space: pre-line; font-family: 'Manrope';font-style: normal;font-weight: 500;font-size: 11px;line-height: 100%;  color: #A4A4A4;\">" + getSumOfGroupValues(seriesMeasure, groupbyId) + "</p>\n            </div>\n\n        </div>";
+  }
+
+  customToolTip += "</div>";
+  return customToolTip;
+}
+
+function RenderStackedChartTotalsAndPercentages(widget, seriesMeasures) {
+  if (!widget || !seriesMeasures || !seriesMeasures.MeasureCode) {
+    return false;
+  }
+
+  return widget.IsStacked && (seriesMeasures.MeasureCode === "Count" || seriesMeasures.MeasureCode === "Sum");
+}
+
+function getGroupValuePercentage(seriesMeasures, groupbyId, secGroupbyId) {
+  var _seriesMeasures$Value;
+
+  if (!groupbyId || !secGroupbyId || !seriesMeasures) {
+    return;
+  }
+
+  var total = getSumOfGroupValuesAsNumber(seriesMeasures, groupbyId);
+  var value = (_seriesMeasures$Value = seriesMeasures.Values.filter(function (v) {
+    return v.GroupById === groupbyId && v.GroupByIdSec === secGroupbyId;
+  })[0]) === null || _seriesMeasures$Value === void 0 ? void 0 : _seriesMeasures$Value.Value;
+  var percentageValueInLocalFormat = "0";
+
+  if (total !== 0 && value) {
+    percentageValueInLocalFormat = getNumberInSystemLocalFormat(value / total * 100, 2);
+  }
+
+  return "<span style=\"margin-right:6px;\">Percentage:</span>" + percentageValueInLocalFormat + "%";
+}
+
+function getSumOfGroupValues(seriesMeasure, groupbyId) {
+  if (!groupbyId || !seriesMeasure) {
+    return "";
+  }
+
+  var total = getSumOfGroupValuesAsNumber(seriesMeasure, groupbyId);
+  return "<span style=\"margin-right:6px;\">Total:</span>" + getNumberInSystemLocalFormat(total, 2);
+}
+
+function getSumOfGroupValuesAsNumber(seriesMeasure, groupbyId) {
+  if (!groupbyId || !seriesMeasure) {
+    return 0;
+  }
+
+  var total = 0;
+  seriesMeasure.Values.filter(function (v) {
+    return v.GroupById === groupbyId;
+  }).forEach(function (v) {
+    total += v.Value;
+  });
+  return total;
 }
 
 function getTooltipPercentage(widget) {
@@ -2308,7 +2374,7 @@ function buildStackedGroupData(secGroup, series, widget) {
         MeasureCode: series.MeasureCode,
         Formula: series.Formula
       },
-      tooltext: buildToolTip(widget, null, series, group.label + " - " + secGroup.label, 0)
+      tooltext: buildToolTip(widget, null, series, group.label + " - " + secGroup.label, 0, group.code, secGroup.code)
     });
   });
   return data;