@apexcura/ui-components 0.0.14-Beta127 → 0.0.14-Beta129

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 +28 -21
  4. package/dist/index.mjs +28 -21
  5. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -122,7 +122,7 @@ declare const OtpElement: (props: ElementType) => React$1.JSX.Element;
122
122
 
123
123
  declare const CircleDonut: (props: ElementType) => React$1.JSX.Element;
124
124
 
125
- declare const SemiCircleDonut: () => React$1.JSX.Element;
125
+ declare const SemiCircleDonut: (props: ElementType) => React$1.JSX.Element;
126
126
 
127
127
  declare const HorizontalBarChart: (props: ElementType) => React$1.JSX.Element;
128
128
 
package/dist/index.d.ts CHANGED
@@ -122,7 +122,7 @@ declare const OtpElement: (props: ElementType) => React$1.JSX.Element;
122
122
 
123
123
  declare const CircleDonut: (props: ElementType) => React$1.JSX.Element;
124
124
 
125
- declare const SemiCircleDonut: () => React$1.JSX.Element;
125
+ declare const SemiCircleDonut: (props: ElementType) => React$1.JSX.Element;
126
126
 
127
127
  declare const HorizontalBarChart: (props: ElementType) => React$1.JSX.Element;
128
128
 
package/dist/index.js CHANGED
@@ -1167,18 +1167,18 @@ var CircleDonut = (props) => {
1167
1167
  const centerX = left + width / 2;
1168
1168
  const centerY = top + height / 2;
1169
1169
  ctx.save();
1170
- ctx.font = "10px Arial";
1170
+ ctx.font = "7px Arial";
1171
1171
  ctx.fillStyle = "blue";
1172
1172
  ctx.textAlign = "center";
1173
1173
  ctx.textBaseline = "middle";
1174
1174
  ctx.fillText("Total Sessions", centerX, centerY - 10);
1175
- ctx.font = "30px Arial";
1175
+ ctx.font = "25px Arial";
1176
1176
  ctx.fillStyle = "black";
1177
1177
  ctx.fillText("85", centerX, centerY + 20);
1178
1178
  ctx.restore();
1179
1179
  }
1180
1180
  };
1181
- return /* @__PURE__ */ import_react31.default.createElement("div", { className: props.className }, /* @__PURE__ */ import_react31.default.createElement(import_react_chartjs_2.Doughnut, { data, options, plugins: [centerTextPlugin] }));
1181
+ return /* @__PURE__ */ import_react31.default.createElement("div", { className: props.className }, /* @__PURE__ */ import_react31.default.createElement("h1", { className: props.labelClassName }, props.label), /* @__PURE__ */ import_react31.default.createElement(import_react_chartjs_2.Doughnut, { data, options, plugins: [centerTextPlugin] }));
1182
1182
  };
1183
1183
 
1184
1184
  // src/Components/SemiCircleDonut.tsx
@@ -1186,7 +1186,7 @@ var import_react32 = __toESM(require("react"));
1186
1186
  var import_react_chartjs_22 = require("react-chartjs-2");
1187
1187
  var import_chart2 = require("chart.js");
1188
1188
  import_chart2.Chart.register(import_chart2.DoughnutController, import_chart2.ArcElement, import_chart2.Tooltip, import_chart2.Legend);
1189
- var SemiCircleDonut = () => {
1189
+ var SemiCircleDonut = (props) => {
1190
1190
  const data = {
1191
1191
  labels: [
1192
1192
  "Registration",
@@ -1251,7 +1251,7 @@ var SemiCircleDonut = () => {
1251
1251
  ctx.restore();
1252
1252
  }
1253
1253
  };
1254
- return /* @__PURE__ */ import_react32.default.createElement("div", { style: { width: "30%" } }, /* @__PURE__ */ import_react32.default.createElement(import_react_chartjs_22.Doughnut, { data, options, plugins: [centerTextPlugin] }));
1254
+ return /* @__PURE__ */ import_react32.default.createElement("div", { className: props.className }, /* @__PURE__ */ import_react32.default.createElement("h1", { className: props.labelClassName }, props.label), /* @__PURE__ */ import_react32.default.createElement(import_react_chartjs_22.Doughnut, { data, options, plugins: [centerTextPlugin] }));
1255
1255
  };
1256
1256
 
1257
1257
  // src/Components/HorizontalBarChart.tsx
@@ -1266,7 +1266,7 @@ var HorizontalBarChart = (props) => {
1266
1266
  {
1267
1267
  data: [30, 10, 27, 40, 12, 24],
1268
1268
  backgroundColor: "#6298D5",
1269
- barThickness: 40
1269
+ barThickness: 20
1270
1270
  }
1271
1271
  ]
1272
1272
  };
@@ -1304,7 +1304,7 @@ var HorizontalBarChart = (props) => {
1304
1304
  }
1305
1305
  }
