pixel-react 1.9.1 → 1.9.3

package/src/assets/icons/variable.svg

@@ -1,3 +1,3 @@
-<svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.9799 1.25165L14.98 1.25157C14.7152 0.961146 14.2958 0.772921 13.667 0.762264L13.6603 0.762149L13.6603 0.762103C12.7479 0.734285 11.9951 0.96121 11.384 1.41819C10.8289 1.83329 10.3593 2.46205 10.001 3.33573C10.1534 3.30977 10.311 3.29489 10.4753 3.29489C10.7848 3.29489 11.4004 3.3316 11.7695 3.80919L11.7739 3.81488L11.7738 3.81491C12.0596 4.19596 12.0442 4.69533 11.9167 5.14881L11.9148 5.1555L11.9148 5.15548C11.8487 5.3786 11.679 5.72644 11.4767 6.10052C11.2662 6.48991 10.996 6.95156 10.702 7.42063L10.6993 7.42506L10.6992 7.42504C10.3347 7.99341 10.0495 8.41568 9.83621 8.69902C9.73082 8.839 9.63297 8.95859 9.54476 9.04759C9.50132 9.09141 9.44774 9.14065 9.3864 9.18221C9.33933 9.2141 9.21625 9.29216 9.04751 9.29216H9.03969L9.03189 9.29192C8.86024 9.28655 8.74138 9.20288 8.68565 9.15592C8.62506 9.10486 8.58139 9.04856 8.55261 9.00722C8.49422 8.92335 8.44439 8.82359 8.40245 8.72934C8.31617 8.5355 8.22417 8.27484 8.13119 7.98249C7.94369 7.393 7.73346 6.61448 7.53672 5.84142C7.33946 5.06626 7.15363 4.28817 7.01499 3.6962C6.94564 3.40006 6.88802 3.15019 6.84663 2.97037L6.79742 2.75665C6.78998 2.72446 6.7853 2.7045 6.78273 2.69357C6.78085 2.68557 6.78011 2.68241 6.78026 2.68285C6.57968 1.95823 6.4571 1.54402 6.26635 1.28514C6.18505 1.17481 6.0959 1.10218 5.9786 1.05184C5.85381 0.998295 5.67159 0.959272 5.39186 0.959272C5.26627 0.959272 5.03076 1.0232 4.67253 1.206C4.32974 1.38093 3.92898 1.63585 3.49123 1.94799C2.6167 2.57158 1.63791 3.39214 0.748646 4.17102L0.746028 4.17331L0.74602 4.1733L0.529348 4.36043L0.770345 4.6639C1.04584 4.45958 1.33341 4.25452 1.60844 4.09759C1.8837 3.94053 2.21683 3.7892 2.55433 3.78725C3.08046 3.77664 3.42074 4.18183 3.64468 4.58689C3.88424 5.02023 4.10594 5.65616 4.33533 6.49304C4.78297 8.11185 5.33179 9.86026 5.93252 11.1966C6.23406 11.8673 6.53701 12.4074 6.83047 12.772C7.13988 13.1564 7.35241 13.2402 7.4597 13.2402C8.04015 13.2402 8.72417 12.9975 9.55755 12.3699C10.3917 11.7418 11.3418 10.753 12.4423 9.32413L14.9799 1.25165ZM14.9799 1.25165L14.9874 1.25952M14.9799 1.25165L14.9874 1.25952M14.9874 1.25952C15.338 1.62763 15.549 2.31697 15.4903 3.3985L15.4902 3.3985M14.9874 1.25952L15.4902 3.3985M15.4902 3.3985L15.4899 3.40533M15.4902 3.3985L15.4899 3.40533M15.4899 3.40533C15.4633 4.06042 15.2114 4.88481 14.6981 5.88902M15.4899 3.40533L14.6981 5.88902M14.6981 5.88902C14.1875 6.88796 13.4345 8.03371 12.4424 9.32404L14.6981 5.88902Z" fill="white" stroke="currentColor"/>
-</svg>
+<svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.9799 1.25165L14.98 1.25157C14.7152 0.961146 14.2958 0.772921 13.667 0.762264L13.6603 0.762149L13.6603 0.762103C12.7479 0.734285 11.9951 0.96121 11.384 1.41819C10.8289 1.83329 10.3593 2.46205 10.001 3.33573C10.1534 3.30977 10.311 3.29489 10.4753 3.29489C10.7848 3.29489 11.4004 3.3316 11.7695 3.80919L11.7739 3.81488L11.7738 3.81491C12.0596 4.19596 12.0442 4.69533 11.9167 5.14881L11.9148 5.1555L11.9148 5.15548C11.8487 5.3786 11.679 5.72644 11.4767 6.10052C11.2662 6.48991 10.996 6.95156 10.702 7.42063L10.6993 7.42506L10.6992 7.42504C10.3347 7.99341 10.0495 8.41568 9.83621 8.69902C9.73082 8.839 9.63297 8.95859 9.54476 9.04759C9.50132 9.09141 9.44774 9.14065 9.3864 9.18221C9.33933 9.2141 9.21625 9.29216 9.04751 9.29216H9.03969L9.03189 9.29192C8.86024 9.28655 8.74138 9.20288 8.68565 9.15592C8.62506 9.10486 8.58139 9.04856 8.55261 9.00722C8.49422 8.92335 8.44439 8.82359 8.40245 8.72934C8.31617 8.5355 8.22417 8.27484 8.13119 7.98249C7.94369 7.393 7.73346 6.61448 7.53672 5.84142C7.33946 5.06626 7.15363 4.28817 7.01499 3.6962C6.94564 3.40006 6.88802 3.15019 6.84663 2.97037L6.79742 2.75665C6.78998 2.72446 6.7853 2.7045 6.78273 2.69357C6.78085 2.68557 6.78011 2.68241 6.78026 2.68285C6.57968 1.95823 6.4571 1.54402 6.26635 1.28514C6.18505 1.17481 6.0959 1.10218 5.9786 1.05184C5.85381 0.998295 5.67159 0.959272 5.39186 0.959272C5.26627 0.959272 5.03076 1.0232 4.67253 1.206C4.32974 1.38093 3.92898 1.63585 3.49123 1.94799C2.6167 2.57158 1.63791 3.39214 0.748646 4.17102L0.746028 4.17331L0.74602 4.1733L0.529348 4.36043L0.770345 4.6639C1.04584 4.45958 1.33341 4.25452 1.60844 4.09759C1.8837 3.94053 2.21683 3.7892 2.55433 3.78725C3.08046 3.77664 3.42074 4.18183 3.64468 4.58689C3.88424 5.02023 4.10594 5.65616 4.33533 6.49304C4.78297 8.11185 5.33179 9.86026 5.93252 11.1966C6.23406 11.8673 6.53701 12.4074 6.83047 12.772C7.13988 13.1564 7.35241 13.2402 7.4597 13.2402C8.04015 13.2402 8.72417 12.9975 9.55755 12.3699C10.3917 11.7418 11.3418 10.753 12.4423 9.32413L14.9799 1.25165ZM14.9799 1.25165L14.9874 1.25952M14.9799 1.25165L14.9874 1.25952M14.9874 1.25952C15.338 1.62763 15.549 2.31697 15.4903 3.3985L15.4902 3.3985M14.9874 1.25952L15.4902 3.3985M15.4902 3.3985L15.4899 3.40533M15.4902 3.3985L15.4899 3.40533M15.4899 3.40533C15.4633 4.06042 15.2114 4.88481 14.6981 5.88902M15.4899 3.40533L14.6981 5.88902M14.6981 5.88902C14.1875 6.88796 13.4345 8.03371 12.4424 9.32404L14.6981 5.88902Z" fill="white" stroke="currentColor"/>
+</svg>

