@apexcura/ui-components 0.0.14-Beta120 → 0.0.14-Beta122

package/dist/index.d.mts

@@ -122,4 +122,8 @@ declare const OtpElement: (props: ElementType) => React$1.JSX.Element;
 
 declare const CircleDonut: (props: ElementType) => React$1.JSX.Element;
 
-export { AddMoreTable, ButtonElement, CheckboxElement, CircleDonut, CkEditor, DatePickerElement, DateRangePickerElement, DropDownGroup, FileUpload, Image, MultipleSelectElement, Navbar, NumberElement, OtpElement, PasswordElement, RadioElement, SelectElement, Sidebar, SingleCheckbox, SingleSelectElement, SwitchElement, TableElement, TabsElement, TextElement, TextareaElement, Upload };
+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 };

package/dist/index.d.ts

@@ -122,4 +122,8 @@ declare const OtpElement: (props: ElementType) => React$1.JSX.Element;
 
 declare const CircleDonut: (props: ElementType) => React$1.JSX.Element;
 
-export { AddMoreTable, ButtonElement, CheckboxElement, CircleDonut, CkEditor, DatePickerElement, DateRangePickerElement, DropDownGroup, FileUpload, Image, MultipleSelectElement, Navbar, NumberElement, OtpElement, PasswordElement, RadioElement, SelectElement, Sidebar, SingleCheckbox, SingleSelectElement, SwitchElement, TableElement, TabsElement, TextElement, TextareaElement, Upload };
+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 };

package/dist/index.js

@@ -39,6 +39,7 @@ __export(src_exports, {
   DateRangePickerElement: () => DateRangePickerElement,
   DropDownGroup: () => DropDownGroup,
   FileUpload: () => FileUpload,
+  HorizontalBarChart: () => HorizontalBarChart,
   Image: () => Image,
   MultipleSelectElement: () => MultipleSelectElement,
   Navbar: () => Navbar,
@@ -47,6 +48,7 @@ __export(src_exports, {
   PasswordElement: () => PasswordElement,
   RadioElement: () => RadioElement,
   SelectElement: () => SelectElement,
+  SemiCircleDonut: () => SemiCircleDonut,
   Sidebar: () => Sidebar,
   SingleCheckbox: () => SingleCheckbox,
   SingleSelectElement: () => SingleSelectElement,
@@ -1147,6 +1149,128 @@ 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 }));
 };
