@majoo-ui/react 1.57.3 → 1.57.5

package/components/form/components/InputSelect/InputSelect.d.ts

@@ -587,7 +587,7 @@ export declare const SelectItem: import("@stitches/react/types/styled-component"
         backgroundColor: string;
     };
 }>>;
-export declare const SelectInputSearch: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<HTMLInputElement>>;
+export declare const SelectInputSearch: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<HTMLInputElement | HTMLButtonElement>>;
 export declare type Option = {
     value: string;
     name: string;
@@ -709,5 +709,5 @@ interface InputSelectProps extends Omit<DownshiftProps<Option>, 'initialSelected
      */
     renderFooter?: () => React.ReactNode;
 }
-export declare function InputSelect({ option, onChange, value, placeholder, searchPlaceholder, embedSearch, size, disabled, search, iconColor, hideArrowicon, showLeadingIcon, placement, disabledOptions, textSelector, valueSelector, readOnly, isInvalid, noOptionIcon, fetchData, onSearch, isLoading, showTooltip, css, renderFooter, ...props }: InputSelectProps): JSX.Element;
+declare const InputSelect: React.ForwardRefExoticComponent<InputSelectProps & React.RefAttributes<HTMLInputElement | HTMLButtonElement>>;
 export default InputSelect;

package/components/pieChart/PieChart.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { LabelProps } from 'recharts';
 import { CSS } from '../../config/stitches.config';
 import './styles.css';
 interface PieChartData {
@@ -15,6 +16,13 @@ interface PieChartTooltip {
     label?: (number: any) => string;
     render?: () => JSX.Element;
 }
+interface PieChartLabel {
+    show?: boolean;
+    dataKey?: string;
+    position?: LabelProps['position'];
+    formatter?: (string: any) => string;
+    render?: (any: any) => JSX.Element;
+}
 interface PieChartProps {
     /**
      * Section title of the chart.
@@ -57,18 +65,20 @@ interface PieChartProps {
      */
     tooltip?: PieChartTooltip;
     /**
-     * Show datasets percentage.
+     * Label config of chart.
      */
-    showPercentage?: boolean;
+    label?: PieChartLabel;
 }
 declare const PieChartComponent: {
-    ({ data, css, avatarURL, avatarAcronym, validAvatar, legend, isMobile, tooltip, showPercentage, title, subtitle, }: PieChartProps): JSX.Element;
+    ({ data, css, avatarURL, avatarAcronym, validAvatar, legend, isMobile, tooltip, title, subtitle, label, }: PieChartProps): JSX.Element;
     defaultProps: {
         data: never[];
         avatarURL: undefined;
         avatarAcronym: string;
         validAvatar: boolean;
         legend: {
+            show: boolean;
+            showTotal: boolean;
             data: never[];
             position: string;
         };

package/index.esm.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { useState, createContext, useContext, useEffect, useRef, useCallback, cloneElement, createElement as createElement$2, forwardRef, useLayoutEffect, useReducer, useMemo, memo } from 'react';
+import React__default, { useState, createContext, useContext, useEffect, useRef, useCallback, cloneElement, forwardRef, createElement as createElement$2, useLayoutEffect, useReducer, useMemo, memo } from 'react';
 import PropTypes from 'prop-types';
 import { createStitches, styled as styled$1 } from '@stitches/react';
 import { foundations } from '@majoo-ui/core';
@@ -9125,7 +9125,7 @@ const SelectInputSearch = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
     }, void 0)]
   }), void 0);
 });
