@apexcura/ui-components 0.0.14-Beta95 → 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.
package/dist/index.js CHANGED
@@ -744,6 +744,7 @@ var TableElement = (props) => {
744
744
  title: col.label,
745
745
  dataIndex: col.name,
746
746
  key: col.key,
747
+ ellipsis: col.ellipsis,
747
748
  render: col.render,
748
749
  sorter: {
749
750
  compare: (a, b) => {
@@ -1088,51 +1089,117 @@ var OtpElement = (props) => {
1088
1089
  var import_react31 = __toESM(require("react"));
1089
1090
  var import_highcharts = __toESM(require("highcharts"));
1090
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
+ };
1091
1095
  var Donut = (props) => {
1092
1096
  console.log(props);
1093
1097
  const chartOptions = {
1098
+ chart: {
1099
+ type: "pie"
1100
+ },
1094
1101
  title: {
1095
- 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>'
1096
1109
  },
1097
1110
  plotOptions: {
1098
- pie: {
1099
- innerSize: "70%",
1100
- dataLabels: {
1101
- enabled: false,
1102
- format: "<b>{point.name}</b>: {point.percentage:.1f} %"
1103
- },
1104
- 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
+ }]
1105
1132
  }
1106
1133
  },
1107
1134
  series: [
1108
1135
  {
1109
- type: "pie",
1110
1136
  name: "Percentage",
1137
+ colorByPoint: true,
1111
1138
  data: [
1112
1139
  {
1113
- name: "Girls",
1114
- y: 20,
1115
- color: "#FF6384"
1116
- // 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
1117
1152
  },
1118
1153
  {
1119
- name: "Boys",
1120
- y: 40,
1121
- color: "#36A2EB"
1122
- // Custom color for Boys
1154
+ name: "Protein",
1155
+ y: 15.5
1123
1156
  },
1124
1157
  {
1125
- name: "Students",
1126
- y: 40,
1127
- color: "#FFCE56"
1128
- // Custom color for Students
1158
+ name: "Ash",
1159
+ y: 1.68
1129
1160
  }
1130
1161
  ]
1131
1162
  }
1132
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
+ // ],
1133
1200
  };
1134
1201
  console.log(chartOptions);
1135
- 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 }));
1136
1203
  };
1137
1204
  // Annotate the CommonJS export names for ESM import in node:
1138
1205
  0 && (module.exports = {
package/dist/index.mjs CHANGED
@@ -683,6 +683,7 @@ var TableElement = (props) => {
683
683
  title: col.label,
684
684
  dataIndex: col.name,
685
685
  key: col.key,
686
+ ellipsis: col.ellipsis,
686
687
  render: col.render,
687
688
  sorter: {
688
689
  compare: (a, b) => {
@@ -1027,51 +1028,117 @@ var OtpElement = (props) => {
1027
1028
  import React31 from "react";
1028
1029
  import Highcharts from "highcharts";
1029
1030
  import HighchartsReact from "highcharts-react-official";
1031
+ var HighchartsChart = ({ options }) => {
1032
+ return /* @__PURE__ */ React31.createElement(HighchartsReact, { highcharts: Highcharts, options });
1033
+ };
1030
1034
  var Donut = (props) => {
1031
1035
  console.log(props);
1032
1036
  const chartOptions = {
1037
+ chart: {
1038
+ type: "pie"
1039
+ },
1033
1040
  title: {
1034
- 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>'
1035
1048
  },
1036
1049
  plotOptions: {
1037
- pie: {
1038
- innerSize: "70%",
1039
- dataLabels: {
1040
- enabled: false,
1041
- format: "<b>{point.name}</b>: {point.percentage:.1f} %"
1042
- },
1043
- 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
+ }]
1044
1071
  }
1045
1072
  },
1046
1073
  series: [
1047
1074
  {
1048
- type: "pie",
1049
1075
  name: "Percentage",
1076
+ colorByPoint: true,
1050
1077
  data: [
1051
1078
  {
1052
- name: "Girls",
1053
- y: 20,
1054
- color: "#FF6384"
1055
- // 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
1056
1091
  },
1057
1092
  {
1058
- name: "Boys",
1059
- y: 40,
1060
- color: "#36A2EB"
1061
- // Custom color for Boys
1093
+ name: "Protein",
1094
+ y: 15.5
1062
1095
  },
1063
1096
  {
1064
- name: "Students",
1065
- y: 40,
1066
- color: "#FFCE56"
1067
- // Custom color for Students
1097
+ name: "Ash",
1098
+ y: 1.68
1068
1099
  }
1069
1100
  ]
1070
1101
  }
1071
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
+ // ],
1072
1139
  };
1073
1140
  console.log(chartOptions);
1074
- 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 }));
1075
1142
  };
1076
1143
  export {
1077
1144
  AddMoreTable,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@apexcura/ui-components",
3
- "version": "0.0.14-Beta95",
3
+ "version": "0.0.14-Beta97",
4
4
  "description": "Apex cura React components library",
5
5
  "keywords": [
6
6
  "apex cura",