+
+// src/Components/SemiCircleDonut.tsx
+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) => {
+  const data = {
+    labels: ["Registration", "Book Appointment", "Diagnostic Tests", "Hospital Facility", "Others Prescriptions"],
+    datasets: [
+      {
+        label: "Bot Conversation",
+        data: [30, 10, 27, 40, 12, 37],
+        backgroundColor: [
+          "#FFCB8A",
+          "#CADBBF",
+          "#8AC1BB",
+          "#FCB0CB",
+          "#CEB0FA",
+          "#AEA29F"
+        ]
+      }
+    ]
+  };
+  const options = {
+    responsive: true,
+    circumference: 180,
+    rotation: -90,
+    plugins: {
+      legend: {
+        position: "left",
+        labels: {
+          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
+              };
+            });
+          }
+        }
+      },
+      tooltip: {
+        enabled: true,
+        callbacks: {
+          label: function(context) {
+            const label = context.label || "";
+            const value = context.raw || 0;
+            return `${label}: ${value}`;
+          }
+        }
+      }
+    }
+  };
+  return /* @__PURE__ */ import_react32.default.createElement("div", { className: props.className }, /* @__PURE__ */ import_react32.default.createElement(import_react_chartjs_22.Doughnut, { data, options }));
+};
+
+// src/Components/HorizontalBarChart.tsx
+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);
+var HorizontalBarChart = (props) => {
+  const data = {
+    labels: ["65+", "55-64", "45-54", "35-44", "25-34", "18-24"],
+    datasets: [
+      {
+        label: "Bot Conversation",
+        data: [30, 10, 27, 40, 12, 24],
+        backgroundColor: "#6298D5"
+      }
+    ]
+  };
+  const options = {
+    responsive: true,
+    indexAxis: "y",
+    scales: {
+      x: {
+        beginAtZero: true
+      },
+      y: {
+        ticks: {
+          callback: (value) => `${value}%`
+        }
+      }
+    },
+    plugins: {
+      legend: {
+        position: "top",
+        labels: {
+          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
+              };
+            });
+          }
+        }
+      },
+      tooltip: {
+        enabled: true,
+        callbacks: {
+          label: function(context) {
+            const label = context.label || "";
+            const value = context.raw || 0;
+            return `${label}: ${value}`;
+          }
+        }
+      }
+    }
+  };
+  return /* @__PURE__ */ import_react33.default.createElement("div", { className: props.className }, /* @__PURE__ */ import_react33.default.createElement(import_react_chartjs_23.Bar, { data, options }));
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AddMoreTable,
@@ -1158,6 +1282,7 @@ var CircleDonut = (props) => {
   DateRangePickerElement,
   DropDownGroup,
   FileUpload,
+  HorizontalBarChart,
   Image,
   MultipleSelectElement,
   Navbar,
@@ -1166,6 +1291,7 @@ var CircleDonut = (props) => {
   PasswordElement,
   RadioElement,
   SelectElement,
+  SemiCircleDonut,
   Sidebar,
   SingleCheckbox,
   SingleSelectElement,

package/dist/index.mjs

@@ -1092,6 +1092,141 @@ var CircleDonut = (props) => {
   };
   return /* @__PURE__ */ React31.createElement("div", { className: props.className }, /* @__PURE__ */ React31.createElement(Doughnut, { data, options }));
 };
+
+// src/Components/SemiCircleDonut.tsx
+import React32 from "react";
+import { Doughnut as Doughnut2 } from "react-chartjs-2";
+import {
+  Chart as ChartJS2,
+  DoughnutController as DoughnutController2,
+  ArcElement as ArcElement2,
+  Tooltip as Tooltip2,
+  Legend as Legend2
+} from "chart.js";
+ChartJS2.register(DoughnutController2, ArcElement2, Tooltip2, Legend2);
+var SemiCircleDonut = (props) => {
+  const data = {
+    labels: ["Registration", "Book Appointment", "Diagnostic Tests", "Hospital Facility", "Others Prescriptions"],
+    datasets: [
+      {
+        label: "Bot Conversation",
+        data: [30, 10, 27, 40, 12, 37],
+        backgroundColor: [
+          "#FFCB8A",
+          "#CADBBF",
+          "#8AC1BB",
+          "#FCB0CB",
+          "#CEB0FA",
+          "#AEA29F"
+        ]
+      }
+    ]
+  };
+  const options = {
+    responsive: true,
+    circumference: 180,
+    rotation: -90,
+    plugins: {
+      legend: {
+        position: "left",
+        labels: {
+          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
+              };
+            });
+          }
+        }
+      },
+      tooltip: {
+        enabled: true,
+        callbacks: {
+          label: function(context) {
+            const label = context.label || "";
+            const value = context.raw || 0;
+            return `${label}: ${value}`;
+          }
+        }
+      }
+    }
+  };
+  return /* @__PURE__ */ React32.createElement("div", { className: props.className }, /* @__PURE__ */ React32.createElement(Doughnut2, { data, options }));
+};
+
+// src/Components/HorizontalBarChart.tsx
+import React33 from "react";
+import { Bar } from "react-chartjs-2";
+import {
+  Chart as ChartJS3,
+  BarElement,
+  CategoryScale,
+  LinearScale,
+  Tooltip as Tooltip3,
+  Legend as Legend3
+} from "chart.js";
+ChartJS3.register(BarElement, CategoryScale, LinearScale, Tooltip3, Legend3);
+var HorizontalBarChart = (props) => {
+  const data = {
+    labels: ["65+", "55-64", "45-54", "35-44", "25-34", "18-24"],
+    datasets: [
+      {
+        label: "Bot Conversation",
+        data: [30, 10, 27, 40, 12, 24],
+        backgroundColor: "#6298D5"
+      }
+    ]
+  };
+  const options = {
+    responsive: true,
+    indexAxis: "y",
+    scales: {
+      x: {
+        beginAtZero: true
+      },
+      y: {
+        ticks: {
+          callback: (value) => `${value}%`
+        }
+      }
+    },
+    plugins: {
+      legend: {
+        position: "top",
+        labels: {
+          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
+              };
+            });
+          }
+        }
+      },
+      tooltip: {
+        enabled: true,
+        callbacks: {
+          label: function(context) {
+            const label = context.label || "";
+            const value = context.raw || 0;
+            return `${label}: ${value}`;
+          }
+        }
+      }
+    }
+  };
+  return /* @__PURE__ */ React33.createElement("div", { className: props.className }, /* @__PURE__ */ React33.createElement(Bar, { data, options }));
+};
 export {
   AddMoreTable,
   ButtonElement,
@@ -1102,6 +1237,7 @@ export {
   DateRangePickerElement,
   DropDownGroup,
   FileUpload,
+  HorizontalBarChart,
   Image,
   MultipleSelectElement,
   Navbar,
@@ -1110,6 +1246,7 @@ export {
   PasswordElement,
   RadioElement,
   SelectElement,
+  SemiCircleDonut,
   Sidebar,
   SingleCheckbox,
   SingleSelectElement,

package/package.json

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