feat: add progress display to project tile

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 ?? "")
       }}

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
       });
     }
   }

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 = {