Skip to content
Snippets Groups Projects
Commit 95049fc5 authored by Henrik Brun Fevang's avatar Henrik Brun Fevang
Browse files

Styling improvements.

parent 8e011b05
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
src/App.tsx
+ 11
− 10
View file @ 95049fc5
......@@ -5,6 +5,8 @@ import OverviewPage from "./pages/overviewPage/Overview";
import { GlobalCommitContext } from './context/commitPageContext';
import { useState } from 'react';
import IssuePage from './pages/issuePage';
import { CommitPage } from './pages/commitGraphPage/CommitPage';
import { IssueGraphPage } from './pages/issueGraphPage/issueGraphPage';
function App() {
const [testContext, setTestContext] = useState<string>('Admin');
......@@ -26,18 +28,17 @@ function App() {
<Route exact path={"/issuelist"}>
<IssuePage />
</Route>
{/* <Route exact path={"/issuegraph"}>
</GlobalCommitContext.Provider>
</Route> */}
{/* <Route exact path={"/commitlist"}>
<Route exact path={"/issuegraph"}>
<IssueGraphPage />
</Route>
<Route exact path={"/commitlist"}>
</Route> */}
{/* <Route exact path={"/commitgraph"}>
</Route>
<Route exact path={"/commitgraph"}>
<GlobalCommitContext.Provider value = {{testContext, setTestContext}}>
<CommitPage />
</GlobalCommitContext.Provider>
</Route> */}
</Route>
<Redirect to={"/"}/>
</Switch>
</div>
......
src/components/graphs/barChart/barChart.module.scss
+ 7
− 7
View file @ 95049fc5
......@@ -19,10 +19,10 @@
justify-content: space-evenly;
}
.datePickerContainer {
display: flex;
flex-direction: column;
justify-content: space-evenly;
height: 30%;
width: 50%;
}
// .datePickerContainer {
// display: flex;
// flex-direction: column;
// justify-content: space-evenly;
// height: 30%;
// width: 50%;
// }
src/components/graphs/barChart/barChart.tsx
+ 14
− 11
View file @ 95049fc5
......@@ -5,30 +5,26 @@ import styles from './barChart.module.scss';
import DatePicker from 'react-datepicker';
import "react-datepicker/dist/react-datepicker.css"
import { ICommitsPerDay } from "../../../utils/victory/types";
import { Commit } from '../../../utils/queryType';
import { Commit, Issue } from '../../../utils/queryType';
interface IBarChartProps {
data: Commit[],
data: Commit[] | Issue[],
title: string,
}
export const BarChart = (props: IBarChartProps) => {
const { getCommitsPerDayBarChartConfig } = useVictory(props.data);
const { getEntriesPerDayBarChartData } = useVictory(props.data);
const [currentData, setCurrentData] = useState<ICommitsPerDay[]>();
const [startDate, setStartDate] = useState<Date>(new Date("2021-09-19"));
const [endDate, setEndDate] = useState<Date>(new Date("2021-09-22"));
const [startDate, setStartDate] = useState<Date>(new Date());
const [endDate, setEndDate] = useState<Date>(new Date());
useEffect(() => {
let commitsPerDay = getCommitsPerDayBarChartConfig(startDate, endDate);
let commitsPerDay = getEntriesPerDayBarChartData(startDate, endDate);
setCurrentData(commitsPerDay);
}, [startDate, endDate])
useEffect(() => {
console.log(currentData);
}, [currentData])
return (
<div className={styles.container}>
<h2>{props.title}</h2>
......@@ -36,13 +32,20 @@ export const BarChart = (props: IBarChartProps) => {
<label>Start date:</label>
<DatePicker
selected={startDate}
selectsStart
startDate={startDate}
endDate={endDate}
onChange={(date) => {
date instanceof Date ? setStartDate(date) : setStartDate(new Date("2021-09-19"))
date instanceof Date ? setStartDate(date) : setStartDate(new Date())
}}
/>
<label>End date:</label>
<DatePicker
selected={endDate}
selectsEnd
startDate={startDate}
endDate={endDate}
minDate={startDate}
onChange={(date) => {
date instanceof Date ? setEndDate(date) : setEndDate(new Date())
}}
......
src/components/graphs/pieChart/pieChart.module.scss
+ 13
− 3
View file @ 95049fc5
......@@ -6,12 +6,19 @@
width: 70%;
}
@media only screen and (max-width: 500px){
[class*="pieChartContainer"] {
width: 100%;
}
}
.inputContainer {
display: flex;
flex-direction: column;
justify-content: space-evenly;
height: fit-content;
width: 40%;
width: 80%;
max-width: 300px;
}
.checkboxContainer {
......@@ -19,7 +26,10 @@
flex-direction: row;
justify-content: space-between;
background-color: #F5CA7B;
padding: 2%;
font-size: 1rem;
padding: 4%;
font-size: 1.2rem;
font-weight: 600;
border-radius: 5px;
margin-bottom: 10px;
color: #2a2a2a;
}
src/components/graphs/pieChart/pieChart.tsx
+ 11
− 13
View file @ 95049fc5
import { useEffect, useState } from 'react';
import { VictoryContainer, VictoryPie } from 'victory';
import { Commit } from '../../../utils/queryType';
import { Commit, Issue } from '../../../utils/queryType';
import { useVictory } from '../../../utils/victory/useVictory';
import styles from './pieChart.module.scss';
import Switch from "react-switch";
interface IPieChartProps {
data: Commit[],
data: Commit[] | Issue[],
title: string,
}
export const PieChart = (props: IPieChartProps) => {
const { getCommitsPerMemberPieChartData, getAnonAnimals, colorScaleAnimals } = useVictory(props.data);
const { getEntriesPerMemberPieChartData, getAnonAnimals, colorScaleAnimals } = useVictory(props.data);
const [selectedAnimals, setSelectedAnimals] = useState(
getAnonAnimals().map(animal => { return {animal: animal, selected: true}}))
const [currentData, setCurrentData] = useState(getCommitsPerMemberPieChartData(selectedAnimals));
const [currentData, setCurrentData] = useState(getEntriesPerMemberPieChartData(selectedAnimals));
const changeSelectedAnimals = (animalToChange: string) => {
setSelectedAnimals(prevState =>
......@@ -29,12 +30,11 @@ export const PieChart = (props: IPieChartProps) => {
const animalCheckboxes = () : JSX.Element[] => {
let checkboxes = getAnonAnimals().map(animal => {
return (
<div className={styles.checkboxContainer}>
<div className={styles.checkboxContainer} key={animal}>
<label>{animal}</label>
<input
key={animal}
type="checkbox"
checked={selectedAnimals.find(sa => sa.animal === animal)?.selected}
<Switch
onColor="#fae7c2"
checked={selectedAnimals.find(sa => sa.animal === animal)?.selected ?? false}
onChange={() => changeSelectedAnimals(animal)}
/>
</div>
......@@ -44,9 +44,7 @@ export const PieChart = (props: IPieChartProps) => {
}
useEffect(() => {
console.log("Change");
setCurrentData(getCommitsPerMemberPieChartData(selectedAnimals))
console.log(currentData);
setCurrentData(getEntriesPerMemberPieChartData(selectedAnimals))
}, [selectedAnimals])
return (
......@@ -57,7 +55,7 @@ export const PieChart = (props: IPieChartProps) => {
</div>
<VictoryPie
data={currentData[0]}
containerComponent={<VictoryContainer responsive={false}/>}
containerComponent={<VictoryContainer responsive={true}/>}
x="member"
y="amount"
colorScale={colorScaleAnimals}
......
yarn.lock
+ 22
− 1
View file @ 95049fc5
......@@ -1851,6 +1851,13 @@
dependencies:
"@types/react" "*"
"@types/react-loader-spinner@^4.0.0":
version "4.0.0"
resolved "https://registry.yarnpkg.com/@types/react-loader-spinner/-/react-loader-spinner-4.0.0.tgz#20e58530c120529f3e7d9c26f950b9c80575f080"
integrity sha512-FKW/yD3KwpydC8gsLmdWCOW0v/aezTvxcqqU0umNHa4QNkVF37UgOeh6DgXIPkxRm/m+6fcgW9XYK6Ff+HCd3A==
dependencies:
react-loader-spinner "*"
"@types/react-router-dom@^5.1.9":
version "5.1.9"
resolved "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.1.9.tgz"
......@@ -9125,7 +9132,7 @@ prompts@2.4.0, prompts@^2.0.1:
kleur "^3.0.3"
sisteransi "^1.0.5"
prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
version "15.7.2"
resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz"
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
......@@ -9387,6 +9394,13 @@ react-is@^17.0.1:
resolved "https://registry.npmjs.org/react-is/-/react-is-17.0.1.tgz"
integrity sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA==
react-loader-spinner@*, react-loader-spinner@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/react-loader-spinner/-/react-loader-spinner-4.0.0.tgz#43d9e71b0574219f64216933c28ef5faa12262f6"
integrity sha512-RU2vpEej6G4ECei0h3q6bgLU10of9Lw5O+4AwF/mtkrX5oY20Sh/AxoPJ7etbrs/7Q3u4jN5qwCwGLRKCHpk6g==
dependencies:
prop-types "^15.7.2"
react-onclickoutside@^6.10.0:
version "6.12.0"
resolved "https://registry.yarnpkg.com/react-onclickoutside/-/react-onclickoutside-6.12.0.tgz#c63db2e3c2c852b288160cdb6cff443604e28db4"
......@@ -9520,6 +9534,13 @@ react-spinners@^0.11.0:
dependencies:
"@emotion/react" "^11.1.4"
react-switch@^6.0.0:
version "6.0.0"
resolved "https://registry.yarnpkg.com/react-switch/-/react-switch-6.0.0.tgz#bd4a2dea08f211b8a32e55e8314fd44bc1ec947e"
integrity sha512-QV3/6eRK5/5epdQzIqvDAHRoGLbCv/wDpHUi6yBMXY1Xco5XGuIZxvB49PHoV1v/SpEgOCJLD/Zo43iic+aEIw==
dependencies:
prop-types "^15.7.2"
react-toastify@^8.0.3:
version "8.0.3"
resolved "https://registry.yarnpkg.com/react-toastify/-/react-toastify-8.0.3.tgz#7fbf65f69ec357aab8dd03c1496f9177aa92409a"
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment