fixed dropdown issues

suyeshs · Sep 23, 2023 · 0f7a412 · 0f7a412
1 parent d7b3f3b
commit 0f7a412
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 12 deletions.
diff --git a/src/nifty-expiry-dates.json b/src/nifty-expiry-dates.json
@@ -0,0 +1,22 @@
+{
+"expiryDates": [
+    "28-Sep-2023",
+    "05-Oct-2023",
+    "12-Oct-2023",
+    "19-Oct-2023",
+    "26-Oct-2023",
+    "02-Nov-2023",
+    "30-Nov-2023",
+    "28-Dec-2023",
+    "28-Mar-2024",
+    "27-Jun-2024",
+    "26-Dec-2024",
+    "26-Jun-2025",
+    "24-Dec-2025",
+    "25-Jun-2026",
+    "31-Dec-2026",
+    "24-Jun-2027",
+    "30-Dec-2027",
+    "29-Jun-2028"
+]
+}
diff --git a/src/pages/nse-options/index.tsx b/src/pages/nse-options/index.tsx
@@ -5,7 +5,7 @@ import styles from './syncoptions.module.css';
 import { NseOptionData } from '../../types';
 import { DataManager, UrlAdaptor,  } from '@syncfusion/ej2-data';
 import { initializeNseFetchStore, NseFetchStore } from '../../stores/NseFetchStore';
-import { DropDownListComponent, FilteringEventArgs } from '@syncfusion/ej2-react-dropdowns';
+import { DropDownListComponent, MultiSelectComponent} from '@syncfusion/ej2-react-dropdowns';
 import { initializeExpiryDateStore, ExpiryDateStore } from '../../stores/ExpiryDateStore';
 import { initializeSymbolStore, SymbolStore } from '../../stores/SymbolsStore';
 import { DefaultStore } from '../../stores/DefaultStore';
@@ -147,14 +147,14 @@ const NseFlatDataOptions = observer(({ initialData, initialStock }: { initialDat
         return (
           <div>
             <div className={styles.rowNumbers}>{rowData[`${type}_lastPrice`]}</div>
-            <div className={styles.rowNumbers}>Delta: {rowData[`${type}_delta`]}</div>
+            <div className={styles.rowNumbers}>Delta: {rowData[`${type}_delta`] ? Number(rowData[`${type}_delta`]).toFixed(2) : 'N/A'}</div>
           </div>
         );
       case 'Vega':
         const color = rowData[`${type}_changeinOpenInterest`] > 0 ? 'green' : 'red';
         const changeInOI = Math.abs(rowData[`${type}_changeinOpenInterest`]);
         const maxSize = type === 'CE' ? 5000 : 10000;
-        const size = Math.min(changeInOI / maxSize * 20, 50);
+        const size = Math.min(changeInOI / maxSize * 10, 100);
         const progressStyle = {
           backgroundColor: color === 'green' ? '#00ff00' : '#ff0000',
           width: `${size}%`,
@@ -263,6 +263,25 @@ const NseFlatDataOptions = observer(({ initialData, initialStock }: { initialDat
                 }}
               />
             </div>
+            <div>
+            <MultiSelectComponent
+              placeholder="Select Expiry Dates"
+              dataSource={expiryDateStore?.expiryDates || []}
+              mode="Box"
+              change={(e) => {
+                const selectedExpiryDates = e.value as string[];
+                if (selectedExpiryDates.length > 2) {
+                  alert('You can only select a maximum of two expiry dates.');
+                  return;
+                }
+                selectedExpiryDates.forEach((selectedExpiryDate) => {
+                  onUserSelectDate(selectedExpiryDate); // Call onUserSelectDate when a new date is selected
+                });
+              }}
+            />
+
+
+            </div>
           </div>
 
           <div>
@@ -289,11 +308,7 @@ const NseFlatDataOptions = observer(({ initialData, initialStock }: { initialDat
                 <ColumnDirective field="PE_VOLUME" headerText="VOLUME" template={(rowData: any) => cellTemplate('PE', 'Gamma', rowData)} headerTextAlign="Center" />
                 <ColumnDirective field="PE_OI" headerText="OI" template={(rowData: any) => cellTemplate('PE', 'Vega', rowData)} headerTextAlign="Center" />
               </ColumnsDirective>
-              <div style={{ display: 'flex' }}>
-                <div style={{ flex: '1 1 auto' }}>Total CE Open Interest: {totalCE_openInterest}</div>
-                <div style={{ flex: '1 1 auto' }}>Total CE Total Traded Volume: {totalCE_totalTradedVolume}</div>
-                {/* ... other totals ... */}
-              </div>
+
             </GridComponent>
           </div>
           <div>

diff --git a/src/stores/ExpiryDateStore.ts b/src/stores/ExpiryDateStore.ts
@@ -1,5 +1,6 @@
 import { makeObservable, observable, action } from 'mobx';
 import axios from 'axios';
+import expiryDates from '../nifty-expiry-dates.json';
 
 // Caching utility, mimicking SWR's caching mechanism
 const cache = new Map();
@@ -31,13 +32,13 @@ export class ExpiryDateStore {
 
     const url = `https://tradepodapisrv.azurewebsites.net/api/get-expiry/?symbol=${encodeURIComponent(symbol)}`;
     console.log(`Generated URL for Symbol ${symbol}:`, url);
-
+  
     if (cache.has(url)) {
       this.setExpiryDates(cache.get(url));
       this.isLoading = false;
       return;
     }
-
+  
     try {
       const data = await fetcher(url);
 
@@ -51,7 +52,9 @@ export class ExpiryDateStore {
       }
     } catch (error) {
       console.error(`Error fetching expiry dates for symbol: ${symbol}`, error);
-      this.setExpiryDates([]); // Clear the expiry dates in case of an error
+
+        // Then, when you need to use it, access the `expiryDates` property:
+        this.setExpiryDates(expiryDates.expiryDates);
     } finally {
       this.isLoading = false;
     }

diff --git a/src/stores/NseFetchStore.ts b/src/stores/NseFetchStore.ts
@@ -54,7 +54,8 @@ export class NseFetchStore {
 
     if (typeof window !== 'undefined') {
       this.intervalId = window.setInterval(() => {
-        this.fetchData(this.symbol || 'NIFTY', this.expiryDate || '');
+        const expiryDate = this.expiryDate || this.defaultStore.expiryDate || '';
+        this.fetchData(this.symbol || 'NIFTY', expiryDate);
       }, 18000);
     }
   }