ADDING DATA TO HOLDINGS, POSITIONS

 WE ADD DATA.JS TO HOLDINGS AND POSITIONS.

THE HOLDINGS AND POSITIONS DISPLAY A TABLE RELATED TO STOCKS.

DATA.JS

export const watchlist = [
  {
    name: "INFY",
    price: 1555.45,
    percent: "-1.60%",
    isDown: true,
  },
  {
    name: "ONGC",
    price: 116.8,
    percent: "-0.09%",
    isDown: true,
  },
  {
    name: "TCS",
    price: 3194.8,
    percent: "-0.25%",
    isDown: true,
  },
  {
    name: "KPITTECH",
    price: 266.45,
    percent: "3.54%",
    isDown: false,
  },
  {
    name: "QUICKHEAL",
    price: 308.55,
    percent: "-0.15%",
    isDown: true,
  },
  {
    name: "WIPRO",
    price: 577.75,
    percent: "0.32%",
    isDown: false,
  },
  {
    name: "M&M",
    price: 779.8,
    percent: "-0.01%",
    isDown: true,
  },
  {
    name: "RELIANCE",
    price: 2112.4,
    percent: "1.44%",
    isDown: false,
  },
  {
    name: "HUL",
    price: 512.4,
    percent: "1.04%",
    isDown: false,
  },
];

// holdings
export const holdings = [
  {
    name: "BHARTIARTL",
    qty: 2,
    avg: 538.05,
    price: 541.15,
    net: "+0.58%",
    day: "+2.99%",
  },
  {
    name: "HDFCBANK",
    qty: 2,
    avg: 1383.4,
    price: 1522.35,
    net: "+10.04%",
    day: "+0.11%",
  },
  {
    name: "HINDUNILVR",
    qty: 1,
    avg: 2335.85,
    price: 2417.4,
    net: "+3.49%",
    day: "+0.21%",
  },
  {
    name: "INFY",
    qty: 1,
    avg: 1350.5,
    price: 1555.45,
    net: "+15.18%",
    day: "-1.60%",
    isLoss: true,
  },
  {
    name: "ITC",
    qty: 5,
    avg: 202.0,
    price: 207.9,
    net: "+2.92%",
    day: "+0.80%",
  },
  {
    name: "KPITTECH",
    qty: 5,
    avg: 250.3,
    price: 266.45,
    net: "+6.45%",
    day: "+3.54%",
  },
  {
    name: "M&M",
    qty: 2,
    avg: 809.9,
    price: 779.8,
    net: "-3.72%",
    day: "-0.01%",
    isLoss: true,
  },
  {
    name: "RELIANCE",
    qty: 1,
    avg: 2193.7,
    price: 2112.4,
    net: "-3.71%",
    day: "+1.44%",
  },
  {
    name: "SBIN",
    qty: 4,
    avg: 324.35,
    price: 430.2,
    net: "+32.63%",
    day: "-0.34%",
    isLoss: true,
  },
  {
    name: "SGBMAY29",
    qty: 2,
    avg: 4727.0,
    price: 4719.0,
    net: "-0.17%",
    day: "+0.15%",
  },
  {
    name: "TATAPOWER",
    qty: 5,
    avg: 104.2,
    price: 124.15,
    net: "+19.15%",
    day: "-0.24%",
    isLoss: true,
  },
  {
    name: "TCS",
    qty: 1,
    avg: 3041.7,
    price: 3194.8,
    net: "+5.03%",
    day: "-0.25%",
    isLoss: true,
  },
  {
    name: "WIPRO",
    qty: 4,
    avg: 489.3,
    price: 577.75,
    net: "+18.08%",
    day: "+0.32%",
  },
];

// positions
export const positions = [
  {
    product: "CNC",
    name: "EVEREADY",
    qty: 2,
    avg: 316.27,
    price: 312.35,
    net: "+0.58%",
    day: "-1.24%",
    isLoss: true,
  },
  {
    product: "CNC",
    name: "JUBLFOOD",
    qty: 1,
    avg: 3124.75,
    price: 3082.65,
    net: "+10.04%",
    day: "-1.35%",
    isLoss: true,
  },
];


HOLDINGS.JS

import React, { useState, useEffect } from "react";

import { holdings } from "../data/data";

