logitude-dashboard-library 1.4.5 → 1.4.7

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

@@ -1,4 +1,4 @@
-@import url('https://fonts.cdnfonts.com/css/manrope');
+@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap');
 
 $blue: #2C99F7;
 $bg-color: #ffffff;
@@ -311,7 +311,7 @@ $dark-grey: #717585;
     h1 {
         text-transform: capitalize;
         font-size: 15px;
-        font-family: 'Manrope';
+        font-family: 'Manrope', sans-serif;
         font-style: normal;
         color: #292D30;
         margin-top: 0;
@@ -332,11 +332,6 @@ $dark-grey: #717585;
     position: absolute;
 }
 
-
-
-
-
-
 .dl-grid--bordered>div {
     background-color: #ECECEC;
 }
@@ -442,14 +437,14 @@ $dark-grey: #717585;
 
 
 .kpIcontainer {
+    width: 100%;
     height: 100%;
-    flex-direction: column;
+    flex-direction: row;
     box-sizing: border-box;
-    display: flex;
-    place-content: center;
-    align-items: center;
+    display: inline-block;
     gap: 20px;
     cursor: pointer;
+   
 }
 
 .kpIHeader {
@@ -481,15 +476,15 @@ $dark-grey: #717585;
 }
 
 .dl-kpi-arrow-up {
-    border-left: 10px solid transparent;
-    border-right: 10px solid transparent;
-    border-bottom: 10px solid greenyellow;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    border-bottom: 4px solid #4AC76F;
 }
 
 .dl-kpi-arrow-down {
-    border-left: 10px solid transparent;
-    border-right: 10px solid transparent;
-    border-top: 10px solid red;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    border-top: 4px solid red;
 }
 
 .dl-kpi-same-line {
@@ -499,4 +494,48 @@ $dark-grey: #717585;
 
 .dl-kpi-margin {
     margin-right: 4px;
+}
+
+.dl-kpi-value{
+    height: 31px;
+
+    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;
+    font-weight: 600;
+    font-size: 20px;
+    line-height: 125%;
+    color: #292D30;
+    padding-left: 4px;
+    padding-top: 5px;
+    
+}
+
+.dl-kpi-ratio {
+    height: 15px;
+    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;
+}
+.dl-kpi-textTrimming {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
 }

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

@@ -0,0 +1,4 @@
+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;

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

@@ -0,0 +1,11 @@
+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: (props: FusionChartProps) => JSX.Element;
+export default FusionChart;

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

@@ -0,0 +1,4 @@
+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;

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

@@ -0,0 +1,41 @@
+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/FusionColors.d.ts

@@ -0,0 +1,18 @@
+export declare const mainYellowColor = "#F6CF33";
+export declare const mainRedColor = "#EE5F77";
+export declare const mainGreenColor = "#4AC76F";
+export declare const mainTurquoiseColor = "#32C7C7";
+export declare const mainBlueColor = "#369CFB";
+export declare const mainPurpleColor = "#935BE0";
+export declare const mainOrangeColor = "#FAAD14";
+export declare const lightYellowColor = "#FBE799";
+export declare const lightRedColor = "#F7AFBB";
+export declare const lightGreenColor = "#A4E3B7";
+export declare const lightTurquoiseColor = "#99E3E3";
+export declare const lightBlueColor = "#9BCDFD";
+export declare const lightPurpleColor = "#C9ADF0";
+export declare const lightOrangeColor = "#FDD689";
+export declare const grey1Color = "#F6F6F6";
+export declare const grey2Color = "#F0F0F0";
+export declare const grey3Color = "#D9D9D9";
+export declare const grey4Color = "#A4A4A4";

package/dist/index.js

@@ -7,12 +7,12 @@ var button = require('primereact/button');
 var overlaypanel = require('primereact/overlaypanel');
 var progressspinner = require('primereact/progressspinner');
 var axios = _interopDefault(require('axios'));
+var tooltip = require('primereact/tooltip');
 var ReactFC = _interopDefault(require('react-fusioncharts'));
 var FusionCharts = _interopDefault(require('fusioncharts'));
 var Charts = _interopDefault(require('fusioncharts/fusioncharts.charts'));
 var FusionTheme = _interopDefault(require('fusioncharts/themes/fusioncharts.theme.fusion'));
 var useResizeObserver = _interopDefault(require('use-resize-observer'));
-var tooltip = require('primereact/tooltip');
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -202,8 +202,6 @@ var DashboardAnalyticsService = /*#__PURE__*/function () {
 }();
 
 var KpiChart = function KpiChart(props) {
-  var _widget$current7;
-
   var _useState = React.useState(false),
       dataLoaded = _useState[0],
       setDataLoaded = _useState[1];
@@ -227,10 +225,7 @@ var KpiChart = function KpiChart(props) {
       setCheckValuesValidity = _useState5[1];
 
   var _useState6 = React.useState(false),
-      checkVisibleUnit = _useState6[0],
       setVisibilityUnit = _useState6[1];
-
-  var prev = "";
   React.useEffect(function () {
     widget.current = props.customChartProps.widget;
     setDataLoaded(false);
@@ -289,7 +284,7 @@ var KpiChart = function KpiChart(props) {
 
     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.Value) === 0) 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);
   };
 
@@ -297,7 +292,7 @@ var KpiChart = function KpiChart(props) {
     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) return;
+    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);
   };
 
