diff --git a/package.json b/package.json
index 3ac552c13fbaafc9e0f57ee27ce1f6efcde6b737..2ce010bec1a14af1541b09b1ff6efaebcc1f6565 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
"dotenv": "^10.0.0",
"react": "^17.0.2",
"react-datepicker": "^4.2.1",
+ "react-device-detect": "^2.0.1",
"react-dom": "^17.0.2",
"react-dotenv": "^0.1.3",
"react-loader-spinner": "^4.0.0",
diff --git a/src/App.tsx b/src/App.tsx
index 5c9d0f0f5675a7a39f31c0939b0fde5103d695c7..c262a926635148c69adf5c9215ccc8d784fac27a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -5,7 +5,7 @@ import OverviewPage from "./pages/overviewPage/overview";
import { GlobalCommitContext } from './context/commitPageContext';
import { useState } from 'react';
import IssuePage from './pages/issueListPage/issuePage';
-import { CommitPage } from './pages/commitGraphPage/CommitPage';
+import { CommitPage } from './pages/commitGraphPage/commitPage';
import { IssueGraphPage } from './pages/issueGraphPage/issueGraphPage';
import CommitPageWrapper from "./pages/commitListPage/commitPageWrapper"
import GobackButton from './components/goBack/goBackButton';
diff --git a/src/assets/data_visualization.jpeg b/src/assets/data_visualization.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..ec1e52b40ebc2f0c3a0f665fc7c3625a3cc27d2a
Binary files /dev/null and b/src/assets/data_visualization.jpeg differ
diff --git a/src/components/goBack/goBackButton.module.css b/src/components/goBack/goBackButton.module.css
index def165a329288c2f943d5b5fbafc000b51caa50c..dc54569d769e421f63cceeba2aa0c2c2a70de083 100644
--- a/src/components/goBack/goBackButton.module.css
+++ b/src/components/goBack/goBackButton.module.css
@@ -7,8 +7,19 @@
left: 30px;
top: 30px;
cursor: pointer;
+ text-align: center;
}
-.button:hover{
+@media screen and (max-width: 800px) {
+ .button {
+ height: 60px;
+ width: 80px;
+ margin: 0px;
+ left: 15px;
+ top: 15px;
+ }
+}
+
+.button:hover {
background-color: #f3d295;
}
\ No newline at end of file
diff --git a/src/pages/commitGraphPage/CommitPage.module.scss b/src/pages/commitGraphPage/commitPage.module.css
similarity index 99%
rename from src/pages/commitGraphPage/CommitPage.module.scss
rename to src/pages/commitGraphPage/commitPage.module.css
index 064930c4ba585392aa47cd7eeaa99ed4d9cb152f..e154dda10beb2b0f10bf6e509829e24b15facca4 100644
--- a/src/pages/commitGraphPage/CommitPage.module.scss
+++ b/src/pages/commitGraphPage/commitPage.module.css
@@ -8,3 +8,4 @@
width: 80%;
margin-left: 10%;
}
+
diff --git a/src/pages/commitGraphPage/CommitPage.tsx b/src/pages/commitGraphPage/commitPage.tsx
similarity index 95%
rename from src/pages/commitGraphPage/CommitPage.tsx
rename to src/pages/commitGraphPage/commitPage.tsx
index 5392c5d38574cac8be6f319b239d00cd94a71e6a..342ad877edd34c688931784717ef2b88241ec007 100644
--- a/src/pages/commitGraphPage/CommitPage.tsx
+++ b/src/pages/commitGraphPage/commitPage.tsx
@@ -2,7 +2,7 @@
import { BarChart } from '../../components/graphs/barChart/barChart';
import { PieChart } from '../../components/graphs/pieChart/pieChart';
import { useGitlabApi } from '../../utils/gitlab_api_service';
-import styles from './CommitPage.module.scss';
+import styles from './commitPage.module.css';
import { queryTypes, Commit } from '../../utils/queryType'
import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";
import Loader from "react-loader-spinner";
diff --git a/src/pages/commitListPage/commitListPage.module.css b/src/pages/commitListPage/commitListPage.module.css
index 37fb24d77e38a70ce6e1489795fa7a31c320b98a..124c61609a84a61a9371673a1e6c1cb1b0143283 100644
--- a/src/pages/commitListPage/commitListPage.module.css
+++ b/src/pages/commitListPage/commitListPage.module.css
@@ -2,6 +2,7 @@
display: flex;
flex-direction: row;
justify-content: space-evenly;
+ align-items: center;
width: 40%;
margin-left: 30%;
}
diff --git a/src/pages/commitListPage/commitListPage.tsx b/src/pages/commitListPage/commitListPage.tsx
index 25c0240881ead5f89b1c2124c91bf2713da0bd4b..2e54adbb331a0080951c4983d052883f4f24222f 100644
--- a/src/pages/commitListPage/commitListPage.tsx
+++ b/src/pages/commitListPage/commitListPage.tsx
@@ -1,7 +1,8 @@
import React, {FC, useState} from 'react';
import {Commit} from "../../utils/queryType";
import Select, {SingleValue} from "react-select";
-import style from "./commitListPage.module.css"
+import style from "./commitListPage.module.css";
+import {anonymousAnimals} from "../../utils/victory/useVictory"
interface iSingleCommit {
@@ -18,16 +19,13 @@ const SingleCommit: FC<iSingleCommit> = (props) => {
<div className={style.SingleCommit}>
<h3>{props.title}</h3>
<div className={style.Description}>
- <b>Message: </b>
- <p>
- {props.message}
- </p>
</div>
<div className={style.Description}>
<b>Author: </b>
<p>
- {props.author_name} at {props.created_at.getUTCDate()}.{props.created_at.getUTCMonth()+1}
- - {props.created_at.getUTCHours()}:{props.created_at.getUTCMinutes()}
+ {props.author_name} at {props.created_at.getUTCDate()}.{props.created_at.getUTCMonth() + 1}
+ - {props.created_at.getUTCHours() + 2}:{props.created_at.getUTCMinutes().toString().length === 2
+ ? props.created_at.getUTCMinutes() : "0" + props.created_at.getUTCMinutes().toString()}
</p>
</div>
</div>)
@@ -40,9 +38,21 @@ interface commitProps {
const CommitComponent = (props: commitProps) => {
let commit: Commit[] = props.commits
+ let map = new Map<string,string>()
+ let mapIndex=0
+ function anonymize(name: string):string{
+ if (map.has(name)){
+ return map.get(name) as string
+ }
+ else{
+ map.set(name,anonymousAnimals[mapIndex])
+ mapIndex++
+ return map.get(name) as string
+ }
+ }
const commitList = commit?.map(c => <li><SingleCommit
- author_name={c.author_name}
+ author_name={anonymize(c.author_name)}
committer_name={c.committer_name}
created_at={new Date(c.created_at)}
id={c.id}
@@ -54,7 +64,7 @@ const CommitComponent = (props: commitProps) => {
<div>
<ul className={style.UlList}>
{commitList}
- {commitList?.length===0?<li>Opps! Too far, go back!</li>:<></>}
+ {commitList?.length === 0 ? <li>Opps! Too far, go back!</li> : <></>}
</ul>
</div>
);
diff --git a/src/pages/commitListPage/commitPageWrapper.tsx b/src/pages/commitListPage/commitPageWrapper.tsx
index 8fbbfeeb96d1039b4f356cc1227c2c2218a6ebc1..3f941adbbb79473c99eb270dd7cd3318c28b69e2 100644
--- a/src/pages/commitListPage/commitPageWrapper.tsx
+++ b/src/pages/commitListPage/commitPageWrapper.tsx
@@ -39,9 +39,9 @@ const CommitPageWrapper = () => {
<button className={style.Button} disabled={disablePrev} onClick={decrease}>
<i className={`${style.Arrow} ${style.Left}`}></i>
</button>
- <h4>
+ <h2>
{pageNumber}
- </h4>
+ </h2>
<button className={style.Button} disabled={disableNext} onClick={increase}>
<i className={`${style.Arrow} ${style.Right}`}></i>
</button>
diff --git a/src/pages/landingPage/landingPage.module.css b/src/pages/landingPage/landingPage.module.css
index 8dca7a0c75adf1db100c359c2f28290e56cd9d0a..c4eea44fdc4c49c19193f31bf1c13b45a2bdcff9 100644
--- a/src/pages/landingPage/landingPage.module.css
+++ b/src/pages/landingPage/landingPage.module.css
@@ -1,5 +1,9 @@
+.picture{
+ max-width: 550px;
+}
+
.inputField{
width: 50%;
height: 30px;
@@ -7,27 +11,64 @@
}
.inputWrapper{
- width: 70%;
- margin-left: 15%;
+ width: 100%;
+ height: 100%;
+ margin-left: 0%;
display: flex;
flex-direction: column;
+ background-color: #1C1644;
+ height: 100%;
}
form {
display: flex;
flex-direction: column;
-
}
-.defaultButton {
- margin: auto;
- padding: 5px;
- cursor: pointer;
+.buttonDiv{
+ margin-left: 20%;
+ width: 60%;
+ flex-direction: row;
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 50px;
+}
+
+button{
+ width: 140px;
+ height: 35px;
}
-.submitButton {
- background-color: lightgreen;
+.submitButton,.defaultButton {
padding: 5px;
margin: auto;
cursor: pointer;
-}
\ No newline at end of file
+ color: #DD904C;
+ border: solid #DD904C 2px;
+ background-color: #1C1644;
+}
+
+.submitButton:hover,.defaultButton:hover{
+ color: white;
+ background-color: #DD904C;
+}
+
+.submitButton:disabled {
+ background-color: lightgrey;
+ border: solid grey 2px;
+ color: black;
+ cursor: not-allowed;
+}
+
+
+@media screen and (max-width: 800px) {
+ .submitButton,.defaultButton {
+ margin-top: 10px;
+ margin-left: 5px;
+ margin-right: 5px;
+ height: 60px;
+ width: 80px;
+ left: 15px;
+ top: 15px;
+ }
+}
diff --git a/src/pages/landingPage/landingPage.tsx b/src/pages/landingPage/landingPage.tsx
index 05e7a03ba5450ab3bc4232d4df38af84f387b09e..fabad3f6e7f1b063fa9dda4383da15940f4ed759 100644
--- a/src/pages/landingPage/landingPage.tsx
+++ b/src/pages/landingPage/landingPage.tsx
@@ -6,7 +6,7 @@ import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import { ConnectionTest, queryTypes } from "../../utils/queryType";
import { useGitlabApi } from "../../utils/gitlab_api_service";
-import visualization from "../../assets/gitlab.jpeg";
+import visualization from "../../assets/data_visualization.jpeg";
const LandingPage = () => {
@@ -69,16 +69,18 @@ const LandingPage = () => {
return (
<div className={style.inputWrapper}>
- <img alt="visualization" src={visualization} style={{width: "80%", margin: "30px auto" }}/>
- <button className={style.defaultButton} onClick={()=> setDefaultValues()}>set default values</button>
+ <img className={style.picture} alt="visualization" src={visualization} style={{width: "80%", margin: "30px auto" }}/>
<form onSubmit={handleSubmit}>
<input className={style.inputField} value = {projectId} type="Text" onChange={e => setProjectId(e.target.value)} id="ProjektIDInput"
placeholder="ProjectId" required/>
<input className={style.inputField} value = {key} type="Text" onChange={e => setKey(e.target.value)} id="KeyInput"
placeholder="Key" required/>
- <button className={style.submitButton} type="submit" disabled={disableButton}>Use values</button>
- <ToastContainer autoClose={3000} />
+ <div className={style.buttonDiv}>
+ <button className={style.defaultButton} onClick={()=> setDefaultValues()}>Use default values</button>
+ <button className={style.submitButton} type="submit" disabled={disableButton}>Use current values</button>
+ </div>
</form>
+ <ToastContainer autoClose={2000} />
</div>
);
diff --git a/src/pages/overviewPage/Overview.tsx b/src/pages/overviewPage/overview.tsx
similarity index 100%
rename from src/pages/overviewPage/Overview.tsx
rename to src/pages/overviewPage/overview.tsx
diff --git a/src/utils/victory/useVictory.tsx b/src/utils/victory/useVictory.tsx
index dcfb40b618d3e7033bdbd142ead70b87bb219b06..0b5b823d7e7d9e749053bdb4b344eac970f8da0e 100644
--- a/src/utils/victory/useVictory.tsx
+++ b/src/utils/victory/useVictory.tsx
@@ -2,7 +2,7 @@ import { useState } from "react";
import { Commit, Issue } from "../queryType";
import { IGraphData, ICommitsPerDay, ICommitsPerMember } from "./types";
-const anonymousAnimals = [
+export const anonymousAnimals = [
"Tiger",
"Lion",
"Giraffe",
diff --git a/yarn.lock b/yarn.lock
index 90e8a46d0addbf11d8be2b2b4e970dd23239db95..8312d75f603d5f4e206949351050ce073d0dec55 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9727,6 +9727,13 @@ react-dev-utils@^11.0.3:
strip-ansi "6.0.0"
text-table "0.2.0"
+react-device-detect@^2.0.1:
+ version "2.0.1"
+ resolved "https://registry.yarnpkg.com/react-device-detect/-/react-device-detect-2.0.1.tgz#663530bafe1dad333b67eae4252556244f45c2fc"
+ integrity sha512-DrDKiKky/L/DSEJUw5CL2I38s/18zCLIoKP4pE4CyO1FyL6XhQZMIjHmv0pbYQBlfdKB+ZUXP53tWeLkt0eqJw==
+ dependencies:
+ ua-parser-js "^0.7.28"
+
react-dom@^17.0.2:
version "17.0.2"
resolved "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz"
@@ -11573,6 +11580,11 @@ typescript@^4.1.2:
resolved "https://registry.npmjs.org/typescript/-/typescript-4.4.3.tgz"
integrity sha512-4xfscpisVgqqDfPaJo5vkd+Qd/ItkoagnHpufr+i2QCHBsNYp+G7UAoyFl8aPtx879u38wPV65rZ8qbGZijalA==
+ua-parser-js@^0.7.28:
+ version "0.7.28"
+ resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.28.tgz#8ba04e653f35ce210239c64661685bf9121dec31"
+ integrity sha512-6Gurc1n//gjp9eQNXjD9O3M/sMwVtN5S8Lv9bvOYBfKfDNiIIhqiyi01vMBO45u4zkDE420w/e0se7Vs+sIg+g==
+
unicode-canonical-property-names-ecmascript@^1.0.4:
version "1.0.4"
resolved "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz"