logitude-dashboard-library 1.4.24 → 1.4.25

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

@@ -436,6 +436,11 @@ $dark-grey: #717585;
     height: calc(100% - 5px);
 }
 
+.db-fc-parent-container {
+    width: 100%;
+    height: calc(100% - 5px);
+}
+
 .db-fc-container text {
     font-family: 'Manrope' !important;
     font-size: 10px !important;

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import { DashboardDataBinding } from "../../../../types/DashboardDataBinding";
 import { DataPointSelection } from "../../../../types/SeriesMeasure";
 import { ReactWidgetPM } from "../../../../types/widget";
@@ -8,5 +8,5 @@ export declare type FusionChartProps = {
     dataBinding: DashboardDataBinding;
     onSelectDataPoint: (dataPointSelection: DataPointSelection) => void;
 };
-declare const FusionChart: (props: FusionChartProps) => JSX.Element;
+declare const FusionChart: React.ForwardRefExoticComponent<FusionChartProps & React.RefAttributes<unknown>>;
 export default FusionChart;

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

@@ -6,6 +6,7 @@ export declare class FusionChartHelper {
     private widget;
     constructor(widget: ReactWidgetPM, chart: ChartObject);
     trimChartLabels(chartWidth: number, chartHeight: number): void;
+    private IsInStep;
     private getTrimedLabelText;
     private trimString;
     private numberBetween;

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

@@ -37,6 +37,11 @@ export interface ChartInfo {
     canvasBottomPadding: string;
     labelDisplay: string;
     slantLabel: string;
+    manageLabelOverflow: string;
+    useEllipsesWhenOverflow: string;
+    enableSmartLabels: string;
+    pieRadius: string;
+    doughnutRadius: string;
 }
 export declare function getSeriesPositionColor(position: number): string | null;
 export declare function getSeriesHoverPositionColor(position: number): string | null;

package/dist/features/Dashboard/WidgetCard.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import { DataPointSelection } from "../../types/SeriesMeasure";
 import { ReactWidgetPM } from "../../types/widget";
 import { DashboardDataBinding } from '../../types/DashboardDataBinding';
@@ -13,5 +13,5 @@ declare type WidgetCardProps = {
     isInEditMode: boolean;
     onSelectDataPoint: (dataPointSelection: DataPointSelection) => void;
 };
-declare const WidgetCard: (props: WidgetCardProps, state: any) => JSX.Element;
+declare const WidgetCard: React.ForwardRefExoticComponent<WidgetCardProps & React.RefAttributes<unknown>>;
 export default WidgetCard;

package/dist/index.js

@@ -710,6 +710,10 @@ function getDonutObject(seriesMeasures, widget) {
   chartInfo.legendCaptionFont = defautFont;
   chartInfo.labelFontSize = defautFontSize;
   chartInfo.labelFont = defautFont;
+  chartInfo.manageLabelOverflow = "1";
+  chartInfo.useEllipsesWhenOverflow = "1";
+  chartInfo.enableSmartLabels = "1";
+  chartInfo.pieRadius = "70%";
   chart.dataSource = getSimpleDataSource(chartInfo, seriesMeasures, widget);
   return chart;
 }
@@ -725,6 +729,10 @@ function getPieObject(seriesMeasures, widget) {
   chartInfo.legendCaptionFont = defautFont;
   chartInfo.labelFontSize = defautFontSize;
   chartInfo.labelFont = defautFont;
+  chartInfo.manageLabelOverflow = "1";
+  chartInfo.useEllipsesWhenOverflow = "1";
+  chartInfo.enableSmartLabels = "1";
+  chartInfo.pieRadius = "70%";
   chart.dataSource = getSimpleDataSource(chartInfo, seriesMeasures, widget);
   return chart;
 }
@@ -803,29 +811,27 @@ var FusionChartHelper = /*#__PURE__*/function () {
   var _proto = FusionChartHelper.prototype;
 
   _proto.trimChartLabels = function trimChartLabels(chartWidth, chartHeight) {
-    var _this = this;
+    var _this$chart;
 
     if (!this.widget || this.widget.TypeCode != "pie" && this.widget.TypeCode != "donut") return;
     if (!this.chart || !this.dataSource) return;
-    var copyDataSource = deepClone(this.dataSource);
-    var data = copyDataSource === null || copyDataSource === void 0 ? void 0 : copyDataSource.data;
-    if (!data || data.length == 0) return;
-    data.forEach(function (dataItem) {
-      dataItem.label = _this.getTrimedLabelText(dataItem.label, chartWidth, chartHeight);
-    });
-    this.chart.dataSource = copyDataSource;
+    var chartMinumunHeight = 236;
+    var startPercantage = 80;
+    var stepHeight = 60;
+    var chartInfo = (_this$chart = this.chart) === null || _this$chart === void 0 ? void 0 : _this$chart.dataSource.chart;
+    var step = Math.floor((chartHeight - chartMinumunHeight) / stepHeight);
+    if (step < 0) step = 0;
+    var pieRadius = startPercantage - step * 10;
+    if (pieRadius < 60) pieRadius = 60;
+    chartInfo.pieRadius = pieRadius + "%";
   };
 
-  _proto.getTrimedLabelText = function getTrimedLabelText(label, chartWidth, chartHeight) {
-    if (!label) return label;
-    var charCount = chartWidth / 35;
-    var widthHeight = chartWidth / chartHeight;
-
-    if (WidthGreaterThanHeigh(widthHeight)) {
-      charCount = charCount + widthHeight * 3.5;
-    }
+  _proto.IsInStep = function IsInStep(chartHeight, chartMinumunHeight, stepHeight, staySafeValue, step) {
+    return chartHeight < chartMinumunHeight + stepHeight * step - staySafeValue;
+  };
 
-    return this.trimString(label, charCount);
+  _proto.getTrimedLabelText = function getTrimedLabelText(label, chartWidth, chartHeight) {
+    return label;
   };
 
   _proto.trimString = function trimString(label, charCount) {
@@ -841,17 +847,12 @@ var FusionChartHelper = /*#__PURE__*/function () {
   return FusionChartHelper;
 }();
 
-function WidthGreaterThanHeigh(widthHeight) {
-  return widthHeight > 2.5;
-}
-
 ReactFC.fcRoot(FusionCharts, Charts, FusionTheme);
 FusionCharts.options['license']({
   key: 'prD4C-8eiA7A3A3C7E6G4B4A3J4C7B2D3D2nyqE1C3fd1npaE4D4tlA-21D7E4F4F1F1E1F4F1A10A8C2C5F5E2F2D1hwqD1B5D1aG4A19A32twbC6D3G4lhJ-7A9C11A5B-13ddA2I3A1B9B3D7A2B4G2H3H1F-7smC8B2XB4cetB8A7A5mxD3SG4F2tvgB2A3B2E4C3I3C7B3A4A3A2D3D2G4J-7==',
   creditLabel: false
 });
-
-var FusionChart = function FusionChart(props) {
+var FusionChart = React.forwardRef(function (props, comRef) {
   var _useState = React.useState(false),
       dataLoaded = _useState[0],
       setDataLoaded = _useState[1];
@@ -866,13 +867,14 @@ var FusionChart = function FusionChart(props) {
       args = _useState3[0],
       setArgs = _useState3[1];
 
-  var _useState4 = React.useState({}),
+  var _useState4 = React.useState(),
       fChart = _useState4[0],
       setFchart = _useState4[1];
 
   var id = (Math.random() + 1).toString(36).substring(7);
   var entered = React.useRef(false);
   var progressRef = React.useRef(null);
+  var fusionRef = React.useRef(null);
   var fusionChartHelper = React.useRef();
   React.useEffect(function () {
     widget.current = props.widget;
@@ -880,6 +882,21 @@ var FusionChart = function FusionChart(props) {
       RefreshData();
     }, 500);
   }, []);
+  React.useImperativeHandle(comRef, function () {
+    return {
+      onResizeFinish: function onResizeFinish() {
+        setTimeout(function () {
+          var _fusionChartHelper$cu, _fusionRef$current, _fusionRef$current2;
+
+          fusionChartHelper === null || fusionChartHelper === void 0 ? void 0 : (_fusionChartHelper$cu = fusionChartHelper.current) === null || _fusionChartHelper$cu === void 0 ? void 0 : _fusionChartHelper$cu.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);
+          setDataLoaded(false);
+          setTimeout(function () {
+            setDataLoaded(true);
+          }, 100);
+        }, 100);
+      }
+    };
+  });
 
   var RefreshData = function RefreshData() {
     var dashboardAnalyticsService = new DashboardAnalyticsService();
@@ -921,21 +938,13 @@ var FusionChart = function FusionChart(props) {
     setFchart(chart);
   };
 
+  var drawComplete = function drawComplete(event) {};
+
   var _useResizeObserver = useResizeObserver({
     onResize: function onResize(_ref) {
-      var _fusionChartHelper$cu;
-
       var width = _ref.width,
           height = _ref.height;
-      fChart.resizeTo(width, height);
-
-      if (entered.current == false) {
-        entered.current = true;
-        return;
-      }
-
-      fusionChartHelper === null || fusionChartHelper === void 0 ? void 0 : (_fusionChartHelper$cu = fusionChartHelper.current) === null || _fusionChartHelper$cu === void 0 ? void 0 : _fusionChartHelper$cu.trimChartLabels(width, height);
-      setArgs(args);
+      fChart === null || fChart === void 0 ? void 0 : fChart.resizeTo(width, height);
     }
   }),
       ref = _useResizeObserver.ref;
@@ -951,13 +960,17 @@ var FusionChart = function FusionChart(props) {
     strokeWidth: "4",
     animationDuration: "2s"
   })) : !error ? React__default.createElement("div", {
+    className: 'db-fc-parent-container',
+    ref: fusionRef
+  }, " ", React__default.createElement("div", {
     className: 'db-fc-container',
     ref: ref,
     id: id
   }, React__default.createElement(ReactFC, Object.assign({}, args, {
     "fcEvent-dataplotClick": dataplotClick,
-    onRender: renderComplete
-  }))) : React__default.createElement("div", {
+    onRender: renderComplete,
+    "fcEvent-drawComplete": drawComplete
+  }))), " ") : React__default.createElement("div", {
     className: "dl-flex-content-center dl-full-hight",
     style: {
       width: '100%'
@@ -970,9 +983,9 @@ var FusionChart = function FusionChart(props) {
   }), React__default.createElement("span", {
     className: "dl-tooltiptext"
   }, error)));
-};
+});
 
-var WidgetCard = function WidgetCard(props, state) {
+var WidgetCard = React.forwardRef(function (props, comRef) {
   var _widget$current2, _widget$current3;
 
   var moreBtnToggle = React.useRef(null);
@@ -985,6 +998,8 @@ var WidgetCard = function WidgetCard(props, state) {
   var _useState2 = React.useState(false),
       showTooltip = _useState2[1];
 
+  var fusionChartRef = React.useRef(null);
+
   var editWidget = function editWidget() {
     var _moreBtnToggle$curren;
 
@@ -1005,6 +1020,15 @@ var WidgetCard = function WidgetCard(props, state) {
       setIsLoading(false);
     });
   }, []);
+  React.useImperativeHandle(comRef, function () {
+    return {
+      onResizeFinish: function onResizeFinish() {
+        var _fusionChartRef$curre;
+
+        fusionChartRef === null || fusionChartRef === void 0 ? void 0 : (_fusionChartRef$curre = fusionChartRef.current) === null || _fusionChartRef$curre === void 0 ? void 0 : _fusionChartRef$curre.onResizeFinish();
+      }
+    };
+  });
   return React__default.createElement("div", {
     className: "dl-panel",
     key: props.el.i,
@@ -1076,13 +1100,14 @@ var WidgetCard = function WidgetCard(props, state) {
       onSelectDataPoint: props.onSelectDataPoint
     });
     return React__default.createElement(FusionChart, {
+      ref: fusionChartRef,
       dataBinding: props.dataBinding,
       widget: widget.current,
       widgetRef: props.widgetRef,
       onSelectDataPoint: props.onSelectDataPoint
     });
   }
-};
+});
 
 var ResponsiveReactGridLayout = reactGridLayout.WidthProvider(reactGridLayout.Responsive);
 
