logitude-dashboard-library 1.4.10 → 1.4.12

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,38 @@
+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;
+}
+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

@@ -202,15 +202,20 @@ var DashboardAnalyticsService = /*#__PURE__*/function () {
 }();
 
 var KpiChart = function KpiChart(props) {
+  var _widget$current9;
+
   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];
 
   React.useEffect(function () {
@@ -239,7 +244,78 @@ var KpiChart = function KpiChart(props) {
     });
   };
 
-  return React__default.createElement("div", {
+  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
+    });
+  };
+
+  function getRatioComponent() {
+    var _widget$current3;
+
+    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, " %"));
+  }
+
+  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;
+  }
+
+  function getPreviousValueComponent() {
+    var _widget$current8;
+
+    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'
   }, React__default.createElement(progressspinner.ProgressSpinner, {
     style: {
@@ -248,7 +324,30 @@ var KpiChart = function KpiChart(props) {
     },
     strokeWidth: "4",
     animationDuration: "2s"
-  }));
+  })) : !error ? React__default.createElement("div", {
+    className: "dl-kpi-container-click",
+    onClick: kpiClick
+  }, React__default.createElement("div", {
+    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), (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.Unit), getRatioComponent()), getPreviousValueComponent())) : 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) {
@@ -271,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),
@@ -298,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;
@@ -310,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) {
@@ -320,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
@@ -346,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);
@@ -391,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";
@@ -400,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);
+  var chartInfo = getDefaultChartInfo();
   chartInfo.scrollHeight = "5";
   chartInfo.scrollWidth = "5";
   chartInfo.scrollPadding = "8";
@@ -420,33 +573,32 @@ 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);
+  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);
+  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";
@@ -454,14 +606,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";
@@ -470,16 +622,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";
@@ -502,45 +662,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==',
@@ -618,8 +742,8 @@ var FusionChart = function FusionChart(props) {
     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"