From cff035ae7cd505c901d4310bb50e10989177a5a1 Mon Sep 17 00:00:00 2001 From: Suyesh Shankar Date: Fri, 19 Apr 2024 08:09:06 +0530 Subject: [PATCH] updated expiry data --- package-lock.json | 188 ++++++++++++--------- package.json | 1 + src/app/components/DataGrid/ReactTable.tsx | 49 +++--- src/hooks/useSocketMobx.ts | 2 +- 4 files changed, 135 insertions(+), 105 deletions(-) diff --git a/package-lock.json b/package-lock.json index 281d118..c4357fc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,7 @@ "@emotion/styled": "^11.11.0", "@mui/icons-material": "^5.11.16", "@mui/material": "^5.13.5", + "@mui/x-data-grid": "^7.2.0", "@react-oauth/google": "^0.11.0", "@reduxjs/toolkit": "^1.9.7", "@syncfusion/ej2-base": "^22.1.34", @@ -2332,9 +2333,9 @@ "dev": true }, "node_modules/@babel/runtime": { - "version": "7.23.5", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.5.tgz", - "integrity": "sha512-NdUTHcPe4C99WxPub+K9l9tK5/lV4UXIoaHSYgzco9BCyjKAAwzdBI+wWtYqHt7LJdbo74ZjRPJgzVweq1sz0w==", + "version": "7.24.4", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.4.tgz", + "integrity": "sha512-dkxf7+hn8mFBwKjs9bvBlArzLVxVbS8usaPUDd5p2a9JCL9tB8OaOVN1isD4+Xyk4ns89/xeOmbQvgdK7IIVdA==", "dependencies": { "regenerator-runtime": "^0.14.0" }, @@ -3095,28 +3096,28 @@ "integrity": "sha512-Dq5rYfEpdeel0bLVN+nfD1VWmzCkK+pJbSjIawGE+RY4+NIJqhbUDDQjvV0NUK84fMfwxvtFoCtEe70HfZjFcw==" }, "node_modules/@floating-ui/core": { - "version": "1.5.0", - "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.0.tgz", - "integrity": "sha512-kK1h4m36DQ0UHGj5Ah4db7R0rHemTqqO0QLvUqi1/mUUp3LuAWbWxdxSIf/XsnH9VS6rRVPLJCncjRzUvyCLXg==", + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.0.tgz", + "integrity": "sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==", "dependencies": { - "@floating-ui/utils": "^0.1.3" + "@floating-ui/utils": "^0.2.1" } }, "node_modules/@floating-ui/dom": { - "version": "1.5.3", - "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.3.tgz", - "integrity": "sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==", + "version": "1.6.3", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.3.tgz", + "integrity": "sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw==", "dependencies": { - "@floating-ui/core": "^1.4.2", - "@floating-ui/utils": "^0.1.3" + "@floating-ui/core": "^1.0.0", + "@floating-ui/utils": "^0.2.0" } }, "node_modules/@floating-ui/react-dom": { - "version": "2.0.4", - "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.4.tgz", - "integrity": "sha512-CF8k2rgKeh/49UrnIBs4BdxPUV6vize/Db1d/YbCLyp9GiVZ0BEwf5AiDSxJRCr6yOkGqTFHtmrULxkEfYZ7dQ==", + "version": "2.0.8", + "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.8.tgz", + "integrity": "sha512-HOdqOt3R3OGeTKidaLvJKcgg75S6tibQ3Tif4eyd91QnIJWr0NLvoXFpJA/j8HqkFSL68GDca9AuyWEHlhyClw==", "dependencies": { - "@floating-ui/dom": "^1.5.1" + "@floating-ui/dom": "^1.6.1" }, "peerDependencies": { "react": ">=16.8.0", @@ -3124,9 +3125,9 @@ } }, "node_modules/@floating-ui/utils": { - "version": "0.1.6", - "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz", - "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==" + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz", + "integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==" }, "node_modules/@grpc/grpc-js": { "version": "1.7.3", @@ -3469,16 +3470,16 @@ } }, "node_modules/@mui/base": { - "version": "5.0.0-beta.25", - "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.25.tgz", - "integrity": "sha512-Iiv+IcappRRv6IBlknIVmLkXxfp51NEX1+l9f+dIbBuPU4PaRULegr1lCeHKsC45KU5ruxM5xMg4R/de03aJQg==", - "dependencies": { - "@babel/runtime": "^7.23.4", - "@floating-ui/react-dom": "^2.0.4", - "@mui/types": "^7.2.10", - "@mui/utils": "^5.14.19", + "version": "5.0.0-beta.40", + "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.40.tgz", + "integrity": "sha512-I/lGHztkCzvwlXpjD2+SNmvNQvB4227xBXhISPjEaJUXGImOQ9f3D2Yj/T3KasSI/h0MLWy74X0J6clhPmsRbQ==", + "dependencies": { + "@babel/runtime": "^7.23.9", + "@floating-ui/react-dom": "^2.0.8", + "@mui/types": "^7.2.14", + "@mui/utils": "^5.15.14", "@popperjs/core": "^2.11.8", - "clsx": "^2.0.0", + "clsx": "^2.1.0", "prop-types": "^15.8.1" }, "engines": { @@ -3500,9 +3501,9 @@ } }, "node_modules/@mui/core-downloads-tracker": { - "version": "5.14.19", - "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.19.tgz", - "integrity": "sha512-y4JseIen5pmZs1n9hHy95HKKioKco8f6N2lford2AmjJigVJOv0KsU0qryiCpyuEUZmi/xCduVilHsK9DSkPcA==", + "version": "5.15.15", + "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.15.tgz", + "integrity": "sha512-aXnw29OWQ6I5A47iuWEI6qSSUfH6G/aCsW9KmW3LiFqr7uXZBK4Ks+z8G+qeIub8k0T5CMqlT2q0L+ZJTMrqpg==", "funding": { "type": "opencollective", "url": "https://opencollective.com/mui-org" @@ -3534,19 +3535,19 @@ } }, "node_modules/@mui/material": { - "version": "5.14.19", - "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.14.19.tgz", - "integrity": "sha512-jSPLXst/YPgDGolhiu4rbethKjLVrI1IkoK8YrFUv8ygxDuhQdsE6+ZqjSSRXk3ytTMf6ghPnQ88OFRk4XjpNw==", - "dependencies": { - "@babel/runtime": "^7.23.4", - "@mui/base": "5.0.0-beta.25", - "@mui/core-downloads-tracker": "^5.14.19", - "@mui/system": "^5.14.19", - "@mui/types": "^7.2.10", - "@mui/utils": "^5.14.19", - "@types/react-transition-group": "^4.4.9", - "clsx": "^2.0.0", - "csstype": "^3.1.2", + "version": "5.15.15", + "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.15.tgz", + "integrity": "sha512-3zvWayJ+E1kzoIsvwyEvkTUKVKt1AjchFFns+JtluHCuvxgKcLSRJTADw37k0doaRtVAsyh8bz9Afqzv+KYrIA==", + "dependencies": { + "@babel/runtime": "^7.23.9", + "@mui/base": "5.0.0-beta.40", + "@mui/core-downloads-tracker": "^5.15.15", + "@mui/system": "^5.15.15", + "@mui/types": "^7.2.14", + "@mui/utils": "^5.15.14", + "@types/react-transition-group": "^4.4.10", + "clsx": "^2.1.0", + "csstype": "^3.1.3", "prop-types": "^15.8.1", "react-is": "^18.2.0", "react-transition-group": "^4.4.5" @@ -3578,12 +3579,12 @@ } }, "node_modules/@mui/private-theming": { - "version": "5.14.19", - "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.14.19.tgz", - "integrity": "sha512-U9w39VpXLGVM8wZlUU/47YGTsBSk60ZQRRxQZtdqPfN1N7OVllQeN4cEKZKR8PjqqR3aYRcSciQ4dc6CttRoXQ==", + "version": "5.15.14", + "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.15.14.tgz", + "integrity": "sha512-UH0EiZckOWcxiXLX3Jbb0K7rC8mxTr9L9l6QhOZxYc4r8FHUkefltV9VDGLrzCaWh30SQiJvAEd7djX3XXY6Xw==", "dependencies": { - "@babel/runtime": "^7.23.4", - "@mui/utils": "^5.14.19", + "@babel/runtime": "^7.23.9", + "@mui/utils": "^5.15.14", "prop-types": "^15.8.1" }, "engines": { @@ -3604,13 +3605,13 @@ } }, "node_modules/@mui/styled-engine": { - "version": "5.14.19", - "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.14.19.tgz", - "integrity": "sha512-jtj/Pyn/bS8PM7NXdFNTHWZfE3p+vItO4/HoQbUeAv3u+cnWXcTBGHHY/xdIn446lYGFDczTh1YyX8G4Ts0Rtg==", + "version": "5.15.14", + "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.15.14.tgz", + "integrity": "sha512-RILkuVD8gY6PvjZjqnWhz8fu68dVkqhM5+jYWfB5yhlSQKg+2rHkmEwm75XIeAqI3qwOndK6zELK5H6Zxn4NHw==", "dependencies": { - "@babel/runtime": "^7.23.4", + "@babel/runtime": "^7.23.9", "@emotion/cache": "^11.11.0", - "csstype": "^3.1.2", + "csstype": "^3.1.3", "prop-types": "^15.8.1" }, "engines": { @@ -3635,17 +3636,17 @@ } }, "node_modules/@mui/system": { - "version": "5.14.19", - "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.14.19.tgz", - "integrity": "sha512-4e3Q+2nx+vgEsd0h5ftxlZGB7XtkkPos/zWqCqnxUs1l/T70s0lF2YNrWHHdSQ7LgtBu0eQ0qweZG2pR7KwkAw==", - "dependencies": { - "@babel/runtime": "^7.23.4", - "@mui/private-theming": "^5.14.19", - "@mui/styled-engine": "^5.14.19", - "@mui/types": "^7.2.10", - "@mui/utils": "^5.14.19", - "clsx": "^2.0.0", - "csstype": "^3.1.2", + "version": "5.15.15", + "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.15.15.tgz", + "integrity": "sha512-aulox6N1dnu5PABsfxVGOZffDVmlxPOVgj56HrUnJE8MCSh8lOvvkd47cebIVQQYAjpwieXQXiDPj5pwM40jTQ==", + "dependencies": { + "@babel/runtime": "^7.23.9", + "@mui/private-theming": "^5.15.14", + "@mui/styled-engine": "^5.15.14", + "@mui/types": "^7.2.14", + "@mui/utils": "^5.15.14", + "clsx": "^2.1.0", + "csstype": "^3.1.3", "prop-types": "^15.8.1" }, "engines": { @@ -3674,9 +3675,9 @@ } }, "node_modules/@mui/types": { - "version": "7.2.10", - "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.10.tgz", - "integrity": "sha512-wX1vbDC+lzF7FlhT6A3ffRZgEoKWPF8VqRoTu4lZwouFX2t90KyCMsgepMw5DxLak1BSp/KP86CmtZttikb/gQ==", + "version": "7.2.14", + "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.14.tgz", + "integrity": "sha512-MZsBZ4q4HfzBsywtXgM1Ksj6HDThtiwmOKUXH1pKYISI9gAVXCNHNpo7TlGoGrBaYWZTdNoirIN7JsQcQUjmQQ==", "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0" }, @@ -3687,11 +3688,11 @@ } }, "node_modules/@mui/utils": { - "version": "5.14.19", - "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.14.19.tgz", - "integrity": "sha512-qAHvTXzk7basbyqPvhgWqN6JbmI2wLB/mf97GkSlz5c76MiKYV6Ffjvw9BjKZQ1YRb8rDX9kgdjRezOcoB91oQ==", + "version": "5.15.14", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.15.14.tgz", + "integrity": "sha512-0lF/7Hh/ezDv5X7Pry6enMsbYyGKjADzvHyo3Qrc/SSlTsQ1VkbDMbH0m2t3OR5iIVLwMoxwM7yGd+6FCMtTFA==", "dependencies": { - "@babel/runtime": "^7.23.4", + "@babel/runtime": "^7.23.9", "@types/prop-types": "^15.7.11", "prop-types": "^15.8.1", "react-is": "^18.2.0" @@ -3713,6 +3714,31 @@ } } }, + "node_modules/@mui/x-data-grid": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/@mui/x-data-grid/-/x-data-grid-7.2.0.tgz", + "integrity": "sha512-WKmFo0eKhj3W7Fv8u5n2XP4UcdzuJ+mEYALiMUDAYsah/hPBH9mA1miXn9DjXF3i3dxgzrTjdJemTgTJxAQZKg==", + "dependencies": { + "@babel/runtime": "^7.24.0", + "@mui/system": "^5.15.14", + "@mui/utils": "^5.15.14", + "clsx": "^2.1.0", + "prop-types": "^15.8.1", + "reselect": "^4.1.8" + }, + "engines": { + "node": ">=14.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@mui/material": "^5.15.14", + "react": "^17.0.0 || ^18.0.0", + "react-dom": "^17.0.0 || ^18.0.0" + } + }, "node_modules/@napi-rs/snappy-android-arm-eabi": { "version": "7.2.2", "resolved": "https://registry.npmjs.org/@napi-rs/snappy-android-arm-eabi/-/snappy-android-arm-eabi-7.2.2.tgz", @@ -5191,9 +5217,9 @@ } }, "node_modules/@types/react-transition-group": { - "version": "4.4.9", - "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.9.tgz", - "integrity": "sha512-ZVNmWumUIh5NhH8aMD9CR2hdW0fNuYInlocZHaZ+dgk/1K49j1w/HoAuK1ki+pgscQrOFRTlXeoURtuzEkV3dg==", + "version": "4.4.10", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.10.tgz", + "integrity": "sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==", "dependencies": { "@types/react": "*" } @@ -8531,9 +8557,9 @@ } }, "node_modules/clsx": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz", - "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==", + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.0.tgz", + "integrity": "sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==", "engines": { "node": ">=6" } @@ -8851,9 +8877,9 @@ } }, "node_modules/csstype": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", - "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==" + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", + "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==" }, "node_modules/cwd": { "version": "0.9.1", diff --git a/package.json b/package.json index 4e35b91..9e68f27 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "@emotion/styled": "^11.11.0", "@mui/icons-material": "^5.11.16", "@mui/material": "^5.13.5", + "@mui/x-data-grid": "^7.2.0", "@react-oauth/google": "^0.11.0", "@reduxjs/toolkit": "^1.9.7", "@syncfusion/ej2-base": "^22.1.34", diff --git a/src/app/components/DataGrid/ReactTable.tsx b/src/app/components/DataGrid/ReactTable.tsx index 6e69b77..32f8c43 100644 --- a/src/app/components/DataGrid/ReactTable.tsx +++ b/src/app/components/DataGrid/ReactTable.tsx @@ -4,7 +4,7 @@ import { observer } from "mobx-react"; import { paytmSocketStore } from "../../../stores/PaytmSocketStore"; // Adjust the path accordingly import { initializeExpiryDateStore } from '../../../stores/ExpiryDateStore'; import { autorun } from "mobx"; - +import { DataGrid, GridRowsProp, GridColDef } from '@mui/x-data-grid'; import { OptionData } from "../../../types"; // Adjust the path accordingly import StrikePriceRatioTable from "../Ratios/StrikePriceRatioTable"; import WebSocketConnector from "./WebSocketConnector "; @@ -54,6 +54,13 @@ const DataTable = observer(() => { const [selectedRange, setSelectedRange] = useState(5); const selectedSymbol = symbolStore.selectedSymbol || "NIFTY"; // Set the selected symbol const [isDividedByLotSize, setIsDividedByLotSize] = useState(false); + const columns = [ + { field: 'openInterest', headerName: 'OI', width: 100 }, + { field: 'volume', headerName: 'Volume', width: 100 }, + { field: 'iv', headerName: 'IV', width: 100 }, + { field: 'premium', headerName: 'Premium', width: 100 }, + { field: 'strikePrice', headerName: 'Strike Price', width: 150 }, + ]; // Implement the logic to fetch data for the selected symbol and expiry when the component mounts @@ -287,24 +294,20 @@ const handleExpiryChange = (event: any) => { // Change event type to 'any' tempo - // Table header const headers = ( <> - - OI - Volume - IV - Premium - StrikePrice - Premium - IV - Volume - OI - - +
OI
+
Volume
+
IV
+
Premium
+
StrikePrice
+
Premium
+
IV
+
Volume
+
OI
); - + const renderRows = (rows: OptionData[]) => { @@ -477,7 +480,8 @@ const pcrpValue = parseFloat(pcrp); const pcrpFormatted = pcrpValue.toFixed(2); // Convert to a string with 2 decimal places - +const gridData = renderRows(data) +console.log('Rendered Data',gridData); return ( @@ -551,16 +555,15 @@ const pcrpFormatted = pcrpValue.toFixed(2); // Convert to a string with 2 decima
- - {headers} - {renderRows(data)} -
- {/* Your table code goes here */} - +
+
{headers}
+ {renderRows(data)}
+
+
- +
diff --git a/src/hooks/useSocketMobx.ts b/src/hooks/useSocketMobx.ts index d5ad744..30216ae 100644 --- a/src/hooks/useSocketMobx.ts +++ b/src/hooks/useSocketMobx.ts @@ -121,7 +121,7 @@ export const useWebSocketMobX = () => { const sendSymbolAndExpiry = () => { const selectedSymbol = paytmSocketStore.selectedSymbol || "NIFTY"; - const selectedExpiry = paytmSocketStore.selectedExpiry || "2024-04-18"; + const selectedExpiry = paytmSocketStore.selectedExpiry || "2024-04-25"; if (selectedExpiry) { const formattedExpiry = formatDate(selectedExpiry);