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

package/dist/index.css

@@ -350,6 +350,9 @@ video {
 .table {
   display: table;
 }
+.grid {
+  display: grid;
+}
 .hidden {
   display: none;
 }

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: (props: ElementType) => React$1.JSX.Element;
+
+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: (props: ElementType) => React$1.JSX.Element;
+
+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,7 +1119,7 @@ var CircleDonut = (props) => {
   };
   const options = {
     responsive: true,
-    rotation: -180,
+    rotation: -360,
     plugins: {
       legend: {
         position: "left",
@@ -1156,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",
@@ -1180,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) => {
@@ -1213,7 +1217,7 @@ 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: ["18-24", "25-34", "35-44", "45-54", "55-64", "65+"],
@@ -1227,6 +1231,7 @@ var HorizontalBarChart = (props) => {
   const options = {
     responsive: true,
     indexAxis: "y",
+    // This specifies that the bar chart is horizontal
     scales: {
       x: {
         beginAtZero: true,
@@ -1235,6 +1240,12 @@ var HorizontalBarChart = (props) => {
             return `${value}%`;
           }
         }
+      },
+      y: {
+        grid: {
+          display: false
+          // Hide y-axis grid lines
+        }
       }
     },
     plugins: {
@@ -1247,24 +1258,212 @@ var HorizontalBarChart = (props) => {
             return `${label}: ${value}`;
           }
         }
+      },
+      legend: {
+        display: false
+        // Hide the legend
       }
     }
   };
   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 = (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 = ["Insta", "Whatsapp", "Messages", "Another", "Example"];
+  (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,
+            backgroundColor: index === 0 ? "blue" : index === 1 ? "green" : "yellow",
+            // Circle color in legend
+            pointBackgroundColor: "white",
+            // Circle background color in legend
+            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("div", { className: props.className }, /* @__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,7 +1059,7 @@ var CircleDonut = (props) => {
   };
   const options = {
     responsive: true,
-    rotation: -180,
+    rotation: -360,
     plugins: {
       legend: {
         position: "left",
@@ -1105,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",
@@ -1129,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) => {
@@ -1166,10 +1167,9 @@ 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: ["18-24", "25-34", "35-44", "45-54", "55-64", "65+"],
@@ -1183,6 +1183,7 @@ var HorizontalBarChart = (props) => {
   const options = {
     responsive: true,
     indexAxis: "y",
+    // This specifies that the bar chart is horizontal
     scales: {
       x: {
         beginAtZero: true,
@@ -1191,6 +1192,12 @@ var HorizontalBarChart = (props) => {
             return `${value}%`;
           }
         }
+      },
+      y: {
+        grid: {
+          display: false
+          // Hide y-axis grid lines
+        }
       }
     },
     plugins: {
@@ -1203,23 +1210,211 @@ var HorizontalBarChart = (props) => {
             return `${label}: ${value}`;
           }
         }
+      },
+      legend: {
+        display: false
+        // Hide the legend
       }
     }
   };
   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 = (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 = ["Insta", "Whatsapp", "Messages", "Another", "Example"];
+  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,
+            backgroundColor: index === 0 ? "blue" : index === 1 ? "green" : "yellow",
+            // Circle color in legend
+            pointBackgroundColor: "white",
+            // Circle background color in legend
+            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("div", { className: props.className }, /* @__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-Beta124",
+  "version": "0.0.14-Beta126",
   "description": "Apex cura React components library",
   "keywords": [
     "apex cura",