logitude-dashboard-library 1.4.8 → 1.4.10

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

@@ -48,7 +48,7 @@ $dark-grey: #717585;
 }
 
 .spinner-custome {
-
+    width: 100%;
     @keyframes p-progress-spinner-color {
 
         100%,
@@ -144,10 +144,6 @@ $dark-grey: #717585;
     }
 }
 
-.dl-custom-btn {
-    .p-button.p-button-lg {}
-}
-
 .dl-relativ-container {
 
     position: relative;
@@ -289,18 +285,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 +312,6 @@ $dark-grey: #717585;
 
     h1 {
         text-transform: capitalize;
-        font-size: 15px;
         font-family: 'Manrope', sans-serif;
         font-style: normal;
         color: #292D30;
@@ -342,8 +343,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 +442,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 {
@@ -457,7 +471,8 @@ $dark-grey: #717585;
 
 .db-fc-container {
     width: 100%;
-    height: 100%;
+    height: calc(100% - 5px);
+    padding-top: 12px;
 }
 
 .db-fc-container>*:first-child {
@@ -469,50 +484,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;
@@ -520,27 +544,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/index.js

@@ -203,29 +203,16 @@ var DashboardAnalyticsService = /*#__PURE__*/function () {
 
 var KpiChart = function KpiChart(props) {
   var _useState = React.useState(false),
-      dataLoaded = _useState[0],
       setDataLoaded = _useState[1];
 
   var _useState2 = React.useState(),
-      error = _useState2[0],
       setError = _useState2[1];
 
   var widget = React.useRef();
 
   var _useState3 = React.useState(),
-      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 +230,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;
 
@@ -255,79 +239,16 @@ var KpiChart = function KpiChart(props) {
     });
   };
 
-  var kpiClick = function kpiClick() {
-    var _widget$current, _widget$current2, _widget$current2$Widg;
-
-    var measureFieldId;
-    if (widget !== null && widget !== void 0 && (_widget$current = widget.current) !== null && _widget$current !== void 0 && _widget$current.WidgetMeasures) measureFieldId = widget === null || widget === void 0 ? void 0 : (_widget$current2 = widget.current) === null || _widget$current2 === void 0 ? void 0 : (_widget$current2$Widg = _widget$current2.WidgetMeasures[0]) === null || _widget$current2$Widg === void 0 ? void 0 : _widget$current2$Widg.MeasureFieldId;
-    props.customChartProps.onSelectDataPoint({
-      MeasureFieldId: measureFieldId,
-      Widget: widget.current
-    });
-  };
-
-  var setTimeOverTimeImage = function setTimeOverTimeImage(data) {
-    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;
-
-    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);
-  };
-
-  var checkUnitVisible = function checkUnitVisible(data) {
-    var _widget$current6;
-
-    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);
-  };
-
-  return !dataLoaded ? React__default.createElement("div", {
+  return React__default.createElement("div", {
     className: 'dl-full-hight dl-flex-content-center spinner-custome'
   }, React__default.createElement(progressspinner.ProgressSpinner, {
     style: {
-      width: '60px',
-      height: '60px'
+      width: '40px',
+      height: '40px'
     },
     strokeWidth: "4",
     animationDuration: "2s"
-  })) : !error ? React__default.createElement("div", {
-    className: "kpIcontainer",
-    onClick: kpiClick
-  }, React__default.createElement("div", {
-    className: "dl-kpi-same-line"
-  }, React__default.createElement("div", {
-    className: "dl-kpi-value dl-kpi-textTrimming"
-  }, data === null || data === void 0 ? void 0 : data.Value), 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", {
-    className: "dl-flex-content-center dl-full-hight "
-  }, React__default.createElement("div", {
-    className: "dl-tooltip"
-  }, React__default.createElement("img", {
-    width: 100,
-    src: "https://www.seekpng.com/png/full/334-3345964_error-icon-png.png"
-  }), React__default.createElement("span", {
-    className: "dl-tooltiptext"
-  }, error)));
+  }));
 };
 
 var CustomChart = function CustomChart(props) {
@@ -346,9 +267,7 @@ var CustomChart = function CustomChart(props) {
   };
 
   return React__default.createElement("div", {
-    style: {
-      height: '100%'
-    }
+    className: "dl-custom-chart-container"
   }, project());
 };
 
@@ -757,7 +676,7 @@ 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'
@@ -807,8 +726,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(), " "));