@adiba-banking-cloud/backoffice 0.0.31 → 0.0.33

package/build/index.cjs.js/index.js

@@ -5,8 +5,8 @@ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var React = require('react');
 var HighchartsReact = require('highcharts-react-official');
 var HighchartsRounded = require('highcharts-rounded-corners');
-var IconSax = require('iconsax-react');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var IconSax = require('iconsax-react');
 var core = require('@mantine/core');
 var reactRouterDom = require('react-router-dom');
 var hooks = require('@mantine/hooks');
@@ -36,6 +36,21 @@ function _interopNamespaceDefault(e) {
 	return Object.freeze(n);
 }
 
+function _mergeNamespaces(n, m) {
+	m.forEach(function (e) {
+		e && typeof e !== 'string' && !Array.isArray(e) && Object.keys(e).forEach(function (k) {
+			if (k !== 'default' && !(k in n)) {
+				var d = Object.getOwnPropertyDescriptor(e, k);
+				Object.defineProperty(n, k, d.get ? d : {
+					enumerable: true,
+					get: function () { return e[k]; }
+				});
+			}
+		});
+	});
+	return Object.freeze(n);
+}
+
 var IconSax__namespace = /*#__PURE__*/_interopNamespaceDefault(IconSax);
 
 function getDefaultExportFromCjs (x) {
@@ -11170,7 +11185,12 @@ function requireHighcharts() {
 var highchartsExports = requireHighcharts();
 var Highcharts = /*@__PURE__*/getDefaultExportFromCjs(highchartsExports);
 
-const initChart$1 = props => {
+var Highcharts$1 = /*#__PURE__*/_mergeNamespaces({
+	__proto__: null,
+	default: Highcharts
+}, [highchartsExports]);
+
+const initChart$2 = props => {
   return {
     chart: {
       type: "column",
@@ -11292,8 +11312,8 @@ const createAreaFillGradient = function (baseColor) {
   };
 };
 
-function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 
 // Initialize Highcharts with rounded corners
 if (typeof window !== "undefined") {
@@ -11302,8 +11322,8 @@ if (typeof window !== "undefined") {
 const Column = props => {
   const chartRef = React.useRef(null);
   const chartOptions = React.useMemo(() => {
-    const column = _objectSpread$1({}, props);
-    return _objectSpread$1(_objectSpread$1({}, initChart$1(column)), initSeries$1(column));
+    const column = _objectSpread$3({}, props);
+    return _objectSpread$3(_objectSpread$3({}, initChart$2(column)), initSeries$2(column));
   }, [props]);
   React.useEffect(() => {
     if (chartRef.current && chartRef.current.chart) {
@@ -11349,7 +11369,7 @@ const StackedColumn = props => {
     equalizer: false
   }));
 };
-const initSeries$1 = props => {
+const initSeries$2 = props => {
   const renderXAxis = categories => ({
     categories,
     labels: {
@@ -11406,7 +11426,7 @@ const initSeries$1 = props => {
         enableMouseTracking: false,
         showInLegend: false
       });
-      const mainSeries = _objectSpread$1(_objectSpread$1({}, fillSeries(boundary)), {
+      const mainSeries = _objectSpread$3(_objectSpread$3({}, fillSeries(boundary)), {
         name: props.yAxisLabel[0],
         color: seriesColors ? seriesColors[0] : "gray",
         data: seriesData[0],
@@ -11446,7 +11466,7 @@ const initSeries$1 = props => {
         pointWidth: undefined
       }
     };
-    const plot = _objectSpread$1(_objectSpread$1({}, {
+    const plot = _objectSpread$3(_objectSpread$3({}, {
       column: {
         borderWidth: 0,
         borderRadius: 10
@@ -11462,7 +11482,7 @@ const initSeries$1 = props => {
   };
 };
 
-const initChart = props => {
+const initChart$1 = props => {
   return {
     chart: {
       type: "areaspline",
@@ -11501,13 +11521,13 @@ const initChart = props => {
   };
 };
 
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 const Area = props => {
   const chartRef = React.useRef(null);
   const chartOptions = React.useMemo(() => {
-    const area = _objectSpread({}, props);
-    return _objectSpread(_objectSpread({}, initChart(area)), initSeries(area));
+    const area = _objectSpread$2({}, props);
+    return _objectSpread$2(_objectSpread$2({}, initChart$1(area)), initSeries$1(area));
   }, [props]);
   React.useEffect(() => {
     if (chartRef.current && chartRef.current.chart) {
@@ -11534,7 +11554,7 @@ const SimpleArea = props => {
   };
   return /*#__PURE__*/React.createElement(Area, chartOptions);
 };
-const initSeries = props => {
+const initSeries$1 = props => {
   const renderXAxis = () => {
     var _props$colors;
     const crosshair = props.withCrossHair ? {
@@ -11568,7 +11588,7 @@ const initSeries = props => {
     const labels = {
       color: "#575E77"
     };
-    return _objectSpread(_objectSpread({}, defaults), {
+    return _objectSpread$2(_objectSpread$2({}, defaults), {
       labels
     });
   };
@@ -11605,6 +11625,132 @@ const initSeries = props => {
   };
 };
 
+const _excluded$9 = ["withLegend", "centerLabel", "centerValue"];
+function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+const initChart = _ref => {
+  let {
+      withLegend,
+      centerLabel = "",
+      centerValue = ""
+    } = _ref;
+    _objectWithoutProperties(_ref, _excluded$9);
+  return {
+    chart: {
+      type: "pie",
+      events: {
+        render: function () {
+          const chart = this,
+            series = chart.series[0];
+          let customLabel = chart.customLabel;
+          if (!customLabel) {
+            customLabel = chart.customLabel = chart.renderer.label("<strong>".concat(centerValue, "</strong><br/>").concat(centerLabel), 0, 0, undefined, undefined, undefined, true, undefined, "center").css({
+              textAlign: "center"
+            }).add();
+          }
+          const x = series.center[0] + chart.plotLeft;
+          const y = series.center[1] + chart.plotTop - customLabel.getBBox().height / 2;
+          customLabel.attr({
+            x,
+            y
+          });
+
+          // Set font size and colour via configuration options
+          customLabel.attr({
+            text: "<span style=\"color: #0F193D; font-size: 24px; font-weight: 800\">".concat(centerValue, "</span><br/><span style=\"font-size: 12px; color: #878C9E\">").concat(centerLabel, "</span>"),
+            align: "center",
+            verticalAlign: "middle",
+            x: x,
+            y: y
+          });
+        }
+      }
+    },
+    title: {
+      text: ""
+    },
+    exporting: {
+      enabled: false
+    },
+    tooltip: {
+      pointFormat: "{series.name}: <b>{point.percentage:.0f}%</b>"
+    },
+    legend: !withLegend ? {
+      enabled: false
+    } : _objectSpread$1(_objectSpread$1({}, {
+      enabled: true,
+      layout: "vertical",
+      verticalAlign: "middle",
+      align: "right",
+      labelFormat: '{name}  <span style="opacity: 0.4">{y}</span>'
+    }), withLegend && typeof withLegend !== "boolean" ? withLegend : {}),
+    plotOptions: {
+      pie: {
+        allowPointSelect: true,
+        cursor: "pointer",
+        paddingLeft: 0,
+        borderRadius: 8,
+        dataLabels: {
+          enabled: true,
+          format: "{point.percentage:.0f}%",
+          distance: -30,
+          style: {
+            fontWeight: "bold",
+            fontSize: "15px",
+            textOutline: "1px contrast"
+          }
+        },
+        showInLegend: true
+      }
+    },
+    credits: {
+      enabled: false
+    },
+    series: []
+  };
+};
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+const DonutChart = props => {
+  const chartRef = React.useRef(null);
+  const chartOptions = React.useMemo(() => {
+    const area = _objectSpread({}, props);
+    return _objectSpread(_objectSpread({}, initChart(area)), initSeries(area));
+  }, [props]);
+  React.useEffect(() => {
+    if (chartRef.current && chartRef.current.chart) {
+      chartRef.current.chart.update(chartOptions, true);
+    }
+  }, [chartOptions]);
+  return /*#__PURE__*/React.createElement(HighchartsReact, {
+    highcharts: Highcharts$1,
+    ref: chartRef,
+    options: chartOptions
+  });
+};
+const initSeries = donut => {
+  const {
+    series,
+    categories,
+    colors,
+    title
+  } = donut;
+  const data = series.map((item, index) => ({
+    name: categories[index],
+    y: item,
+    color: colors && colors[index] ? colors[index] : "#0F193D"
+  }));
+  return {
+    series: [{
+      type: "pie",
+      innerSize: "60%",
+      name: title,
+      data
+    }]
+  };
+};
+
 const Icons = _ref => {
   let {
     name = "Home",
@@ -11750,6 +11896,7 @@ const DropdownItem = _ref2 => {
     activeBg = "gray.1",
     activeColor = "altiba",
     inactiveColor = "adiba",
+    id,
     onClick
   } = _ref2;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(core.Button, {
@@ -11758,7 +11905,8 @@ const DropdownItem = _ref2 => {
     mih: 70,
     bg: active ? activeBg : {},
     c: active ? activeColor : inactiveColor,
-    onClick: onClick
+    onClick: onClick,
+    "data-index": id
   }, /*#__PURE__*/React.createElement(core.Group, {
     w: 320
   }, /*#__PURE__*/React.createElement(Icons, icon), /*#__PURE__*/React.createElement(core.Stack, {
@@ -12778,7 +12926,6 @@ const SimpleBody = _ref => {
     h: 50
   }, columns.map((column, index) => {
     const columnIndex = column.id;
-    console.log("column: ".concat(column.id, ", type: ").concat(typeof row[column.id]));
     return /*#__PURE__*/React.createElement(core.Table.Td, {
       key: index
     }, typeof row[columnIndex] === 'function' ? row[columnIndex](columnIndex) : row[columnIndex] || "");
@@ -12886,6 +13033,7 @@ exports.ApplicationMenu = ApplicationMenu;
 exports.ApplicationPanel = ApplicationPanel;
 exports.AvatarLabelPanel = AvatarLabelPanel;
 exports.ConnectionPanel = ConnectionPanel;
+exports.DonutChart = DonutChart;
 exports.DynamicLogo = DynamicLogo;
 exports.DynamicShigaLogo = DynamicShigaLogo;
 exports.EqualizerColumn = EqualizerColumn;

package/build/index.esm.js/index.js

@@ -3,8 +3,8 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import React, { useRef, useMemo, useEffect } from 'react';
 import HighchartsReact from 'highcharts-react-official';
 import HighchartsRounded from 'highcharts-rounded-corners';
-import * as IconSax from 'iconsax-react';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import * as IconSax from 'iconsax-react';
 import { Center, Image, Space, Popover, Button, Stack, Divider, Group, Text, Menu, Avatar, Badge, NavLink, Card, TextInput, ActionIcon, Box, Title, createTheme, SegmentedControl, Breadcrumbs, Anchor, ColorSwatch, AspectRatio, Overlay, rem, SimpleGrid, Indicator, Table } from '@mantine/core';
 import { Link } from 'react-router-dom';
 import { useDisclosure } from '@mantine/hooks';
@@ -17,6 +17,21 @@ import '@fontsource/poppins/600.css';
 import '@fontsource/poppins/700.css';
 import '@fontsource/poppins/800.css';
 
+function _mergeNamespaces(n, m) {
+	m.forEach(function (e) {
+		e && typeof e !== 'string' && !Array.isArray(e) && Object.keys(e).forEach(function (k) {
+			if (k !== 'default' && !(k in n)) {
+				var d = Object.getOwnPropertyDescriptor(e, k);
+				Object.defineProperty(n, k, d.get ? d : {
+					enumerable: true,
+					get: function () { return e[k]; }
+				});
+			}
+		});
+	});
+	return Object.freeze(n);
+}
+
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
 }
@@ -11149,7 +11164,12 @@ function requireHighcharts() {
 var highchartsExports = requireHighcharts();
 var Highcharts = /*@__PURE__*/getDefaultExportFromCjs(highchartsExports);
 
-const initChart$1 = props => {
+var Highcharts$1 = /*#__PURE__*/_mergeNamespaces({
+	__proto__: null,
+	default: Highcharts
+}, [highchartsExports]);
+
+const initChart$2 = props => {
   return {
     chart: {
       type: "column",
@@ -11271,8 +11291,8 @@ const createAreaFillGradient = function (baseColor) {
   };
 };
 
-function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 
 // Initialize Highcharts with rounded corners
 if (typeof window !== "undefined") {
@@ -11281,8 +11301,8 @@ if (typeof window !== "undefined") {
 const Column = props => {
   const chartRef = useRef(null);
   const chartOptions = useMemo(() => {
-    const column = _objectSpread$1({}, props);
-    return _objectSpread$1(_objectSpread$1({}, initChart$1(column)), initSeries$1(column));
+    const column = _objectSpread$3({}, props);
+    return _objectSpread$3(_objectSpread$3({}, initChart$2(column)), initSeries$2(column));
   }, [props]);
   useEffect(() => {
     if (chartRef.current && chartRef.current.chart) {
@@ -11328,7 +11348,7 @@ const StackedColumn = props => {
     equalizer: false
   }));
 };
-const initSeries$1 = props => {
+const initSeries$2 = props => {
   const renderXAxis = categories => ({
     categories,
     labels: {
@@ -11385,7 +11405,7 @@ const initSeries$1 = props => {
         enableMouseTracking: false,
         showInLegend: false
       });
-      const mainSeries = _objectSpread$1(_objectSpread$1({}, fillSeries(boundary)), {
+      const mainSeries = _objectSpread$3(_objectSpread$3({}, fillSeries(boundary)), {
         name: props.yAxisLabel[0],
         color: seriesColors ? seriesColors[0] : "gray",
         data: seriesData[0],
@@ -11425,7 +11445,7 @@ const initSeries$1 = props => {
         pointWidth: undefined
       }
     };
-    const plot = _objectSpread$1(_objectSpread$1({}, {
+    const plot = _objectSpread$3(_objectSpread$3({}, {
       column: {
         borderWidth: 0,
         borderRadius: 10
@@ -11441,7 +11461,7 @@ const initSeries$1 = props => {
   };
 };
 
-const initChart = props => {
+const initChart$1 = props => {
   return {
     chart: {
       type: "areaspline",
@@ -11480,13 +11500,13 @@ const initChart = props => {
   };
 };
 
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 const Area = props => {
   const chartRef = useRef(null);
   const chartOptions = useMemo(() => {
-    const area = _objectSpread({}, props);
-    return _objectSpread(_objectSpread({}, initChart(area)), initSeries(area));
+    const area = _objectSpread$2({}, props);
+    return _objectSpread$2(_objectSpread$2({}, initChart$1(area)), initSeries$1(area));
   }, [props]);
   useEffect(() => {
     if (chartRef.current && chartRef.current.chart) {
@@ -11513,7 +11533,7 @@ const SimpleArea = props => {
   };
   return /*#__PURE__*/React.createElement(Area, chartOptions);
 };
-const initSeries = props => {
+const initSeries$1 = props => {
   const renderXAxis = () => {
     var _props$colors;
     const crosshair = props.withCrossHair ? {
@@ -11547,7 +11567,7 @@ const initSeries = props => {
     const labels = {
       color: "#575E77"
     };
-    return _objectSpread(_objectSpread({}, defaults), {
+    return _objectSpread$2(_objectSpread$2({}, defaults), {
       labels
     });
   };
@@ -11584,6 +11604,132 @@ const initSeries = props => {
   };
 };
 
+const _excluded$9 = ["withLegend", "centerLabel", "centerValue"];
+function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+const initChart = _ref => {
+  let {
+      withLegend,
+      centerLabel = "",
+      centerValue = ""
+    } = _ref;
+    _objectWithoutProperties(_ref, _excluded$9);
+  return {
+    chart: {
+      type: "pie",
+      events: {
+        render: function () {
+          const chart = this,
+            series = chart.series[0];
+          let customLabel = chart.customLabel;
+          if (!customLabel) {
+            customLabel = chart.customLabel = chart.renderer.label("<strong>".concat(centerValue, "</strong><br/>").concat(centerLabel), 0, 0, undefined, undefined, undefined, true, undefined, "center").css({
+              textAlign: "center"
+            }).add();
+          }
+          const x = series.center[0] + chart.plotLeft;
+          const y = series.center[1] + chart.plotTop - customLabel.getBBox().height / 2;
+          customLabel.attr({
+            x,
+            y
+          });
+
+          // Set font size and colour via configuration options
+          customLabel.attr({
+            text: "<span style=\"color: #0F193D; font-size: 24px; font-weight: 800\">".concat(centerValue, "</span><br/><span style=\"font-size: 12px; color: #878C9E\">").concat(centerLabel, "</span>"),
+            align: "center",
+            verticalAlign: "middle",
+            x: x,
+            y: y
+          });
+        }
+      }
+    },
+    title: {
+      text: ""
+    },
+    exporting: {
+      enabled: false
+    },
+    tooltip: {
+      pointFormat: "{series.name}: <b>{point.percentage:.0f}%</b>"
+    },
+    legend: !withLegend ? {
+      enabled: false
+    } : _objectSpread$1(_objectSpread$1({}, {
+      enabled: true,
+      layout: "vertical",
+      verticalAlign: "middle",
+      align: "right",
+      labelFormat: '{name}  <span style="opacity: 0.4">{y}</span>'
+    }), withLegend && typeof withLegend !== "boolean" ? withLegend : {}),
+    plotOptions: {
+      pie: {
+        allowPointSelect: true,
+        cursor: "pointer",
+        paddingLeft: 0,
+        borderRadius: 8,
+        dataLabels: {
+          enabled: true,
+          format: "{point.percentage:.0f}%",
+          distance: -30,
+          style: {
+            fontWeight: "bold",
+            fontSize: "15px",
+            textOutline: "1px contrast"
+          }
+        },
+        showInLegend: true
+      }
+    },
+    credits: {
+      enabled: false
+    },
+    series: []
+  };
+};
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+const DonutChart = props => {
+  const chartRef = useRef(null);
+  const chartOptions = useMemo(() => {
+    const area = _objectSpread({}, props);
+    return _objectSpread(_objectSpread({}, initChart(area)), initSeries(area));
+  }, [props]);
+  useEffect(() => {
+    if (chartRef.current && chartRef.current.chart) {
+      chartRef.current.chart.update(chartOptions, true);
+    }
+  }, [chartOptions]);
+  return /*#__PURE__*/React.createElement(HighchartsReact, {
+    highcharts: Highcharts$1,
+    ref: chartRef,
+    options: chartOptions
+  });
+};
+const initSeries = donut => {
+  const {
+    series,
+    categories,
+    colors,
+    title
+  } = donut;
+  const data = series.map((item, index) => ({
+    name: categories[index],
+    y: item,
+    color: colors && colors[index] ? colors[index] : "#0F193D"
+  }));
+  return {
+    series: [{
+      type: "pie",
+      innerSize: "60%",
+      name: title,
+      data
+    }]
+  };
+};
+
 const Icons = _ref => {
   let {
     name = "Home",
@@ -11729,6 +11875,7 @@ const DropdownItem = _ref2 => {
     activeBg = "gray.1",
     activeColor = "altiba",
     inactiveColor = "adiba",
+    id,
     onClick
   } = _ref2;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
@@ -11737,7 +11884,8 @@ const DropdownItem = _ref2 => {
     mih: 70,
     bg: active ? activeBg : {},
     c: active ? activeColor : inactiveColor,
-    onClick: onClick
+    onClick: onClick,
+    "data-index": id
   }, /*#__PURE__*/React.createElement(Group, {
     w: 320
   }, /*#__PURE__*/React.createElement(Icons, icon), /*#__PURE__*/React.createElement(Stack, {
@@ -12757,7 +12905,6 @@ const SimpleBody = _ref => {
     h: 50
   }, columns.map((column, index) => {
     const columnIndex = column.id;
-    console.log("column: ".concat(column.id, ", type: ").concat(typeof row[column.id]));
     return /*#__PURE__*/React.createElement(Table.Td, {
       key: index
     }, typeof row[columnIndex] === 'function' ? row[columnIndex](columnIndex) : row[columnIndex] || "");
@@ -12861,4 +13008,4 @@ const File = _ref => {
   }, /*#__PURE__*/React.createElement(Icons, rightsection === null || rightsection === void 0 ? void 0 : rightsection.icon)) : undefined)));
 };
 
-export { ApplicationMenu, ApplicationPanel, AvatarLabelPanel, ConnectionPanel, DynamicLogo, DynamicShigaLogo, EqualizerColumn, File, Icons, LabelPanel, PageTitle, PaymentMethod, PaymentMethodAdd, SearchPanel, SideMenu, SimpleArea, SimpleColumn, SimplePanel, SimpleTable, SimpleText, StackedColumn, SubscriptionPlans, TitleWithIndex, TitledPanel, UserMenu, theme };
+export { ApplicationMenu, ApplicationPanel, AvatarLabelPanel, ConnectionPanel, DonutChart, DynamicLogo, DynamicShigaLogo, EqualizerColumn, File, Icons, LabelPanel, PageTitle, PaymentMethod, PaymentMethodAdd, SearchPanel, SideMenu, SimpleArea, SimpleColumn, SimplePanel, SimpleTable, SimpleText, StackedColumn, SubscriptionPlans, TitleWithIndex, TitledPanel, UserMenu, theme };

package/build/typings/components/index.d.ts

@@ -1,5 +1,6 @@
 export { SimpleColumn, EqualizerColumn, StackedColumn, } from "./charts/column/Column";
 export { SimpleArea } from "./charts/area/Area";
+export { DonutChart } from "./charts/donut/Donut";
 export { Icons } from "./general/icons/Icons";
 export { DynamicLogo, DynamicShigaLogo } from "./general/logos/Logos";
 export { ApplicationMenu } from "./menus/application/Application";

package/build/typings/components/theme.d.ts

@@ -127,7 +127,7 @@ export declare const theme: {
         xl?: string | undefined;
     } | undefined;
     respectReducedMotion?: boolean | undefined;
-    cursorType?: "default" | "pointer" | undefined;
+    cursorType?: "pointer" | "default" | undefined;
     defaultGradient?: {
         from?: string | undefined;
         to?: string | undefined;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@adiba-banking-cloud/backoffice",
   "author": "TUROG Technologies",
-  "version": "0.0.31",
+  "version": "0.0.33",
   "description": "An ADIBA component library for backoffice and dashboard applications",
   "license": "ISC",
   "main": "build/index.cjs.js",