Skip to content

Commit 897c007

Browse files
Riyad-MuradRiyad-Murad
authored
Merge pull request #141 from Riyad-Murad/provider_dashboard_fix
Provider dashboard fix
2 parents 0d20508 + f6265b3 commit 897c007

File tree

6 files changed

+180
-58
lines changed

6 files changed

+180
-58
lines changed

‎amp-client/src/Pages/ClientPages/ClientDashboard/ClientDashboard.jsx‎

Lines changed: 27 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import "./styles.css";
2-
import { Line } from "react-chartjs-2";
2+
import { Line, Bar } from "react-chartjs-2";
33
import { useState, useEffect } from "react";
44
import axiosBaseUrl from "../../../Axios/axios";
55
import { useDispatch, useSelector } from "react-redux";
@@ -10,6 +10,7 @@ import {
1010
LinearScale,
1111
PointElement,
1212
LineElement,
13+
BarElement,
1314
Title,
1415
Tooltip,
1516
Legend,
@@ -20,10 +21,11 @@ ChartJS.register(
2021
LinearScale,
2122
PointElement,
2223
LineElement,
24+
BarElement,
2325
Title,
2426
Tooltip,
2527
Legend,
26-
Filler,
28+
Filler
2729
);
2830

2931
const ClientDashboard = () => {
@@ -67,7 +69,12 @@ const ClientDashboard = () => {
6769
}
6870

6971
if (!dashboardData) {
70-
return <div>No dashboard data available.</div>;
72+
return (
73+
<div className="spinner-container">
74+
<div className="spinner"></div>
75+
<p>Loading dashboard data...</p>
76+
</div>
77+
);
7178
}
7279

7380
const powerUsageData = {
@@ -78,7 +85,7 @@ const ClientDashboard = () => {
7885
data: Object.values(dashboardData.powerUsagePerDay),
7986
fill: true,
8087
backgroundColor: "rgba(75, 192, 192, 0.6)",
81-
borderColor: "#28a745", // Bootstrap success color
88+
borderColor: "#28a745",
8289
pointBackgroundColor: "#28a745",
8390
pointBorderColor: "#fff",
8491
tension: 0.3,
@@ -91,22 +98,28 @@ const ClientDashboard = () => {
9198
datasets: [
9299
{
93100
label: "Cumulative Power Usage (in Kilowatts)",
94-
data: Object.values(dashboardData.cumulativePowerUsage),
95-
fill: true,
96-
backgroundColor: "rgba(255, 193, 7, 0.6)", // Bootstrap warning color
101+
data: Object.values(dashboardData.cumulativePowerUsage).map(
102+
(arr) => Math.max(...arr)
103+
),
104+
backgroundColor: "rgba(255, 193, 7, 0.6)",
97105
borderColor: "#ffc107",
98-
pointBackgroundColor: "#ffc107",
99-
pointBorderColor: "#fff",
100-
tension: 0.3,
106+
borderWidth: 1,
101107
},
102108
],
103109
};
104110

105111
const chartOptions = {
106112
responsive: true,
113+
maintainAspectRatio: false,
114+
layout: {
115+
padding: {
116+
top: 0,
117+
bottom: 0,
118+
},
119+
},
107120
plugins: {
108121
legend: {
109-
position: "top",
122+
position: "bottom",
110123
},
111124
title: {
112125
display: true,
@@ -127,6 +140,8 @@ const ClientDashboard = () => {
127140
},
128141
},
129142
y: {
143+
beginAtZero: true,
144+
min: 0,
130145
title: {
131146
display: true,
132147
text: "Kilowatts",
@@ -135,7 +150,6 @@ const ClientDashboard = () => {
135150
grid: {
136151
borderColor: "#eee",
137152
},
138-
beginAtZero: true,
139153
},
140154
},
141155
};
@@ -154,10 +168,6 @@ const ClientDashboard = () => {
154168
...chartOptions,
155169
plugins: {
156170
...chartOptions.plugins,
157-
title: {
158-
...chartOptions.plugins.title,
159-
text: "Power Usage per Day",
160-
},
161171
},
162172
}}
163173
/>
@@ -169,16 +179,12 @@ const ClientDashboard = () => {
169179
<div className="chart-widget">
170180
<h3>Cumulative Power Usage Per Day</h3>
171181
{Object.keys(cumulativePowerUsageData.labels).length > 0 ? (
172-
<Line
182+
<Bar
173183
data={cumulativePowerUsageData}
174184
options={{
175185
...chartOptions,
176186
plugins: {
177187
...chartOptions.plugins,
178-
title: {
179-
...chartOptions.plugins.title,
180-
text: "Cumulative Power Usage Per Day",
181-
},
182188
},
183189
}}
184190
/>

‎amp-client/src/Pages/ClientPages/ClientDashboard/styles.css‎

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,9 +43,14 @@
4343
}
4444

4545
.chart-widget {
46-
flex: 1;
46+
flex: 1;
47+
height: 350px;
48+
display: flex;
49+
flex-direction: column;
50+
justify-content: flex-end;
4751
background-color: #fff;
4852
padding: 15px;
53+
margin-top: 10px;
4954
border-radius: 8px;
5055
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
5156
border: 1px solid #eee;
@@ -78,3 +83,29 @@
7883
font-weight: bold;
7984
color: #198754;
8085
}
86+
87+
.spinner-container {
88+
display: flex;
89+
flex-direction: column;
90+
align-items: center;
91+
justify-content: center;
92+
height: 150px;
93+
color: #555;
94+
width: 100%;
95+
}
96+
97+
.spinner {
98+
width: 40px;
99+
height: 40px;
100+
border: 4px solid rgba(0, 0, 0, 0.1);
101+
border-left-color: #f9a43a;
102+
border-radius: 50%;
103+
animation: spin 1s linear infinite;
104+
margin-bottom: 10px;
105+
}
106+
107+
@keyframes spin {
108+
to {
109+
transform: rotate(360deg);
110+
}
111+
}

‎amp-client/src/Pages/ProviderPages/ProviderDashboard/ProviderDashboard.jsx‎

Lines changed: 70 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -102,20 +102,24 @@ const ProviderDashboard = () => {
102102
const totalPowerUsageResponse = await axiosBaseUrl.get(
103103
`/providers/totalPowerUsage/${userId}`
104104
);
105-
setTotalPowerUsage(
106-
Array.isArray(totalPowerUsageResponse?.data?.data)
107-
? totalPowerUsageResponse.data.data
108-
: []
109-
);
105+
const totalPowerUsageArray = Object.entries(
106+
totalPowerUsageResponse.data.data
107+
).map(([date, power]) => ({
108+
timestamp: new Date(date).toISOString(),
109+
total_power: power,
110+
}));
111+
setTotalPowerUsage(totalPowerUsageArray);
110112

111113
const averageVoltageResponse = await axiosBaseUrl.get(
112114
`/providers/averageVoltage/${userId}`
113115
);
114-
setAverageVoltage(
115-
Array.isArray(averageVoltageResponse?.data?.data)
116-
? averageVoltageResponse.data.data
117-
: []
118-
);
116+
const averageVoltageArray = Object.entries(
117+
averageVoltageResponse.data.data
118+
).map(([date, voltage]) => ({
119+
timestamp: new Date(date).toISOString(),
120+
average_voltage: voltage,
121+
}));
122+
setAverageVoltage(averageVoltageArray);
119123

120124
const usersResponse = await axiosBaseUrl.get(
121125
`/providers/getAllUsers/${userId}`
@@ -134,9 +138,14 @@ const ProviderDashboard = () => {
134138
const linesResponse = await axiosBaseUrl.get(
135139
`/providers/getAllLines/${userId}`
136140
);
137-
setTotalLines(usersResponse?.data?.data?.length);
141+
setTotalLines(linesResponse?.data?.data?.length);
138142
} catch (err) {
139-
setError(err.message || "Failed to fetch dashboard data for charts");
143+
if (err.code === "ECONNABORTED") {
144+
setError("Request timed out. Please try again.");
145+
} else {
146+
setError(err.message || "Failed to fetch dashboard data for charts");
147+
}
148+
// setError(err.message || "Failed to fetch dashboard data for charts");
140149
console.error("Error fetching dashboard data for charts:", err);
141150
} finally {
142151
setLoading(false);
@@ -171,6 +180,28 @@ const ProviderDashboard = () => {
171180
const chartOptions = {
172181
responsive: true,
173182
maintainAspectRatio: true,
183+
plugins: {
184+
legend: {
185+
position: "bottom",
186+
},
187+
title: {
188+
display: true,
189+
text: "Chart",
190+
font: {
191+
size: 14,
192+
},
193+
},
194+
},
195+
scales: {
196+
y: {
197+
beginAtZero: true,
198+
},
199+
},
200+
};
201+
202+
const voltageLineChartOptions = {
203+
responsive: true,
204+
maintainAspectRatio: false,
174205
plugins: {
175206
legend: {
176207
position: "bottom",
@@ -185,6 +216,8 @@ const ProviderDashboard = () => {
185216
scales: {
186217
y: {
187218
beginAtZero: true,
219+
min: 200,
220+
max: 250,
188221
},
189222
},
190223
};
@@ -206,6 +239,7 @@ const ProviderDashboard = () => {
206239
scales: {
207240
y: {
208241
beginAtZero: true,
242+
// min: 100,
209243
},
210244
},
211245
};
@@ -243,7 +277,7 @@ const ProviderDashboard = () => {
243277
{
244278
label: "Frequency",
245279
data: voltageDistribution.map((v) => v[1]),
246-
backgroundColor: "rgba(201, 203, 207, 0.8)",
280+
backgroundColor: "rgba(3, 60, 173, 0.8)",
247281
borderColor: "rgb(201, 203, 207)",
248282
borderWidth: 1,
249283
},
@@ -307,7 +341,9 @@ const ProviderDashboard = () => {
307341
const totalPowerUsageData = {
308342
labels: Array.isArray(totalPowerUsage)
309343
? totalPowerUsage.map((item) =>
310-
new Date(item.timestamp).toLocaleDateString()
344+
item.timestamp
345+
? new Date(item.timestamp).toLocaleDateString()
346+
: "Invalid"
311347
)
312348
: [],
313349
datasets: [
@@ -367,7 +403,7 @@ const ProviderDashboard = () => {
367403
<Bar
368404
key="powerByClientChart"
369405
data={powerByClientData}
370-
options={chartOptions}
406+
options={lineChartOptions}
371407
ref={powerByClientChartRef}
372408
/>
373409
) : (
@@ -382,6 +418,7 @@ const ProviderDashboard = () => {
382418
key="voltageDistributionChart"
383419
data={voltageDistributionData}
384420
options={lineChartOptions}
421+
// options={chartOptions}
385422
ref={voltageDistributionChartRef}
386423
/>
387424
) : (
@@ -419,11 +456,11 @@ const ProviderDashboard = () => {
419456

420457
<div className="chart-widget">
421458
<h3>Total Power Usage Over Time</h3>
422-
{totalPowerUsage.length > 0 ? (
459+
{totalPowerUsage !== null && totalPowerUsage !== undefined ? (
423460
<Line
424461
key="totalPowerUsageChart"
425462
data={totalPowerUsageData}
426-
options={chartOptions}
463+
options={lineChartOptions}
427464
ref={totalPowerUsageChartRef}
428465
/>
429466
) : (
@@ -433,11 +470,12 @@ const ProviderDashboard = () => {
433470

434471
<div className="chart-widget">
435472
<h3>Average Voltage Over Time</h3>
436-
{averageVoltage.length > 0 ? (
473+
{averageVoltage !== null && averageVoltage !== undefined ? (
437474
<Line
438475
key="averageVoltageChart"
439476
data={averageVoltageData}
440-
options={chartOptions}
477+
options={voltageLineChartOptions}
478+
// options={chartOptions}
441479
ref={averageVoltageChartRef}
442480
/>
443481
) : (
@@ -461,21 +499,27 @@ const ProviderDashboard = () => {
461499

462500
<div className="chart-widget all-metrics-widget">
463501
<h3>All Metrics</h3>
464-
{allMetrics.length > 0 ? (
502+
{allMetrics && Object.keys(allMetrics).length > 0 ? (
465503
<table>
466504
<thead>
467505
<tr>
468-
<th>Metric</th>
469-
<th>Value</th>
506+
<th>ID</th>
507+
<th>Voltage</th>
508+
<th>Current</th>
509+
<th>Power</th>
510+
<th>Energy</th>
470511
<th>Timestamp</th>
471512
</tr>
472513
</thead>
473514
<tbody>
474515
{allMetrics.map((metric, index) => (
475-
<tr key={index}>
476-
<td>{metric.metric_name}</td>
477-
<td>{metric.metric_value}</td>
478-
<td>{new Date(metric.timestamp).toLocaleString()}</td>
516+
<tr key={metric.id}>
517+
<td>{metric.id}</td>
518+
<td>{metric.voltage}</td>
519+
<td>{metric.current}</td>
520+
<td>{metric.power}</td>
521+
<td>{metric.energy}</td>
522+
<td>{new Date(metric.created_at).toLocaleString()}</td>
479523
</tr>
480524
))}
481525
</tbody>

0 commit comments

Comments
 (0)