diginet-core-ui 1.3.59-beta.2 → 1.3.60

package/assets/images/menu/dhr/MHRP39N0009.svg

@@ -1,3 +1,3 @@
-<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M39 0L0 16.315V18.4383L14.82 24.18L20.54 39H22.6633L39 0Z" fill="#FFAA00"/>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21 3.00006L3 10.5301V11.5101L9.84 14.1601L12.48 21.0001H13.46L21 3.00006Z" fill="#7F828E"/>
 </svg>

package/assets/images/menu/dhr/MHRP39N0010.svg

@@ -1,7 +1,7 @@
-<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M26.6842 15.0263C29.6811 15.0263 32.3906 16.1964 34.4021 18.1053H36.9474V14H0V18.1053H18.9663C20.9779 16.1964 23.6874 15.0263 26.6842 15.0263Z" fill="#2680EB"/>
-<path d="M36.9474 5.78943H0V9.8947H36.9474V5.78943Z" fill="#2680EB"/>
-<path d="M16.1748 30.4211H0V34.5264H18.9663C17.7553 33.3975 16.7905 32.0017 16.1748 30.4211Z" fill="#2680EB"/>
-<path d="M16.1748 22.2106H0V26.3159H15.3948C15.3948 24.8585 15.6821 23.4833 16.1748 22.2106Z" fill="#2680EB"/>
-<path d="M33.7247 30.4622C34.4637 29.2512 34.8947 27.8349 34.8947 26.3159C34.8947 21.7796 31.2205 18.1054 26.6842 18.1054C22.1479 18.1054 18.4737 21.7796 18.4737 26.3159C18.4737 30.8522 22.1479 34.5264 26.6842 34.5264C28.2032 34.5264 29.6195 34.0749 30.8305 33.3564L36.1058 38.6317L39 35.7375L33.7247 30.4622ZM26.6842 30.4212C24.4263 30.4212 22.5789 28.5738 22.5789 26.3159C22.5789 24.058 24.4263 22.2106 26.6842 22.2106C28.9421 22.2106 30.7895 24.058 30.7895 26.3159C30.7895 28.5738 28.9421 30.4212 26.6842 30.4212Z" fill="#2680EB"/>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 9.50006C17.46 9.50006 18.78 10.0701 19.76 11.0001H21V9.00006H3V11.0001H12.24C13.22 10.0701 14.54 9.50006 16 9.50006Z" fill="#7F828E"/>
+<path d="M21 5.00006H3V7.00006H21V5.00006Z" fill="#7F828E"/>
+<path d="M10.88 17.0001H3V19.0001H12.24C11.65 18.4501 11.18 17.7701 10.88 17.0001Z" fill="#7F828E"/>
+<path d="M10.88 13.0001H3V15.0001H10.5C10.5 14.2901 10.64 13.6201 10.88 13.0001Z" fill="#7F828E"/>
+<path d="M19.43 17.0201C19.79 16.4301 20 15.7401 20 15.0001C20 12.7901 18.21 11.0001 16 11.0001C13.79 11.0001 12 12.7901 12 15.0001C12 17.2101 13.79 19.0001 16 19.0001C16.74 19.0001 17.43 18.7801 18.02 18.4301L20.59 21.0001L22 19.5901L19.43 17.0201ZM16 17.0001C14.9 17.0001 14 16.1001 14 15.0001C14 13.9001 14.9 13.0001 16 13.0001C17.1 13.0001 18 13.9001 18 15.0001C18 16.1001 17.1 17.0001 16 17.0001Z" fill="#7F828E"/>
 </svg>

package/assets/images/menu/dhr/MHRP39N0011.svg

@@ -1,7 +1,14 @@
-<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M27.3858 19.5953H31.298V5.90247C31.298 3.75074 29.5375 1.99023 27.3858 1.99023H3.91224C1.76051 1.99023 0 3.75074 0 5.90247V29.3759C0 31.5276 1.76051 33.2882 3.91224 33.2882H17.6052V29.3759H3.91224V5.47213H27.3858V19.5953Z" fill="#1CA261"/>
-<path d="M23.4736 21.5514H7.82455V25.4637H23.4736V21.5514Z" fill="#1CA261"/>
-<path d="M23.4736 19.5953V15.6831H7.82455V19.5953H23.4736Z" fill="#1CA261"/>
-<path d="M23.4736 9.81473H7.82455V13.727H23.4736V9.81473Z" fill="#1CA261"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M26.0363 39L19.2485 32.1536L21.9871 29.3954L26.0363 33.4642L36.0712 23.351L38.8097 26.1092L26.0363 39Z" fill="#1CA261"/>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<path d="M16.08 11.5401H18.08V4.5401C18.08 3.4401 17.18 2.5401 16.08 2.5401H4.07996C2.97996 2.5401 2.07996 3.4401 2.07996 4.5401V16.5401C2.07996 17.6401 2.97996 18.5401 4.07996 18.5401H11.08V16.5401H4.07996V4.3201H16.08V11.5401Z" fill="#7F828E"/>
+<path d="M14.08 12.5401H6.07996V14.5401H14.08V12.5401Z" fill="#7F828E"/>
+<path d="M11.08 11.5401H14.08V9.5401H6.07996V11.5401H11.08Z" fill="#7F828E"/>
+<path d="M14.08 6.5401H6.07996V8.5401H14.08V6.5401Z" fill="#7F828E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.39 21.4601L11.92 17.9601L13.32 16.5501L15.39 18.6301L20.52 13.4601L21.92 14.8701L15.39 21.4601Z" fill="#7F828E"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
 </svg>

package/assets/images/menu/dhr/MHRP39N0015.svg

@@ -1,5 +1,5 @@
-<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M29.7632 35.7608L35.4715 39L33.9567 32.895L39 28.7874L32.3587 28.2576L29.7632 22.5L27.1676 28.2576L20.5263 28.7874L25.5696 32.895L24.0548 39L29.7632 35.7608Z" fill="#FF8C00"/>
-<path d="M16.4211 22.5C20.9574 22.5 24.6316 18.8081 24.6316 14.25C24.6316 9.69187 20.9574 6 16.4211 6C11.8847 6 8.21053 9.69187 8.21053 14.25C8.21053 18.8081 11.8847 22.5 16.4211 22.5Z" fill="#FF8C00"/>
-<path d="M11.8756 27.0805C6.41056 28.0711 0 30.6754 0 34.875V39H19.9926L21.0884 34.584L11.8756 27.0805Z" fill="#FF8C00"/>
+<svg width="22" height="19" viewBox="0 0 22 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.7895 17.135L20.0096 19L19.1551 15.485L22 13.12L18.2536 12.815L16.7895 9.5L15.3253 12.815L11.5789 13.12L14.4239 15.485L13.5694 19L16.7895 17.135Z" fill="#7F828E"/>
+<path d="M9.26316 9.5C11.8221 9.5 13.8947 7.37438 13.8947 4.75C13.8947 2.12562 11.8221 0 9.26316 0C6.70421 0 4.63158 2.12562 4.63158 4.75C4.63158 7.37438 6.70421 9.5 9.26316 9.5Z" fill="#7F828E"/>
+<path d="M6.69907 12.1373C3.61621 12.7076 0 14.2071 0 16.625V19H11.2779L11.896 16.4575L6.69907 12.1373Z" fill="#7F828E"/>
 </svg>

package/assets/images/menu/dhr/MHRP89N1000.svg

@@ -1,5 +1,6 @@
-<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M17.55 0V39C7.66 38.03 0 29.66 0 19.5C0 9.34 7.66 0.98 17.55 0Z" fill="#1CA261"/>
-<path d="M21.5098 0V17.53H38.9998C38.0798 8.29 30.7298 0.92 21.5098 0Z" fill="#FF8C00"/>
-<path d="M21.5098 21.47V39C30.7498 38.08 38.0898 30.71 38.9998 21.47H21.5098Z" fill="#FF4444"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <g id="Group_4" data-name="Group 4" transform="translate(-904.173 -528.063)">
+    <rect id="Rectangle_2" data-name="Rectangle 2" width="24" height="24" transform="translate(904.173 528.063)" fill="none"/>
+    <path id="Path_1" data-name="Path 1" d="M-14.66-100.938v20a10.017,10.017,0,0,1-9-10A10.017,10.017,0,0,1-14.66-100.938Zm2.03,0v8.99h8.97A10.044,10.044,0,0,0-12.63-100.938Zm0,11.011v8.989a10.034,10.034,0,0,0,8.97-8.989Z" transform="translate(929.832 631)"/>
+  </g>
 </svg>

package/assets/images/menu/dhr/MHRP89N1001.svg

@@ -1,5 +1,6 @@
-<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M17.55 0V39C7.66 38.03 0 29.66 0 19.5C0 9.34 7.66 0.98 17.55 0Z" fill="#1CA261"/>
-<path d="M21.5098 0V17.53H38.9998C38.0798 8.29 30.7298 0.92 21.5098 0Z" fill="#FF8C00"/>
-<path d="M21.5098 21.47V39C30.7498 38.08 38.0898 30.71 38.9998 21.47H21.5098Z" fill="#FF4444"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <g id="Group_4" data-name="Group 4" transform="translate(-904.173 -528.063)">
+    <rect id="Rectangle_2" data-name="Rectangle 2" width="24" height="24" transform="translate(904.173 528.063)" fill="none"/>
+    <path id="Path_1" data-name="Path 1" d="M-14.66-100.938v20a10.017,10.017,0,0,1-9-10A10.017,10.017,0,0,1-14.66-100.938Zm2.03,0v8.99h8.97A10.044,10.044,0,0,0-12.63-100.938Zm0,11.011v8.989a10.034,10.034,0,0,0,8.97-8.989Z" transform="translate(929.832 631)"/>
+  </g>
 </svg>

package/assets/images/menu/dhr/W09F2000.svg

@@ -1,4 +1,6 @@
-<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M36.1201 27.93L29.9501 25.26C29.7601 25.14 29.6101 24.97 29.5001 24.77H33.6401C33.6401 24.77 33.8801 24.79 34.2501 24.79C35.1201 24.81 35.9801 24.65 36.7901 24.34C37.7401 23.92 38.1801 22.81 37.7601 21.86C37.7101 21.75 37.6501 21.64 37.5801 21.53C36.4001 19.84 33.6301 15.44 33.5501 10.98C33.5501 10.9 33.3001 3.32 25.8001 3.25C25.7101 3.25 25.6301 3.26 25.5401 3.27C25.4501 3.27 25.3701 3.25 25.2801 3.25C25.2301 3.25 25.1801 3.26 25.1301 3.26C25.6001 4.4 25.8001 5.62 25.7101 6.87V9.75C26.1501 10.47 26.3801 11.31 26.3901 12.16V14.87C26.3901 16.39 25.6501 17.8 24.4501 18.67C23.9401 19.99 23.2701 21.24 22.4501 22.4C22.4101 22.46 22.3701 22.51 22.3301 22.57V24.05L28.6801 27.22C31.4501 28.6 33.1701 31.38 33.1601 34.48V38.98H39.0001V32.53C39.0001 30.58 37.8901 28.79 36.1201 27.93Z" fill="#6AD2FF"/>
-<path d="M27.78 29.03L21.31 25.8C20.7 25.5 20.32 24.88 20.32 24.2V21.9C20.47 21.71 20.64 21.49 20.8 21.26C21.65 20.05 22.32 18.73 22.8 17.33C23.76 16.89 24.38 15.94 24.38 14.88V12.18C24.38 11.53 24.14 10.89 23.7 10.4V6.8C23.83 5.2 23.32 3.61 22.29 2.38C20.9 0.8 18.64 0 15.58 0C12.52 0 10.26 0.8 8.87 2.39C7.83 3.62 7.32 5.2 7.45 6.81V10.41C7.02 10.9 6.78 11.53 6.77 12.19V14.89C6.77 15.71 7.14 16.48 7.78 16.99C8.25 18.76 9.05 20.42 10.15 21.89V24.13C10.15 24.78 9.79 25.39 9.22 25.7L3.18 28.99C1.22 30.06 0 32.12 0 34.35V39H31.16V34.49C31.17 32.17 29.86 30.05 27.78 29.03Z" fill="#199FFF"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="26.293" height="24.102" viewBox="0 0 26.293 24.102">
+  <g id="hosonhanvien_mss" transform="translate(0 -2.5)">
+    <path id="Path_3972" data-name="Path 3972" d="M17.973,21.295,13.787,19.2a1.153,1.153,0,0,1-.64-1.036V16.684c.1-.123.206-.262.315-.417a10.029,10.029,0,0,0,1.294-2.541,1.739,1.739,0,0,0,1.02-1.585V10.388a1.748,1.748,0,0,0-.438-1.15V6.907a3.928,3.928,0,0,0-.917-2.859A5.516,5.516,0,0,0,10.079,2.5,5.517,5.517,0,0,0,5.737,4.047,3.929,3.929,0,0,0,4.82,6.906V9.237a1.748,1.748,0,0,0-.438,1.15V12.14A1.743,1.743,0,0,0,5.038,13.5a9.2,9.2,0,0,0,1.535,3.171v1.45a1.158,1.158,0,0,1-.6,1.017L2.06,21.273A3.953,3.953,0,0,0,0,24.745V26.6H20.158V24.83A3.932,3.932,0,0,0,17.973,21.295Z" transform="translate(0)" fill="#707070"/>
+    <path id="Path_3973" data-name="Path 3973" d="M42,24.679l-4.261-1.845a.868.868,0,0,1-.308-.338l2.859,0s.165.016.422.016a4.6,4.6,0,0,0,1.753-.31,1.3,1.3,0,0,0,.545-1.941c-.817-1.163-2.725-4.2-2.784-7.284,0-.053-.174-5.295-5.351-5.337a6.5,6.5,0,0,0-1.478.181,4.734,4.734,0,0,1,.291,2.005V11.9a2.394,2.394,0,0,1,.438,1.376v1.753a2.409,2.409,0,0,1-1.142,2.043,10.651,10.651,0,0,1-1.292,2.463q-.1.14-.194.265v1.253a.492.492,0,0,0,.277.448l4.186,2.093a4.585,4.585,0,0,1,2.548,4.124v1.773h5.478v-1.62A3.543,3.543,0,0,0,42,24.679Z" transform="translate(-17.696 -2.886)" fill="#707070"/>
+  </g>
 </svg>