@@ -1121,6 +1146,7 @@ var DashboardDesigner = function DashboardDesigner(props) {
 
   var gridLayoutComponent = React.useRef(null);
   var entered = React.useRef(false);
+  var widgetCardRef = React.useRef([]);
   React.useEffect(function () {
     FillLayout(props.Widgetlayouts);
   }, [props.Widgetlayouts]);
@@ -1170,6 +1196,14 @@ var DashboardDesigner = function DashboardDesigner(props) {
     props.onLayoutChange(changedLayouts);
   }
 
+  function onResizeStop(event, oldItem) {
+    var _widgetCardRef$curren, _widgetCardRef$curren2;
+
+    widgetCardRef === null || widgetCardRef === void 0 ? void 0 : (_widgetCardRef$curren = widgetCardRef.current) === null || _widgetCardRef$curren === void 0 ? void 0 : (_widgetCardRef$curren2 = _widgetCardRef$curren.find(function (x) {
+      return x.i == oldItem.i;
+    })) === null || _widgetCardRef$curren2 === void 0 ? void 0 : _widgetCardRef$curren2.ref.onResizeFinish(widgetsDictionaryRef.current[oldItem.i].key);
+  }
+
   function UpdateWidget(changedLayouts) {
     for (var _iterator2 = _createForOfIteratorHelperLoose(changedLayouts.lg), _step2; !(_step2 = _iterator2()).done;) {
       var item = _step2.value;
@@ -1245,8 +1279,9 @@ var DashboardDesigner = function DashboardDesigner(props) {
     isDraggable: isInEditMode,
     isResizable: isInEditMode,
     onWidthChange: function onWidthChange() {},
+    onResizeStop: onResizeStop,
     onLayoutChange: onLayoutChange
-  }), widgets.lg.map(function (widget) {
+  }), widgets.lg.map(function (widget, i) {
     var _widget$Layout, _widget$Layout2;
 
     return React__default.createElement("div", {
@@ -1261,7 +1296,15 @@ var DashboardDesigner = function DashboardDesigner(props) {
       dateFilter: dateFilter,
       editBtnClicked: editWidget,
       deleteBtnClicked: deletePanel,
-      onSelectDataPoint: props.onSelectDataPoint
+      onSelectDataPoint: props.onSelectDataPoint,
+      ref: function ref(el) {
+        var _widget$Layout3;
+
+        widgetCardRef.current[i] = {
+          ref: el,
+          i: (_widget$Layout3 = widget.Layout) === null || _widget$Layout3 === void 0 ? void 0 : _widget$Layout3.i
+        };
+      }
     }));
   }))))));
 };