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

package/dist/index.css

@@ -353,9 +353,6 @@ video {
 .grid {
   display: grid;
 }
-.hidden {
-  display: none;
-}
 .h-5 {
   height: 1.25rem;
 }

package/dist/index.d.mts

@@ -122,7 +122,7 @@ 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;
 

package/dist/index.d.ts

@@ -122,7 +122,7 @@ 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;
 

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,14 +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",
-    // This specifies that the bar chart is horizontal
     scales: {
       x: {
         beginAtZero: true,
@@ -1244,7 +1285,6 @@ var HorizontalBarChart = (props) => {
       y: {
         grid: {
           display: false
-          // Hide y-axis grid lines
         }
       }
     },
@@ -1261,7 +1301,6 @@ var HorizontalBarChart = (props) => {
       },
       legend: {
         display: false
-        // Hide the legend
       }
     }
   };
@@ -1295,6 +1334,8 @@ var LineChart = (props) => {
           datasets: data.map((dataset, index) => ({
             label: dataset.label,
             data: dataset.data,
+            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",

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,14 +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",
-    // This specifies that the bar chart is horizontal
     scales: {
       x: {
         beginAtZero: true,
@@ -1196,7 +1237,6 @@ var HorizontalBarChart = (props) => {
       y: {
         grid: {
           display: false
-          // Hide y-axis grid lines
         }
       }
     },
@@ -1213,7 +1253,6 @@ var HorizontalBarChart = (props) => {
       },
       legend: {
         display: false
-        // Hide the legend
       }
     }
   };
@@ -1247,6 +1286,8 @@ var LineChart = (props) => {
           datasets: data.map((dataset, index) => ({
             label: dataset.label,
             data: dataset.data,
+            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",

package/package.json

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