Skip to content

Commit 74939eb

Browse files
jmfarook7jmfarook7
authored
Merge pull request #11 from SyncfusionExamples/EJ2-932646-U
932646: Enhancing the UI for a More Attractive Stock Management Application with tailwind3.
2 parents f740982 + 78e11ee commit 74939eb

File tree

4 files changed

+185
-117
lines changed

4 files changed

+185
-117
lines changed

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

Lines changed: 72 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,78 @@
11
import * as React from 'react';
2-
import { useEffect } from 'react';
32
import { CarouselComponent, CarouselItemsDirective, CarouselItemDirective } from '@syncfusion/ej2-react-navigations';
4-
3+
import * as img1 from '../images/1.png';
4+
import * as img2 from '../images/2.png';
5+
import * as img3 from '../images/3.png';
6+
import * as img4 from '../images/4.png';
57

68
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-
}
9+
const productDetails = [
10+
{
11+
ID: 1,
12+
Content: 'The Syncfusion DataGrid component enables the real-time display of data updates, highlighting changes in values—whether they have increased, decreased, or remained stable compared to previous data. This allows you to easily compare live data changes without any performance impact. The Syncfusion DataGrid is a robust tool for managing data display and processing from your data source. It comes with numerous built-in features and offers extensive customization options to suit your needs.',
13+
DocLink: 'https://ej2.syncfusion.com/react/documentation/grid/getting-started',
14+
DemoLink: 'https://ej2.syncfusion.com/react/demos/#/fluent2/grid/overview',
15+
ImgPath: img1,
16+
},
17+
{
18+
ID: 2,
19+
Content: 'The Syncfusion DataGrid component efficiently displays real-time data updates and processes data without any performance loss. Additionally, the Syncfusion Chart component is perfect for applying technical analysis using trading formulas such as RSI, EMA, ATR, SMA, TMA, MACD, Bollinger Bands, Stochastic, Accumulation Distribution, and more. The Syncfusion Chart component offers a wide range of features that allow you to visually compare your data, helping you identify both growth opportunities and challenges in your business.',
20+
DocLink: 'https://ej2.syncfusion.com/react/documentation/chart/getting-started',
21+
DemoLink: 'https://ej2.syncfusion.com/react/demos/#/fluent2/chart/overview',
22+
ImgPath: img2,
23+
},
24+
{
25+
ID: 3,
26+
Content: 'Syncfusion offers a wide range of tools to simplify app development. These include data visualization (charts, maps), data management (grids, spreadsheets), and file handling (PDFs, Excel). You can also find input controls, reporting tools, and various UI components like menus, calendars, and notifications. The tools are customizable, work across multiple platforms, and help you build feature-rich, high-performance applications efficiently.',
27+
DocLink: 'https://ej2.syncfusion.com/react/documentation/introduction',
28+
DemoLink: 'https://ej2.syncfusion.com/',
29+
ImgPath: img3,
30+
},
31+
{
32+
ID: 4,
33+
Content: 'Syncfusion offers a wide range of tools to simplify app development. These include data visualization (charts, maps), data management (grids, spreadsheets), and file handling (PDFs, Excel). You can also find input controls, reporting tools, and various UI components like menus, calendars, and notifications. The tools are customizable, work across multiple platforms, and help you build feature-rich, high-performance applications efficiently.',
34+
DocLink: 'https://ej2.syncfusion.com/react/documentation/introduction',
35+
DemoLink: 'https://ej2.syncfusion.com/',
36+
ImgPath: img4,
37+
}
3338
];
34-
let showButtons: any = "Hidden";
3539
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-
};
40+
return (
41+
<div className="product-container">
42+
<div className="col-sm-5 component-container">
43+
<div className="heading">{props.ContentTitle || 'Product Information'}</div>
44+
<div className="description">{props.Content}</div>
45+
<p className="card-text">For more information, please refer to the {' '}
46+
<a href={props.DocLink} target="_blank" rel="noopener noreferrer">
47+
documentation
48+
</a> and {' '}
49+
<a href={props.DemoLink} target="_blank" rel="noopener noreferrer">
50+
demo
51+
</a>.
52+
</p>
53+
</div>
54+
<div className="col-sm-5 image-container">
55+
<picture>
56+
<img width="100%" height="100%" src={props.ImgPath} alt="Product" />
57+
</picture>
58+
</div>
59+
</div>
60+
);
61+
}
62+
63+
return (
64+
<div className='control-pane'>
65+
<div className='control-section kb-carousel-section'>
66+
<div className='control carousel-sample'>
67+
<CarouselComponent id='carousel' buttonsVisibility='Hidden' autoPlay={true} cssClass="kb-carousel">
68+
<CarouselItemsDirective>
69+
{productDetails.map(item => (
70+
<CarouselItemDirective key={item.ID} template={() => productTemplate(item)} />
71+
))}
72+
</CarouselItemsDirective>
73+
</CarouselComponent>
74+
</div>
75+
</div>
76+
</div>
77+
);
78+
}

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

Lines changed: 31 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,15 @@ export default function Overview(props: { changeMarquee: Function, myStockDm: Da
101101
args.cell!.classList.add('e-neg');
102102
}
103103
}
104+
if (args.cell.classList.contains('e-unboundcell')) {
105+
var myWishList = getWishList();
106+
if (myWishList.indexOf((args.data as StockDetails).CompanyName) > -1) {
107+
var btn = args.cell.querySelector('.addmywishlist');
108+
if (btn) {
109+
btn.classList.add('added');
110+
}
111+
}
112+
}
104113
};
105114

