@apexcura/ui-components 0.0.14-Beta116 → 0.0.14-Beta118

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 (5) hide show
  1. package/dist/index.d.mts +1 -1
  2. package/dist/index.d.ts +1 -1
  3. package/dist/index.js +36 -73
  4. package/dist/index.mjs +42 -73
  5. package/package.json +3 -1
package/dist/index.d.mts CHANGED
@@ -120,6 +120,6 @@ declare const Upload: (props: ElementType) => React$1.JSX.Element;
120
120
 
121
121
  declare const OtpElement: (props: ElementType) => React$1.JSX.Element;
122
122
 
123
- declare const CircleDonut: (props: Object) => React$1.JSX.Element;
123
+ declare const CircleDonut: React$1.FC;
124
124
 
125
125
  export { AddMoreTable, ButtonElement, CheckboxElement, CircleDonut, CkEditor, DatePickerElement, DateRangePickerElement, DropDownGroup, FileUpload, Image, MultipleSelectElement, Navbar, NumberElement, OtpElement, PasswordElement, RadioElement, SelectElement, Sidebar, SingleCheckbox, SingleSelectElement, SwitchElement, TableElement, TabsElement, TextElement, TextareaElement, Upload };
package/dist/index.d.ts CHANGED
@@ -120,6 +120,6 @@ declare const Upload: (props: ElementType) => React$1.JSX.Element;
120
120
 
121
121
  declare const OtpElement: (props: ElementType) => React$1.JSX.Element;
122
122
 
123
- declare const CircleDonut: (props: Object) => React$1.JSX.Element;
123
+ declare const CircleDonut: React$1.FC;
124
124
 
125
125
  export { AddMoreTable, ButtonElement, CheckboxElement, CircleDonut, CkEditor, DatePickerElement, DateRangePickerElement, DropDownGroup, FileUpload, Image, MultipleSelectElement, Navbar, NumberElement, OtpElement, PasswordElement, RadioElement, SelectElement, Sidebar, SingleCheckbox, SingleSelectElement, SwitchElement, TableElement, TabsElement, TextElement, TextareaElement, Upload };