package/components/button/index.js

@@ -111,6 +111,7 @@ const Button = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   startIcon,
   endIcon,
   children,
+  refs,
   loading,
   ...props
 }, reference) => {

package/components/button/more.js

@@ -23,25 +23,25 @@ const ButtonMore = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
   const [open, setOpen] = useState(false);
   const ButtonMoreStyle = css`
-            display: inline-flex;
-            button {
-                :first-of-type {
-                    border-top-right-radius: 0;
-                    border-bottom-right-radius: 0;
-                    margin-right: 1px;
-                }
-                :last-of-type {
-                    border-top-left-radius: 0;
-                    border-bottom-left-radius: 0;
-                    margin-left: 0;
-                }
+        display: inline-flex;
+        button {
+            :first-of-type {
+                border-top-right-radius: 0;
+                border-bottom-right-radius: 0;
+                margin-right: 1px;
             }
-            .more-icon-close {
-                display: none;
+            :last-of-type {
+                border-top-left-radius: 0;
+                border-bottom-left-radius: 0;
+                margin-left: 0;
             }
-        `;
+        }
+        .more-icon-close {
+            display: none;
+        }
+    `;
 
-  const showMoreOption = () => {
+  const showMoreOption = e => {
     if (!open) {
       setOpen(true);
     }

package/components/button/ripple-effect.js

@@ -1,5 +1,3 @@
-/* eslint-disable react/prop-types */
-
 /** @jsxRuntime classic */
 
 /** @jsx jsx */

package/components/card/card.js

@@ -1,5 +1,3 @@
-/* eslint-disable no-undef */
-
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
@@ -9,18 +7,18 @@ import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import CardContext from './context';
 const Card = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  // open,
-  // type,
-  // title,
+  open,
+  type,
+  title,
   style,
   top,
-  // pressESCToClose,
-  // darkTheme,
-  // autoFocus,
-  // refs,
+  pressESCToClose,
+  darkTheme,
+  autoFocus,
+  refs,
   onClose,
-  // onConfirm,
-  // onCancel,
+  onConfirm,
+  onCancel,
   children,
   width,
   ...props
@@ -31,25 +29,25 @@ const Card = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
   const cardBoxRef = useRef(null);
   const CardBox = css`