106115
const OnSelect = (args: SelectEventArgs) => {
@@ -146,26 +155,32 @@ export default function Overview(props: { changeMarquee: Function, myStockDm: Da
146155
}
147156
};
148157

149-
function commandClick(args: CommandClickEventArgs) {
150-
if (args.target!.querySelector('.addmywishlist')) {
151-
let myWishList = [];
152-
let predicates: Predicate[] = [];
153-
if (window.localStorage.myStocks) {
154-
let persistQuery = JSON.parse(window.localStorage.myStocks);
155-
if (persistQuery.queries) {
156-
for (let i = 0; i < persistQuery.queries.length; i++) {
157-
if (persistQuery.queries[i].fn === 'onWhere') {
158-
for (
159-
let j = 0;
160-
j < persistQuery.queries[i].e.predicates.length;
161-
j++
162-
) {
163-
myWishList.push(persistQuery.queries[i].e.predicates[j].value);
164-
}
158+
function getWishList() {
159+
let myWishList = [];
160+
if (window.localStorage.myStocks) {
161+
let persistQuery = JSON.parse(window.localStorage.myStocks);
162+
if (persistQuery.queries) {
163+
for (let i = 0; i < persistQuery.queries.length; i++) {
164+
if (persistQuery.queries[i].fn === 'onWhere') {
165+
for (
166+
let j = 0;
167+
j < persistQuery.queries[i].e.predicates.length;
168+
j++
169+
) {
170+
myWishList.push(persistQuery.queries[i].e.predicates[j].value);
165171
}
166172
}
167173
}
168174
}
175+
}
176+
return myWishList;
177+
}
178+
179+
function commandClick(args: CommandClickEventArgs) {
180+
if (args.target!.querySelector('.addmywishlist')) {
181+
args.target.classList.add('added');
182+
let myWishList = getWishList();
183+
let predicates: Predicate[] = [];
169184
if (myWishList.indexOf((args.rowData as StockDetails).CompanyName) === -1) {
170185
myWishList.push((args.rowData as StockDetails).CompanyName);
171186
}
@@ -175,17 +190,6 @@ export default function Overview(props: { changeMarquee: Function, myStockDm: Da
175190
let query: Query = new Query().where(Predicate.or(predicates));
176191
(props.myStockDm as any).persistQuery = query;
177192
props.myStockDm.setPersistData({} as any, 'myStocks', query);
178-
if (myWishList.length) {
179-
const myWishlistIcon = args.target.querySelector('.addmywishlist');
180-
if (myWishlistIcon) {
181-
myWishlistIcon.classList.remove('addmywishlist');
182-
myWishlistIcon.classList.add('addedmywishlist');
183-
}
184-
if (args.target.classList.contains('e-primary')) {
185-
args.target.classList.remove('e-primary');
186-
args.target.classList.add('e-success');
187-
}
188-
}
189193
}
190194
if (args.target!.querySelector('.analysis')) {
191195
navigate('/stock_analysis', {

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

Lines changed: 31 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -128,28 +128,43 @@ export default function SmartStockPicks(props: { myStockDm: DataManager }) {
128128
args.cell!.classList.add('e-neg');
129129
}
130130
}
131+
if (args.cell.classList.contains('e-unboundcell')) {
132+
var myWishList = getWishList();
133+
if (myWishList.indexOf((args.data as StockDetails).CompanyName) > -1) {
134+
var btn = args.cell.querySelector('.addmywishlist');
135+
if (btn) {
136+
btn.classList.add('added');
137+
}
138+
}
139+
}
131140
};
132141

133-
function commandClick(args: CommandClickEventArgs) {
134-
if (args.target!.querySelector('.addmywishlist')) {
135-
let myWishList = [];
136-
let predicates: Predicate[] = [];
137-
if (window.localStorage.myStocks) {
138-
let persistQuery = JSON.parse(window.localStorage.myStocks);
139-
if (persistQuery.queries) {
140-
for (let i = 0; i < persistQuery.queries.length; i++) {
141-
if (persistQuery.queries[i].fn === 'onWhere') {
142-
for (
143-
let j = 0;
144-
j < persistQuery.queries[i].e.predicates.length;
145-
j++
146-
) {
147-
myWishList.push(persistQuery.queries[i].e.predicates[j].value);
148-
}
142+
function getWishList() {
143+
let myWishList = [];
144+
if (window.localStorage.myStocks) {
145+
let persistQuery = JSON.parse(window.localStorage.myStocks);
146+
if (persistQuery.queries) {
147+
for (let i = 0; i < persistQuery.queries.length; i++) {
148+
if (persistQuery.queries[i].fn === 'onWhere') {
149+
for (
150+
let j = 0;
151+
j < persistQuery.queries[i].e.predicates.length;
152+
j++
153+
) {
154+
myWishList.push(persistQuery.queries[i].e.predicates[j].value);
149155
}
150156
}
151157
}
152158
}
159+
}
160+
return myWishList;
161+
}
162+
163+
function commandClick(args: CommandClickEventArgs) {
164+
if (args.target!.querySelector('.addmywishlist')) {
165+
args.target.classList.add('added');
166+
let myWishList = getWishList();
167+
let predicates: Predicate[] = [];
153168
if (myWishList.indexOf((args.rowData as StockDetails).CompanyName) === -1) {
154169
myWishList.push((args.rowData as StockDetails).CompanyName);
155170
}

0 commit comments

Comments
 (0)