feat: create timeline

digitable-lol · Aug 31, 2024 · 088bfa8 · 088bfa8
1 parent 6d1c99d
commit 088bfa8
Show file tree

Hide file tree

Showing 3 changed files with 182 additions and 0 deletions.
diff --git a/application/frontend/src/components/ReportTimeline/ReportTimeline.styled.ts b/application/frontend/src/components/ReportTimeline/ReportTimeline.styled.ts
@@ -0,0 +1,59 @@
+import { Box, TableCell, Typography } from "@mui/material"
+import { styled } from "@mui/material/styles"
+
+const ROW_HEIGHT = 60
+
+export const ScrollableBox = styled(Box)`
+  overflow-x: auto;
+  display: flex;
+  flex-direction: column;
+`
+
+export const StickyColumnCell = styled(TableCell)`
+  position: sticky;
+  left: 0;
+  background-color: #f5f5f5;
+  z-index: 2;
+  width: 200px;
+  height: ${ROW_HEIGHT}px;
+  display: flex;
+  align-items: center;
+  padding: 16px;
+  border-right: 1px solid #ddd;
+`
+
+export const StickyHeaderCell = styled(TableCell)`
+  position: sticky;
+  top: 0;
+  background-color: #f5f5f5;
+  z-index: 3;
+  width: 60px;
+  height: ${ROW_HEIGHT}px;
+  border-bottom: 1px solid #ddd;
+`
+
+export const TimelineCell = styled(TableCell)`
+  padding: 0;
+  border: none;
+  height: ${ROW_HEIGHT}px;
+  position: relative;
+`
+
+export const LineContainer = styled(Box)`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: ${(props: { color: string }) => props.color};
+  border-radius: 4px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+`
+
+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;
+`
diff --git a/application/frontend/src/components/ReportTimeline/ReportTimeline.tsx b/application/frontend/src/components/ReportTimeline/ReportTimeline.tsx
@@ -0,0 +1,122 @@
+import React from "react"
+
+import {
+  Box,
+  Container,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Typography,
+} from "@mui/material"
+
+import {
+  HeaderText,
+  LineContainer,
+  ScrollableBox,
+  StickyColumnCell,
+  StickyHeaderCell,
+  TimelineCell,
+} from "./ReportTimeline.styled"
+
+type Report = {
+  id: number
+  name: string
+  startDate: Date
+  endDate: Date
+  color: string
+  stage: string
+}
+
+type ReportTimelineProps = {
+  reports: Report[]
+  startDate: Date
+  endDate: Date
+}
+
+const daysOfWeek = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
+
+const getDaysArray = (start: Date, end: Date): Date[] => {
+  const arr = []
+  const dt = new Date(start)
+  while (dt <= end) {
+    arr.push(new Date(dt))
+    dt.setDate(dt.getDate() + 1)
+  }
+  return arr
+}
+
+export const ReportTimeline: React.FC<ReportTimelineProps> = ({ reports, startDate, endDate }) => {
+  const days = getDaysArray(startDate, endDate)
+  const adjustedDaysOfWeek = [...daysOfWeek.slice(1), daysOfWeek[0]]
+
+  return (
+    <Container>
+      <Box display="flex" flexDirection="row">
+        <Box>
+          <TableContainer>
+            <Table>
+              <TableHead>
+                <TableRow>
+                  <StickyHeaderCell>
+                    <Typography variant="body1" fontWeight="bold">
+                      Название отчета
+                    </Typography>
+                  </StickyHeaderCell>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {reports.map((report) => (
+                  <TableRow key={report.id}>
+                    <StickyColumnCell>
+                      <Typography variant="body1">{report.name}</Typography>
+                    </StickyColumnCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        </Box>
+
+        <ScrollableBox>
+          <TableContainer>
+            <Table>
+              <TableHead>
+                <TableRow>
+                  <TableCell />
+                  {days.map((day, index) => (
+                    <StickyHeaderCell key={index} align="center">
+                      <HeaderText variant="body2">{adjustedDaysOfWeek[day.getDay()]}</HeaderText>
+                      <Typography variant="body2">{day.getDate()}</Typography>
+                    </StickyHeaderCell>
+                  ))}
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {reports.map((report) => (
+                  <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))
+                      return (
+                        <TimelineCell key={index}>
+                          {isWithinRange && <LineContainer color={report.color} />}
+                        </TimelineCell>
+                      )
+                    })}
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        </ScrollableBox>
+      </Box>
+    </Container>
+  )
+}
+
+export default ReportTimeline
diff --git a/application/frontend/src/components/ReportTimeline/index.ts b/application/frontend/src/components/ReportTimeline/index.ts
@@ -0,0 +1 @@
+export { ReportTimeline } from "./ReportTimeline"