@apexcura/ui-components 0.0.14-Beta71 → 0.0.14-Beta72

package/dist/index.d.mts

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

package/dist/index.d.ts

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

package/dist/index.js

@@ -36,6 +36,7 @@ __export(src_exports, {
   CkEditor: () => CkEditor,
   DatePickerElement: () => DatePickerElement,
   DateRangePickerElement: () => DateRangePickerElement,
+  Donut: () => Donut,
   DropDownGroup: () => DropDownGroup,
   FileUpload: () => FileUpload,
   Image: () => Image,
@@ -1081,6 +1082,79 @@ 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) => {
+  const total = 100;
+  const girls = 20;
+  const girlsPercentage = girls / total * 100;
+  const chartOptions = {
+    chart: {
+      type: "pie",
+      events: {
+        render: function() {
+          const chart = this;
+          const width = chart.plotWidth;
+          const height = chart.plotHeight;
+          const centerX = chart.plotLeft + width / 2;
+          const centerY = chart.plotTop + height / 2;
+          if (!chart.customText) {
+            chart.customText = chart.renderer.text(
+              `${girlsPercentage.toFixed(1)}%`,
+              centerX,
+              centerY
+            ).attr({
+              align: "center",
+              zIndex: 5
+            }).add();
+          } else {
+            chart.customText.attr({
+              text: `${girlsPercentage.toFixed(1)}%`
+            });
+          }
+        }
+      }
+    },
+    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: props.items
+    }],
+    legend: {
+      enabled: true,
+      align: "left",
+      verticalAlign: "middle",
+      layout: "proximate",
+      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 = {
   AddMoreTable,
@@ -1089,6 +1163,7 @@ var OtpElement = (props) => {
   CkEditor,
   DatePickerElement,
   DateRangePickerElement,
+  Donut,
   DropDownGroup,
   FileUpload,
   Image,

package/dist/index.mjs

@@ -1021,6 +1021,79 @@ var OtpElement = (props) => {
     }
   )));
 };
+
+// src/Components/Donut.tsx
+import React31 from "react";
+import Highcharts from "highcharts";
+import HighchartsReact from "highcharts-react-official";
+var Donut = (props) => {
+  const total = 100;
+  const girls = 20;
+  const girlsPercentage = girls / total * 100;
+  const chartOptions = {
+    chart: {
+      type: "pie",
+      events: {
+        render: function() {
+          const chart = this;
+          const width = chart.plotWidth;
+          const height = chart.plotHeight;
+          const centerX = chart.plotLeft + width / 2;
+          const centerY = chart.plotTop + height / 2;
+          if (!chart.customText) {
+            chart.customText = chart.renderer.text(
+              `${girlsPercentage.toFixed(1)}%`,
+              centerX,
+              centerY
+            ).attr({
+              align: "center",
+              zIndex: 5
+            }).add();
+          } else {
+            chart.customText.attr({
+              text: `${girlsPercentage.toFixed(1)}%`
+            });
+          }
+        }
+      }
+    },
+    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: props.items
+    }],
+    legend: {
+      enabled: true,
+      align: "left",
+      verticalAlign: "middle",
+      layout: "proximate",
+      labelFormatter: function() {
+        const point = this;
+        return `${point.name}: ${point.y?.toFixed(1)}%`;
+      }
+    }
+  };
+  return /* @__PURE__ */ React31.createElement(
+    HighchartsReact,
+    {
+      highcharts: Highcharts,
+      options: chartOptions
+    }
+  );
+};
 export {
   AddMoreTable,
   ButtonElement,
@@ -1028,6 +1101,7 @@ export {
   CkEditor,
   DatePickerElement,
   DateRangePickerElement,
+  Donut,
   DropDownGroup,
   FileUpload,
   Image,

package/package.json

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