@apexcura/ui-components 0.0.14-Beta114 → 0.0.14-Beta116

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 DonutGraph: React$1.FC;
+declare const CircleDonut: (props: Object) => React$1.JSX.Element;
 
-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 };
+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 };

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 DonutGraph: React$1.FC;
+declare const CircleDonut: (props: Object) => React$1.JSX.Element;
 
-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 };
+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 };

package/dist/index.js

@@ -33,10 +33,10 @@ __export(src_exports, {
   AddMoreTable: () => AddMoreTable,
   ButtonElement: () => ButtonElement,
   CheckboxElement: () => CheckboxElement,
+  CircleDonut: () => CircleDonut,
   CkEditor: () => CkEditor,
   DatePickerElement: () => DatePickerElement,
   DateRangePickerElement: () => DateRangePickerElement,
-  DonutGraph: () => DonutGraph_default,
   DropDownGroup: () => DropDownGroup,
   FileUpload: () => FileUpload,
   Image: () => Image,
@@ -1089,66 +1089,95 @@ var OtpElement = (props) => {
   )));
 };
 
-// src/Components/DonutGraph.tsx
+// src/Components/CircleDonut.tsx
 var import_react31 = __toESM(require("react"));
 var import_highcharts = __toESM(require("highcharts"));
 var import_highcharts_react_official = __toESM(require("highcharts-react-official"));
