@apexcura/ui-components 0.0.14-Beta125 → 0.0.14-Beta127

package/dist/index.css

@@ -350,8 +350,8 @@ video {
 .table {
   display: table;
 }
-.hidden {
-  display: none;
+.grid {
+  display: grid;
 }
 .h-5 {
   height: 1.25rem;

package/dist/index.d.mts

@@ -122,11 +122,11 @@ declare const OtpElement: (props: ElementType) => React$1.JSX.Element;
 
 declare const CircleDonut: (props: ElementType) => React$1.JSX.Element;
 
-declare const SemiCircleDonut: (props: ElementType) => React$1.JSX.Element;
+declare const SemiCircleDonut: () => React$1.JSX.Element;
 
 declare const HorizontalBarChart: (props: ElementType) => React$1.JSX.Element;
 
-declare const LineChart: React$1.FC;
+declare const LineChart: (props: ElementType) => React$1.JSX.Element;
 
 declare const DoubleBarChart: React$1.FC;
 

package/dist/index.d.ts

@@ -122,11 +122,11 @@ declare const OtpElement: (props: ElementType) => React$1.JSX.Element;
 
 declare const CircleDonut: (props: ElementType) => React$1.JSX.Element;
 
-declare const SemiCircleDonut: (props: ElementType) => React$1.JSX.Element;
+declare const SemiCircleDonut: () => React$1.JSX.Element;
 
 declare const HorizontalBarChart: (props: ElementType) => React$1.JSX.Element;
 
-declare const LineChart: React$1.FC;
+declare const LineChart: (props: ElementType) => React$1.JSX.Element;
 
 declare const DoubleBarChart: React$1.FC;
 

package/dist/index.js

@@ -1101,29 +1101,38 @@ var import_chart = require("chart.js");
 import_chart.Chart.register(import_chart.DoughnutController, import_chart.ArcElement, import_chart.Tooltip, import_chart.Legend);
 var CircleDonut = (props) => {
   const data = {
-    labels: ["Registration", "Book Appointment", "Diagnostic Tests", "Hospital Facility", "Others, Prescriptions"],
+    labels: [
+      "Registration",
+      "Book Appointment",
+      "Diagnostic Tests",
+      "Hospital Facility",
+      "Others, Prescriptions"
+    ],
     datasets: [
       {
         label: "Bot Conversation",
-        data: [30, 10, 27, 40, 12, 37],
+        data: [30, 10, 27, 40, 12],
         backgroundColor: [
           "#FFCB8A",
           "#CADBBF",
           "#8AC1BB",
           "#FCB0CB",
-          "#CEB0FA",
-          "#AEA29F"
-        ]
+          "#CEB0FA"
+        ],
+        borderWidth: 0
       }
     ]
   };
   const options = {
     responsive: true,
-    rotation: -360,
+    cutout: "80%",
     plugins: {
       legend: {
         position: "left",
         labels: {
+          font: {
+            size: 10
+          },
           boxWidth: 15,
           generateLabels: (chart) => {
             const dataset = chart.data.datasets[0];
@@ -1149,7 +1158,27 @@ var CircleDonut = (props) => {
       }
     }
   };
-  return /* @__PURE__ */ import_react31.default.createElement("div", { className: props.className }, /* @__PURE__ */ import_react31.default.createElement(import_react_chartjs_2.Doughnut, { data, options }));
+  const centerTextPlugin = {
+    id: "centerText",
+    beforeDraw: (chart) => {
+      const { ctx, chartArea: { left, right, top, bottom } } = chart;
+      const width = right - left;
+      const height = bottom - top;
+      const centerX = left + width / 2;
+      const centerY = top + height / 2;
+      ctx.save();
+      ctx.font = "10px Arial";
+      ctx.fillStyle = "blue";
+      ctx.textAlign = "center";
+      ctx.textBaseline = "middle";
+      ctx.fillText("Total Sessions", centerX, centerY - 10);
+      ctx.font = "30px Arial";
+      ctx.fillStyle = "black";
+      ctx.fillText("85", centerX, centerY + 20);
+      ctx.restore();
+    }
+  };
+  return /* @__PURE__ */ import_react31.default.createElement("div", { className: props.className }, /* @__PURE__ */ import_react31.default.createElement(import_react_chartjs_2.Doughnut, { data, options, plugins: [centerTextPlugin] }));
 };
 
 // src/Components/SemiCircleDonut.tsx
@@ -1157,21 +1186,27 @@ var import_react32 = __toESM(require("react"));
 var import_react_chartjs_22 = require("react-chartjs-2");
 var import_chart2 = require("chart.js");
 import_chart2.Chart.register(import_chart2.DoughnutController, import_chart2.ArcElement, import_chart2.Tooltip, import_chart2.Legend);
-var SemiCircleDonut = (props) => {
+var SemiCircleDonut = () => {
   const data = {
-    labels: ["Registration", "Book Appointment", "Diagnostic Tests", "Hospital Facility", "Others, Prescriptions"],
+    labels: [
+      "Registration",
+      "Book Appointment",
+      "Diagnostic Tests",
+      "Hospital Facility",
+      "Others, Prescriptions"
+    ],
     datasets: [
       {
         label: "Bot Conversation",
-        data: [30, 10, 27, 40, 12, 37],
+        data: [30, 10, 27, 40, 12],
         backgroundColor: [
           "#FFCB8A",
           "#CADBBF",
           "#8AC1BB",
           "#FCB0CB",
-          "#CEB0FA",
-          "#AEA29F"
-        ]
+          "#CEB0FA"
+        ],
+        borderWidth: 0
       }
     ]
   };
@@ -1179,24 +1214,11 @@ var SemiCircleDonut = (props) => {
     responsive: true,
     circumference: 180,
     rotation: -90,
+    cutout: "80%",
     plugins: {
       legend: {
-        position: "left",
-        labels: {
-          boxWidth: 15,
-          generateLabels: (chart) => {
-            const dataset = chart.data.datasets[0];
-            return chart.data.labels.map((label, index) => {
-              const value = dataset.data[index];
-              return {
-                text: `${label}: ${value}`,
-                fillStyle: dataset.backgroundColor[index],
-                hidden: isNaN(dataset.data[index]) || dataset.data[index] === null,
-                index
-              };
-            });
-          }
-        }
+        display: false
+        // Disable the legend
       },
       tooltip: {
         enabled: true,
@@ -1210,7 +1232,26 @@ var SemiCircleDonut = (props) => {
       }
     }
   };
-  return /* @__PURE__ */ import_react32.default.createElement("div", { className: props.className }, /* @__PURE__ */ import_react32.default.createElement(import_react_chartjs_22.Doughnut, { data, options }));
+  const centerTextPlugin = {
+    id: "centerText",
+    beforeDraw: (chart) => {
+      const { ctx, chartArea: { left, right, top, bottom } } = chart;
+      const width = right - left;
+      const height = bottom - top;
+      const centerX = left + width / 2;
+      const centerY = top + height / 1.5;
+      ctx.save();
+      ctx.font = "30px Arial";
+      ctx.fillStyle = "black";
+      ctx.textAlign = "center";
+      ctx.textBaseline = "middle";
+      ctx.fillText("High", centerX, centerY - 10);
+      ctx.font = "13px Arial";
+      ctx.fillText("Improve Chatbot Training Data", centerX, centerY + 20);
+      ctx.restore();
+    }
+  };
+  return /* @__PURE__ */ import_react32.default.createElement("div", { style: { width: "30%" } }, /* @__PURE__ */ import_react32.default.createElement(import_react_chartjs_22.Doughnut, { data, options, plugins: [centerTextPlugin] }));
 };
 
 // src/Components/HorizontalBarChart.tsx
@@ -1224,12 +1265,14 @@ var HorizontalBarChart = (props) => {
     datasets: [
       {
         data: [30, 10, 27, 40, 12, 24],
-        backgroundColor: "#6298D5"
+        backgroundColor: "#6298D5",
+        barThickness: 40
       }
     ]
   };
   const options = {
     responsive: true,
+    indexAxis: "y",
     scales: {
       x: {
         beginAtZero: true,
@@ -1238,6 +1281,11 @@ var HorizontalBarChart = (props) => {
             return `${value}%`;
           }
         }
+      },
+      y: {
+        grid: {
+          display: false
+        }
       }
     },
     plugins: {
@@ -1250,6 +1298,9 @@ var HorizontalBarChart = (props) => {
             return `${label}: ${value}`;
           }
         }
+      },
+      legend: {
+        display: false
       }
     }
   };
@@ -1259,15 +1310,18 @@ var HorizontalBarChart = (props) => {
 // src/Components/LineChart.tsx
 var import_react34 = __toESM(require("react"));
 var import_auto = __toESM(require("chart.js/auto"));
-var LineChart = () => {
+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] },
+    // Example data for ROI
     { label: "Engagement Rate", data: [20, 40, 60, 80, 100] },
+    // Example data for Engagement Rate
     { label: "Conversion Rate", data: [30, 50, 70, 90, 110] }
+    // Example data for Conversion Rate
   ];
-  const labels = ["Instagram", "Whatsapp", "Messages", "Facebook", "Linkedin"];
+  const labels = ["Insta", "Whatsapp", "Messages", "Another", "Example"];
   (0, import_react34.useEffect)(() => {
     if (chartRef.current) {
       if (chartInstance.current) {
@@ -1280,8 +1334,12 @@ var LineChart = () => {
           datasets: data.map((dataset, index) => ({
             label: dataset.label,
             data: dataset.data,
-            borderColor: `rgb(${index * 100}, ${255 - index * 50}, ${index * 50})`,
-            // Example dynamic color generation
+            borderColor: index === 0 ? "blue" : index === 1 ? "green" : "yellow",
+            // Custom line colors
+            backgroundColor: index === 0 ? "blue" : index === 1 ? "green" : "yellow",
+            // Circle color in legend
+            pointBackgroundColor: "white",
+            // Circle background color in legend
             tension: 0.1,
             fill: false
           }))
@@ -1308,7 +1366,7 @@ var LineChart = () => {
       }
     };
   }, []);
-  return /* @__PURE__ */ import_react34.default.createElement("canvas", { ref: chartRef });
+  return /* @__PURE__ */ import_react34.default.createElement("div", { className: props.className }, /* @__PURE__ */ import_react34.default.createElement("canvas", { ref: chartRef }));
 };
 
 // src/Components/DoubleBarChart.tsx

package/dist/index.mjs

@@ -1041,29 +1041,38 @@ import {
 ChartJS.register(DoughnutController, ArcElement, Tooltip, Legend);
 var CircleDonut = (props) => {
   const data = {
-    labels: ["Registration", "Book Appointment", "Diagnostic Tests", "Hospital Facility", "Others, Prescriptions"],
+    labels: [
+      "Registration",
+      "Book Appointment",
+      "Diagnostic Tests",
+      "Hospital Facility",
+      "Others, Prescriptions"
+    ],
     datasets: [
       {
         label: "Bot Conversation",
-        data: [30, 10, 27, 40, 12, 37],
+        data: [30, 10, 27, 40, 12],
         backgroundColor: [
           "#FFCB8A",
           "#CADBBF",
           "#8AC1BB",
           "#FCB0CB",
-          "#CEB0FA",
-          "#AEA29F"
-        ]
+          "#CEB0FA"
+        ],
+        borderWidth: 0
       }
     ]
   };
   const options = {
     responsive: true,
-    rotation: -360,
+    cutout: "80%",
     plugins: {
       legend: {
         position: "left",
         labels: {
+          font: {
+            size: 10
+          },
           boxWidth: 15,
           generateLabels: (chart) => {
             const dataset = chart.data.datasets[0];
@@ -1089,7 +1098,27 @@ var CircleDonut = (props) => {
       }
     }
   };
-  return /* @__PURE__ */ React31.createElement("div", { className: props.className }, /* @__PURE__ */ React31.createElement(Doughnut, { data, options }));
+  const centerTextPlugin = {
+    id: "centerText",
+    beforeDraw: (chart) => {
+      const { ctx, chartArea: { left, right, top, bottom } } = chart;
+      const width = right - left;
+      const height = bottom - top;
+      const centerX = left + width / 2;
+      const centerY = top + height / 2;
+      ctx.save();
+      ctx.font = "10px Arial";
+      ctx.fillStyle = "blue";
+      ctx.textAlign = "center";
+      ctx.textBaseline = "middle";
+      ctx.fillText("Total Sessions", centerX, centerY - 10);
+      ctx.font = "30px Arial";
+      ctx.fillStyle = "black";
+      ctx.fillText("85", centerX, centerY + 20);
+      ctx.restore();
+    }
+  };
+  return /* @__PURE__ */ React31.createElement("div", { className: props.className }, /* @__PURE__ */ React31.createElement(Doughnut, { data, options, plugins: [centerTextPlugin] }));
 };
 
 // src/Components/SemiCircleDonut.tsx
@@ -1103,21 +1132,27 @@ import {
   Legend as Legend2
 } from "chart.js";
 ChartJS2.register(DoughnutController2, ArcElement2, Tooltip2, Legend2);
-var SemiCircleDonut = (props) => {
+var SemiCircleDonut = () => {
   const data = {
-    labels: ["Registration", "Book Appointment", "Diagnostic Tests", "Hospital Facility", "Others, Prescriptions"],
+    labels: [
+      "Registration",
+      "Book Appointment",
+      "Diagnostic Tests",
+      "Hospital Facility",
+      "Others, Prescriptions"
+    ],
     datasets: [
       {
         label: "Bot Conversation",
-        data: [30, 10, 27, 40, 12, 37],
+        data: [30, 10, 27, 40, 12],
         backgroundColor: [
           "#FFCB8A",
           "#CADBBF",
           "#8AC1BB",
           "#FCB0CB",
-          "#CEB0FA",
-          "#AEA29F"
-        ]
+          "#CEB0FA"
+        ],
+        borderWidth: 0
       }
     ]
   };
@@ -1125,24 +1160,11 @@ var SemiCircleDonut = (props) => {
     responsive: true,
     circumference: 180,
     rotation: -90,
+    cutout: "80%",
     plugins: {
       legend: {
-        position: "left",
-        labels: {
-          boxWidth: 15,
-          generateLabels: (chart) => {
-            const dataset = chart.data.datasets[0];
-            return chart.data.labels.map((label, index) => {
-              const value = dataset.data[index];
-              return {
-                text: `${label}: ${value}`,
-                fillStyle: dataset.backgroundColor[index],
-                hidden: isNaN(dataset.data[index]) || dataset.data[index] === null,
-                index
-              };
-            });
-          }
-        }
+        display: false
+        // Disable the legend
       },
       tooltip: {
         enabled: true,
@@ -1156,7 +1178,26 @@ var SemiCircleDonut = (props) => {
       }
     }
   };
-  return /* @__PURE__ */ React32.createElement("div", { className: props.className }, /* @__PURE__ */ React32.createElement(Doughnut2, { data, options }));
+  const centerTextPlugin = {
+    id: "centerText",
+    beforeDraw: (chart) => {
+      const { ctx, chartArea: { left, right, top, bottom } } = chart;
+      const width = right - left;
+      const height = bottom - top;
+      const centerX = left + width / 2;
+      const centerY = top + height / 1.5;
+      ctx.save();
+      ctx.font = "30px Arial";
+      ctx.fillStyle = "black";
+      ctx.textAlign = "center";
+      ctx.textBaseline = "middle";
+      ctx.fillText("High", centerX, centerY - 10);
+      ctx.font = "13px Arial";
+      ctx.fillText("Improve Chatbot Training Data", centerX, centerY + 20);
+      ctx.restore();
+    }
+  };
+  return /* @__PURE__ */ React32.createElement("div", { style: { width: "30%" } }, /* @__PURE__ */ React32.createElement(Doughnut2, { data, options, plugins: [centerTextPlugin] }));
 };
 
 // src/Components/HorizontalBarChart.tsx
@@ -1176,12 +1217,14 @@ var HorizontalBarChart = (props) => {
     datasets: [
       {
         data: [30, 10, 27, 40, 12, 24],
-        backgroundColor: "#6298D5"
+        backgroundColor: "#6298D5",
+        barThickness: 40
       }
     ]
   };
   const options = {
     responsive: true,
+    indexAxis: "y",
     scales: {
       x: {
         beginAtZero: true,
@@ -1190,6 +1233,11 @@ var HorizontalBarChart = (props) => {
             return `${value}%`;
           }
         }
+      },
+      y: {
+        grid: {
+          display: false
+        }
       }
     },
     plugins: {
@@ -1202,6 +1250,9 @@ var HorizontalBarChart = (props) => {
             return `${label}: ${value}`;
           }
         }
+      },
+      legend: {
+        display: false
       }
     }
   };
@@ -1211,15 +1262,18 @@ var HorizontalBarChart = (props) => {
 // src/Components/LineChart.tsx
 import React34, { useEffect as useEffect4, useRef as useRef2 } from "react";
 import Chart from "chart.js/auto";
-var LineChart = () => {
+var LineChart = (props) => {
   const chartRef = useRef2(null);
   const chartInstance = useRef2(null);
   const data = [
     { label: "ROI", data: [10, 30, 50, 70, 90] },
+    // Example data for ROI
     { label: "Engagement Rate", data: [20, 40, 60, 80, 100] },
+    // Example data for Engagement Rate
     { label: "Conversion Rate", data: [30, 50, 70, 90, 110] }
+    // Example data for Conversion Rate
   ];
-  const labels = ["Instagram", "Whatsapp", "Messages", "Facebook", "Linkedin"];
+  const labels = ["Insta", "Whatsapp", "Messages", "Another", "Example"];
   useEffect4(() => {
     if (chartRef.current) {
       if (chartInstance.current) {
@@ -1232,8 +1286,12 @@ var LineChart = () => {
           datasets: data.map((dataset, index) => ({
             label: dataset.label,
             data: dataset.data,
-            borderColor: `rgb(${index * 100}, ${255 - index * 50}, ${index * 50})`,
-            // Example dynamic color generation
+            borderColor: index === 0 ? "blue" : index === 1 ? "green" : "yellow",
+            // Custom line colors
+            backgroundColor: index === 0 ? "blue" : index === 1 ? "green" : "yellow",
+            // Circle color in legend
+            pointBackgroundColor: "white",
+            // Circle background color in legend
             tension: 0.1,
             fill: false
           }))
@@ -1260,7 +1318,7 @@ var LineChart = () => {
       }
     };
   }, []);
-  return /* @__PURE__ */ React34.createElement("canvas", { ref: chartRef });
+  return /* @__PURE__ */ React34.createElement("div", { className: props.className }, /* @__PURE__ */ React34.createElement("canvas", { ref: chartRef }));
 };
 
 // src/Components/DoubleBarChart.tsx

package/package.json

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