package/src/assets/icons/web_service_icon.svg

@@ -1,3 +1,3 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M0.845864 11.5813C0.304532 10.504 0 9.28691 0 7.99998C0 6.71305 0.304532 5.49599 0.845864 4.41866C2.16053 1.79893 4.87199 0 7.99998 0C11.128 0 13.8394 1.79893 15.1541 4.41866C15.6954 5.49599 16 6.71305 16 7.99998C16 8.74122 15.8989 9.45928 15.7098 10.1408C15.5178 9.64596 15.2368 9.19545 14.8865 8.8089C14.9174 8.54352 14.9333 8.27358 14.9333 7.99998C14.9333 7.06079 14.7461 6.16479 14.4074 5.34772C13.5365 5.68532 12.5098 5.95626 11.3765 6.13866C11.4167 6.54759 11.4442 6.96932 11.4575 7.40092C11.0893 7.42113 10.7334 7.48763 10.3956 7.59469C10.386 7.14382 10.3603 6.70393 10.32 6.27892C9.57811 6.35786 8.80052 6.39999 7.99998 6.39999C7.19945 6.39999 6.42185 6.35786 5.67999 6.27892C5.62772 6.83039 5.59999 7.40692 5.59999 7.99998C5.59999 8.59305 5.62772 9.16958 5.67999 9.72105C6.40301 9.64412 7.15998 9.60215 7.93903 9.60006C7.75305 9.93264 7.60993 10.2924 7.51716 10.672C6.93298 10.6849 6.36403 10.7212 5.81545 10.7781C6.01065 11.9786 6.33066 13.0128 6.73812 13.7733C6.94452 14.1589 7.17065 14.4688 7.41812 14.6789C7.60265 14.8357 7.79465 14.9333 7.99998 14.9333C8.20532 14.9333 8.39732 14.8357 8.58185 14.6789L8.58903 14.6728C9.02045 15.1233 9.54884 15.4802 10.1407 15.7099C9.4592 15.8989 8.74129 16 7.99998 16C4.87199 16 2.16053 14.201 0.845864 11.5813ZM1.59253 5.34772C1.25386 6.16479 1.06666 7.06079 1.06666 7.99998C1.06666 8.93918 1.25386 9.83518 1.59253 10.6522C2.46346 10.3146 3.49013 10.0437 4.62346 9.86131C4.56479 9.26505 4.53332 8.64158 4.53332 7.99998C4.53332 7.35839 4.56479 6.73492 4.62346 6.13866C3.49013 5.95626 2.46346 5.68532 1.59253 5.34772ZM13.9205 4.39252C13.0378 2.94773 11.6416 1.8512 9.98665 1.35626C10.0608 1.47146 10.1328 1.5936 10.2021 1.72267C10.657 2.57226 11.0208 3.73279 11.2394 5.08159C12.2357 4.91999 13.1429 4.68479 13.9205 4.39252ZM6.01332 1.35626C4.35839 1.8512 2.96213 2.94773 2.07946 4.39252C2.85706 4.68532 3.76426 4.91999 4.76053 5.08159C4.97919 3.73279 5.34292 2.57226 5.79786 1.72267C5.86719 1.5936 5.93919 1.47146 6.01332 1.35626ZM2.07946 11.6074C2.96213 13.0522 4.35839 14.1488 6.01332 14.6437C5.93919 14.5285 5.86719 14.4064 5.79786 14.2773C5.34292 13.4277 4.97919 12.2672 4.76053 10.9184C3.76426 11.08 2.85706 11.3152 2.07946 11.6074ZM7.99998 1.06666C7.79465 1.06666 7.60265 1.16426 7.41812 1.32106C7.17065 1.5312 6.94452 1.84106 6.73812 2.22666C6.33066 2.9872 6.01065 4.02133 5.81545 5.22186C6.51412 5.29492 7.24585 5.33332 7.99998 5.33332C8.75412 5.33332 9.48585 5.29439 10.1845 5.22186C9.98931 4.02133 9.66931 2.9872 9.26185 2.22666C9.05545 1.84106 8.82932 1.5312 8.58185 1.32106C8.39732 1.16426 8.20532 1.06666 7.99998 1.06666ZM15.3852 11.7118L14.6747 11.839C14.6625 12.1002 14.6178 12.3527 14.5446 12.5925L15.1688 12.9585L14.5112 14.1149L13.8862 13.7485C13.7155 13.9359 13.5218 14.1016 13.3095 14.2404L13.5563 14.9286L12.3204 15.3853L12.0737 14.6971C11.9504 14.7129 11.8246 14.7211 11.6971 14.7211C11.5696 14.7211 11.4438 14.7129 11.3205 14.6971L11.0738 15.3853L9.83792 14.9286L10.0847 14.2404C9.8724 14.1016 9.6787 13.9359 9.50803 13.7485L8.88303 14.1149L8.22538 12.9585L8.84963 12.5925C8.77643 12.3527 8.73174 12.1002 8.71954 11.839L8.00897 11.7118L8.23727 10.3967L8.94724 10.5238C9.04546 10.2861 9.1728 10.064 9.32441 9.86175L8.86061 9.30034L9.86812 8.44189L10.3315 9.00283C10.5528 8.88684 10.7902 8.79826 11.0396 8.74126V8.00904H12.3546V8.74126C12.6039 8.79824 12.8414 8.88684 13.0627 9.00283L13.5261 8.44187L14.5336 9.30031L14.0698 9.86172C14.2214 10.064 14.3487 10.2861 14.447 10.5238L15.1569 10.3967L15.3852 11.7118ZM10.3235 11.6942C10.3235 12.4645 10.9385 13.0889 11.6971 13.0889C12.4557 13.0889 13.0707 12.4645 13.0707 11.6942C13.0707 10.9238 12.4557 10.2994 11.6971 10.2994C10.9385 10.2994 10.3235 10.9238 10.3235 11.6942Z" fill="currentColor"/>
-</svg>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.845864 11.5813C0.304532 10.504 0 9.28691 0 7.99998C0 6.71305 0.304532 5.49599 0.845864 4.41866C2.16053 1.79893 4.87199 0 7.99998 0C11.128 0 13.8394 1.79893 15.1541 4.41866C15.6954 5.49599 16 6.71305 16 7.99998C16 8.74122 15.8989 9.45928 15.7098 10.1408C15.5178 9.64596 15.2368 9.19545 14.8865 8.8089C14.9174 8.54352 14.9333 8.27358 14.9333 7.99998C14.9333 7.06079 14.7461 6.16479 14.4074 5.34772C13.5365 5.68532 12.5098 5.95626 11.3765 6.13866C11.4167 6.54759 11.4442 6.96932 11.4575 7.40092C11.0893 7.42113 10.7334 7.48763 10.3956 7.59469C10.386 7.14382 10.3603 6.70393 10.32 6.27892C9.57811 6.35786 8.80052 6.39999 7.99998 6.39999C7.19945 6.39999 6.42185 6.35786 5.67999 6.27892C5.62772 6.83039 5.59999 7.40692 5.59999 7.99998C5.59999 8.59305 5.62772 9.16958 5.67999 9.72105C6.40301 9.64412 7.15998 9.60215 7.93903 9.60006C7.75305 9.93264 7.60993 10.2924 7.51716 10.672C6.93298 10.6849 6.36403 10.7212 5.81545 10.7781C6.01065 11.9786 6.33066 13.0128 6.73812 13.7733C6.94452 14.1589 7.17065 14.4688 7.41812 14.6789C7.60265 14.8357 7.79465 14.9333 7.99998 14.9333C8.20532 14.9333 8.39732 14.8357 8.58185 14.6789L8.58903 14.6728C9.02045 15.1233 9.54884 15.4802 10.1407 15.7099C9.4592 15.8989 8.74129 16 7.99998 16C4.87199 16 2.16053 14.201 0.845864 11.5813ZM1.59253 5.34772C1.25386 6.16479 1.06666 7.06079 1.06666 7.99998C1.06666 8.93918 1.25386 9.83518 1.59253 10.6522C2.46346 10.3146 3.49013 10.0437 4.62346 9.86131C4.56479 9.26505 4.53332 8.64158 4.53332 7.99998C4.53332 7.35839 4.56479 6.73492 4.62346 6.13866C3.49013 5.95626 2.46346 5.68532 1.59253 5.34772ZM13.9205 4.39252C13.0378 2.94773 11.6416 1.8512 9.98665 1.35626C10.0608 1.47146 10.1328 1.5936 10.2021 1.72267C10.657 2.57226 11.0208 3.73279 11.2394 5.08159C12.2357 4.91999 13.1429 4.68479 13.9205 4.39252ZM6.01332 1.35626C4.35839 1.8512 2.96213 2.94773 2.07946 4.39252C2.85706 4.68532 3.76426 4.91999 4.76053 5.08159C4.97919 3.73279 5.34292 2.57226 5.79786 1.72267C5.86719 1.5936 5.93919 1.47146 6.01332 1.35626ZM2.07946 11.6074C2.96213 13.0522 4.35839 14.1488 6.01332 14.6437C5.93919 14.5285 5.86719 14.4064 5.79786 14.2773C5.34292 13.4277 4.97919 12.2672 4.76053 10.9184C3.76426 11.08 2.85706 11.3152 2.07946 11.6074ZM7.99998 1.06666C7.79465 1.06666 7.60265 1.16426 7.41812 1.32106C7.17065 1.5312 6.94452 1.84106 6.73812 2.22666C6.33066 2.9872 6.01065 4.02133 5.81545 5.22186C6.51412 5.29492 7.24585 5.33332 7.99998 5.33332C8.75412 5.33332 9.48585 5.29439 10.1845 5.22186C9.98931 4.02133 9.66931 2.9872 9.26185 2.22666C9.05545 1.84106 8.82932 1.5312 8.58185 1.32106C8.39732 1.16426 8.20532 1.06666 7.99998 1.06666ZM15.3852 11.7118L14.6747 11.839C14.6625 12.1002 14.6178 12.3527 14.5446 12.5925L15.1688 12.9585L14.5112 14.1149L13.8862 13.7485C13.7155 13.9359 13.5218 14.1016 13.3095 14.2404L13.5563 14.9286L12.3204 15.3853L12.0737 14.6971C11.9504 14.7129 11.8246 14.7211 11.6971 14.7211C11.5696 14.7211 11.4438 14.7129 11.3205 14.6971L11.0738 15.3853L9.83792 14.9286L10.0847 14.2404C9.8724 14.1016 9.6787 13.9359 9.50803 13.7485L8.88303 14.1149L8.22538 12.9585L8.84963 12.5925C8.77643 12.3527 8.73174 12.1002 8.71954 11.839L8.00897 11.7118L8.23727 10.3967L8.94724 10.5238C9.04546 10.2861 9.1728 10.064 9.32441 9.86175L8.86061 9.30034L9.86812 8.44189L10.3315 9.00283C10.5528 8.88684 10.7902 8.79826 11.0396 8.74126V8.00904H12.3546V8.74126C12.6039 8.79824 12.8414 8.88684 13.0627 9.00283L13.5261 8.44187L14.5336 9.30031L14.0698 9.86172C14.2214 10.064 14.3487 10.2861 14.447 10.5238L15.1569 10.3967L15.3852 11.7118ZM10.3235 11.6942C10.3235 12.4645 10.9385 13.0889 11.6971 13.0889C12.4557 13.0889 13.0707 12.4645 13.0707 11.6942C13.0707 10.9238 12.4557 10.2994 11.6971 10.2994C10.9385 10.2994 10.3235 10.9238 10.3235 11.6942Z" fill="currentColor"/>
+</svg>

