logitude-dashboard-library 1.4.37 → 1.4.39

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

@@ -1,10 +1,15 @@
 import { ChartObject } from "fusioncharts";
 import { ReactWidgetPM } from "../../../../types/widget";
+import { ChartInfo } from "./FusionChartObjectHelper";
 export declare class FusionChartHelper {
     private chart;
     private widget;
     private pieRadius;
+    private legendWidth;
     constructor(widget: ReactWidgetPM, chart: ChartObject);
     getPieRadius(): number;
+    getLegendWidth(): string;
     trimChartLabels(chartWidth: number, chartHeight: number): void;
+    handlePieRadius(chartHeight: number, chartInfo: ChartInfo): void;
+    handleLegendWidth(chartWidth: number, chartHeight: number, chartInfo: ChartInfo): void;
 }

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

@@ -35,6 +35,7 @@ export interface ChartInfo {
     plottooltext: string;
     anchorradius: string;
     canvasBottomPadding: string;
+    canvasTopPadding: string;
     labelDisplay: string;
     slantLabel: string;
     manageLabelOverflow: string;
@@ -45,6 +46,16 @@ export interface ChartInfo {
     baseFontColor: string;
     legendCaptionFontColor: string;
     labelFontColor: string;
+    plotColorinTooltip: string;
+    showLabels: string;
+    legendPosition: string;
+    legendScrollBgColor: string;
+    legendIconScale: number;
+    scrollShowButtons: string;
+    legendCaptionAlignment: string;
+    legendWidth: string;
+    alignLegendWithCanvas: string;
+    centerLabelBold: string;
 }
 export declare function getSeriesPositionColor(position: number): string | null;
 export declare function getSeriesHoverPositionColor(position: number): string | null;

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, label: any): string;
+export declare function buildToolTip(widget: ReactWidgetPM, value: any, seriesName: string, label: any, index: number): string;

package/dist/index.js

@@ -426,8 +426,9 @@ function getSeriesPositionColor(position) {
   }
 }
 
-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 buildToolTip(widget, value, seriesName, label, index) {
+  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; 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) {
@@ -506,7 +507,7 @@ function buildDataSource(values, widget) {
         GroupById: e.GroupById,
         MeasureFieldId: series.MeasureFieldId
       },
-      tooltext: buildToolTip(widget, null, series.Name, e.Label),
+      tooltext: buildToolTip(widget, null, series.Name, e.Label, 0),
       color: getSeriesPositionColor(index + 1)
     };
     return item;
