Skip to content

Commit 73e303b

Browse files
jmfarook7jmfarook7
committed
src added
1 parent 20c733c commit 73e303b

File tree

7 files changed

+821
-0
lines changed

7 files changed

+821
-0
lines changed

‎Stock-Market-Application/src/App.tsx

+164
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
import * as React from 'react';
2+
import { useState } from 'react';
3+
import {
4+
BrowserRouter as Router,
5+
Routes,
6+
Route,
7+
NavLink,
8+
} from 'react-router-dom';
9+
import { DropDownButtonComponent, ItemModel } from '@syncfusion/ej2-react-splitbuttons';
10+
import {
11+
DataManager,
12+
UrlAdaptor, Query, Predicate
13+
} from '@syncfusion/ej2-data';
14+
import Overview from './components/Overview';
15+
import MyPortfolio from './components/MyPortfolio';
16+
import StockAnalysis from './components/StockAnalysis';
17+
import ClimbersFallers from './components/ClimbersFallers';
18+
import SmartStockPicks from './components/SmartStockPicks';
19+
import News from './components/News';
20+
import KnowMore from './components/KnowMore';
21+
import { StockDetails, marqueeData } from './data';
22+
import './style.css';
23+
24+
const dm = new DataManager({
25+
// url: 'https://ej2services.syncfusion.com/aspnet/development/api/StockData',
26+
url: 'http://localhost:62869/api/StockData',
27+
adaptor: new UrlAdaptor(),
28+
enablePersistence: true,
29+
id: 'myStocks',
30+
});
31+
32+
export default function App() {
33+
const [marquee, setMarquee] = useState(marqueeData);
34+
const changeMarquee = (data: StockDetails[]) => {
35+
setMarquee(data);
36+
};
37+
38+
let items: ItemModel[] = [
39+
{ text: 'Overview' },
40+
{ text: 'My Portfolio' },
41+
{ text: 'Smart Stock Picks' },
42+
{ text: 'Stock Analysis' },
43+
{ text: 'Climbers/Fallers' },
44+
{ text: 'Trending News' },
45+
{ text: 'Know More' }
46+
];
47+
const handleSelect = (args: any) => {
48+
const item: any = items.find(i => i.text === args.item.text);
49+
if (item) {
50+
window.location.href = item.url;
51+
}
52+
};
53+
54+
const [isOpen, setIsOpen] = useState(false);
55+
56+
const toggleMenu = () => {
57+
setIsOpen(!isOpen);
58+
};
59+
return (
60+
<div>
61+
<div className="marquee-container">
62+
<div className="marquee">
63+
{marquee.map((item, index) => (
64+
<span
65+
className={
66+
item.ChangeInValue > 0 ? 'company posvalue' : 'company negvalue'
67+
}
68+
key={index}
69+
>
70+
{item.CompanyName}
71+
<span className="value">{item.ChangeInValue.toFixed(2)}</span>
72+
<span
73+
className={
74+
item.ChangeInValue > 0 ? 'e-icons pos' : 'e-icons neg'
75+
}
76+
></span>
77+
</span>
78+
))}
79+
</div>
80+
</div>
81+
82+
<Router>
83+
<div className="">
84+
<div className="">
85+
<div className="">
86+
<nav className="nav">
87+
<NavLink to="/" className="nav-link">
88+
Overview
89+
</NavLink>
90+
<NavLink to="/my_portfolio" className="nav-link">
91+
My Portfolio
92+
</NavLink>
93+
<NavLink to="/smart_stock_picks" className="nav-link">
94+
Smart Stock Picks
95+
</NavLink>
96+
<NavLink to="/stock_analysis" className="nav-link">
97+
Stock Analysis
98+
</NavLink>
99+
<NavLink to="/climbers_fallers" className="nav-link">
100+
Climbers/Fallers
101+
</NavLink>
102+
<NavLink to="/trending_news" className="nav-link">
103+
Trending News
104+
</NavLink>
105+
<NavLink to="/know_more" className="nav-link">
106+
Know More
107+
</NavLink>
108+
<div className="menu-container">
109+
<button className="menu-button" onClick={toggleMenu}>
110+
<div className="e-icons e-menu"></div>
111+
</button>
112+
<div className={`menu-popup ${isOpen ? 'open' : 'closed'}`}>
113+
<NavLink to="/" className="nav-link menu-item"
114+
onClick={() => setIsOpen(false)}>
115+
Overview
116+
</NavLink>
117+
<NavLink to="/my_portfolio" className="nav-link menu-item"
118+
onClick={() => setIsOpen(false)}>
119+
My Portfolio
120+
</NavLink>
121+
<NavLink to="/smart_stock_picks" className="nav-link menu-item"
122+
onClick={() => setIsOpen(false)}>
123+
Smart Stock Picks
124+
</NavLink>
125+
<NavLink to="/stock_analysis" className="nav-link menu-item"
126+
onClick={() => setIsOpen(false)}>
127+
Stock Analysis
128+
</NavLink>
129+
<NavLink to="/climbers_fallers" className="nav-link menu-item"
130+
onClick={() => setIsOpen(false)}>
131+
Climbers/Fallers
132+
</NavLink>
133+
<NavLink to="/trending_news" className="nav-link menu-item"
134+
onClick={() => setIsOpen(false)}>
135+
Trending News
136+
</NavLink>
137+
<NavLink to="/know_more" className="nav-link menu-item"
138+
onClick={() => setIsOpen(false)}>
139+
Know More
140+
</NavLink>
141+
</div>
142+
</div>
143+
</nav>
144+
</div>
145+
<div className="main-content">
146+
<Routes>
147+
<Route
148+
path="/"
149+
element={<Overview changeMarquee={changeMarquee} myStockDm={dm} />}
150+
/>
151+
<Route path="/my_portfolio" element={<MyPortfolio changeMarquee={changeMarquee} myStockDm={dm} />} />
152+
<Route path="/stock_analysis" element={<StockAnalysis />} />
153+
<Route path="/climbers_fallers" element={<ClimbersFallers />} />
154+
<Route path="/smart_stock_picks" element={<SmartStockPicks myStockDm={dm} />} />
155+
<Route path="/trending_news" element={<News />} />
156+
<Route path="/know_more" element={<KnowMore />} />
157+
</Routes>
158+
</div>
159+
</div>
160+
</div>
161+
</Router>
162+
</div>
163+
);
164+
}

