@apexcura/ui-components 0.0.14-Beta81 → 0.0.14-Beta82

package/dist/index.js

@@ -1086,9 +1086,61 @@ var OtpElement = (props) => {
 
 // src/Components/Donut.tsx
 var import_react31 = __toESM(require("react"));
+var import_highcharts = __toESM(require("highcharts"));
+var import_highcharts_react_official = __toESM(require("highcharts-react-official"));
 var Donut = (props) => {
-  console.log(props);
-  return /* @__PURE__ */ import_react31.default.createElement("div", null, "Donut");
+  const chartOptions = {
+    title: {
+      text: "Distribution of Students"
+    },
+    plotOptions: {
+      pie: {
+        innerSize: "70%",
+        dataLabels: {
+          enabled: false,
+          format: "<b>{point.name}</b>: {point.percentage:.1f} %"
+        },
+        showInLegend: true
+      }
+    },
+    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
+          }
+        ]
+      }
+    ],
+    legend: {
+      enabled: true,
+      align: "left",
+      verticalAlign: "middle",
+      layout: "vertical",
+      labelFormatter: function() {
+        const point = this;
+        return `${point.name}: ${point.y?.toFixed(1)}%`;
+      }
+    }
+  };
+  return /* @__PURE__ */ import_react31.default.createElement(import_highcharts_react_official.default, { highcharts: import_highcharts.default, options: chartOptions });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/index.mjs

@@ -1025,9 +1025,61 @@ var OtpElement = (props) => {
 
 // src/Components/Donut.tsx
 import React31 from "react";
+import Highcharts from "highcharts";
+import HighchartsReact from "highcharts-react-official";
 var Donut = (props) => {
-  console.log(props);
-  return /* @__PURE__ */ React31.createElement("div", null, "Donut");
+  const chartOptions = {
+    title: {
+      text: "Distribution of Students"
+    },
+    plotOptions: {
+      pie: {
+        innerSize: "70%",
+        dataLabels: {
+          enabled: false,
+          format: "<b>{point.name}</b>: {point.percentage:.1f} %"
+        },
+        showInLegend: true
+      }
+    },
+    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
+          }
+        ]
+      }
+    ],
+    legend: {
+      enabled: true,
+      align: "left",
+      verticalAlign: "middle",
+      layout: "vertical",
+      labelFormatter: function() {
+        const point = this;
+        return `${point.name}: ${point.y?.toFixed(1)}%`;
+      }
+    }
+  };
+  return /* @__PURE__ */ React31.createElement(HighchartsReact, { highcharts: Highcharts, options: chartOptions });
 };
 export {
   AddMoreTable,

package/package.json

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