Skip to content

Commit

Permalink
Merge pull request #179 from hussaino03/develop
Browse files Browse the repository at this point in the history 
Fixes #176: Analytics Dashboard
  • Loading branch information
@hussaino03
hussaino03 authored Dec 21, 2024
2 parents 0f18adb + c149444 commit 530ce66
Showing 1 changed file with 57 additions and 44 deletions.
101 changes: 57 additions & 44 deletions client/src/components/Analytics/Dashboard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,17 @@ const LoadingSpinner = memo(() => (
</div>
));

const SafeChartWrapper = memo(({ children, data }) => {
if (!data || !data.labels || !data.datasets || data.labels.length === 0) {
return (
<div className="h-full flex items-center justify-center text-gray-500 dark:text-gray-400">
No data available
</div>
);
}
return children;
});

const Dashboard = ({ completedTasks, onOpenDashboard }) => {
const [isFullView, setIsFullView] = useState(false);
const [xpData, setXpData] = useState(null);
Expand Down Expand Up @@ -277,12 +288,10 @@ const Dashboard = ({ completedTasks, onOpenDashboard }) => {
<div className="h-48">
{isLoading ? (
<LoadingSpinner />
) : transformedChartData.xpData ? (
<Line data={transformedChartData.xpData} options={chartOptions} />
) : (
<div className="h-full flex items-center justify-center text-gray-500 dark:text-gray-400">
No XP data available
</div>
<SafeChartWrapper data={transformedChartData.xpData}>
<Line data={transformedChartData.xpData} options={chartOptions} />
</SafeChartWrapper>
)}
</div>

Expand Down Expand Up @@ -408,60 +417,64 @@ const Dashboard = ({ completedTasks, onOpenDashboard }) => {
<h4 className="text-xs sm:text-sm font-medium text-gray-600 dark:text-gray-400 px-1">XP Growth</h4>
<div className="h-[250px] sm:h-[280px] p-3 sm:p-4 rounded-xl bg-gray-50 dark:bg-gray-700/50
border border-gray-100 dark:border-gray-600">
<Line data={transformedChartData.modalXpData} options={{
...chartOptions,
maintainAspectRatio: false,
scales: {
...chartOptions.scales,
x: {
...chartOptions.scales.x,
ticks: {
maxRotation: CHART_CONSTANTS.rotations.x.max,
minRotation: CHART_CONSTANTS.rotations.x.min,
font: {
size: CHART_CONSTANTS.fontSizes.small
<SafeChartWrapper data={transformedChartData.modalXpData}>
<Line data={transformedChartData.modalXpData} options={{
...chartOptions,
maintainAspectRatio: false,
scales: {
...chartOptions.scales,
x: {
...chartOptions.scales.x,
ticks: {
maxRotation: CHART_CONSTANTS.rotations.x.max,
minRotation: CHART_CONSTANTS.rotations.x.min,
font: {
size: CHART_CONSTANTS.fontSizes.small
}
}
}
},
y: {
...chartOptions.scales.y,
ticks: {
font: {
size: CHART_CONSTANTS.fontSizes.small
},
y: {
...chartOptions.scales.y,
ticks: {
font: {
size: CHART_CONSTANTS.fontSizes.small
}
}
}
}
}
}} />
}} />
</SafeChartWrapper>
</div>
</div>

<div className="space-y-2 sm:space-y-4">
<h4 className="text-xs sm:text-sm font-medium text-gray-600 dark:text-gray-400 px-1">Task/Project Completion</h4>
<div className="h-[250px] sm:h-[280px] p-3 sm:p-4 rounded-xl bg-gray-50 dark:bg-gray-700/50
border border-gray-100 dark:border-gray-600">
<Bar data={transformedChartData.taskData} options={{
...tasksChartOptions,
scales: {
...tasksChartOptions.scales,
x: {
ticks: {
maxRotation: CHART_CONSTANTS.rotations.x.max,
minRotation: CHART_CONSTANTS.rotations.x.min,
font: {
size: CHART_CONSTANTS.fontSizes.small
<SafeChartWrapper data={transformedChartData.taskData}>
<Bar data={transformedChartData.taskData} options={{
...tasksChartOptions,
scales: {
...tasksChartOptions.scales,
x: {
ticks: {
maxRotation: CHART_CONSTANTS.rotations.x.max,
minRotation: CHART_CONSTANTS.rotations.x.min,
font: {
size: CHART_CONSTANTS.fontSizes.small
}
}
}
},
y: {
ticks: {
font: {
size: CHART_CONSTANTS.fontSizes.small
},
y: {
ticks: {
font: {
size: CHART_CONSTANTS.fontSizes.small
}
}
}
}
}
}} />
}} />
</SafeChartWrapper>
</div>
</div>
</div>
Expand Down

0 comments on commit 530ce66

Please sign in to comment.