package/src/components/Button/Button.tsx

@@ -17,6 +17,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       onClick,
       label,
       disabled = false,
+      children = null,
       type = 'button',
       className = '',
       style = {},
@@ -83,6 +84,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
           {label}
         </Typography>
         {iconPosition === 'right' && renderIcon()}
+        {children}
       </button>
     );
   }

package/src/components/Charts/BarChart/BarChart.stories.tsx

@@ -19,6 +19,7 @@ const meta: Meta<typeof BarChart> = {
     legend: { control: 'boolean' },
     showXAxisLabels: { control: 'boolean' },
     iconSize: { control: 'number' },
+    isTruncateText: {control: 'boolean'},
   },
 };
 
@@ -45,7 +46,7 @@ export const BarChartDashboard: Story = {
       ['#00BBEF', '#0FA2CB'],
       ['#9C0000', '#9C0000'],
     ],
-
+    isTruncateText: true,
     xAxisLabel: 'Status',
     yAxisLabel: 'Count',
     padding: 30,

package/src/components/Charts/BarChart/BarChart.tsx

@@ -11,13 +11,14 @@ type BarChartProps = {
   barGap?: number;
   colors?: string[][];
   xAxisLabel?: string;
+  isTruncateText?: boolean;
   yAxisLabel?: string;
   padding?: number;
   yAxisDivisions?: number;
   barBorderRadius?: number;
   legend?: boolean;
   showXAxisLabels?: boolean;
-  icons?: (string | React.ReactNode)[];
+  icons?: (string | React.ReactNode)[]; 
   iconSize?: number;
   backgroundColor?: string;
   legendPosition?: 'top' | 'bottom';
@@ -32,6 +33,7 @@ const BarChart: React.FC<BarChartProps> = ({
   barGap = 20,
   colors = [],
   xAxisLabel,
+  isTruncateText = true,
   yAxisLabel,
   padding = 20,
   yAxisDivisions = 5,
@@ -249,7 +251,9 @@ const BarChart: React.FC<BarChartProps> = ({
                     textAnchor="middle"
                     className="ff-bar-chart-labels"
                   >
-                    {truncateText(item.label, 10)}
+                    {isTruncateText
+                      ? truncateText(item.label, 10)
+                      : item.label}
                   </text>
                 )}
               </g>

package/src/components/Charts/MultiRadialChart/MultiRadialChart.scss

@@ -4,7 +4,6 @@
   cursor: pointer;
   display: flex;
   align-items: center;
-  gap: 16px;
   &.ff-multi-radial-chart-number {
     flex-direction: column;
   }
@@ -55,7 +54,6 @@
       grid-template-columns: auto;
       display: flex;
       flex-direction: column;
-      gap: 15px;
       justify-content: center;
       margin-left: 8px;
 

package/src/components/Charts/MultiRadialChart/MultiRadialChart.stories.tsx

@@ -42,6 +42,8 @@ export const Default: Story = {
     lineCap: 'round',
     legendType: 'numberLegend',
     isLegendDetails: true,
+     chartToPillGap: "16px",
+    pillLegendGap: "15px"
   },
 };
 
@@ -74,6 +76,8 @@ export const numberLegend: Story = {
     lineCap: 'square',
     legendType: 'numberLegend',
     isLegendDetails: true,
+     chartToPillGap: "16px",
+    pillLegendGap: "15px"
   },
 };
 
@@ -112,6 +116,8 @@ export const PillLegend: Story = {
     legendType: 'pillLegend',
     isLegendDetails: true,
     labelFontSize: 12,
-    subLabelFontSize: 8
+    subLabelFontSize: 8,
+    chartToPillGap: "16px",
+    pillLegendGap: "15px"
   },
 };

