Merge pull request #62 from puripant/master

Create a waffle chart component and add one to the homepage

src/components/header/index.js

@@ -111,11 +111,11 @@ const Header = ({ siteTitle }) => {
               <p style={{ marginRight: "1rem", marginBottom: 0 }}>search</p>
             </HiddenOnMobile>
             <div
-              class={`hamburger-icon ${iconClicked ? "animateIcon" : ""}`}
+              className={`hamburger-icon ${iconClicked ? "animateIcon" : ""}`}
               onClick={() => setIconClicked(!iconClicked)}
             >
               <div
-                class={`bar fade-center ${iconClicked ? "bar-white" : ""}`}
+                className={`bar fade-center ${iconClicked ? "bar-white" : ""}`}
               ></div>
             </div>
           </div>

src/pages/waffle.css → src/components/waffle.css

@@ -3,7 +3,7 @@
   flex-wrap: wrap;
   width: 950px;
   height: 348px;
-  margin: 50px 0;
+  margin: 50px auto 0 auto;
 }
 
 .line {
@@ -35,13 +35,17 @@
   width: 12px;
   height: 12px;
   margin: 0 3px 3px 0;
+  border: 0px;
 }
 .person.of-interest {
   background-color: #f9aad4;
 }
 .person.other {
   background-color: #b3b3b3;
 }
+.person:hover {
+  border: 2px solid #222222;
+}
 
 @media only screen and (max-width: 950px) {
   .waffle {

src/components/waffle.js

@@ -0,0 +1,36 @@
+import React from "react"
+
+import "../styles/global.css"
+import "./waffle.css"
+
+const split_array = (array, size, callback) =>
+  Array(Math.ceil(array.length / size))
+    .fill()
+    .map((_, index) => index * size)
+    .map(start => array.slice(start, start + size))
+    .map(callback)
+const full_name = node => `${node.title}${node.name} ${node.lastname}`
+const waffle = (data, cls) =>
+  split_array(data, 100, (hundred, hi) => (
+    <div key={hi} className="hundred">
+      {split_array(hundred, 25, (quarter, qi) => (
+        <div key={qi} className="quarter">
+          {quarter.map(({ node }) => (
+            <div key={node.id} title={full_name(node)} className={cls}>
+              {/* <Link to={node.fields.slug}>{full_name(node)}</Link> */}
+            </div>
+          ))}
+        </div>
+      ))}
+    </div>
+  ))
+
+const Waffle = ({ data }) => (
+  <div className="waffle">
+    {waffle(data[0], "person of-interest")}
+    <div className="line"></div>
+    {waffle(data[1], "person other")}
+  </div>
+)
+
+export default Waffle