logitude-dashboard-library 1.4.18 → 1.4.20

package/dist/assets/styles/dl-dashboard.scss

@@ -432,7 +432,8 @@ $dark-grey: #717585;
 
 .db-fc-container {
     width: 100%;
-    height: 100%;
+    height: calc(100% - 5px);
+    padding-top: 12px;
 }
 
 .db-fc-container>*:first-child {

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

@@ -2,4 +2,5 @@ import { SeriesMeasure } from "../../../../types/SeriesMeasure";
 import { ReactWidgetPM } from "../../../../types/widget";
 import { ChartInfo } from "./FusionChartObjectHelper";
 export declare function getCategoriesBasedDataSource(chartInfo: ChartInfo, seriesMeasures: SeriesMeasure[], widget: ReactWidgetPM): any;
+export declare function getStackedDataSource(chartInfo: ChartInfo, seriesMeasures: SeriesMeasure[], widget: ReactWidgetPM): any;
 export declare function getSimpleDataSource(chartInfo: ChartInfo, seriesMeasures: SeriesMeasure[], widget: ReactWidgetPM): any;

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

@@ -1,2 +1,2 @@
 import { ReactWidgetPM } from "../../../../types/widget";
-export declare function buildToolTip(widget: ReactWidgetPM, value: any, seriesName: string): string;
+export declare function buildToolTip(widget: ReactWidgetPM, value: any, seriesName: string, label: any): string;

package/dist/index.js

@@ -408,8 +408,8 @@ function getSeriesPositionColor(position) {
   }
 }
 