1306
1306
  };
1307
- return /* @__PURE__ */ import_react33.default.createElement("div", { className: props.className }, /* @__PURE__ */ import_react33.default.createElement(import_react_chartjs_23.Bar, { data, options }));
1307
+ return /* @__PURE__ */ import_react33.default.createElement("div", { className: props.className }, /* @__PURE__ */ import_react33.default.createElement("h1", { className: props.labelClassName }, props.label), /* @__PURE__ */ import_react33.default.createElement(import_react_chartjs_23.Bar, { data, options }));
1308
1308
  };
1309
1309
 
1310
1310
  // src/Components/LineChart.tsx
@@ -1315,13 +1315,10 @@ var LineChart = (props) => {
1315
1315
  const chartInstance = (0, import_react34.useRef)(null);
1316
1316
  const data = [
1317
1317
  { label: "ROI", data: [10, 30, 50, 70, 90] },
1318
- // Example data for ROI
1319
1318
  { label: "Engagement Rate", data: [20, 40, 60, 80, 100] },
1320
- // Example data for Engagement Rate
1321
1319
  { label: "Conversion Rate", data: [30, 50, 70, 90, 110] }
1322
- // Example data for Conversion Rate
1323
1320
  ];
1324
- const labels = ["Insta", "Whatsapp", "Messages", "Another", "Example"];
1321
+ const labels = ["Instagram", "Whatsapp", "Messages", "Linkedin", "Telegram"];
1325
1322
  (0, import_react34.useEffect)(() => {
1326
1323
  if (chartRef.current) {
1327
1324
  if (chartInstance.current) {
@@ -1334,26 +1331,36 @@ var LineChart = (props) => {
1334
1331
  datasets: data.map((dataset, index) => ({
1335
1332
  label: dataset.label,
1336
1333
  data: dataset.data,
1337
- borderColor: index === 0 ? "blue" : index === 1 ? "green" : "yellow",
1338
- // Custom line colors
1339
- backgroundColor: index === 0 ? "blue" : index === 1 ? "green" : "yellow",
1340
- // Circle color in legend
1341
- pointBackgroundColor: "white",
1342
- // Circle background color in legend
1334
+ borderColor: index === 0 ? "#FF8F00" : index === 1 ? "#F50057" : "#254AAA",
1335
+ backgroundColor: "rgba(0, 0, 0, 0)",
1336
+ pointBackgroundColor: index === 0 ? "#FF8F00" : index === 1 ? "#F50057" : "#254AAA",
1337
+ pointBorderColor: "white",
1338
+ // Color of the point border
1339
+ pointStyle: "circle",
1343
1340
  tension: 0.1,
1344
- fill: false
1341
+ fill: true
1342
+ // Fill the area under the line
1345
1343
  }))
1346
1344
  },
1347
1345
  options: {
1346
+ plugins: {
1347
+ legend: {
1348
+ labels: {
1349
+ usePointStyle: true
1350
+ }
1351
+ }
1352
+ },
1348
1353
  scales: {
1349
1354
  y: {
1350
1355
  beginAtZero: true,
1351
1356
  suggestedMax: 200,
1352
- // Adjust based on your data range
1353
1357
  ticks: {
1354
1358
  callback: function(value) {
1355
1359
  return value + "%";
1356
1360
  }
1361
+ },
1362
+ grid: {
1363
+ display: false
1357
1364
  }
1358
1365
  }
1359
1366
  }
@@ -1365,8 +1372,8 @@ var LineChart = (props) => {
1365
1372
  chartInstance.current.destroy();
1366
1373
  }
1367
1374
  };
1368
- }, []);
1369
- return /* @__PURE__ */ import_react34.default.createElement("div", { className: props.className }, /* @__PURE__ */ import_react34.default.createElement("canvas", { ref: chartRef }));
1375
+ }, [labels, data]);
1376
+ return /* @__PURE__ */ import_react34.default.createElement("div", { className: props.className }, /* @__PURE__ */ import_react34.default.createElement("h1", { className: props.labelClassName }, props.label), /* @__PURE__ */ import_react34.default.createElement("canvas", { ref: chartRef }));
1370
1377
  };
