Merge branch 'frontendstudygroup:master' into master

Author: Priyami

src/components/Api/GitApi.css

@@ -0,0 +1,10 @@
+.b-chart
+{
+    display: flex;
+    justify-content:center;
+}
+
+.title
+{
+  justify-content: flex-start;
+}

src/components/Api/GitApi.js

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react";
 import Bubblechart from "../Resources/Bubblechart";
+import "./GitApi.css";
 
 const GitApi = () => {
 
@@ -25,10 +26,9 @@ const GitApi = () => {
 
 return (
 
-  <div>
-    
-    <Bubblechart data = {contributor}></Bubblechart>
-    
+  <div className = "b-chart">
+    <h1 className="b-title">Contributors</h1>
+    <Bubblechart  data = {contributor}></Bubblechart>
   </div>
 );
 };

src/components/Footer/Footer.css

@@ -31,6 +31,11 @@
 .info > a {
   color: #71b6f6;
 }
+.info .contributor {
+  color: #71b6f6;
+  text-decoration: underline;
+  cursor: pointer;
+}
 
 .copyright > p {
   color: #a3a9a4;

src/components/Footer/Footer.js

@@ -1,9 +1,12 @@
 import React from 'react';
 import './Footer.css'
 import WWCodeFrontEnd from '../../assets/images/WWCode-Logo.png'
+import { useHistory } from 'react-router-dom';
 
 
 export default function Footer(){
+    const history = useHistory();
+
     return(
         <div className="footer">
             <div className="footer-items">
@@ -42,6 +45,9 @@ export default function Footer(){
             <a href="https://www.womenwhocode.com/frontend"
              target="_blank"
              rel="noopener noreferrer">https://www.womenwhocode.com/frontend</a>
+            
+             <p className="contributor" onClick={() => history.push('/contributor')}>contributors
+             </p>
              </div>
              </div>
 

src/components/Resources/Bubblechart.js

@@ -5,39 +5,39 @@ import "./Bubblechart.css";
 
 const Bubblechart = (aData) => {
   let jsonToDisplay = { "children":[...aData.data] };
-  var diameter = 1000,
+  let diameter = 1000,
     color = d3.scaleOrdinal(["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf"]);
-  var bubble = d3.pack()
+  let bubble = d3.pack()
     .size([diameter, diameter])
     .padding(2);
 
-  var margin = {
+  let margin = {
     left: 100,
     right: 100,
     top: 0,
     bottom: 0
   }
 
-  var svg = d3.select('#chart').append('svg')
+  let svg = d3.select('#chart').append('svg')
     .attr('viewBox', '0 0 ' + (diameter + margin.right) + ' ' + diameter)
     .attr('width', (diameter + margin.right))
     .attr('height', diameter)
     .attr('class', 'chart-svg');
 
 
-  var root = d3.hierarchy(jsonToDisplay)
+  let root = d3.hierarchy(jsonToDisplay)
     .sum(function (d) { return d.id })
     .sort(function (a, b) { return b.id - a.id });
 
 
   bubble(root);
 
-  var node = svg.selectAll('.node')
+  let node = svg.selectAll('node')
     .data(root.children)
     .enter()
     .append('g').attr('class', 'node')
-    .attr('transform', function (d) { return 'translate(' + d.x + ' ' + d.y + ')'; })
-    .append('g').attr('class', 'graph');
+    .attr('transform', function (d) {return 'translate(' + d.x + ' ' + d.y + ')'; })
+
 
   node.append("circle")
     .attr('r', function (d) {

src/components/Router.js

@@ -8,7 +8,6 @@ import SingleResource from "./SingleResource/SingleResource";
 import Contact from "./ContactUs/Contact";
 import About from "./About/About";
 import TableView from  "./Resources/TableView";
-import Bubblechart from "./Resources/Bubblechart";
 import GitApi from "./Api/GitApi";
 
 
@@ -24,8 +23,7 @@ const Router = () => (
       <Route exact path="/contact" component={Contact} />
       <Route exact path="/about" component={About} />
       <Route exact path="/TableView" component={TableView} />
-      <Route exact path="/bubblechart" component={Bubblechart} />
-      <Route exact path="/gitapi" component={GitApi} />
+      <Route exact path="/contributor" component={GitApi} />
 
     </Switch>
     <Footer/>