logitude-dashboard-library 1.4.63 → 1.4.65

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

@@ -275,7 +275,8 @@ $dark-grey: #717585;
         display: flex;
         flex-wrap: wrap;
         width: calc(100% - 70px);
-        padding: 0px 12px 12px 12px;
+        padding: 0px 12px 6px 12px;
+        min-height: 28px;
 
         .title-container {
             display: flex;
@@ -292,7 +293,8 @@ $dark-grey: #717585;
                 font-family: 'Manrope', sans-serif;
                 font-style: normal;
                 color: #292D30;
-                padding-top: 12px;
+                padding-top: 6px;
+                line-height: 100%;
                 margin-top: 0;
                 margin-bottom: 0;
                 font-size: 12px;
@@ -308,7 +310,8 @@ $dark-grey: #717585;
             font-family: 'Manrope', sans-serif;
             font-style: normal;
             color: #292D30;
-            margin-top: 4px;
+            margin-top: 2px;
+            line-height: 100%;
             font-size: 12px;
             font-weight: 600;
             white-space: nowrap;
@@ -336,6 +339,14 @@ $dark-grey: #717585;
     }
 }
 
+.kpi-custom-size {
+    -webkit-transform: scale(0.7);
+    -ms-transform: scale(0.7);
+    -o-transform: scale(0.7);
+    transform: scale(0.7);
+    margin-top: -4px;
+}
+
 .margin-top-6 {
     margin-top: 6px;
 }
@@ -467,6 +478,9 @@ $dark-grey: #717585;
 
 
 .dl-kpi-container-click {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     width: 100%;
     height: 100%;
     cursor: pointer;
@@ -484,12 +498,12 @@ $dark-grey: #717585;
     margin-left: 12px;
     margin-right: 12px;
     max-width: calc(100% - 24px);
-    height: 68px;
+    height: 100%;
     flex-direction: column;
     box-sizing: border-box;
     display: flex;
-    place-content: flex-start center;
     align-items: center;
+    justify-content: center;
 }
 
 .dl-kpi-center-container {
@@ -511,10 +525,7 @@ $dark-grey: #717585;
 }
 
 .dl-kpi-label-container{
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+    line-height: 100%;
 }
 
 .dl-kpi-label-span{
@@ -729,4 +740,8 @@ $dark-grey: #717585;
     width: 100%;
     height: 100%;
     min-height: 25px;
+}
+
+.db-justify-content-flex-start {
+    justify-content: flex-start;
 }

package/dist/features/Dashboard/ChartsComponents/CustomCharts/CustomChart.d.ts

@@ -6,6 +6,7 @@ export declare type CustomChartProps = {
     widget: ReactWidgetPM | undefined;
     widgetRef: ReactWidgetPM | undefined;
     dataBinding: DashboardDataBinding;
+    isPreviewModeActive?: boolean;
     onSelectDataPoint: (dataPointSelection: DataPointSelection) => void;
 };
 declare const CustomChart: (props: CustomChartProps) => React.JSX.Element;

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

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

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

@@ -12,6 +12,7 @@ declare type WidgetCardProps = {
     dateFilter: any;
     dataBinding: DashboardDataBinding;
     isInEditMode: boolean;
+    isPreviewModeActive?: boolean;
     onSelectDataPoint: (dataPointSelection: DataPointSelection) => void;
 };
 declare const WidgetCard: React.ForwardRefExoticComponent<WidgetCardProps & React.RefAttributes<unknown>>;

package/dist/index.js

@@ -245,8 +245,12 @@ var getLabelFormatByDateGroupType = function getLabelFormatByDateGroupType(label
   }
 };
 