1371
1378
 
1372
1379
  // src/Components/DoubleBarChart.tsx
package/dist/index.mjs CHANGED
@@ -1107,18 +1107,18 @@ var CircleDonut = (props) => {
1107
1107
  const centerX = left + width / 2;
1108
1108
  const centerY = top + height / 2;
1109
1109
  ctx.save();
1110
- ctx.font = "10px Arial";
1110
+ ctx.font = "7px Arial";
1111
1111
  ctx.fillStyle = "blue";
1112
1112
  ctx.textAlign = "center";
1113
1113
  ctx.textBaseline = "middle";
1114
1114
  ctx.fillText("Total Sessions", centerX, centerY - 10);
1115
- ctx.font = "30px Arial";
1115
+ ctx.font = "25px Arial";
1116
1116
  ctx.fillStyle = "black";
1117
1117
  ctx.fillText("85", centerX, centerY + 20);
1118
1118
  ctx.restore();
1119
1119
  }
1120
1120
  };
1121
- return /* @__PURE__ */ React31.createElement("div", { className: props.className }, /* @__PURE__ */ React31.createElement(Doughnut, { data, options, plugins: [centerTextPlugin] }));
1121
+ return /* @__PURE__ */ React31.createElement("div", { className: props.className }, /* @__PURE__ */ React31.createElement("h1", { className: props.labelClassName }, props.label), /* @__PURE__ */ React31.createElement(Doughnut, { data, options, plugins: [centerTextPlugin] }));
1122
1122
  };
1123
1123
 
1124
1124
  // src/Components/SemiCircleDonut.tsx
@@ -1132,7 +1132,7 @@ import {
1132
1132
  Legend as Legend2
1133
1133
  } from "chart.js";
1134
1134
  ChartJS2.register(DoughnutController2, ArcElement2, Tooltip2, Legend2);
1135
- var SemiCircleDonut = () => {
1135
+ var SemiCircleDonut = (props) => {
1136
1136
  const data = {
1137
1137
  labels: [
1138
1138
  "Registration",
@@ -1197,7 +1197,7 @@ var SemiCircleDonut = () => {
1197
1197
  ctx.restore();
1198
1198
  }
1199
1199
  };
1200
- return /* @__PURE__ */ React32.createElement("div", { style: { width: "30%" } }, /* @__PURE__ */ React32.createElement(Doughnut2, { data, options, plugins: [centerTextPlugin] }));
1200
+ return /* @__PURE__ */ React32.createElement("div", { className: props.className }, /* @__PURE__ */ React32.createElement("h1", { className: props.labelClassName }, props.label), /* @__PURE__ */ React32.createElement(Doughnut2, { data, options, plugins: [centerTextPlugin] }));
1201
1201
  };
1202
1202
 
1203
1203
  // src/Components/HorizontalBarChart.tsx
@@ -1218,7 +1218,7 @@ var HorizontalBarChart = (props) => {
1218
1218
  {
1219
1219
  data: [30, 10, 27, 40, 12, 24],
1220
1220
  backgroundColor: "#6298D5",
1221
- barThickness: 40
1221
+ barThickness: 20
1222
1222
  }
1223
1223
  ]
1224
1224
  };
@@ -1256,7 +1256,7 @@ var HorizontalBarChart = (props) => {
1256
1256
  }
1257
1257
  }
1258
1258
  };
