Skip to content

Commit

Permalink
Updated display
Browse files Browse the repository at this point in the history
  • Loading branch information
@suyeshs
suyeshs committed Oct 4, 2023
1 parent e3cc604 commit 71923b9
Show file tree
Hide file tree
Showing 3 changed files with 79 additions and 26 deletions.
68 changes: 45 additions & 23 deletions src/pages/breeze/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@ import { DataManager, UrlAdaptor, } from '@syncfusion/ej2-data';
import { initializeBreezeFetchStore, BreezeFetchStore } from '../../stores/BreezeStore';
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';
import expiryDates from './nifty-expiry-dates.json';
import symbols from './symbols.json';


const BreezeFlatDataOptions = observer(({ initialData, initialStock }: { initialData: BreezeOptionData[], initialStock: string }) => {
Expand All @@ -22,12 +22,13 @@ const BreezeFlatDataOptions = observer(({ initialData, initialStock }: { initial
const [userSelectedStock, setUserSelectedStock] = useState(initialStock || '');
// Add a new state to store the selected expiry dates
const [selectedExpiryDates, setSelectedExpiryDates] = useState<string[]>([]);
const [prevInstrumentValue, setPrevInstrumentValue] = useState<number | null>(null);

const dataManager = new DataManager({
json: initialData,
adaptor: new UrlAdaptor(),
});
const [symbolStore, setSymbolStore] = useState<{ symbolStore: SymbolStore } | null>(null);

const onUserSelectDate = (newDate: string) => {
console.log(`Expiry date changed to: ${newDate}`); // Log the new expiry date
// Update expiryDate in the store
Expand All @@ -37,9 +38,7 @@ const BreezeFlatDataOptions = observer(({ initialData, initialStock }: { initial
store?.breezeFetchStore.fetchData(userSelectedStock, newDate);
};

useEffect(() => {
symbolStore?.symbolStore.fetchSymbols();
}, [symbolStore]);



useEffect(() => {
Expand Down Expand Up @@ -67,6 +66,12 @@ const BreezeFlatDataOptions = observer(({ initialData, initialStock }: { initial
});
}, []);

useEffect(() => {
if (store?.breezeFetchStore?.data && 'CE_underlyingValue' in store.breezeFetchStore.data[0]) {
setPrevInstrumentValue(store.breezeFetchStore.data[0].CE_underlyingValue);
}
}, [store?.breezeFetchStore?.data]);

useEffect(() => {
return () => {
store?.breezeFetchStore.dispose();
Expand Down Expand Up @@ -253,9 +258,26 @@ const BreezeFlatDataOptions = observer(({ initialData, initialStock }: { initial
) : (
<div>
<div className= {styles.actionRow}>
<div className={styles.eCard} id="basic">
<div> Instrument: {store?.breezeFetchStore.data?.[0]?.CE_underlyingValue || 'N/A'}</div>
</div>
<div className={styles.eCard} id="basic">
{
(() => {
const data = store?.breezeFetchStore?.data;
const underlyingValue = data?.[0]?.CE_underlyingValue || 'N/A';
const difference = data && data.length > 0 && 'CE_underlyingValue' in data[0]
? data[0].CE_underlyingValue - (prevInstrumentValue || 0)
: 0;

return (
<div>
Instrument: {underlyingValue}
<span style={{ color: difference > 0 ? 'darkgreen' : 'red', fontSize: '10px', marginLeft: '10px' }}>
({difference.toFixed(2)})
</span>
</div>
);
})()
}
</div>

<div className={styles.stylebox}> {/* This is the new div for selecting range */}
{[3,5,10].map(num => (
Expand All @@ -281,20 +303,20 @@ const BreezeFlatDataOptions = observer(({ initialData, initialStock }: { initial
</div>
<div>
<DropDownListComponent
placeholder="Select Instrument"
dataSource={symbolStore?.symbolStore.symbols || []}
value={userSelectedStock}
change={(e) => {
const selectedSymbol = e.value as string;
setUserSelectedStock(selectedSymbol);
store?.breezeFetchStore.setSymbol(selectedSymbol);
expiryDateStore?.fetchExpiryDatesForSymbol(selectedSymbol).then(() => {
const firstExpiryDate = expiryDateStore.expiryDates[0] || '';
setExpiryDate(firstExpiryDate);
store?.breezeFetchStore.setExpiryDate(firstExpiryDate);
});
}}
/>
placeholder="Select Instrument"
dataSource={symbols}
value={userSelectedStock}
change={(e) => {
const selectedSymbol = e.value as string;
setUserSelectedStock(selectedSymbol);
store?.breezeFetchStore.setSymbol(selectedSymbol);
expiryDateStore?.fetchExpiryDatesForSymbol(selectedSymbol).then(() => {
const firstExpiryDate = expiryDateStore.expiryDates[0] || '';
setExpiryDate(firstExpiryDate);
store?.breezeFetchStore.setExpiryDate(firstExpiryDate);
});
}}
/>
</div>
<div>
<MultiSelectComponent
Expand Down
35 changes: 33 additions & 2 deletions src/pages/nse-options/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@ const NseFlatDataOptions = observer(({ initialData, initialStock }: { initialDat
const [userSelectedStock, setUserSelectedStock] = useState(initialStock || '');
// Add a new state to store the selected expiry dates
const [selectedExpiryDates, setSelectedExpiryDates] = useState<string[]>([]);
// Add a new state to store the previous instrument value
const [prevInstrumentValue, setPrevInstrumentValue] = useState<number | null>(null);

const dataManager = new DataManager({
json: initialData,
Expand Down Expand Up @@ -67,13 +69,25 @@ const NseFlatDataOptions = observer(({ initialData, initialStock }: { initialDat
});
}, [initialData, initialStock]); // Removed store from the dependency array

useEffect(() => {
// Get the current instrument value
const currentInstrumentValue = store?.nseFetchStore.data?.[0]?.CE_underlyingValue || store?.nseFetchStore.data?.[0]?.PE_underlyingValue || null;

// If the current instrument value is not null, update the previous instrument value
if (currentInstrumentValue !== null) {
setPrevInstrumentValue(currentInstrumentValue);
}
}, [store]);

useEffect(() => {
return () => {
store?.nseFetchStore.dispose();
};
}, [store]);




const atmIndex = store?.nseFetchStore.atmStrikeIndex || 0;
const startSliceIndex = Math.max(atmIndex - selectedRange, 0); // Updated to use selectedRange
console.log('Start Slice Index:', startSliceIndex);
Expand Down Expand Up @@ -219,8 +233,25 @@ const NseFlatDataOptions = observer(({ initialData, initialStock }: { initialDat
) : (
<div>
<div className= {styles.actionRow}>
<div className={styles.eCard} id="basic">
<div> Instrument: {store?.nseFetchStore.data?.[0]?.CE_underlyingValue || store?.nseFetchStore.data?.[0]?.PE_underlyingValue || 'N/A'}</div>
<div className={styles.eCard} id="basic">
{
(() => {
const data = store?.nseFetchStore?.data;
const underlyingValue = data?.[0]?.CE_underlyingValue || data?.[0]?.PE_underlyingValue || 'N/A';
const difference = data && data.length > 0 && 'CE_underlyingValue' in data[0]
? data[0].CE_underlyingValue - (prevInstrumentValue || 0)
: 0;

return (
<div>
Instrument: {underlyingValue}
<span style={{ color: difference > 0 ? 'darkgreen' : 'red', fontSize: '12px', marginLeft: '5px' }}>
({difference.toFixed(2)})
</span>
</div>
);
})()
}
</div>

<div className={styles.stylebox}> {/* This is the new div for selecting range */}
Expand Down
2 changes: 1 addition & 1 deletion src/stores/BreezeStore.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,7 @@ export class BreezeFetchStore {
this.isLoading = true;

try {
const response = await axios.get(`https://tradepodapisrv.azurewebsites.net/api/option-chain-breeze/?symbol=NIFTY&expiry_date=05-Oct-2023`);
const response = await axios.get(`http://127.0.0.1:8000/api/option-chain-breeze/?symbol=NIFTY&expiry_date=05-Oct-2023`);
const data = response.data as BreezeApiResponse;

if (data && data.nse_options_data) {
Expand Down

0 comments on commit 71923b9

Please sign in to comment.