package/src/components/Charts/MultiRadialChart/MultiRadialChart.tsx

@@ -25,6 +25,8 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
   labelHeading,
   legendType = 'numberLegend',
   isLegendDetails = true,
+  chartToPillGap,
+  pillLegendGap,
   labelFontSize = 12,
   subLabelFontSize = 8,
 }) => {
@@ -56,7 +58,7 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
     switch (legendType) {
       case 'numberLegend':
         return (
-          <div className="ff-legend-container ff-number-legend">
+          <div className="ff-legend-container ff-number-legend" style={{gap:pillLegendGap}}>
             {legendData.map((item, index) => (
               <div className="ff-legend-item" key={index}>
                 <Typography
@@ -81,7 +83,7 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
 
       case 'pillLegend':
         return (
-          <div className="ff-legend-container ff-pill-legend">
+          <div className="ff-legend-container ff-pill-legend" style={{gap:pillLegendGap}}>
             {legendData.reverse().map((item, index) => (
               <div className="ff-legend-item" key={index}>
                 <span
@@ -148,6 +150,7 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
           ? 'ff-multi-radial-chart-number'
           : 'ff-multi-radial-chart-pill'
       }`}
+      style={{gap: chartToPillGap}}
     >
       <div className="relative" style={{ width: svgSize, height: svgSize }}>
         <svg width={svgSize} height={svgSize} viewBox={`0 0 ${svgSize} ${svgSize}`} className="absolute top-0 left-0">

package/src/components/Charts/MultiRadialChart/types.ts

@@ -19,6 +19,8 @@ export interface MultiRadialChartProps {
   labelFontSize?: number,
   subLabelFontSize?: number 
   gapAngle?:number;
+  chartToPillGap: number | string;
+  pillLegendGap: number | string;
 }
 export interface ChartItem extends BarValue{
   label: string;