fix: change timeline`s style

digitable-lol · Sep 2, 2024 · d0d4e65 · d0d4e65
1 parent 94157b4
commit d0d4e65
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 21 deletions.
diff --git a/application/frontend/src/components/ReportTimeline/ReportTimeline.styled.ts b/application/frontend/src/components/ReportTimeline/ReportTimeline.styled.ts
@@ -2,6 +2,10 @@ import { Box, TableCell, Typography } from "@mui/material"
 import { styled } from "@mui/material/styles"
 
 const ROW_HEIGHT = 60
+const HEADER_ROW_HEIGHT = ROW_HEIGHT
+const COLUMN_WIDTH = 100
+const HORIZONTAL_PADDING = 8
+const LINE_HEIGHT = 50
 
 export const ScrollableBox = styled(Box)`
   overflow-x: auto;
@@ -12,48 +16,86 @@ export const ScrollableBox = styled(Box)`
 export const StickyColumnCell = styled(TableCell)`
   position: sticky;
   left: 0;
-  background-color: #f5f5f5;
   z-index: 2;
-  width: 200px;
+  width: ${COLUMN_WIDTH}px;
   height: ${ROW_HEIGHT}px;
   display: flex;
   align-items: center;
-  padding: 16px;
+  padding: 0 ${HORIZONTAL_PADDING}px;
   border-right: 1px solid #ddd;
+  vertical-align: middle;
+  box-sizing: border-box;
 `
 
 export const StickyHeaderCell = styled(TableCell)`
   position: sticky;
   top: 0;
-  background-color: #f5f5f5;
   z-index: 3;
-  width: 60px;
-  height: ${ROW_HEIGHT}px;
+  width: ${COLUMN_WIDTH}px;
+  height: ${HEADER_ROW_HEIGHT}px;
   border-bottom: 1px solid #ddd;
+  padding: 0 ${HORIZONTAL_PADDING}px;
+  vertical-align: middle;
+  box-sizing: border-box;
 `
 
 export const TimelineCell = styled(TableCell)`
-  padding: 0;
+  padding: 0 ${HORIZONTAL_PADDING}px;
   border: none;
   height: ${ROW_HEIGHT}px;
   position: relative;
+  vertical-align: middle;
+  width: ${COLUMN_WIDTH}px;
+  box-sizing: border-box;
 `
 
 export const LineContainer = styled(Box)`
   position: absolute;
-  top: 0;
+  top: 50%;
   left: 0;
   width: 100%;
-  height: 100%;
+  height: ${LINE_HEIGHT}px;
+  transform: translateY(-50%);
   background-color: ${(props: { color: string }) => props.color};
-  border-radius: 4px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  border-radius: 0;
+  box-shadow: none;
+  margin: 0;
+  padding: 0;
+  z-index: 1;
+  box-sizing: border-box;
 `
 
 export const HeaderText = styled(Typography)`
   color: rgba(0, 0, 0, 0.54);
   text-transform: uppercase;
   font-weight: 400;
   text-align: center;
-  line-height: ${ROW_HEIGHT}px;
+  line-height: ${HEADER_ROW_HEIGHT}px;
+  vertical-align: middle;
+  margin: 0;
+`
+
+export const DateCell = styled(Box)`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: ${HEADER_ROW_HEIGHT}px;
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+`
+
+export const DayOfWeek = styled(Typography)`
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.54);
+  line-height: 1;
+  margin: 0;
+`
+
+export const DateNumber = styled(Typography)`
+  font-size: 16px; 
+  font-weight: bold;
+  line-height: 1;
+  margin: 0; ы
 `
diff --git a/application/frontend/src/components/ReportTimeline/ReportTimeline.tsx b/application/frontend/src/components/ReportTimeline/ReportTimeline.tsx
@@ -13,6 +13,9 @@ import {
 } from "@mui/material"
 
 import {
+  DateCell,
+  DateNumber,
+  DayOfWeek,
   HeaderText,
   LineContainer,
   ScrollableBox,
@@ -24,9 +27,8 @@ import {
 type Report = {
   id: number
   name: string
-  startDate: Date
-  endDate: Date
-  color: string
+  startDate: string
+  endDate: string
   stage: string
 }
 
@@ -48,6 +50,14 @@ const getDaysArray = (start: Date, end: Date): Date[] => {
   return arr
 }
 
+const stageColors: { [key: string]: string } = {
+  Initial: "rgba(0, 122, 255, 1)",
+  Onboarding: "rgba(88, 86, 214, 1)",
+  "In progress": "rgba(255, 59, 48, 1)",
+  "In review": "rgba(255, 149, 0, 1)",
+  "In test": "rgba(52, 199, 89, 1)",
+}
+
 export const ReportTimeline: React.FC<ReportTimelineProps> = ({ reports, startDate, endDate }) => {
   const days = getDaysArray(startDate, endDate)
   const adjustedDaysOfWeek = [...daysOfWeek.slice(1), daysOfWeek[0]]
@@ -88,8 +98,10 @@ export const ReportTimeline: React.FC<ReportTimelineProps> = ({ reports, startDa
                   <TableCell />
                   {days.map((day, index) => (
                     <StickyHeaderCell key={index} align="center">
-                      <HeaderText variant="body2">{adjustedDaysOfWeek[day.getDay()]}</HeaderText>
-                      <Typography variant="body2">{day.getDate()}</Typography>
+                      <DateCell>
+                        <DayOfWeek variant="body2">{adjustedDaysOfWeek[day.getDay()]}</DayOfWeek>
+                        <DateNumber variant="body2">{day.getDate()}</DateNumber>
+                      </DateCell>
                     </StickyHeaderCell>
                   ))}
                 </TableRow>
@@ -99,12 +111,22 @@ export const ReportTimeline: React.FC<ReportTimelineProps> = ({ reports, startDa
                   <TableRow key={report.id}>
                     <TableCell />
                     {days.map((day, index) => {
-                      const isWithinRange =
-                        day >= new Date(report.startDate.setHours(0, 0, 0, 0)) &&
-                        day <= new Date(report.endDate.setHours(23, 59, 59, 999))
+                      const reportStartDate = new Date(report.startDate)
+                      const reportEndDate = new Date(report.endDate)
+
+                      const dayStart = new Date(day)
+                      dayStart.setHours(0, 0, 0, 0)
+
+                      const dayEnd = new Date(day)
+                      dayEnd.setHours(23, 59, 59, 999)
+
+                      const isWithinRange = dayStart <= reportEndDate && dayEnd >= reportStartDate
+
+                      const color = stageColors[report.stage]
+
                       return (
                         <TimelineCell key={index}>
-                          {isWithinRange && <LineContainer color={report.color} />}
+                          {isWithinRange && <LineContainer color={color} />}
                         </TimelineCell>
                       )
                     })}