@apexcura/ui-components 0.0.14-Beta74 → 0.0.14-Beta76

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",
@@ -1103,11 +1101,7 @@ var Donut = (props) => {
           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({
+            chart.customText = chart.renderer.text(`Girls ${girlsPercentage.toFixed(1)}%`, centerX, centerY).attr({
               align: "center",
               zIndex: 5
             }).add();
@@ -1132,45 +1126,47 @@ var Donut = (props) => {
         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
-      }]
-    }],
+    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
+          }
+        ]
+      }
+    ],
+    // 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,
-    {
-      highcharts: import_highcharts.default,
-      options: chartOptions
-    }
-  );
+  return /* @__PURE__ */ import_react31.default.createElement(import_react31.default.Fragment, null, /* @__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

@@ -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",
@@ -1042,11 +1040,7 @@ var Donut = (props) => {
           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({
+            chart.customText = chart.renderer.text(`Girls ${girlsPercentage.toFixed(1)}%`, centerX, centerY).attr({
               align: "center",
               zIndex: 5
             }).add();
@@ -1071,45 +1065,47 @@ var Donut = (props) => {
         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
-      }]
-    }],
+    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
+          }
+        ]
+      }
+    ],
+    // 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,
-    {
-      highcharts: Highcharts,
-      options: chartOptions
-    }
-  );
+  return /* @__PURE__ */ React31.createElement(React31.Fragment, null, /* @__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-Beta74",
+  "version": "0.0.14-Beta76",
   "description": "Apex cura React components library",
   "keywords": [
     "apex cura",