From 81b551ca8eeb87f59c1a4d23e67423f097661fbc Mon Sep 17 00:00:00 2001 From: Shakeel Haider Date: Tue, 25 Jan 2022 03:02:34 +0500 Subject: [PATCH 1/3] done task --- components/cards/IconCard.js | 21 ++ components/common/CustomBootstrap.js | 10 + containers/dashboards/Logs.js | 48 +++ containers/navs/Breadcrumb.js | 47 +++ helpers/tensorflow/IntlMessages.js | 8 + package-lock.json | 283 +++++++++++++---- package.json | 7 +- pages/_app.js | 1 + pages/demo.js | 453 +++++++++++++++++++++------ 9 files changed, 722 insertions(+), 156 deletions(-) create mode 100644 components/cards/IconCard.js create mode 100644 components/common/CustomBootstrap.js create mode 100644 containers/dashboards/Logs.js create mode 100644 containers/navs/Breadcrumb.js create mode 100644 helpers/tensorflow/IntlMessages.js diff --git a/components/cards/IconCard.js b/components/cards/IconCard.js new file mode 100644 index 0000000..469eb5e --- /dev/null +++ b/components/cards/IconCard.js @@ -0,0 +1,21 @@ +import React from 'react'; +import { Card, CardBody } from 'reactstrap'; +import IntlMessages from "../../helpers/tensorflow/IntlMessages" + +const IconCard = ({ + className = 'mb-4', icon, title, value, +}) => ( +
+ + + +

+ +

+

{value}

+ + +
+); + +export default IconCard; diff --git a/components/common/CustomBootstrap.js b/components/common/CustomBootstrap.js new file mode 100644 index 0000000..48fb8a3 --- /dev/null +++ b/components/common/CustomBootstrap.js @@ -0,0 +1,10 @@ +import React from 'react'; +import { Col } from 'reactstrap'; + +const Colxx = props => ( + +); +const Separator = props => ( +
+); +export { Colxx, Separator }; diff --git a/containers/dashboards/Logs.js b/containers/dashboards/Logs.js new file mode 100644 index 0000000..1ef1860 --- /dev/null +++ b/containers/dashboards/Logs.js @@ -0,0 +1,48 @@ +import React from 'react'; +import PerfectScrollbar from 'react-perfect-scrollbar'; +import { Card, CardBody, CardTitle } from 'reactstrap'; + +import IntlMessages from '../../helpers/tensorflow/IntlMessages'; + + +const Logs = (params = [{ logsData: []}]) => ( +
+ + + + + +
+ + + + {params && params.logsData.map((log, index) => ( + + + + + + ))} + +
+ + + + {log.label} + + + {log.time} +
+ +
+ + +
+); +export default Logs; diff --git a/containers/navs/Breadcrumb.js b/containers/navs/Breadcrumb.js new file mode 100644 index 0000000..c9c5997 --- /dev/null +++ b/containers/navs/Breadcrumb.js @@ -0,0 +1,47 @@ +import React from 'react'; +import { Breadcrumb, BreadcrumbItem } from 'reactstrap'; +import NavLink from "next/link" +import IntlMessages from '../../helpers/tensorflow/IntlMessages'; + +const getMenuTitle = sub => ; + +const getUrl = (path, sub, index) => { + if (index === 0) { + return ''; + } + return path.split(sub)[0] + sub; +}; + +const BreadcrumbContainer = ({ heading, match }) => ( + <> + {heading &&

} + + +); + +export const BreadcrumbItems = ({ match }) => { + const path = match.path.substr(1); + let paths = path.split('/'); + if (paths[paths.length - 1].indexOf(':') > -1) { + paths = paths.filter(x => x.indexOf(':') === -1); + } + return ( + <> + + {paths.map((sub, index) => ( + + {paths.length !== index + 1 ? ( + + {getMenuTitle(sub)} + + ) : ( + getMenuTitle(sub) + )} + + ))} + + + ); +}; + +export default BreadcrumbContainer; diff --git a/helpers/tensorflow/IntlMessages.js b/helpers/tensorflow/IntlMessages.js new file mode 100644 index 0000000..ea6833a --- /dev/null +++ b/helpers/tensorflow/IntlMessages.js @@ -0,0 +1,8 @@ +import React from 'react'; +import { FormattedMessage, injectIntl } from 'react-intl'; + +const InjectMassage = props => ; + +export default injectIntl(InjectMassage, { + withRef: false, +}); diff --git a/package-lock.json b/package-lock.json index 1da75aa..b9c1c0a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -363,11 +363,11 @@ } }, "@formatjs/ecma402-abstract": { - "version": "1.10.0", - "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.10.0.tgz", - "integrity": "sha512-WNkcUHC6xw12rWY87TUw6KXzb1LnOooYBLLqtyn1kW2j197rcwpqmUOJMBED56YcLzaJPfVw1L2ShiDhL5pVnQ==", + "version": "1.11.1", + "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.1.tgz", + "integrity": "sha512-tgtNODZUGuUI6PAcnvaLZpGrZLVkXnnAvgzOiueYMzFdOdcOw4iH1WKhCe3+r6VR8rHKToJ2HksUGNCB+zt/bg==", "requires": { - "@formatjs/intl-localematcher": "0.2.21", + "@formatjs/intl-localematcher": "0.2.22", "tslib": "^2.1.0" }, "dependencies": { @@ -379,9 +379,9 @@ } }, "@formatjs/fast-memoize": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/@formatjs/fast-memoize/-/fast-memoize-1.2.0.tgz", - "integrity": "sha512-fObitP9Tlc31SKrPHgkPgQpGo4+4yXfQQITTCNH8AZdEqB7Mq4nPrjpUL/tNGN3lEeJcFxDbi0haX8HM7QvQ8w==", + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@formatjs/fast-memoize/-/fast-memoize-1.2.1.tgz", + "integrity": "sha512-Rg0e76nomkz3vF9IPlKeV+Qynok0r7YZjL6syLz4/urSg0IbjPZCB/iYUMNsYA643gh4mgrX3T7KEIFIxJBQeg==", "requires": { "tslib": "^2.1.0" }, @@ -394,12 +394,12 @@ } }, "@formatjs/icu-messageformat-parser": { - "version": "2.0.14", - "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.0.14.tgz", - "integrity": "sha512-M79MdUMLnfLK8eMrznUwke6afH9G/eOQeYvMUJ7uElXIL+//PyyjOzb42hAYfDAGYsAcKA2TsUo33Yuy2lE4AQ==", + "version": "2.0.16", + "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.0.16.tgz", + "integrity": "sha512-sYg0ImXsAqBbjU/LotoCD9yKC5nUpWVy3s4DwWerHXD4sm62FcjMF8mekwudRk3eZLHqSO+M21MpFUUjDQ+Q5Q==", "requires": { - "@formatjs/ecma402-abstract": "1.10.0", - "@formatjs/icu-skeleton-parser": "1.3.1", + "@formatjs/ecma402-abstract": "1.11.1", + "@formatjs/icu-skeleton-parser": "1.3.3", "tslib": "^2.1.0" }, "dependencies": { @@ -411,11 +411,11 @@ } }, "@formatjs/icu-skeleton-parser": { - "version": "1.3.1", - "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.3.1.tgz", - "integrity": "sha512-WdPNjhv9e7EfyrIVYk6hN6/mC9YF+PcfFViDI2kATwoi1uKHr+AkQCMoNrWyCDdUQ+Dn50mQOlrEkCBXoLrkPQ==", + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.3.3.tgz", + "integrity": "sha512-ifWnzjmHPHUF89UpCvClTP66sXYFc8W/qg7Qt+qtTUB9BqRWlFeUsevAzaMYDJsRiOy4S2WJFrJoZgRKUFfPGQ==", "requires": { - "@formatjs/ecma402-abstract": "1.10.0", + "@formatjs/ecma402-abstract": "1.11.1", "tslib": "^2.1.0" }, "dependencies": { @@ -427,16 +427,16 @@ } }, "@formatjs/intl": { - "version": "1.15.2", - "resolved": "https://registry.npmjs.org/@formatjs/intl/-/intl-1.15.2.tgz", - "integrity": "sha512-QYk0lUSrYprn2Lyui6iDhmHnSiXFTqKAMiveYOJPYQtcaWRwkCbcB0SALTZDc2kITrYxiP4/AS7ESF/0+SYSLQ==", - "requires": { - "@formatjs/ecma402-abstract": "1.10.0", - "@formatjs/fast-memoize": "1.2.0", - "@formatjs/icu-messageformat-parser": "2.0.14", - "@formatjs/intl-displaynames": "5.2.5", - "@formatjs/intl-listformat": "6.3.5", - "intl-messageformat": "9.9.6", + "version": "1.18.3", + "resolved": "https://registry.npmjs.org/@formatjs/intl/-/intl-1.18.3.tgz", + "integrity": "sha512-eMdU2FBAvC2vMeQRjvBhJeRNsftZ2VXdB4jW1KKbP72O4JWB9lv2KqEdS2jo6DfhDvm0EAMZXMNEEK8ybTxfyA==", + "requires": { + "@formatjs/ecma402-abstract": "1.11.1", + "@formatjs/fast-memoize": "1.2.1", + "@formatjs/icu-messageformat-parser": "2.0.16", + "@formatjs/intl-displaynames": "5.4.0", + "@formatjs/intl-listformat": "6.5.0", + "intl-messageformat": "9.11.2", "tslib": "^2.1.0" }, "dependencies": { @@ -448,12 +448,12 @@ } }, "@formatjs/intl-displaynames": { - "version": "5.2.5", - "resolved": "https://registry.npmjs.org/@formatjs/intl-displaynames/-/intl-displaynames-5.2.5.tgz", - "integrity": "sha512-iYlce/hG31ohJOwpv3yhOiEIwEBMqOt2kzA2BQTx1ra8ferBn4WlTxkouoDNiAKEBD1LFYZBIC25jsSJUJOEbg==", + "version": "5.4.0", + "resolved": "https://registry.npmjs.org/@formatjs/intl-displaynames/-/intl-displaynames-5.4.0.tgz", + "integrity": "sha512-zWmTkq9eGOeJCmw22KPXW6rlnx3Z3CIV+rc/jh9ytEfm1Ps/OgOITe4h6ZTDrQC+nXVACvLO1Kpes4jMWcjWuQ==", "requires": { - "@formatjs/ecma402-abstract": "1.10.0", - "@formatjs/intl-localematcher": "0.2.21", + "@formatjs/ecma402-abstract": "1.11.1", + "@formatjs/intl-localematcher": "0.2.22", "tslib": "^2.1.0" }, "dependencies": { @@ -465,12 +465,12 @@ } }, "@formatjs/intl-listformat": { - "version": "6.3.5", - "resolved": "https://registry.npmjs.org/@formatjs/intl-listformat/-/intl-listformat-6.3.5.tgz", - "integrity": "sha512-GtiMMx5RB/gID7ydGr+i1lRbGu728plTfT196X151cE2PYEqC05BEuHQFlE1rcUGC2+RfFqlvmipYcbOqJTQug==", + "version": "6.5.0", + "resolved": "https://registry.npmjs.org/@formatjs/intl-listformat/-/intl-listformat-6.5.0.tgz", + "integrity": "sha512-gVyAV5QWWtq84MK4cAyJITW+Wb74c2+FT+wa8jhSPxXUky9B5z/k/Ff7or4Vb3KV0YYZuVBQ/vMIoD8Gr182ww==", "requires": { - "@formatjs/ecma402-abstract": "1.10.0", - "@formatjs/intl-localematcher": "0.2.21", + "@formatjs/ecma402-abstract": "1.11.1", + "@formatjs/intl-localematcher": "0.2.22", "tslib": "^2.1.0" }, "dependencies": { @@ -482,9 +482,9 @@ } }, "@formatjs/intl-localematcher": { - "version": "0.2.21", - "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.2.21.tgz", - "integrity": "sha512-JTJeLiNwexN4Gy0cMxoUPvJbKhXdnSuo5jPrDafEZpnDWlJ5VDYta8zUVVozO/pwzEmFVHEUpgiEDj+39L4oMg==", + "version": "0.2.22", + "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.2.22.tgz", + "integrity": "sha512-z+TvbHW8Q/g2l7/PnfUl0mV9gWxV4d0HT6GQyzkO5QI6QjCvCZGiztnmLX7zoyS16uSMvZ2PoMDfSK9xvZkRRA==", "requires": { "tslib": "^2.1.0" }, @@ -736,6 +736,11 @@ "fastq": "^1.6.0" } }, + "@popperjs/core": { + "version": "2.11.2", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.2.tgz", + "integrity": "sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA==" + }, "@rushstack/eslint-patch": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.1.0.tgz", @@ -790,9 +795,9 @@ "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==" }, "@types/react": { - "version": "17.0.35", - "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.35.tgz", - "integrity": "sha512-r3C8/TJuri/SLZiiwwxQoLAoavaczARfT9up9b4Jr65+ErAUX3MIkU0oMOQnrpfgHme8zIqZLX7O5nnjm5Wayw==", + "version": "17.0.38", + "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.38.tgz", + "integrity": "sha512-SI92X1IA+FMnP3qM5m4QReluXzhcmovhZnLNm3pyeQlooi02qI7sLiepEYqT678uNiyc25XfCqxREFpy3W7YhQ==", "requires": { "@types/prop-types": "*", "@types/scheduler": "*", @@ -956,6 +961,19 @@ "picomatch": "^2.0.4" } }, + "apexcharts": { + "version": "3.33.0", + "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.33.0.tgz", + "integrity": "sha512-gOc0qZijuomtXTThLbb0sKn+mZJkVQADyK/Zw9vQ0JjKVbMYxzek61xk40hT49i1Sq6/MUqsz0WgUXYpqqf8Mg==", + "requires": { + "svg.draggable.js": "^2.2.2", + "svg.easing.js": "^2.0.0", + "svg.filter.js": "^2.0.2", + "svg.pathmorphing.js": "^0.1.3", + "svg.resize.js": "^1.4.3", + "svg.select.js": "^3.0.1" + } + }, "argparse": { "version": "1.0.10", "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz", @@ -1116,6 +1134,11 @@ "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-5.2.0.tgz", "integrity": "sha512-D7iWRBvnZE8ecXiLj/9wbxH7Tk79fAh8IHaTNq1RWRixsS02W+5qS+iE9yq6RYl0asXx5tw0bLhmT5pIfbSquw==" }, + "bootstrap": { + "version": "5.1.3", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz", + "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==" + }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -1564,6 +1587,15 @@ "esutils": "^2.0.2" } }, + "dom-helpers": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", + "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", + "requires": { + "@babel/runtime": "^7.8.7", + "csstype": "^3.0.2" + } + }, "domain-browser": { "version": "4.19.0", "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-4.19.0.tgz", @@ -2599,12 +2631,13 @@ } }, "intl-messageformat": { - "version": "9.9.6", - "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-9.9.6.tgz", - "integrity": "sha512-xgoBydnw9zGUtgCiUcxNTzrRLzAbBIgWyKvMjL2jFNCx7H0148GGQWNVOpoiON5SlcFr8lyMWdbb0m+HjydanQ==", + "version": "9.11.2", + "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-9.11.2.tgz", + "integrity": "sha512-4wsinP2ObVK1Rz5C4121lgVeHeOCW32FOsqcVXtJNdlow+NypJKmnrije9rOc0bKxPwtto9IkXdgakXUmYXVHw==", "requires": { - "@formatjs/fast-memoize": "1.2.0", - "@formatjs/icu-messageformat-parser": "2.0.14", + "@formatjs/ecma402-abstract": "1.11.1", + "@formatjs/fast-memoize": "1.2.1", + "@formatjs/icu-messageformat-parser": "2.0.16", "tslib": "^2.1.0" }, "dependencies": { @@ -3343,6 +3376,11 @@ "sha.js": "^2.4.8" } }, + "perfect-scrollbar": { + "version": "1.5.5", + "resolved": "https://registry.npmjs.org/perfect-scrollbar/-/perfect-scrollbar-1.5.5.tgz", + "integrity": "sha512-dzalfutyP3e/FOpdlhVryN4AJ5XDVauVWxybSkLZmakFE2sS3y3pc4JnSprw8tGmHvkaG5Edr5T7LBTZ+WWU2g==" + }, "picomatch": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.0.tgz", @@ -3404,7 +3442,6 @@ "version": "15.7.2", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz", "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==", - "dev": true, "requires": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", @@ -3414,8 +3451,7 @@ "react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", - "dev": true + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" } } }, @@ -3510,6 +3546,14 @@ "object-assign": "^4.1.1" } }, + "react-apexcharts": { + "version": "1.3.9", + "resolved": "https://registry.npmjs.org/react-apexcharts/-/react-apexcharts-1.3.9.tgz", + "integrity": "sha512-KPonT5uQPHOHSVgTNEzpB0HhCkZtoicQYGjR9P+3DRDSgTsC+DM2vDUfo/B2Fn1m+wdgVeDXWL0VJYDc6JD/tw==", + "requires": { + "prop-types": "^15.5.7" + } + }, "react-dom": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz", @@ -3520,20 +3564,25 @@ "scheduler": "^0.20.2" } }, + "react-fast-compare": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz", + "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==" + }, "react-intl": { - "version": "5.21.2", - "resolved": "https://registry.npmjs.org/react-intl/-/react-intl-5.21.2.tgz", - "integrity": "sha512-pRKndhmjbFOq9CoJHHnUgXYf1tz9t3nIfInZg5TQ9EqYs9PPlkHBp4WtFDcFcW5UGV/QX4no6irpfXFsVKNWUA==", - "requires": { - "@formatjs/ecma402-abstract": "1.10.0", - "@formatjs/icu-messageformat-parser": "2.0.14", - "@formatjs/intl": "1.15.2", - "@formatjs/intl-displaynames": "5.2.5", - "@formatjs/intl-listformat": "6.3.5", + "version": "5.24.3", + "resolved": "https://registry.npmjs.org/react-intl/-/react-intl-5.24.3.tgz", + "integrity": "sha512-SrV0Qs8Rg+Mlo2u0OqGJZ3pH3cF0lv3cVtHvVPksptrjlgvt6Lbc4vfzD1nPog/CPKzSSdNlLoMs5suHFdBnTw==", + "requires": { + "@formatjs/ecma402-abstract": "1.11.1", + "@formatjs/icu-messageformat-parser": "2.0.16", + "@formatjs/intl": "1.18.3", + "@formatjs/intl-displaynames": "5.4.0", + "@formatjs/intl-listformat": "6.5.0", "@types/hoist-non-react-statics": "^3.3.1", "@types/react": "16 || 17", "hoist-non-react-statics": "^3.3.2", - "intl-messageformat": "9.9.6", + "intl-messageformat": "9.11.2", "tslib": "^2.1.0" }, "dependencies": { @@ -3549,11 +3598,53 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" }, + "react-perfect-scrollbar": { + "version": "1.5.8", + "resolved": "https://registry.npmjs.org/react-perfect-scrollbar/-/react-perfect-scrollbar-1.5.8.tgz", + "integrity": "sha512-bQ46m70gp/HJtiBOF3gRzBISSZn8FFGNxznTdmTG8AAwpxG1bJCyn7shrgjEvGSQ5FJEafVEiosY+ccER11OSA==", + "requires": { + "perfect-scrollbar": "^1.5.0", + "prop-types": "^15.6.1" + } + }, + "react-popper": { + "version": "2.2.5", + "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.5.tgz", + "integrity": "sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw==", + "requires": { + "react-fast-compare": "^3.0.1", + "warning": "^4.0.2" + } + }, "react-refresh": { "version": "0.8.3", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz", "integrity": "sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==" }, + "react-transition-group": { + "version": "4.4.2", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz", + "integrity": "sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==", + "requires": { + "@babel/runtime": "^7.5.5", + "dom-helpers": "^5.0.1", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2" + } + }, + "reactstrap": { + "version": "9.0.1", + "resolved": "https://registry.npmjs.org/reactstrap/-/reactstrap-9.0.1.tgz", + "integrity": "sha512-89VOv7SRlAlpS7RwXhzOQkSWkuhBR8LBsPGfNHifNL3WhtNP9y1sBdTcTYyH1ee2QtI8zRdwD0T5I/blHiwemg==", + "requires": { + "@babel/runtime": "^7.12.5", + "@popperjs/core": "^2.6.0", + "classnames": "^2.2.3", + "prop-types": "^15.5.8", + "react-popper": "^2.2.4", + "react-transition-group": "^4.4.2" + } + }, "readable-stream": { "version": "3.6.0", "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz", @@ -3982,6 +4073,70 @@ "has-flag": "^3.0.0" } }, + "svg.draggable.js": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz", + "integrity": "sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==", + "requires": { + "svg.js": "^2.0.1" + } + }, + "svg.easing.js": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/svg.easing.js/-/svg.easing.js-2.0.0.tgz", + "integrity": "sha1-iqmUawqOJ4V6XEChDrpAkeVpHxI=", + "requires": { + "svg.js": ">=2.3.x" + } + }, + "svg.filter.js": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/svg.filter.js/-/svg.filter.js-2.0.2.tgz", + "integrity": "sha1-kQCOFROJ3ZIwd5/L5uLJo2LRwgM=", + "requires": { + "svg.js": "^2.2.5" + } + }, + "svg.js": { + "version": "2.7.1", + "resolved": "https://registry.npmjs.org/svg.js/-/svg.js-2.7.1.tgz", + "integrity": "sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA==" + }, + "svg.pathmorphing.js": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/svg.pathmorphing.js/-/svg.pathmorphing.js-0.1.3.tgz", + "integrity": "sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==", + "requires": { + "svg.js": "^2.4.0" + } + }, + "svg.resize.js": { + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/svg.resize.js/-/svg.resize.js-1.4.3.tgz", + "integrity": "sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==", + "requires": { + "svg.js": "^2.6.5", + "svg.select.js": "^2.1.2" + }, + "dependencies": { + "svg.select.js": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-2.1.2.tgz", + "integrity": "sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==", + "requires": { + "svg.js": "^2.2.5" + } + } + } + }, + "svg.select.js": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-3.0.1.tgz", + "integrity": "sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==", + "requires": { + "svg.js": "^2.6.5" + } + }, "table": { "version": "6.7.3", "resolved": "https://registry.npmjs.org/table/-/table-6.7.3.tgz", @@ -4174,6 +4329,14 @@ "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz", "integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==" }, + "warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "requires": { + "loose-envify": "^1.0.0" + } + }, "watchpack": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.1.1.tgz", diff --git a/package.json b/package.json index 70aa2e6..7b8f48e 100644 --- a/package.json +++ b/package.json @@ -10,10 +10,15 @@ "dependencies": { "@stoqey/ib": "^1.2.15", "@tinkoff/invest-openapi-js-sdk": "^1.5.0", + "apexcharts": "^3.33.0", + "bootstrap": "^5.1.3", "next": "12.0.4", "react": "17.0.2", + "react-apexcharts": "^1.3.9", "react-dom": "17.0.2", - "react-intl": "^5.21.2", + "react-intl": "^5.24.3", + "react-perfect-scrollbar": "^1.5.8", + "reactstrap": "^9.0.1", "styled-components": "^5.3.3" }, "devDependencies": { diff --git a/pages/_app.js b/pages/_app.js index 5c6c656..bab8a6a 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -1,5 +1,6 @@ import HeadHTML from '../components/layout/HeadHTML' import '../styles/globals.css' +import 'bootstrap/dist/css/bootstrap.min.css'; import App from 'next/app' import { IntlProvider } from 'react-intl' import useLang from '../content/locale' diff --git a/pages/demo.js b/pages/demo.js index 56b8ef5..ae2ccdd 100644 --- a/pages/demo.js +++ b/pages/demo.js @@ -1,101 +1,364 @@ -import React, { useEffect, useState } from 'react' -import styled from 'styled-components' -import HeaderLayout from '../components/layout/HeaderLayout' -import { ButtonStyled } from '../styled/Buttons' -import { AuthenticationTitle, LinkStyled } from '../styled/Texts' -import { AuthInput, AuthForm } from '../styled/inputs' -import Checkbox from '../components/checkbox/Checkbox' -import Tconnector from '../tconnector-sdk/tconnector' -import useInputOnChange from '../hooks-utils/useInputOnChange' -import ChangePassFinam from '../components/changePassword/finamChangePass' -import { useRouter } from 'next/dist/client/router' - -const Main = styled.main` - margin-top: 45px; - display: flex; - flex-direction: column; - align-items: center; -` - -const CheckboxesWrapper = styled.div` - width: 85%; - max-width: 600px; - display: flex; - justify-content: space-around; - margin-top: 20px; -` - -const ChangePassLinkStyled = styled(LinkStyled)` - margin-left: auto; - margin-top: 10px; -` -function FinamAuth() { - const [isHFT, seetIsHFT] = useState(false) - const [loginValue, loginOnChange] = useInputOnChange() - const [passValue, passOnChange] = useInputOnChange() - const [addresValue, addresOnChange] = useInputOnChange('tr1.finam.ru:3900') - const [changePassPage, setChangePassPage] = useState(false) - const { push } = useRouter() - const changePage = () => setChangePassPage((prev) => !prev) - const handleOnHFTchange = () => { - seetIsHFT((prev) => !prev) +import React, { Component } from 'react'; +import { Row, Button } from 'reactstrap'; +import Chart from 'react-apexcharts'; +import ApexCharts from 'apexcharts'; +import { Colxx, Separator } from '../components/common/CustomBootstrap'; +import Breadcrumb from '../containers/navs/Breadcrumb'; +import IconCard from '../components/cards/IconCard'; +import Logs from '../containers/dashboards/Logs' + + + + +class FinamAuth extends Component { + constructor(props) { + super(props); + + this.state = { + balance: 10000, + stocks: 0, + maxBuyStocks: 40, + lastStockPrice: 0, + commission: 0.05, + logs: [], + + series: [{ + data: [], + }], + options: { + chart: { + id: 'ticks_chart', + type: 'candlestick', + height: 350, + }, + title: { + text: 'CandleStick Chart', + align: 'left', + }, + xaxis: { + // type: 'datetime', + type: 'numeric' + }, + yaxis: { + tooltip: { + enabled: true, + }, + }, + }, + // Берём данные из LS, чтобы при возврате рисовался интересующий график. + currentTicks: typeof window !== 'undefined' ? window?.localStorage.getItem('ticks') || '5min' : '5min', + }; + } + + resetState() { + this.setState({ + balance: 10000, + stocks: 0, + maxBuyStocks: 40, + lastStockPrice: 0, + commission: 0.05, + logs: [], + }); + } + + // lastDate = 1538884800000 + // [Timestamp, O, H, L, C] + // lastTick = [6604.98, 6606, 6604.07, 6606] + + componentDidMount() { + this.getChartData(); + this.resetState(); } - const handleOnSubmit = async () => { - const [host, port] = addresValue.split(':') - const tconnector = await Tconnector.getTc({ - isHFT, - host: '176.124.99.109', - port: '12345', - }) - - const res = await tconnector.api.connect({ - login: loginValue, - password: passValue, - host, - port, - }) - console.log(res) - if (!res.error) push('/') + componentDidUpdate() { + if(!this.state.interactive) { + // this.getChartData(); + } + } + + getHost(postfix) { + // Костыль для локальной разработки, чтобы порты сервера и клиента разнести. + // TODO: сделать в едином месте + let host = `https://${window?.location.host}/api/stocks/${postfix}`; + if (host.indexOf('3000') !== -1) { + // TODO: сделать в едином месте + host = host.replace('3000', '3001').replace('https', 'http'); + } + + return host; + } + + getChartData() { + this.loadedData || (this.loadedData = {}); + const current = this.loadedData[this.state.currentTicks]; + if (this.loadedData[this.state.currentTicks] === true) { + return; + } else if (current) { + ApexCharts.exec('ticks_chart', 'updateSeries', [{ + data: this.loadedData[this.state.currentTicks].series[0].data, + }]); + this.setState(this.loadedData[this.state.currentTicks]); + return; + } else { + this.loadedData[this.state.currentTicks] = true; + } + + /* + { + x: new Date(1538874000000), + y: [6600.55, 6605, 6589.14, 6593.01], + }, + */ + const x = new XMLHttpRequest(); + x.open('GET', this.getHost(`ticks/${this.state.currentTicks}`), true); + x.onload = () => { + const res = x.responseText && JSON.parse(x.responseText); + + const series = this.state.series.slice(0); + let name; + + series[0].data = !res || !Object.keys(res).length ? [] : res.map((t, i) => { + // ticker, per, date, time, open, hight, low, close, vol (объём торгов) + // SBER,5,08/07/20,12:30:00,210.6100000,210.6800000,210.4700000,210.6000000,73370 + const tick = t.split(','); + + if (!name) { + name = tick[0]; + } + + if (!tick[2] || !tick[3]) { + return false; + } + + // console.log(`${tick[2]} ${tick[3]}`, [parseFloat(tick[4]), parseFloat(tick[5]), parseFloat(tick[6]), parseFloat(tick[7])]); + // [Timestamp, O, H, L, C] + return { + x: `${tick[2]} ${tick[3]}`, + y: [parseFloat(tick[4]), parseFloat(tick[5]), parseFloat(tick[6]), parseFloat(tick[7])], + + }; + }) + .filter(Boolean); + + this.loadedData[this.state.currentTicks] = { + series, + options: { + ...this.state.options, + title: { + ...this.state.options.title, + text: name, + }, + }, + stocksData: res.map(r => { + const tick = r.split(','); + if (!tick[2] || !tick[3]) { + return false; + } + + // SBER,5,08/07/20,12:30:00,210.6100000,210.6800000,210.4700000,210.6000000,73370 + // Для упрощения наблюдений увеличиваем стоимость акций, чтобы следить за целыми числами + return [tick[2] + ' ' + tick[3], parseInt(tick[5] * 10, 10), tick[8]]; + }).filter(Boolean) + }; + + this.setState(this.loadedData[this.state.currentTicks]); + + // ApexCharts.exec('ticks_chart', 'updateSeries', [{ + // data: series[0].data, + // }]); + }; + x.withCredentials = true; + x.send(); + } + + render() { + const stockPrice = this.state.series[0].data.length && this.state.series[0].data[this.state.series[0].data.length-1].y[1]; + const time = this.state.series[0].data.length && this.state.series[0].data[this.state.series[0].data.length-1].x; + + return ( + <> + + + {this.props.match && } + + + + + {/* +

+ {[ + '5min', + ].map((t, i) => + + )} + */} + + + + {Boolean(this.state.series[0].data.length) && ( + + )} + + + + + + + + + + + +
+ + {!this.state.inProgress && } + {this.state.inProgress && } + + {(this.state.balance >= stockPrice + this.state.commission || this.state.stocks) && (!this.state.stocks ? : + )} + +
+ {/* from here */} + {/* to here */} +
+
+ + + + + ); } - if (changePassPage) return - return ( - <> - -
- Finam - - - - - - change pass - - - - HFT - - - NoHFT - - - - Submit -
- - ) } export default FinamAuth From 8cba3959a002cd6b8a2e3f832e0ef828cab0f117 Mon Sep 17 00:00:00 2001 From: Shakeel Haider Date: Tue, 25 Jan 2022 03:31:22 +0500 Subject: [PATCH 2/3] make window error remove --- components/FinamAuth/FinamAuth.js | 364 +++++++++++++++++++++++++++++ pages/demo.js | 374 ++---------------------------- 2 files changed, 377 insertions(+), 361 deletions(-) create mode 100644 components/FinamAuth/FinamAuth.js diff --git a/components/FinamAuth/FinamAuth.js b/components/FinamAuth/FinamAuth.js new file mode 100644 index 0000000..1c281c4 --- /dev/null +++ b/components/FinamAuth/FinamAuth.js @@ -0,0 +1,364 @@ +import React, { Component } from 'react'; +import { Row, Button } from 'reactstrap'; +import Chart from 'react-apexcharts'; +import ApexCharts from 'apexcharts'; +import { Colxx, Separator } from '../common/CustomBootstrap'; +import Breadcrumb from '../../containers/navs/Breadcrumb'; +import IconCard from '../cards/IconCard'; +import Logs from '../../containers/dashboards/Logs' + + + +class FinamAuth extends Component { + constructor(props) { + super(props); + + this.state = { + balance: 10000, + stocks: 0, + maxBuyStocks: 40, + lastStockPrice: 0, + commission: 0.05, + logs: [], + + series: [{ + data: [], + }], + options: { + chart: { + id: 'ticks_chart', + type: 'candlestick', + height: 350, + }, + title: { + text: 'CandleStick Chart', + align: 'left', + }, + xaxis: { + // type: 'datetime', + type: 'numeric' + }, + yaxis: { + tooltip: { + enabled: true, + }, + }, + }, + // Берём данные из LS, чтобы при возврате рисовался интересующий график. + currentTicks: window?.localStorage.getItem('ticks') || '5min', + }; + + } + + resetState() { + this.setState({ + balance: 10000, + stocks: 0, + maxBuyStocks: 40, + lastStockPrice: 0, + commission: 0.05, + logs: [], + }); + } + + // lastDate = 1538884800000 + // [Timestamp, O, H, L, C] + // lastTick = [6604.98, 6606, 6604.07, 6606] + + componentDidMount() { + this.getChartData(); + this.resetState(); + } + + componentDidUpdate() { + if(!this.state.interactive) { + this.getChartData(); + } + } + + getHost(postfix) { + // Костыль для локальной разработки, чтобы порты сервера и клиента разнести. + // TODO: сделать в едином месте + let host = `https://${window?.location.host}/api/stocks/${postfix}`; + if (host.indexOf('3000') !== -1) { + // TODO: сделать в едином месте + host = host.replace('3000', '3001').replace('https', 'http'); + } + + return host; + } + + getChartData() { + this.loadedData || (this.loadedData = {}); + const current = this.loadedData[this.state.currentTicks]; + if (this.loadedData[this.state.currentTicks] === true) { + return; + } else if (current) { + ApexCharts.exec('ticks_chart', 'updateSeries', [{ + data: this.loadedData[this.state.currentTicks].series[0].data, + }]); + this.setState(this.loadedData[this.state.currentTicks]); + return; + } else { + this.loadedData[this.state.currentTicks] = true; + } + + /* + { + x: new Date(1538874000000), + y: [6600.55, 6605, 6589.14, 6593.01], + }, + */ + const x = new XMLHttpRequest(); + x.open('GET', this.getHost(`ticks/${this.state.currentTicks}`), true); + x.onload = () => { + const res = x.responseText && JSON.parse(x.responseText); + + const series = this.state.series.slice(0); + let name; + + series[0].data = !res || !Object.keys(res).length ? [] : res.map((t, i) => { + // ticker, per, date, time, open, hight, low, close, vol (объём торгов) + // SBER,5,08/07/20,12:30:00,210.6100000,210.6800000,210.4700000,210.6000000,73370 + const tick = t.split(','); + + if (!name) { + name = tick[0]; + } + + if (!tick[2] || !tick[3]) { + return false; + } + + // console.log(`${tick[2]} ${tick[3]}`, [parseFloat(tick[4]), parseFloat(tick[5]), parseFloat(tick[6]), parseFloat(tick[7])]); + // [Timestamp, O, H, L, C] + return { + x: `${tick[2]} ${tick[3]}`, + y: [parseFloat(tick[4]), parseFloat(tick[5]), parseFloat(tick[6]), parseFloat(tick[7])], + + }; + }) + .filter(Boolean); + + this.loadedData[this.state.currentTicks] = { + series, + options: { + ...this.state.options, + title: { + ...this.state.options.title, + text: name, + }, + }, + stocksData: res.map(r => { + const tick = r.split(','); + if (!tick[2] || !tick[3]) { + return false; + } + + // SBER,5,08/07/20,12:30:00,210.6100000,210.6800000,210.4700000,210.6000000,73370 + // Для упрощения наблюдений увеличиваем стоимость акций, чтобы следить за целыми числами + return [tick[2] + ' ' + tick[3], parseInt(tick[5] * 10, 10), tick[8]]; + }).filter(Boolean) + }; + + this.setState(this.loadedData[this.state.currentTicks]); + + // ApexCharts.exec('ticks_chart', 'updateSeries', [{ + // data: series[0].data, + // }]); + }; + x.withCredentials = true; + x.send(); + } + + render() { + const stockPrice = this.state.series[0].data.length && this.state.series[0].data[this.state.series[0].data.length-1].y[1]; + const time = this.state.series[0].data.length && this.state.series[0].data[this.state.series[0].data.length-1].x; + + return ( + <> + + + {this.props.match && } + + + + + {/* +

+ {[ + '5min', + ].map((t, i) => + + )} + */} + + + + {Boolean(this.state.series[0].data.length) && ( + + )} + + + + + + + + + + + +
+ + {!this.state.inProgress && } + {this.state.inProgress && } + + {(this.state.balance >= stockPrice + this.state.commission || this.state.stocks) && (!this.state.stocks ? : + )} + +
+ {/* from here */} + {/* to here */} +
+
+ + + + + ); + } +} + +export default FinamAuth \ No newline at end of file diff --git a/pages/demo.js b/pages/demo.js index ae2ccdd..365d592 100644 --- a/pages/demo.js +++ b/pages/demo.js @@ -1,364 +1,16 @@ import React, { Component } from 'react'; -import { Row, Button } from 'reactstrap'; -import Chart from 'react-apexcharts'; -import ApexCharts from 'apexcharts'; -import { Colxx, Separator } from '../components/common/CustomBootstrap'; -import Breadcrumb from '../containers/navs/Breadcrumb'; -import IconCard from '../components/cards/IconCard'; -import Logs from '../containers/dashboards/Logs' - - - - -class FinamAuth extends Component { - constructor(props) { - super(props); - - this.state = { - balance: 10000, - stocks: 0, - maxBuyStocks: 40, - lastStockPrice: 0, - commission: 0.05, - logs: [], - - series: [{ - data: [], - }], - options: { - chart: { - id: 'ticks_chart', - type: 'candlestick', - height: 350, - }, - title: { - text: 'CandleStick Chart', - align: 'left', - }, - xaxis: { - // type: 'datetime', - type: 'numeric' - }, - yaxis: { - tooltip: { - enabled: true, - }, - }, - }, - // Берём данные из LS, чтобы при возврате рисовался интересующий график. - currentTicks: typeof window !== 'undefined' ? window?.localStorage.getItem('ticks') || '5min' : '5min', - }; - } - - resetState() { - this.setState({ - balance: 10000, - stocks: 0, - maxBuyStocks: 40, - lastStockPrice: 0, - commission: 0.05, - logs: [], - }); - } - - // lastDate = 1538884800000 - // [Timestamp, O, H, L, C] - // lastTick = [6604.98, 6606, 6604.07, 6606] - - componentDidMount() { - this.getChartData(); - this.resetState(); - } - - componentDidUpdate() { - if(!this.state.interactive) { - // this.getChartData(); - } - } - - getHost(postfix) { - // Костыль для локальной разработки, чтобы порты сервера и клиента разнести. - // TODO: сделать в едином месте - let host = `https://${window?.location.host}/api/stocks/${postfix}`; - if (host.indexOf('3000') !== -1) { - // TODO: сделать в едином месте - host = host.replace('3000', '3001').replace('https', 'http'); - } - - return host; - } - - getChartData() { - this.loadedData || (this.loadedData = {}); - const current = this.loadedData[this.state.currentTicks]; - if (this.loadedData[this.state.currentTicks] === true) { - return; - } else if (current) { - ApexCharts.exec('ticks_chart', 'updateSeries', [{ - data: this.loadedData[this.state.currentTicks].series[0].data, - }]); - this.setState(this.loadedData[this.state.currentTicks]); - return; - } else { - this.loadedData[this.state.currentTicks] = true; - } - - /* - { - x: new Date(1538874000000), - y: [6600.55, 6605, 6589.14, 6593.01], - }, - */ - const x = new XMLHttpRequest(); - x.open('GET', this.getHost(`ticks/${this.state.currentTicks}`), true); - x.onload = () => { - const res = x.responseText && JSON.parse(x.responseText); - - const series = this.state.series.slice(0); - let name; - - series[0].data = !res || !Object.keys(res).length ? [] : res.map((t, i) => { - // ticker, per, date, time, open, hight, low, close, vol (объём торгов) - // SBER,5,08/07/20,12:30:00,210.6100000,210.6800000,210.4700000,210.6000000,73370 - const tick = t.split(','); - - if (!name) { - name = tick[0]; - } - - if (!tick[2] || !tick[3]) { - return false; - } - - // console.log(`${tick[2]} ${tick[3]}`, [parseFloat(tick[4]), parseFloat(tick[5]), parseFloat(tick[6]), parseFloat(tick[7])]); - // [Timestamp, O, H, L, C] - return { - x: `${tick[2]} ${tick[3]}`, - y: [parseFloat(tick[4]), parseFloat(tick[5]), parseFloat(tick[6]), parseFloat(tick[7])], - - }; - }) - .filter(Boolean); - - this.loadedData[this.state.currentTicks] = { - series, - options: { - ...this.state.options, - title: { - ...this.state.options.title, - text: name, - }, - }, - stocksData: res.map(r => { - const tick = r.split(','); - if (!tick[2] || !tick[3]) { - return false; - } - - // SBER,5,08/07/20,12:30:00,210.6100000,210.6800000,210.4700000,210.6000000,73370 - // Для упрощения наблюдений увеличиваем стоимость акций, чтобы следить за целыми числами - return [tick[2] + ' ' + tick[3], parseInt(tick[5] * 10, 10), tick[8]]; - }).filter(Boolean) - }; - - this.setState(this.loadedData[this.state.currentTicks]); - - // ApexCharts.exec('ticks_chart', 'updateSeries', [{ - // data: series[0].data, - // }]); - }; - x.withCredentials = true; - x.send(); - } - - render() { - const stockPrice = this.state.series[0].data.length && this.state.series[0].data[this.state.series[0].data.length-1].y[1]; - const time = this.state.series[0].data.length && this.state.series[0].data[this.state.series[0].data.length-1].x; - - return ( - <> - - - {this.props.match && } - - - - - {/* -

- {[ - '5min', - ].map((t, i) => - - )} - */} - - - - {Boolean(this.state.series[0].data.length) && ( - - )} - - - - - - - - - - - -
- - {!this.state.inProgress && } - {this.state.inProgress && } - - {(this.state.balance >= stockPrice + this.state.commission || this.state.stocks) && (!this.state.stocks ? : - )} - -
- {/* from here */} - {/* to here */} -
-
- - - - - ); - } +import dynamic from "next/dynamic"; + +const Editor = dynamic( + () => { + return import("../components/FinamAuth/FinamAuth"); + },{ loading: () => null, ssr: false } +); + +const Demo = () => { + return
+ +
} -export default FinamAuth +export default Demo From 4ec151061d43cb44959d864aa21d4cdc8deef578 Mon Sep 17 00:00:00 2001 From: Shakeel Haider Date: Fri, 28 Jan 2022 01:05:27 +0500 Subject: [PATCH 3/3] Changed file name --- .../{FinamAuth/FinamAuth.js => Demo/DemoComp.js} | 10 +++++----- pages/demo.js | 2 +- 2 files changed, 6 insertions(+), 6 deletions(-) rename components/{FinamAuth/FinamAuth.js => Demo/DemoComp.js} (98%) diff --git a/components/FinamAuth/FinamAuth.js b/components/Demo/DemoComp.js similarity index 98% rename from components/FinamAuth/FinamAuth.js rename to components/Demo/DemoComp.js index 1c281c4..4c9a9ab 100644 --- a/components/FinamAuth/FinamAuth.js +++ b/components/Demo/DemoComp.js @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import { Row, Button } from 'reactstrap'; +import { Row, Button, Container } from 'reactstrap'; import Chart from 'react-apexcharts'; import ApexCharts from 'apexcharts'; import { Colxx, Separator } from '../common/CustomBootstrap'; @@ -9,7 +9,7 @@ import Logs from '../../containers/dashboards/Logs' -class FinamAuth extends Component { +class DemoComp extends Component { constructor(props) { super(props); @@ -176,7 +176,7 @@ class FinamAuth extends Component { const time = this.state.series[0].data.length && this.state.series[0].data[this.state.series[0].data.length-1].x; return ( - <> + {this.props.match && } @@ -356,9 +356,9 @@ class FinamAuth extends Component { - + ); } } -export default FinamAuth \ No newline at end of file +export default DemoComp \ No newline at end of file diff --git a/pages/demo.js b/pages/demo.js index 365d592..9054217 100644 --- a/pages/demo.js +++ b/pages/demo.js @@ -3,7 +3,7 @@ import dynamic from "next/dynamic"; const Editor = dynamic( () => { - return import("../components/FinamAuth/FinamAuth"); + return import("../components/Demo/DemoComp"); },{ loading: () => null, ssr: false } );