@apexcura/ui-components 0.0.14-Beta128 → 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 (3) hide show
  1. package/dist/index.js +23 -16
  2. package/dist/index.mjs +23 -16
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -1167,12 +1167,12 @@ 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();
@@ -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,12 +1107,12 @@ 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();
@@ -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-Beta128",
3
+ "version": "0.0.14-Beta129",
4
4
  "description": "Apex cura React components library",
5
5
  "keywords": [
6
6
  "apex cura",