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

package/dist/index.d.mts

@@ -126,4 +126,10 @@ declare const SemiCircleDonut: (props: ElementType) => React$1.JSX.Element;
 
 declare const HorizontalBarChart: (props: ElementType) => React$1.JSX.Element;
 
-export { AddMoreTable, ButtonElement, CheckboxElement, CircleDonut, CkEditor, DatePickerElement, DateRangePickerElement, DropDownGroup, FileUpload, HorizontalBarChart, Image, MultipleSelectElement, Navbar, NumberElement, OtpElement, PasswordElement, RadioElement, SelectElement, SemiCircleDonut, Sidebar, SingleCheckbox, SingleSelectElement, SwitchElement, TableElement, TabsElement, TextElement, TextareaElement, Upload };
+declare const LineChart: React$1.FC;
+
+declare const DoubleBarChart: React$1.FC;
+
+declare const BarChart: React$1.FC;
+
+export { AddMoreTable, BarChart, ButtonElement, CheckboxElement, CircleDonut, CkEditor, DatePickerElement, DateRangePickerElement, DoubleBarChart, DropDownGroup, FileUpload, HorizontalBarChart, Image, LineChart, MultipleSelectElement, Navbar, NumberElement, OtpElement, PasswordElement, RadioElement, SelectElement, SemiCircleDonut, Sidebar, SingleCheckbox, SingleSelectElement, SwitchElement, TableElement, TabsElement, TextElement, TextareaElement, Upload };

package/dist/index.d.ts

@@ -126,4 +126,10 @@ declare const SemiCircleDonut: (props: ElementType) => React$1.JSX.Element;
 
 declare const HorizontalBarChart: (props: ElementType) => React$1.JSX.Element;
 
-export { AddMoreTable, ButtonElement, CheckboxElement, CircleDonut, CkEditor, DatePickerElement, DateRangePickerElement, DropDownGroup, FileUpload, HorizontalBarChart, Image, MultipleSelectElement, Navbar, NumberElement, OtpElement, PasswordElement, RadioElement, SelectElement, SemiCircleDonut, Sidebar, SingleCheckbox, SingleSelectElement, SwitchElement, TableElement, TabsElement, TextElement, TextareaElement, Upload };
+declare const LineChart: React$1.FC;
+
+declare const DoubleBarChart: React$1.FC;
+
+declare const BarChart: React$1.FC;
+
+export { AddMoreTable, BarChart, ButtonElement, CheckboxElement, CircleDonut, CkEditor, DatePickerElement, DateRangePickerElement, DoubleBarChart, DropDownGroup, FileUpload, HorizontalBarChart, Image, LineChart, MultipleSelectElement, Navbar, NumberElement, OtpElement, PasswordElement, RadioElement, SelectElement, SemiCircleDonut, Sidebar, SingleCheckbox, SingleSelectElement, SwitchElement, TableElement, TabsElement, TextElement, TextareaElement, Upload };

package/dist/index.js

@@ -31,16 +31,19 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 __export(src_exports, {
   AddMoreTable: () => AddMoreTable,
+  BarChart: () => BarChart,
   ButtonElement: () => ButtonElement,
   CheckboxElement: () => CheckboxElement,
   CircleDonut: () => CircleDonut,
   CkEditor: () => CkEditor,
   DatePickerElement: () => DatePickerElement,
   DateRangePickerElement: () => DateRangePickerElement,
+  DoubleBarChart: () => DoubleBarChart,
   DropDownGroup: () => DropDownGroup,
   FileUpload: () => FileUpload,
   HorizontalBarChart: () => HorizontalBarChart,
   Image: () => Image,
+  LineChart: () => LineChart,
   MultipleSelectElement: () => MultipleSelectElement,
   Navbar: () => Navbar,
   NumberElement: () => NumberElement,
@@ -1098,7 +1101,7 @@ 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",
@@ -1116,24 +1119,19 @@ var CircleDonut = (props) => {
   };
   const options = {
     responsive: true,
-    rotation: -180,
+    rotation: -360,
     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,
-                boxWidth: 20,
-                // Set the width of the legend box
-                borderColor: "transparent"
-                // Eliminate the border color
+                fillStyle: dataset.backgroundColor[index]
               };
             });
           }