-function InputSelect(_a) {
+const InputSelect = /*#__PURE__*/forwardRef((_a, ref) => {
   var {
       option,
       onChange,
@@ -9206,7 +9206,7 @@ function InputSelect(_a) {
     setItem(generatedOption);
     setOptions(generatedOption);
   }, [option, disabledOptions, valueSelector, textSelector]);
-  const debouncedSearch = React.useRef(debounce(query => __awaiter(this, void 0, void 0, function* () {
+  const debouncedSearch = React.useRef(debounce(query => __awaiter(void 0, void 0, void 0, function* () {
     setQuery(query);
     if (onSearch) onSearch(query);
   }), 1000)).current;
@@ -9292,6 +9292,7 @@ function InputSelect(_a) {
                   }
                 }, {
                   children: jsx(SelectInputSearch, {
+                    ref: ref,
                     showLeadingIcon: showLeadingIcon,
                     showClearIcon: hideArrowicon,
                     disabled: disabled,
@@ -9316,6 +9317,7 @@ function InputSelect(_a) {
                 }), void 0) : jsx(Button$3, Object.assign({}, getToggleButtonProps({
                   disabled: disabled || readOnly
                 }), {
+                  ref: ref,
                   disabled: disabled,
                   size: size,
                   readOnly: readOnly,
@@ -9474,7 +9476,7 @@ function InputSelect(_a) {
       }), void 0);
     }
   }), void 0);
-}
+});
 
 var tryToString$3 = tryToString$5;
 
@@ -16365,44 +16367,29 @@ const MobileCalendarBox = ({
         children: [allowReset ? jsx(Button$4, Object.assign({
           buttonType: "ghost",
           size: "md",
-          css: {
-            width: '160px',
-            fontWeight: 600,
-            display: 'flex',
-            flex: 1
-          },
           onClick: onReset,
           disabled: disabled || !selected || selected.length <= 1,
-          type: "button"
+          type: "button",
+          block: true
         }, {
           children: "Reset"
         }), void 0) : jsx(Button$4, Object.assign({
           buttonType: "ghost",
           size: "md",
-          css: {
-            width: '160px',
-            fontWeight: 600,
-            display: 'flex',
-            flex: 1
-          },
           onClick: onCancel,
           disabled: disabled,
-          type: "button"
+          type: "button",
+          block: true
         }, {
           children: t('label.cancel', 'Batal', {
             ns: 'translation'
           })
         }), void 0), jsx(Button$4, Object.assign({
           size: "md",
-          css: {
-            width: '160px',
-            fontWeight: 600,
-            display: 'flex',
-            flex: 1
-          },
           onClick: onUpdate,
           disabled: disabled || !selected || selected.length <= 1,
-          type: "button"
+          type: "button",
+          block: true
         }, {
           children: t('label.process', 'Proses', {
             ns: 'translation'
@@ -16872,7 +16859,7 @@ function InputTimePicker({
     defaultValue: defaultValue,
     onChange: () => {},
     isPicker: true,
-    autocomplete: "false"
+    autoComplete: "false"
     // tabIndex="-1"
     ,
     __self: this,
@@ -17584,7 +17571,7 @@ function InputDateRangePicker(props) {
       // eslint-disable-next-line @typescript-eslint/no-empty-function
       onChange: () => {},
       isPicker: true,
-      autocomplete: "false"
+      autoComplete: "false"
     }, void 0)]
   }), void 0);
 }
@@ -17689,7 +17676,7 @@ function InputDatePicker({
           // eslint-disable-next-line @typescript-eslint/no-empty-function
           onChange: () => {},
           isPicker: true,
-          autocomplete: "false"
+          autoComplete: "false"
         }, void 0)]
       }), void 0);
     } else {
@@ -47730,6 +47717,7 @@ function LoadingBar(props) {
         setProgress(0);
       }, 1000);
     }
