@apexcura/ui-components 0.0.14-Beta110 → 0.0.14-Beta112

package/dist/index.d.mts

@@ -120,6 +120,6 @@ declare const Upload: (props: ElementType) => React$1.JSX.Element;
 
 declare const OtpElement: (props: ElementType) => React$1.JSX.Element;
 
-declare const Donut: React$1.FC<any>;
+declare const DonutGraph: React$1.FC;
 
-export { AddMoreTable, ButtonElement, CheckboxElement, CkEditor, DatePickerElement, DateRangePickerElement, Donut, DropDownGroup, FileUpload, Image, MultipleSelectElement, Navbar, NumberElement, OtpElement, PasswordElement, RadioElement, SelectElement, Sidebar, SingleCheckbox, SingleSelectElement, SwitchElement, TableElement, TabsElement, TextElement, TextareaElement, Upload };
+export { AddMoreTable, ButtonElement, CheckboxElement, CkEditor, DatePickerElement, DateRangePickerElement, DonutGraph, DropDownGroup, FileUpload, Image, MultipleSelectElement, Navbar, NumberElement, OtpElement, PasswordElement, RadioElement, SelectElement, Sidebar, SingleCheckbox, SingleSelectElement, SwitchElement, TableElement, TabsElement, TextElement, TextareaElement, Upload };

package/dist/index.d.ts

@@ -120,6 +120,6 @@ declare const Upload: (props: ElementType) => React$1.JSX.Element;
 
 declare const OtpElement: (props: ElementType) => React$1.JSX.Element;
 
-declare const Donut: React$1.FC<any>;
+declare const DonutGraph: React$1.FC;
 
-export { AddMoreTable, ButtonElement, CheckboxElement, CkEditor, DatePickerElement, DateRangePickerElement, Donut, DropDownGroup, FileUpload, Image, MultipleSelectElement, Navbar, NumberElement, OtpElement, PasswordElement, RadioElement, SelectElement, Sidebar, SingleCheckbox, SingleSelectElement, SwitchElement, TableElement, TabsElement, TextElement, TextareaElement, Upload };
+export { AddMoreTable, ButtonElement, CheckboxElement, CkEditor, DatePickerElement, DateRangePickerElement, DonutGraph, DropDownGroup, FileUpload, Image, MultipleSelectElement, Navbar, NumberElement, OtpElement, PasswordElement, RadioElement, SelectElement, Sidebar, SingleCheckbox, SingleSelectElement, SwitchElement, TableElement, TabsElement, TextElement, TextareaElement, Upload };

package/dist/index.js

@@ -36,7 +36,7 @@ __export(src_exports, {
   CkEditor: () => CkEditor,
   DatePickerElement: () => DatePickerElement,
   DateRangePickerElement: () => DateRangePickerElement,
-  Donut: () => Donut_default,
+  DonutGraph: () => DonutGraph_default,
   DropDownGroup: () => DropDownGroup,
   FileUpload: () => FileUpload,
   Image: () => Image,
@@ -1089,60 +1089,60 @@ var OtpElement = (props) => {
   )));
 };
 
-// src/Components/Donut.tsx
+// src/Components/DonutGraph.tsx
 var import_react31 = __toESM(require("react"));
 var import_highcharts = __toESM(require("highcharts"));
 var import_highcharts_react_official = __toESM(require("highcharts-react-official"));
