logitude-dashboard-library 3.2.18 → 3.2.20

package/dist/Utils/General.d.ts

@@ -4,4 +4,6 @@ declare const getGlobalNumberFormatting: () => {
     thousandsSeparator: string;
     decimalSeparator: string;
 };
-export { isNullOrUndefined, isNullOrUndefinedOrEmpty, getGlobalNumberFormatting };
+declare const getNumberInSystemLocalFormat: (value: number, decimalDigitsCount?: number) => string;
+declare const ConvertStringToPascalCaseHelper: (stringValue: string) => string;
+export { isNullOrUndefined, isNullOrUndefinedOrEmpty, getGlobalNumberFormatting, getNumberInSystemLocalFormat, ConvertStringToPascalCaseHelper };

package/dist/assets/images/red-circle-warning.svg

@@ -0,0 +1,3 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11 20.1654C5.9374 20.1654 1.83334 16.0613 1.83334 10.9987C1.83334 5.93609 5.9374 1.83203 11 1.83203C16.0626 1.83203 20.1667 5.93609 20.1667 10.9987C20.1667 16.0613 16.0626 20.1654 11 20.1654ZM10.0833 13.7487V15.582H11.9167V13.7487H10.0833ZM10.0833 6.41536V11.9154H11.9167V6.41536H10.0833Z" fill="#F85248"/>
+</svg>

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

@@ -277,6 +277,10 @@ $dark-grey: #717585;
     }
 
     .pivot-header {
+        .widget-table-titles-container {
+            padding: 0px 12px 0px 8px !important;
+        }
+
         &::after {
             content: "";
             border-bottom: 0px !important;
@@ -334,6 +338,19 @@ $dark-grey: #717585;
             }
         }
 