+    return () => setProgress(0);
   }, [show, intervalTime]);
   useEffect(() => {
     if (progress === 100) {
@@ -50388,16 +50376,14 @@ function BarChartComponent({
   };
   return jsxs(Box, {
     children: [title && jsx(Heading, Object.assign({
-      css: {
-        marginBottom: '$spacing-07'
-      },
       heading: "sectionTitle"
     }, {
       children: title
     }), void 0), jsx(Box, Object.assign({
       css: Object.assign({
         width: MIN_WIDTH,
-        height: MIN_HEIGHT
+        height: MIN_HEIGHT,
+        marginTop: '$spacing-07'
       }, css)
     }, {
       children: jsx(ResponsiveContainer, {
@@ -50486,8 +50472,8 @@ const renderActiveShape = (props, avatar, acronym, validAvatar, activeRef) => {
     endAngle,
     fill
   } = props;
-  const IMG_WIDHT = 40;
-  const IMG_HEIGHT = 40;
+  const IMG_WIDHT = 75;
+  const IMG_HEIGHT = 75;
   return jsx(React__default.Fragment, {
     children: jsxs("g", {
       children: [jsx("clipPath", Object.assign({
@@ -50526,7 +50512,7 @@ const renderActiveShape = (props, avatar, acronym, validAvatar, activeRef) => {
         cx: cx,
         cy: cy,
         innerRadius: innerRadius,
-        outerRadius: activeRef.current ? outerRadius + 10 : outerRadius,
+        outerRadius: activeRef.current ? outerRadius + 12 : outerRadius,
         startAngle: startAngle,
         endAngle: endAngle,
         fill: fill,
@@ -50540,7 +50526,7 @@ const renderActiveShape = (props, avatar, acronym, validAvatar, activeRef) => {
 const renderLegend = (formattedData, legend, subtitle) => jsxs(Box, {
   children: [subtitle && jsx(Flex$1, Object.assign({
     css: {
-      margin: '$spacing-06'
+      marginTop: '$spacing-06'
     },
     justify: "center"
   }, {
@@ -50550,6 +50536,9 @@ const renderLegend = (formattedData, legend, subtitle) => jsxs(Box, {
       children: subtitle
     }), void 0)
   }), void 0), formattedData.length > 0 && jsx(Flex$1, Object.assign({
+    css: {
+      marginTop: '$spacing-06'
+    },
     direction: "column",
     gap: 5
   }, {
@@ -50607,9 +50596,9 @@ const PieChartComponent = ({
   legend,
   isMobile,
   tooltip,
-  showPercentage,
   title,
-  subtitle
+  subtitle,
+  label
 }) => {
   var _a;
   const emptyData = [{
@@ -50624,7 +50613,7 @@ const PieChartComponent = ({
   const activeRef = useRef();
   const formattedData = data.length > 0 ? dataChart : emptyData;
   const [activeIndex, setActiveIndex] = useState(0);
-  const CONTAINER_HEIGHT = (legend === null || legend === void 0 ? void 0 : legend.position) === 'bottom' ? 350 : 180;
+  const CONTAINER_HEIGHT = (legend === null || legend === void 0 ? void 0 : legend.position) === 'bottom' ? subtitle ? 420 : 380 : 230;
   const CONTAINER_WIDTH = isMobile ? 350 : 450;
   const CHART_HEIGHT = 150;
   const CHART_WIDTH = 450;
@@ -50668,34 +50657,8 @@ const PieChartComponent = ({
     }
     return null;
   };
-  const RADIAN = Math.PI / 180;
-  const renderCustomizedLabel = ({
-    cx,
-    cy,
-    midAngle,
-    innerRadius,
-    outerRadius,
-    percent,
-    index
-  }) => {
-    const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
-    const x = cx + radius * Math.cos(-midAngle * RADIAN);
-    const y = cy + radius * Math.sin(-midAngle * RADIAN);
-    return jsx("text", Object.assign({
-      x: x,
-      y: y,
-      fill: "white",
-      textAnchor: x > cx ? 'start' : 'end',
-      dominantBaseline: "central"
-    }, {
-      children: `${(percent * 100).toFixed(0)}%`
-    }), void 0);
-  };
   return jsxs(Box, {
     children: [title && jsx(Heading, Object.assign({
-      css: {
-        marginBottom: '$spacing-06'
-      },
       heading: "sectionTitle"
     }, {
       children: title
@@ -50703,7 +50666,8 @@ const PieChartComponent = ({
       css: Object.assign({
         position: 'relative',
         width: CONTAINER_WIDTH,
-        height: CONTAINER_HEIGHT
+        height: CONTAINER_HEIGHT,
+        marginTop: '$spacing-07'
       }, css)
     }, {
       children: jsx(ResponsiveContainer, Object.assign({
@@ -50714,27 +50678,36 @@ const PieChartComponent = ({
           width: CHART_WIDTH,
           height: CHART_HEIGHT
         }, {
-          children: [jsx(Pie, Object.assign({
+          children: [jsxs(Pie, Object.assign({
             activeIndex: activeIndex,
             activeShape: shape => renderActiveShape(shape, avatarURL, avatarAcronym, validAvatar, activeRef),
             data: formattedData,
             cx: "50%",
             cy: "50%",
-            innerRadius: 50,
-            outerRadius: 80,
+            innerRadius: 70,
+            outerRadius: 100,
             dataKey: "total",
             onMouseEnter: x => {
               setActiveIndex(formattedData.findIndex(y => y.name === x.name));
               activeRef.current = true;
             },
             blendStroke: true
-          }, showPercentage && {
-            label: renderCustomizedLabel,
+          }, (label === null || label === void 0 ? void 0 : label.show) && (label === null || label === void 0 ? void 0 : label.render) && {
+            label: e => {
+              var _a;
+              return (_a = label === null || label === void 0 ? void 0 : label.render) === null || _a === void 0 ? void 0 : _a.call(label, e);
+            },
             labelLine: false
           }, {
-            children: formattedData.map(item => jsx(Cell, {
+            children: [formattedData.map(item => jsx(Cell, {
               fill: item.color || colors.chartGreen
-            }, item.name))
+            }, item.name)), (label === null || label === void 0 ? void 0 : label.show) && !label.render && jsx(LabelList, {
+              stroke: "0",
+              fill: colors.textWhite,
+              dataKey: (label === null || label === void 0 ? void 0 : label.dataKey) || 'total',
+              formatter: label === null || label === void 0 ? void 0 : label.formatter,
+              position: label === null || label === void 0 ? void 0 : label.position
+            }, void 0)]
           }), void 0), data.length > 0 && jsx(Tooltip$2, {
             wrapperStyle: {
               outline: 'none'
@@ -50759,6 +50732,8 @@ PieChartComponent.defaultProps = {
   avatarAcronym: '',
   validAvatar: false,
   legend: {
+    show: true,
+    showTotal: true,
     data: [],
     position: 'right'
   },

package/index.umd.js

@@ -9197,8 +9197,7 @@
       }, void 0)]
     }), void 0);
   });
-  function InputSelect(_a) {
-    var _this = this;
+  var InputSelect = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     var option = _a.option,
       onChange = _a.onChange,
       value = _a.value,
@@ -9311,7 +9310,7 @@
       setOptions(generatedOption);
     }, [option, disabledOptions, valueSelector, textSelector]);
     var debouncedSearch = React__namespace.useRef(debounce__default["default"](function (query) {
-      return __awaiter(_this, void 0, void 0, function () {
+      return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
           setQuery(query);
           if (onSearch) onSearch(query);
@@ -9406,6 +9405,7 @@
                     }
                   }, {
                     children: jsxRuntime.jsx(SelectInputSearch, {
+                      ref: ref,
                       showLeadingIcon: showLeadingIcon,
                       showClearIcon: hideArrowicon,
                       disabled: disabled,
@@ -9430,6 +9430,7 @@
                   }), void 0) : jsxRuntime.jsx(Button$3, __assign({}, getToggleButtonProps({
                     disabled: disabled || readOnly
                   }), {
+                    ref: ref,
                     disabled: disabled,
                     size: size,
                     readOnly: readOnly,
@@ -9592,7 +9593,7 @@
         }), void 0);
       }
     }), void 0);
-  }
+  });
 
   var tryToString$3 = tryToString$5;
 
@@ -16612,44 +16613,29 @@
           children: [allowReset ? jsxRuntime.jsx(Button$4, __assign({
             buttonType: "ghost",
             size: "md",
-            css: {
-              width: '160px',
-              fontWeight: 600,
-              display: 'flex',
-              flex: 1
-            },
             onClick: onReset,
             disabled: disabled || !selected || selected.length <= 1,
-            type: "button"
+            type: "button",
+            block: true
           }, {
             children: "Reset"
           }), void 0) : jsxRuntime.jsx(Button$4, __assign({
             buttonType: "ghost",
             size: "md",
-            css: {
-              width: '160px',
-              fontWeight: 600,
-              display: 'flex',
-              flex: 1
-            },
             onClick: onCancel,
             disabled: disabled,
-            type: "button"
+            type: "button",
+            block: true
           }, {
             children: t('label.cancel', 'Batal', {
               ns: 'translation'
             })
           }), void 0), jsxRuntime.jsx(Button$4, __assign({
             size: "md",
-            css: {
-              width: '160px',
-              fontWeight: 600,
-              display: 'flex',
-              flex: 1
-            },
             onClick: onUpdate,
             disabled: disabled || !selected || selected.length <= 1,
-            type: "button"
+            type: "button",
+            block: true
           }, {
             children: t('label.process', 'Proses', {
               ns: 'translation'
@@ -17121,7 +17107,7 @@
       defaultValue: defaultValue,
       onChange: () => {},
       isPicker: true,
-      autocomplete: "false"
+      autoComplete: "false"
       // tabIndex="-1"
       ,
       __self: this,
@@ -17841,7 +17827,7 @@
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         onChange: function () {},
         isPicker: true,
-        autocomplete: "false"
+        autoComplete: "false"
       }, void 0)]
     }), void 0);
   }
@@ -17954,7 +17940,7 @@
             // eslint-disable-next-line @typescript-eslint/no-empty-function
             onChange: function () {},
             isPicker: true,
-            autocomplete: "false"
+            autoComplete: "false"
           }, void 0)]
         }), void 0);
       } else {
@@ -48150,6 +48136,9 @@
           setProgress(0);
         }, 1000);
       }
+      return function () {
+        return setProgress(0);
+      };
     }, [show, intervalTime]);
     React.useEffect(function () {
       if (progress === 100) {
@@ -50909,16 +50898,14 @@
     };
     return jsxRuntime.jsxs(Box, {
       children: [title && jsxRuntime.jsx(Heading, __assign({
-        css: {
-          marginBottom: '$spacing-07'
-        },
         heading: "sectionTitle"
       }, {
         children: title
       }), void 0), jsxRuntime.jsx(Box, __assign({
         css: __assign({
           width: MIN_WIDTH,
-          height: MIN_HEIGHT
+          height: MIN_HEIGHT,
+          marginTop: '$spacing-07'
         }, css)
       }, {
         children: jsxRuntime.jsx(recharts.ResponsiveContainer, {
@@ -51005,8 +50992,8 @@
       startAngle = props.startAngle,
       endAngle = props.endAngle,
       fill = props.fill;
-    var IMG_WIDHT = 40;
-    var IMG_HEIGHT = 40;
+    var IMG_WIDHT = 75;
+    var IMG_HEIGHT = 75;
     return jsxRuntime.jsx(React__default["default"].Fragment, {
       children: jsxRuntime.jsxs("g", {
         children: [jsxRuntime.jsx("clipPath", __assign({
@@ -51045,7 +51032,7 @@
           cx: cx,
           cy: cy,
           innerRadius: innerRadius,
-          outerRadius: activeRef.current ? outerRadius + 10 : outerRadius,
+          outerRadius: activeRef.current ? outerRadius + 12 : outerRadius,
           startAngle: startAngle,
           endAngle: endAngle,
           fill: fill,
@@ -51060,7 +51047,7 @@
     return jsxRuntime.jsxs(Box, {
       children: [subtitle && jsxRuntime.jsx(Flex$1, __assign({
         css: {
-          margin: '$spacing-06'
+          marginTop: '$spacing-06'
         },
         justify: "center"
       }, {
@@ -51070,6 +51057,9 @@
           children: subtitle
         }), void 0)
       }), void 0), formattedData.length > 0 && jsxRuntime.jsx(Flex$1, __assign({
+        css: {
+          marginTop: '$spacing-06'
+        },
         direction: "column",
         gap: 5
       }, {
@@ -51129,9 +51119,9 @@
       legend = _a.legend,
       isMobile = _a.isMobile,
       tooltip = _a.tooltip,
-      showPercentage = _a.showPercentage,
       title = _a.title,
-      subtitle = _a.subtitle;
+      subtitle = _a.subtitle,
+      label = _a.label;
     var emptyData = [{
       id: '0',
       name: '',
@@ -51148,7 +51138,7 @@
     var _c = React.useState(0),
       activeIndex = _c[0],
       setActiveIndex = _c[1];
-    var CONTAINER_HEIGHT = (legend === null || legend === void 0 ? void 0 : legend.position) === 'bottom' ? 350 : 180;
+    var CONTAINER_HEIGHT = (legend === null || legend === void 0 ? void 0 : legend.position) === 'bottom' ? subtitle ? 420 : 380 : 230;
     var CONTAINER_WIDTH = isMobile ? 350 : 450;
     var CHART_HEIGHT = 150;
     var CHART_WIDTH = 450;
@@ -51192,33 +51182,8 @@
       }
       return null;
     };
-    var RADIAN = Math.PI / 180;
-    var renderCustomizedLabel = function renderCustomizedLabel(_a) {
-      var cx = _a.cx,
-        cy = _a.cy,
-        midAngle = _a.midAngle,
-        innerRadius = _a.innerRadius,
-        outerRadius = _a.outerRadius,
-        percent = _a.percent;
-        _a.index;
-      var radius = innerRadius + (outerRadius - innerRadius) * 0.5;
-      var x = cx + radius * Math.cos(-midAngle * RADIAN);
-      var y = cy + radius * Math.sin(-midAngle * RADIAN);
-      return jsxRuntime.jsx("text", __assign({
-        x: x,
-        y: y,
-        fill: "white",
-        textAnchor: x > cx ? 'start' : 'end',
-        dominantBaseline: "central"
-      }, {
-        children: "".concat((percent * 100).toFixed(0), "%")
-      }), void 0);
-    };
     return jsxRuntime.jsxs(Box, {
       children: [title && jsxRuntime.jsx(Heading, __assign({
-        css: {
-          marginBottom: '$spacing-06'
-        },
         heading: "sectionTitle"
       }, {
         children: title
@@ -51226,7 +51191,8 @@
         css: __assign({
           position: 'relative',
           width: CONTAINER_WIDTH,
-          height: CONTAINER_HEIGHT
+          height: CONTAINER_HEIGHT,
+          marginTop: '$spacing-07'
         }, css)
       }, {
         children: jsxRuntime.jsx(recharts.ResponsiveContainer, __assign({
@@ -51237,7 +51203,7 @@
             width: CHART_WIDTH,
             height: CHART_HEIGHT
           }, {
-            children: [jsxRuntime.jsx(recharts.Pie, __assign({
+            children: [jsxRuntime.jsxs(recharts.Pie, __assign({
               activeIndex: activeIndex,
               activeShape: function (shape) {
                 return renderActiveShape(shape, avatarURL, avatarAcronym, validAvatar, activeRef);
@@ -51245,8 +51211,8 @@
               data: formattedData,
               cx: "50%",
               cy: "50%",
-              innerRadius: 50,
-              outerRadius: 80,
+              innerRadius: 70,
+              outerRadius: 100,
               dataKey: "total",
               onMouseEnter: function (x) {
                 setActiveIndex(formattedData.findIndex(function (y) {
@@ -51255,15 +51221,24 @@
                 activeRef.current = true;
               },
               blendStroke: true
-            }, showPercentage && {
-              label: renderCustomizedLabel,
+            }, (label === null || label === void 0 ? void 0 : label.show) && (label === null || label === void 0 ? void 0 : label.render) && {
+              label: function (e) {
+                var _a;
+                return (_a = label === null || label === void 0 ? void 0 : label.render) === null || _a === void 0 ? void 0 : _a.call(label, e);
+              },
               labelLine: false
             }, {
-              children: formattedData.map(function (item) {
+              children: [formattedData.map(function (item) {
                 return jsxRuntime.jsx(recharts.Cell, {
                   fill: item.color || colors.chartGreen
                 }, item.name);
-              })
+              }), (label === null || label === void 0 ? void 0 : label.show) && !label.render && jsxRuntime.jsx(recharts.LabelList, {
+                stroke: "0",
+                fill: colors.textWhite,
+                dataKey: (label === null || label === void 0 ? void 0 : label.dataKey) || 'total',
+                formatter: label === null || label === void 0 ? void 0 : label.formatter,
+                position: label === null || label === void 0 ? void 0 : label.position
+              }, void 0)]
             }), void 0), data.length > 0 && jsxRuntime.jsx(recharts.Tooltip, {
               wrapperStyle: {
                 outline: 'none'
@@ -51288,6 +51263,8 @@
     avatarAcronym: '',
     validAvatar: false,
     legend: {
+      show: true,
+      showTotal: true,
       data: [],
       position: 'right'
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@majoo-ui/react",
-  "version": "1.57.3",
+  "version": "1.57.5",
   "dependencies": {
     "@majoo-ui/core": "^1.31.3",
     "@majoo-ui/helpers": "^1.30.5",