logitude-dashboard-library 3.2.11 → 3.2.13

package/dist/Utils/DateHelper.d.ts

@@ -1,3 +1,7 @@
 import { ReactWidgetPM } from "../types/widget";
 declare const getLabelFormatByDateGroupType: (label: string, widget: ReactWidgetPM, isSecondGrouping?: boolean) => any;
-export { getLabelFormatByDateGroupType };
+declare const getDateRangesByCode: (code: string | null) => {
+    fromDate: any;
+    toDate: any;
+};
+export { getLabelFormatByDateGroupType, getDateRangesByCode };

package/dist/Utils/General.d.ts

@@ -1,3 +1,7 @@
 declare const isNullOrUndefined: (val: any) => boolean;
 declare const isNullOrUndefinedOrEmpty: (val: any) => boolean;
-export { isNullOrUndefined, isNullOrUndefinedOrEmpty };
+declare const getGlobalNumberFormatting: () => {
+    thousandsSeparator: string;
+    decimalSeparator: string;
+};
+export { isNullOrUndefined, isNullOrUndefinedOrEmpty, getGlobalNumberFormatting };

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

@@ -278,7 +278,7 @@ $dark-grey: #717585;
 
     .header-contents {
         display: flex;
-        
+    
         .widget-titles-container {
             display: flex;
             flex-wrap: wrap;
@@ -326,12 +326,94 @@ $dark-grey: #717585;
                 width: 100%;
             }
         }
