Finished GitActivity component

package.json

@@ -22,7 +22,8 @@
     "next": "10.0.5",
     "react": "17.0.1",
     "react-calendar-heatmap": "^1.8.1",
-    "react-dom": "17.0.1"
+    "react-dom": "17.0.1",
+    "swr": "^0.5.5"
   },
   "devDependencies": {
     "@babel/core": "^7.12.10",

src/components/GitActivity/GitActivity.stories.tsx

@@ -1,17 +0,0 @@
-import React from "react"
-import { Story, Meta } from "@storybook/react/types-6-0"
-import { GitActivity, GitActivityProps } from "."
-
-export default {
-    title: "Component/GitActivity",
-    component: GitActivity,
-    argTypes: {
-
-    }
-} as Meta
-
-const Template: Story<GitActivityProps> = (args) => <GitActivity {...args} />
-
-// Default scenario
-export const Default = Template.bind({})
-Default.args = {}

src/components/GitActivity/index.tsx

@@ -1,13 +1,80 @@
 import React from "react";
+import useSWR from "swr";
+import fetch from "node-fetch";
+import CalendarHeatmap from "react-calendar-heatmap";
+import 'react-calendar-heatmap/dist/styles.css';
+
+// @ts-ignore
+const fetcher = (...args) => fetch(...args).then(res => res.json())
 
 export interface GitActivityProps {
 
 }
 
-export const GitActivity: React.FC<GitActivityProps> = () => {
+export const GitActivity: React.FunctionComponent = () => {
+    const { data, error } = useSWR('/api/getGitActivity', fetcher);
+
+    if (error) {
+        return (
+            <div>FAILED TO LOAD</div>
+        );
+    }
+    else if (!data) {
+        return (
+            <div>LOADING</div>
+        );
+    }
+    else {
+        // let d = JSON.parse(data.data);
+
+        let startDate = new Date(data.data[data.data.length - 1].date);
+        startDate.setDate(startDate.getDate() - 365);
+
+        console.log(data.data);
+
+        let largest = 0;
+
+        for(let dataPoint of data.data) {
+            if(dataPoint.count > largest) {
+                largest = dataPoint.count;
+            }
+        }
+
+        console.log(largest);
 
         return (
-        <div>
+            <div className={"w-1/2"}>
+                <CalendarHeatmap
+                    startDate={startDate}
+                    endDate={data.data[data.data.length - 1].date}
+                    values={data.data}
+                    classForValue={(obj) => {
+                        let value = obj.count;
+
+                        let ret = "fill-current ";
+
+                        if (!value) {
+                            ret += "text-primary-100";
+                        }
+                        else {
+                            if(value <= largest * 0.25) {
+                                ret += "text-primary-200";
+                            }
+                            else if (value <= largest * 0.5) {
+                                ret += "text-primary-300";
+                            }
+                            else if (value <= largest * 0.75) {
+                                ret += "text-primary-400";
+                            }
+                            else {
+                                ret += "text-primary-500";
+                            }
+                        }
+
+                        return ret;
+                    }}
+                />
             </div>
-    )
+        );
+    }
 }

src/pages/api/getGitActivity.ts

@@ -3,7 +3,7 @@ import * as fs from "fs";
 const path = "./cache/getGitActivity";
 const validTime = 1000 * 60 * 30; // 30 min in milliseconds
 
-type GitActivityCache = {
+export type GitActivityCache = {
   data: Map<string, number>,
   lastRefresh: number
 }

src/pages/index.tsx

@@ -1,4 +1,5 @@
 import Head from "next/head"
+import {GitActivity} from "../components/GitActivity";
 
 export default function Home() {
   return (
@@ -7,6 +8,7 @@ export default function Home() {
       <title>nwex.de</title>
     </Head>
 
+      <GitActivity />
     </>
   )
 }

tailwind.config.js

@@ -17,7 +17,13 @@ module.exports = {
                 '3xl': '1900px',
             },
             colors: {
-                'primary': '#fb8919',
+                'primary': {
+                    100: '#FEE7D1',
+                    200: '#FDD0A3',
+                    300: '#FCB875',
+                    400: '#FBA047',
+                    500: '#fb8919',
+                },
                 'secondary': {
                     100: '#8f969e',
                     200: '#78818d',

yarn.lock

@@ -5171,6 +5171,11 @@ dependency-graph@^0.9.0:
   resolved "https://registry.yarnpkg.com/dependency-graph/-/dependency-graph-0.9.0.tgz#11aed7e203bc8b00f48356d92db27b265c445318"
   integrity sha512-9YLIBURXj4DJMFALxXw9K3Y3rwb5Fk0X5/8ipCzaN84+gKxoHK43tVKRNakCQbiEx07E8Uwhuq21BpUagFhZ8w==
 
+dequal@2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.2.tgz#85ca22025e3a87e65ef75a7a437b35284a7e319d"
+  integrity sha512-q9K8BlJVxK7hQYqa6XISGmBZbtQQWVXSrRrWreHC94rMt1QL/Impruc+7p2CYSYuVIUr+YCt6hjrs1kkdJRTug==
+
 des.js@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/des.js/-/des.js-1.0.1.tgz#5382142e1bdc53f85d86d53e5f4aa7deb91e0843"
@@ -12023,6 +12028,13 @@ svgo@^1.2.2:
     unquote "~1.1.1"
     util.promisify "~1.0.0"
 
+swr@^0.5.5:
+  version "0.5.5"
+  resolved "https://registry.yarnpkg.com/swr/-/swr-0.5.5.tgz#c72c1615765f33570a16bbb13699e3ac87eaaa3a"
+  integrity sha512-u4mUorK9Ipt+6LEITvWRWiRWAQjAysI6cHxbMmMV1dIdDzxMnswWo1CyGoyBHXX91CchxcuoqgFZ/ycx+YfhCA==
+  dependencies:
+    dequal "2.0.2"
+
 symbol-tree@^3.2.4:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"