Created component for displaying Victory bar chart.

public/index.html

@@ -13,6 +13,7 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link href="https://fonts.googleapis.com/css?family=Work+Sans:400,700&display=swap" rel="stylesheet">
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

src/components/graphs/barChart.module.scss

+
+.wrapper {
+    width: 100%;
+    align-self: center;
+}
+
+@media only screen and (max-width: 500px){
+    [class*="wrapper"] {
+        width: 100%;
+    }
+}
+
+.container {
+    width: 100%;
+    height: 100%;
+}
+
+.datePickerContainer {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    height: 30%;
+    width: 50%;
+    margin-left: 25%;
+}
+
+.react-datepicker-wrapper {
+    background-color: red;
+}

src/components/graphs/barChart.module.scss.d.ts

+
+export const wrapper: string;
+export const container: string;
+export const datePickerContainer: string;

src/components/graphs/barChart.tsx

+import { useEffect, useState } from "react";
+import { VictoryBar, VictoryChart, VictoryLabel, VictoryTheme } from "victory";
+import { useVictory } from "../../utils/victory/useVictory";
+import styles from './barChart.module.scss';
+import DatePicker from 'react-datepicker';
+import "react-datepicker/dist/react-datepicker.css"
+import { ICommitData, ICommitsPerDay } from "../../utils/victory/types";
+
+interface IBarChartProps {
+    data: ICommitData[],
+    title: string,
+}
+
+
+export const BarChart = (props: IBarChartProps) => {
+
+    const [getCommitsPerDayBarChartConfig] = 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"));
+
+    useEffect(() => {
+        let commitsPerDay = getCommitsPerDayBarChartConfig(startDate, endDate);
+        setCurrentData(commitsPerDay);
+    }, [startDate, endDate])
+
+    useEffect(() => {
+        console.log(currentData);
+    }, [currentData])
+
+    return (
+          <div className={styles.container}>
+            <div className={styles.datePickerContainer}>
+                <DatePicker
+                    selected={startDate}
+                    onChange={(date) => {
+                        date instanceof Date ? setStartDate(date) : console.log(startDate)
+                    }}
+                />
+                <DatePicker
+                    selected={endDate}
+                    onChange={(date) => {
+                        date instanceof Date ? setEndDate(date) : setEndDate(new Date())
+                    }}
+                />
+            </div>
+            <div className={styles.wrapper}>
+              <h2>{props.title}</h2>
+              <VictoryChart
+                domainPadding={20}
+                theme={VictoryTheme.material}
+                style={{ background: { fill: '#3d3d3d'}}}>
+                <VictoryBar
+                    data={currentData}
+                    x="date"
+                    y="amount"
+                    style={{ data: {fill: 'orange'}}}/>
+              </VictoryChart>
+          </div>
+        </div>
+    )
+}
\ No newline at end of file

src/index.css

@@ -11,3 +11,13 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: "Work Sans";
+  text-align: center;
+}