logitude-dashboard-library 1.4.22 → 1.4.24

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

@@ -123,6 +123,7 @@ $dark-grey: #717585;
     grid-row-gap: 10px;
     height: fit-content;
     padding: 10px;
+    padding-top: 0;
 
     >div {
         box-sizing: border-box;
@@ -136,7 +137,7 @@ $dark-grey: #717585;
 
     .react-grid-layout {
         position: absolute;
-        top: 0;
+        top: -10px;
         width: 100%;
     }
 }
@@ -439,6 +440,19 @@ $dark-grey: #717585;
     font-family: 'Manrope' !important;
     font-size: 10px !important;
 }
+.db-fc-container text {
+    font-family: 'Manrope' !important;
+    font-size: 10px !important;
+}
+.db-fc-container tspan {
+    font-family: 'Manrope' !important;
+    font-size: 10px !important;
+}
+
+.db-fc-container * {
+    font-family: 'Manrope' !important;
+    font-size: 10px !important;
+}
 
 .db-fc-container>*:first-child {
     width: 100%;

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

@@ -0,0 +1,12 @@
+import { ChartObject } from "fusioncharts";
+import { ReactWidgetPM } from "../../../../types/widget";
+export declare class FusionChartHelper {
+    private chart;
+    private dataSource;
+    private widget;
+    constructor(widget: ReactWidgetPM, chart: ChartObject);
+    trimChartLabels(chartWidth: number, chartHeight: number): void;
+    private getTrimedLabelText;
+    private trimString;
+    private numberBetween;
+}

package/dist/index.js

@@ -483,7 +483,7 @@ function buildDataSource(values, widget) {
   data = series.Values.map(function (e, index) {
     var item = {
       value: e.Value,
-      label: getTrimedLabelText(e.Label),
+      label: e.Label,
       id: {
         GroupById: e.GroupById,
         MeasureFieldId: series.MeasureFieldId
@@ -496,11 +496,6 @@ function buildDataSource(values, widget) {
   return data;
 }
 
-function getTrimedLabelText(label) {
-  if (!label || label.length <= 20) return label;
-  return label.substring(0, 17) + "...";
-}
-
 function buildDataSet(seriesMeasures, widget) {
   var dataSet = [];
   var seriesPosition = 1;
@@ -794,6 +789,62 @@ function getDefaultChartInfo(widget) {
   return chart;
 }
 
+function deepClone(obj) {
+  return JSON.parse(JSON.stringify(obj));
+}
+
+var FusionChartHelper = /*#__PURE__*/function () {
+  function FusionChartHelper(widget, chart) {
+    this.chart = chart;
+    this.widget = widget;
+    this.dataSource = deepClone(chart.dataSource);
+  }
+
+  var _proto = FusionChartHelper.prototype;
+
+  _proto.trimChartLabels = function trimChartLabels(chartWidth, chartHeight) {
+    var _this = this;
+
+    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;
+  };
+
+  _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;
+    }
+
+    return this.trimString(label, charCount);
+  };
+
+  _proto.trimString = function trimString(label, charCount) {
+    if (label.length <= charCount) return label;
+    if (charCount > label.length) return label;
+    return label.substring(0, charCount - 2) + "..";
+  };
+
+  _proto.numberBetween = function numberBetween(input, small, large) {
+    return input <= large && input >= small;
+  };
+
+  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==',
@@ -820,6 +871,9 @@ var FusionChart = function FusionChart(props) {
       setFchart = _useState4[1];
 
   var id = (Math.random() + 1).toString(36).substring(7);
+  var entered = React.useRef(false);
+  var progressRef = React.useRef(null);
+  var fusionChartHelper = React.useRef();
   React.useEffect(function () {
     widget.current = props.widget;
     setTimeout(function () {
@@ -834,10 +888,7 @@ var FusionChart = function FusionChart(props) {
 
     postWidget.onChange = undefined;
     dashboardAnalyticsService.getData(postWidget).then(function (result) {
-      var chart = BuildFusionChartObject(result.data, widget.current);
-      setArgs(chart);
-      console.log(chart);
-      setDataLoaded(true);
+      handleData(result);
     }, function (error) {
       var _error$response, _error$response$data, _error$response2, _error$response2$data;
 
@@ -847,6 +898,16 @@ var FusionChart = function FusionChart(props) {
     });
   };
 
+  var handleData = function handleData(result) {
+    var _progressRef$current, _progressRef$current2;
+
+    var chart = BuildFusionChartObject(result.data, widget.current);
+    fusionChartHelper.current = new FusionChartHelper(widget.current, chart);
+    fusionChartHelper === null || fusionChartHelper === void 0 ? void 0 : fusionChartHelper.current.trimChartLabels(progressRef === null || progressRef === void 0 ? void 0 : (_progressRef$current = progressRef.current) === null || _progressRef$current === void 0 ? void 0 : _progressRef$current.offsetWidth, progressRef === null || progressRef === void 0 ? void 0 : (_progressRef$current2 = progressRef.current) === null || _progressRef$current2 === void 0 ? void 0 : _progressRef$current2.offsetHeight);
+    setArgs(chart);
+    setDataLoaded(true);
+  };
+
   var dataplotClick = function dataplotClick(eventObj, dataObj) {
     props.onSelectDataPoint({
       GroupById: dataObj.id.groupbyid,
@@ -862,14 +923,25 @@ var FusionChart = function FusionChart(props) {
 
   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);
     }
   }),
       ref = _useResizeObserver.ref;
 
   return !dataLoaded ? React__default.createElement("div", {
+    ref: progressRef,
     className: 'dl-full-hight dl-flex-content-center spinner-custome'
   }, React__default.createElement(progressspinner.ProgressSpinner, {
     style: {
@@ -1012,10 +1084,6 @@ var WidgetCard = function WidgetCard(props, state) {
   }
 };
 
-function deepClone(obj) {
-  return JSON.parse(JSON.stringify(obj));
-}
-
 var ResponsiveReactGridLayout = reactGridLayout.WidthProvider(reactGridLayout.Responsive);
 
 var DashboardDesigner = function DashboardDesigner(props) {