@apexcura/ui-components 0.0.14-Beta96 → 0.0.14-Beta97

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/index.js +88 -22
  2. package/dist/index.mjs +88 -22
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -1089,51 +1089,117 @@ var OtpElement = (props) => {
1089
1089
  var import_react31 = __toESM(require("react"));
1090
1090
  var import_highcharts = __toESM(require("highcharts"));
1091
1091
  var import_highcharts_react_official = __toESM(require("highcharts-react-official"));
1092
+ var HighchartsChart = ({ options }) => {
1093
+ return /* @__PURE__ */ import_react31.default.createElement(import_highcharts_react_official.default, { highcharts: import_highcharts.default, options });
1094
+ };
1092
1095
  var Donut = (props) => {
1093
1096
  console.log(props);
1094
1097
  const chartOptions = {
1098
+ chart: {
1099
+ type: "pie"
1100
+ },
1095
1101
  title: {
1096
- text: "Distribution of Students"
1102
+ text: "Egg Yolk Composition"
1103
+ },
1104
+ tooltip: {
1105
+ valueSuffix: "%"
1106
+ },
1107
+ subtitle: {
1108
+ text: 'Source:<a href="https://www.mdpi.com/2072-6643/11/3/684/htm" target="_default">MDPI</a>'
1097
1109
  },
1098
1110
  plotOptions: {
1099
- pie: {
1100
- innerSize: "70%",
1101
- dataLabels: {
1102
- enabled: false,
1103
- format: "<b>{point.name}</b>: {point.percentage:.1f} %"
1104
- },
1105
- showInLegend: true
1111
+ series: {
1112
+ allowPointSelect: true,
1113
+ cursor: "pointer",
1114
+ dataLabels: [{
1115
+ enabled: true,
1116
+ distance: 20
1117
+ }, {
1118
+ enabled: true,
1119
+ distance: -40,
1120
+ format: "{point.percentage:.1f}%",
1121
+ style: {
1122
+ fontSize: "1.2em",
1123
+ textOutline: "none",
1124
+ opacity: 0.7
1125
+ },
1126
+ filter: {
1127
+ operator: ">",
1128
+ property: "percentage",
1129
+ value: 10
1130
+ }
1131
+ }]
1106
1132
  }
1107
1133
  },
1108
1134
  series: [
1109
1135
  {
1110
- type: "pie",
1111
1136
  name: "Percentage",
1137
+ colorByPoint: true,
1112
1138
  data: [
1113
1139
  {
1114
- name: "Girls",
1115
- y: 20,
1116
- color: "#FF6384"
1117
- // Custom color for Girls
1140
+ name: "Water",
1141
+ y: 55.02
1142
+ },
1143
+ {
1144
+ name: "Fat",
1145
+ sliced: true,
1146
+ selected: true,
1147
+ y: 26.71
1148
+ },
1149
+ {
1150
+ name: "Carbohydrates",
1151
+ y: 1.09
1118
1152
  },
1119
1153
  {
1120
- name: "Boys",
1121
- y: 40,
1122
- color: "#36A2EB"
1123
- // Custom color for Boys
1154
+ name: "Protein",
1155
+ y: 15.5
1124
1156
  },
1125
1157
  {
1126
- name: "Students",
1127
- y: 40,
1128
- color: "#FFCE56"
1129
- // Custom color for Students
1158
+ name: "Ash",
1159
+ y: 1.68
1130
1160
  }
1131
1161
  ]
1132
1162
  }
1133
1163
  ]
1164
+ // title: {
1165
+ // text: "Distribution of Students",
1166
+ // },
1167
+ // plotOptions: {
1168
+ // pie: {
1169
+ // innerSize: "70%",
1170
+ // dataLabels: {
1171
+ // enabled: false,
1172
+ // format: "<b>{point.name}</b>: {point.percentage:.1f} %",
1173
+ // },
1174
+ // showInLegend: true,
1175
+ // },
1176
+ // },
1177
+ // series: [
1178
+ // {
1179
+ // type: "pie",
1180
+ // name: "Percentage",
1181
+ // data: [
1182
+ // {
1183
+ // name: "Girls",
1184
+ // y: 20,
1185
+ // color: "#FF6384", // Custom color for Girls
1186
+ // },
1187
+ // {
1188
+ // name: "Boys",
1189
+ // y: 40,
1190
+ // color: "#36A2EB", // Custom color for Boys
1191
+ // },
1192
+ // {
1193
+ // name: "Students",
1194
+ // y: 40,
1195
+ // color: "#FFCE56", // Custom color for Students
1196
+ // },
1197
+ // ],
1198
+ // },
1199
+ // ],
1134
1200
  };
1135
1201
  console.log(chartOptions);
1136
- 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 }));
1202
+ return /* @__PURE__ */ import_react31.default.createElement(import_react31.default.Fragment, null, /* @__PURE__ */ import_react31.default.createElement(HighchartsChart, { options: chartOptions }));
1137
1203
  };
1138
1204
  // Annotate the CommonJS export names for ESM import in node:
