@apexcura/ui-components 0.0.14-Beta125 → 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,7 +126,7 @@ declare const SemiCircleDonut: (props: ElementType) => React$1.JSX.Element;
 
 declare const HorizontalBarChart: (props: ElementType) => React$1.JSX.Element;
 
-declare const LineChart: React$1.FC;
+declare const LineChart: (props: ElementType) => React$1.JSX.Element;
 
 declare const DoubleBarChart: React$1.FC;
 

package/dist/index.d.ts

@@ -126,7 +126,7 @@ declare const SemiCircleDonut: (props: ElementType) => React$1.JSX.Element;
 
 declare const HorizontalBarChart: (props: ElementType) => React$1.JSX.Element;
 
-declare const LineChart: React$1.FC;
+declare const LineChart: (props: ElementType) => React$1.JSX.Element;
 
 declare const DoubleBarChart: React$1.FC;
 

package/dist/index.js

@@ -1230,6 +1230,8 @@ var HorizontalBarChart = (props) => {
   };
   const options = {
     responsive: true,
+    indexAxis: "y",
+    // This specifies that the bar chart is horizontal
     scales: {
       x: {
         beginAtZero: true,
@@ -1238,6 +1240,12 @@ var HorizontalBarChart = (props) => {
             return `${value}%`;
           }
         }
+      },
+      y: {
+        grid: {
+          display: false
+          // Hide y-axis grid lines
+        }
       }
     },
     plugins: {
@@ -1250,6 +1258,10 @@ var HorizontalBarChart = (props) => {
             return `${label}: ${value}`;
           }
         }
+      },
+      legend: {
+        display: false
+        // Hide the legend
       }
     }
   };
@@ -1259,15 +1271,18 @@ var HorizontalBarChart = (props) => {
 // src/Components/LineChart.tsx
 var import_react34 = __toESM(require("react"));
 var import_auto = __toESM(require("chart.js/auto"));
-var LineChart = () => {
+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 = ["Instagram", "Whatsapp", "Messages", "Facebook", "Linkedin"];
+  const labels = ["Insta", "Whatsapp", "Messages", "Another", "Example"];
   (0, import_react34.useEffect)(() => {
     if (chartRef.current) {
       if (chartInstance.current) {
@@ -1280,8 +1295,10 @@ var LineChart = () => {
           datasets: data.map((dataset, index) => ({
             label: dataset.label,
             data: dataset.data,
-            borderColor: `rgb(${index * 100}, ${255 - index * 50}, ${index * 50})`,
-            // Example dynamic color generation
+            backgroundColor: index === 0 ? "blue" : index === 1 ? "green" : "yellow",
+            // Circle color in legend
+            pointBackgroundColor: "white",
+            // Circle background color in legend
             tension: 0.1,
             fill: false
           }))
@@ -1308,7 +1325,7 @@ var LineChart = () => {
       }
     };
   }, []);
-  return /* @__PURE__ */ import_react34.default.createElement("canvas", { ref: chartRef });
+  return /* @__PURE__ */ import_react34.default.createElement("div", { className: props.className }, /* @__PURE__ */ import_react34.default.createElement("canvas", { ref: chartRef }));
 };
 
 // src/Components/DoubleBarChart.tsx

package/dist/index.mjs

@@ -1182,6 +1182,8 @@ var HorizontalBarChart = (props) => {
   };
   const options = {
     responsive: true,
+    indexAxis: "y",
+    // This specifies that the bar chart is horizontal
     scales: {
       x: {
         beginAtZero: true,
@@ -1190,6 +1192,12 @@ var HorizontalBarChart = (props) => {
             return `${value}%`;
           }
         }
+      },
+      y: {
+        grid: {
+          display: false
+          // Hide y-axis grid lines
+        }
       }
     },
     plugins: {
@@ -1202,6 +1210,10 @@ var HorizontalBarChart = (props) => {
             return `${label}: ${value}`;
           }
         }
+      },
+      legend: {
+        display: false
+        // Hide the legend
       }
     }
   };
@@ -1211,15 +1223,18 @@ var HorizontalBarChart = (props) => {
 // src/Components/LineChart.tsx
 import React34, { useEffect as useEffect4, useRef as useRef2 } from "react";
 import Chart from "chart.js/auto";
-var LineChart = () => {
+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 = ["Instagram", "Whatsapp", "Messages", "Facebook", "Linkedin"];
+  const labels = ["Insta", "Whatsapp", "Messages", "Another", "Example"];
   useEffect4(() => {
     if (chartRef.current) {
       if (chartInstance.current) {
@@ -1232,8 +1247,10 @@ var LineChart = () => {
           datasets: data.map((dataset, index) => ({
             label: dataset.label,
             data: dataset.data,
-            borderColor: `rgb(${index * 100}, ${255 - index * 50}, ${index * 50})`,
-            // Example dynamic color generation
+            backgroundColor: index === 0 ? "blue" : index === 1 ? "green" : "yellow",
+            // Circle color in legend
+            pointBackgroundColor: "white",
+            // Circle background color in legend
             tension: 0.1,
             fill: false
           }))
@@ -1260,7 +1277,7 @@ var LineChart = () => {
       }
     };
   }, []);
-  return /* @__PURE__ */ React34.createElement("canvas", { ref: chartRef });
+  return /* @__PURE__ */ React34.createElement("div", { className: props.className }, /* @__PURE__ */ React34.createElement("canvas", { ref: chartRef }));
 };
 
 // src/Components/DoubleBarChart.tsx

package/package.json

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