feat(Dashboard): integrate loading state for line chart and fix data mapping

This commit is contained in:
Vaibhav Surve 2025-04-11 17:22:56 +05:30
parent a30350916e
commit 99a4cb0553

View File

@ -10,7 +10,7 @@ import {
} from "../../hooks/useDashboard_Data";
const Dashboard = () => {
const { projects } = useProjects();
const { projects,loading } = useProjects();
const [selectedProjectId, setSelectedProjectId] = useState('all');
const [FromDate, setFromDate] = useState(() => {
const today = new Date();
@ -21,7 +21,7 @@ const { projectsCardData, } = useDashboardProjectsCardData();
const { teamsCardData,} = useDashboardTeamsCardData();
const { tasksCardData, } = useDashboardTasksCardData();
const { dashboard_data, loading: lineLoading } = useDashboard_Data({
const { dashboard_data, loading: isLineChartLoading } = useDashboard_Data({
days,
FromDate,
projectId: selectedProjectId === 'all' ? 0 : selectedProjectId,
@ -40,11 +40,11 @@ const { tasksCardData, } = useDashboardTasksCardData();
const lineChartSeries = [
{
name: 'Planned Work',
data: dashboard_data.map(d => d.plannedWork || 0),
data: dashboard_data.map(d => d.plannedTask || 0),
},
{
name: 'Completed Work',
data: dashboard_data.map(d => d.completedWork || 0),
data: dashboard_data.map(d => d.completedTask || 0),
},
];
@ -126,6 +126,7 @@ const { tasksCardData, } = useDashboardTasksCardData();
<HorizontalBarChart
categories={projectNames}
seriesData={projectProgress}
loading={loading}
/>
</div>
</div>
@ -192,8 +193,7 @@ const { tasksCardData, } = useDashboardTasksCardData();
</div>
</div>
<div className="card-body ">
<LineChart seriesData={lineChartSeries} categories={lineChartCategories} />
{lineLoading && <p className="text-center mt-3">Loading...</p>}
<LineChart seriesData={lineChartSeries} categories={lineChartCategories} loading={isLineChartLoading} />
</div>
</div>
</div>