+var isNullOrUndefined = function isNullOrUndefined(val) {
+  return val == null || val == undefined;
+};
+
 var KpiChart = function KpiChart(props) {
-  var _widget$current4;
+  var _widget$current8;
   var _useState = React.useState(false),
     dataLoaded = _useState[0],
     setDataLoaded = _useState[1];
@@ -257,13 +261,25 @@ var KpiChart = function KpiChart(props) {
   var _useState3 = React.useState(),
     data = _useState3[0],
     setData = _useState3[1];
+  var _useState4 = React.useState(false),
+    isKPICustomSizeNeeded = _useState4[0],
+    setIsKPICustomSizeNeeded = _useState4[1];
   React.useEffect(function () {
     widget.current = props.customChartProps.widget;
+    HandleKPICustomSize();
     setDataLoaded(false);
     setTimeout(function () {
       RefreshData();
     }, 500);
   }, []);
+  React.useEffect(function () {
+    HandleKPICustomSize();
+  }, [props.customChartProps]);
+  var HandleKPICustomSize = function HandleKPICustomSize() {
+    var _isPreviewModeActive = props.customChartProps && props.customChartProps.isPreviewModeActive;
+    var _isKPICustomResizeNeeded = isKPICustomResizeNeeded();
+    setIsKPICustomSizeNeeded(_isKPICustomResizeNeeded && !_isPreviewModeActive);
+  };
   var RefreshData = function RefreshData() {
     if (Session.Tenant == 0) {
       var emptyData = {};
@@ -378,6 +394,18 @@ var KpiChart = function KpiChart(props) {
       className: "dl-kpi-label-span dl-kpi-textTrimming"
     }, labelFormated));
   }
+  var getIsKPIHasSmallestHeight = function getIsKPIHasSmallestHeight() {
+    var _props$customChartPro, _props$customChartPro2;
+    return props.customChartProps.widgetRef && ((_props$customChartPro = props.customChartProps.widgetRef) === null || _props$customChartPro === void 0 ? void 0 : _props$customChartPro.Layout) && ((_props$customChartPro2 = props.customChartProps.widgetRef.Layout) === null || _props$customChartPro2 === void 0 ? void 0 : _props$customChartPro2.h) == 2;
+  };
+  var isKPICustomResizeNeeded = function isKPICustomResizeNeeded() {
+    var _widget$current4, _widget$current5, _widget$current6, _widget$current7;
+    if (!widget || !widget.current) return;
+    var isThereTitle = !isNullOrUndefined((_widget$current4 = widget.current) === null || _widget$current4 === void 0 ? void 0 : _widget$current4.Title) && ((_widget$current5 = widget.current) === null || _widget$current5 === void 0 ? void 0 : _widget$current5.Title.length) > 0;
+    var isThereSubTitle = !isNullOrUndefined((_widget$current6 = widget.current) === null || _widget$current6 === void 0 ? void 0 : _widget$current6.Subtitle) && ((_widget$current7 = widget.current) === null || _widget$current7 === void 0 ? void 0 : _widget$current7.Subtitle.length) > 0;
+    var isKPIHasSmallestHeight = getIsKPIHasSmallestHeight();
+    return isThereTitle && isThereSubTitle && isKPIHasSmallestHeight;
+  };
   return !dataLoaded ? React__default.createElement("div", {
     className: 'dl-full-hight dl-flex-content-center spinner-custome'
   }, React__default.createElement(progressspinner.ProgressSpinner, {
@@ -389,9 +417,9 @@ var KpiChart = function KpiChart(props) {
     animationDuration: "2s"
   })) : !error ? React__default.createElement("div", {
     onClick: kpiClick,
-    className: ((_widget$current4 = widget.current) === null || _widget$current4 === void 0 ? void 0 : _widget$current4.Alighnment) == "Left" ? "dl-kpi-container-click" : "dl-kpi-container-click dl-kpi-center-container"
+    className: ((_widget$current8 = widget.current) === null || _widget$current8 === void 0 ? void 0 : _widget$current8.Alighnment) == "Left" ? "dl-kpi-container-click db-justify-content-flex-start" : "dl-kpi-container-click"
   }, React__default.createElement("div", {
-    className: "dl-kpi-container"
+    className: isKPICustomSizeNeeded ? "dl-kpi-container kpi-custom-size" : "dl-kpi-container"
   }, getLabel(), getValueComponent(), getPreviousValueComponent())) : React__default.createElement("div", {
     className: "dl-flex-content-center dl-full-hight",
     style: {
@@ -468,9 +496,13 @@ function getTooltipValue(value) {
   if (value) return value;
   return '$dataValue';
 }
-function getMeasureType(seriesName) {
-  if (!seriesName) return "Count:";
-  return seriesName.replace(/ .*/, '') + ":";
+function getMeasureType(seriesMeasure) {
+  if (!seriesMeasure.Name) return "Count:";
+  if (seriesMeasure.MeasureCode == "Formula") {
+    var formula = JSON.parse(seriesMeasure.Formula);
+    return formula.Name;
+  }
+  return seriesMeasure.Name.replace(/ .*/, '') + ":";
 }
 
 function getCategoriesBasedDataSource(chartInfo, seriesMeasures, widget) {
@@ -528,7 +560,7 @@ function buildDataSource(values, widget) {
         MeasureCode: series.MeasureCode,
         Formula: series.Formula
       },
-      tooltext: buildToolTip(widget, null, series.Name, e.Label, 0),
+      tooltext: buildToolTip(widget, null, series, e.Label, 0),
       color: getSeriesPositionColor(index + 1)
     };
     return item;
@@ -548,7 +580,7 @@ function buildDataSet(seriesMeasures, widget) {
           MeasureCode: seriesMeasure.MeasureCode,
           Formula: seriesMeasure.Formula
         },
-        tooltext: buildToolTip(widget, e.Value, seriesMeasure.Name, null, index)
+        tooltext: buildToolTip(widget, e.Value, seriesMeasure, null, index)
       };
     });
     var color = getSeriesPositionColor(seriesPosition);
@@ -605,7 +637,7 @@ function buildStackedGroupData(secGroup, series, widget) {
         MeasureFieldId: series.MeasureFieldId,
         GroupByIdSec: secGroup.code
       },
-      tooltext: buildToolTip(widget, null, series.Name, group.label + " - " + secGroup.label, 0)
+      tooltext: buildToolTip(widget, null, series, group.label + " - " + secGroup.label, 0)
     });
   });
   return data;
