Skip to content

Radia : Fix - Loss Tracking calendar picker feature #5371

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Radia731 wants to merge 1 commit into
base: development
Choose a base branch
from
Open

Radia : Fix - Loss Tracking calendar picker feature #5371

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 9 additions & 8 deletions ...ashboard/WeeklyProjectSummary/Financials/LossTrackingLineCharts/LossTrackingLineChart.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
// LossTrackingLineChart.jsx
import { useEffect, useMemo, useRef, useState } from 'react';
import { useSelector } from 'react-redux';
import {
Expand Down Expand Up @@ -140,16 +139,13 @@ export default function LossTrackingLineChart() {
const darkMode = useSelector(state => state.theme.darkMode);
const hostRef = useRef(null);

// --- Promote parent wrapper (no parent code changes needed) ---
useEffect(() => {
const host = hostRef.current;
if (!host) return;

// Find the wrapper the page uses around our component
const wrapper = host.closest('.weekly-project-summary-card.financial-big');
if (!wrapper) return;

// Save previous inline styles to restore on unmount
const prev = {
gridColumn: wrapper.style.gridColumn,
flex: wrapper.style.flex,
Expand All @@ -158,7 +154,6 @@ export default function LossTrackingLineChart() {
minWidth: wrapper.style.minWidth,
};

// Make the wrapper span the full grid row & fill flex rows
wrapper.style.gridColumn = '1 / -1';
wrapper.style.flex = '1 1 100%';
wrapper.style.width = '100%';
Expand Down Expand Up @@ -201,9 +196,15 @@ export default function LossTrackingLineChart() {

const chartData = useMemo(() => {
const merged = {};

const filterStart = startDate ? startDate.substring(0, 7) : '';
const filterEnd = endDate ? endDate.substring(0, 7) : '';

filteredLines.forEach(line => {
line.data.forEach(({ date, month, value }) => {
const withinRange = (!startDate || date >= startDate) && (!endDate || date <= endDate);
const withinRange =
(!filterStart || date >= filterStart) && (!filterEnd || date <= filterEnd);

if (withinRange) {
if (!merged[month]) merged[month] = { month };
merged[month][`${line.year}-${line.material}`] = value;
Expand Down Expand Up @@ -272,7 +273,7 @@ export default function LossTrackingLineChart() {
<div className={styles.monthInputWrapper}>
<input
className={styles.monthInput}
type="month"
type="date"
value={startDate}
onChange={e => setStartDate(e.target.value)}
/>
Expand All @@ -289,7 +290,7 @@ export default function LossTrackingLineChart() {
<div className={styles.monthInputWrapper}>
<input
className={styles.monthInput}
type="month"
type="date"
value={endDate}
onChange={e => setEndDate(e.target.value)}
/>
Expand Down
80 changes: 42 additions & 38 deletions ...d/WeeklyProjectSummary/Financials/LossTrackingLineCharts/LossTrackingLineChart.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,11 +77,9 @@
/* ---------- Filters (grid: one lane when space allows) ---------- */
.lossTrackingChartFilters {
display: grid;

/* Each item gets at least 220px; if space allows, they all sit on one row */
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 0.85rem var(--space);
align-items: end; /* align baselines for inputs and button */
align-items: end;
background-color: var(--surface-muted);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
Expand All @@ -95,12 +93,11 @@
font-size: 0.95rem;
color: var(--text-color);
gap: 0.35rem;
min-width: 0; /* allow shrinking to column width */
min-width: 0;
}

/* Inputs */
.lossTrackingChartFilters select,
.lossTrackingChartFilters input[type="month"] {
.lossTrackingChartFilters [type="date"] {
padding: 0.55rem 0.7rem;
border: 1px solid var(--border-color);
border-radius: 8px;
Expand All @@ -122,16 +119,21 @@
padding-right: 2.45rem !important;
}

.lossTrackingChartFilters input[type="month"] {
.lossTrackingChartFilters [type="date"] {
color-scheme: light;
}

.darkMode .lossTrackingChartFilters input[type="month"] {
.darkMode .lossTrackingChartFilters [type="date"] {
color-scheme: dark;
}

.lossTrackingChartFilters input[type="month"]::-webkit-calendar-picker-indicator {
.lossTrackingChartFilters input[type="date"]::-webkit-calendar-picker-indicator {
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer;
}

Expand All @@ -156,13 +158,12 @@
}

.lossTrackingChartFilters select:focus-visible,
.lossTrackingChartFilters input[type="month"]:focus-visible {
.lossTrackingChartFilters [type="date"]:focus-visible {
outline: none;
border-color: var(--ring);
box-shadow: 0 0 0 2px var(--ring), 0 0 0 4px var(--ring-offset);
}

/* Reset button — behaves like any grid item so it aligns in the same lane */
.resetBtn {
padding: 0.6rem 1rem;
font-size: 0.95rem;
Expand All @@ -176,13 +177,16 @@
letter-spacing: 0.2px;
transition: background-color 0.15s ease, transform 0.02s ease, box-shadow 0.15s ease, color 0.15s ease;
box-shadow: 0 1px 0 rgb(0 0 0 / 4%), 0 2px 8px rgb(0 0 0 / 8%);
place-self: end start;
}

/* IMPORTANT: no margin-left/auto and no order hacks */
place-self: end start; /* align start like labels */ /* baseline alignment with inputs */
.resetBtn:hover {
background-color: var(--reset-btn-hover);
}

.resetBtn:hover { background-color: var(--reset-btn-hover); }
.resetBtn:active { transform: translateY(1px); }
.resetBtn:active {
transform: translateY(1px);
}

.resetBtn:focus-visible {
outline: none;
Expand All @@ -195,7 +199,6 @@
box-shadow: none;
}

/* Date range validation error — spans full grid width */
.dateRangeError {
grid-column: 1 / -1;
color: #e53935;
Expand All @@ -204,9 +207,10 @@
padding: 0.15rem 0.1rem;
}

/* Optional: on very narrow screens, make the button full width to match stacked inputs */
@media (width <= 768px) {
.resetBtn { justify-self: stretch; }
@media (width <=768px) {
.resetBtn {
justify-self: stretch;
}

.customLegend {
grid-template-columns: repeat(2, minmax(0, 1fr));
Expand All @@ -217,23 +221,25 @@
.chartWrapper {
width: 100%;

/* Responsive, predictable height for ResponsiveContainer (height="100%") */
--chart-height: clamp(320px, 42vh, 680px);

height: var(--chart-height);
background-color: var(--surface-muted);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
padding: 1rem;
min-width: 0; /* let SVG measure correctly in flex/grid */
min-width: 0;
}

@media screen and (width >= 1440px) {
.chartWrapper { --chart-height: clamp(340px, 40vh, 720px); }
@media screen and (width >=1440px) {
.chartWrapper {
--chart-height: clamp(340px, 40vh, 720px);
}
}

/* Recharts tweaks */
.recharts-cartesian-grid line { stroke: var(--grid-color); }
.recharts-cartesian-grid line {
stroke: var(--grid-color);
}

.customLegend {
display: grid;
Expand All @@ -260,11 +266,10 @@
flex: 0 0 auto;
}

.legendItem > span:last-child {
.legendItem>span:last-child {
white-space: nowrap;
}

/* ---------- No data state ---------- */
.noDataMessage {
display: flex;
justify-content: center;
Expand All @@ -281,30 +286,29 @@
transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* --- Ultra-narrow phones: <= 400px --- */
@media (width <= 400px) {
@media (width <=400px) {
.lossTrackingChartFilters {
grid-template-columns: 1fr; /* force single column */
gap: 0.6rem; /* slightly tighter spacing */
padding: 0.75rem; /* reduce inner padding */
grid-template-columns: 1fr;
gap: 0.6rem;
padding: 0.75rem;
}

.lossTrackingChartFilters label {
min-width: 0; /* allow shrink */
min-width: 0;
}

.lossTrackingChartFilters select,
.lossTrackingChartFilters input[type="month"],
.lossTrackingChartFilters [type="date"],
.resetBtn {
width: 100%; /* full width controls */
box-sizing: border-box; /* respect padding/border */
width: 100%;
box-sizing: border-box;
}

.resetBtn {
justify-self: stretch; /* no overflow due to intrinsic width */
justify-self: stretch;
}

.customLegend {
grid-template-columns: 1fr;
}
}
}
Loading