@apexcura/ui-components 0.0.14-Beta73 → 0.0.14-Beta75

package/dist/index.js

@@ -1089,9 +1089,7 @@ var import_highcharts = __toESM(require("highcharts"));
 var import_highcharts_react_official = __toESM(require("highcharts-react-official"));
 var Donut = (props) => {
   console.log(props);
-  const total = 100;
-  const girls = 20;
-  const girlsPercentage = girls / total * 100;
+  const girlsPercentage = 20;
   const chartOptions = {
     chart: {
       type: "pie",
@@ -1104,7 +1102,7 @@ var Donut = (props) => {
           const centerY = chart.plotTop + height / 2;
           if (!chart.customText) {
             chart.customText = chart.renderer.text(
-              `${girlsPercentage.toFixed(1)}%`,
+              `Girls ${girlsPercentage.toFixed(1)}%`,
               centerX,
               centerY
             ).attr({
@@ -1135,20 +1133,37 @@ var Donut = (props) => {
     series: [{
       type: "pie",
       name: "Percentage",
-      data: props.items
+      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
+      }]
     }],
+    // tooltip: {
+    //     // pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y:.1f}%</b><br/>'
+    // },
     legend: {
       enabled: true,
       align: "left",
       verticalAlign: "middle",
-      layout: "proximate",
+      layout: "vertical",
       labelFormatter: function() {
         const point = this;
         return `${point.name}: ${point.y?.toFixed(1)}%`;
       }
     }
   };
-  console.log(chartOptions.series);
   return /* @__PURE__ */ import_react31.default.createElement(
     import_highcharts_react_official.default,
     {

package/dist/index.mjs

@@ -1028,9 +1028,7 @@ import Highcharts from "highcharts";
 import HighchartsReact from "highcharts-react-official";
 var Donut = (props) => {
   console.log(props);
-  const total = 100;
-  const girls = 20;
-  const girlsPercentage = girls / total * 100;
+  const girlsPercentage = 20;
   const chartOptions = {
     chart: {
       type: "pie",
@@ -1043,7 +1041,7 @@ var Donut = (props) => {
           const centerY = chart.plotTop + height / 2;
           if (!chart.customText) {
             chart.customText = chart.renderer.text(
-              `${girlsPercentage.toFixed(1)}%`,
+              `Girls ${girlsPercentage.toFixed(1)}%`,
               centerX,
               centerY
             ).attr({
@@ -1074,20 +1072,37 @@ var Donut = (props) => {
     series: [{
       type: "pie",
       name: "Percentage",
-      data: props.items
+      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
+      }]
     }],
+    // tooltip: {
+    //     // pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y:.1f}%</b><br/>'
+    // },
     legend: {
       enabled: true,
       align: "left",
       verticalAlign: "middle",
-      layout: "proximate",
+      layout: "vertical",
       labelFormatter: function() {
         const point = this;
         return `${point.name}: ${point.y?.toFixed(1)}%`;
       }
     }
   };
-  console.log(chartOptions.series);
   return /* @__PURE__ */ React31.createElement(
     HighchartsReact,
     {

package/package.json

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