+        .header-message-error {
+            max-width: 60px;
+            display: flex;
+            align-items: center;
+            justify-content: flex-end;
+            flex: 1;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            min-width: 1px;
+            padding-top: 4px;
+        }
+        
         .widget-table-titles-container {
             display: flex;
             flex: 1;
@@ -756,6 +773,7 @@ $dark-grey: #717585;
 
 .table-cell {
     font-family: 'Manrope';
+    font-weight: 500;
     padding: 0px 6px;
     border-radius: 4px;
     white-space: nowrap;
@@ -834,8 +852,12 @@ $dark-grey: #717585;
     left: 0;
     bottom: 0;
 
+    * {
+        border-color: #e0e0e0 !important;
+    }
+
     .pivot-grid-element {
-        width: 100%;
+        width: calc(100% - 16px);
         height: 100%;
         margin: 0 auto;
         overflow-x: auto;
@@ -850,11 +872,15 @@ $dark-grey: #717585;
     .dx-pivotgrid-fields-area-head td .dx-area-field,
     .dx-pivotgrid-horizontal-headers td,
     .dx-pivotgrid .dx-area-description-cell.dx-pivotgrid-background {
-        background-color: #F1F1F1;
+        background-color: #FFFFFF;
+    }
+
+    .dx-pivotgrid .dx-area-description-cell {
+        background-color: #FFFFFF;
     }
 
     .dx-pivotgrid-horizontal-headers td {
-        text-align: left;
+        text-align: center;
     }
 
     .dx-pivotgrid-fields-area-head td .dx-area-field {
@@ -863,25 +889,25 @@ $dark-grey: #717585;
     }
 
     .dx-pivotgrid .dx-pivotgrid-area td {
-        padding: 4px 8px;
+        padding: 6px 8px 5px 8px;
     }
 
     .dx-pivotgrid-fields-area-head .dx-area-field-content,
     .dx-pivotgrid-horizontal-headers tr td span {
         font-family: "Manrope";
-        font-size: 13px;
+        font-size: 12px;
         font-weight: 600;
         text-align: left;
-        color: #222222;
+        color: #222222 !important;
     }
 
     .dx-pivotgrid .dx-pivotgrid-vertical-headers td {
-        background: #FAFAFA;
+        background: #FFFFFF;
     }
 
     .dx-pivotgrid .dx-pivotgrid-vertical-headers td > span {
         font-family: "Manrope";
-        font-size: 13px;
+        font-size: 12px;
         font-weight: 500;
         text-align: left;
         color: #46494A;
@@ -892,13 +918,13 @@ $dark-grey: #717585;
         color: #46494A !important;
     }
 
-    .dx-pivotgrid .dx-pivotgrid-area-data tbody td {
+    .dx-pivotgrid .dx-pivotgrid-area-data tbody td > span {
         font-family: "Manrope";
-        font-size: 13px;
+        font-size: 12px;
         font-weight: 500;
         text-align: right;
         color: #46494A;
-        border-left: 0px !important;
+        cursor: pointer;
     }
 
     .dx-widget {
@@ -959,6 +985,14 @@ $dark-grey: #717585;
     width: 100%;
     margin: 0 auto;
 
+    * {
+        -webkit-text-transform: capitalize !important;
+        -moz-text-transform: capitalize !important;
+        -ms-text-transform: capitalize !important;
+        -o-text-transform: capitalize !important;
+        text-transform: capitalize !important;
+    }
+
     &::-webkit-scrollbar {
         width: 10px;
         height: 10px
@@ -998,7 +1032,7 @@ $dark-grey: #717585;
 
         .p-column-header-content {
             padding: 0;
-            border: 1px solid #E7E7E6;
+            border: 1px solid #e0e0e0;
             border-width: 0 0 1px 0;
         }
 
@@ -1013,20 +1047,20 @@ $dark-grey: #717585;
             display: flex;
             align-items: center;
             cursor: pointer;
-            padding: 11px 12px;
+            padding: 10px 12px;
         }
     }
 
     th:not(:last-child) .header-content {
-        border-right: 1px solid #E7E7E6;
+        border-right: 1px solid #e0e0e0;
     }
 
     td {
-        border: 1px solid #E7E7E6 !important;
+        border: 1px solid #e0e0e0 !important;
         border-width: 0 0 1px 0 !important;
         padding: 0px 6px !important;
         max-width: 1px;
-        height: 36px;
+        height: 30px;
         min-width: 140px;
         line-height: normal;
         word-break: break-all;
@@ -1110,7 +1144,7 @@ $dark-grey: #717585;
 }
 
 
-.widget-title-tooltip-text {
+.widget-title-tooltip-text, .header-message-error-tooltip-text {
     text-transform: capitalize;
     font-family: 'Manrope';
     font-weight: 500;
@@ -1126,7 +1160,8 @@ $dark-grey: #717585;
     white-space: normal;
 }
 
-.title-tooltip-container-content > div {
+.title-tooltip-container-content > div,
+.header-message-error-tooltip-container-content > div {
     width: 8px !important;
     height: 4px !important;
 }
@@ -1136,7 +1171,7 @@ $dark-grey: #717585;
 }
 
 .border-bottom-light-white {
-    border-bottom: 1px solid #E7E7E6;
+    border-bottom: 1px solid #e0e0e0;
 }
 
 .padding-left-12 {

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

@@ -9,6 +9,7 @@ export declare type CustomChartProps = {
     isPreviewModeActive?: boolean;
     isInEditMode?: boolean;
     onSelectDataPoint: (dataPointSelection: DataPointSelection) => void;
+    onShowError?: (errorMsg: string | null) => void;
 };
 declare const CustomChart: (props: CustomChartProps) => React.JSX.Element;
 export default CustomChart;

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

@@ -7,6 +7,7 @@ export declare type FusionChartProps = {
     widgetRef: ReactWidgetPM | undefined;
     dataBinding: DashboardDataBinding;
     onSelectDataPoint: (dataPointSelection: DataPointSelection) => void;
+    onShowError: (errorMsg: string | null) => void;
 };
 declare const FusionChart: React.ForwardRefExoticComponent<FusionChartProps & React.RefAttributes<unknown>>;
 export default FusionChart;

package/dist/images/red-circle-warning.svg

@@ -0,0 +1,3 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11 20.1654C5.9374 20.1654 1.83334 16.0613 1.83334 10.9987C1.83334 5.93609 5.9374 1.83203 11 1.83203C16.0626 1.83203 20.1667 5.93609 20.1667 10.9987C20.1667 16.0613 16.0626 20.1654 11 20.1654ZM10.0833 13.7487V15.582H11.9167V13.7487H10.0833ZM10.0833 6.41536V11.9154H11.9167V6.41536H10.0833Z" fill="#F85248"/>
+</svg>