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

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 +27 -11
  2. package/dist/index.mjs +27 -11
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -1318,7 +1318,7 @@ var LineChart = (props) => {
1318
1318
  { label: "Engagement Rate", data: [20, 40, 60, 80, 100] },
1319
1319
  { label: "Conversion Rate", data: [30, 50, 70, 90, 110] }
1320
1320
  ];
1321
- const labels = ["Instagram", "Whatsapp", "Messages", "Linkedin", "Telegram"];
1321
+ const labels = ["Instagram", "Whatsapp", "Messages", "Telegram", "Linkedin"];
1322
1322
  (0, import_react34.useEffect)(() => {
1323
1323
  if (chartRef.current) {
1324
1324
  if (chartInstance.current) {
@@ -1335,11 +1335,11 @@ var LineChart = (props) => {
1335
1335
  backgroundColor: "rgba(0, 0, 0, 0)",
1336
1336
  pointBackgroundColor: index === 0 ? "#FF8F00" : index === 1 ? "#F50057" : "#254AAA",
1337
1337
  pointBorderColor: "white",
1338
- // Color of the point border
1339
1338
  pointStyle: "circle",
1339
+ pointRadius: 5,
1340
+ // Adjust point size as needed
1340
1341
  tension: 0.1,
1341
1342
  fill: true
1342
- // Fill the area under the line
1343
1343
  }))
1344
1344
  },
1345
1345
  options: {
@@ -1351,6 +1351,12 @@ var LineChart = (props) => {
1351
1351
  }
1352
1352
  },
1353
1353
  scales: {
1354
+ x: {
1355
+ grid: {
1356
+ display: true
1357
+ // Display x-axis grid lines
1358
+ }
1359
+ },
1354
1360
  y: {
1355
1361
  beginAtZero: true,
1356
1362
  suggestedMax: 200,
@@ -1360,7 +1366,8 @@ var LineChart = (props) => {
1360
1366
  }
1361
1367
  },
1362
1368
  grid: {
1363
- display: false
1369
+ display: true
1370
+ // Display y-axis grid lines
1364
1371
  }
1365
1372
  }
1366
1373
  }
@@ -1373,7 +1380,7 @@ var LineChart = (props) => {
1373
1380
  }
1374
1381
  };
1375
1382
  }, [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 }));
1383
+ return /* @__PURE__ */ import_react34.default.createElement("div", { className: props.className }, /* @__PURE__ */ import_react34.default.createElement("canvas", { ref: chartRef }));
1377
1384
  };
1378
1385
 
1379
1386
  // src/Components/DoubleBarChart.tsx
@@ -1402,17 +1409,13 @@ var DoubleBarChart = () => {
1402
1409
  label: "Male",
1403
1410
  data: [60, 70, 50, 80, 65],
1404
1411
  // Example data for male
1405
- backgroundColor: "rgba(54, 162, 235, 0.5)",
1406
- borderColor: "rgba(54, 162, 235, 1)",
1407
- borderWidth: 1
1412
+ backgroundColor: "#93B8E2"
1408
1413
  },
1409
1414
  {
1410
1415
  label: "Female",
1411
1416
  data: [70, 65, 75, 55, 85],
1412
1417
  // Example data for female
1413
- backgroundColor: "rgba(255, 99, 132, 0.5)",
1414
- borderColor: "rgba(255, 99, 132, 1)",
1415
- borderWidth: 1
1418
+ backgroundColor: "#4484CD"
1416
1419
  }
1417
1420
  ]
1418
1421
  },
@@ -1425,6 +1428,19 @@ var DoubleBarChart = () => {
1425
1428
  callback: function(value) {
1426
1429
  return value + "%";
1427
1430
  }
1431
+ },
1432
+ grid: {
1433
+ display: false
1434
+ // Remove y-axis grid lines
1435
+ }
1436
+ }
1437
+ },
1438
+ plugins: {
1439
+ legend: {
1440
+ labels: {
1441
+ // Configure labels to show colored circles
1442
+ usePointStyle: true
1443
+ // Use circles instead of squares
1428
1444
  }
1429
1445
  }
1430
1446
  }