@@ -518,14 +519,14 @@ function buildDataSet(seriesMeasures, widget) {
   var dataSet = [];
   var seriesPosition = 1;
   seriesMeasures.forEach(function (seriesMeasure) {
-    var datas = seriesMeasure.Values.map(function (e) {
+    var datas = seriesMeasure.Values.map(function (e, index) {
       return {
         value: e.Value,
         id: {
           GroupById: e.GroupById,
           MeasureFieldId: seriesMeasure.MeasureFieldId
         },
-        tooltext: buildToolTip(widget, e.Value, seriesMeasure.Name, null)
+        tooltext: buildToolTip(widget, e.Value, seriesMeasure.Name, null, index)
       };
     });
     var color = getSeriesPositionColor(seriesPosition);
@@ -584,7 +585,7 @@ function buildStackedGroupData(secGroup, series, widget) {
         MeasureFieldId: series.MeasureFieldId,
         GroupByIdSec: secGroup.code
       },
-      tooltext: buildToolTip(widget, null, series.Name, group.label + " - " + secGroup.label)
+      tooltext: buildToolTip(widget, null, series.Name, group.label + " - " + secGroup.label, 0)
     });
   });
   return data;
@@ -664,8 +665,6 @@ function getBarObject(seriesMeasures, widget) {
   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";
@@ -681,8 +680,6 @@ function getStackedBarObject(seriesMeasures, widget) {
   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";
@@ -699,8 +696,6 @@ function getLineObject(seriesMeasures, widget) {
   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 = "20";
   chartInfo.chartBottomMargin = "10";
@@ -708,6 +703,7 @@ function getLineObject(seriesMeasures, widget) {
   chartInfo.chartRightMargin = "50";
   chartInfo.anchorradius = "5";
   chartInfo.canvasBottomPadding = "10";
+  chartInfo.canvasTopPadding = "10";
   chart.dataSource = getCategoriesBasedDataSource(chartInfo, seriesMeasures, widget);
   return chart;
 }
@@ -716,17 +712,12 @@ function getDonutObject(seriesMeasures, widget) {
   var chart = getDefaultChartobject();
   chart.type = "doughnut2d";
   var chartInfo = getDefaultChartInfo();
-  chartInfo.showPercentValues = "0";
-  chartInfo.showValues = "0";
-  chartInfo.showLegend = "0";
-  chartInfo.legendCaptionFontSize = defautFontSize;
-  chartInfo.legendCaptionFont = defautFont;
   chartInfo.labelFontSize = defautFontSize;
   chartInfo.labelFont = defautFont;
   chartInfo.manageLabelOverflow = "1";
   chartInfo.useEllipsesWhenOverflow = "1";
   chartInfo.enableSmartLabels = "1";
-  chartInfo.pieRadius = "70%";
+  setPieDonutLegends(chartInfo, widget);
   chart.dataSource = getSimpleDataSource(chartInfo, seriesMeasures, widget);
   return chart;
 }
@@ -735,17 +726,12 @@ function getPieObject(seriesMeasures, widget) {
   var chart = getDefaultChartobject();
   chart.type = "pie2d";
   var chartInfo = getDefaultChartInfo();
-  chartInfo.showPercentValues = "0";
-  chartInfo.showValues = "0";
-  chartInfo.showLegend = "0";
-  chartInfo.legendCaptionFontSize = defautFontSize;
-  chartInfo.legendCaptionFont = defautFont;
   chartInfo.labelFontSize = defautFontSize;
   chartInfo.labelFont = defautFont;
   chartInfo.manageLabelOverflow = "1";
   chartInfo.useEllipsesWhenOverflow = "1";
   chartInfo.enableSmartLabels = "1";
-  chartInfo.pieRadius = "70%";
+  setPieDonutLegends(chartInfo, widget);
   chart.dataSource = getSimpleDataSource(chartInfo, seriesMeasures, widget);
   return chart;
 }
@@ -758,8 +744,6 @@ function getColumnObject(seriesMeasures, widget) {
   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 = "20";
   chartInfo.chartBottomMargin = "10";
@@ -800,6 +784,8 @@ function getDefaultChartInfo(widget) {
   chart.labelFontSize = defautFontSize;
   chart.labelFontColor = defautColor;
   chart.labelFont = defautFont;
+  chart.legendItemFont = defautFont;
+  chart.legendItemFontSize = defautFontSize;
   chart.enableSlicing = "0";
   chart.enableRotation = "0";
   chart.chartTopMargin = "10";
@@ -810,9 +796,36 @@ function getDefaultChartInfo(widget) {
   chart.showToolTipShadow = "1";
   chart.scrollHeight = "6";
   chart.scrollWidth = "6";
+  chart.plotColorinTooltip = "0";
   return chart;
 }
 
+function setPieDonutLegends(chart, widget) {
+  chart.showValues = "0";
+  chart.showLabels = widget.LabelsPosition == 'InLegend' ? '0' : '1';
+  chart.showLegend = widget.LabelsPosition == 'InLegend' ? '1' : '0';
+  setOnChartLegend(chart, widget);
+  setChartInLegend(chart, widget);
+}
+
+function setOnChartLegend(chart, widget) {
+  if (widget.LabelsPosition != 'InLegend') return;
+  chart.legendPosition = "right";
+  chart.legendScrollBgColor = "#ffffff";
+  chart.legendIconScale = 0.75;
+  chart.scrollShowButtons = "0";
+  chart.scrollShowButtons = "0";
+  chart.legendCaptionAlignment = "right";
+  chart.alignLegendWithCanvas = "1";
+  chart.showPercentValues = "0";
+  chart.chartRightMargin = "20";
+}
+
+function setChartInLegend(chart, widget) {
+  if (widget.LabelsPosition == 'InLegend') return;
+  chart.pieRadius = "70%";
+}
+
 var FusionChartHelper = /*#__PURE__*/function () {
   function FusionChartHelper(widget, chart) {
     this.chart = chart;
@@ -825,17 +838,25 @@ var FusionChartHelper = /*#__PURE__*/function () {
     return this.pieRadius;
   };
 
+  _proto.getLegendWidth = function getLegendWidth() {
+    return this.legendWidth;
+  };
+
   _proto.trimChartLabels = function trimChartLabels(chartWidth, chartHeight) {
     var _this$chart;
 
     if (!this.widget || this.widget.TypeCode != "pie" && this.widget.TypeCode != "donut") return;
     if (!this.chart) return;
-    var chartMinumunHeight = 236;
-    var startPercantage = 70;
-    var stepHeight = 60;
     var dataSource = (_this$chart = this.chart) === null || _this$chart === void 0 ? void 0 : _this$chart.dataSource;
     if (!dataSource) return;
     var chartInfo = dataSource.chart;
+    if (this.widget.LabelsPosition == 'InLegend') this.handleLegendWidth(chartWidth, chartHeight, chartInfo);else this.handlePieRadius(chartHeight, chartInfo);
+  };
+
+  _proto.handlePieRadius = function handlePieRadius(chartHeight, chartInfo) {
+    var chartMinumunHeight = 236;
+    var startPercantage = 70;
+    var stepHeight = 60;
     var step = Math.floor((chartHeight - chartMinumunHeight) / stepHeight);
     if (step < 0) step = 0;
     var pieRadius = startPercantage - step * 10;
@@ -854,6 +875,13 @@ var FusionChartHelper = /*#__PURE__*/function () {
     chartInfo.pieRadius = pieRadius + "%";
   };
 
+  _proto.handleLegendWidth = function handleLegendWidth(chartWidth, chartHeight, chartInfo) {
+    if (chartWidth < 730) chartInfo.legendWidth = "200";
+    if (chartWidth >= 730) chartInfo.legendWidth = "400";
+    if (chartWidth >= 1000) chartInfo.legendWidth = "500";
+    this.legendWidth = chartInfo.legendWidth;
+  };
+
   return FusionChartHelper;
 }();
 
@@ -919,11 +947,13 @@ var FusionChart = React.forwardRef(function (props, comRef) {
 
     if (!widget || ((_widget$current = widget.current) === null || _widget$current === void 0 ? void 0 : _widget$current.TypeCode) != "pie" && ((_widget$current2 = widget.current) === null || _widget$current2 === void 0 ? void 0 : _widget$current2.TypeCode) != "donut") return;
     setTimeout(function () {
-      var _fusionChartHelper$cu, _fusionChartHelper$cu2, _fusionRef$current, _fusionRef$current2, _fusionChartHelper$cu3;
+      var _fusionChartHelper$cu, _fusionChartHelper$cu2, _fusionChartHelper$cu3, _fusionRef$current, _fusionRef$current2, _widget$current3, _fusionChartHelper$cu4, _widget$current4, _fusionChartHelper$cu5;
 
       var oldPieRadius = fusionChartHelper === null || fusionChartHelper === void 0 ? void 0 : (_fusionChartHelper$cu = fusionChartHelper.current) === null || _fusionChartHelper$cu === void 0 ? void 0 : _fusionChartHelper$cu.getPieRadius();
-      fusionChartHelper === null || fusionChartHelper === void 0 ? void 0 : (_fusionChartHelper$cu2 = fusionChartHelper.current) === null || _fusionChartHelper$cu2 === void 0 ? void 0 : _fusionChartHelper$cu2.trimChartLabels(fusionRef === null || fusionRef === void 0 ? void 0 : (_fusionRef$current = fusionRef.current) === null || _fusionRef$current === void 0 ? void 0 : _fusionRef$current.offsetWidth, fusionRef === null || fusionRef === void 0 ? void 0 : (_fusionRef$current2 = fusionRef.current) === null || _fusionRef$current2 === void 0 ? void 0 : _fusionRef$current2.offsetHeight);
-      if (oldPieRadius == (fusionChartHelper === null || fusionChartHelper === void 0 ? void 0 : (_fusionChartHelper$cu3 = fusionChartHelper.current) === null || _fusionChartHelper$cu3 === void 0 ? void 0 : _fusionChartHelper$cu3.getPieRadius())) return;
+      var oldLegendWidth = fusionChartHelper === null || fusionChartHelper === void 0 ? void 0 : (_fusionChartHelper$cu2 = fusionChartHelper.current) === null || _fusionChartHelper$cu2 === void 0 ? void 0 : _fusionChartHelper$cu2.getLegendWidth();
+      fusionChartHelper === null || fusionChartHelper === void 0 ? void 0 : (_fusionChartHelper$cu3 = fusionChartHelper.current) === null || _fusionChartHelper$cu3 === void 0 ? void 0 : _fusionChartHelper$cu3.trimChartLabels(fusionRef === null || fusionRef === void 0 ? void 0 : (_fusionRef$current = fusionRef.current) === null || _fusionRef$current === void 0 ? void 0 : _fusionRef$current.offsetWidth, fusionRef === null || fusionRef === void 0 ? void 0 : (_fusionRef$current2 = fusionRef.current) === null || _fusionRef$current2 === void 0 ? void 0 : _fusionRef$current2.offsetHeight);
+      if (((_widget$current3 = widget.current) === null || _widget$current3 === void 0 ? void 0 : _widget$current3.LabelsPosition) != 'InLegend' && oldPieRadius == (fusionChartHelper === null || fusionChartHelper === void 0 ? void 0 : (_fusionChartHelper$cu4 = fusionChartHelper.current) === null || _fusionChartHelper$cu4 === void 0 ? void 0 : _fusionChartHelper$cu4.getPieRadius())) return;
+      if (((_widget$current4 = widget.current) === null || _widget$current4 === void 0 ? void 0 : _widget$current4.LabelsPosition) == 'InLegend' && oldLegendWidth == (fusionChartHelper === null || fusionChartHelper === void 0 ? void 0 : (_fusionChartHelper$cu5 = fusionChartHelper.current) === null || _fusionChartHelper$cu5 === void 0 ? void 0 : _fusionChartHelper$cu5.getLegendWidth())) return;
       setDataLoaded(false);
       setTimeout(function () {
         setDataLoaded(true);