1139
1205
  0 && (module.exports = {
package/dist/index.mjs CHANGED
@@ -1028,51 +1028,117 @@ var OtpElement = (props) => {
1028
1028
  import React31 from "react";
1029
1029
  import Highcharts from "highcharts";
1030
1030
  import HighchartsReact from "highcharts-react-official";
1031
+ var HighchartsChart = ({ options }) => {
1032
+ return /* @__PURE__ */ React31.createElement(HighchartsReact, { highcharts: Highcharts, options });
1033
+ };
1031
1034
  var Donut = (props) => {
1032
1035
  console.log(props);
1033
1036
  const chartOptions = {
1037
+ chart: {
1038
+ type: "pie"
1039
+ },
1034
1040
  title: {
1035
- text: "Distribution of Students"
1041
+ text: "Egg Yolk Composition"
1042
+ },
1043
+ tooltip: {
1044
+ valueSuffix: "%"
1045
+ },
1046
+ subtitle: {
1047
+ text: 'Source:<a href="https://www.mdpi.com/2072-6643/11/3/684/htm" target="_default">MDPI</a>'
1036
1048
  },
1037
1049
  plotOptions: {
1038
- pie: {
1039
- innerSize: "70%",
1040
- dataLabels: {
1041
- enabled: false,
1042
- format: "<b>{point.name}</b>: {point.percentage:.1f} %"
1043
- },
1044
- showInLegend: true
1050
+ series: {
1051
+ allowPointSelect: true,
1052
+ cursor: "pointer",
1053
+ dataLabels: [{
1054
+ enabled: true,
1055
+ distance: 20
1056
+ }, {
1057
+ enabled: true,
1058
+ distance: -40,
1059
+ format: "{point.percentage:.1f}%",
1060
+ style: {
1061
+ fontSize: "1.2em",
1062
+ textOutline: "none",
1063
+ opacity: 0.7
1064
+ },
1065
+ filter: {
1066
+ operator: ">",
1067
+ property: "percentage",
1068
+ value: 10
1069
+ }
1070
+ }]
1045
1071
  }
1046
1072
  },
1047
1073
  series: [
1048
1074
  {
1049
- type: "pie",
1050
1075
  name: "Percentage",
1076
+ colorByPoint: true,
1051
1077
  data: [
1052
1078
  {
1053
- name: "Girls",
1054
- y: 20,
1055
- color: "#FF6384"
1056
- // Custom color for Girls
1079
+ name: "Water",
1080
+ y: 55.02
1081
+ },
1082
+ {
1083
+ name: "Fat",
1084
+ sliced: true,
1085
+ selected: true,
1086
+ y: 26.71
1087
+ },
1088
+ {
1089
+ name: "Carbohydrates",
1090
+ y: 1.09
1057
1091
  },
1058
1092
  {
1059
- name: "Boys",
1060
- y: 40,
1061
- color: "#36A2EB"
1062
- // Custom color for Boys
1093
+ name: "Protein",
1094
+ y: 15.5
1063
1095
  },
1064
1096
  {
1065
- name: "Students",
1066
- y: 40,
1067
- color: "#FFCE56"
1068
- // Custom color for Students
1097
+ name: "Ash",
1098
+ y: 1.68
1069
1099
  }
1070
1100
  ]
1071
1101
  }
1072
1102
  ]
1103
+ // title: {
1104
+ // text: "Distribution of Students",
1105
+ // },
1106
+ // plotOptions: {
1107
+ // pie: {
1108
+ // innerSize: "70%",
1109
+ // dataLabels: {
1110
+ // enabled: false,
1111
+ // format: "<b>{point.name}</b>: {point.percentage:.1f} %",
1112
+ // },
1113
+ // showInLegend: true,
1114
+ // },
1115
+ // },
1116
+ // series: [
1117
+ // {
1118
+ // type: "pie",
1119
+ // name: "Percentage",
1120
+ // data: [
1121
+ // {
1122
+ // name: "Girls",
1123
+ // y: 20,
1124
+ // color: "#FF6384", // Custom color for Girls
1125
+ // },
1126
+ // {
1127
+ // name: "Boys",
1128
+ // y: 40,
1129
+ // color: "#36A2EB", // Custom color for Boys
1130
+ // },
1131
+ // {
1132
+ // name: "Students",
1133
+ // y: 40,
1134
+ // color: "#FFCE56", // Custom color for Students
1135
+ // },
1136
+ // ],
1137
+ // },
1138
+ // ],
1073
1139
  };
1074
1140
  console.log(chartOptions);
1075
- return /* @__PURE__ */ React31.createElement(React31.Fragment, null, /* @__PURE__ */ React31.createElement(HighchartsReact, { highcharts: Highcharts, options: chartOptions }));
1141
+ return /* @__PURE__ */ React31.createElement(React31.Fragment, null, /* @__PURE__ */ React31.createElement(HighchartsChart, { options: chartOptions }));
1076
1142
  };
1077
1143
  export {
1078
1144
  AddMoreTable,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@apexcura/ui-components",
3
- "version": "0.0.14-Beta96",
3
+ "version": "0.0.14-Beta97",
4
4
  "description": "Apex cura React components library",
5
5
  "keywords": [
6
6
  "apex cura",