pixel-react 1.9.2 → 1.9.4

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;