logitude-dashboard-library 1.4.7 → 1.4.9

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

@@ -289,18 +289,24 @@ $dark-grey: #717585;
     background-color: lightblue;
 }
 
-.panel {
+.dl-panel {
     background: white !important;
     box-shadow: 0px 0px 3px 1px #6273842b;
     box-sizing: border-box;
     position: relative;
     height: 100%;
+    flex-direction: column;
+    box-sizing: border-box;
+    display: flex;
+    place-content: flex-start;
+    align-items: flex-start;
 
     header {
         display: flex;
         justify-content: space-between;
         align-items: center;
         position: unset;
+        width: 100%;
 
         i {
             font-size: 18px;
@@ -310,7 +316,6 @@ $dark-grey: #717585;
 
     h1 {
         text-transform: capitalize;
-        font-size: 15px;
         font-family: 'Manrope', sans-serif;
         font-style: normal;
         color: #292D30;
@@ -342,8 +347,13 @@ $dark-grey: #717585;
 
 
 .dl-dashboard-widget {
-    height: calc(100% - 60px);
-    box-sizing: border-box;
+    height: 100%;
+    width: 100%;
+    position: relative;
+    flex-direction: column;
+    display: flex;
+    place-content: flex-start;
+    align-items: flex-start;
 }
 
 
@@ -436,15 +446,23 @@ $dark-grey: #717585;
 }
 
 
-.kpIcontainer {
+.dl-kpi-container-click {
     width: 100%;
     height: 100%;
+    cursor: pointer;
+}
+
+.dl-kpi-container {
+    margin-left: 12px;
+    margin-right: 12px;
+}
+
+.dl-kpi-sub-container {
     flex-direction: row;
     box-sizing: border-box;
-    display: inline-block;
-    gap: 20px;
-    cursor: pointer;
-   
+    display: flex;
+    place-content: flex-end flex-start;
+    align-items: flex-end;
 }
 
 .kpIHeader {
@@ -456,6 +474,12 @@ $dark-grey: #717585;
 }
 
 .db-fc-container {
+    width: 100%;
+    height: calc(100% - 5px);
+    padding-top: 12px;
+}
+
+.db-fc-container>*:first-child {
     width: 100%;
     height: 100%;
 }
@@ -464,50 +488,59 @@ $dark-grey: #717585;
     border-top: 1px solid #E7E7E7;
     margin-left: 12px;
     margin-right: 12px;
-    margin-bottom: 12px;
+    position: relative;
 }
 
 .dl-kpi-arrow-pic {
-
     display: inline-block;
     vertical-align: middle;
     width: 0;
     height: 0;
 }
 
-.dl-kpi-arrow-up {
+.dl-kpi-arrow-up-green {
     border-left: 5px solid transparent;
     border-right: 5px solid transparent;
-    border-bottom: 4px solid #4AC76F;
+    border-bottom: 6px solid #4AC76F;
 }
 
-.dl-kpi-arrow-down {
+.dl-kpi-arrow-down-green {
     border-left: 5px solid transparent;
     border-right: 5px solid transparent;
-    border-top: 4px solid red;
+    border-top: 6px solid #4AC76F;
 }
 
-.dl-kpi-same-line {
-    display: flex;
-    flex-direction: row;
+.dl-kpi-arrow-up-red {
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    border-bottom: 6px solid red;
 }
 
-.dl-kpi-margin {
-    margin-right: 4px;
+.dl-kpi-arrow-down-red {
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    border-top: 6px solid red;
 }
 
-.dl-kpi-value{
-    height: 31px;
 
+.dl-kpi-arrow-container {
+    flex-direction: column;
+    box-sizing: border-box;
+    display: flex;
+    place-content: flex-start flex-end;
+    align-items: flex-start;
+    margin-bottom: 2px;
+}
+
+.dl-kpi-value {
     font-family: 'Manrope';
     font-style: normal;
     font-weight: 700;
     font-size: 26px;
     line-height: 120%;
     color: #292D30;
-    padding-left: 12px;
-    
 }
+
 .dl-kpi-unit {
     font-family: 'Manrope';
     font-style: normal;
@@ -515,27 +548,49 @@ $dark-grey: #717585;
     font-size: 20px;
     line-height: 125%;
     color: #292D30;
-    padding-left: 4px;
-    padding-top: 5px;
-    
+    margin-left: 4.5px;
+    margin-bottom: 2px;
 }
 
-.dl-kpi-ratio {
-    height: 15px;
+.dl-kpi-ratio-container {
+    flex-direction: row;
+    box-sizing: border-box;
+    display: flex;
+    place-content: flex-end flex-start;
+    align-items: flex-end;
     font-family: 'Manrope';
     font-style: normal;
     font-weight: 500;
     font-size: 11px;
     line-height: 15px;
-    text-align: right;
-
     color: #A4A4A4;
-    padding-left: 15px;
-    padding-top: 12px;
-    padding-right: 10px;
+    margin-left: 4.5px;
+    margin-bottom: 4px;
+    flex-shrink: 0;
 }
+
 .dl-kpi-textTrimming {
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
+}
+
+.dl-custom-chart-container {
+    position: relative;
+    height: 100%;
+    width: 100%;
+    flex-direction: column;
+    box-sizing: border-box;
+    display: flex;
+    place-content: flex-start;
+    align-items: flex-start;
+}
+
+.dl-kpi-prev-text {
+    font-family: 'Manrope';
+    font-style: normal;
+    font-weight: 600;
+    font-size: 11px;
+    line-height: 15px;
+    color: #292D30;
 }

package/dist/features/Dashboard/ChartsComponents/ApexChart.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ReactWidgetPM } from "../../../types/widget";
 import { DataPointSelection } from '../../../types/SeriesMeasure';
 import { ApexOptions } from "apexcharts";

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { DashboardDataBinding } from "../../../../types/DashboardDataBinding";
 import { DataPointSelection } from "../../../../types/SeriesMeasure";
 import { ReactWidgetPM } from "../../../../types/widget";

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { KpiChart } from "../../../../types/KpiChart";
 import { CustomChartProps } from "./CustomChart";
 declare type KpiChartProps = {

package/dist/features/Dashboard/ChartsComponents/FusionChartTest.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 declare function FusionChartTest(): JSX.Element;
 export default FusionChartTest;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { DashboardDataBinding } from "../../../../types/DashboardDataBinding";
 import { DataPointSelection } from "../../../../types/SeriesMeasure";
 import { ReactWidgetPM } from "../../../../types/widget";

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Layouts } from "react-grid-layout";
 import { ReactWidgetPM } from "../../types/widget";
 import { DataPointSelection } from "../../types/SeriesMeasure";

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { DataPointSelection } from "../../types/SeriesMeasure";
 import { ReactWidgetPM } from "../../types/widget";
 import { DashboardDataBinding } from '../../types/DashboardDataBinding';

package/dist/features/Dashboard/dashboard-dialog/dashboard-dialog-component.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare type DashboardDialogProps = {
     display: boolean;
     onClose: () => void;

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import "./styles.module.css";
 import { ReactWidgetPM } from './types/widget';
 import { DashboardDataBinding } from './types/DashboardDataBinding';

package/dist/index.js

@@ -202,6 +202,8 @@ var DashboardAnalyticsService = /*#__PURE__*/function () {
 }();
 
 var KpiChart = function KpiChart(props) {
+  var _widget$current9;
+
   var _useState = React.useState(false),
       dataLoaded = _useState[0],
       setDataLoaded = _useState[1];
@@ -216,16 +218,6 @@ var KpiChart = function KpiChart(props) {
       data = _useState3[0],
       setData = _useState3[1];
 
-  var _useState4 = React.useState(),
-      arrowColorDirection = _useState4[0],
-      setArrowColorDirection = _useState4[1];
-
-  var _useState5 = React.useState(false),
-      checkValuesValidity = _useState5[0],
-      setCheckValuesValidity = _useState5[1];
-
-  var _useState6 = React.useState(false),
-      setVisibilityUnit = _useState6[1];
   React.useEffect(function () {
     widget.current = props.customChartProps.widget;
     setDataLoaded(false);
@@ -243,9 +235,6 @@ var KpiChart = function KpiChart(props) {
     dashboardAnalyticsService.getKpiData(postWidget).then(function (result) {
       setData(result.data);
       setDataLoaded(true);
-      setTimeOverTimeImage(result.data);
-      checkValues(result.data);
-      checkUnitVisible(result.data);
     }, function (error) {
       var _error$response, _error$response$data, _error$response2, _error$response2$data;
 
@@ -266,35 +255,65 @@ var KpiChart = function KpiChart(props) {
     });
   };
 
-  var setTimeOverTimeImage = function setTimeOverTimeImage(data) {
+  function getRatioComponent() {
     var _widget$current3;
 
-    if (!(widget !== null && widget !== void 0 && (_widget$current3 = widget.current) !== null && _widget$current3 !== void 0 && _widget$current3.TimeOverTime)) return;
-    var ratio = data === null || data === void 0 ? void 0 : data.Ratio;
-    if (!ratio) return;
-    if (ratio >= 1) setArrowColorDirection(React__default.createElement("span", {
-      className: "dl-kpi-arrow-pic dl-kpi-arrow-up"
-    }));else if (ratio < 1) setArrowColorDirection(React__default.createElement("span", {
-      className: "dl-kpi-arrow-pic dl-kpi-arrow-down"
-    }));
-  };
-
-  var checkValues = function checkValues(data) {
-    var _widget$current4, _widget$current5;
+    if (!((_widget$current3 = widget.current) !== null && _widget$current3 !== void 0 && _widget$current3.TimeOverTime)) return null;
+    return React__default.createElement("div", {
+      className: "dl-kpi-ratio-container"
+    }, getArrowComponent(), React__default.createElement("div", {
+      style: {
+        marginLeft: "2px"
+      }
+    }, data === null || data === void 0 ? void 0 : data.Ratio, " %"));
+  }
 
-    setCheckValuesValidity(false);
-    if (!(widget !== null && widget !== void 0 && (_widget$current4 = widget.current) !== null && _widget$current4 !== void 0 && _widget$current4.TimeOverTime)) return;
-    if (widget !== null && widget !== void 0 && (_widget$current5 = widget.current) !== null && _widget$current5 !== void 0 && _widget$current5.TimeOverTime && ((data === null || data === void 0 ? void 0 : data.ComparisonValue) === 0 || (data === null || data === void 0 ? void 0 : data.ComparisonValue) === null) && ((data === null || data === void 0 ? void 0 : data.Value) === 0 || (data === null || data === void 0 ? void 0 : data.Value) === null)) return;
-    setCheckValuesValidity(true);
-  };
+  function getArrowComponent() {
+    var _widget$current4, _widget$current5, _widget$current6, _widget$current7;
+
+    if (!data) return null;
+    if ((data === null || data === void 0 ? void 0 : data.Ratio) == 0 || data.Value == data.ComparisonValue || (data.Value == "0" || data.Value == 0) && (data.ComparisonValue == "0" || data.ComparisonValue == 0)) return React__default.createElement("div", {
+      className: "dl-kpi-arrow-container"
+    }, React__default.createElement("span", {
+      className: "dl-kpi-arrow-pic dl-kpi-arrow-up-green"
+    }), React__default.createElement("span", {
+      className: "dl-kpi-arrow-pic dl-kpi-arrow-down-red",
+      style: {
+        marginTop: "2px"
+      }
+    }));
+    if ((data === null || data === void 0 ? void 0 : data.Ratio) > 1 && ((_widget$current4 = widget.current) === null || _widget$current4 === void 0 ? void 0 : _widget$current4.Increase) == "Positive") return React__default.createElement("div", {
+      className: "dl-kpi-arrow-container"
+    }, React__default.createElement("span", {
+      className: "dl-kpi-arrow-pic dl-kpi-arrow-up-green"
+    }));
+    if ((data === null || data === void 0 ? void 0 : data.Ratio) > 1 && ((_widget$current5 = widget.current) === null || _widget$current5 === void 0 ? void 0 : _widget$current5.Increase) == "Negative") return React__default.createElement("div", {
+      className: "dl-kpi-arrow-container"
+    }, React__default.createElement("span", {
+      className: "dl-kpi-arrow-pic dl-kpi-arrow-up-red"
+    }));
+    if ((data === null || data === void 0 ? void 0 : data.Ratio) < 1 && ((_widget$current6 = widget.current) === null || _widget$current6 === void 0 ? void 0 : _widget$current6.Increase) == "Positive") return React__default.createElement("div", {
+      className: "dl-kpi-arrow-container"
+    }, React__default.createElement("span", {
+      className: "dl-kpi-arrow-pic dl-kpi-arrow-down-red"
+    }));
+    if ((data === null || data === void 0 ? void 0 : data.Ratio) < 1 && ((_widget$current7 = widget.current) === null || _widget$current7 === void 0 ? void 0 : _widget$current7.Increase) == "Negative") return React__default.createElement("div", {
+      className: "dl-kpi-arrow-container"
+    }, React__default.createElement("span", {
+      className: "dl-kpi-arrow-pic dl-kpi-arrow-down-green"
+    }));
+    return null;
+  }
 
-  var checkUnitVisible = function checkUnitVisible(data) {
-    var _widget$current6;
+  function getPreviousValueComponent() {
+    var _widget$current8;
 
-    setVisibilityUnit(false);
-    if (!(widget !== null && widget !== void 0 && (_widget$current6 = widget.current) !== null && _widget$current6 !== void 0 && _widget$current6.TimeOverTime) || (data === null || data === void 0 ? void 0 : data.ComparisonValue) == 0 || (data === null || data === void 0 ? void 0 : data.ComparisonValue) === null) return;
-    setVisibilityUnit(true);
-  };
+    if (!((_widget$current8 = widget.current) !== null && _widget$current8 !== void 0 && _widget$current8.TimeOverTime)) return null;
+    var prevtext = "Previous: " + (data === null || data === void 0 ? void 0 : data.ComparisonValue);
+    return React__default.createElement("div", null, React__default.createElement("div", {
+      className: "dl-kpi-prev-text"
+    }, prevtext));
+  }
 
   return !dataLoaded ? React__default.createElement("div", {
     className: 'dl-full-hight dl-flex-content-center spinner-custome'
@@ -306,19 +325,20 @@ var KpiChart = function KpiChart(props) {
     strokeWidth: "4",
     animationDuration: "2s"
   })) : !error ? React__default.createElement("div", {
-    className: "kpIcontainer",
+    className: "dl-kpi-container-click",
     onClick: kpiClick
   }, React__default.createElement("div", {
-    className: "dl-kpi-same-line"
+    className: "dl-kpi-container",
+    style: {
+      marginTop: (_widget$current9 = widget.current) !== null && _widget$current9 !== void 0 && _widget$current9.TimeOverTime ? '7px' : '15.4px'
+    }
+  }, React__default.createElement("div", {
+    className: "dl-kpi-sub-container"
   }, React__default.createElement("div", {
     className: "dl-kpi-value dl-kpi-textTrimming"
-  }, data === null || data === void 0 ? void 0 : data.Value), React__default.createElement("div", {
+  }, data === null || data === void 0 ? void 0 : data.Value), (data === null || data === void 0 ? void 0 : data.Unit) && React__default.createElement("div", {
     className: "dl-kpi-unit"
-  }, (data === null || data === void 0 ? void 0 : data.Value) != 0 && (data === null || data === void 0 ? void 0 : data.Unit)), checkValuesValidity ? React__default.createElement("div", {
-    className: "dl-kpi-same-line dl-kpi-ratio"
-  }, React__default.createElement("div", {
-    className: "dl-kpi-margin"
-  }, arrowColorDirection), React__default.createElement("div", null, data === null || data === void 0 ? void 0 : data.Ratio, " %")) : null)) : React__default.createElement("div", {
+  }, data === null || data === void 0 ? void 0 : data.Unit), getRatioComponent()), getPreviousValueComponent())) : React__default.createElement("div", {
     className: "dl-flex-content-center dl-full-hight "
   }, React__default.createElement("div", {
     className: "dl-tooltip"
@@ -346,9 +366,7 @@ var CustomChart = function CustomChart(props) {
   };
 
   return React__default.createElement("div", {
-    style: {
-      height: '100%'
-    }
+    className: "dl-custom-chart-container"
   }, project());
 };
 
@@ -483,6 +501,8 @@ function getBarObject(seriesMeasures, widget) {
   chartInfo.legendItemFontSize = defautFontSize;
   chartInfo.divLineDashed = "1";
   chartInfo.divLineDashLen = "7";
+  chartInfo.chartTopMargin = "10";
+  chartInfo.chartBottomMargin = "10";
   chart.dataSource = getCategoriesBasedDataSource(chartInfo, seriesMeasures);
   return chart;
 }
@@ -501,6 +521,10 @@ function getLineObject(seriesMeasures, widget) {
   chartInfo.legendItemFontSize = defautFontSize;
   chartInfo.divLineDashed = "1";
   chartInfo.divLineDashLen = "7";
+  chartInfo.chartTopMargin = "10";
+  chartInfo.chartBottomMargin = "10";
+  chartInfo.chartLeftMargin = "20";
+  chartInfo.chartRightMargin = "50";
   chart.dataSource = getCategoriesBasedDataSource(chartInfo, seriesMeasures);
   return chart;
 }
@@ -547,6 +571,10 @@ function getColumnObject(seriesMeasures, widget) {
   chartInfo.legendItemFontSize = defautFontSize;
   chartInfo.divLineDashed = "1";
   chartInfo.divLineDashLen = "7";
+  chartInfo.chartTopMargin = "10";
+  chartInfo.chartBottomMargin = "10";
+  chartInfo.chartLeftMargin = "20";
+  chartInfo.chartRightMargin = "50";
   chart.dataSource = getCategoriesBasedDataSource(chartInfo, seriesMeasures);
   return chart;
 }
@@ -567,10 +595,10 @@ function getDefaultChartInfo(widget) {
   chart.baseFontSize = defautFontSize;
   chart.enableSlicing = "0";
   chart.enableRotation = "0";
-  chart.chartLeftMargin = "20";
-  chart.chartTopMargin = "20";
-  chart.chartRightMargin = "20";
-  chart.chartBottomMargin = "20";
+  chart.chartTopMargin = "0";
+  chart.chartBottomMargin = "0";
+  chart.chartLeftMargin = "40";
+  chart.chartRightMargin = "40";
   chart.toolTipBgColor = "#FFFFFF";
   chart.showToolTipShadow = "1";
   chart.plottooltext = getTooltip(widget);
@@ -638,15 +666,6 @@ var FusionChart = function FusionChart(props) {
       setFchart = _useState4[1];
 
   var id = (Math.random() + 1).toString(36).substring(7);
-
-  var _useState5 = React.useState(),
-      widgetWidth = _useState5[0],
-      setWidgetWidth = _useState5[1];
-
-  var _useState6 = React.useState(),
-      widgetHeight = _useState6[0],
-      setWidgetHeight = _useState6[1];
-
   React.useEffect(function () {
     widget.current = props.widget;
     setTimeout(function () {
@@ -664,7 +683,6 @@ var FusionChart = function FusionChart(props) {
       var chart = BuildFusionChartObject(result.data, widget.current);
       setArgs(chart);
       setDataLoaded(true);
-      if (widgetHeight && widgetWidth && fChart) fChart.resizeTo(widgetWidth, widgetHeight);
     }, function (error) {
       var _error$response, _error$response$data, _error$response2, _error$response2$data;
 
@@ -690,8 +708,6 @@ var FusionChart = function FusionChart(props) {
     onResize: function onResize(_ref) {
       var width = _ref.width,
           height = _ref.height;
-      setWidgetWidth(width);
-      setWidgetHeight(height);
       fChart.resizeTo(width, height);
     }
   }),
@@ -735,6 +751,9 @@ var WidgetCard = function WidgetCard(props, state) {
       isLoading = _useState[0],
       setIsLoading = _useState[1];
 
+  var _useState2 = React.useState(false),
+      showTooltip = _useState2[1];
+
   var editWidget = function editWidget() {
     var _moreBtnToggle$curren;
 
@@ -756,18 +775,32 @@ var WidgetCard = function WidgetCard(props, state) {
     });
   }, []);
   return React__default.createElement("div", {
-    className: "panel",
+    className: "dl-panel",
     key: props.el.i,
     style: {
       cursor: props.isInEditMode ? 'move' : 'default'
     }
-  }, React__default.createElement("header", null, React__default.createElement(tooltip.Tooltip, {
+  }, React__default.createElement("header", null, React__default.createElement("div", {
+    style: {
+      display: 'flex',
+      width: 'calc(100% - 3rem)'
+    }
+  }, React__default.createElement(tooltip.Tooltip, {
     target: ".h-tool-tip"
   }), React__default.createElement("h1", {
     "data-pr-tooltip": (_widget$current2 = widget.current) === null || _widget$current2 === void 0 ? void 0 : _widget$current2.Title,
     "data-pr-position": "top",
-    className: "h-tool-tip"
-  }, (_widget$current3 = widget.current) === null || _widget$current3 === void 0 ? void 0 : _widget$current3.Title), props.isInEditMode ? React__default.createElement(button.Button, {
+    className: "h-tool-tip",
+    onMouseEnter: function onMouseEnter() {
+      return showTooltip(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      showTooltip(false);
+      setTimeout(function () {
+        return showTooltip(true);
+      }, 50);
+    }
+  }, (_widget$current3 = widget.current) === null || _widget$current3 === void 0 ? void 0 : _widget$current3.Title)), props.isInEditMode ? React__default.createElement(button.Button, {
     icon: "pi pi-ellipsis-v",
     className: "p-button-rounded p-button-text",
     onClick: function onClick(e) {
@@ -792,8 +825,12 @@ var WidgetCard = function WidgetCard(props, state) {
       return props.deleteBtnClicked((_props$widget = props.widget) === null || _props$widget === void 0 ? void 0 : _props$widget.key);
     }
   }, "Remove")))), React__default.createElement("div", {
+    style: {
+      width: '100%'
+    }
+  }, React__default.createElement("div", {
     className: "dl-line"
-  }), React__default.createElement("div", {
+  })), React__default.createElement("div", {
     className: "dl-dashboard-widget"
   }, " ", GetChartComponent(), " "));