Skip to content

Commit efa29c2

Browse files
sundarmachanisundarmachani
committed
sundar_grouped_bar_quantity_of_material_used_merge_conflicts
1 parent 95a0be1 commit efa29c2

3 files changed

Lines changed: 173 additions & 50 deletions

File tree

‎src/components/BMDashboard/WeeklyProjectSummary/QuantityOfMaterialsUsed/QuantityOfMaterialsUsed.jsx‎

Lines changed: 106 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -432,47 +432,128 @@ function QuantityOfMaterialsUsed({ data }) {
432432
};
433433

434434
const getMaterialUsageDetails = materialName => {
435-
const material = data.find(d => d?.itemType?.name === materialName);
436-
if (!material) return null;
435+
// First find all materials with the matching name
436+
const matchingMaterials = data.filter(m => m?.itemType?.name === materialName);
437437

438-
const records = (material.updateRecord || []).map(r => ({
439-
date: moment(r.date).format('YYYY-MM-DD'),
440-
quantity: r.quantityUsed || 0,
441-
project: material.project?.name || 'Unknown',
442-
}));
438+
if (!matchingMaterials || matchingMaterials.length === 0) return null;
443439

444-
// Build timeline by date
445-
const timelineMap = {};
440+
// Track usage by project
446441
const usageByProject = {};
442+
const projectData = {};
447443

448-
records.forEach(({ date, quantity, project }) => {
449-
timelineMap[date] = (timelineMap[date] || 0) + quantity;
450-
usageByProject[project] = (usageByProject[project] || 0) + quantity;
444+
// Process each material item
445+
matchingMaterials.forEach(material => {
446+
if (!material.updateRecord || !material.project?.name) return;
447+
448+
const projectName = material.project.name;
449+
450+
// Initialize project data if not already done
451+
if (!projectData[projectName]) {
452+
projectData[projectName] = {
453+
totalUsage: 0,
454+
timelineByDate: {}, // Track usage by date for this project
455+
};
456+
}
457+
458+
// Process update records for this material
459+
material.updateRecord.forEach(record => {
460+
if (!record || !record.date) return;
461+
462+
const recordDate = moment(record.date);
463+
let shouldInclude = false;
464+
465+
// Apply date filtering based on selected date range
466+
if (selectedDate === 'ALL') {
467+
shouldInclude = true;
468+
} else if (selectedDate === 'Last Week') {
469+
shouldInclude = recordDate.isBetween(
470+
moment()
471+
.subtract(1, 'week')
472+
.startOf('week'),
473+
moment()
474+
.subtract(1, 'week')
475+
.endOf('week'),
476+
);
477+
} else if (selectedDate === 'Last Month') {
478+
shouldInclude = recordDate.isBetween(
479+
moment()
480+
.subtract(1, 'month')
481+
.startOf('month'),
482+
moment()
483+
.subtract(1, 'month')
484+
.endOf('month'),
485+
);
486+
} else if (selectedDate === 'Last Year') {
487+
shouldInclude = recordDate.isBetween(
488+
moment()
489+
.subtract(1, 'year')
490+
.startOf('year'),
491+
moment()
492+
.subtract(1, 'year')
493+
.endOf('year'),
494+
);
495+
} else if (selectedDate === 'This Week') {
496+
shouldInclude = recordDate.isBetween(moment().startOf('week'), moment().endOf('week'));
497+
} else if (selectedDate === 'This Month') {
498+
shouldInclude = recordDate.isBetween(moment().startOf('month'), moment().endOf('month'));
499+
} else if (selectedDate === 'This Year') {
500+
shouldInclude = recordDate.isBetween(moment().startOf('year'), moment().endOf('year'));
501+
} else if (selectedDate === 'Custom' && dateRangeOne[0] && dateRangeOne[1]) {
502+
shouldInclude = recordDate.isBetween(
503+
moment(dateRangeOne[0]).startOf('day'),
504+
moment(dateRangeOne[1]).endOf('day'),
505+
);
506+
}
507+
508+
if (shouldInclude) {
509+
const quantity = record.quantityUsed || 0;
510+
const dateStr = recordDate.format('YYYY-MM-DD');
511+
512+
// Add to project's total usage
513+
projectData[projectName].totalUsage += quantity;
514+
515+
// Add to this project's timeline, grouped by date
516+
if (!projectData[projectName].timelineByDate[dateStr]) {
517+
projectData[projectName].timelineByDate[dateStr] = 0;
518+
}
519+
projectData[projectName].timelineByDate[dateStr] += quantity;
520+
}
521+
});
522+
523+
// Update the usageByProject map with the total for this project
524+
usageByProject[projectName] = projectData[projectName].totalUsage;
451525
});
452526

453-
const timeline = Object.entries(timelineMap).map(([date, quantity]) => ({
454-
date,
455-
quantity,
456-
}));
527+
// Sort projects by usage (highest first)
528+
const sortedProjects = Object.entries(usageByProject).sort((a, b) => b[1] - a[1]);
457529

458-
const total = timeline.reduce((sum, r) => sum + r.quantity, 0);
530+
// Get top project or default to Unknown
531+
const topProject = sortedProjects.length > 0 ? sortedProjects[0][0] : 'Unknown';
532+
const topProjectUsage = sortedProjects.length > 0 ? sortedProjects[0][1] : 0;
459533

460-
const topProject =
461-
Object.entries(usageByProject).sort((a, b) => b[1] - a[1])[0]?.[0] || 'Unknown';
534+
// Create the timeline for the top project only
535+
let timeline = [];
536+
if (topProject !== 'Unknown' && projectData[topProject]) {
537+
timeline = Object.entries(projectData[topProject].timelineByDate)
538+
.map(([date, quantity]) => ({ date, quantity }))
539+
.sort((a, b) => new Date(b.date) - new Date(a.date));
540+
}
462541

463542
return {
464543
name: materialName,
465544
timeline,
466-
total,
545+
total: topProjectUsage,
467546
project: topProject,
547+
projectUsage: sortedProjects.map(([name, usage]) => ({ name, usage })),
548+
debugProjects: sortedProjects.map(([name, usage]) => `${name}: ${usage}`).join(', '),
468549
};
469550
};
470551
return (
471552
<div
472553
className={`weekly-project-summary-card normal-card ${darkMode ? 'dark-mode' : ''}`}
473554
style={{ position: 'relative' }}
474555
>
475-
<div class="chart-title-container">
556+
<div className="chart-title-container">
476557
<h2 className="quantity-of-materials-used-chart-title">Quantity of Materials Used</h2>
477558

478559
<button
@@ -491,6 +572,9 @@ function QuantityOfMaterialsUsed({ data }) {
491572
place="left"
492573
effect="solid"
493574
className="quantity-of-materials-used-chart-tooltip"
575+
clickable
576+
event="click"
577+
globalEventOff="click"
494578
>
495579
<div style={{ fontWeight: 'bold', marginBottom: '4px' }}>Chart Overview</div>
496580
<div>This chart compares material quantities across two time periods.</div>
@@ -761,7 +845,7 @@ function QuantityOfMaterialsUsed({ data }) {
761845
}}
762846
>
763847
<strong>
764-
Top {Math.min(10, visibleRange[1] - visibleRange[0])} of {selectedDate}:{' '}
848+
Visible Top {Math.min(10, visibleRange[1] - visibleRange[0])} of {selectedDate}:{' '}
765849
</strong>
766850
{chartData.datasets[0].data
767851
.slice(visibleRange[0], visibleRange[1])

‎src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.css‎

Lines changed: 51 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -251,6 +251,46 @@
251251
background-color: var(--button-hover) !important;
252252
}
253253

254+
/* First, set a max-height and make it scrollable */
255+
.quantity-of-materials-used-chart-tooltip {
256+
max-height: 80vh !important; /* Limit to 80% of viewport height */
257+
overflow-y: auto !important; /* Enable vertical scrolling */
258+
padding-right: 15px !important; /* Add some padding for the scrollbar */
259+
}
260+
261+
/* Style the scrollbar for better visibility */
262+
.quantity-of-materials-used-chart-tooltip::-webkit-scrollbar {
263+
width: 8px;
264+
}
265+
266+
.quantity-of-materials-used-chart-tooltip::-webkit-scrollbar-track {
267+
background: rgba(0, 0, 0, 0.1);
268+
border-radius: 4px;
269+
}
270+
271+
.quantity-of-materials-used-chart-tooltip::-webkit-scrollbar-thumb {
272+
background: rgba(0, 0, 0, 0.3);
273+
border-radius: 4px;
274+
}
275+
276+
/* Support for Firefox */
277+
.quantity-of-materials-used-chart-tooltip {
278+
scrollbar-width: thin;
279+
scrollbar-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.1);
280+
}
281+
282+
/* Additional adjustments for dark mode if needed */
283+
.dark-mode .quantity-of-materials-used-chart-tooltip::-webkit-scrollbar-track {
284+
background: rgba(255, 255, 255, 0.1);
285+
}
286+
287+
.dark-mode .quantity-of-materials-used-chart-tooltip::-webkit-scrollbar-thumb {
288+
background: rgba(255, 255, 255, 0.3);
289+
}
290+
291+
.dark-mode .quantity-of-materials-used-chart-tooltip {
292+
scrollbar-color: rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.1);
293+
}
254294
/* ---------------- RESPONSIVE DESIGN ---------------- */
255295

256296
/* Medium Screens - Wrap Items */
@@ -317,8 +357,8 @@
317357
align-items: center;
318358
justify-content: center;
319359
border-radius: 25px;
320-
width: 100%;
321-
max-width: 284px;
360+
width: 100%;
361+
max-width: 284px;
322362
height: 190px;
323363
text-align: center;
324364
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
@@ -343,12 +383,12 @@
343383
.weekly-status-button {
344384
width: 130px;
345385
height: 65px;
346-
border-radius: 50px / 32px;
386+
border-radius: 50px / 32px;
347387
display: flex;
348388
align-items: center;
349389
justify-content: center;
350390
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
351-
margin: 12px 0;
391+
margin: 12px 0;
352392
}
353393

354394
.weekly-card-title {
@@ -363,34 +403,33 @@
363403
font-weight: 600;
364404
}
365405

366-
367406
/* ---------------- RESPONSIVE BREAKPOINTS ---------------- */
368407
@media (min-width: 1600px) {
369408
.project-status-grid {
370-
grid-template-columns: repeat(6, 1fr);
409+
grid-template-columns: repeat(6, 1fr);
371410
}
372411
}
373412

374413
@media (max-width: 1400px) {
375414
.project-status-grid {
376-
grid-template-columns: repeat(4, 1fr);
415+
grid-template-columns: repeat(4, 1fr);
377416
}
378417
}
379418

380-
@media (max-width: 1024px) {
419+
@media (max-width: 1024px) {
381420
.project-status-grid {
382-
grid-template-columns: repeat(3, 1fr);
421+
grid-template-columns: repeat(3, 1fr);
383422
}
384423
}
385424

386-
@media (max-width: 768px) {
425+
@media (max-width: 768px) {
387426
.project-status-grid {
388427
grid-template-columns: repeat(2, 1fr);
389428
}
390429
}
391430

392-
@media (max-width: 576px) {
431+
@media (max-width: 576px) {
393432
.project-status-grid {
394-
grid-template-columns: repeat(1, 1fr);
433+
grid-template-columns: repeat(1, 1fr);
395434
}
396435
}

‎src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.jsx‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -143,23 +143,23 @@ export default function WeeklyProjectSummary() {
143143
const uniqueId = uuidv4();
144144
return (
145145
<div
146-
key={uniqueId}
147-
className="weekly-project-summary-card status-card"
148-
style={{ backgroundColor: button.bgColor }} // Dynamic Background
149-
>
150-
<div className="weekly-card-title">{button.title}</div>
151-
<div
152-
className="weekly-status-button"
153-
style={{ backgroundColor: button.buttonColor }} // Dynamic Oval Color
154-
>
155-
<span className="weekly-status-value">{button.value}</span>
156-
</div>
157-
<div
158-
className="weekly-status-change"
159-
style={{ color: button.textColor }} // Dynamic Change Color
146+
key={uniqueId}
147+
className="weekly-project-summary-card status-card"
148+
style={{ backgroundColor: button.bgColor }} // Dynamic Background
160149
>
161-
{button.change}
162-
</div>
150+
<div className="weekly-card-title">{button.title}</div>
151+
<div
152+
className="weekly-status-button"
153+
style={{ backgroundColor: button.buttonColor }} // Dynamic Oval Color
154+
>
155+
<span className="weekly-status-value">{button.value}</span>
156+
</div>
157+
<div
158+
className="weekly-status-change"
159+
style={{ color: button.textColor }} // Dynamic Change Color
160+
>
161+
{button.change}
162+
</div>
163163
</div>
164164
);
165165
})}

0 commit comments

Comments
 (0)