@@ -1161,7 +1159,7 @@ 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) => {
   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",
@@ -1185,6 +1183,7 @@ var SemiCircleDonut = (props) => {
       legend: {
         position: "left",
         labels: {
+          boxWidth: 15,
           generateLabels: (chart) => {
             const dataset = chart.data.datasets[0];
             return chart.data.labels.map((label, index) => {
@@ -1218,13 +1217,12 @@ var SemiCircleDonut = (props) => {
 var import_react33 = __toESM(require("react"));
 var import_react_chartjs_23 = require("react-chartjs-2");
 var import_chart3 = require("chart.js");
-import_chart3.Chart.register(import_chart3.BarElement, import_chart3.CategoryScale, import_chart3.LinearScale, import_chart3.Tooltip, import_chart3.Legend);
+import_chart3.Chart.register(import_chart3.BarElement, import_chart3.CategoryScale, import_chart3.LinearScale, import_chart3.Tooltip);
 var HorizontalBarChart = (props) => {
   const data = {
-    labels: ["65+", "55-64", "45-54", "35-44", "25-34", "18-24"],
+    labels: ["18-24", "25-34", "35-44", "45-54", "55-64", "65+"],
     datasets: [
       {
-        label: "Bot Conversation",
         data: [30, 10, 27, 40, 12, 24],
         backgroundColor: "#6298D5"
       }
@@ -1232,10 +1230,14 @@ var HorizontalBarChart = (props) => {
   };
   const options = {
     responsive: true,
-    indexAxis: "y",
     scales: {
       x: {
-        beginAtZero: true
+        beginAtZero: true,
+        ticks: {
+          callback: function(value) {
+            return `${value}%`;
+          }
+        }
       }
     },
     plugins: {
@@ -1253,19 +1255,198 @@ var HorizontalBarChart = (props) => {
   };
   return /* @__PURE__ */ import_react33.default.createElement("div", { className: props.className }, /* @__PURE__ */ import_react33.default.createElement(import_react_chartjs_23.Bar, { data, options }));
 };
+
+// src/Components/LineChart.tsx
+var import_react34 = __toESM(require("react"));
+var import_auto = __toESM(require("chart.js/auto"));
+var LineChart = () => {
+  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] }
+  ];
+  const labels = ["Instagram", "Whatsapp", "Messages", "Facebook", "Linkedin"];
+  (0, import_react34.useEffect)(() => {
+    if (chartRef.current) {
+      if (chartInstance.current) {
+        chartInstance.current.destroy();
+      }
+      chartInstance.current = new import_auto.default(chartRef.current, {
+        type: "line",
+        data: {
+          labels,
+          datasets: data.map((dataset, index) => ({
+            label: dataset.label,
+            data: dataset.data,
+            borderColor: `rgb(${index * 100}, ${255 - index * 50}, ${index * 50})`,
+            // Example dynamic color generation
+            tension: 0.1,
+            fill: false
+          }))
+        },
+        options: {
+          scales: {
+            y: {
+              beginAtZero: true,
+              suggestedMax: 200,
+              // Adjust based on your data range
+              ticks: {
+                callback: function(value) {
+                  return value + "%";
+                }
+              }
+            }
+          }
+        }
+      });
+    }
+    return () => {
+      if (chartInstance.current) {
+        chartInstance.current.destroy();
+      }
+    };
+  }, []);
+  return /* @__PURE__ */ import_react34.default.createElement("canvas", { ref: chartRef });
+};
+
+// src/Components/DoubleBarChart.tsx
+var import_react35 = __toESM(require("react"));
+var import_auto2 = __toESM(require("chart.js/auto"));
+var DoubleBarChart = () => {
+  const chartRef = (0, import_react35.useRef)(null);
+  const chartInstance = (0, import_react35.useRef)(null);
+  (0, import_react35.useEffect)(() => {
+    if (chartRef.current) {
+      if (chartInstance.current) {
+        chartInstance.current.destroy();
+      }
+      chartInstance.current = new import_auto2.default(chartRef.current, {
+        type: "bar",
+        data: {
+          labels: [
+            "Summer Health Tips",
+            "New Services Launch",
+            "Discounts on Checkups",
+            "Wellness Webinar",
+            "LinkedIn Insights"
+          ],
+          datasets: [
+            {
+              label: "Male",
+              data: [60, 70, 50, 80, 65],
+              // Example data for male
+              backgroundColor: "rgba(54, 162, 235, 0.5)",
+              borderColor: "rgba(54, 162, 235, 1)",
+              borderWidth: 1
+            },
+            {
+              label: "Female",
+              data: [70, 65, 75, 55, 85],
+              // Example data for female
+              backgroundColor: "rgba(255, 99, 132, 0.5)",
+              borderColor: "rgba(255, 99, 132, 1)",
+              borderWidth: 1
+            }
+          ]
+        },
+        options: {
+          scales: {
+            y: {
+              beginAtZero: true,
+              suggestedMax: 100,
+              ticks: {
+                callback: function(value) {
+                  return value + "%";
+                }
+              }
+            }
+          }
+        }
+      });
+    }
+    return () => {
+      if (chartInstance.current) {
+        chartInstance.current.destroy();
+      }
+    };
+  }, []);
+  return /* @__PURE__ */ import_react35.default.createElement("canvas", { ref: chartRef });
+};
+
+// src/Components/BarChart.tsx
+var import_react36 = __toESM(require("react"));
+var import_auto3 = __toESM(require("chart.js/auto"));
+var BarChart = () => {
+  const chartRef = (0, import_react36.useRef)(null);
+  const chartInstance = (0, import_react36.useRef)(null);
+  (0, import_react36.useEffect)(() => {
+    if (chartRef.current) {
+      if (chartInstance.current) {
+        chartInstance.current.destroy();
+      }
+      chartInstance.current = new import_auto3.default(chartRef.current, {
+        type: "bar",
+        data: {
+          labels: [
+            "17 June",
+            "18 June",
+            "19 June",
+            "20 June",
+            "21 June",
+            "22 June",
+            "23 June"
+          ],
+          datasets: [
+            {
+              data: [70, 65, 75, 55, 85],
+              // Example data for female
+              backgroundColor: "rgba(255, 99, 132, 0.5)",
+              borderColor: "rgba(255, 99, 132, 1)",
+              borderWidth: 1
+            }
+          ]
+        },
+        options: {
+          scales: {
+            y: {
+              beginAtZero: true,
+              suggestedMax: 100,
+              ticks: {
+                callback: function(value) {
+                  return value + "%";
+                }
+              }
+            }
+          }
+        }
+      });
+    }
+    return () => {
+      if (chartInstance.current) {
+        chartInstance.current.destroy();
+      }
+    };
+  }, []);
+  return /* @__PURE__ */ import_react36.default.createElement("canvas", { ref: chartRef });
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AddMoreTable,
+  BarChart,
   ButtonElement,
   CheckboxElement,
   CircleDonut,
   CkEditor,
   DatePickerElement,
   DateRangePickerElement,
+  DoubleBarChart,
   DropDownGroup,
   FileUpload,
   HorizontalBarChart,
   Image,
+  LineChart,
   MultipleSelectElement,
   Navbar,
   NumberElement,

package/dist/index.mjs

@@ -1041,7 +1041,7 @@ 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",
@@ -1059,24 +1059,19 @@ var CircleDonut = (props) => {
   };
   const options = {
     responsive: true,
-    rotation: -180,
+    rotation: -360,
     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,
-                boxWidth: 20,
-                // Set the width of the legend box
-                borderColor: "transparent"
-                // Eliminate the border color
+                fillStyle: dataset.backgroundColor[index]
               };
             });
           }
@@ -1110,7 +1105,7 @@ import {
 ChartJS2.register(DoughnutController2, ArcElement2, Tooltip2, Legend2);
 var SemiCircleDonut = (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",
@@ -1134,6 +1129,7 @@ var SemiCircleDonut = (props) => {
       legend: {
         position: "left",
         labels: {
+          boxWidth: 15,
           generateLabels: (chart) => {
             const dataset = chart.data.datasets[0];
             return chart.data.labels.map((label, index) => {
@@ -1171,16 +1167,14 @@ import {
   BarElement,
   CategoryScale,
   LinearScale,
-  Tooltip as Tooltip3,
-  Legend as Legend3
+  Tooltip as Tooltip3
 } from "chart.js";
-ChartJS3.register(BarElement, CategoryScale, LinearScale, Tooltip3, Legend3);
+ChartJS3.register(BarElement, CategoryScale, LinearScale, Tooltip3);
 var HorizontalBarChart = (props) => {
   const data = {
-    labels: ["65+", "55-64", "45-54", "35-44", "25-34", "18-24"],
+    labels: ["18-24", "25-34", "35-44", "45-54", "55-64", "65+"],
     datasets: [
       {
-        label: "Bot Conversation",
         data: [30, 10, 27, 40, 12, 24],
         backgroundColor: "#6298D5"
       }
@@ -1188,10 +1182,14 @@ var HorizontalBarChart = (props) => {
   };
   const options = {
     responsive: true,
-    indexAxis: "y",
     scales: {
       x: {
-        beginAtZero: true
+        beginAtZero: true,
+        ticks: {
+          callback: function(value) {
+            return `${value}%`;
+          }
+        }
       }
     },
     plugins: {
@@ -1209,18 +1207,197 @@ var HorizontalBarChart = (props) => {
   };
   return /* @__PURE__ */ React33.createElement("div", { className: props.className }, /* @__PURE__ */ React33.createElement(Bar, { data, options }));
 };
+
+// src/Components/LineChart.tsx
+import React34, { useEffect as useEffect4, useRef as useRef2 } from "react";
+import Chart from "chart.js/auto";
+var LineChart = () => {
+  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] }
+  ];
+  const labels = ["Instagram", "Whatsapp", "Messages", "Facebook", "Linkedin"];
+  useEffect4(() => {
+    if (chartRef.current) {
+      if (chartInstance.current) {
+        chartInstance.current.destroy();
+      }
+      chartInstance.current = new Chart(chartRef.current, {
+        type: "line",
+        data: {
+          labels,
+          datasets: data.map((dataset, index) => ({
+            label: dataset.label,
+            data: dataset.data,
+            borderColor: `rgb(${index * 100}, ${255 - index * 50}, ${index * 50})`,
+            // Example dynamic color generation
+            tension: 0.1,
+            fill: false
+          }))
+        },
+        options: {
+          scales: {
+            y: {
+              beginAtZero: true,
+              suggestedMax: 200,
+              // Adjust based on your data range
+              ticks: {
+                callback: function(value) {
+                  return value + "%";
+                }
+              }
+            }
+          }
+        }
+      });
+    }
+    return () => {
+      if (chartInstance.current) {
+        chartInstance.current.destroy();
+      }
+    };
+  }, []);
+  return /* @__PURE__ */ React34.createElement("canvas", { ref: chartRef });
+};
+
+// src/Components/DoubleBarChart.tsx
+import React35, { useEffect as useEffect5, useRef as useRef3 } from "react";
+import Chart2 from "chart.js/auto";
+var DoubleBarChart = () => {
+  const chartRef = useRef3(null);
+  const chartInstance = useRef3(null);
+  useEffect5(() => {
+    if (chartRef.current) {
+      if (chartInstance.current) {
+        chartInstance.current.destroy();
+      }
+      chartInstance.current = new Chart2(chartRef.current, {
+        type: "bar",
+        data: {
+          labels: [
+            "Summer Health Tips",
+            "New Services Launch",
+            "Discounts on Checkups",
+            "Wellness Webinar",
+            "LinkedIn Insights"
+          ],
+          datasets: [
+            {
+              label: "Male",
+              data: [60, 70, 50, 80, 65],
+              // Example data for male
+              backgroundColor: "rgba(54, 162, 235, 0.5)",
+              borderColor: "rgba(54, 162, 235, 1)",
+              borderWidth: 1
+            },
+            {
+              label: "Female",
+              data: [70, 65, 75, 55, 85],
+              // Example data for female
+              backgroundColor: "rgba(255, 99, 132, 0.5)",
+              borderColor: "rgba(255, 99, 132, 1)",
+              borderWidth: 1
+            }
+          ]
+        },
+        options: {
+          scales: {
+            y: {
+              beginAtZero: true,
+              suggestedMax: 100,
+              ticks: {
+                callback: function(value) {
+                  return value + "%";
+                }
+              }
+            }
+          }
+        }
+      });
+    }
+    return () => {
+      if (chartInstance.current) {
+        chartInstance.current.destroy();
+      }
+    };
+  }, []);
+  return /* @__PURE__ */ React35.createElement("canvas", { ref: chartRef });
+};
+
+// src/Components/BarChart.tsx
+import React36, { useEffect as useEffect6, useRef as useRef4 } from "react";
+import Chart3 from "chart.js/auto";
+var BarChart = () => {
+  const chartRef = useRef4(null);
+  const chartInstance = useRef4(null);
+  useEffect6(() => {
+    if (chartRef.current) {
+      if (chartInstance.current) {
+        chartInstance.current.destroy();
+      }
+      chartInstance.current = new Chart3(chartRef.current, {
+        type: "bar",
+        data: {
+          labels: [
+            "17 June",
+            "18 June",
+            "19 June",
+            "20 June",
+            "21 June",
+            "22 June",
+            "23 June"
+          ],
+          datasets: [
+            {
+              data: [70, 65, 75, 55, 85],
+              // Example data for female
+              backgroundColor: "rgba(255, 99, 132, 0.5)",
+              borderColor: "rgba(255, 99, 132, 1)",
+              borderWidth: 1
+            }
+          ]
+        },
+        options: {
+          scales: {
+            y: {
+              beginAtZero: true,
+              suggestedMax: 100,
+              ticks: {
+                callback: function(value) {
+                  return value + "%";
+                }
+              }
+            }
+          }
+        }
+      });
+    }
+    return () => {
+      if (chartInstance.current) {
+        chartInstance.current.destroy();
+      }
+    };
+  }, []);
+  return /* @__PURE__ */ React36.createElement("canvas", { ref: chartRef });
+};
 export {
   AddMoreTable,
+  BarChart,
   ButtonElement,
   CheckboxElement,
   CircleDonut,
   CkEditor,
   DatePickerElement,
   DateRangePickerElement,
+  DoubleBarChart,
   DropDownGroup,
   FileUpload,
   HorizontalBarChart,
   Image,
+  LineChart,
   MultipleSelectElement,
   Navbar,
   NumberElement,

package/package.json

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