@apexcura/ui-components 0.0.14-Beta136 → 0.0.14-Beta138

package/dist/index.d.mts

@@ -132,6 +132,6 @@ declare const LineChart: (props: ElementType) => React$1.JSX.Element;
 
 declare const DoubleBarChart: (props: ElementType) => React$1.JSX.Element;
 
-declare const BarChart: React$1.FC;
+declare const BarChart: (props: ElementType) => React$1.JSX.Element;
 
 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

@@ -132,6 +132,6 @@ declare const LineChart: (props: ElementType) => React$1.JSX.Element;
 
 declare const DoubleBarChart: (props: ElementType) => React$1.JSX.Element;
 
-declare const BarChart: React$1.FC;
+declare const BarChart: (props: ElementType) => React$1.JSX.Element;
 
 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

@@ -1323,8 +1323,8 @@ var LineChart = (props) => {
   const chartInstance = (0, import_react34.useRef)(null);
   const data = [
     { label: "ROI", data: [10, 13, 20, 15, 10] },
-    { label: "Engagement Rate", data: [12, 15, 26, 28, 12] },
-    { label: "Conversion Rate", data: [30, 50, 70, 90, 30] }
+    { label: "Engagement Rate", data: [20, 23, 30, 28, 20] },
+    { label: "Conversion Rate", data: [50, 100, 150, 180, 50] }
   ];
   const labels = ["Instagram", "Whatsapp", "Messages", "Telegram", "Linkedin"];
   (0, import_react34.useEffect)(() => {
@@ -1468,59 +1468,73 @@ var DoubleBarChart = (props) => {
 
 // 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();
+var import_react_chartjs_24 = require("react-chartjs-2");
+var import_chart4 = require("chart.js");
+import_chart4.Chart.register(import_chart4.BarElement, import_chart4.CategoryScale, import_chart4.LinearScale, import_chart4.Tooltip);
+var BarChart = (props) => {
+  const data = {
+    labels: [
+      "17 June",
+      "18 June",
+      "19 June",
+      "20 June",
+      "21 June",
+      "22 June",
+      "23 June"
+    ],
+    datasets: [
+      {
+        data: [30, 10, 27, 40, 12, 24],
+        backgroundColor: "#1565C0",
+        barThickness: 15
       }
-      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, 20, 55],
-              // Example data for female
-              backgroundColor: "rgba(255, 99, 132, 0.5)",
-              borderColor: "rgba(255, 99, 132, 1)",
-              borderWidth: 1
-            }
-          ]
+    ]
+  };
+  const options = {
+    responsive: true,
+    scales: {
+      x: {
+        beginAtZero: true,
+        ticks: {
+          callback: function(value) {
+            return `${value}%`;
+          }
         },
-        options: {
-          scales: {
-            y: {
-              beginAtZero: true,
-              suggestedMax: 100,
-              ticks: {
-                callback: function(value) {
-                  return value + "%";
-                }
-              }
-            }
+        grid: {
+          display: false
+        }
+      },
+      y: {
+        grid: {
+          display: true
+        },
+        ticks: {
+          min: 0,
+          max: 400,
+          stepSize: 200,
+          callback: function(value) {
+            return `${value}`;
           }
         }
-      });
-    }
-    return () => {
-      if (chartInstance.current) {
-        chartInstance.current.destroy();
       }
-    };
-  }, []);
-  return /* @__PURE__ */ import_react36.default.createElement("canvas", { ref: chartRef });
+    },
+    plugins: {
+      tooltip: {
+        enabled: true,
+        callbacks: {
+          label: function(context) {
+            const label = context.label || "";
+            const value = context.raw || 0;
+            return `${label}: ${value}`;
+          }
+        }
+      },
+      legend: {
+        display: false
+      }
+    }
+  };
+  return /* @__PURE__ */ import_react36.default.createElement("div", { className: props.className }, /* @__PURE__ */ import_react36.default.createElement("h1", { className: props.labelClassName }, props.label), /* @__PURE__ */ import_react36.default.createElement(import_react_chartjs_24.Bar, { data, options }));
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/index.mjs

@@ -1275,8 +1275,8 @@ var LineChart = (props) => {
   const chartInstance = useRef2(null);
   const data = [
     { label: "ROI", data: [10, 13, 20, 15, 10] },
-    { label: "Engagement Rate", data: [12, 15, 26, 28, 12] },
-    { label: "Conversion Rate", data: [30, 50, 70, 90, 30] }
+    { label: "Engagement Rate", data: [20, 23, 30, 28, 20] },
+    { label: "Conversion Rate", data: [50, 100, 150, 180, 50] }
   ];
   const labels = ["Instagram", "Whatsapp", "Messages", "Telegram", "Linkedin"];
   useEffect4(() => {
@@ -1419,60 +1419,80 @@ var DoubleBarChart = (props) => {
 };
 
 // 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();
+import React36 from "react";
+import { Bar as Bar2 } from "react-chartjs-2";
+import {
+  Chart as ChartJS4,
+  BarElement as BarElement2,
+  CategoryScale as CategoryScale2,
+  LinearScale as LinearScale2,
+  Tooltip as Tooltip4
+} from "chart.js";
+ChartJS4.register(BarElement2, CategoryScale2, LinearScale2, Tooltip4);
+var BarChart = (props) => {
+  const data = {
+    labels: [
+      "17 June",
+      "18 June",
+      "19 June",
+      "20 June",
+      "21 June",
+      "22 June",
+      "23 June"
+    ],
+    datasets: [
+      {
+        data: [30, 10, 27, 40, 12, 24],
+        backgroundColor: "#1565C0",
+        barThickness: 15
       }
-      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, 20, 55],
-              // Example data for female
-              backgroundColor: "rgba(255, 99, 132, 0.5)",
-              borderColor: "rgba(255, 99, 132, 1)",
-              borderWidth: 1
-            }
-          ]
+    ]
+  };
+  const options = {
+    responsive: true,
+    scales: {
+      x: {
+        beginAtZero: true,
+        ticks: {
+          callback: function(value) {
+            return `${value}%`;
+          }
         },
-        options: {
-          scales: {
-            y: {
-              beginAtZero: true,
-              suggestedMax: 100,
-              ticks: {
-                callback: function(value) {
-                  return value + "%";
-                }
-              }
-            }
+        grid: {
+          display: false
+        }
+      },
+      y: {
+        grid: {
+          display: true
+        },
+        ticks: {
+          min: 0,
+          max: 400,
+          stepSize: 200,
+          callback: function(value) {
+            return `${value}`;
           }
         }
-      });
-    }
-    return () => {
-      if (chartInstance.current) {
-        chartInstance.current.destroy();
       }
-    };
-  }, []);
-  return /* @__PURE__ */ React36.createElement("canvas", { ref: chartRef });
+    },
+    plugins: {
+      tooltip: {
+        enabled: true,
+        callbacks: {
+          label: function(context) {
+            const label = context.label || "";
+            const value = context.raw || 0;
+            return `${label}: ${value}`;
+          }
+        }
+      },
+      legend: {
+        display: false
+      }
+    }
+  };
+  return /* @__PURE__ */ React36.createElement("div", { className: props.className }, /* @__PURE__ */ React36.createElement("h1", { className: props.labelClassName }, props.label), /* @__PURE__ */ React36.createElement(Bar2, { data, options }));
 };
 export {
   AddMoreTable,

package/package.json

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