npm - @apexcura/ui-components - Versions diffs - 0.0.14-Beta130 → 0.0.14-Beta132 - Mend

@apexcura/ui-components 0.0.14-Beta130 → 0.0.14-Beta132

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/index.d.mts CHANGED Viewed

@@ -65,6 +65,8 @@ type ElementType = {
     length?: number;
     imgClassName?: string;
     loading?: boolean;
+    fillText1?: string;
+    fillText2?: string;
 };
 declare const TextElement: (props: ElementType) => React$1.JSX.Element;
@@ -128,7 +130,7 @@ declare const HorizontalBarChart: (props: ElementType) => React$1.JSX.Element;
 declare const LineChart: (props: ElementType) => React$1.JSX.Element;
-declare const DoubleBarChart: React$1.FC;
+declare const DoubleBarChart: (props: ElementType) => React$1.JSX.Element;
 declare const BarChart: React$1.FC;

package/dist/index.d.ts CHANGED Viewed

@@ -65,6 +65,8 @@ type ElementType = {
     length?: number;
     imgClassName?: string;
     loading?: boolean;
+    fillText1?: string;
+    fillText2?: string;
 };
 declare const TextElement: (props: ElementType) => React$1.JSX.Element;
@@ -128,7 +130,7 @@ declare const HorizontalBarChart: (props: ElementType) => React$1.JSX.Element;
 declare const LineChart: (props: ElementType) => React$1.JSX.Element;
-declare const DoubleBarChart: React$1.FC;
+declare const DoubleBarChart: (props: ElementType) => React$1.JSX.Element;
 declare const BarChart: React$1.FC;

package/dist/index.js CHANGED Viewed

@@ -1241,12 +1241,12 @@ var SemiCircleDonut = (props) => {
       const centerX = left + width / 2;
       const centerY = top + height / 1.5;
       ctx.save();
-      ctx.font = "30px Arial";
+      ctx.font = "16px Arial";
       ctx.fillStyle = "black";
       ctx.textAlign = "center";
       ctx.textBaseline = "middle";
       ctx.fillText("High", centerX, centerY - 10);
-      ctx.font = "13px Arial";
+      ctx.font = "12px Arial";
       ctx.fillText("Improve Chatbot Training Data", centerX, centerY + 20);
       ctx.restore();
     }
@@ -1336,8 +1336,7 @@ var LineChart = (props) => {
             pointBackgroundColor: index === 0 ? "#FF8F00" : index === 1 ? "#F50057" : "#254AAA",
             pointBorderColor: "white",
             pointStyle: "circle",
-            pointRadius: 5,
-            // Adjust point size as needed
+            pointRadius: 3,
             tension: 0.1,
             fill: true
           }))
@@ -1354,7 +1353,6 @@ var LineChart = (props) => {
             x: {
               grid: {
                 display: true
-                // Display x-axis grid lines
               }
             },
             y: {
@@ -1366,8 +1364,7 @@ var LineChart = (props) => {
                 }
               },
               grid: {
-                display: true
-                // Display y-axis grid lines
+                display: false
               }
             }
           }
