Skip to content

Commit f785791

Browse files
jmfarook7jmfarook7
committed
src added
1 parent 73e303b commit f785791

File tree

7 files changed

+1367
-0
lines changed

7 files changed

+1367
-0
lines changed

‎Stock-Market-Application/src/components/ClimbersFallers.tsx

Lines changed: 208 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,208 @@
1+
import * as React from 'react';
2+
import { useState, useRef } from 'react';
3+
import {
4+
GridComponent,
5+
ColumnsDirective,
6+
ColumnDirective,
7+
Inject,
8+
Page,
9+
Sort,
10+
QueryCellInfoEventArgs,
11+
} from '@syncfusion/ej2-react-grids';
12+
import { DataManager, UrlAdaptor, Query } from '@syncfusion/ej2-data';
13+
import { StockDetails } from '../data';
14+
15+
export default function ClimbersFallers() {
16+
const [gridData, setGridData] = useState(
17+
new DataManager({
18+
// url: 'https://ej2services.syncfusion.com/aspnet/development/api/StockData',
19+
url: 'http://localhost:62869/api/StockData',
20+
adaptor: new UrlAdaptor(),
21+
offline: true,
22+
})
23+
);
24+
const [gainersQuery, setGainersQuery] = useState(
25+
new Query().where('ChangeInValue', 'greaterthan', 0)
26+
);
27+
const [losersQuery, setLosersQuery] = useState(
28+
new Query().where('ChangeInValue', 'lessthan', 0)
29+
);
30+
const queryCellInfo = (args: QueryCellInfoEventArgs) => {
31+
if (
32+
args.column!.field === 'Last' ||
33+
args.column!.field === 'ChangeInValue' ||
34+
args.column!.field === 'ChangeInPercent' ||
35+
args.column!.field === 'Rating'
36+
) {
37+
if ((args.data as StockDetails).ChangeInValue > 0) {
38+
args.cell!.classList.add('e-pos');
39+
} else {
40+
args.cell!.classList.add('e-neg');
41+
}
42+
}
43+
};
44+
return (
45+
<div className="gainers-losers-content-area">
46+
<div className="sections">
47+
<div className="section1">
48+
<div className='header'>Climbers:</div>
49+
<GridComponent
50+
id="climbers"
51+
dataSource={gridData}
52+
query={gainersQuery}
53+
queryCellInfo={queryCellInfo}
54+
allowSorting={true}
55+
allowPaging={true}
56+
pageSettings={{ pageCount: 4, pageSize: 7 }}
57+
enableHover={false}
58+
>
59+
<ColumnsDirective>
60+
<ColumnDirective
61+
field="ID"
62+
visible={false}
63+
textAlign="Center"
64+
width="100"
65+
></ColumnDirective>
66+
<ColumnDirective
67+
field="CompanyName"
68+
headerText="Company"
69+
width="170"
70+
></ColumnDirective>
71+
<ColumnDirective
72+
field="Sector"
73+
visible={false}
74+
width="100"
75+
></ColumnDirective>
76+
<ColumnDirective
77+
field="Net"
78+
visible={false}
79+
format="N2"
80+
textAlign="Center"
81+
width="100"
82+
></ColumnDirective>
83+
<ColumnDirective
84+
field="Last"
85+
format="N2"
86+
textAlign="Center"
87+
width="80"
88+
></ColumnDirective>
89+
<ColumnDirective
90+
field="ChangeInValue"
91+
headerText="CHNG 1D"
92+
format="N2"
93+
textAlign="Center"
94+
visible={false}
95+
width="100"
96+
></ColumnDirective>
97+
<ColumnDirective
98+
field="ChangeInPercent"
99+
headerText="CHNG(%)"
100+
format="P2"
101+
textAlign="Center"
102+
width="100"
103+
></ColumnDirective>
104+
<ColumnDirective
105+
field="High"
106+
format="N2"
107+
textAlign="Center"
108+
width="80"
109+
></ColumnDirective>
110+
<ColumnDirective
111+
field="Low"
112+
format="N2"
113+
textAlign="Center"
114+
width="80"
115+
></ColumnDirective>
116+
<ColumnDirective
117+
field="Volume"
118+
visible={false}
119+
textAlign="Center"
120+
width="90"
121+
></ColumnDirective>
122+
</ColumnsDirective>
123+
<Inject services={[Page, Sort]} />
124+
</GridComponent>
125+
</div>
126+
<div className="section2">
127+
<div className='header'>Fallers:</div>
128+
<GridComponent
129+
id="fallers"
130+
dataSource={gridData}
131+
query={losersQuery}
132+
queryCellInfo={queryCellInfo}
133+
allowSorting={true}
134+
allowPaging={true}
135+
pageSettings={{ pageCount: 4, pageSize: 7 }}
136+
enableHover={false}
137+
>
138+
<ColumnsDirective>
139+
<ColumnDirective
140+
field="ID"
141+
visible={false}
142+
textAlign="Center"
143+
width="100"
144+
></ColumnDirective>
145+
<ColumnDirective
146+
field="CompanyName"
147+
headerText="Company"
148+
width="170"
149+
></ColumnDirective>
150+
<ColumnDirective
151+
field="Sector"
152+
visible={false}
153+
width="100"
154+
></ColumnDirective>
155+
<ColumnDirective
156+
field="Net"
157+
visible={false}
158+
format="N2"
159+
textAlign="Center"
160+
width="100"
161+
></ColumnDirective>
162+
<ColumnDirective
163+
field="Last"
164+
format="N2"
165+
textAlign="Center"
166+
width="80"
167+
></ColumnDirective>
168+
<ColumnDirective
169+
field="ChangeInValue"
170+
headerText="CHNG 1D"
171+
format="N2"
172+
visible={false}
173+
textAlign="Center"
174+
width="100"
175+
></ColumnDirective>
176+
<ColumnDirective
177+
field="ChangeInPercent"
178+
headerText="CHNG(%)"
179+
format="P2"
180+
textAlign="Center"
181+
width="100"
182+
></ColumnDirective>
183+
<ColumnDirective
184+
field="High"
185+
format="N2"
186+
textAlign="Center"
187+
width="80"
188+
></ColumnDirective>
189+
<ColumnDirective
190+
field="Low"
191+
format="N2"
192+
textAlign="Center"
193+
width="80"
194+
></ColumnDirective>
195+
<ColumnDirective
196+
field="Volume"
197+
visible={false}
198+
textAlign="Center"
199+
width="90"
200+
></ColumnDirective>
201+
</ColumnsDirective>
202+
<Inject services={[Page, Sort]} />
203+
</GridComponent>
204+
</div>
205+
</div>
206+
</div>
207+
);
208+
}

