From 98f0650791a9c622e4f6e640cff6cb25a56060ca Mon Sep 17 00:00:00 2001
From: Eric Zhang <36653830+ez314@users.noreply.github.com>
Date: Sat, 13 Nov 2021 23:38:38 -0600
Subject: [PATCH] Add chart to MainContainer

With data loaded from firestore
---
 components/Chart/index.tsx         | 63 ++++++++++++++++++++++++++++++
 components/MainContainer/index.tsx | 16 +++++---
 pages/index.tsx                    |  8 +++-
 util/Charting/index.ts             | 18 +++++++++
 4 files changed, 98 insertions(+), 7 deletions(-)
 create mode 100644 components/Chart/index.tsx
 create mode 100644 util/Charting/index.ts

diff --git a/components/Chart/index.tsx b/components/Chart/index.tsx
new file mode 100644
index 0000000..1534784
--- /dev/null
+++ b/components/Chart/index.tsx
@@ -0,0 +1,63 @@
+import {Component} from 'react';
+import {
+  AreaChart,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Area,
+} from "recharts";
+import {convertToTimeSeries} from '../../util/Charting';
+
+interface ChartProps {
+  data: any;
+}
+
+const CustomToolTip = ({ active, payload, label }) => {
+  if (active && payload && payload.length) {
+    return (
+      <div className="custom-toolip bg-white bg-opacity-30 p-1 rounded-lg">
+        <p>{label.toLocaleTimeString()}</p>
+        <p>{'$' + payload[0].value}</p>
+      </div>
+    );
+  }
+
+  return null;
+};
+
+export default function Chart({data}: ChartProps) {
+  return (
+    <AreaChart
+      width={400}
+      height={350}
+      data={convertToTimeSeries(data.price)}
+      margin={{top: 50}}
+    >
+      <defs>
+        <linearGradient id="green" x1="0" y1="0" x2="0" y2="1">
+          <stop offset="5%" stopColor={'#aaa'} stopOpacity={0.8}/>
+          <stop offset="95%" stopColor={'#aaa'} stopOpacity={0}/>
+        </linearGradient>
+        <linearGradient id="red" x1="0" y1="0" x2="0" y2="1">
+          <stop offset="5%" stopColor={"#f00"} stopOpacity={0.8}/>
+          <stop offset="95%" stopColor={"#f00"} stopOpacity={0}/>
+        </linearGradient>
+      </defs>
+      <XAxis dataKey="timestamp" type="category"/>
+      <YAxis domain={['auto', 'auto']}/>
+      <CartesianGrid strokeDasharray="3 3"/>
+      <Tooltip content={<CustomToolTip/>}/>
+      <Area
+        type="monotone"
+        dataKey="price"
+        stroke={
+          '#40af86'
+        }
+        fillOpacity={1}
+        fill="url(#green)"
+      />
+    </AreaChart>
+  )
+}
+
diff --git a/components/MainContainer/index.tsx b/components/MainContainer/index.tsx
index ca141ea..bec2dc2 100644
--- a/components/MainContainer/index.tsx
+++ b/components/MainContainer/index.tsx
@@ -1,15 +1,19 @@
-import { Component } from 'react';
-import Stock, { StockData } from '../Stock';
+import {Component} from 'react';
+import Stock, {StockData} from '../Stock';
 import Tweet from '../Tweet';
+import Chart from '../Chart';
 
 interface MainContainerProps {
   data: StockData;
 }
 
-export default function MainContainer({ data }: MainContainerProps) {
+export default function MainContainer({data}: MainContainerProps) {
   return (
-    <div id="maincontainer" className="flex flex-row m-0 p-0 w-70p h-screen bg-green-400">
-      <Tweet photo="https://d25tv1xepz39hi.cloudfront.net/2017-12-12/files/eos-6d-mark-ii-sample-image_1723-1.jpg" name="Elon Musk" handle="@elonmusk" content="haha tesla stock message" date="2021/05/01" likes={5} retweets={10} />
-    </div>
+      <div id="maincontainer" className="flex flex-row m-0 p-0 w-70p h-screen bg-green-400">
+        <Chart data={data}></Chart>
+        <Tweet photo="https://d25tv1xepz39hi.cloudfront.net/2017-12-12/files/eos-6d-mark-ii-sample-image_1723-1.jpg"
+               name="Elon Musk" handle="@elonmusk" content="haha tesla stock message" date="2021/05/01" likes={5}
+               retweets={10}/>
+      </div>
   )
 }
\ No newline at end of file
diff --git a/pages/index.tsx b/pages/index.tsx
index ef499d2..34a048f 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -2,6 +2,7 @@ import AppFrame from '../components/AppFrame';
 import UserContainer from '../components/UserContainer';
 import MainContainer from '../components/MainContainer';
 import GlobalContainer from '../components/GlobalContainer';
+import React, {useState} from 'react';
 
 export async function getServerSideProps() {
   const {db} = require('../util/Firebase');
@@ -20,10 +21,15 @@ export async function getServerSideProps() {
 
 export default function Home({stocks}) {
   console.debug(stocks);
+
+  const [currentStock, setCurrentStock] = useState('TSLA');
+
+  const currentStockData = stocks[currentStock];
+
   return (
     <AppFrame>
       <UserContainer user="test" subscribedStocks={[]}/>
-      <MainContainer data={undefined}/>
+      <MainContainer data={currentStockData}/>
       <GlobalContainer/>
     </AppFrame>
   )
diff --git a/util/Charting/index.ts b/util/Charting/index.ts
new file mode 100644
index 0000000..24eb6ec
--- /dev/null
+++ b/util/Charting/index.ts
@@ -0,0 +1,18 @@
+export const convertToTimeSeries = (priceArr) => {
+  let res = [];
+  let timestamp = new Date();
+
+  // initialize timestamp to market open
+  timestamp.setHours(8, 30, 0, 0);
+
+  priceArr.forEach(price => {
+    res.push({
+      timestamp,
+      price
+    });
+
+    timestamp = new Date(timestamp.getTime() + 5*60*1000);
+  });
+
+  return res;
+}
\ No newline at end of file