@@ -1386,7 +1383,7 @@ var LineChart = (props) => {
 // src/Components/DoubleBarChart.tsx
 var import_react35 = __toESM(require("react"));
 var import_auto2 = __toESM(require("chart.js/auto"));
-var DoubleBarChart = () => {
+var DoubleBarChart = (props) => {
   const chartRef = (0, import_react35.useRef)(null);
   const chartInstance = (0, import_react35.useRef)(null);
   (0, import_react35.useEffect)(() => {
@@ -1406,21 +1403,29 @@ var DoubleBarChart = () => {
           ],
           datasets: [
             {
-              label: "Male",
+              label: "Engagement Rate",
               data: [60, 70, 50, 80, 65],
               // Example data for male
-              backgroundColor: "#93B8E2"
+              backgroundColor: "#93B8E2",
+              barThickness: 20
             },
             {
-              label: "Female",
+              label: "Conversion Rate",
               data: [70, 65, 75, 55, 85],
               // Example data for female
-              backgroundColor: "#4484CD"
+              backgroundColor: "#4484CD",
+              barThickness: 20
             }
           ]
         },
         options: {
           scales: {
+            x: {
+              grid: {
+                display: true
+                // Display x-axis grid lines
+              }
+            },
             y: {
               beginAtZero: true,
               suggestedMax: 100,
@@ -1431,16 +1436,13 @@ var DoubleBarChart = () => {
               },
               grid: {
                 display: false
-                // Remove y-axis grid lines
               }
             }
           },
           plugins: {
             legend: {
               labels: {
-                // Configure labels to show colored circles
                 usePointStyle: true
-                // Use circles instead of squares
               }
             }
           }
@@ -1453,7 +1455,7 @@ var DoubleBarChart = () => {
       }
     };
   }, []);
-  return /* @__PURE__ */ import_react35.default.createElement("canvas", { ref: chartRef });
+  return /* @__PURE__ */ import_react35.default.createElement("div", { className: props.className }, /* @__PURE__ */ import_react35.default.createElement("h1", { className: props.labelClassName }, props.label), /* @__PURE__ */ import_react35.default.createElement("canvas", { ref: chartRef }));
 };
 // src/Components/BarChart.tsx

package/dist/index.mjs CHANGED Viewed

@@ -1187,12 +1187,12 @@ var SemiCircleDonut = (props) => {
       const centerX = left + width / 2;
       const centerY = top + height / 1.5;
       ctx.save();
-      ctx.font = "30px Arial";
+      ctx.font = "16px Arial";
       ctx.fillStyle = "black";
       ctx.textAlign = "center";
       ctx.textBaseline = "middle";
       ctx.fillText("High", centerX, centerY - 10);
-      ctx.font = "13px Arial";
+      ctx.font = "12px Arial";
       ctx.fillText("Improve Chatbot Training Data", centerX, centerY + 20);
       ctx.restore();
     }
@@ -1288,8 +1288,7 @@ var LineChart = (props) => {
             pointBackgroundColor: index === 0 ? "#FF8F00" : index === 1 ? "#F50057" : "#254AAA",
             pointBorderColor: "white",
             pointStyle: "circle",
-            pointRadius: 5,
-            // Adjust point size as needed
+            pointRadius: 3,
             tension: 0.1,
             fill: true
           }))
@@ -1306,7 +1305,6 @@ var LineChart = (props) => {
             x: {
               grid: {
                 display: true
-                // Display x-axis grid lines
               }
             },
             y: {
@@ -1318,8 +1316,7 @@ var LineChart = (props) => {
                 }
               },
               grid: {
-                display: true
-                // Display y-axis grid lines
+                display: false
               }
             }
           }
@@ -1338,7 +1335,7 @@ var LineChart = (props) => {
 // src/Components/DoubleBarChart.tsx
 import React35, { useEffect as useEffect5, useRef as useRef3 } from "react";
 import Chart2 from "chart.js/auto";
-var DoubleBarChart = () => {
+var DoubleBarChart = (props) => {
   const chartRef = useRef3(null);
   const chartInstance = useRef3(null);
   useEffect5(() => {
@@ -1358,21 +1355,29 @@ var DoubleBarChart = () => {
           ],
           datasets: [
             {
-              label: "Male",
+              label: "Engagement Rate",
               data: [60, 70, 50, 80, 65],
               // Example data for male
-              backgroundColor: "#93B8E2"
+              backgroundColor: "#93B8E2",
+              barThickness: 20
             },
             {
-              label: "Female",
+              label: "Conversion Rate",
               data: [70, 65, 75, 55, 85],
               // Example data for female
-              backgroundColor: "#4484CD"
+              backgroundColor: "#4484CD",
+              barThickness: 20
             }
           ]
         },
         options: {
           scales: {
+            x: {
+              grid: {
+                display: true
+                // Display x-axis grid lines
+              }
+            },
             y: {
               beginAtZero: true,
               suggestedMax: 100,
@@ -1383,16 +1388,13 @@ var DoubleBarChart = () => {
               },
               grid: {
                 display: false
-                // Remove y-axis grid lines
               }
             }
           },
           plugins: {
             legend: {
               labels: {
-                // Configure labels to show colored circles
                 usePointStyle: true
-                // Use circles instead of squares
               }
             }
           }
@@ -1405,7 +1407,7 @@ var DoubleBarChart = () => {
       }
     };
   }, []);
-  return /* @__PURE__ */ React35.createElement("canvas", { ref: chartRef });
+  return /* @__PURE__ */ React35.createElement("div", { className: props.className }, /* @__PURE__ */ React35.createElement("h1", { className: props.labelClassName }, props.label), /* @__PURE__ */ React35.createElement("canvas", { ref: chartRef }));
 };
 // src/Components/BarChart.tsx

package/package.json CHANGED Viewed

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