@@ -1123,10 +1155,6 @@ var FusionChart = React.forwardRef(function (props, comRef) {
   }, error)));
 });
 
-var isNullOrUndefined = function isNullOrUndefined(val) {
-  return val == null || val == undefined;
-};
-
 var _path$1;
 function _extends$2() {
   _extends$2 = Object.assign ? Object.assign.bind() : function (target) {
@@ -1328,6 +1356,7 @@ var WidgetCard = React.forwardRef(function (props, comRef) {
     var _widget$current10, _widget$current11;
     if (isLoading || !((_widget$current10 = widget.current) !== null && _widget$current10 !== void 0 && _widget$current10.TypeCode)) return null;
     if (((_widget$current11 = widget.current) === null || _widget$current11 === void 0 ? void 0 : _widget$current11.TypeCode) == "kpi") return React__default.createElement(CustomChart, {
+      isPreviewModeActive: props.isPreviewModeActive,
       dataBinding: props.dataBinding,
       widget: widget.current,
       widgetRef: props.widgetRef,
@@ -1637,6 +1666,7 @@ var Dashboard = function Dashboard(props) {
     key: "widget-" + (previewWidget === null || previewWidget === void 0 ? void 0 : (_previewWidget$Layout = previewWidget.Layout) === null || _previewWidget$Layout === void 0 ? void 0 : _previewWidget$Layout.i)
   }, React.createElement(WidgetCard, {
     isInEditMode: isInEditMode,
+    isPreviewModeActive: isPreviewModeActive,
     key: previewWidget === null || previewWidget === void 0 ? void 0 : (_previewWidget$Layout2 = previewWidget.Layout) === null || _previewWidget$Layout2 === void 0 ? void 0 : _previewWidget$Layout2.i,
     widget: previewWidget,
     widgetRef: previewWidget,