-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 = {
+var HighchartsChart = ({ options }) => {
+  return /* @__PURE__ */ import_react31.default.createElement(import_highcharts_react_official.default, { highcharts: import_highcharts.default, options });
+};
+console.log("HighchartsChart", HighchartsChart);
+var CircleDonut = (props) => {
+  const chartOptions = {
     chart: {
-      type: "column"
+      type: "pie"
     },
     title: {
-      text: "Engagement Rate and Conversion Rate Across Platforms"
+      text: "Egg Yolk Composition"
     },
-    xAxis: {
-      type: "category",
-      title: {
-        text: "Platform"
-      }
+    tooltip: {
+      valueSuffix: "%"
+    },
+    subtitle: {
+      text: 'Source:<a href="https://www.mdpi.com/2072-6643/11/3/684/htm" target="_default">MDPI</a>'
     },
-    yAxis: {
-      title: {
-        text: "Rate (%)"
+    plotOptions: {
+      series: {
+        allowPointSelect: true,
+        cursor: "pointer",
+        dataLabels: [{
+          enabled: true,
+          distance: 20
+        }, {
+          enabled: true,
+          distance: -40,
+          format: "{point.percentage:.1f}%",
+          style: {
+            fontSize: "1.2em",
+            textOutline: "none",
+            opacity: 0.7
+          },
+          filter: {
+            operator: ">",
+            property: "percentage",
+            value: 10
+          }
+        }]
       }
     },
-    series: seriesData
+    series: [
+      {
+        name: "Percentage",
+        colorByPoint: true,
+        data: [
+          {
+            name: "Water",
+            y: 55.02
+          },
+          {
+            name: "Fat",
+            sliced: true,
+            selected: true,
+            y: 26.71
+          },
+          {
+            name: "Carbohydrates",
+            y: 1.09
+          },
+          {
+            name: "Protein",
+            y: 15.5
+          },
+          {
+            name: "Ash",
+            y: 1.68
+          }
+        ]
+      }
+    ]
   };
-  if (!import_highcharts_react_official.default || Object.keys(import_highcharts_react_official.default).length === 0) {
-    return;
-  }
-  return /* @__PURE__ */ import_react31.default.createElement("div", null, !import_highcharts_react_official.default || Object.keys(import_highcharts_react_official.default).length === 0 ? /* @__PURE__ */ import_react31.default.createElement("div", null, "Error: HighchartsReact is not loaded properly.") : /* @__PURE__ */ import_react31.default.createElement(import_highcharts_react_official.default, { highcharts: import_highcharts.default, options }));
+  console.log("HighchartsChart------------------", HighchartsChart);
+  return /* @__PURE__ */ import_react31.default.createElement(import_react31.default.Fragment, null, /* @__PURE__ */ import_react31.default.createElement(HighchartsChart, { highcharts: import_highcharts.default, options: chartOptions }));
 };
-var DonutGraph_default = DonutGraph;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AddMoreTable,
   ButtonElement,
   CheckboxElement,
+  CircleDonut,
   CkEditor,
   DatePickerElement,
   DateRangePickerElement,
-  DonutGraph,
   DropDownGroup,
   FileUpload,
   Image,

package/dist/index.mjs

@@ -1028,65 +1028,94 @@ var OtpElement = (props) => {
   )));
 };
 
-// src/Components/DonutGraph.tsx
+// src/Components/CircleDonut.tsx
 import React31 from "react";
 import Highcharts from "highcharts";
 import HighchartsReact from "highcharts-react-official";
-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 = {
+var HighchartsChart = ({ options }) => {
+  return /* @__PURE__ */ React31.createElement(HighchartsReact, { highcharts: Highcharts, options });
+};
+console.log("HighchartsChart", HighchartsChart);
+var CircleDonut = (props) => {
+  const chartOptions = {
     chart: {
-      type: "column"
+      type: "pie"
     },
     title: {
-      text: "Engagement Rate and Conversion Rate Across Platforms"
+      text: "Egg Yolk Composition"
     },
-    xAxis: {
-      type: "category",
-      title: {
-        text: "Platform"
-      }
+    tooltip: {
+      valueSuffix: "%"
+    },
+    subtitle: {
+      text: 'Source:<a href="https://www.mdpi.com/2072-6643/11/3/684/htm" target="_default">MDPI</a>'
     },
-    yAxis: {
-      title: {
-        text: "Rate (%)"
+    plotOptions: {
+      series: {
+        allowPointSelect: true,
+        cursor: "pointer",
+        dataLabels: [{
+          enabled: true,
+          distance: 20
+        }, {
+          enabled: true,
+          distance: -40,
+          format: "{point.percentage:.1f}%",
+          style: {
+            fontSize: "1.2em",
+            textOutline: "none",
+            opacity: 0.7
+          },
+          filter: {
+            operator: ">",
+            property: "percentage",
+            value: 10
+          }
+        }]
       }
     },
-    series: seriesData
+    series: [
+      {
+        name: "Percentage",
+        colorByPoint: true,
+        data: [
+          {
+            name: "Water",
+            y: 55.02
+          },
+          {
+            name: "Fat",
+            sliced: true,
+            selected: true,
+            y: 26.71
+          },
+          {
+            name: "Carbohydrates",
+            y: 1.09
+          },
+          {
+            name: "Protein",
+            y: 15.5
+          },
+          {
+            name: "Ash",
+            y: 1.68
+          }
+        ]
+      }
+    ]
   };
-  if (!HighchartsReact || Object.keys(HighchartsReact).length === 0) {
-    return;
-  }
-  return /* @__PURE__ */ React31.createElement("div", null, !HighchartsReact || Object.keys(HighchartsReact).length === 0 ? /* @__PURE__ */ React31.createElement("div", null, "Error: HighchartsReact is not loaded properly.") : /* @__PURE__ */ React31.createElement(HighchartsReact, { highcharts: Highcharts, options }));
+  console.log("HighchartsChart------------------", HighchartsChart);
+  return /* @__PURE__ */ React31.createElement(React31.Fragment, null, /* @__PURE__ */ React31.createElement(HighchartsChart, { highcharts: Highcharts, options: chartOptions }));
 };
-var DonutGraph_default = DonutGraph;
 export {
   AddMoreTable,
   ButtonElement,
   CheckboxElement,
+  CircleDonut,
   CkEditor,
   DatePickerElement,
   DateRangePickerElement,
-  DonutGraph_default as DonutGraph,
   DropDownGroup,
   FileUpload,
   Image,

package/package.json

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