Github activity commit

amircp · Jun 20, 2024 · 2b5c669 · 2b5c669
1 parent 6006169
commit 2b5c669
Show file tree

Hide file tree

Showing 8 changed files with 576 additions and 0 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/dist/index.html b/dist/index.html
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="src/style.css">
+  </head>
+  <body>
+    <div id="root"></div>
+
+    <script src="src/index.jsx"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "react": "18.0.0",
+    "react-dom": "18.0.0"
+  }
+}
diff --git a/src/App.jsx b/src/App.jsx
@@ -0,0 +1,109 @@
+import React, { useState, useEffect } from 'react';
+import ActivityList  from './activity'
+
+/*
+  HackerRank  Challenge for front end.
+  by Amir Canto. January 4, 2024
+*/
+
+export function App(props) {
+
+  const [commitTable, setCommitTable] = useState({})
+  const [commitDays, setCommitDays] = useState([])
+
+  const decemberMonth = () => {
+    // i don't remember the function used to generate the days for January in the challenge
+    // therefore i created this one that returns an array containing 31 days for December.
+    let date = []
+    for(let i = 1; i < 31; i++){
+       date.push("2023-12-"+ padNumber(i))
+    }
+    return date;
+  }
+
+  const padNumber = (num) => {
+     // to pad numbers below 10 and return them as string.
+    if(num < 10) {
+      return "0"+num
+    }
+    return num;
+  }
+
+  useEffect( () => {
+    // this would be the fetch for API
+    const groupCommits = (commitList) => {
+       // This could turn into a custom hook something like "useMapDays" or something.
+    let groupByDate = {}
+
+    for(commit of commitList)  {
+
+       if(groupByDate[commit.date]) {
+        groupByDate[commit.date] += 1
+      } else {
+        /// undefined
+         groupByDate[commit.date] = 1
+      }
+
+    }   
+    return groupByDate;
+  }
+    // Creation of hash table with dates -> counted commits
+    setCommitTable(groupCommits(ActivityList))
+    const workingDays = decemberMonth()
+    setCommitDays(workingDays)
+
+  },[])
+
+  const colorBoxClass = (commit) => {
+  // Square box class selector
+  // same as i wrote in the interview
+      let squareClass = "square"
+      let squareColor =  ""
+
+      if(commit < 1){
+        squareColor = "grey"
+      } else if(commit >= 1 && commit <= 3) {
+          squareColor = "green"
+      } else if(commit >= 4 && commit <= 6) {
+        squareColor = "blue"
+      } else if(commit >= 7) {
+         squareColor = "red"
+      }
+
+      return squareClass += " " + squareColor
+  }
+
+  const Square = ({day}) => {
+     return (<div key={day} className={commitTable[day] === undefined ? colorBoxClass(0) : colorBoxClass(commitTable[day])}></div>)
+  }
+
+  const LabelSquare = ({day}) => <span className="commit-date"> {day}</span> 
+
+  const Commit = ({day}) => { 
+    return (
+      <div key={day} className="commit">
+          <span key={day} className="tooltip">{commitTable[day] === undefined ? 0 : commitTable[day]} commits</span>
+          <Square day={day} />
+          <LabelSquare day={day} />
+      </div>)
+  }
+
+  const ActivityDiagram = ({data}) => {
+    return (
+       <div className='container'>
+        {
+         data.map((day, i) => (
+            <Commit key={i} day={day} />
+         ))
+        }
+      </div>
+    )
+  }
+
+  return (
+    <div className='App' aria-labelledby="activity-heading">
+      <h1 id="activity-heading">Activity Commits Diagram</h1>
+      <ActivityDiagram data={commitDays} />
+    </div>
+  );
+}
diff --git a/src/activity.jsx b/src/activity.jsx
@@ -0,0 +1,94 @@
+  const ActivityList = [{
+
+    commit: "1dd6d8a8f9d76c2d62d2845d13fdf1e15a9e1d26",
+    author: "Amir Canto",
+    date: "2023-12-01",
+    description: "Add historica balance model"
+  }, 
+  {
+    commit: "10048b8bb53033296180122c854c3c6e112e4189",
+    author: "Amir Canto",
+    date: "2023-12-02",
+    description: "Add historica balance model"
+  },
+  {
+    commit: "261e9a5defce285246aec11d42be9c3b37af75ba",
+    author: "Amir Canto",
+    date: "2023-12-09",
+    description: "Add historica balance model"
+  },
+  {
+    commit: "aef0c13cd4566363fb90f2f971d9780738884716",
+    author: "Amir Canto",
+    date: "2023-12-01",
+    description: "Add historica balance model"
+  },
+  {
+    commit: "098964f3acab059351df2387c9650309ebc7b218",
+    author: "Amir Canto",
+    date: "2023-12-10",
+    description: "Add historica balance model"
+  },
+  {
+    commit: "098964f3aca4059351df2387c9650309ebc7b218",
+    author: "Amir Canto",
+    date: "2023-12-10",
+    description: "Add historica balance model"
+  },
+  {
+    commit: "098964aca4059351df2387c9650309ebc7b218",
+    author: "Amir Canto",
+    date: "2023-12-10",
+    description: "Add historica balance model"
+  },
+    {
+    commit: "098964aca4059351df2387c9650309ebc7b218",
+    author: "Amir Canto",
+    date: "2023-12-10",
+    description: "Add historica balance model"
+  },
+  {
+    commit: "098964aca405932df2387c9650309ebc7b218",
+    author: "Amir Canto",
+    date: "2023-12-25",
+    description: "Add historica balance model"
+  },
+   {
+    commit: "aef0c13cd4566363fb90f2f971d9780738884716",
+    author: "Amir Canto",
+    date: "2023-12-25",
+    description: "Add historica balance model"
+  },
+   {
+    commit: "aef0c13cd4566363fb90f2f971d9780738884716",
+    author: "Amir Canto",
+    date: "2023-12-25",
+    description: "Add historica balance model"
+  }, {
+    commit: "aef0c13cd4566363fb90f2f971d9780738884716",
+    author: "Amir Canto",
+    date: "2023-12-25",
+    description: "Add historica balance model"
+  },
+   {
+    commit: "aef0c13cd4566363fb90f2f971d9780738884716",
+    author: "Amir Canto",
+    date: "2023-12-25",
+    description: "Add historica balance model"
+  },
+   {
+    commit: "aef0c13cd4566363fb90f2f971d9780738884716",
+    author: "Amir Canto",
+    date: "2023-12-25",
+    description: "Add historica balance model"
+  }
+  , {
+    commit: "aef0c13cd4566363fb90f2f971d9780738884716",
+    author: "Amir Canto",
+    date: "2023-12-25",
+    description: "Add historica balance model"
+  }]
+
+
+
+export default ActivityList;
diff --git a/src/index.jsx b/src/index.jsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+
+import { App } from './App.jsx'
+
+ReactDOM.createRoot( 
+  document.querySelector('#root')
+).render(<App />)
diff --git a/src/style.css b/src/style.css
@@ -0,0 +1,77 @@
+/*
+Colors used for square color background are not the same as the challenge..
+i don't remember the exact color were but used some similar to them like green, blue, red and grey.
+*/
+
+body {
+  background: white; /* Make it white if you need */
+  padding: 10 24px;
+  margin: 10;
+  height: 100vh;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
+.App {
+  color: #72a24d;
+  min-width:100vw;
+  min-height: 100vh;
+}
+.container {
+  width: fit-content;
+  height: auto;
+  display: flex;
+  gap: 0.375em;
+  padding: 0.625em;
+  border: 1px solid rgb(208, 206, 206);
+}
+.square {
+  width: 1.45em;
+  height: 1.45em;
+  flex-direction: row;
+}
+.green {
+  background-color:  rgb(0, 207, 0); 
+}
+.blue {
+  background-color:  rgb(47, 118, 241); 
+
+}
+.red {
+  background-color:  rgb(241, 66, 66); 
+}
+.grey {
+   background-color: rgb(208, 206, 206);
+}
+.commit-date {
+  writing-mode: vertical-rl;
+  transform: rotate(-16deg);
+  color: black;
+  font-size: 0.70rem;
+  margin-left: 1em;
+  margin-top: 0.25em;
+}
+#activity-heading {
+  color: black; 
+}
+.tooltip {
+  visibility: hidden;
+  width: auto;
+  background-color: black;
+  color: #fff;
+  text-align: center;
+  border-radius: 5px;
+  padding: 0.3125em;
+  font-weight: normal;
+  font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+  font-size: 0.75rem;
+  position: absolute;
+  z-index: 1;
+  margin-top: -2em;
+  margin-left: -1em;
+
+}
+.commit:hover .tooltip {
+    visibility: visible;
+}