+
+        .widget-table-titles-container {
+            display: flex;
+            flex: 1;
+            align-items: center;
+            justify-content: flex-start;
+            padding: 0px 12px;
+            min-height: 40px;
+            min-width: 100px;
+            width: 100%;
+            max-width: calc(100% - 170px);
+            overflow: hidden;
     
+            .title-container {
+                display: flex;
+                align-items: center;
+                justify-content: left;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                width: auto;
+                max-width: 60%;
+        
+                .title {
+                    text-transform: capitalize;
+                    font-family: 'Manrope', sans-serif;
+                    font-style: normal;
+                    color: #292D30;
+                    font-size: 12px;
+                    font-weight: 600;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    width: auto;
+                }
+            }
+        
+            .subtitle {
+                font-family: "Manrope", sans-serif;
+                font-style: normal;
+                color: #A4A4A4;
+                font-size: 12px;
+                font-weight: 600;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                width: auto;
+                max-width: 40%;
+            }
+
+            .titles-vertical-seeparator {
+                width: 1px;
+                height: 14px;
+                background: #D9D9D9;
+                margin: 0px 6px;
+            }
+        }
+
+        .table-hint-container {
+            font-family: "Manrope";
+            width: auto;
+            max-width: 300px;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+            min-width: 1px;
+            padding-top: 2px;
+            font-size: 11px;
+            color: #A4A4A4;
+            padding-right: 12px;
+            align-self: center;
+
+            .show-more-records {
+                color: #5FAFDA;
+                cursor: pointer;
+            }
+
+            & > span {
+                font-size: 12px;
+            }
+        }
+
         .widget-options-container {
             display: flex;
             align-items: center;
             width: 68px;
             column-gap: 6px;
+            padding-top: 6px;
     
             svg {
                 width: 20px;
@@ -388,25 +470,6 @@ $dark-grey: #717585;
     align-items: flex-start;
 }
 
-.table-hint-container {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-
-    .table-rows-number-indicator {
-        margin: 4px 0px 2px 0px;
-        color: #939393;
-        font-size: 11px;
-        padding-left: 12px;
-    }
-    .show-more-records {
-        font-size: 11px;
-        color: #1967d2;
-        cursor: pointer;
-        margin: 3px 0px 2px 4px;
-    }
-}
-
 .filter-label {
     font-size: 12px;
     color: $dark-grey;
@@ -667,16 +730,35 @@ $dark-grey: #717585;
     color: #292D30;
 }
 
-.dl-kpi-unit {
+.dl-kpi-unit, .comparison-value-dl-kpi-unit {
     font-family: 'Manrope';
     font-style: normal;
     font-weight: 600;
-    font-size: 20px;
     line-height: 125%;
     color: #292D30;
     margin-left: 5px;
 }
 
+.dl-kpi-unit {
+    font-size: 20px;
+}
+
+.comparison-value-dl-kpi-unit {
+    font-size: 12px;
+}
+
+.table-cell {
+    font-family: 'Manrope';
+    padding: 0px 6px;
+    border-radius: 4px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: block;
+    width: fit-content;
+    max-width: 100%;
+}
+
 .dl-kpi-abbreviationSymbol {
     font-family: 'Manrope';
     font-style: normal;
@@ -732,12 +814,12 @@ $dark-grey: #717585;
 .dl-table-chart-container {
     overflow: auto;
     position: absolute;
-    top: 22px;
+    top: -1px;
     right: 0;
     left: 0;
     bottom: 0;
-    height: calc(100% - 35px);
-    width: calc(100% - 25px);
+    height: calc(100% - 10px);
+    width: 100%;
     margin: 0 auto;
 
     &::-webkit-scrollbar {
@@ -766,38 +848,46 @@ $dark-grey: #717585;
         overflow-x: inherit;
     }
 
-
-    td,
-    th {
-        border: 1px solid #ddd;
-        padding: 8px;
-    }
-
     th {
         text-align: left;
         font-weight: bold;
         font-size: 14px;
         white-space: nowrap;
+        padding: 0px !important;
+        position: sticky;
+        top: 0px;
+        z-index: 1;
+        border: 0px !important;
+
+        .p-column-header-content {
+            padding: 0;
+            border: 1px solid #E7E7E6;
+            border-width: 0 0 1px 0;
+        }
 
         .p-column-title {
-            font-weight: bold !important;
-            font-size: 14px !important;
-
-            .pi {
-                font-size: 14px !important;
-            }
+            font-family: 'Manrope';
+            font-weight: 600 !important;
+            font-size: 13px;
+            flex: 1;
         }
 
         .header-content {
             display: flex;
             align-items: center;
             cursor: pointer;
+            padding: 11px 12px;
         }
     }
 
+    th:not(:last-child) .header-content {
+        border-right: 1px solid #E7E7E6;
+    }
+
     td {
-        border: 1px solid #ddd;
-        padding: 0.5rem 1rem !important;
+        border: 1px solid #E7E7E6 !important;
+        border-width: 0 0 1px 0 !important;
+        padding: 0px 6px !important;
         max-width: 1px;
         height: 36px;
         min-width: 140px;
@@ -813,16 +903,16 @@ $dark-grey: #717585;
         line-height: 10px;
     }
 
-    tbody tr td{
-        font-size: 14px;
+    tbody tr:last-child td {
+        border: 0px !important
     }
 
-    tr:nth-child(even) {
-        background-color: #f2f2f2;
+    tbody tr td{
+        font-size: 14px;
     }
 
     tr:hover {
-        background-color: #ddd;
+        background-color: #f3f3f3;
     }
 
     .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover,
@@ -836,6 +926,10 @@ $dark-grey: #717585;
     }
 }
 
+.header-content > .p-column-title > .pi::before {
+    font-size: inherit !important;
+}
+
 .margin-auto {
     margin: auto;
 }
@@ -902,4 +996,18 @@ $dark-grey: #717585;
 
 .fc__tooltip {
     max-width: 350px !important;
+}
+
+.border-bottom-light-white {
+    border-bottom: 1px solid #E7E7E6;
+}
+
+.padding-left-12 {
+    padding-left: 12px !important;
+}
+
+.table-link-cell {
+    color: #1E4AC4 !important;
+    cursor: pointer;
+    text-decoration: underline;
 }

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

@@ -3,5 +3,27 @@ import { CustomChartProps } from "./CustomChart";
 declare type KpiChartProps = {
     customChartProps: CustomChartProps;
 };
+export declare type kPIComparisonSettingsProps = {
+    PeriodFieldId: string | null;
+    PeriodDateFilter: {
+        FieldValue: string | null;
+        FieldValue2: string | null;
+        DatePickerTextFieldValue: string | null;
+        DateTimeValueCode: string;
+        DateGroupCode: string | null;
+        Operator: string | null;
+    };
+    ComparePeriodDateFilter: {
+        FieldValue: string | null;
+        FieldValue2: string | null;
+        DatePickerTextFieldValue: string | null;
+        DateTimeValueCode: string;
+        DateGroupCode: string | null;
+        Operator: string | null;
+    };
+    ComparisonPeriodType: string | null;
+    ComparisonIndicator: boolean;
+    ComparisonIncrease: string | null;
+};
 declare const KpiChart: (props: KpiChartProps) => React.JSX.Element;
 export default KpiChart;

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

@@ -2,3 +2,4 @@ import { ChartObject } from "fusioncharts";
 import { SeriesMeasure } from "../../../../types/SeriesMeasure";
 import { ReactWidgetPM } from "../../../../types/widget";
 export declare function BuildFusionChartObject(seriesMeasures: SeriesMeasure[], widget: ReactWidgetPM): ChartObject;
+export declare const getGaugeObject: (data: any, widget: ReactWidgetPM) => ChartObject;

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

@@ -85,6 +85,14 @@ export interface ChartInfo {
     drawCrossLine: string;
     palettecolors: string;
     plotHoverEffect: string;
+    numberSuffix: string | null;
+    sNumberSuffix: string | null;
+    decimalSeparator: string | null;
+    thousandSeparator: string | null;
+    formatNumberScale: string | null;
+    manageResize: string | null;
+    valueBelowPivot: string | null;
+    showValue: string | null;
 }
 export declare function getSeriesPositionColor(position: number): string | null;
 export declare function getSeriesHoverPositionColor(position: number): string | null;

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

@@ -31,4 +31,6 @@ export declare const plotColorsDictionary: {
     plotColor11: string;
     plotColor12: string;
     plotColor13: string;
+    plotColor14: string;
+    plotColor15: string;
 };

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

@@ -0,0 +1,12 @@
+import React from "react";
+import { DashboardDataBinding } from "../../../../types/DashboardDataBinding";
+import { DataPointSelection } from "../../../../types/SeriesMeasure";
+import { ReactWidgetPM } from "../../../../types/widget";
+export declare type FusionChartProps = {
+    widget: ReactWidgetPM | undefined;
+    widgetRef: ReactWidgetPM | undefined;
+    dataBinding: DashboardDataBinding;
+    onSelectDataPoint: (dataPointSelection: DataPointSelection) => void;
+};
+declare const FusionChart: React.ForwardRefExoticComponent<FusionChartProps & React.RefAttributes<unknown>>;
+export default FusionChart;

package/dist/index.d.ts

@@ -8,6 +8,7 @@ declare type DashboardProps = {
     token: string;
     tenant: number;
     userId: string;
+    numberFormatCode?: string | null;
     isPreviewMode: boolean;
     widgetData: ReactWidgetPM | undefined;
     dataBinding: DashboardDataBinding;