@@ -316,18 +311,14 @@ var KpiChart = function KpiChart(props) {
   }, React__default.createElement("div", {
     className: "dl-kpi-same-line"
   }, React__default.createElement("div", {
-    className: "dl-kpi-margin"
-  }, data === null || data === void 0 ? void 0 : data.Value, " "), React__default.createElement("div", null, (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"
-  }, React__default.createElement("div", {
-    className: "dl-kpi-margin"
-  }, arrowColorDirection), React__default.createElement("div", null, data === null || data === void 0 ? void 0 : data.Ratio)) : null, widget !== null && widget !== void 0 && (_widget$current7 = widget.current) !== null && _widget$current7 !== void 0 && _widget$current7.TimeOverTime ? React__default.createElement("div", {
-    className: "dl-kpi-same-line"
+    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"
-  }, prev), React__default.createElement("div", {
-    className: "dl-kpi-margin"
-  }, data === null || data === void 0 ? void 0 : data.ComparisonValue), React__default.createElement("div", null, checkVisibleUnit && (data === null || data === void 0 ? void 0 : data.Unit))) : null) : React__default.createElement("div", {
+  }, 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"
@@ -361,95 +352,18 @@ var CustomChart = function CustomChart(props) {
   }, project());
 };
 
-function BuildFusionChartObject(seriesMeasures, widget) {
-  handelNullLabels(seriesMeasures);
-  var defaultChart = getDefaultChartobject(seriesMeasures, widget);
-
-  switch (widget === null || widget === void 0 ? void 0 : widget.TypeCode) {
-    case 'bar':
-      return getBarObject(seriesMeasures, defaultChart);
-
-    case 'line':
-      return getLineObject(seriesMeasures, defaultChart);
-
-    case 'pie':
-      return getPieObject(seriesMeasures, defaultChart);
-
-    case 'donut':
-      return getDonutObject(seriesMeasures, defaultChart);
-
-    default:
-      return defaultChart;
-  }
-}
-
-function handelNullLabels(seriesMeasures) {
-  seriesMeasures.forEach(function (element) {
-    element.SeriesMeasureVulues.forEach(function (value) {
-      if (!value.Label || value.Label == '') value.Label = 'Not defined';
-    });
-  });
-}
-
-function getBarObject(seriesMeasures, chart) {
-  chart.type = "scrollbar2d";
-  return chart;
-}
-
-function getLineObject(seriesMeasures, chart) {
-  chart.type = "scrollline2d";
-  return chart;
-}
-
-function getDonutObject(seriesMeasures, chart) {
-  chart.type = "doughnut2d";
-  return chart;
-}
-
-function getPieObject(seriesMeasures, chart) {
-  chart.type = "pie2d";
-  return chart;
-}
-
-function getDefaultChartobject(seriesMeasures, widget) {
-  var chart = {};
-  chart.type = "column2d";
-  chart.width = "100%";
-  chart.height = "100%";
-  chart.dataFormat = "json";
-  buildChartDataSource(chart, widget, seriesMeasures);
-  return chart;
-}
-
-function buildChartDataSource(chart, widget, seriesMeasures) {
-  if (!seriesMeasures || !seriesMeasures[0]) return;
-  var chartinfo = {
-    theme: "fusion",
-    scrollHeight: "5",
-    scrollWidth: "5",
-    scrollPadding: "8",
-    flatScrollBars: "1",
-    enableSlicing: "0",
-    chartLeftMargin: "20",
-    chartTopMargin: "20",
-    chartRightMargin: "20",
-    chartBottomMargin: "20",
-    showPercentValues: (widget === null || widget === void 0 ? void 0 : widget.TypeCode) == "donut" || (widget === null || widget === void 0 ? void 0 : widget.TypeCode) == "pie" ? "0" : "1",
-    showValues: (widget === null || widget === void 0 ? void 0 : widget.TypeCode) == "donut" || (widget === null || widget === void 0 ? void 0 : widget.TypeCode) == "pie" ? "0" : "1",
-    showLegend: ((widget === null || widget === void 0 ? void 0 : widget.TypeCode) == "bar" || (widget === null || widget === void 0 ? void 0 : widget.TypeCode) == "line") && (seriesMeasures === null || seriesMeasures === void 0 ? void 0 : seriesMeasures.length) > 1 ? "1" : "0"
+function getCategoriesBasedDataSource(chartInfo, seriesMeasures) {
+  if (!seriesMeasures || !seriesMeasures[0]) return {};
+  return {
+    chart: chartInfo,
+    categories: buildCategories(seriesMeasures),
+    dataset: buildDataSet(seriesMeasures)
   };
-
-  if ((widget === null || widget === void 0 ? void 0 : widget.TypeCode) == "bar" || (widget === null || widget === void 0 ? void 0 : widget.TypeCode) == "line") {
-    chart.dataSource = {
-      chart: chartinfo,
-      categories: buildCategories(seriesMeasures),
-      dataset: buildDataSet(seriesMeasures)
-    };
-    return;
-  }
-
-  chart.dataSource = {
-    chart: chartinfo,
+}
+function getSimpleDataSource(chartInfo, seriesMeasures) {
+  if (!seriesMeasures || !seriesMeasures[0]) return {};
+  return {
+    chart: chartInfo,
     data: buildDataSource(seriesMeasures)
   };
 }
@@ -457,16 +371,17 @@ function buildChartDataSource(chart, widget, seriesMeasures) {
 function buildDataSource(values) {
   var data = [];
   if (!values || !values[0]) return data;
-  data = values[0].SeriesMeasureVulues.map(function (e) {
-    return {
+  data = values[0].SeriesMeasureVulues.map(function (e, index) {
+    var item = {
       value: e.Value,
       label: getTrimedLabelText(e.Label),
       id: {
         GroupById: e.GroupById,
         MeasureFieldId: values[0].MeasureFieldId
       },
-      tooltext: e.Label + ' ,$dataValue ' + ', $percentValue'
+      color: getSeriesPositionColor(index + 1)
     };
+    return item;
   });
   return data;
 }
@@ -478,6 +393,7 @@ function getTrimedLabelText(label) {
 
 function buildDataSet(seriesMeasures) {
   var dataSet = [];
+  var seriesPosition = 1;
   seriesMeasures.forEach(function (seriesMeasure) {
     var datas = seriesMeasure.SeriesMeasureVulues.map(function (e) {
       return {
@@ -490,8 +406,10 @@ function buildDataSet(seriesMeasures) {
     });
     dataSet.push({
       data: datas,
-      seriesname: seriesMeasure.Name
+      seriesname: seriesMeasure.Name,
+      color: getSeriesPositionColor(seriesPosition)
     });
+    seriesPosition++;
   });
   return dataSet;
 }
@@ -509,6 +427,191 @@ 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 defautFont = "Manrope";
+function BuildFusionChartObject(seriesMeasures, widget) {
+  handelNullLabels(seriesMeasures);
+
+  switch (widget === null || widget === void 0 ? void 0 : widget.TypeCode) {
+    case 'bar':
+      return getBarObject(seriesMeasures, widget);
+
+    case 'line':
+      return getLineObject(seriesMeasures, widget);
+
+    case 'pie':
+      return getPieObject(seriesMeasures, widget);
+
+    case 'donut':
+      return getDonutObject(seriesMeasures, widget);
+
+    case 'column':
+      return getColumnObject(seriesMeasures, widget);
+
+    default:
+      return {};
+  }
+}
+
+function handelNullLabels(seriesMeasures) {
+  seriesMeasures.forEach(function (element) {
+    element.SeriesMeasureVulues.forEach(function (value) {
+      if (!value.Label || value.Label == '') value.Label = 'Not defined';
+    });
+  });
+}
+
+function getBarObject(seriesMeasures, widget) {
+  var chart = getDefaultChartobject();
+  chart.type = "scrollbar2d";
+  var chartInfo = getDefaultChartInfo(widget);
+  chartInfo.scrollHeight = "5";
+  chartInfo.scrollWidth = "5";
+  chartInfo.scrollPadding = "8";
+  chartInfo.flatScrollBars = "1";
+  chartInfo.showPercentValues = "1";
+  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";
+  chart.dataSource = getCategoriesBasedDataSource(chartInfo, seriesMeasures);
+  return chart;
+}
+
+function getLineObject(seriesMeasures, widget) {
+  var chart = getDefaultChartobject();
+  chart.type = "msspline";
+  var chartInfo = getDefaultChartInfo(widget);
+  chartInfo.scrollHeight = "5";
+  chartInfo.scrollWidth = "5";
+  chartInfo.scrollPadding = "8";
+  chartInfo.flatScrollBars = "1";
+  chartInfo.showPercentValues = "1";
+  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";
+  chart.dataSource = getCategoriesBasedDataSource(chartInfo, seriesMeasures);
+  return chart;
+}
+
+function getDonutObject(seriesMeasures, widget) {
+  var chart = getDefaultChartobject();
+  chart.type = "doughnut2d";
+  var chartInfo = getDefaultChartInfo(widget);
+  chartInfo.showPercentValues = "0";
+  chartInfo.showValues = "0";
+  chartInfo.showLegend = "0";
+  chartInfo.legendCaptionFontSize = defautFontSize;
+  chartInfo.legendCaptionFont = defautFont;
+  chart.dataSource = getSimpleDataSource(chartInfo, seriesMeasures);
+  return chart;
+}
+
+function getPieObject(seriesMeasures, widget) {
+  var chart = getDefaultChartobject();
+  chart.type = "pie2d";
+  var chartInfo = getDefaultChartInfo(widget);
+  chartInfo.showPercentValues = "0";
+  chartInfo.showValues = "0";
+  chartInfo.showLegend = "0";
+  chartInfo.legendCaptionFontSize = defautFontSize;
+  chartInfo.legendCaptionFont = defautFont;
+  chartInfo.labelFontSize = defautFontSize;
+  chartInfo.labelFont = defautFont;
+  chart.dataSource = getSimpleDataSource(chartInfo, seriesMeasures);
+  return chart;
+}
+
+function getColumnObject(seriesMeasures, widget) {
+  var chart = getDefaultChartobject();
+  chart.type = "scrollcolumn2d";
+  var chartInfo = getDefaultChartInfo(widget);
+  chartInfo.scrollHeight = "5";
+  chartInfo.scrollWidth = "5";
+  chartInfo.scrollPadding = "8";
+  chartInfo.flatScrollBars = "1";
+  chartInfo.showPercentValues = "1";
+  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";
+  chart.dataSource = getCategoriesBasedDataSource(chartInfo, seriesMeasures);
+  return chart;
+}
+
+function getDefaultChartobject() {
+  var chart = {};
+  chart.type = "column2d";
+  chart.width = "100%";
+  chart.height = "100%";
+  chart.dataFormat = "json";
+  return chart;
+}
+
+function getDefaultChartInfo(widget) {
+  var chart = {};
+  chart.theme = "fusion";
+  chart.baseFont = defautFont;
+  chart.baseFontSize = defautFontSize;
+  chart.enableSlicing = "0";
+  chart.enableRotation = "0";
+  chart.chartLeftMargin = "20";
+  chart.chartTopMargin = "20";
+  chart.chartRightMargin = "20";
+  chart.chartBottomMargin = "20";
+  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==',