-function buildToolTip(widget, value, seriesName) {
-  return "\n    <div style=\"min-width: 108px;\">\n        <div style=\"display: flex;align-items: center;margin-bottom: 6px;\">\n            <span style=\"margin: 0; height: 10px; width: 10px; background-color: #A4A4A4; border-radius: 50%; display: inline-block;\"></span>\n            <p style=\" margin: 0; margin-left: 4px;font-family: 'Manrope'; font-style: normal;font-weight: 400; font-size: 11px; line-height: 100%;  color: #323232;  flex: none; order: 1;flex-grow: 0;\">$label</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';font-style: normal;font-weight: 400; font-size: 11px;line-height: 100%;color: #A4A4A4;flex: none;order: 0;flex-grow: 0;\"> " + getMeasureType(seriesName) + "</p>\n            <p style=\"margin: 0;margin-left: 6px;font-family: 'Manrope';font-style: normal;font-weight: 500;font-size: 11px;line-height: 100%;  color: #323232;flex: none; order: 1;flex-grow: 0;\">" + getTooltipValue(value) + "</p>\n            " + getTooltipPercentage(widget) + " </div>\n    </div>\n    ";
+function buildToolTip(widget, value, seriesName, label) {
+  return "\n    <div style=\"min-width: 108px;\">\n        <div style=\"display: flex;align-items: center;margin-bottom: 6px;\">\n            <span style=\"margin: 0; height: 10px; width: 10px; background-color: #A4A4A4; border-radius: 50%; display: inline-block;\"></span>\n            <p style=\" margin: 0; margin-left: 4px;font-family: 'Manrope'; font-style: normal;font-weight: 400; font-size: 11px; line-height: 100%;  color: #323232;  flex: none; order: 1;flex-grow: 0;\"> " + getTooltiplabel(label) + "</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';font-style: normal;font-weight: 400; font-size: 11px;line-height: 100%;color: #A4A4A4;flex: none;order: 0;flex-grow: 0;\"> " + getMeasureType(seriesName) + "</p>\n            <p style=\"margin: 0;margin-left: 6px;font-family: 'Manrope';font-style: normal;font-weight: 500;font-size: 11px;line-height: 100%;  color: #323232;flex: none; order: 1;flex-grow: 0;\">" + getTooltipValue(value) + "</p>\n            " + getTooltipPercentage(widget) + " </div>\n    </div>\n    ";
 }
 
 function getTooltipPercentage(widget) {
@@ -417,6 +417,11 @@ function getTooltipPercentage(widget) {
   return "\n    <p style=\"margin: 0;margin-left: 2px;font-family: 'Manrope';font-style: normal;font-weight: 500;font-size: 11px;line-height: 100%;  color: #A4A4A4;flex: none; order: 1;flex-grow: 0;\">($percentValue)</p>\n    ";
 }
 
+function getTooltiplabel(value) {
+  if (value) return value;
+  return '$label';
+}
+
 function getTooltipValue(value) {
   if (value) return value;
   return '$dataValue';
@@ -436,6 +441,15 @@ function getCategoriesBasedDataSource(chartInfo, seriesMeasures, widget) {
     dataset: buildDataSet(seriesMeasures, widget)
   };
 }
+function getStackedDataSource(chartInfo, seriesMeasures, widget) {
+  if (seriesMeasuresIsEmpty(seriesMeasures)) return null;
+  handelNullLabels(seriesMeasures);
+  return {
+    chart: chartInfo,
+    categories: buildStackedCategories(seriesMeasures),
+    dataset: buildStackedDataSet(seriesMeasures, widget)
+  };
+}
 function getSimpleDataSource(chartInfo, seriesMeasures, widget) {
   if (seriesMeasuresIsEmpty(seriesMeasures)) return null;
   handelNullLabels(seriesMeasures);
@@ -447,7 +461,7 @@ function getSimpleDataSource(chartInfo, seriesMeasures, widget) {
 
 function handelNullLabels(seriesMeasures) {
   seriesMeasures.forEach(function (element) {
-    element.SeriesMeasureVulues.forEach(function (value) {
+    element.Values.forEach(function (value) {
       if (!value.Label || value.Label == '') value.Label = 'Not defined';
     });
   });
@@ -457,7 +471,7 @@ function seriesMeasuresIsEmpty(seriesMeasures) {
   if (!seriesMeasures || seriesMeasures.length == 0) return true;
   var hasValue = false;
   seriesMeasures.forEach(function (item) {
-    if (item.SeriesMeasureVulues && item.SeriesMeasureVulues.length > 0) hasValue = true;
+    if (item.Values && item.Values.length > 0) hasValue = true;
   });
   return !hasValue;
 }
@@ -466,15 +480,15 @@ function buildDataSource(values, widget) {
   var data = [];
   if (!values || !values[0]) return data;
   var series = values[0];
-  data = series.SeriesMeasureVulues.map(function (e, index) {
+  data = series.Values.map(function (e, index) {
     var item = {
       value: e.Value,
       label: getTrimedLabelText(e.Label),
       id: {
         GroupById: e.GroupById,
-        MeasureFieldId: values[0].MeasureFieldId
+        MeasureFieldId: series.MeasureFieldId
       },
-      tooltext: buildToolTip(widget, null, series.Name),
+      tooltext: buildToolTip(widget, null, series.Name, null),
       color: getSeriesPositionColor(index + 1)
     };
     return item;
@@ -491,14 +505,14 @@ function buildDataSet(seriesMeasures, widget) {
   var dataSet = [];
   var seriesPosition = 1;
   seriesMeasures.forEach(function (seriesMeasure) {
-    var datas = seriesMeasure.SeriesMeasureVulues.map(function (e) {
+    var datas = seriesMeasure.Values.map(function (e) {
       return {
         value: e.Value,
         id: {
           GroupById: e.GroupById,
           MeasureFieldId: seriesMeasure.MeasureFieldId
         },
-        tooltext: buildToolTip(widget, e.Value, seriesMeasure.Name)
+        tooltext: buildToolTip(widget, e.Value, seriesMeasure.Name, null)
       };
     });
     var color = getSeriesPositionColor(seriesPosition);
@@ -517,8 +531,54 @@ function buildDataSet(seriesMeasures, widget) {
   return dataSet;
 }
 
-function buildCategories(seriesMeasures, widget) {
-  var categories = seriesMeasures[0].SeriesMeasureVulues.map(function (e) {
+function buildStackedDataSet(seriesMeasures, widget) {
+  var dataSet = [];
+  var seriesPosition = 1;
+  var series = seriesMeasures[0];
+  var uniqueGroups = [];
+  series.Values.forEach(function (element) {
+    if (!uniqueGroups.find(function (x) {
+      return x.code == element.GroupByIdSec;
+    })) uniqueGroups.push({
+      code: element.GroupByIdSec,
+      label: element.LabelSec
+    });
+  });
+  uniqueGroups.forEach(function (group) {
+    var color = getSeriesPositionColor(seriesPosition);
+    dataSet.push({
+      seriesName: group.label,
+      color: color,
+      data: buildStackedGroupData(group, series, widget)
+    });
+    seriesPosition++;
+  });
+  return dataSet;
+}
+
+function buildStackedGroupData(secGroup, series, widget) {
+  var uniqueGroups = getUniqueGroupOrderdList(series);
+  var data = [];
+  uniqueGroups.forEach(function (group) {
+    var _series$Values$find;
+
+    data.push({
+      value: (_series$Values$find = series.Values.find(function (x) {
+        return x.GroupById == group.code && x.GroupByIdSec == secGroup.code;
+      })) === null || _series$Values$find === void 0 ? void 0 : _series$Values$find.Value,
+      id: {
+        GroupById: group.code,
+        MeasureFieldId: series.MeasureFieldId,
+        GroupByIdSec: secGroup.code
+      },
+      tooltext: buildToolTip(widget, null, series.Name, group.label + " - " + secGroup.label)
+    });
+  });
+  return data;
+}
+
+function buildCategories(seriesMeasures) {
+  var categories = seriesMeasures[0].Values.map(function (e) {
     return {
       label: e.Label
     };
@@ -530,12 +590,40 @@ function buildCategories(seriesMeasures, widget) {
   return result;
 }
 
+function buildStackedCategories(seriesMeasures, widget) {
+  var uniqueGroups = getUniqueGroupOrderdList(seriesMeasures[0]);
+  var categories = uniqueGroups.map(function (e) {
+    return {
+      label: e.label
+    };
+  });
+  var result = [];
+  result.push({
+    category: categories
+  });
+  return result;
+}
+
+function getUniqueGroupOrderdList(series) {
+  var uniqueGroups = [];
+  series.Values.forEach(function (element) {
+    if (!uniqueGroups.find(function (x) {
+      return x.code == element.GroupById;
+    })) uniqueGroups.push({
+      code: element.GroupById,
+      label: element.Label
+    });
+  });
+  return uniqueGroups;
+}
+
 var defautFontSize = "10";
 var defautFont = "Manrope";
 function BuildFusionChartObject(seriesMeasures, widget) {
   switch (widget === null || widget === void 0 ? void 0 : widget.TypeCode) {
     case 'bar':
-      return getBarObject(seriesMeasures, widget);
+      if (!widget.SecondaryGroupById) return getBarObject(seriesMeasures, widget);
+      return getStackedBarObject(seriesMeasures, widget);
 
     case 'line':
       return getLineObject(seriesMeasures, widget);
@@ -573,6 +661,26 @@ function getBarObject(seriesMeasures, widget) {
   return chart;
 }
 
+function getStackedBarObject(seriesMeasures, widget) {
+  var chart = getDefaultChartobject();
+  chart.type = "scrollstackedbar2d";
+  var chartInfo = getDefaultChartInfo();
+  chartInfo.scrollHeight = "5";
+  chartInfo.scrollWidth = "5";
+  chartInfo.scrollPadding = "8";
+  chartInfo.flatScrollBars = "1";
+  chartInfo.showPercentValues = "1";
+  chartInfo.showLegend = (seriesMeasures === null || seriesMeasures === void 0 ? void 0 : seriesMeasures.length) > 1 ? "1" : "0";
+  chartInfo.legendItemFont = defautFont;
+  chartInfo.legendItemFontSize = defautFontSize;
+  setLineDash(chartInfo);
+  chartInfo.chartTopMargin = "10";
+  chartInfo.chartBottomMargin = "10";
+  chartInfo.showLegend = "1";
+  chart.dataSource = getStackedDataSource(chartInfo, seriesMeasures, widget);
+  return chart;
+}
+
 function getLineObject(seriesMeasures, widget) {
   var chart = getDefaultChartobject();
   chart.type = "scrollline2d";
@@ -740,7 +848,8 @@ var FusionChart = function FusionChart(props) {
     props.onSelectDataPoint({
       GroupById: dataObj.id.groupbyid,
       MeasureFieldId: dataObj.id.measurefieldid,
-      Widget: widget.current
+      Widget: widget.current,
+      GroupByIdSec: dataObj.id.groupbyidsec
     });
   };
 
@@ -789,7 +898,7 @@ var FusionChart = function FusionChart(props) {
 };
 
 var WidgetCard = function WidgetCard(props, state) {
-  var _widget$current2, _widget$current3, _widget$current4;
+  var _widget$current2, _widget$current3;
 
   var moreBtnToggle = React.useRef(null);
   var widget = React.useRef();
@@ -878,17 +987,14 @@ var WidgetCard = function WidgetCard(props, state) {
   }, React__default.createElement("div", {
     className: "dl-line"
   })), React__default.createElement("div", {
-    className: "dl-dashboard-widget",
-    style: {
-      marginTop: ((_widget$current4 = widget.current) === null || _widget$current4 === void 0 ? void 0 : _widget$current4.TypeCode) == 'kpi' ? '0' : '10px'
-    }
+    className: "dl-dashboard-widget"
   }, " ", GetChartComponent(), " "));
 
   function GetChartComponent() {
-    var _widget$current5, _widget$current6;
+    var _widget$current4, _widget$current5;
 
-    if (isLoading || !((_widget$current5 = widget.current) !== null && _widget$current5 !== void 0 && _widget$current5.TypeCode)) return null;
-    if (((_widget$current6 = widget.current) === null || _widget$current6 === void 0 ? void 0 : _widget$current6.TypeCode) == "kpi") return React__default.createElement(CustomChart, {
+    if (isLoading || !((_widget$current4 = widget.current) !== null && _widget$current4 !== void 0 && _widget$current4.TypeCode)) return null;
+    if (((_widget$current5 = widget.current) === null || _widget$current5 === void 0 ? void 0 : _widget$current5.TypeCode) == "kpi") return React__default.createElement(CustomChart, {
       dataBinding: props.dataBinding,
       widget: widget.current,
       widgetRef: props.widgetRef,