iampavangandhi · howdyAnkit · Aug 7, 2020 · Aug 7, 2020 · hound · Aug 7, 2020
diff --git a/app.js b/app.js
@@ -78,7 +78,7 @@ app.use("/", require("./routes/api/index"));
 app.use("/auth", require("./routes/api/auth"));
 app.use("/portfolio", require("./routes/api/portfolio"));
 app.use("/market", require("./routes/api/market"));
-
+app.use("/view", require("./routes/api/view"));
 // Port: Love You 3000
 const PORT = process.env.PORT || 3000;
 

diff --git a/config/config.env.example b/config/config.env.example
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -39,6 +39,7 @@
     "lodash": "^4.17.19",
     "method-override": "^3.0.0",
     "mongoose": "^5.9.25",
+    "mongoose-float": "^1.0.4",
     "morgan": "^1.10.0",
     "npm": "^6.14.7",
     "passport": "^0.4.1",

diff --git a/routes/api/view.js b/routes/api/view.js
@@ -0,0 +1,67 @@
+// View Routes
+//jshint esversion:8
+const express = require("express");
+const router = express.Router();
+const alpha = require("alphavantage")({
+    key: process.env.ALPHA_VANTAGE_KEY
+});
+
+const getOverview = require("../../helpers/getOverview");
+const {
+    ensureAuth
+} = require("../../middleware/auth");
+
+// @desc     View Page
+// @route    GET /view/:symbol
+// @access   Private
+router.get("/:symbol", ensureAuth, async (req, res) => {
+    const symbol = req.params.symbol;
+    let data = await getOverview(symbol);
+
+    alpha.data
+        .intraday(symbol)
+        .then((data) => {
+            const intraDay = data["Time Series (1min)"];
+            let dates = [];
+            let opening = [];
+            let closing = [];
+            let highs = [];
+            let lows = [];
+            let volumes = [];
+            const keys = Object.getOwnPropertyNames(intraDay);
+
+            for (let i = 0; i < 100; i++) {
+                dates.push(keys[i]);
+                opening.push(intraDay[keys[i]]["1. open"]);
+                highs.push(intraDay[keys[i]]["2. high"]);
+                lows.push(intraDay[keys[i]]["3. low"]);
+                closing.push(intraDay[keys[i]]["4. close"]);
+                volumes.push(intraDay[keys[i]]["5. volume"]);
+            }
+            // reverse so dates appear from left to right
+            dates.reverse();
+            closing.reverse();
+            //   dates = JSON.stringify(dates);
+            //   closing = JSON.stringify(closing);
+
+            res
+                .status(200)
+                .render(
+                    "view", {
+                        data,
+                        dates,
+                        opening,
+                        closing,
+                        highs,
+                        lows,
+                        volumes
+                    }
+                );
+        })
+        .catch((err) => {
+            // Handle the error
+            console.log(err);
+        });
+});
+
+module.exports = router;
diff --git a/views/view.ejs b/views/view.ejs
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>WeatherApp</title>
+    <script src="/main.js"></script>
+    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js"></script>
+    <style>
+        @media (min-width:320px){
+            #chart{
+                width: 800px;
+                height: 900px;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <form action="/" method="POST" class="flex flex-col sm:flex-row justify-center">
+        <label for="cityInput" class="mt-2 px-3 py-2">stockName: </label>
+        <input type="text" name="stockName" id="stockInput"
+            class="mt-2 px-3 py-2 shadow border rounded-lg w-4/6 px-3 py-2 text-gray-700 focus:bg-blue-100
+            placeholder-indigo-300">
+        <button type="submit"
+            class="m-4 bg-indigo-200 border-b-4 border-t-4 border-indigo-800 px-4 py-1 mt-2 px-3 py-2">Search</button>
+    </form>
+
+
+    <canvas id="chart"></canvas>
+
+    <%for(var i=0; i<=5; i++){%>
+        <table class="table-auto border-2 border-gray-600 ">
+            <thead>
+                <tr>
+                    <th class="px-4 py-2">Date</th>
+                    <th class="px-4 py-2">opening</th>
+                    <th class="px-4 py-2">closing</th>
+                    <th class="px-4 py-2">highs</th>
+                    <th class="px-4 py-2">lows</th>
+                    <th class="px-4 py-2">volumes</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td class="border-b-2 px-4 py-2 "><%- dates[i] %></td>
+                    <td class="border-b-2 px-4 py-2"><%- opening[i] %></td>
+                    <td class="border-b-2 px-4 py-2"><%- closing[i] %></td>
+                    <td class="border-b-2 px-4 py-2"><%- highs[i] %></td>
+                    <td class="border-b-2 px-4 py-2"><%- lows[i] %></td>
+                    <td class="border-b-2 px-4 py-2"><%- volumes[i] %></td>
+                </tr>
+            </tbody>
+        </table>
+
+    <%}%>
+
+    <script>
+        var datesList = <%- JSON.stringify(dates) %>;
+    var closingList = <%- JSON.stringify(closing) %> ;
+    var ctx = document.getElementById('chart').getContext('2d');
+    var myChart = new Chart(ctx, {
+    type: 'line',
+    data: {
+            labels: datesList,closingList,
+            datasets: [{
+            label: "Microsoft's Closing Stock Values",
+            data: closingList,
+            borderColor: "#3e95cd",
+            backgroundColor: "rgba(118,152,255,0.4)"
+        }]
+    },
+    options: {
+        responsive:true,
+        maintainAspectRatio: true,
+    },
+    });
+    </script>
+
+
+</body>
+
+</html>