‎Stock-Market-Application/src/components/KnowMore.tsx

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import * as React from 'react';
2+
import { useEffect } from 'react';
3+
import { CarouselComponent, CarouselItemsDirective, CarouselItemDirective } from '@syncfusion/ej2-react-navigations';
4+
5+
6+
export default function KnowMore() {
7+
let productDetails = [
8+
{
9+
ID: 1,
10+
Title: 'Trend Line',
11+
Content: 'A trendline in the stock market is a graphical representation showing the general direction of a stock price movement over time. By connecting significant price points, such as highs or lows, trendlines help identify patterns and trends. They are used by traders and analysts to forecast future price movements and make informed investment decisions. Trendlines can indicate whether a stock is in an upward, downward, or sideways trend.',
12+
ImgPath: 'images/1.jpg',
13+
// URL: 'https://en.wikipedia.org/wiki/San_Francisco'
14+
}, {
15+
ID: 2,
16+
Title: 'Trend Line',
17+
Content: 'A trendline in the stock market is a graphical representation showing the general direction of a stock price movement over time. By connecting significant price points, such as highs or lows, trendlines help identify patterns and trends. They are used by traders and analysts to forecast future price movements and make informed investment decisions. Trendlines can indicate whether a stock is in an upward, downward, or sideways trend.',
18+
ImgPath: 'images/2.jpg',
19+
// URL: 'https://en.wikipedia.org/wiki/London'
20+
}, {
21+
ID: 3,
22+
Title: 'Trend Line',
23+
Content: 'A trendline in the stock market is a graphical representation showing the general direction of a stock price movement over time. By connecting significant price points, such as highs or lows, trendlines help identify patterns and trends. They are used by traders and analysts to forecast future price movements and make informed investment decisions. Trendlines can indicate whether a stock is in an upward, downward, or sideways trend.',
24+
ImgPath: 'images/3.jpg',
25+
// URL: 'https://en.wikipedia.org/wiki/Tokyo'
26+
}, {
27+
ID: 4,
28+
Title: 'Trend Line',
29+
Content: 'A trendline in the stock market is a graphical representation showing the general direction of a stock price movement over time. By connecting significant price points, such as highs or lows, trendlines help identify patterns and trends. They are used by traders and analysts to forecast future price movements and make informed investment decisions. Trendlines can indicate whether a stock is in an upward, downward, or sideways trend.',
30+
ImgPath: 'images/4.jpg',
31+
// URL: 'https://en.wikipedia.org/wiki/Moscow'
32+
}
33+
];
34+
let showButtons: any = "Hidden";
35+
const productTemplate = (props: any) => {
36+
return (<div className="card">
37+
<img src={props.ImgPath} alt={props.Title} className="card-img-top" style={{ height: "370px", width: "100%" }}/>
38+
<div className="card-body" style={{ padding: "1rem" }}>
39+
<h1 className="card-title">{props.Title}</h1>
40+
<p className="card-text">{props.Content}</p>
41+
</div>
42+
</div>);
43+
};
44+
return (<div className='control-pane'>
45+
<div className='control-section db-carousel-section'>
46+
<div className='control carousel-sample'>
47+
{/* Render the Carousel Component */}
48+
<CarouselComponent cssClass="db-carousel" animationEffect="Fade" dataSource={productDetails} buttonsVisibility={showButtons} itemTemplate={productTemplate}></CarouselComponent>
49+
</div>
50+
</div>
51+
</div>);
52+
};

0 commit comments

Comments
 (0)