932646: Enhancing the UI for a More Attractive Stock Management Application with tailwind3.

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

@@ -1,52 +1,78 @@
 import * as React from 'react';
-import { useEffect } from 'react';
 import { CarouselComponent, CarouselItemsDirective, CarouselItemDirective } from '@syncfusion/ej2-react-navigations';
-
+import * as img1 from '../images/1.png';
+import * as img2 from '../images/2.png';
+import * as img3 from '../images/3.png';
+import * as img4 from '../images/4.png';
 
 export default function KnowMore() {
-  let productDetails = [
-      {
-          ID: 1,
-          Title: 'Trend Line',
-          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.',
-          ImgPath: 'images/1.jpg',
-        //   URL: 'https://en.wikipedia.org/wiki/San_Francisco'
-      }, {
-          ID: 2,
-          Title: 'Trend Line',
-          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.',
-          ImgPath: 'images/2.jpg',
-        //   URL: 'https://en.wikipedia.org/wiki/London'
-      }, {
-          ID: 3,
-          Title: 'Trend Line',
-          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.',
-          ImgPath: 'images/3.jpg',
-        //   URL: 'https://en.wikipedia.org/wiki/Tokyo'
-      }, {
-          ID: 4,
-          Title: 'Trend Line',
-          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.',
-          ImgPath: 'images/4.jpg',
-        //   URL: 'https://en.wikipedia.org/wiki/Moscow'
-      }
+  const productDetails = [
+    {
+      ID: 1,
+      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.',
+      DocLink: 'https://ej2.syncfusion.com/react/documentation/grid/getting-started',
+      DemoLink: 'https://ej2.syncfusion.com/react/demos/#/fluent2/grid/overview',
+      ImgPath: img1,
+    },
+    {
+      ID: 2,
+      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.',
+      DocLink: 'https://ej2.syncfusion.com/react/documentation/chart/getting-started',
+      DemoLink: 'https://ej2.syncfusion.com/react/demos/#/fluent2/chart/overview',
+      ImgPath: img2,
+    },
+    {
+      ID: 3,
+      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.',
+      DocLink: 'https://ej2.syncfusion.com/react/documentation/introduction',
+      DemoLink: 'https://ej2.syncfusion.com/',
+      ImgPath: img3,
+    },
+    {
+      ID: 4,
+      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.',
+      DocLink: 'https://ej2.syncfusion.com/react/documentation/introduction',
+      DemoLink: 'https://ej2.syncfusion.com/',
+      ImgPath: img4,
+    }
   ];
-  let showButtons: any = "Hidden";
   const productTemplate = (props: any) => {
-      return (<div className="card">
-              <img src={props.ImgPath} alt={props.Title} className="card-img-top" style={{ height: "370px", width: "100%" }}/>
-              <div className="card-body" style={{ padding: "1rem" }}>
-                  <h1 className="card-title">{props.Title}</h1>
-                  <p className="card-text">{props.Content}</p>
-              </div>
-          </div>);
-  };
-  return (<div className='control-pane'>
-          <div className='control-section db-carousel-section'>
-              <div className='control carousel-sample'>
-                  {/* Render the Carousel Component */}
-                  <CarouselComponent cssClass="db-carousel" animationEffect="Fade" dataSource={productDetails} buttonsVisibility={showButtons} itemTemplate={productTemplate}></CarouselComponent>
-              </div>
-          </div>
-      </div>);
-};
+    return (
+      <div className="product-container">
+        <div className="col-sm-5 component-container">
+          <div className="heading">{props.ContentTitle || 'Product Information'}</div>
+          <div className="description">{props.Content}</div>
+          <p className="card-text">For more information, please refer to the {' '}
+          <a href={props.DocLink} target="_blank" rel="noopener noreferrer">
+            documentation
+          </a> and {' '}
+          <a href={props.DemoLink} target="_blank" rel="noopener noreferrer">
+            demo
+          </a>.
+          </p>
+        </div>
+        <div className="col-sm-5 image-container">
+          <picture>
+            <img width="100%" height="100%" src={props.ImgPath} alt="Product" />
+          </picture>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className='control-pane'>
+      <div className='control-section kb-carousel-section'>
+        <div className='control carousel-sample'>
+          <CarouselComponent id='carousel' buttonsVisibility='Hidden' autoPlay={true} cssClass="kb-carousel">
+            <CarouselItemsDirective>
+              {productDetails.map(item => (
+                <CarouselItemDirective key={item.ID} template={() => productTemplate(item)} />
+              ))}
+            </CarouselItemsDirective>
+          </CarouselComponent>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -101,6 +101,15 @@ export default function Overview(props: { changeMarquee: Function, myStockDm: Da
         args.cell!.classList.add('e-neg');
       }
     }
+    if (args.cell.classList.contains('e-unboundcell')) {
+      var myWishList = getWishList();
+      if (myWishList.indexOf((args.data as StockDetails).CompanyName) > -1) {
+        var btn = args.cell.querySelector('.addmywishlist');
+        if (btn) {
+          btn.classList.add('added');
+        }
+      }
+    }
   };
 
   const OnSelect = (args: SelectEventArgs) => {
@@ -146,26 +155,32 @@ export default function Overview(props: { changeMarquee: Function, myStockDm: Da
     }
   };
 
-  function commandClick(args: CommandClickEventArgs) {
-    if (args.target!.querySelector('.addmywishlist')) {
-      let myWishList = [];
-      let predicates: Predicate[] = [];
-      if (window.localStorage.myStocks) {
-        let persistQuery = JSON.parse(window.localStorage.myStocks);
-        if (persistQuery.queries) {
-          for (let i = 0; i < persistQuery.queries.length; i++) {
-            if (persistQuery.queries[i].fn === 'onWhere') {
-              for (
-                let j = 0;
-                j < persistQuery.queries[i].e.predicates.length;
-                j++
-              ) {
-                myWishList.push(persistQuery.queries[i].e.predicates[j].value);
-              }
+  function getWishList() {
+    let myWishList = [];
+    if (window.localStorage.myStocks) {
+      let persistQuery = JSON.parse(window.localStorage.myStocks);
+      if (persistQuery.queries) {
+        for (let i = 0; i < persistQuery.queries.length; i++) {
+          if (persistQuery.queries[i].fn === 'onWhere') {
+            for (
+              let j = 0;
+              j < persistQuery.queries[i].e.predicates.length;
+              j++
+            ) {
+              myWishList.push(persistQuery.queries[i].e.predicates[j].value);
             }
           }
         }
       }
+    }
+    return myWishList;
+  }
+
+  function commandClick(args: CommandClickEventArgs) {
+    if (args.target!.querySelector('.addmywishlist')) {
+      args.target.classList.add('added');
+      let myWishList = getWishList();
+      let predicates: Predicate[] = [];
       if (myWishList.indexOf((args.rowData as StockDetails).CompanyName) === -1) {
         myWishList.push((args.rowData as StockDetails).CompanyName);
       }
@@ -175,17 +190,6 @@ export default function Overview(props: { changeMarquee: Function, myStockDm: Da
       let query: Query = new Query().where(Predicate.or(predicates));
       (props.myStockDm as any).persistQuery = query;
       props.myStockDm.setPersistData({} as any, 'myStocks', query);
-      if (myWishList.length) {
-        const myWishlistIcon = args.target.querySelector('.addmywishlist');
-        if (myWishlistIcon) {
-          myWishlistIcon.classList.remove('addmywishlist');
-          myWishlistIcon.classList.add('addedmywishlist');
-        }
-        if (args.target.classList.contains('e-primary')) {
-          args.target.classList.remove('e-primary');
-          args.target.classList.add('e-success');
-        }
-      }
     }
     if (args.target!.querySelector('.analysis')) {
       navigate('/stock_analysis', {

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

@@ -128,28 +128,43 @@ export default function SmartStockPicks(props: { myStockDm: DataManager }) {
         args.cell!.classList.add('e-neg');
       }
     }
+    if (args.cell.classList.contains('e-unboundcell')) {
+      var myWishList = getWishList();
+      if (myWishList.indexOf((args.data as StockDetails).CompanyName) > -1) {
+        var btn = args.cell.querySelector('.addmywishlist');
+        if (btn) {
+          btn.classList.add('added');
+        }
+      }
+    }
   };
 
-  function commandClick(args: CommandClickEventArgs) {
-    if (args.target!.querySelector('.addmywishlist')) {
-      let myWishList = [];
-      let predicates: Predicate[] = [];
-      if (window.localStorage.myStocks) {
-        let persistQuery = JSON.parse(window.localStorage.myStocks);
-        if (persistQuery.queries) {
-          for (let i = 0; i < persistQuery.queries.length; i++) {
-            if (persistQuery.queries[i].fn === 'onWhere') {
-              for (
-                let j = 0;
-                j < persistQuery.queries[i].e.predicates.length;
-                j++
-              ) {
-                myWishList.push(persistQuery.queries[i].e.predicates[j].value);
-              }
+  function getWishList() {
+    let myWishList = [];
+    if (window.localStorage.myStocks) {
+      let persistQuery = JSON.parse(window.localStorage.myStocks);
+      if (persistQuery.queries) {
+        for (let i = 0; i < persistQuery.queries.length; i++) {
+          if (persistQuery.queries[i].fn === 'onWhere') {
+            for (
+              let j = 0;
+              j < persistQuery.queries[i].e.predicates.length;
+              j++
+            ) {
+              myWishList.push(persistQuery.queries[i].e.predicates[j].value);
             }
           }
         }
       }
+    }
+    return myWishList;
+  }
+
+  function commandClick(args: CommandClickEventArgs) {
+    if (args.target!.querySelector('.addmywishlist')) {
+      args.target.classList.add('added');
+      let myWishList = getWishList();
+      let predicates: Predicate[] = [];
       if (myWishList.indexOf((args.rowData as StockDetails).CompanyName) === -1) {
         myWishList.push((args.rowData as StockDetails).CompanyName);
       }