@majoo-ui/react 1.57.3 → 1.57.4

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

@@ -16365,44 +16365,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'
@@ -47730,6 +47715,7 @@ function LoadingBar(props) {
         setProgress(0);
       }, 1000);
     }
+    return () => setProgress(0);
   }, [show, intervalTime]);
   useEffect(() => {
     if (progress === 100) {
@@ -50388,16 +50374,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 +50470,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 +50510,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 +50524,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 +50534,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 +50594,9 @@ const PieChartComponent = ({
   legend,
   isMobile,
   tooltip,
-  showPercentage,
   title,
-  subtitle
+  subtitle,
+  label
 }) => {
   var _a;
   const emptyData = [{
@@ -50624,7 +50611,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 +50655,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 +50664,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 +50676,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 +50730,8 @@ PieChartComponent.defaultProps = {
   avatarAcronym: '',
   validAvatar: false,
   legend: {
+    show: true,
+    showTotal: true,
     data: [],
     position: 'right'
   },

package/index.umd.js

@@ -16612,44 +16612,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'
@@ -48150,6 +48135,9 @@
           setProgress(0);
         }, 1000);
       }
+      return function () {
+        return setProgress(0);
+      };
     }, [show, intervalTime]);
     React.useEffect(function () {
       if (progress === 100) {
@@ -50909,16 +50897,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 +50991,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 +51031,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 +51046,7 @@
     return jsxRuntime.jsxs(Box, {
       children: [subtitle && jsxRuntime.jsx(Flex$1, __assign({
         css: {
-          margin: '$spacing-06'
+          marginTop: '$spacing-06'
         },
         justify: "center"
       }, {
@@ -51070,6 +51056,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 +51118,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 +51137,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 +51181,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 +51190,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 +51202,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 +51210,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 +51220,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 +51262,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.4",
   "dependencies": {
     "@majoo-ui/core": "^1.31.3",
     "@majoo-ui/helpers": "^1.30.5",