Add chart

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>
+  )
+}
+

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>
   )
 }

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>
   )

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;
+}