logitude-dashboard-library 1.4.11 → 1.4.13

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

@@ -49,6 +49,7 @@ $dark-grey: #717585;
 
 .spinner-custome {
     width: 100%;
+
     @keyframes p-progress-spinner-color {
 
         100%,
@@ -96,13 +97,10 @@ $dark-grey: #717585;
 
 .dl-full-hight {
     height: 100%;
-    max-height: calc(100vh - 170px);
 }
 
 .dl-full-hight-scroll {
     height: 100%;
-    max-height: calc(100vh - 170px);
-    overflow: auto;
 }
 
 .dl-full-hight-scroll::-webkit-scrollbar {
@@ -131,7 +129,6 @@ $dark-grey: #717585;
         border-radius: 7px;
 
     }
-
 }
 
 .dl-grid-container {
@@ -145,20 +142,9 @@ $dark-grey: #717585;
 }
 
 .dl-relativ-container {
-
     position: relative;
     width: 100%;
     height: 100%;
-
-}
-
-.dl-scroll-container {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    overflow-y: scroll;
 }
 
 .dl-flex-stretch {
@@ -177,36 +163,10 @@ $dark-grey: #717585;
     height: 100%;
 }
 
-
-
 .dl-box .dl-row.dl-header {
     flex: 0 1 auto;
-    /* The above is shorthand for:
-    flex-grow: 0,
-    flex-shrink: 1,
-    flex-basis: auto
-    */
-}
-
-.dl-box .dl-row.dl-content {
-    flex: 1 1 auto;
-    overflow-y: auto;
 }
 
-.dl-row.dl-content::-webkit-scrollbar {
-    width: 6px;
-    height: 6px;
-}
-
-.dl-row.dl-content::-webkit-scrollbar-track {
-    background: none;
-}
-
-.dl-row.dl-content::-webkit-scrollbar-thumb {
-    background: rgba(193, 193, 193, 1);
-}
-
-
 .dl-box .dl-row.dl-footer {
     flex: 0 1 40px;
 }
@@ -216,8 +176,6 @@ $dark-grey: #717585;
     width: 20px;
 }
 
-
-
 .form-field {
     display: flex;
     align-items: baseline;
@@ -302,7 +260,10 @@ $dark-grey: #717585;
         justify-content: space-between;
         align-items: center;
         position: unset;
-        width: 100%;
+        width: 100% !important;
+        max-width: 100% !important;
+        margin: 0;
+        padding: 0;
 
         i {
             font-size: 18px;
@@ -585,8 +546,8 @@ $dark-grey: #717585;
 .dl-kpi-prev-text {
     font-family: 'Manrope';
     font-style: normal;
-    font-weight: 600;
+    font-weight: 500;
     font-size: 11px;
     line-height: 15px;
-    color: #292D30;
+    color: #A4A4A4;
 }

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

@@ -1,4 +1,5 @@
 import { SeriesMeasure } from "../../../../types/SeriesMeasure";
-import { ChartInfo } from "./FusionChartObjectBuilder";
-export declare function getCategoriesBasedDataSource(chartInfo: ChartInfo, seriesMeasures: SeriesMeasure[]): any;
-export declare function getSimpleDataSource(chartInfo: ChartInfo, seriesMeasures: SeriesMeasure[]): any;
+import { ReactWidgetPM } from "../../../../types/widget";
+import { ChartInfo } from "./FusionChartObjectHelper";
+export declare function getCategoriesBasedDataSource(chartInfo: ChartInfo, seriesMeasures: SeriesMeasure[], widget: ReactWidgetPM): any;
+export declare function getSimpleDataSource(chartInfo: ChartInfo, seriesMeasures: SeriesMeasure[], widget: ReactWidgetPM): any;

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

@@ -2,40 +2,3 @@ import { ChartObject } from "fusioncharts";
 import { SeriesMeasure } from "../../../../types/SeriesMeasure";
 import { ReactWidgetPM } from "../../../../types/widget";
 export declare function BuildFusionChartObject(seriesMeasures: SeriesMeasure[], widget: ReactWidgetPM): ChartObject;
-export interface ChartInfo {
-    theme: string;
-    scrollHeight: string;
-    scrollWidth: string;
-    scrollPadding: string;
-    flatScrollBars: string;
-    enableSlicing: string;
-    chartLeftMargin: string;
-    chartTopMargin: string;
-    chartRightMargin: string;
-    chartBottomMargin: string;
-    baseFont: string;
-    baseFontSize: string;
-    showPercentValues: string;
-    showValues: string;
-    showLegend: string;
-    lineColor: string;
-    vDivLineDashed: string;
-    vDivLineDashLen: string;
-    divLineDashed: string;
-    divLineDashLen: string;
-    enableRotation: string;
-    legendItemFont: string;
-    legendItemFontSize: string;
-    legendCaptionFont: string;
-    legendCaptionFontSize: string;
-    labelFont: string;
-    labelFontSize: string;
-    toolTipBorderColor: string;
-    toolTipBgAlpha: string;
-    showToolTipShadow: string;
-    toolTipBgColor: string;
-    plottooltext: string;
-}
-export declare function getTooltip(widget: ReactWidgetPM): string;
-export declare function getTooltipPercentage(widget: ReactWidgetPM): string;
-export declare function getSeriesPositionColor(position: number): string | null;

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

@@ -0,0 +1,40 @@
+export interface ChartInfo {
+    theme: string;
+    scrollHeight: string;
+    scrollWidth: string;
+    scrollPadding: string;
+    flatScrollBars: string;
+    enableSlicing: string;
+    chartLeftMargin: string;
+    chartTopMargin: string;
+    chartRightMargin: string;
+    chartBottomMargin: string;
+    baseFont: string;
+    baseFontSize: string;
+    showPercentValues: string;
+    showValues: string;
+    showLegend: string;
+    lineColor: string;
+    divLineDashed: string;
+    divLineDashLen: string;
+    divLineDashGap: string;
+    divLineColor: string;
+    divLineThickness: string;
+    divLineAlpha: string;
+    enableRotation: string;
+    legendItemFont: string;
+    legendItemFontSize: string;
+    legendCaptionFont: string;
+    legendCaptionFontSize: string;
+    labelFont: string;
+    labelFontSize: string;
+    toolTipBorderColor: string;
+    toolTipBgAlpha: string;
+    showToolTipShadow: string;
+    toolTipBgColor: string;
+    plottooltext: string;
+    anchorradius: string;
+    canvasBottomPadding: string;
+}
+export declare function getSeriesPositionColor(position: number): string | null;
+export declare function getSeriesHoverPositionColor(position: number): string | null;

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

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

package/dist/index.js

@@ -370,26 +370,82 @@ var CustomChart = function CustomChart(props) {
   }, project());
 };
 
