From d6e9718e1c22be43402217cb9f537147578d5316 Mon Sep 17 00:00:00 2001
From: yomote <yutaroomote@gmail.com>
Date: Sun, 12 May 2024 14:44:31 +0900
Subject: [PATCH] feat: add progress display to project tile

---
 src/components/Tiles/Tile/Tile.tsx | 11 ++++++++++-
 src/mock/appMock.ts                |  4 +++-
 src/types/global.ts                |  4 ++++
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/components/Tiles/Tile/Tile.tsx b/src/components/Tiles/Tile/Tile.tsx
index 00ee8899..95e70556 100644
--- a/src/components/Tiles/Tile/Tile.tsx
+++ b/src/components/Tiles/Tile/Tile.tsx
@@ -30,7 +30,16 @@ const Tile: FC<TileProps> = ({ row, data, zoom, onTileClick }) => {
       style={{
         left: `${x}px`,
         top: `${y}px`,
-        backgroundColor: `${data.bgColor ?? tileDefaultBgColor}`,
+        background:
+          data.progress === undefined
+            ? `${data.bgColor ?? tileDefaultBgColor}`
+            : `linear-gradient(
+              90deg,
+              ${data.bgColor ?? tileDefaultBgColor} 0%,
+              ${data.bgColor ?? tileDefaultBgColor} ${data.progress}%,
+              #b8c2cc ${data.progress}%,
+              #b8c2cc 100%
+            )`,
         width: `${width}px`,
         color: getTileTextColor(data.bgColor ?? "")
       }}
diff --git a/src/mock/appMock.ts b/src/mock/appMock.ts
index b584f6e5..e45dd8a2 100644
--- a/src/mock/appMock.ts
+++ b/src/mock/appMock.ts
@@ -46,6 +46,7 @@ export const generateProjects = (
 
     for (let projectIndex = 0; projectIndex < projectsPerYear; projectIndex++) {
       const { startDate, endDate } = getRandomDates(yearIndex);
+      const progress = Math.ceil(Math.random() * 100);
       data.push({
         id: faker.datatype.uuid(),
         startDate,
@@ -54,7 +55,8 @@ export const generateProjects = (
         title,
         subtitle: getRandomWords(),
         description: getRandomWords(amountOfDscWords),
-        bgColor
+        bgColor,
+        progress
       });
     }
   }
diff --git a/src/types/global.ts b/src/types/global.ts
index 097875ba..fbd2e9fa 100644
--- a/src/types/global.ts
+++ b/src/types/global.ts
@@ -86,6 +86,10 @@ export type SchedulerProjectData = {
    * Background color of the tile, given in rgb color model. If not given, default color (rgb(114, 141,226 )) is set. Optional
    */
   bgColor?: string;
+  /**
+   * Progress of the project. Set in percent from 0 to 100. Optional
+   */
+  progress?: number;
 };
 
 export type Day = {