-                background-color: white;
-                border-radius: 4px;
-                box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-                box-sizing: border-box;
-                border-radius: 10px;
-                display: flex;
-                position: relative;
-                max-height: calc(100% - ${isNaN(top) ? top : +top + 'px'});
-                min-width: 150px;
-                max-width: 90%;
-                margin: 0 auto;
-                height: max-content;
-                width: ${isNaN(width) ? width : width + 'px'};
-                flex-direction: column;
-                -webkit-box-orient: vertical;
-                -webkit-box-direction: normal;
-                /* min-height: 152px; */
-                cursor: 'initial';
-            `;
+        background-color: white;
+        border-radius: 4px;
+        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+        box-sizing: border-box;
+        border-radius: 10px;
+        display: flex;
+        position: relative;
+        max-height: calc(100% - ${isNaN(top) ? top : +top + 'px'});
+        min-width: 150px;
+        max-width: 90%;
+        margin: 0 auto;
+        height: max-content;
+        width: ${isNaN(width) ? width : width + 'px'};
+        flex-direction: column;
+        -webkit-box-orient: vertical;
+        -webkit-box-direction: normal;
+        /* min-height: 152px; */
+        cursor: 'initial';
+    `;
 
   const onShowCard = () => {
     setOpenState(true);

package/components/card/index.js

@@ -1,4 +1,3 @@
-/* eslint-disable react/display-name */
 import React, { memo, useEffect, useRef, forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import Card from './card';

package/components/chart/Pie/Circle.js

@@ -1,7 +1,7 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
 import { memo, forwardRef } from 'react';
 import { jsx } from '@emotion/core';
 const Circle = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
@@ -19,7 +19,6 @@ const Circle = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   quantity
 }, ref) => {
   return jsx("ellipse", {
-    ref: ref,
     cx: center,
     cy: center,
     fill: color,

package/components/chart/Pie-v2/Circle.js

@@ -1,7 +1,7 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
 import { memo, forwardRef } from 'react';
 import { jsx } from '@emotion/core';
 const Circle = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
@@ -15,10 +15,10 @@ const Circle = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   radius,
   strokeColor,
   strokeWidth,
-  name
+  name,
+  quantity
 }, ref) => {
   return jsx("ellipse", {
-    ref: ref,
     cx: center,
     cy: center,
     fill: color,
@@ -44,6 +44,7 @@ Circle.propTypes = {
   radius: PropTypes.number.isRequired,
   strokeColor: PropTypes.string,
   strokeWidth: PropTypes.number,
-  name: PropTypes.string
+  name: PropTypes.string,
+  quantity: PropTypes.number
 };
 export default Circle;

package/components/chart/Pie-v2/Sector.js

@@ -2,7 +2,7 @@
 
 /** @jsx jsx */
 import { useRef, memo, forwardRef } from 'react';
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
 import { jsx, css } from '@emotion/core';
 const Sector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   fill,
@@ -18,6 +18,8 @@ const Sector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   renderSelectedItem,
   className,
   path,
+  name,
+  quantity,
   href,
   transitionDuration,
   transitionTimingFunction,
@@ -32,20 +34,20 @@ const Sector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
   const pathRef = useRef(null);
   const SectorCSS = expandOnHover || expandedIndex >= 0 ? css`
-                          transition-property: ${transitionProperty};
-                          cursor: pointer;
-                          transition-timing-function: ${transitionTimingFunction};
-                          transition-duration: ${transitionDuration};
-                          &:hover {
-                              box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-                              filter: drop-shadow(0.05rem 0.05rem 0.1rem rgba(0, 0, 0, 0.5));
-                          }
-                      ` : css`
-                          transition-property: all;
-                          cursor: pointer;
-                          transition-timing-function: ${transitionTimingFunction};
-                          transition-duration: ${transitionDuration};
-                      `;
+        transition-property: ${transitionProperty};
+        cursor: pointer;
+        transition-timing-function: ${transitionTimingFunction};
+        transition-duration: ${transitionDuration};
+        &:hover {
+            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+            filter: drop-shadow( 0.05rem 0.05rem 0.1rem rgba(0, 0, 0, 0.5));
+        }
+    ` : css`
+        transition-property: all;
+        cursor: pointer;
+        transition-timing-function: ${transitionTimingFunction};
+        transition-duration: ${transitionDuration};
+    `;
   const content = jsx("path", {
     d: path,
     fill: fill,
@@ -73,13 +75,14 @@ const Sector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   return result;
 }));
 Sector.defaultProps = {
-  strokeColor: '#fff',
+  strokeColor: "#fff",
   strokeWidth: 0,
-  strokeLinejoin: 'round',
+  strokeLinejoin: "round",
+  name: null,
   quantity: null,
   href: null,
-  transitionDuration: '0.5s',
-  transitionTimingFunction: 'ease-in',
+  transitionDuration: "0.5s",
+  transitionTimingFunction: "ease-in",
   transitionProperty: 'd'
 };
 Sector.propTypes = {
@@ -108,6 +111,9 @@ Sector.propTypes = {
 
   /** The strokeWidth attribute is a presentation attribute defining the width of the stroke to be applied to the shape */
   strokeWidth: PropTypes.number,
+
+  /** The title is add from the data */
+  name: PropTypes.string,
   quantity: PropTypes.number,
   href: PropTypes.string,
 

package/components/chart/Pie-v2/Sectors.js

@@ -1,14 +1,13 @@
-/* eslint-disable react/prop-types */
-
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
 import { useState } from 'react';
-import PropTypes from 'prop-types';
-import Sector from './Sector';
+import PropTypes from "prop-types";
+import Sector from "./Sector";
+import ReactDOMServer from 'react-dom/server';
 import { jsx, css } from '@emotion/core';
-import { randomString } from '../../../utils';
-import { typography } from '../../../styles/typography';
+import { randomString, parseTextToHTML } from '../../../utils';
+import { typography } from "../../../styles/typography";
 
 const Sectors = ({
   center,
@@ -38,7 +37,7 @@ const Sectors = ({
   let angleStart = startAngle;
   let angleEnd = startAngle;
 
-  const getPath = (d, i) => {
+  const getPath = (d, i, e) => {
     const anglePosition = (angleStart + angleEnd) / 2;
     var rotateX = 0;
     var rotateY = 0;
@@ -78,10 +77,10 @@ const Sectors = ({
             ${typography.paragraph1};
             stroke-dasharray: 1000;
             stroke-dashoffset: 1000;
-            animation: draw 8s ease-in-out forwards;
+		    animation: draw 8s ease-in-out forwards;
             @keyframes draw {
-                to {
-                    stroke-dashoffset: 0;
+            to {
+                stroke-dashoffset: 0;
                 }
             }
         `;
@@ -95,7 +94,7 @@ const Sectors = ({
             animation: dash 1s linear forwards;
             &:hover {
                 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-                filter: drop-shadow(0.05rem 0.05rem 0.1rem rgba(0, 0, 0, 0.2));
+                filter: drop-shadow( 0.05rem 0.05rem 0.1rem rgba(0, 0, 0, 0.2));
             }
             @keyframes dash {
                 to {
@@ -104,7 +103,7 @@ const Sectors = ({
             }
         `;
     return jsx("g", {
-      key: 'Path' + i
+      key: "Path" + i
     }, jsx("path", {
       d: path1,
       stroke: d.color,
@@ -165,9 +164,9 @@ const Sectors = ({
 
     return jsx("g", {
       key: i,
-      id: 'sector' + i
+      id: "sector" + i
     }, jsx(Sector, {
-      key: 'sector' + i,
+      key: "sector" + i,
       fill: d.color,
       path: path,
       href: d.href,
@@ -189,8 +188,8 @@ const Sectors = ({
 Sectors.defaultProps = {
   expandSize: 10,
   strokeWidthTooltip: 2,
-  transitionTimingFunction: 'ease-out',
-  strokeLinejoin: 'round',
+  transitionTimingFunction: "ease-out",
+  strokeLinejoin: "round",
   transitionProperty: 'd'
 };
 Sectors.propTypes = {