export default function Holdings() {
  return (
    <>
      <h3 className="title">Holdings({holdings.length})</h3>

      <div className="order-table">
        <table>
          <tr>
            <th>Instrument</th>
            <th>Qty.</th>
            <th>Avg.cost</th>
            <th>LTP</th>
            <th>Cur.val</th>
            <th>P&L</th>
            <th>Net chg.</th>
            <th>Day chg.</th>
          </tr>

          {holdings.map((stock, index) => {
            const currValue = stock.qty * stock.price;
            const isProfit = currValue - stock.avg * stock.qty >= 0.0;
            const profitClass = isProfit ? "profit" : "loss";
            const dayClass = stock.isLoss ? "loss" : "profit";

            return (
              <>
                <tr key={index}>
                  <td>{stock.name}</td>
                  <td>{stock.qty}</td>
to 2 decimal places
                  <td>{stock.avg.toFixed(2)}</td>
                  <td>{stock.price.toFixed(2)}</td>
                  <td>{currValue.toFixed(2)}</td>
                  <td className={profitClass}>
                    {(currValue - stock.avg * stock.qty).toFixed(2)}
                  </td>

                  <td className={profitClass}>{stock.net}</td>
                  <td className={dayClass}>{stock.day}</td>
                </tr>
              </>
            );
          })}
        </table>
      </div>
    </>
  );
}




POSITIONS ARE ALSO SIMILAR TO HOLDINGS.

POSITIONS.JS

import React from "react";
import { positions } from "../data/data";


const Positions = () => {
  return (
    <>
      <h3 className="title">Positions({positions.length})</h3>

      <div className="order-table">

        <table>
          <tr>
            <th>Product</th>
            <th>Instrument</th>
            <th>Qty</th>
            <th>Avg</th>
            <th>LTP</th>
            <th>P&L</th>
            <th>Chg</th>
          </tr>

          {positions.map((stock, index) => {
                      const currValue = stock.qty * stock.price;
                      const isProfit = currValue - stock.avg * stock.qty >= 0.0;
                      const profitClass = isProfit ? "profit" : "loss";
                      const dayClass = stock.isLoss ? "loss" : "true";
         
                      return (
                        <>
                          <tr key={index}>
                            <td>{stock.product}</td>
                            <td>{stock.name}</td>
                            <td>{stock.qty}</td>
                            <td>{stock.avg.toFixed(2)}</td>
                            <td>{stock.price.toFixed(2)}</td>
                            <td className={profitClass}>
                              {(currValue - stock.avg * stock.qty).toFixed(2)}
                            </td>
         
                            <td className={dayClass}>{stock.day}</td>
                          </tr>
                        </>
                      );
                    })}
        </table>
      </div>
      </>
  );
};

export default Positions;





Comments

Post a Comment

Popular posts from this blog

*********UPDATING THE FRONTEND*********

Image
 WE WILL BEGIN WITH UPDATING THE FOOTER, IN FOOTER.JS import React from "react" ; function Footer () {   return (     <>       < div className = "footer" >         < div className = " f-brand " > &copy; TradeEasy Private Ltd </ div >         < div className = "f-info-socials  " >           < br />< br />< br />           < a href = "https://www.linkedin.com/in/abhishek-kumar5471/" >             < i class = "fa-brands fa-linkedin" ></ i >           </ a >           < a href = "https://github.com/abhishekkumar71" >             < i class = "fa-brands fa-github" ></ i >           </ a >         ...
Read more

**************** EXTRACTING DATA FROM API **************

Image
 TILL NOW WE USED DUMMY DATA FROM DATA.JS AS THE STOCK INFORMATION. NOW,WE WILL USE AN API THAT GIVES THE STOCK INFORMATION. WE WILL USE ALPHAVANTAGE FOR THE REQUIRED INFORMATION. SIGNUP IN ALPHAVANTAGE, YOU WILL RECEIVE AN API KEY  STORE IT IN .ENV FILE .ENV   API_KEY = AKJOQXMHFNU7**** IN ALPHAVANTAGE WE USE THE URL TO FETCH DATA , IN THE URL THERE ARE SOME FIXED PARAMETERS THAT SHOLUD BE INCLUDED IN THE URL. (READ API DOCUMENTATION OF ALPHA VANTAGE). THEY ARE API KEY, FUNCTION AND SYMBOL.   const rawSymbol = req . params . symbol . toUpperCase ();   const fetchStockData = async ( symbolVariant ) => {     const { data } = await axios . get ( "https://www.alphavantage.co/query" , {       params : {         function : "TIME_SERIES_DAILY" ,         symbol : symbolVariant ,         outputsize : "compact" ,         apikey : key ,   ...
Read more