package/dist/index.js CHANGED
@@ -1091,83 +1091,46 @@ var OtpElement = (props) => {
1091
1091
 
1092
1092
  // src/Components/CircleDonut.tsx
1093
1093
  var import_react31 = __toESM(require("react"));
1094
- var import_highcharts = __toESM(require("highcharts"));
1095
- var import_highcharts_react_official = __toESM(require("highcharts-react-official"));
1096
- var HighchartsChart = ({ options }) => {
1097
- return /* @__PURE__ */ import_react31.default.createElement(import_highcharts_react_official.default, { highcharts: import_highcharts.default, options });
1098
- };
1099
- console.log("HighchartsChart", HighchartsChart);
1100
- var CircleDonut = (props) => {
1101
- const chartOptions = {
1102
- chart: {
1103
- type: "pie"
1104
- },
1105
- title: {
1106
- text: "Egg Yolk Composition"
1107
- },
1108
- tooltip: {
1109
- valueSuffix: "%"
1110
- },
1111
- subtitle: {
1112
- text: 'Source:<a href="https://www.mdpi.com/2072-6643/11/3/684/htm" target="_default">MDPI</a>'
1113
- },
1114
- plotOptions: {
1115
- series: {
1116
- allowPointSelect: true,
1117
- cursor: "pointer",
1118
- dataLabels: [{
1119
- enabled: true,
1120
- distance: 20
1121
- }, {
1122
- enabled: true,
1123
- distance: -40,
1124
- format: "{point.percentage:.1f}%",
1125
- style: {
1126
- fontSize: "1.2em",
1127
- textOutline: "none",
1128
- opacity: 0.7
1129
- },
1130
- filter: {
1131
- operator: ">",
1132
- property: "percentage",
1133
- value: 10
1134
- }
1135
- }]
1136
- }
1137
- },
1138
- series: [
1094
+ var import_react_chartjs_2 = require("react-chartjs-2");
1095
+ var import_chart = require("chart.js");
1096
+ import_chart.Chart.register(import_chart.DoughnutController, import_chart.ArcElement, import_chart.Tooltip, import_chart.Legend);
1097
+ var CircleDonut = () => {
1098
+ const data = {
1099
+ labels: ["Red", "Blue", "Yellow", "Green", "Purple"],
1100
+ datasets: [
1139
1101
  {
1140
- name: "Percentage",
1141
- colorByPoint: true,
1142
- data: [
1143
- {
1144
- name: "Water",
1145
- y: 55.02
1146
- },
1147
- {
1148
- name: "Fat",
1149
- sliced: true,
1150
- selected: true,
1151
- y: 26.71
1152
- },
1153
- {
1154
- name: "Carbohydrates",
1155
- y: 1.09
1156
- },
1157
- {
1158
- name: "Protein",
1159
- y: 15.5
1160
- },
1161
- {
1162
- name: "Ash",
1163
- y: 1.68
1164
- }
1165
- ]
1102
+ label: "My Dataset",
1103
+ data: [300, 50, 100, 40, 120],
1104
+ backgroundColor: [
1105
+ "rgba(255, 99, 132, 0.2)",
1106
+ "rgba(54, 162, 235, 0.2)",
1107
+ "rgba(255, 206, 86, 0.2)",
1108
+ "rgba(75, 192, 192, 0.2)",
1109
+ "rgba(153, 102, 255, 0.2)"
1110
+ ],
1111
+ borderColor: [
1112
+ "rgba(255, 99, 132, 1)",
1113
+ "rgba(54, 162, 235, 1)",
1114
+ "rgba(255, 206, 86, 1)",
1115
+ "rgba(75, 192, 192, 1)",
1116
+ "rgba(153, 102, 255, 1)"
1117
+ ],
1118
+ borderWidth: 1
1166
1119
  }
1167
1120
  ]
1168
1121
  };
1169
- console.log("HighchartsChart------------------", HighchartsChart);
1170
- return /* @__PURE__ */ import_react31.default.createElement(import_react31.default.Fragment, null, /* @__PURE__ */ import_react31.default.createElement(HighchartsChart, { highcharts: import_highcharts.default, options: chartOptions }));
1122
+ const options = {
1123
+ responsive: true,
1124
+ plugins: {
1125
+ legend: {
1126
+ position: "top"
1127
+ },
1128
+ tooltip: {
1129
+ enabled: true
1130
+ }
1131
+ }
1132
+ };
1133
+ return /* @__PURE__ */ import_react31.default.createElement(import_react_chartjs_2.Doughnut, { data, options });
1171
1134
  };
1172
1135
  // Annotate the CommonJS export names for ESM import in node:
1173
1136
  0 && (module.exports = {
package/dist/index.mjs CHANGED
@@ -1030,83 +1030,52 @@ var OtpElement = (props) => {
1030
1030
 
1031
1031
  // src/Components/CircleDonut.tsx
1032
1032
  import React31 from "react";
1033
- import Highcharts from "highcharts";
1034
- import HighchartsReact from "highcharts-react-official";
1035
- var HighchartsChart = ({ options }) => {
1036
- return /* @__PURE__ */ React31.createElement(HighchartsReact, { highcharts: Highcharts, options });
1037
- };
1038
- console.log("HighchartsChart", HighchartsChart);
1039
- var CircleDonut = (props) => {
1040
- const chartOptions = {
1041
- chart: {
1042
- type: "pie"
1043
- },
1044
- title: {
1045
- text: "Egg Yolk Composition"
1046
- },
1047
- tooltip: {
1048
- valueSuffix: "%"
1049
- },
1050
- subtitle: {
1051
- text: 'Source:<a href="https://www.mdpi.com/2072-6643/11/3/684/htm" target="_default">MDPI</a>'
1052
- },
1053
- plotOptions: {
1054
- series: {
1055
- allowPointSelect: true,
1056
- cursor: "pointer",
1057
- dataLabels: [{
1058
- enabled: true,
1059
- distance: 20
1060
- }, {
1061
- enabled: true,
1062
- distance: -40,
1063
- format: "{point.percentage:.1f}%",
1064
- style: {
1065
- fontSize: "1.2em",
1066
- textOutline: "none",
1067
- opacity: 0.7
1068
- },
1069
- filter: {
1070
- operator: ">",
1071
- property: "percentage",
1072
- value: 10
1073
- }
1074
- }]
1075
- }
1076
- },
1077
- series: [
1033
+ import { Doughnut } from "react-chartjs-2";
1034
+ import {
1035
+ Chart as ChartJS,
1036
+ DoughnutController,
1037
+ ArcElement,
1038
+ Tooltip,
1039
+ Legend
1040
+ } from "chart.js";
1041
+ ChartJS.register(DoughnutController, ArcElement, Tooltip, Legend);
1042
+ var CircleDonut = () => {
1043
+ const data = {
1044
+ labels: ["Red", "Blue", "Yellow", "Green", "Purple"],
1045
+ datasets: [
1078
1046
  {
1079
- name: "Percentage",
1080
- colorByPoint: true,
1081
- data: [
1082
- {
1083
- name: "Water",
1084
- y: 55.02
1085
- },
1086
- {
1087
- name: "Fat",
1088
- sliced: true,
1089
- selected: true,
1090
- y: 26.71
1091
- },
1092
- {
1093
- name: "Carbohydrates",
1094
- y: 1.09
1095
- },
1096
- {
1097
- name: "Protein",
1098
- y: 15.5
1099
- },
1100
- {
1101
- name: "Ash",
1102
- y: 1.68
1103
- }
1104
- ]
1047
+ label: "My Dataset",
1048
+ data: [300, 50, 100, 40, 120],
1049
+ backgroundColor: [
1050
+ "rgba(255, 99, 132, 0.2)",
1051
+ "rgba(54, 162, 235, 0.2)",
1052
+ "rgba(255, 206, 86, 0.2)",
1053
+ "rgba(75, 192, 192, 0.2)",
1054
+ "rgba(153, 102, 255, 0.2)"
1055
+ ],
1056
+ borderColor: [
1057
+ "rgba(255, 99, 132, 1)",
1058
+ "rgba(54, 162, 235, 1)",
1059
+ "rgba(255, 206, 86, 1)",
1060
+ "rgba(75, 192, 192, 1)",
1061
+ "rgba(153, 102, 255, 1)"
1062
+ ],
1063
+ borderWidth: 1
1105
1064
  }
1106
1065
  ]
1107
1066
  };
1108
- console.log("HighchartsChart------------------", HighchartsChart);
1109
- return /* @__PURE__ */ React31.createElement(React31.Fragment, null, /* @__PURE__ */ React31.createElement(HighchartsChart, { highcharts: Highcharts, options: chartOptions }));
1067
+ const options = {
1068
+ responsive: true,
1069
+ plugins: {
1070
+ legend: {
1071
+ position: "top"
1072
+ },
1073
+ tooltip: {
1074
+ enabled: true
1075
+ }
1076
+ }
1077
+ };
1078
+ return /* @__PURE__ */ React31.createElement(Doughnut, { data, options });
1110
1079
  };
1111
1080
  export {
1112
1081
  AddMoreTable,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@apexcura/ui-components",
3
- "version": "0.0.14-Beta116",
3
+ "version": "0.0.14-Beta118",
4
4
  "description": "Apex cura React components library",
5
5
  "keywords": [
6
6
  "apex cura",
@@ -50,6 +50,7 @@
50
50
  "dependencies": {
51
51
  "@tinymce/tinymce-react": "^5.0.1",
52
52
  "autoprefixer": "^10.4.19",
53
+ "chart.js": "^4.4.3",
53
54
  "date-fns": "^3.6.0",
54
55
  "esbuild": "^0.21.4",
55
56
  "highcharts": "^11.4.3",
@@ -57,6 +58,7 @@
57
58
  "moment": "^2.30.1",
58
59
  "postcss": "^8.4.38",
59
60
  "postcss-import": "^16.1.0",
61
+ "react-chartjs-2": "^5.2.0",
60
62
  "react-icons": "^5.2.1",
61
63
  "tailwindcss": "^3.4.3"
62
64
  }