cr-ui-lib 1.1.93 → 1.1.95

package/dist/index.d.mts

@@ -121,8 +121,9 @@ interface MultiBarGraphProps {
     /** The maximum value for the Y-axis. Defaults to undefined, allowing Chart.js to auto-calculate. */
     yAxisMax?: number;
     tab?: "Month" | "Week" | "Day" | "Hourly" | null;
+    percentage?: boolean;
 }
-declare const MultiBarGraph: ({ datasets, xAxisLabels, className, tooltipPosition, yAxisMax, tab, }: MultiBarGraphProps) => JSX.Element;
+declare const MultiBarGraph: ({ datasets, xAxisLabels, className, tooltipPosition, yAxisMax, tab, percentage }: MultiBarGraphProps) => JSX.Element;
 
 interface CommonInputProps extends React$1.HTMLAttributes<HTMLInputElement | HTMLTextAreaElement> {
     label?: string;

package/dist/index.d.ts

@@ -121,8 +121,9 @@ interface MultiBarGraphProps {
     /** The maximum value for the Y-axis. Defaults to undefined, allowing Chart.js to auto-calculate. */
     yAxisMax?: number;
     tab?: "Month" | "Week" | "Day" | "Hourly" | null;
+    percentage?: boolean;
 }
-declare const MultiBarGraph: ({ datasets, xAxisLabels, className, tooltipPosition, yAxisMax, tab, }: MultiBarGraphProps) => JSX.Element;
+declare const MultiBarGraph: ({ datasets, xAxisLabels, className, tooltipPosition, yAxisMax, tab, percentage }: MultiBarGraphProps) => JSX.Element;
 
 interface CommonInputProps extends React$1.HTMLAttributes<HTMLInputElement | HTMLTextAreaElement> {
     label?: string;

package/dist/index.js

@@ -23,7 +23,7 @@ var PlainButton = ({ className, children, ...rest }) => {
     {
       ...rest,
       className: tailwindMerge.twMerge(
-        "min-h-[26px] w-[50px] bg-white text-center rounded-[4px] flex items-center justify-center border border-[#E2E2E2] text-black cursor-pointer hover:bg-gray-100",
+        "min-h-[26px] w-[50px] bg-white text-center rounded-[4px] flex items-center justify-center border border-[#E2E2E2] text-black cursor-pointer hover:bg-[#EFF6FF]",
         className
       ),
       children
@@ -1554,7 +1554,8 @@ var MultiBarGraph = ({
   tooltipPosition = "top",
   yAxisMax,
   // CHANGED: Added yAxisMax prop
-  tab = "Month"
+  tab = "Month",
+  percentage = false
 }) => {
   const chartRef = React.useRef(null);
   const defaultColors = [
@@ -1592,7 +1593,15 @@ var MultiBarGraph = ({
           max: yAxisMax,
           // CHANGED: Use the dynamic yAxisMax prop
           border: { display: false },
-          grid: { drawOnChartArea: false }
+          grid: { drawOnChartArea: false },
+          ticks: {
+            callback: function(value) {
+              if (percentage) {
+                return value + "%";
+              }
+              return value;
+            }
+          }
         }
       },
       plugins: {
@@ -1653,7 +1662,7 @@ var MultiBarGraph = ({
             } catch {
               formattedLabel = label;
             }
-            const percentage = totalBarValue > 0 ? (segmentValue / totalBarValue * 100).toFixed(2) : 0;
+            const percentage2 = totalBarValue > 0 ? (segmentValue / totalBarValue * 100).toFixed(2) : 0;
             const iconHtml = customSvgIcon || getDefaultSvgIcon();
             tooltipEl.innerHTML = `
               <div style="position: relative; background: white; border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); padding: 10px; font-size: 12px; z-index: 999;">
@@ -1662,7 +1671,7 @@ var MultiBarGraph = ({
                 <div style="display: flex; align-items: center; gap: 8px;">
                   ${iconHtml}
                   <span style="font-weight: bold; color: #757575;">
-                    ${segmentLabel}: <span style="color:#131414;">${segmentValue} (${percentage}%)</span>
+                    ${segmentLabel}: <span style="color:#131414;">${segmentValue} (${percentage2}%)</span>
                   </span>
                 </div>
               </div>`;