‎Stock-Market-Application/src/data.ts

+148
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
export interface StockDetails {
2+
ID: number;
3+
CompanyName: string;
4+
Sector: string;
5+
Net: number;
6+
Last: number;
7+
ChangeInValue: number;
8+
ChangeInPercent: number;
9+
High: number;
10+
Low: number;
11+
Rating: string;
12+
Volume: number;
13+
}
14+
15+
export let ListData: { id: string, text: string, isChecked?: boolean }[] = [
16+
{ id: '1', text: 'All Sectors' },
17+
{ id: '2', text: 'Technology' },
18+
{ id: '3', text: 'Healthcare' },
19+
{ id: '4', text: 'Finance' },
20+
{ id: '5', text: 'Retail' },
21+
{ id: '6', text: 'Manufacturing' },
22+
{ id: '7', text: 'Energy' },
23+
{ id: '8', text: 'Consumer Goods' },
24+
{ id: '9', text: 'Telecommunications' },
25+
{ id: '10', text: 'Transportation' },
26+
{ id: '11', text: 'Utilities' },
27+
{ id: '12', text: 'Banks' },
28+
];
29+
30+
export let marqueeData: StockDetails[] = [
31+
{
32+
ID: 1,
33+
CompanyName: 'Tech Innovators Inc',
34+
Sector: 'Technology',
35+
Net: 41.300000000000004,
36+
Last: 33.5,
37+
ChangeInValue: -7.8,
38+
ChangeInPercent: -0.1888,
39+
High: 49.2,
40+
Low: 33.5,
41+
Rating: 'Strongly Sell',
42+
Volume: 20273,
43+
},
44+
{
45+
ID: 11,
46+
CompanyName: 'Health Solutions LLC',
47+
Sector: 'Healthcare',
48+
Net: 46.45,
49+
Last: 48.65,
50+
ChangeInValue: 2.2,
51+
ChangeInPercent: 0.0473,
52+
High: 55.19,
53+
Low: 39.16,
54+
Rating: 'Buy',
55+
Volume: 8379,
56+
},
57+
{
58+
ID: 21,
59+
CompanyName: 'Finance Corp',
60+
Sector: 'Finance',
61+
Net: 26.34,
62+
Last: 29.74,
63+
ChangeInValue: 3.4,
64+
ChangeInPercent: 0.129,
65+
High: 34.24,
66+
Low: 18.54,
67+
Rating: 'Buy',
68+
Volume: 15122,
69+
},
70+
{
71+
ID: 31,
72+
CompanyName: 'Retail Enterprises',
73+
Sector: 'Retail',
74+
Net: 45.77,
75+
Last: 46.47,
76+
ChangeInValue: 0.7,
77+
ChangeInPercent: 0.0152,
78+
High: 53.67,
79+
Low: 37.01,
80+
Rating: 'Buy',
81+
Volume: 17028,
82+
},
83+
{
84+
ID: 41,
85+
CompanyName: 'Manufacturing Co',
86+
Sector: 'Manufacturing',
87+
Net: 56.63,
88+
Last: 64.23,
89+
ChangeInValue: 7.6,
90+
ChangeInPercent: 0.1342,
91+
High: 64.53,
92+
Low: 47.88,
93+
Rating: 'Strongly Buy',
94+
Volume: 20723,
95+
},
96+
{
97+
ID: 51,
98+
CompanyName: 'Energy Holdings',
99+
Sector: 'Energy',
100+
Net: 25.34,
101+
Last: 30.84,
102+
ChangeInValue: 5.5,
103+
ChangeInPercent: 0.217,
104+
High: 33.08,
105+
Low: 18.55,
106+
Rating: 'Strongly Buy',
107+
Volume: 22522,
108+
},
109+
{
110+
ID: 61,
111+
CompanyName: 'Consumer Goods Group',
112+
Sector: 'Consumer Goods',
113+
Net: 55.42,
114+
Last: 56.12,
115+
ChangeInValue: 0.7,
116+
ChangeInPercent: 0.0126,
117+
High: 64.15,
118+
Low: 47.620,
119+
Rating: 'Buy',
120+
Volume: 13952,
121+
},
122+
{
123+
ID: 71,
124+
CompanyName: 'Telecom Networks',
125+
Sector: 'Telecommunications',
126+
Net: 47.43,
127+
Last: 54.73,
128+
ChangeInValue: 7.3,
129+
ChangeInPercent: 0.1539,
130+
High: 55.03,
131+
Low: 41.1299,
132+
Rating: 'Strongly Buy',
133+
Volume: 14701,
134+
},
135+
{
136+
ID: 81,
137+
CompanyName: 'Transport Ltd',
138+
Sector: 'Transportation',
139+
Net: 44.99,
140+
Last: 41.39,
141+
ChangeInValue: -3.6,
142+
ChangeInPercent: -0.0800,
143+
High: 53.7300,
144+
Low: 35.38,
145+
Rating: 'Sell',
146+
Volume: 10988,
147+
},
148+
];

‎Stock-Market-Application/src/index.tsx

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import * as React from 'react';
2+
import { createRoot } from 'react-dom/client';
3+
import App from './App';
4+
5+
const rootElement: HTMLElement = document.getElementById('root') as HTMLElement;
6+
const root = createRoot(rootElement);
7+
8+
root.render(<App />);
9+

0 commit comments

Comments
 (0)