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

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 +2 -2
  2. package/dist/index.d.ts +2 -2
  3. package/dist/index.js +38 -75
  4. package/dist/index.mjs +43 -74
  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 DonutChart: React$1.FC;
124
124
 
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 };
125
+ export { AddMoreTable, ButtonElement, CheckboxElement, CkEditor, DatePickerElement, DateRangePickerElement, DonutChart, 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 DonutChart: React$1.FC;
124
124
 
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 };
125
+ export { AddMoreTable, ButtonElement, CheckboxElement, CkEditor, DatePickerElement, DateRangePickerElement, DonutChart, DropDownGroup, FileUpload, Image, MultipleSelectElement, Navbar, NumberElement, OtpElement, PasswordElement, RadioElement, SelectElement, Sidebar, SingleCheckbox, SingleSelectElement, SwitchElement, TableElement, TabsElement, TextElement, TextareaElement, Upload };
package/dist/index.js CHANGED
@@ -33,10 +33,10 @@ __export(src_exports, {
33
33
  AddMoreTable: () => AddMoreTable,
34
34
  ButtonElement: () => ButtonElement,
35
35
  CheckboxElement: () => CheckboxElement,
36
- CircleDonut: () => CircleDonut,
37
36
  CkEditor: () => CkEditor,
38
37
  DatePickerElement: () => DatePickerElement,
39
38
  DateRangePickerElement: () => DateRangePickerElement,
39
+ DonutChart: () => DonutChart,
40
40
  DropDownGroup: () => DropDownGroup,
41
41
  FileUpload: () => FileUpload,
42
42
  Image: () => Image,
@@ -1091,93 +1091,56 @@ 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 DonutChart = () => {
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 = {
1174
1137
  AddMoreTable,
1175
1138
  ButtonElement,
1176
1139
  CheckboxElement,
1177
- CircleDonut,
1178
1140
  CkEditor,
1179
1141
  DatePickerElement,
1180
1142
  DateRangePickerElement,
1143
+ DonutChart,
1181
1144
  DropDownGroup,
1182
1145
  FileUpload,
1183
1146
  Image,
package/dist/index.mjs CHANGED
@@ -1030,92 +1030,61 @@ 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 DonutChart = () => {
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,
1113
1082
  ButtonElement,
1114
1083
  CheckboxElement,
1115
- CircleDonut,
1116
1084
  CkEditor,
1117
1085
  DatePickerElement,
1118
1086
  DateRangePickerElement,
1087
+ DonutChart,
1119
1088
  DropDownGroup,
1120
1089
  FileUpload,
1121
1090
  Image,
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-Beta117",
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
  }