package/dist/index.mjs CHANGED
@@ -1270,7 +1270,7 @@ var LineChart = (props) => {
1270
1270
  { label: "Engagement Rate", data: [20, 40, 60, 80, 100] },
1271
1271
  { label: "Conversion Rate", data: [30, 50, 70, 90, 110] }
1272
1272
  ];
1273
- const labels = ["Instagram", "Whatsapp", "Messages", "Linkedin", "Telegram"];
1273
+ const labels = ["Instagram", "Whatsapp", "Messages", "Telegram", "Linkedin"];
1274
1274
  useEffect4(() => {
1275
1275
  if (chartRef.current) {
1276
1276
  if (chartInstance.current) {
@@ -1287,11 +1287,11 @@ var LineChart = (props) => {
1287
1287
  backgroundColor: "rgba(0, 0, 0, 0)",
1288
1288
  pointBackgroundColor: index === 0 ? "#FF8F00" : index === 1 ? "#F50057" : "#254AAA",
1289
1289
  pointBorderColor: "white",
1290
- // Color of the point border
1291
1290
  pointStyle: "circle",
1291
+ pointRadius: 5,
1292
+ // Adjust point size as needed
1292
1293
  tension: 0.1,
1293
1294
  fill: true
1294
- // Fill the area under the line
1295
1295
  }))
1296
1296
  },
1297
1297
  options: {
@@ -1303,6 +1303,12 @@ var LineChart = (props) => {
1303
1303
  }
1304
1304
  },
1305
1305
  scales: {
1306
+ x: {
1307
+ grid: {
1308
+ display: true
1309
+ // Display x-axis grid lines
1310
+ }
1311
+ },
1306
1312
  y: {
1307
1313
  beginAtZero: true,
1308
1314
  suggestedMax: 200,
@@ -1312,7 +1318,8 @@ var LineChart = (props) => {
1312
1318
  }
1313
1319
  },
1314
1320
  grid: {
1315
- display: false
1321
+ display: true
1322
+ // Display y-axis grid lines
1316
1323
  }
1317
1324
  }
1318
1325
  }
@@ -1325,7 +1332,7 @@ var LineChart = (props) => {
1325
1332
  }
1326
1333
  };
1327
1334
  }, [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 }));
1335
+ return /* @__PURE__ */ React34.createElement("div", { className: props.className }, /* @__PURE__ */ React34.createElement("canvas", { ref: chartRef }));
1329
1336
  };
1330
1337
 
1331
1338
  // src/Components/DoubleBarChart.tsx
@@ -1354,17 +1361,13 @@ var DoubleBarChart = () => {
1354
1361
  label: "Male",
1355
1362
  data: [60, 70, 50, 80, 65],
1356
1363
  // Example data for male
1357
- backgroundColor: "rgba(54, 162, 235, 0.5)",
1358
- borderColor: "rgba(54, 162, 235, 1)",
1359
- borderWidth: 1
1364
+ backgroundColor: "#93B8E2"
1360
1365
  },
1361
1366
  {
1362
1367
  label: "Female",
1363
1368
  data: [70, 65, 75, 55, 85],
1364
1369
  // Example data for female
1365
- backgroundColor: "rgba(255, 99, 132, 0.5)",
1366
- borderColor: "rgba(255, 99, 132, 1)",
1367
- borderWidth: 1
1370
+ backgroundColor: "#4484CD"
1368
1371
  }
1369
1372
  ]
1370
1373
  },
@@ -1377,6 +1380,19 @@ var DoubleBarChart = () => {
1377
1380
  callback: function(value) {
1378
1381
  return value + "%";
1379
1382
  }
1383
+ },
1384
+ grid: {
1385
+ display: false
1386
+ // Remove y-axis grid lines
1387
+ }
1388
+ }
1389
+ },
1390
+ plugins: {
1391
+ legend: {
1392
+ labels: {
1393
+ // Configure labels to show colored circles
1394
+ usePointStyle: true
1395
+ // Use circles instead of squares
1380
1396
  }
1381
1397
  }
1382
1398
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@apexcura/ui-components",
3
- "version": "0.0.14-Beta129",
3
+ "version": "0.0.14-Beta130",
4
4
  "description": "Apex cura React components library",
5
5
  "keywords": [
6
6
  "apex cura",