-function getCategoriesBasedDataSource(chartInfo, seriesMeasures) {
+var mainYellowColor = "#F6CF33";
+var mainRedColor = "#EE5F77";
+var mainGreenColor = "#4AC76F";
+var mainTurquoiseColor = "#32C7C7";
+var mainBlueColor = "#369CFB";
+var mainPurpleColor = "#935BE0";
+var mainOrangeColor = "#FAAD14";
+
+function getSeriesPositionColor(position) {
+  switch (position) {
+    case 1:
+      return mainBlueColor;
+
+    case 2:
+      return mainGreenColor;
+
+    case 3:
+      return mainYellowColor;
+
+    case 4:
+      return mainTurquoiseColor;
+
+    case 5:
+      return mainPurpleColor;
+
+    case 6:
+      return mainOrangeColor;
+
+    case 7:
+      return mainRedColor;
+
+    default:
+      return null;
+  }
+}
+
+function buildToolTip(widget, value, seriesName) {
+  return "\n    <div style=\"min-width: 108px;\">\n        <div style=\"display: flex;align-items: center;margin-bottom: 6px;\">\n            <span style=\"margin: 0; height: 10px; width: 10px; background-color: #A4A4A4; border-radius: 50%; display: inline-block;\"></span>\n            <p style=\" margin: 0; margin-left: 4px;font-family: 'Manrope'; font-style: normal;font-weight: 400; font-size: 11px; line-height: 100%;  color: #323232;  flex: none; order: 1;flex-grow: 0;\">$label</p>\n        </div>\n        <hr style=\"margin: 0;border-top: 1px solid #F0F0F0;\">\n        <div style=\"display: flex;align-items: center;margin:0;margin-top: 6px;\">\n            <p style=\"margin: 0;font-family: 'Manrope';font-style: normal;font-weight: 400; font-size: 11px;line-height: 100%;color: #A4A4A4;flex: none;order: 0;flex-grow: 0;\"> " + getMeasureType(seriesName) + "</p>\n            <p style=\"margin: 0;margin-left: 6px;font-family: 'Manrope';font-style: normal;font-weight: 500;font-size: 11px;line-height: 100%;  color: #323232;flex: none; order: 1;flex-grow: 0;\">" + getTooltipValue(value) + "</p>\n            " + getTooltipPercentage(widget) + " </div>\n    </div>\n    ";
+}
+
+function getTooltipPercentage(widget) {
+  if (widget.TypeCode != "donut" && widget.TypeCode != "pie") return "";
+  return "\n    <p style=\"margin: 0;margin-left: 2px;font-family: 'Manrope';font-style: normal;font-weight: 500;font-size: 11px;line-height: 100%;  color: #A4A4A4;flex: none; order: 1;flex-grow: 0;\">($percentValue)</p>\n    ";
+}
+
+function getTooltipValue(value) {
+  if (value) return value;
+  return '$dataValue';
+}
+
+function getMeasureType(seriesName) {
+  if (!seriesName) return "Count:";
+  return seriesName.replace(/ .*/, '') + ":";
+}
+
+function getCategoriesBasedDataSource(chartInfo, seriesMeasures, widget) {
   if (!seriesMeasures || !seriesMeasures[0]) return {};
   return {
     chart: chartInfo,
     categories: buildCategories(seriesMeasures),
-    dataset: buildDataSet(seriesMeasures)
+    dataset: buildDataSet(seriesMeasures, widget)
   };
 }
-function getSimpleDataSource(chartInfo, seriesMeasures) {
+function getSimpleDataSource(chartInfo, seriesMeasures, widget) {
   if (!seriesMeasures || !seriesMeasures[0]) return {};
   return {
     chart: chartInfo,
-    data: buildDataSource(seriesMeasures)
+    data: buildDataSource(seriesMeasures, widget)
   };
 }
 
-function buildDataSource(values) {
+function buildDataSource(values, widget) {
   var data = [];
   if (!values || !values[0]) return data;
-  data = values[0].SeriesMeasureVulues.map(function (e, index) {
+  var series = values[0];
+  data = series.SeriesMeasureVulues.map(function (e, index) {
     var item = {
       value: e.Value,
       label: getTrimedLabelText(e.Label),
@@ -397,6 +453,7 @@ function buildDataSource(values) {
         GroupById: e.GroupById,
         MeasureFieldId: values[0].MeasureFieldId
       },
+      tooltext: buildToolTip(widget, null, series.Name),
       color: getSeriesPositionColor(index + 1)
     };
     return item;
@@ -409,7 +466,7 @@ function getTrimedLabelText(label) {
   return label.substring(0, 17) + "...";
 }
 
-function buildDataSet(seriesMeasures) {
+function buildDataSet(seriesMeasures, widget) {
   var dataSet = [];
   var seriesPosition = 1;
   seriesMeasures.forEach(function (seriesMeasure) {
@@ -419,20 +476,26 @@ function buildDataSet(seriesMeasures) {
         id: {
           GroupById: e.GroupById,
           MeasureFieldId: seriesMeasure.MeasureFieldId
-        }
+        },
+        tooltext: buildToolTip(widget, e.Value, seriesMeasure.Name)
       };
     });
+    var color = getSeriesPositionColor(seriesPosition);
     dataSet.push({
       data: datas,
       seriesname: seriesMeasure.Name,
-      color: getSeriesPositionColor(seriesPosition)
+      color: color,
+      anchorBgColor: color,
+      anchorBorderColor: "#FFFFFF",
+      anchorBorderThickness: "2",
+      anchorHoverColor: color
     });
     seriesPosition++;
   });
   return dataSet;
 }
 
-function buildCategories(seriesMeasures) {
+function buildCategories(seriesMeasures, widget) {
   var categories = seriesMeasures[0].SeriesMeasureVulues.map(function (e) {
     return {
       label: e.Label
@@ -445,15 +508,7 @@ function buildCategories(seriesMeasures) {
   return result;
 }
 
-var mainYellowColor = "#F6CF33";
-var mainRedColor = "#EE5F77";
-var mainGreenColor = "#4AC76F";
-var mainTurquoiseColor = "#32C7C7";
-var mainBlueColor = "#369CFB";
-var mainPurpleColor = "#935BE0";
-var mainOrangeColor = "#FAAD14";
-
-var defautFontSize = "11";
+var defautFontSize = "10";
 var defautFont = "Manrope";
 function BuildFusionChartObject(seriesMeasures, widget) {
   handelNullLabels(seriesMeasures);
@@ -490,7 +545,7 @@ function handelNullLabels(seriesMeasures) {
 function getBarObject(seriesMeasures, widget) {
   var chart = getDefaultChartobject();
   chart.type = "scrollbar2d";
-  var chartInfo = getDefaultChartInfo(widget);
+  var chartInfo = getDefaultChartInfo();
   chartInfo.scrollHeight = "5";
   chartInfo.scrollWidth = "5";
   chartInfo.scrollPadding = "8";
@@ -499,18 +554,17 @@ function getBarObject(seriesMeasures, widget) {
   chartInfo.showLegend = (seriesMeasures === null || seriesMeasures === void 0 ? void 0 : seriesMeasures.length) > 1 ? "1" : "0";
   chartInfo.legendItemFont = defautFont;
   chartInfo.legendItemFontSize = defautFontSize;
-  chartInfo.divLineDashed = "1";
-  chartInfo.divLineDashLen = "7";
+  setLineDash(chartInfo);
   chartInfo.chartTopMargin = "10";
   chartInfo.chartBottomMargin = "10";
-  chart.dataSource = getCategoriesBasedDataSource(chartInfo, seriesMeasures);
+  chart.dataSource = getCategoriesBasedDataSource(chartInfo, seriesMeasures, widget);
   return chart;
 }
 
 function getLineObject(seriesMeasures, widget) {
   var chart = getDefaultChartobject();
-  chart.type = "msspline";
-  var chartInfo = getDefaultChartInfo(widget);
+  chart.type = "scrollline2d";
+  var chartInfo = getDefaultChartInfo();
   chartInfo.scrollHeight = "5";
   chartInfo.scrollWidth = "5";
   chartInfo.scrollPadding = "8";
@@ -519,33 +573,36 @@ function getLineObject(seriesMeasures, widget) {
   chartInfo.showLegend = (seriesMeasures === null || seriesMeasures === void 0 ? void 0 : seriesMeasures.length) > 1 ? "1" : "0";
   chartInfo.legendItemFont = defautFont;
   chartInfo.legendItemFontSize = defautFontSize;
-  chartInfo.divLineDashed = "1";
-  chartInfo.divLineDashLen = "7";
+  setLineDash(chartInfo);
   chartInfo.chartTopMargin = "10";
   chartInfo.chartBottomMargin = "10";
   chartInfo.chartLeftMargin = "20";
   chartInfo.chartRightMargin = "50";
-  chart.dataSource = getCategoriesBasedDataSource(chartInfo, seriesMeasures);
+  chartInfo.anchorradius = "5";
+  chartInfo.canvasBottomPadding = "10";
+  chart.dataSource = getCategoriesBasedDataSource(chartInfo, seriesMeasures, widget);
   return chart;
 }
 
 function getDonutObject(seriesMeasures, widget) {
   var chart = getDefaultChartobject();
   chart.type = "doughnut2d";
-  var chartInfo = getDefaultChartInfo(widget);
+  var chartInfo = getDefaultChartInfo();
   chartInfo.showPercentValues = "0";
   chartInfo.showValues = "0";
   chartInfo.showLegend = "0";
   chartInfo.legendCaptionFontSize = defautFontSize;
   chartInfo.legendCaptionFont = defautFont;
-  chart.dataSource = getSimpleDataSource(chartInfo, seriesMeasures);
+  chartInfo.labelFontSize = defautFontSize;
+  chartInfo.labelFont = defautFont;
+  chart.dataSource = getSimpleDataSource(chartInfo, seriesMeasures, widget);
   return chart;
 }
 
 function getPieObject(seriesMeasures, widget) {
   var chart = getDefaultChartobject();
   chart.type = "pie2d";
-  var chartInfo = getDefaultChartInfo(widget);
+  var chartInfo = getDefaultChartInfo();
   chartInfo.showPercentValues = "0";
   chartInfo.showValues = "0";
   chartInfo.showLegend = "0";
@@ -553,14 +610,14 @@ function getPieObject(seriesMeasures, widget) {
   chartInfo.legendCaptionFont = defautFont;
   chartInfo.labelFontSize = defautFontSize;
   chartInfo.labelFont = defautFont;
-  chart.dataSource = getSimpleDataSource(chartInfo, seriesMeasures);
+  chart.dataSource = getSimpleDataSource(chartInfo, seriesMeasures, widget);
   return chart;
 }
 
 function getColumnObject(seriesMeasures, widget) {
   var chart = getDefaultChartobject();
   chart.type = "scrollcolumn2d";
-  var chartInfo = getDefaultChartInfo(widget);
+  var chartInfo = getDefaultChartInfo();
   chartInfo.scrollHeight = "5";
   chartInfo.scrollWidth = "5";
   chartInfo.scrollPadding = "8";
@@ -569,16 +626,24 @@ function getColumnObject(seriesMeasures, widget) {
   chartInfo.showLegend = (seriesMeasures === null || seriesMeasures === void 0 ? void 0 : seriesMeasures.length) > 1 ? "1" : "0";
   chartInfo.legendItemFont = defautFont;
   chartInfo.legendItemFontSize = defautFontSize;
-  chartInfo.divLineDashed = "1";
-  chartInfo.divLineDashLen = "7";
+  setLineDash(chartInfo);
   chartInfo.chartTopMargin = "10";
   chartInfo.chartBottomMargin = "10";
   chartInfo.chartLeftMargin = "20";
   chartInfo.chartRightMargin = "50";
-  chart.dataSource = getCategoriesBasedDataSource(chartInfo, seriesMeasures);
+  chart.dataSource = getCategoriesBasedDataSource(chartInfo, seriesMeasures, widget);
   return chart;
 }
 
+function setLineDash(chartInfo) {
+  chartInfo.divLineDashed = "1";
+  chartInfo.divLineDashLen = "5";
+  chartInfo.divLineDashGap = "5";
+  chartInfo.divLineColor = "#E7E7E7";
+  chartInfo.divLineAlpha = "100";
+  chartInfo.divLineThickness = "1";
+}
+
 function getDefaultChartobject() {
   var chart = {};
   chart.type = "column2d";
@@ -601,45 +666,9 @@ function getDefaultChartInfo(widget) {
   chart.chartRightMargin = "40";
   chart.toolTipBgColor = "#FFFFFF";
   chart.showToolTipShadow = "1";
-  chart.plottooltext = getTooltip(widget);
   return chart;
 }
 
-function getTooltip(widget) {
-  return "\n    <div style=\"min-width: 108px;\">\n        <div style=\"display: flex;align-items: center;margin-bottom: 6px;\">\n            <span style=\"margin: 0; height: 10px; width: 10px; background-color: #369CFB; border-radius: 50%; display: inline-block;\"></span>\n            <p style=\" margin: 0; margin-left: 4px;font-family: 'Manrope'; font-style: normal;font-weight: 400; font-size: 11px; line-height: 100%;  color: #323232;  flex: none; order: 1;flex-grow: 0;\">$label</p>\n        </div>\n        <hr style=\"margin: 0;border-top: 1px solid #F0F0F0;\">\n        <div style=\"display: flex;align-items: center;margin:0;margin-top: 6px;\">\n            <p style=\"margin: 0;font-family: 'Manrope';font-style: normal;font-weight: 400; font-size: 11px;line-height: 100%;color: #A4A4A4;flex: none;order: 0;flex-grow: 0;\">Count:</p>\n            <p style=\"margin: 0;margin-left: 6px;font-family: 'Manrope';font-style: normal;font-weight: 500;font-size: 11px;line-height: 100%;  color: #323232;flex: none; order: 1;flex-grow: 0;\">$dataValue</p>\n            " + getTooltipPercentage(widget) + " </div>\n    </div>\n    ";
-}
-function getTooltipPercentage(widget) {
-  if (widget.TypeCode != "donut" && widget.TypeCode != "pie") return "";
-  return "\n    <p style=\"margin: 0;margin-left: 2px;font-family: 'Manrope';font-style: normal;font-weight: 500;font-size: 11px;line-height: 100%;  color: #A4A4A4;flex: none; order: 1;flex-grow: 0;\">($percentValue)</p>\n    ";
-}
-function getSeriesPositionColor(position) {
-  switch (position) {
-    case 1:
-      return mainBlueColor;
-
-    case 2:
-      return mainGreenColor;
-
-    case 3:
-      return mainYellowColor;
-
-    case 4:
-      return mainTurquoiseColor;
-
-    case 5:
-      return mainPurpleColor;
-
-    case 6:
-      return mainOrangeColor;
-
-    case 7:
-      return mainRedColor;
-
-    default:
-      return null;
-  }
-}
-
 ReactFC.fcRoot(FusionCharts, Charts, FusionTheme);
 FusionCharts.options['license']({
   key: 'prD4C-8eiA7A3A3C7E6G4B4A3J4C7B2D3D2nyqE1C3fd1npaE4D4tlA-21D7E4F4F1F1E1F4F1A10A8C2C5F5E2F2D1hwqD1B5D1aG4A19A32twbC6D3G4lhJ-7A9C11A5B-13ddA2I3A1B9B3D7A2B4G2H3H1F-7smC8B2XB4cetB8A7A5mxD3SG4F2tvgB2A3B2E4C3I3C7B3A4A3A2D3D2G4J-7==',