@apexcura/ui-components 0.0.14-Beta133 → 0.0.14-Beta135

package/dist/index.js

@@ -1240,14 +1240,22 @@ var SemiCircleDonut = (props) => {
       const height = bottom - top;
       const centerX = left + width / 2;
       const centerY = top + height / 1.5;
+      const maxWidth = width * 0.8;
       ctx.save();
-      ctx.font = "16px Arial";
       ctx.fillStyle = "black";
       ctx.textAlign = "center";
       ctx.textBaseline = "middle";
-      ctx.fillText(props.fillText1, centerX, centerY - 10);
-      ctx.font = "12px Arial";
-      ctx.fillText(props.fillText2, centerX, centerY + 20);
+      const drawText = (text, y, fontSize) => {
+        ctx.font = `${fontSize}px Arial`;
+        const textWidth = ctx.measureText(text).width;
+        if (textWidth > maxWidth) {
+          const newFontSize = fontSize * maxWidth / textWidth;
+          ctx.font = `${newFontSize}px Arial`;
+        }
+        ctx.fillText(text, centerX, y);
+      };
+      drawText(props.fillText1, centerY - 10, 16);
+      drawText(props.fillText2, centerY + 20, 8);
       ctx.restore();
     }
   };
@@ -1266,7 +1274,7 @@ var HorizontalBarChart = (props) => {
       {
         data: [30, 10, 27, 40, 12, 24],
         backgroundColor: "#6298D5",
-        barThickness: 20
+        barThickness: 15
       }
     ]
   };
@@ -1314,9 +1322,9 @@ var LineChart = (props) => {
   const chartRef = (0, import_react34.useRef)(null);
   const chartInstance = (0, import_react34.useRef)(null);
   const data = [
-    { label: "ROI", data: [10, 30, 50, 70, 90] },
-    { label: "Engagement Rate", data: [20, 40, 60, 80, 100] },
-    { label: "Conversion Rate", data: [30, 50, 70, 90, 110] }
+    { label: "ROI", data: [10, 13, 20, 15, 10] },
+    { label: "Engagement Rate", data: [12, 15, 26, 28, 12] },
+    { label: "Conversion Rate", data: [30, 50, 70, 90, 30] }
   ];
   const labels = ["Instagram", "Whatsapp", "Messages", "Telegram", "Linkedin"];
   (0, import_react34.useEffect)(() => {
@@ -1407,14 +1415,14 @@ var DoubleBarChart = (props) => {
               data: [60, 70, 50, 80, 65],
               // Example data for male
               backgroundColor: "#93B8E2",
-              barThickness: 20
+              barThickness: 10
             },
             {
               label: "Conversion Rate",
               data: [70, 65, 75, 55, 85],
               // Example data for female
               backgroundColor: "#4484CD",
-              barThickness: 20
+              barThickness: 10
             }
           ]
         },
@@ -1483,7 +1491,7 @@ var BarChart = () => {
           ],
           datasets: [
             {
-              data: [70, 65, 75, 55, 85],
+              data: [70, 65, 75, 55, 85, 20, 55],
               // Example data for female
               backgroundColor: "rgba(255, 99, 132, 0.5)",
               borderColor: "rgba(255, 99, 132, 1)",

package/dist/index.mjs

@@ -1186,14 +1186,22 @@ var SemiCircleDonut = (props) => {
       const height = bottom - top;
       const centerX = left + width / 2;
       const centerY = top + height / 1.5;
+      const maxWidth = width * 0.8;
       ctx.save();
-      ctx.font = "16px Arial";
       ctx.fillStyle = "black";
       ctx.textAlign = "center";
       ctx.textBaseline = "middle";
-      ctx.fillText(props.fillText1, centerX, centerY - 10);
-      ctx.font = "12px Arial";
-      ctx.fillText(props.fillText2, centerX, centerY + 20);
+      const drawText = (text, y, fontSize) => {
+        ctx.font = `${fontSize}px Arial`;
+        const textWidth = ctx.measureText(text).width;
+        if (textWidth > maxWidth) {
+          const newFontSize = fontSize * maxWidth / textWidth;
+          ctx.font = `${newFontSize}px Arial`;
+        }
+        ctx.fillText(text, centerX, y);
+      };
+      drawText(props.fillText1, centerY - 10, 16);
+      drawText(props.fillText2, centerY + 20, 8);
       ctx.restore();
     }
   };
@@ -1218,7 +1226,7 @@ var HorizontalBarChart = (props) => {
       {
         data: [30, 10, 27, 40, 12, 24],
         backgroundColor: "#6298D5",
-        barThickness: 20
+        barThickness: 15
       }
     ]
   };
@@ -1266,9 +1274,9 @@ var LineChart = (props) => {
   const chartRef = useRef2(null);
   const chartInstance = useRef2(null);
   const data = [
-    { label: "ROI", data: [10, 30, 50, 70, 90] },
-    { label: "Engagement Rate", data: [20, 40, 60, 80, 100] },
-    { label: "Conversion Rate", data: [30, 50, 70, 90, 110] }
+    { label: "ROI", data: [10, 13, 20, 15, 10] },
+    { label: "Engagement Rate", data: [12, 15, 26, 28, 12] },
+    { label: "Conversion Rate", data: [30, 50, 70, 90, 30] }
   ];
   const labels = ["Instagram", "Whatsapp", "Messages", "Telegram", "Linkedin"];
   useEffect4(() => {
@@ -1359,14 +1367,14 @@ var DoubleBarChart = (props) => {
               data: [60, 70, 50, 80, 65],
               // Example data for male
               backgroundColor: "#93B8E2",
-              barThickness: 20
+              barThickness: 10
             },
             {
               label: "Conversion Rate",
               data: [70, 65, 75, 55, 85],
               // Example data for female
               backgroundColor: "#4484CD",
-              barThickness: 20
+              barThickness: 10
             }
           ]
         },
@@ -1435,7 +1443,7 @@ var BarChart = () => {
           ],
           datasets: [
             {
-              data: [70, 65, 75, 55, 85],
+              data: [70, 65, 75, 55, 85, 20, 55],
               // Example data for female
               backgroundColor: "rgba(255, 99, 132, 0.5)",
               borderColor: "rgba(255, 99, 132, 1)",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apexcura/ui-components",
-  "version": "0.0.14-Beta133",
+  "version": "0.0.14-Beta135",
   "description": "Apex cura React components library",
   "keywords": [
     "apex cura",