1259
- return /* @__PURE__ */ React33.createElement("div", { className: props.className }, /* @__PURE__ */ React33.createElement(Bar, { data, options }));
1259
+ return /* @__PURE__ */ React33.createElement("div", { className: props.className }, /* @__PURE__ */ React33.createElement("h1", { className: props.labelClassName }, props.label), /* @__PURE__ */ React33.createElement(Bar, { data, options }));
1260
1260
  };
1261
1261
 
1262
1262
  // src/Components/LineChart.tsx
@@ -1267,13 +1267,10 @@ var LineChart = (props) => {
1267
1267
  const chartInstance = useRef2(null);
1268
1268
  const data = [
1269
1269
  { label: "ROI", data: [10, 30, 50, 70, 90] },
1270
- // Example data for ROI
1271
1270
  { label: "Engagement Rate", data: [20, 40, 60, 80, 100] },
1272
- // Example data for Engagement Rate
1273
1271
  { label: "Conversion Rate", data: [30, 50, 70, 90, 110] }
1274
- // Example data for Conversion Rate
1275
1272
  ];
1276
- const labels = ["Insta", "Whatsapp", "Messages", "Another", "Example"];
1273
+ const labels = ["Instagram", "Whatsapp", "Messages", "Linkedin", "Telegram"];
1277
1274
  useEffect4(() => {
1278
1275
  if (chartRef.current) {
1279
1276
  if (chartInstance.current) {
@@ -1286,26 +1283,36 @@ var LineChart = (props) => {
1286
1283
  datasets: data.map((dataset, index) => ({
1287
1284
  label: dataset.label,
1288
1285
  data: dataset.data,
1289
- borderColor: index === 0 ? "blue" : index === 1 ? "green" : "yellow",
1290
- // Custom line colors
1291
- backgroundColor: index === 0 ? "blue" : index === 1 ? "green" : "yellow",
1292
- // Circle color in legend
1293
- pointBackgroundColor: "white",
1294
- // Circle background color in legend
1286
+ borderColor: index === 0 ? "#FF8F00" : index === 1 ? "#F50057" : "#254AAA",
1287
+ backgroundColor: "rgba(0, 0, 0, 0)",
1288
+ pointBackgroundColor: index === 0 ? "#FF8F00" : index === 1 ? "#F50057" : "#254AAA",
1289
+ pointBorderColor: "white",
1290
+ // Color of the point border
1291
+ pointStyle: "circle",
1295
1292
  tension: 0.1,
1296
- fill: false
1293
+ fill: true
1294
+ // Fill the area under the line
1297
1295
  }))
1298
1296
  },
1299
1297
  options: {
1298
+ plugins: {
1299
+ legend: {
1300
+ labels: {
1301
+ usePointStyle: true
1302
+ }
1303
+ }
1304
+ },
1300
1305
  scales: {
1301
1306
  y: {
1302
1307
  beginAtZero: true,
1303
1308
  suggestedMax: 200,
1304
- // Adjust based on your data range
1305
1309
  ticks: {
1306
1310
  callback: function(value) {
1307
1311
  return value + "%";
1308
1312
  }
1313
+ },
1314
+ grid: {
1315
+ display: false
1309
1316
  }
1310
1317
  }
1311
1318
  }
@@ -1317,8 +1324,8 @@ var LineChart = (props) => {
1317
1324
  chartInstance.current.destroy();
1318
1325
  }
1319
1326
  };
1320
- }, []);
1321
- return /* @__PURE__ */ React34.createElement("div", { className: props.className }, /* @__PURE__ */ React34.createElement("canvas", { ref: chartRef }));
1327
+ }, [labels, data]);
1328
+ return /* @__PURE__ */ React34.createElement("div", { className: props.className }, /* @__PURE__ */ React34.createElement("h1", { className: props.labelClassName }, props.label), /* @__PURE__ */ React34.createElement("canvas", { ref: chartRef }));
1322
1329
  };
1323
1330
 
1324
1331
  // src/Components/DoubleBarChart.tsx
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@apexcura/ui-components",
3
- "version": "0.0.14-Beta127",
3
+ "version": "0.0.14-Beta129",
4
4
  "description": "Apex cura React components library",
5
5
  "keywords": [
6
6
  "apex cura",