-var HighchartsChart = ({ options }) => {
-  return /* @__PURE__ */ import_react31.default.createElement(import_highcharts_react_official.default, { highcharts: import_highcharts.default, options });
-};
-console.log(HighchartsChart);
-console.log(typeof HighchartsChart);
-var Donut = (props) => {
-  const chartOptions = {
+var DonutGraph = () => {
+  const data = [
+    { platform: "Facebook", engagementRate: 15, conversionRate: 5 },
+    { platform: "WhatsApp", engagementRate: 20, conversionRate: 4 },
+    { platform: "Instagram", engagementRate: 18, conversionRate: 6 },
+    { platform: "LinkedIn", engagementRate: 12, conversionRate: 3 }
+  ];
+  const seriesData = [
+    {
+      name: "Engagement Rate (%)",
+      data: data.map((item) => [item.platform, item.engagementRate]),
+      color: "#7cb5ec",
+      type: "column"
+    },
+    {
+      name: "Conversion Rate (%)",
+      data: data.map((item) => [item.platform, item.conversionRate]),
+      color: "#434348",
+      type: "column"
+    }
+  ];
+  const options = {
+    chart: {
+      type: "column"
+    },
     title: {
-      text: "Distribution of Students"
+      text: "Engagement Rate and Conversion Rate Across Platforms"
     },
-    plotOptions: {
-      pie: {
-        innerSize: "70%",
-        dataLabels: {
-          enabled: false,
-          format: "<b>{point.name}</b>: {point.percentage:.1f} %"
-        },
-        showInLegend: true
+    xAxis: {
+      type: "category",
+      title: {
+        text: "Platform"
       }
     },
-    series: [
-      {
-        type: "pie",
-        name: "Percentage",
-        data: [
-          {
-            name: "Girls",
-            y: 20,
-            color: "#FF6384"
-            // Custom color for Girls
-          },
-          {
-            name: "Boys",
-            y: 40,
-            color: "#36A2EB"
-            // Custom color for Boys
-          },
-          {
-            name: "Students",
-            y: 40,
-            color: "#FFCE56"
-            // Custom color for Students
-          }
-        ]
+    yAxis: {
+      title: {
+        text: "Rate (%)"
       }
-    ]
+    },
+    series: seriesData
   };
-  return /* @__PURE__ */ import_react31.default.createElement(import_react31.default.Fragment, null, /* @__PURE__ */ import_react31.default.createElement(HighchartsChart, { options: chartOptions }));
+  return /* @__PURE__ */ import_react31.default.createElement("div", null, /* @__PURE__ */ import_react31.default.createElement("p", null, "frijwenjds"), /* @__PURE__ */ import_react31.default.createElement(
+    import_highcharts_react_official.default,
+    {
+      highcharts: import_highcharts.default,
+      options
+    }
+  ));
 };
-var Donut_default = Donut;
+var DonutGraph_default = DonutGraph;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AddMoreTable,
@@ -1151,7 +1151,7 @@ var Donut_default = Donut;
   CkEditor,
   DatePickerElement,
   DateRangePickerElement,
-  Donut,
+  DonutGraph,
   DropDownGroup,
   FileUpload,
   Image,

package/dist/index.mjs

@@ -1028,60 +1028,60 @@ var OtpElement = (props) => {
   )));
 };
 
-// src/Components/Donut.tsx
+// src/Components/DonutGraph.tsx
 import React31 from "react";
 import Highcharts from "highcharts";
 import HighchartsReact from "highcharts-react-official";
-var HighchartsChart = ({ options }) => {
-  return /* @__PURE__ */ React31.createElement(HighchartsReact, { highcharts: Highcharts, options });
-};
-console.log(HighchartsChart);
-console.log(typeof HighchartsChart);
-var Donut = (props) => {
-  const chartOptions = {
+var DonutGraph = () => {
+  const data = [
+    { platform: "Facebook", engagementRate: 15, conversionRate: 5 },
+    { platform: "WhatsApp", engagementRate: 20, conversionRate: 4 },
+    { platform: "Instagram", engagementRate: 18, conversionRate: 6 },
+    { platform: "LinkedIn", engagementRate: 12, conversionRate: 3 }
+  ];
+  const seriesData = [
+    {
+      name: "Engagement Rate (%)",
+      data: data.map((item) => [item.platform, item.engagementRate]),
+      color: "#7cb5ec",
+      type: "column"
+    },
+    {
+      name: "Conversion Rate (%)",
+      data: data.map((item) => [item.platform, item.conversionRate]),
+      color: "#434348",
+      type: "column"
+    }
+  ];
+  const options = {
+    chart: {
+      type: "column"
+    },
     title: {
-      text: "Distribution of Students"
+      text: "Engagement Rate and Conversion Rate Across Platforms"
     },
-    plotOptions: {
-      pie: {
-        innerSize: "70%",
-        dataLabels: {
-          enabled: false,
-          format: "<b>{point.name}</b>: {point.percentage:.1f} %"
-        },
-        showInLegend: true
+    xAxis: {
+      type: "category",
+      title: {
+        text: "Platform"
       }
     },
-    series: [
-      {
-        type: "pie",
-        name: "Percentage",
-        data: [
-          {
-            name: "Girls",
-            y: 20,
-            color: "#FF6384"
-            // Custom color for Girls
-          },
-          {
-            name: "Boys",
-            y: 40,
-            color: "#36A2EB"
-            // Custom color for Boys
-          },
-          {
-            name: "Students",
-            y: 40,
-            color: "#FFCE56"
-            // Custom color for Students
-          }
-        ]
+    yAxis: {
+      title: {
+        text: "Rate (%)"
       }
-    ]
+    },
+    series: seriesData
   };
-  return /* @__PURE__ */ React31.createElement(React31.Fragment, null, /* @__PURE__ */ React31.createElement(HighchartsChart, { options: chartOptions }));
+  return /* @__PURE__ */ React31.createElement("div", null, /* @__PURE__ */ React31.createElement("p", null, "frijwenjds"), /* @__PURE__ */ React31.createElement(
+    HighchartsReact,
+    {
+      highcharts: Highcharts,
+      options
+    }
+  ));
 };
-var Donut_default = Donut;
+var DonutGraph_default = DonutGraph;
 export {
   AddMoreTable,
   ButtonElement,
@@ -1089,7 +1089,7 @@ export {
   CkEditor,
   DatePickerElement,
   DateRangePickerElement,
-  Donut_default as Donut,
+  DonutGraph_default as DonutGraph,
   DropDownGroup,
   FileUpload,
   Image,

package/package.json

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