From 591350b141d5ef86a99a1ecc9553c8672a3df8ff Mon Sep 17 00:00:00 2001 From: Ben Ebsworth Date: Sat, 18 Aug 2018 18:34:35 +1000 Subject: [PATCH 1/2] fixing tabs --- .prettierrc | 3 +- .vscode/settings.json | 12 +- package-lock.json | 229 ++++-------- src/components/AboutHeader/index.jsx | 116 +++--- src/components/AboutHeader/style.js | 54 +-- src/components/AlertRow/index.jsx | 58 +-- src/components/AlertRow/style.js | 67 ++-- src/components/AlertRowGraph/index.jsx | 91 ++--- src/components/AlertRowGraph/style.js | 11 +- src/components/Alerts/index.jsx | 60 ++-- .../LegendCompanyMarketCap/index.jsx | 113 +++--- src/components/NavBar/index.jsx | 44 ++- src/components/TopChart/index.jsx | 218 ++++++------ src/components/TopChart/style.js | 84 +++-- src/components/TopChartVictory/components.jsx | 16 +- src/components/TopChartVictory/index.jsx | 329 ++++++++++-------- src/views/dashboard/index.jsx | 224 ++++++------ 17 files changed, 870 insertions(+), 859 deletions(-) diff --git a/.prettierrc b/.prettierrc index d9cf6c9..e6c8523 100644 --- a/.prettierrc +++ b/.prettierrc @@ -4,5 +4,6 @@ "printWidth": 80, "singleQuote": true, "trailingComma": "all", - "semi": true + "semi": true, + "tabWidth": 4 } diff --git a/.vscode/settings.json b/.vscode/settings.json index 1c5309d..6f88395 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,7 +1,9 @@ { - "editor.formatOnSave": true, - "prettier.trailingComma": "all", - "prettier.eslintIntegration": true, - "prettier.semi": true, - "prettier.singleQuote": true + "editor.formatOnSave": true, + "prettier.trailingComma": "all", + "prettier.eslintIntegration": true, + "prettier.semi": true, + "prettier.singleQuote": true, + "editor.tabSize": 4, + "editor.detectIndentation": false } diff --git a/package-lock.json b/package-lock.json index aba2d35..4ff99e9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -903,7 +903,6 @@ "prop-types": "^15.6.1", "react-lifecycles-compat": "^3.0.4", "warning": "^3.0.0" -<<<<<<< HEAD }, "dependencies": { "warning": { @@ -914,8 +913,6 @@ "loose-envify": "^1.0.0" } } -======= ->>>>>>> 0e112d243e2216d2589b40397a0e488e46936fb6 } }, "@types/configstore": { @@ -968,6 +965,31 @@ "resolved": "https://registry.npmjs.org/@types/node/-/node-7.0.69.tgz", "integrity": "sha512-S5NC8HV6HnRipg8nC0j30TPl7ktXjRTKqgyINLNe8K/64UJUI8Lq0sRopXC0hProsV2F5ibj8IqPkl1xpGggrw==" }, + "@types/prop-types": { + "version": "15.5.5", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.5.5.tgz", + "integrity": "sha512-mOrlCEdwX3seT3n0AXNt4KNPAZZxcsABUHwBgFXOt+nvFUXkxCAO6UBJHPrDxWEa2KDMil86355fjo8jbZ+K0Q==", + "requires": { + "@types/react": "*" + } + }, + "@types/reach__router": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@types/reach__router/-/reach__router-1.0.0.tgz", + "integrity": "sha512-a00BZkqeZQfwGOQAku5snJR72IWdQaT5Cy7pctQ95Mf03GGdmwRkILr+NkhHtqmSHUGyMajv8mM2uWlaEe+XKQ==", + "requires": { + "@types/react": "*" + } + }, + "@types/react": { + "version": "16.4.11", + "resolved": "https://registry.npmjs.org/@types/react/-/react-16.4.11.tgz", + "integrity": "sha512-1DQnmwO8u8N3ucvRX2ZLDEjQ2VctkAvL/rpbm2ev4uaZA0z4ysU+I0tk+K8ZLblC6p7MCgFyF+cQlSNIPUHzeQ==", + "requires": { + "@types/prop-types": "*", + "csstype": "^2.2.0" + } + }, "@types/tmp": { "version": "0.0.32", "resolved": "https://registry.npmjs.org/@types/tmp/-/tmp-0.0.32.tgz", @@ -1221,14 +1243,14 @@ }, "dependencies": { "ajv": { - "version": "6.5.2", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.5.2.tgz", - "integrity": "sha512-hOs7GfvI6tUI1LfZddH82ky6mOMyTuY0mk7kE2pWpmhhUSkumzaTO5vbVwij39MdwPQWCV4Zv57Eo06NtL/GVA==", + "version": "6.5.3", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.5.3.tgz", + "integrity": "sha512-LqZ9wY+fx3UMiiPd741yB2pj3hhil+hQc8taf4o2QGRFpWgZ2V5C8HA165DY9sS3fJwsk7uT7ZlFEyC3Ig3lLg==", "requires": { "fast-deep-equal": "^2.0.1", "fast-json-stable-stringify": "^2.0.0", "json-schema-traverse": "^0.4.1", - "uri-js": "^4.2.1" + "uri-js": "^4.2.2" } }, "ajv-keywords": { @@ -1448,9 +1470,9 @@ } }, "apollo-utilities": { - "version": "1.0.18", - "resolved": "https://registry.npmjs.org/apollo-utilities/-/apollo-utilities-1.0.18.tgz", - "integrity": "sha512-hHrmsoMYzzzfUlTOPpxr0qRpTLotMkBIQ93Ub7ki2SWdLfYYKrp6/KB8YOUkbCwXxSFvYSV24ccuwUEqZIaHIA==", + "version": "1.0.19", + "resolved": "https://registry.npmjs.org/apollo-utilities/-/apollo-utilities-1.0.19.tgz", + "integrity": "sha512-pyVxizjIevHFfKhtc9FLEsGHmqiK0kHx1aBdJRUXDt+X+yjoVa/fVeCEo9t0NddGximemxxrQnq6lSkbIQvDlA==", "requires": { "fast-json-stable-stringify": "^2.0.0" } @@ -1621,12 +1643,9 @@ "integrity": "sha1-9wtzXGvKGlycItmCw+Oef+ujva0=" }, "async": { - "version": "2.6.1", - "resolved": "https://registry.npmjs.org/async/-/async-2.6.1.tgz", - "integrity": "sha512-fNEiL2+AZt6AlAw/29Cr0UDe4sRAHCpEHh54WMz+Bb7QfNcFw4h3loofyJpLeQs4Yx7yuqu/2dLgM5hKOs6HlQ==", - "requires": { - "lodash": "^4.17.10" - } + "version": "1.5.2", + "resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz", + "integrity": "sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=" }, "async-each": { "version": "1.0.1", @@ -3686,6 +3705,11 @@ } } }, + "csstype": { + "version": "2.5.6", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.5.6.tgz", + "integrity": "sha512-tKPyhy0FmfYD2KQYXD5GzkvAYLYj96cMLXr648CKGd3wBe0QqoPipImjGiLze9c8leJK8J3n7ap90tpk3E6HGQ==" + }, "currently-unhandled": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz", @@ -5365,14 +5389,6 @@ "readable-stream": "^2.0.0" } }, - "front-matter": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/front-matter/-/front-matter-2.3.0.tgz", - "integrity": "sha1-cgOviWzjV+4E4qpFFp6pHtf2dQQ=", - "requires": { - "js-yaml": "^3.10.0" - } - }, "fs-exists-cached": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs-exists-cached/-/fs-exists-cached-1.0.0.tgz", @@ -5877,15 +5893,9 @@ "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=" }, "gatsby": { -<<<<<<< HEAD - "version": "2.0.0-beta.99", - "resolved": "https://registry.npmjs.org/gatsby/-/gatsby-2.0.0-beta.99.tgz", - "integrity": "sha512-PzoL64WzHt5xcokIw6jnpyeZSqcwKMKY+a0DOtPsKShVG2Kozq9mwTWjA8c5xDV8qnTztTwrjhdD5sxisfwzGw==", -======= - "version": "2.0.0-beta.100", - "resolved": "https://registry.npmjs.org/gatsby/-/gatsby-2.0.0-beta.100.tgz", - "integrity": "sha512-61u95HixNnW+Nkr4lCf/tniTX3gyXF+LLwSl/mPVWaN3r1Rn2Up3sd+u7BD7zxo+6lkF9L97lp42A0a07Akfew==", ->>>>>>> 0e112d243e2216d2589b40397a0e488e46936fb6 + "version": "2.0.0-beta.111", + "resolved": "https://registry.npmjs.org/gatsby/-/gatsby-2.0.0-beta.111.tgz", + "integrity": "sha512-dX/ASgEANtpHJIHZQ8lEtFBYMIPhT/VLhpYbaYGGCfj4GCFGGfBx4lCUyVQxpr12J6NY65OVdqcc4krF/xHxCA==", "requires": { "@babel/code-frame": "7.0.0-beta.52", "@babel/core": "7.0.0-beta.52", @@ -5900,7 +5910,6 @@ "@babel/runtime": "7.0.0-beta.52", "@babel/traverse": "7.0.0-beta.52", "@reach/router": "^1.1.1", - "async": "^2.1.2", "autoprefixer": "^8.6.5", "babel-core": "7.0.0-bridge.0", "babel-eslint": "^8.2.2", @@ -5940,10 +5949,9 @@ "file-loader": "^1.1.11", "flat": "^4.0.0", "friendly-errors-webpack-plugin": "^1.6.1", - "front-matter": "^2.1.0", "fs-extra": "^5.0.0", - "gatsby-cli": "^2.0.0-beta.13", - "gatsby-link": "^2.0.0-beta.20", + "gatsby-cli": "^2.0.0-beta.14", + "gatsby-link": "^2.0.0-beta.22", "gatsby-plugin-page-creator": "^2.0.0-beta.5", "gatsby-react-router-scroll": "^2.0.0-beta.8", "glob": "^7.1.1", @@ -5953,7 +5961,6 @@ "graphql-tools": "^3.0.4", "graphql-type-json": "^0.2.1", "hash-mod": "^0.0.5", - "history": "^4.6.2", "invariant": "^2.2.4", "is-relative": "^1.0.0", "is-relative-url": "^2.0.0", @@ -5961,11 +5968,8 @@ "joi": "12.x.x", "json-loader": "^0.5.7", "json-stringify-safe": "^5.0.1", - "json5": "^0.5.0", "kebab-hash": "^0.1.2", "lodash": "^4.17.4", - "lodash-id": "^0.14.0", - "lowdb": "0.16.2", "md5": "^2.2.1", "md5-file": "^3.1.1", "mime": "^2.2.0", @@ -5974,13 +5978,11 @@ "mkdirp": "^0.5.1", "moment": "^2.21.0", "name-all-modules-plugin": "^1.0.1", - "node-libs-browser": "^2.0.0", "normalize-path": "^2.1.1", "null-loader": "^0.1.1", "opentracing": "^0.14.3", "opn": "^5.3.0", "parse-filepath": "^1.0.1", - "path-exists": "^3.0.0", "physical-cpu-count": "^2.0.0", "postcss-flexbugs-fixes": "^3.0.0", "postcss-loader": "^2.1.3", @@ -5998,7 +6000,6 @@ "socket.io": "^2.0.3", "string-similarity": "^1.2.0", "style-loader": "^0.21.0", - "treeify": "^1.1.0", "type-of": "^2.0.1", "uglifyjs-webpack-plugin": "^1.2.4", "url-loader": "^1.0.1", @@ -6008,7 +6009,6 @@ "webpack-dev-middleware": "^3.0.1", "webpack-dev-server": "^3.1.1", "webpack-hot-middleware": "^2.21.0", - "webpack-md5-hash": "^0.0.6", "webpack-merge": "^4.1.0", "webpack-stats-plugin": "^0.1.5", "yaml-loader": "^0.5.0" @@ -6023,9 +6023,9 @@ } }, "gatsby-cli": { - "version": "2.0.0-beta.13", - "resolved": "https://registry.npmjs.org/gatsby-cli/-/gatsby-cli-2.0.0-beta.13.tgz", - "integrity": "sha512-gPufYz+/5jkJ2axONWqYp/XmsV94l8ID8Ykwe54RKsjDrqMQL+VAnvcMuRZ0Q2h7w6+jYZ6vQbIGWW5Js1zYKg==", + "version": "2.0.0-beta.14", + "resolved": "https://registry.npmjs.org/gatsby-cli/-/gatsby-cli-2.0.0-beta.14.tgz", + "integrity": "sha512-i8ZemLA6MG0LMXf60OPsTA3/ydH7El06xhkyKfy9zC/SvL0RQ9qYK4+xHYVIKLKqsF+5/xP+Ve5geeXlZxDqRA==", "requires": { "@babel/code-frame": "7.0.0-beta.52", "@babel/runtime": "7.0.0-beta.52", @@ -6101,12 +6101,13 @@ } }, "gatsby-link": { - "version": "2.0.0-beta.20", - "resolved": "https://registry.npmjs.org/gatsby-link/-/gatsby-link-2.0.0-beta.20.tgz", - "integrity": "sha512-EC0mSG/KuWF4sdg0TCgqdhBPGj6f9v0EAhyuiJj7+GKrHR/+7Op1X1km3gLtjt4PL0/Q5yvXbt5WjR76rB8YVA==", + "version": "2.0.0-beta.22", + "resolved": "https://registry.npmjs.org/gatsby-link/-/gatsby-link-2.0.0-beta.22.tgz", + "integrity": "sha512-Ryrv+Rg/BneG8Qo55nJWWpNXG0wARUFGZaZwLMvS1DtKlJImVWUPPHO281WNtRanH+Nd73ZrDeOtswmPXPBnoA==", "requires": { "@babel/runtime": "7.0.0-beta.52", "@reach/router": "^1.1.1", + "@types/reach__router": "^1.0.0", "prop-types": "^15.6.1", "ric": "^1.3.0" } @@ -6569,13 +6570,6 @@ "requires": { "min-document": "^2.19.0", "process": "~0.5.1" - }, - "dependencies": { - "process": { - "version": "0.5.2", - "resolved": "https://registry.npmjs.org/process/-/process-0.5.2.tgz", - "integrity": "sha1-FjjYqONML0QKkduVq5rrZ3/Bhc8=" - } } }, "global-dirs": { @@ -6874,28 +6868,6 @@ "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz", "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==" }, - "history": { - "version": "4.7.2", - "resolved": "https://registry.npmjs.org/history/-/history-4.7.2.tgz", - "integrity": "sha512-1zkBRWW6XweO0NBcjiphtVJVsIQ+SXF29z9DVkceeaSLVMFXHool+fdCZD4spDCfZJCILPILc3bm7Bc+HRi0nA==", - "requires": { - "invariant": "^2.2.1", - "loose-envify": "^1.2.0", - "resolve-pathname": "^2.2.0", - "value-equal": "^0.4.0", - "warning": "^3.0.0" - }, - "dependencies": { - "warning": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz", - "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=", - "requires": { - "loose-envify": "^1.0.0" - } - } - } - }, "hmac-drbg": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", @@ -7946,11 +7918,6 @@ "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.10.tgz", "integrity": "sha512-iesFYPmxYYGTcmQK0sL8bX3TGHyM6b2qREaB4kamHfQyfPJP0xgoGxp19nsH16nsfquLdiyKyX3mQkfiSGV8Rg==" }, - "lodash-id": { - "version": "0.14.0", - "resolved": "https://registry.npmjs.org/lodash-id/-/lodash-id-0.14.0.tgz", - "integrity": "sha1-uvSJNOVDobXWNG+MhGmLGoyAOJY=" - }, "lodash._getnative": { "version": "3.9.1", "resolved": "https://registry.npmjs.org/lodash._getnative/-/lodash._getnative-3.9.1.tgz", @@ -8055,17 +8022,6 @@ "signal-exit": "^3.0.0" } }, - "lowdb": { - "version": "0.16.2", - "resolved": "https://registry.npmjs.org/lowdb/-/lowdb-0.16.2.tgz", - "integrity": "sha1-oql262bsV3lykZcPPIfNthEm+jo=", - "requires": { - "graceful-fs": "^4.1.3", - "is-promise": "^2.1.0", - "lodash": "4", - "steno": "^0.4.1" - } - }, "lowercase-keys": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-1.0.1.tgz", @@ -8617,6 +8573,11 @@ "vm-browserify": "0.0.4" }, "dependencies": { + "process": { + "version": "0.11.10", + "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz", + "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI=" + }, "punycode": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz", @@ -9249,13 +9210,6 @@ "async": "^1.5.2", "debug": "^2.2.0", "mkdirp": "0.5.x" - }, - "dependencies": { - "async": { - "version": "1.5.2", - "resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz", - "integrity": "sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=" - } } }, "posix-character-classes": { @@ -9743,9 +9697,9 @@ "integrity": "sha512-VvivMrbvd2nKkiG38qjULzlc+4Vx4wm/whI9pQD35YrARNnhxeiRktSOhSukRLFNlzg6Br/cJPet5J/u19r/mg==" }, "process": { - "version": "0.11.10", - "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz", - "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI=" + "version": "0.5.2", + "resolved": "https://registry.npmjs.org/process/-/process-0.5.2.tgz", + "integrity": "sha1-FjjYqONML0QKkduVq5rrZ3/Bhc8=" }, "process-nextick-args": { "version": "2.0.0", @@ -11265,11 +11219,6 @@ "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-1.0.1.tgz", "integrity": "sha1-Jsv+k10a7uq7Kbw/5a6wHpPUQiY=" }, - "resolve-pathname": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-2.2.0.tgz", - "integrity": "sha512-bAFz9ld18RzJfddgrO2e/0S2O81710++chRMUxHjXOYKF6jTAMrUNZrEZ1PvV0zlhfjidm08iRPdTLPno1FuRg==" - }, "resolve-url": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz", @@ -11392,14 +11341,14 @@ }, "dependencies": { "ajv": { - "version": "6.5.2", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.5.2.tgz", - "integrity": "sha512-hOs7GfvI6tUI1LfZddH82ky6mOMyTuY0mk7kE2pWpmhhUSkumzaTO5vbVwij39MdwPQWCV4Zv57Eo06NtL/GVA==", + "version": "6.5.3", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.5.3.tgz", + "integrity": "sha512-LqZ9wY+fx3UMiiPd741yB2pj3hhil+hQc8taf4o2QGRFpWgZ2V5C8HA165DY9sS3fJwsk7uT7ZlFEyC3Ig3lLg==", "requires": { "fast-deep-equal": "^2.0.1", "fast-json-stable-stringify": "^2.0.0", "json-schema-traverse": "^0.4.1", - "uri-js": "^4.2.1" + "uri-js": "^4.2.2" } }, "ajv-keywords": { @@ -12014,14 +11963,6 @@ "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.4.0.tgz", "integrity": "sha512-zhSCtt8v2NDrRlPQpCNtw/heZLtfUDqxBM1udqikb/Hbk52LK4nQSwr10u77iopCW5LsyHpuXS0GnEc48mLeew==" }, - "steno": { - "version": "0.4.4", - "resolved": "https://registry.npmjs.org/steno/-/steno-0.4.4.tgz", - "integrity": "sha1-BxEFvfwobmYVwEA8J+nXtdy4Vcs=", - "requires": { - "graceful-fs": "^4.1.3" - } - }, "stream-browserify": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.1.tgz", @@ -12438,11 +12379,6 @@ } } }, - "treeify": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/treeify/-/treeify-1.1.0.tgz", - "integrity": "sha512-1m4RA7xVAJrSGrrXGs0L3YTwyvBs2S8PbRHaLZAkFw7JR8oIFwYtysxlBZhYIa7xSyiYJKZ3iGrrk55cGA3i9A==" - }, "trim-newlines": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-1.0.0.tgz", @@ -12775,24 +12711,24 @@ "integrity": "sha1-TTNA6AfTdzvamZH4MFrNzCpmXSo=" }, "url-loader": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/url-loader/-/url-loader-1.1.0.tgz", - "integrity": "sha512-p/+44Z+yHoQVV6VKsgZuHi7UfvaKhJqucXvKQtsVQYyzaSC8KVdoXjIM5TToZxarq9WB+qIhMVTZr1v7bENKdg==", + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/url-loader/-/url-loader-1.1.1.tgz", + "integrity": "sha512-vugEeXjyYFBCUOpX+ZuaunbK3QXMKaQ3zUnRfIpRBlGkY7QizCnzyyn2ASfcxsvyU3ef+CJppVywnl3Kgf13Gg==", "requires": { "loader-utils": "^1.1.0", "mime": "^2.0.3", - "schema-utils": "1.0.0" + "schema-utils": "^1.0.0" }, "dependencies": { "ajv": { - "version": "6.5.2", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.5.2.tgz", - "integrity": "sha512-hOs7GfvI6tUI1LfZddH82ky6mOMyTuY0mk7kE2pWpmhhUSkumzaTO5vbVwij39MdwPQWCV4Zv57Eo06NtL/GVA==", + "version": "6.5.3", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.5.3.tgz", + "integrity": "sha512-LqZ9wY+fx3UMiiPd741yB2pj3hhil+hQc8taf4o2QGRFpWgZ2V5C8HA165DY9sS3fJwsk7uT7ZlFEyC3Ig3lLg==", "requires": { "fast-deep-equal": "^2.0.1", "fast-json-stable-stringify": "^2.0.0", "json-schema-traverse": "^0.4.1", - "uri-js": "^4.2.1" + "uri-js": "^4.2.2" } }, "ajv-keywords": { @@ -12905,11 +12841,6 @@ "spdx-expression-parse": "^3.0.0" } }, - "value-equal": { - "version": "0.4.0", - "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-0.4.0.tgz", - "integrity": "sha512-x+cYdNnaA3CxvMaTX0INdTCN8m8aF2uY9BvEqmxuYp8bL09cs/kWVQPVGcA35fMktdOsP69IgU7wFj/61dJHEw==" - }, "vary": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", @@ -13300,14 +13231,14 @@ }, "dependencies": { "ajv": { - "version": "6.5.2", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.5.2.tgz", - "integrity": "sha512-hOs7GfvI6tUI1LfZddH82ky6mOMyTuY0mk7kE2pWpmhhUSkumzaTO5vbVwij39MdwPQWCV4Zv57Eo06NtL/GVA==", + "version": "6.5.3", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.5.3.tgz", + "integrity": "sha512-LqZ9wY+fx3UMiiPd741yB2pj3hhil+hQc8taf4o2QGRFpWgZ2V5C8HA165DY9sS3fJwsk7uT7ZlFEyC3Ig3lLg==", "requires": { "fast-deep-equal": "^2.0.1", "fast-json-stable-stringify": "^2.0.0", "json-schema-traverse": "^0.4.1", - "uri-js": "^4.2.1" + "uri-js": "^4.2.2" } }, "ajv-keywords": { @@ -13459,14 +13390,6 @@ "uuid": "^3.1.0" } }, - "webpack-md5-hash": { - "version": "0.0.6", - "resolved": "https://registry.npmjs.org/webpack-md5-hash/-/webpack-md5-hash-0.0.6.tgz", - "integrity": "sha512-HrQ0AJpeXHRa3IjsgyyEfTx8EqYs5y/4x/WklSYsNDcqBixHzCkrmJV5U+4ks+sx7ycKoIdqWLdyuk913FCS+Q==", - "requires": { - "md5": "^2.0.0" - } - }, "webpack-merge": { "version": "4.1.4", "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-4.1.4.tgz", diff --git a/src/components/AboutHeader/index.jsx b/src/components/AboutHeader/index.jsx index 775495b..895401b 100644 --- a/src/components/AboutHeader/index.jsx +++ b/src/components/AboutHeader/index.jsx @@ -1,14 +1,14 @@ -import React from 'react' -import Transition from 'react-transition-group/Transition' -import AboutHeaderHero from '../../assets/images/about-main.svg' +import React from 'react'; +import Transition from 'react-transition-group/Transition'; +import AboutHeaderHero from '../../assets/images/about-main.svg'; import { - HeroWrapper, - HeroButtonWrapper, - HeroTitleWrapper, - duration, - transitionStyles, - Wrapper -} from './style' + HeroWrapper, + HeroButtonWrapper, + HeroTitleWrapper, + duration, + transitionStyles, + Wrapper, +} from './style'; /** * Top Navbar responsible for rendering the basic site-map layout including: blog | about | disclaimer etc @@ -18,53 +18,59 @@ import { * */ class AboutHeader extends React.Component { - constructor (props) { - super(props) - this.state = { - inside: false + constructor(props) { + super(props); + this.state = { + inside: false, + }; + } + componentDidMount() { + this.toggleEnterState(); } - } - componentDidMount () { - this.toggleEnterState() - } - toggleEnterState () { - this.setState({ inside: true }) - } + toggleEnterState() { + this.setState({inside: true}); + } - render () { - return ( - - {state => { - return ( - - - shorted-hero - - -
-
- Hello, we are -
-
- Shorted -
-
-
- Bringing ASX market short positions to your front door, with added insights and intelligence. -
-
- - Dashboard - -
- - - ) - }} - - ) - } + render() { + return ( + + {state => { + return ( + + + shorted-hero + + +
+
+ Hello, we are +
+
Shorted
+
+
+ Bringing ASX market short positions to your + front door, with added insights and + intelligence. +
+
+ + Dashboard + +
+ + + ); + }} + + ); + } } -export default AboutHeader +export default AboutHeader; diff --git a/src/components/AboutHeader/style.js b/src/components/AboutHeader/style.js index 92260d4..a252210 100644 --- a/src/components/AboutHeader/style.js +++ b/src/components/AboutHeader/style.js @@ -1,47 +1,47 @@ -import styled from 'styled-components' +import styled from 'styled-components'; -export const duration = 500 +export const duration = 500; export const transitionStyles = { - entering: { opacity: 0, Ypos: -100 }, - entered: { opacity: 1, Ypos: 0 }, - exited: { opacity: 0 } -} + entering: {opacity: 0, Ypos: -100}, + entered: {opacity: 1, Ypos: 0}, + exited: {opacity: 0}, +}; export const HeroButtonWrapper = styled.a` grid-area: hero-button; width: 210px; height: 80px; display: flex; - text-decoration:none; + text-decoration: none; justify-content: center; /* align horizontal */ align-items: center; /* align vertical */ margin: 5px; border-radius: 30px; color: white; background: #282fc3; - outline:0; + outline: 0; font-size: 30px; - font-family: "Avenir Next,Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; + font-family: 'Avenir Next,Segoe UI', Helvetica, Arial, sans-serif, + 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-weight: bold; - background: linear-gradient(-135deg, #827D9F, #0F0646); + background: linear-gradient(-135deg, #827d9f, #0f0646); &:hover { - -webkit-box-shadow: -3px 4px 7px 0px rgba(0,0,0,0.75); - -moz-box-shadow: -3px 4px 7px 0px rgba(0,0,0,0.75); - box-shadow: -3px 4px 7px 0px rgba(0,0,0,0.75); + -webkit-box-shadow: -3px 4px 7px 0px rgba(0, 0, 0, 0.75); + -moz-box-shadow: -3px 4px 7px 0px rgba(0, 0, 0, 0.75); + box-shadow: -3px 4px 7px 0px rgba(0, 0, 0, 0.75); color: #eee; - text-decoration: none!important; + text-decoration: none !important; height: 80px; transition: height 0.66s ease-out; margin-bottom: 5px; } -` +`; export const Wrapper = styled.div` display: grid; grid-gap: 20px; grid-template-columns: 1fr 2fr; - grid-template-areas: - "hero-title hero-image"; + grid-template-areas: 'hero-title hero-image'; margin-right: 100px; margin-left: 100px; margin-top: 250px; @@ -49,22 +49,22 @@ export const Wrapper = styled.div` transition: ${props => `${props.duration}ms ease-in-out`}; transition-property: opacity, transform; transform: ${props => `translateY(${props.Ypos}px)`}; -` +`; export const HeroWrapper = styled.div` grid-area: hero-image; width: 100%; -` +`; export const HeroTitleWrapper = styled.div` grid-area: hero-title; display: grid; grid-template-columns: 1fr; grid-template-rows: 3fr 1fr 1fr; grid-template-areas: - "hero-title" - "hero-description" - "todo" - "hero-button"; + 'hero-title' + 'hero-description' + 'todo' + 'hero-button'; .hero-title { margin-top: 50%; display: flex; @@ -79,7 +79,7 @@ export const HeroTitleWrapper = styled.div` float: left; font-size: 70px; font-weight: bold; - font-family: Avenir Next,sans-serif; + font-family: Avenir Next, sans-serif; } .header-2 { display: flex; @@ -89,7 +89,7 @@ export const HeroTitleWrapper = styled.div` vertical-align: middle; grid-area: hero-title; font-size: 75px; - font-family: Avenir Next,sans-serif; + font-family: Avenir Next, sans-serif; font-weight: bold; color: #282fc3; float: left; @@ -101,7 +101,7 @@ export const HeroTitleWrapper = styled.div` grid-area: hero-description; font-weight: 300; font-size: 30px; - font-family: Avenir Next,sans-serif; + font-family: Avenir Next, sans-serif; } .hero-button { grid-area: hero-button; @@ -111,4 +111,4 @@ export const HeroTitleWrapper = styled.div` vertical-align: middle; height: 70px; } -` +`; diff --git a/src/components/AlertRow/index.jsx b/src/components/AlertRow/index.jsx index 71fab10..2cb7f70 100644 --- a/src/components/AlertRow/index.jsx +++ b/src/components/AlertRow/index.jsx @@ -1,35 +1,37 @@ -import React from 'react' -import AlertRowGraph from '../../components/AlertRowGraph' +import React from 'react'; +import AlertRowGraph from '../../components/AlertRowGraph'; import { - Wrapper, - Name, - Code, - Percentage, - IndicatorWrapper, - IndicatorUp, - IndicatorDown, - PercentageChanged, - PercentageCurrent -} from './style' + Wrapper, + Name, + Code, + Percentage, + IndicatorWrapper, + IndicatorUp, + IndicatorDown, + PercentageChanged, + PercentageCurrent, +} from './style'; /** * Renders a given row in the alert & anomalies widget. */ const AlertRow = props => ( - -
{props.code}
 - {props.name} - - {props.current}% - - {props.changed}% - - - - {props.changed > 0 ? : } - - - -) + + +
{props.code}
+ + {props.name} + + {props.current}% + + {props.changed}% + + + + {props.changed > 0 ? : } + + + +); -export default AlertRow +export default AlertRow; diff --git a/src/components/AlertRow/style.js b/src/components/AlertRow/style.js index 2107ad3..adff688 100644 --- a/src/components/AlertRow/style.js +++ b/src/components/AlertRow/style.js @@ -5,8 +5,8 @@ export const Wrapper = styled.div` grid-template-columns: 90px 250px 100px 100px 100px; grid-template-rows: repeat(2, 1fr); grid-template-areas: - "code name name percentage indicator graph" - "code name name percentage indicator graph"; + 'code name name percentage indicator graph' + 'code name name percentage indicator graph'; margin: 6px; margin-left: 7px; margin-right: 7px; @@ -23,8 +23,8 @@ export const Name = styled.div` flex-direction: column; justify-content: center; vertical-align: middle; - font-family: Avenir Next,sans-serif; -` + font-family: Avenir Next, sans-serif; +`; export const Code = styled.div` grid-area: code; @@ -34,60 +34,58 @@ export const Code = styled.div` vertical-align: middle; padding-left: 10px; .code { - background-color: gray; - width: 60px; - height: 45px; - display: flex; - font-size: 25px; - - font-family: Avenir Next,sans-serif; - flex-direction: column; - justify-content: center; - vertical-align: middle; - text-align: center; - margin-left: 5px; - } -` + background-color: gray; + width: 60px; + height: 45px; + display: flex; + font-size: 25px; + + font-family: Avenir Next, sans-serif; + flex-direction: column; + justify-content: center; + vertical-align: middle; + text-align: center; + margin-left: 5px; + } +`; export const Percentage = styled.div` grid-area: percentage; display: grid; grid-template-rows: repeat(2, 1fr); grid-gap: 1px; grid-template-areas: - "current" - "changed"; -` + 'current' + 'changed'; +`; export const PercentageCurrent = styled.div` grid-area: current; font-size: 27px; font-weight: bold; - font-family: Avenir Next,sans-serif; - -` + font-family: Avenir Next, sans-serif; +`; export const PercentageChanged = styled.div` grid-area: changed; margin-left: 40px; font-weight: bold; font-size: 20px; - font-family: Avenir Next,sans-serif; - color: ${props => props.value > 0 ? `red`: `green`}; + font-family: Avenir Next, sans-serif; + color: ${props => (props.value > 0 ? `red` : `green`)}; padding-bottom: 5px; -` +`; export const IndicatorUp = styled.div` - width: 0; + width: 0; height: 0; border-left: 30px solid transparent; border-right: 30px solid transparent; border-bottom: 30px solid red; - ` +`; export const IndicatorDown = styled.div` - - width: 0; - height: 0; + width: 0; + height: 0; border-left: 30px solid transparent; border-right: 30px solid transparent; border-top: 30px solid green; -` +`; export const IndicatorWrapper = styled.div` grid-area: indicator; @@ -98,5 +96,4 @@ export const IndicatorWrapper = styled.div` justify-content: center; margin: auto; padding: auto; - -` +`; diff --git a/src/components/AlertRowGraph/index.jsx b/src/components/AlertRowGraph/index.jsx index c79cb9f..645aee3 100644 --- a/src/components/AlertRowGraph/index.jsx +++ b/src/components/AlertRowGraph/index.jsx @@ -1,55 +1,58 @@ -import React from 'react' +import React from 'react'; import { - VictoryChart, - VictoryAxis, - VictoryArea, - VictoryContainer -} from 'victory' + VictoryChart, + VictoryAxis, + VictoryArea, + VictoryContainer, +} from 'victory'; // import { LineChart, Line, ResponsiveContainer } from 'recharts'; -import { Wrapper } from './style' +import {Wrapper} from './style'; /** * LegendCompanyMarketCap * */ class AlertRowGraph extends React.Component { - constructor (props) { - super(props) - this.state = {} - } - getTickValues () { - return [new Date(2002, 1, 1), new Date(2017, 1, 1), new Date(2018, 1, 1)] - } + constructor(props) { + super(props); + this.state = {}; + } + getTickValues() { + return [ + new Date(2002, 1, 1), + new Date(2017, 1, 1), + new Date(2018, 1, 1), + ]; + } - render () { - return ( - - } - > - - ''} - style={{ axis: { stroke: 'none' } }} - /> - - - ) - } + render() { + return ( + + }> + + ''} + style={{axis: {stroke: 'none'}}} + /> + + + ); + } } -export default AlertRowGraph +export default AlertRowGraph; diff --git a/src/components/AlertRowGraph/style.js b/src/components/AlertRowGraph/style.js index d87d2cd..4dac389 100644 --- a/src/components/AlertRowGraph/style.js +++ b/src/components/AlertRowGraph/style.js @@ -5,11 +5,10 @@ export const Wrapper = styled.div` margin: 5px; display: flex; margin-right: 10px; - flex-direction:column; + flex-direction: column; text-align: center; justify-content: center; - -webkit-box-shadow: 1px 1px 2px 0px rgba(181,181,181,1); - -moz-box-shadow: 1px 1px 2px 0px rgba(181,181,181,1); - box-shadow: 1px 1px 2px 0px rgba(181,181,181,1); - -` \ No newline at end of file + -webkit-box-shadow: 1px 1px 2px 0px rgba(181, 181, 181, 1); + -moz-box-shadow: 1px 1px 2px 0px rgba(181, 181, 181, 1); + box-shadow: 1px 1px 2px 0px rgba(181, 181, 181, 1); +`; diff --git a/src/components/Alerts/index.jsx b/src/components/Alerts/index.jsx index 7d0b619..90d0b30 100644 --- a/src/components/Alerts/index.jsx +++ b/src/components/Alerts/index.jsx @@ -7,37 +7,39 @@ import {duration, transitionStyles, Wrapper, Header} from './style'; * Responsible for the rendering/display of "alerts" which represent anomalous changes in short positions for a given stock. */ class Alerts extends React.Component { - constructor(props) { - super(props); - this.state = { - inside: false, - }; - } - componentDidMount() { - this.toggleEnterState(); - } + constructor(props) { + super(props); + this.state = { + inside: false, + }; + } + componentDidMount() { + this.toggleEnterState(); + } - toggleEnterState() { - this.setState({inside: true}); - } + toggleEnterState() { + this.setState({inside: true}); + } - render() { - const alerts = this.props.data.alerts.map(alert => ( - - )); - return ( - - {state => { - return ( - -
Alerts & Anomalies
- {alerts} - - ); - }} - - ); - } + render() { + const alerts = this.props.data.alerts.map(alert => ( + + )); + return ( + + {state => { + return ( + +
Alerts & Anomalies
+ {alerts} + + ); + }} + + ); + } } export default Alerts; diff --git a/src/components/LegendCompanyMarketCap/index.jsx b/src/components/LegendCompanyMarketCap/index.jsx index 87cd81c..7b0a9e0 100644 --- a/src/components/LegendCompanyMarketCap/index.jsx +++ b/src/components/LegendCompanyMarketCap/index.jsx @@ -1,66 +1,69 @@ -import React from 'react' +import React from 'react'; import { - VictoryChart, - VictoryAxis, - VictoryLabel, - VictoryContainer, - VictoryLine -} from 'victory' + VictoryChart, + VictoryAxis, + VictoryLabel, + VictoryContainer, + VictoryLine, +} from 'victory'; // import { LineChart, Line, ResponsiveContainer } from 'recharts'; -import { Wrapper, Header, Chart } from './style' +import {Wrapper, Header, Chart} from './style'; /** * LegendCompanyMarketCap * */ class LegendCompanyMarketCap extends React.Component { - constructor (props) { - super(props) - this.state = {} - } - getTickValues () { - return [new Date(2002, 1, 1), new Date(2017, 1, 1), new Date(2018, 1, 1)] - } + constructor(props) { + super(props); + this.state = {}; + } + getTickValues() { + return [ + new Date(2002, 1, 1), + new Date(2017, 1, 1), + new Date(2018, 1, 1), + ]; + } - render () { - // return ( - // - // - // - // - // - // - // - // ); - return ( - -
- -
- - } - > - - new Date(x).getFullYear()} - /> - - - - ) - } + render() { + // return ( + // + // + // + // + // + // + // + // ); + return ( + +
+ +
+ + }> + + new Date(x).getFullYear()} + /> + + + + ); + } } -export default LegendCompanyMarketCap +export default LegendCompanyMarketCap; diff --git a/src/components/NavBar/index.jsx b/src/components/NavBar/index.jsx index 223c340..f1bf9c6 100644 --- a/src/components/NavBar/index.jsx +++ b/src/components/NavBar/index.jsx @@ -1,5 +1,5 @@ -import React from 'react' -import { Wrapper, NavButton } from './style' +import React from 'react'; +import {Wrapper, NavButton} from './style'; /** * Top Navbar responsible for rendering the basic site-map layout including: blog | about | disclaimer etc @@ -9,28 +9,26 @@ import { Wrapper, NavButton } from './style' * */ class NavBar extends React.Component { - constructor (props) { - super(props) - this.state = { - routes: [ - { text: 'About', url: '/about' }, - { text: 'Blog', url: '/blog' }, - { text: 'Disclaimer', url: '/disclaimer' }, - { text: 'Contact', url: '/contact' } - ] + constructor(props) { + super(props); + this.state = { + routes: [ + {text: 'About', url: '/about'}, + {text: 'Blog', url: '/blog'}, + {text: 'Disclaimer', url: '/disclaimer'}, + {text: 'Contact', url: '/contact'}, + ], + }; } - } - render () { - const buttons = this.state.routes.map(route => ( - {route.text} - )) - return ( - - {buttons} - - ) - } + render() { + const buttons = this.state.routes.map(route => ( + + {route.text} + + )); + return {buttons}; + } } -export default NavBar +export default NavBar; diff --git a/src/components/TopChart/index.jsx b/src/components/TopChart/index.jsx index b3e1381..c79bbec 100644 --- a/src/components/TopChart/index.jsx +++ b/src/components/TopChart/index.jsx @@ -1,24 +1,24 @@ -import React from 'react' +import React from 'react'; import { - LineChart, - ResponsiveContainer, - XAxis, - YAxis, - CartesianGrid, - Tooltip, - Line, - Label -} from 'recharts' -import Transition from 'react-transition-group/Transition' -import ShortedAPI from '../../services/sapi/client' + LineChart, + ResponsiveContainer, + XAxis, + YAxis, + CartesianGrid, + Tooltip, + Line, + Label, +} from 'recharts'; +import Transition from 'react-transition-group/Transition'; +import ShortedAPI from '../../services/sapi/client'; import { - duration, - transitionStyles, - Wrapper, - PickerWrapper, - colors700, - colors300 -} from './style' + duration, + transitionStyles, + Wrapper, + PickerWrapper, + colors700, + colors300, +} from './style'; /** * Chart * Component responsible for rendering the page1 graphic displaying the top short positions @@ -31,91 +31,105 @@ import { * */ class TopChart extends React.Component { - constructor (props) { - super(props) - this.apiClient = new ShortedAPI() - this.state = { - inside: false + constructor(props) { + super(props); + this.apiClient = new ShortedAPI(); + this.state = { + inside: false, + }; + } + componentDidMount() { + this.toggleEnterState(); } - } - componentDidMount () { - this.toggleEnterState() - } - toggleEnterState () { - this.setState({ inside: true }) - } - handleLineHover (e, key) { - console.log(e, key) - this.props.onSelectCode(key) - } + toggleEnterState() { + this.setState({inside: true}); + } + handleLineHover(e, key) { + console.log(e, key); + this.props.onSelectCode(key); + } - render () { - const { selectedCode, data } = this.props - const lines = data.dataKeys.map((key, index) => ( - this.handleLineHover(e, key)} - dot={false} - type='monotone' - dataKey={key} - strokeWidth={3} - stroke={colors700[index]} - strokeOpacity={ selectedCode === key ? 1 : 0.3 } - /> - )) - return ( - - {state => { - return ( - - - {this.props.picker} - -
- - - - - - - {/* */} - {lines} - - -
- - ) - }} - - ) - } + render() { + const {selectedCode, data} = this.props; + const lines = data.dataKeys.map((key, index) => ( + this.handleLineHover(e, key)} + dot={false} + type="monotone" + dataKey={key} + strokeWidth={3} + stroke={colors700[index]} + strokeOpacity={selectedCode === key ? 1 : 0.3} + /> + )); + return ( + + {state => { + return ( + + {this.props.picker} +
+ + + + + + + {/* */} + {lines} + + +
+ + ); + }} + + ); + } } -export default TopChart +export default TopChart; diff --git a/src/components/TopChart/style.js b/src/components/TopChart/style.js index a30278b..a5e60f1 100644 --- a/src/components/TopChart/style.js +++ b/src/components/TopChart/style.js @@ -1,9 +1,9 @@ import styled from 'styled-components'; export const duration = 500; export const transitionStyles = { - entering: { opacity: 0, Ypos: 500}, - entered: { opacity: 1, Ypos: 0}, - exited: { opacity: 0} + entering: {opacity: 0, Ypos: 500}, + entered: {opacity: 1, Ypos: 0}, + exited: {opacity: 0}, }; export const Wrapper = styled.div` @@ -12,10 +12,10 @@ export const Wrapper = styled.div` grid-template-rows: 40px 1fr; grid-template-columns: repeat(3, 1fr); grid-template-areas: - "none picker options" - "chart chart chart"; + 'none picker options' + 'chart chart chart'; .chart { - grid-area: chart; + grid-area: chart; } opacity: ${props => props.opacity}; transition: ${props => `${props.duration}ms ease-in-out`}; @@ -26,48 +26,46 @@ export const Wrapper = styled.div` border-radius: 30px; border: 1px solid black; .g.recharts-layer.recharts-cartesian-axis.recharts-yAxis.yAxis > text { - color: red; + color: red; } .recharts-text .recharts-label { - color: red; + color: red; } -` +`; export const PickerWrapper = styled.div` grid-area: picker; -` +`; export const intervals = { - d: 2, - w: 7, - m: 40, - y: 100 - - -} + d: 2, + w: 7, + m: 40, + y: 100, +}; export const colors700 = [ - "#D32F2F", - "#303F9F", - "#00796B", - "#388E3C", - "#388E3C", - "#F57C00", - "#455A64", - "#5D4037", - "#C2185B", - "#7B1FA2", - "#00796B", - "#7B1FA2", - "#C2185B" -] + '#D32F2F', + '#303F9F', + '#00796B', + '#388E3C', + '#388E3C', + '#F57C00', + '#455A64', + '#5D4037', + '#C2185B', + '#7B1FA2', + '#00796B', + '#7B1FA2', + '#C2185B', +]; export const colors300 = [ - "#E57373", - "#F06292", - "#7986CB", - "#9575CD", - "#7986CB", - "#64B5F6", - "#F06292", - "#E57373", - "#FFB74D", - "#BCAAA4", - "#FFF176" -] \ No newline at end of file + '#E57373', + '#F06292', + '#7986CB', + '#9575CD', + '#7986CB', + '#64B5F6', + '#F06292', + '#E57373', + '#FFB74D', + '#BCAAA4', + '#FFF176', +]; diff --git a/src/components/TopChartVictory/components.jsx b/src/components/TopChartVictory/components.jsx index 29a19a8..c081edb 100644 --- a/src/components/TopChartVictory/components.jsx +++ b/src/components/TopChartVictory/components.jsx @@ -2,14 +2,14 @@ import React from 'react'; export class TopChartTooltip extends React.Component { render() { - const {x, y, orientation } = this.props; - const newY = orientation === "top" ? y - 25 : y + 25; + const {x, y, orientation} = this.props; + const newY = orientation === 'top' ? y - 25 : y + 25; return ( - - - - - + + + + + ); } -} \ No newline at end of file +} diff --git a/src/components/TopChartVictory/index.jsx b/src/components/TopChartVictory/index.jsx index 327a049..09acce2 100644 --- a/src/components/TopChartVictory/index.jsx +++ b/src/components/TopChartVictory/index.jsx @@ -1,26 +1,26 @@ import React from 'react'; import { - VictoryChart, - VictoryAxis, - VictoryLabel, - VictoryContainer, - VictoryTooltip, - VictoryLine, - VictoryArea, - VictoryVoronoiContainer, + VictoryChart, + VictoryAxis, + VictoryLabel, + VictoryContainer, + VictoryTooltip, + VictoryLine, + VictoryArea, + VictoryVoronoiContainer, } from 'victory'; import Transition from 'react-transition-group/Transition'; import { - duration, - transitionStyles, - Wrapper, - PickerWrapper, - ChartWrapper, - OptionsWrapper, - colors700, - colors300, + duration, + transitionStyles, + Wrapper, + PickerWrapper, + ChartWrapper, + OptionsWrapper, + colors700, + colors300, } from './style'; -import { TopChartTooltip } from './components'; +import {TopChartTooltip} from './components'; /** * Chart * Component responsible for rendering the page1 graphic displaying the top short positions @@ -36,141 +36,178 @@ import { TopChartTooltip } from './components'; * */ class TopChartVictory extends React.Component { - constructor(props) { - super(props); - this.state = { - inside: false, - }; - } - componentDidMount() { - this.toggleEnterState(); - } - - toggleEnterState() { - this.setState({inside: true}); - } - handleLineHover(e, key) { - this.props.onSelectCode(key); - } + constructor(props) { + super(props); + this.state = { + inside: false, + }; + } + componentDidMount() { + this.toggleEnterState(); + } - render() { - const { data, selectedCode } = this.props; - var lines = null; - if (this.props.mode == 'NORMAL') { - lines = data.dataKeys.map((key, index) => ( - this.handleLineHover(e, key), - }, - }, - ]} - style={{ - data: { - stroke: colors700[index], - strokeOpacity: (key === selectedCode || !selectedCode) ? 1 : 0.2, - strokeWidth: 2, - }, - }} - /> - )); - } else if (this.props.mode == 'AREA') { - lines = data.dataKeys.map((key, index) => ( - this.handleLineHover(e, key), - }, - }, - ]} - style={{ - data: { - stroke: colors700[index], - fill: colors700[index], - fillOpacity: 0.3, - strokeWidth: 2, - }, - }} - /> - )); + toggleEnterState() { + this.setState({inside: true}); } - return ( - - {state => { - return ( - - {this.props.picker} - {this.props.options} - - `${d.date} \n stock: ${selectedCode} \n shorted: ${d[selectedCode]}%`} - labelComponent={ - } cornerRadius={0} flyoutStyle={{fill: "white"}}/>} - />} - // containerComponent={ - // `y: ${d.y}`} - // labelComponent={} - // /> - // } - > - {lines} - ( + this.handleLineHover(e, key), + }, + }, + ]} style={{ - axis: {stroke: '#756f6a'}, - axisLabel: { - fontSize: 12, - padding: 25, - fontFamily: 'Avenir Next,sans-serif', - }, - ticks: {stroke: 'grey', size: 5}, - tickLabels: {fontSize: 7, padding: 5}, + data: { + stroke: colors700[index], + strokeOpacity: + key === selectedCode || !selectedCode ? 1 : 0.2, + strokeWidth: 2, + }, }} - /> - `${Math.round(t)}`} - tickLabelComponent={} - domain={[0, 100]} - label="Percentage Shorted" + /> + )); + } else if (this.props.mode == 'AREA') { + lines = data.dataKeys.map((key, index) => ( + this.handleLineHover(e, key), + }, + }, + ]} style={{ - axisLabel: { - fontSize: 12, - padding: 32, - angle: 90, - fontFamily: 'Avenir Next,sans-serif', - }, - ticks: {stroke: 'grey', size: 5}, - tickLabels: {fontSize: 7, angle: 90, padding: 7}, + data: { + stroke: colors700[index], + fill: colors700[index], + fillOpacity: 0.3, + strokeWidth: 2, + }, }} - /> - - - - - ); - }} - - ); - } + /> + )); + } + return ( + + {state => { + return ( + + {this.props.picker} + + {this.props.options} + + + + `${ + d.date + } \n stock: ${selectedCode} \n shorted: ${ + d[selectedCode] + }%` + } + labelComponent={ + + } + cornerRadius={0} + flyoutStyle={{ + fill: 'white', + }} + /> + } + /> + } + // containerComponent={ + // `y: ${d.y}`} + // labelComponent={} + // /> + // } + > + {lines} + + `${Math.round(t)}`} + tickLabelComponent={ + + } + domain={[0, 100]} + label="Percentage Shorted" + style={{ + axisLabel: { + fontSize: 12, + padding: 32, + angle: 90, + fontFamily: + 'Avenir Next,sans-serif', + }, + ticks: {stroke: 'grey', size: 5}, + tickLabels: { + fontSize: 7, + angle: 90, + padding: 7, + }, + }} + /> + + + + ); + }} + + ); + } } export default TopChartVictory; diff --git a/src/views/dashboard/index.jsx b/src/views/dashboard/index.jsx index 1c90336..b93a0c1 100644 --- a/src/views/dashboard/index.jsx +++ b/src/views/dashboard/index.jsx @@ -31,105 +31,131 @@ import {DashboardWrapper, themes, duration, transitionStyles} from './style'; */ class Dashboard extends React.Component { - constructor(props) { - super(props); - this.apiClient = new ShortedAPI(); - this.state = { - options: { - values: ['d', 'w', 'm', 'y'], - }, - selectedWindowOption: 'w', - selectedCode: false, - selectedChartOption: 'NORMAL', - inside: false, - selectedTheme: false, - }; - } - handleWindowOptionSelected(value) { - this.setState({ - selectedWindowOption: value, - }); - } - handleThemeSelected(value) { - console.log(value); - this.setState({ - selectedTheme: value, - }); - } - handleChartOptionChange(value) { - console.log('handleChartOptionChange:', value); - this.setState({selectedChartOption: value}); - } - handleSelectCode(value) { - this.setState({ - selectedCode: value, - }); - } - componentDidMount() { - this.toggleEnterState(); - } - toggleEnterState() { - this.setState({inside: true}); - } - render() { - console.log('rendering'); - const { - options, - selectedChartOption, - selectedWindowOption, - selectedCode, - selectedTheme, - } = this.state; - return ( - - {state => { - return ( - - -
- - this.handleWindowOptionSelected(value)} - /> - } - options={ - - this.handleChartOptionChange(value) - } - /> - } - data={this.apiClient.getTopShorts(selectedWindowOption)} - mode={selectedChartOption} - selectedWindowOption={selectedWindowOption} - selectedCode={selectedCode} - onSelectCode={value => this.handleSelectCode(value)} - /> -
- this.handleThemeSelected(value)} - themes={themes} - /> - -
- - -
- - - ); - }} - - ); - } + constructor(props) { + super(props); + this.apiClient = new ShortedAPI(); + this.state = { + options: { + values: ['d', 'w', 'm', 'y'], + }, + selectedWindowOption: 'w', + selectedCode: false, + selectedChartOption: 'NORMAL', + inside: false, + selectedTheme: false, + }; + } + handleWindowOptionSelected(value) { + this.setState({ + selectedWindowOption: value, + }); + } + handleThemeSelected(value) { + console.log(value); + this.setState({ + selectedTheme: value, + }); + } + handleChartOptionChange(value) { + console.log('handleChartOptionChange:', value); + this.setState({selectedChartOption: value}); + } + handleSelectCode(value) { + this.setState({ + selectedCode: value, + }); + } + componentDidMount() { + this.toggleEnterState(); + } + toggleEnterState() { + this.setState({inside: true}); + } + render() { + console.log('rendering'); + const { + options, + selectedChartOption, + selectedWindowOption, + selectedCode, + selectedTheme, + } = this.state; + return ( + + {state => { + return ( + + +
+ + + this.handleWindowOptionSelected( + value, + ) + } + /> + } + options={ + + this.handleChartOptionChange( + value, + ) + } + /> + } + data={this.apiClient.getTopShorts( + selectedWindowOption, + )} + mode={selectedChartOption} + selectedWindowOption={ + selectedWindowOption + } + selectedCode={selectedCode} + onSelectCode={value => + this.handleSelectCode(value) + } + /> +
+ + this.handleThemeSelected(value) + } + themes={themes} + /> + +
+ + +
+ + + ); + }} + + ); + } } export default Dashboard; From 06e987515c319082743287a0ba4fd977897103b2 Mon Sep 17 00:00:00 2001 From: Ben Ebsworth Date: Sat, 18 Aug 2018 18:39:16 +1000 Subject: [PATCH 2/2] fixed tabs --- gatsby-browser.js | 2 +- gatsby-config.js | 28 +- gatsby-node.js | 52 +- gatsby-ssr.js | 2 +- src/components/AppViewWrapper/index.jsx | 18 +- src/components/AppViewWrapper/style.js | 4 +- src/components/AxisLabel/index.jsx | 37 +- src/components/Button/index.jsx | 19 +- src/components/Button/style.js | 10 +- src/components/ChartOptions/index.jsx | 159 ++-- src/components/Header/index.jsx | 64 +- src/components/Legend/index.jsx | 129 +-- src/components/LegendCompanyCode/index.jsx | 16 +- src/components/LegendCompanyCode/style.js | 12 +- src/components/LegendCompanyLogo/index.jsx | 14 +- src/components/LegendCompanyLogo/style.js | 8 +- .../LegendCompanyMarketCap/style.js | 10 +- src/components/LegendCompanyPE/index.jsx | 16 +- src/components/LegendCompanyPE/style.js | 12 +- src/components/MoversList/index.jsx | 64 +- src/components/MoversList/style.js | 72 +- src/components/MoversListRow/index.jsx | 54 +- src/components/MoversListRow/style.js | 59 +- src/components/ProfileAlerts/index.jsx | 24 +- src/components/ProfileAlerts/style.js | 2 +- src/components/ProfileChart/index.jsx | 24 +- src/components/ProfileChart/style.js | 2 +- src/components/ProfileHeader/index.jsx | 24 +- src/components/ProfileHeader/style.js | 2 +- src/components/ProfileSidePanel/index.jsx | 24 +- src/components/ProfileSidePanel/style.js | 2 +- src/components/SearchBar/index.jsx | 24 +- src/components/SearchBar/style.js | 4 +- src/components/ThemePicker/index.jsx | 38 +- src/components/ThemePicker/style.js | 27 +- src/components/TopChartVictory/style.js | 98 ++- src/components/TopShortsList/index.jsx | 94 +- src/components/TopShortsList/style.js | 72 +- src/components/TopShortsListRow/index.jsx | 47 +- src/components/TopShortsListRow/style.js | 85 +- src/components/WindowPicker/index.jsx | 32 +- src/components/WindowPicker/style.js | 3 +- src/components/layout.css | 802 +++++++++--------- src/components/layout.jsx | 87 +- src/html.js | 66 +- src/pages/404.jsx | 8 +- src/pages/about.jsx | 8 +- src/pages/index.jsx | 12 +- src/services/sapi/client.js | 230 ++--- src/views/aboutpage/index.jsx | 45 +- src/views/aboutpage/style.js | 15 +- src/views/dashboard/style.js | 54 +- src/views/stockprofile/index.jsx | 243 +++--- src/views/stockprofile/style.js | 54 +- 54 files changed, 1562 insertions(+), 1551 deletions(-) diff --git a/gatsby-browser.js b/gatsby-browser.js index d168926..b1e5c31 100644 --- a/gatsby-browser.js +++ b/gatsby-browser.js @@ -4,4 +4,4 @@ * See: https://www.gatsbyjs.org/docs/browser-apis/ */ - // You can delete this file if you're not using it \ No newline at end of file +// You can delete this file if you're not using it diff --git a/gatsby-config.js b/gatsby-config.js index ba1f654..fab14cb 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -1,18 +1,18 @@ const path = require('path'); module.exports = { - siteMetadata: { - title: 'Shorted', - }, - plugins: [ - 'gatsby-plugin-react-helmet', - 'gatsby-plugin-styled-components', - `gatsby-transformer-yaml`, - { - resolve: `gatsby-source-filesystem`, - options: { - path: `${__dirname}/data/stocks`, - name: 'stocks', - }, + siteMetadata: { + title: 'Shorted', }, - ], + plugins: [ + 'gatsby-plugin-react-helmet', + 'gatsby-plugin-styled-components', + `gatsby-transformer-yaml`, + { + resolve: `gatsby-source-filesystem`, + options: { + path: `${__dirname}/data/stocks`, + name: 'stocks', + }, + }, + ], }; diff --git a/gatsby-node.js b/gatsby-node.js index aec2057..c314429 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -4,35 +4,37 @@ * See: https://www.gatsbyjs.org/docs/node-apis/ */ - // You can delete this file if you're not using it - const path = require('path'); +// You can delete this file if you're not using it +const path = require('path'); - exports.createPages = ({ graphql, actions }) => { - const { createPage } = actions; - const stockProfileTemplate = path.resolve(`src/templates/stock-profile-template.js`); - return graphql(`{ - allStocksYaml { - edges { - node { - code, - sector - } +exports.createPages = ({graphql, actions}) => { + const {createPage} = actions; + const stockProfileTemplate = path.resolve( + `src/templates/stock-profile-template.js`, + ); + return graphql(` + { + allStocksYaml { + edges { + node { + code + sector + } + } } - } - }`) - .then(result => { + } + `).then(result => { if (result.errors) { return Promise.reject(result.errors); } - result.data.allStocksYaml.edges - .forEach(({ node }) => { - createPage({ - path: node.code.toUpperCase(), - component: stockProfileTemplate, - context: { - code: node.code - } - }); + result.data.allStocksYaml.edges.forEach(({node}) => { + createPage({ + path: node.code.toUpperCase(), + component: stockProfileTemplate, + context: { + code: node.code, + }, }); + }); }); - } \ No newline at end of file +}; diff --git a/gatsby-ssr.js b/gatsby-ssr.js index cdad094..b17b8fc 100644 --- a/gatsby-ssr.js +++ b/gatsby-ssr.js @@ -4,4 +4,4 @@ * See: https://www.gatsbyjs.org/docs/ssr-apis/ */ - // You can delete this file if you're not using it \ No newline at end of file +// You can delete this file if you're not using it diff --git a/src/components/AppViewWrapper/index.jsx b/src/components/AppViewWrapper/index.jsx index ddbc0e9..99d9e56 100644 --- a/src/components/AppViewWrapper/index.jsx +++ b/src/components/AppViewWrapper/index.jsx @@ -1,6 +1,6 @@ -import React from 'react' -import Header from '../../components/Header' -import { Wrapper } from './style' +import React from 'react'; +import Header from '../../components/Header'; +import {Wrapper} from './style'; /** * AppViewWrapper @@ -10,10 +10,10 @@ import { Wrapper } from './style' * @param {*} props */ const AppViewWrapper = props => ( - -
- {props.children} - -) + +
+ {props.children} + +); -export default AppViewWrapper +export default AppViewWrapper; diff --git a/src/components/AppViewWrapper/style.js b/src/components/AppViewWrapper/style.js index 073abcc..8893c3a 100644 --- a/src/components/AppViewWrapper/style.js +++ b/src/components/AppViewWrapper/style.js @@ -6,7 +6,7 @@ export const Wrapper = styled.div` align-items: center; width: 100%; flex-direction: column; - max-width: ${props => props.maxWidth ? props.maxWidth : 5000}px; + max-width: ${props => (props.maxWidth ? props.maxWidth : 5000)}px; min-height: 280px; justify-content: center; background-image: ${props => `url(${props.background})`}; @@ -15,4 +15,4 @@ export const Wrapper = styled.div` background-repeat: no-repeat; background-position: bottom; background-size: cover; -` \ No newline at end of file +`; diff --git a/src/components/AxisLabel/index.jsx b/src/components/AxisLabel/index.jsx index 93c4f5f..10473e8 100644 --- a/src/components/AxisLabel/index.jsx +++ b/src/components/AxisLabel/index.jsx @@ -1,21 +1,20 @@ -import React from 'react' +import React from 'react'; -const AxisLabel = ({ axisType, x, y, width, height, stroke, children }) => { - const isVert = axisType === 'yAxis' - const cx = isVert ? x : x + width / 2 - const cy = isVert ? height / 2 + y : y + height + 10 - const rot = isVert ? `270 ${cx} ${cy}` : 0 - return ( - - {children} - - ) -} +const AxisLabel = ({axisType, x, y, width, height, stroke, children}) => { + const isVert = axisType === 'yAxis'; + const cx = isVert ? x : x + width / 2; + const cy = isVert ? height / 2 + y : y + height + 10; + const rot = isVert ? `270 ${cx} ${cy}` : 0; + return ( + + {children} + + ); +}; -export default AxisLabel +export default AxisLabel; diff --git a/src/components/Button/index.jsx b/src/components/Button/index.jsx index 9b8681f..be9635f 100644 --- a/src/components/Button/index.jsx +++ b/src/components/Button/index.jsx @@ -1,13 +1,12 @@ -import React from 'react' -import { Wrapper } from './style' +import React from 'react'; +import {Wrapper} from './style'; const Button = props => ( - props.handleSelect(props.value)} - > - {props.value} - -) + props.handleSelect(props.value)}> + {props.value} + +); -export default Button +export default Button; diff --git a/src/components/Button/style.js b/src/components/Button/style.js index c141b36..efcee15 100644 --- a/src/components/Button/style.js +++ b/src/components/Button/style.js @@ -1,6 +1,5 @@ import styled from 'styled-components'; - export const Wrapper = styled.button` width: 40px; height: 40px; @@ -10,9 +9,10 @@ export const Wrapper = styled.button` margin: 5px; border-radius: 7px; color: white; - background: ${ props => props.selected ? `#3d1abd` : `#8361ff`}; - outline:0; + background: ${props => (props.selected ? `#3d1abd` : `#8361ff`)}; + outline: 0; font-size: 20px; - font-family: "Avenir Next,Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; + font-family: 'Avenir Next,Segoe UI', Helvetica, Arial, sans-serif, + 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-weight: bold; -` \ No newline at end of file +`; diff --git a/src/components/ChartOptions/index.jsx b/src/components/ChartOptions/index.jsx index beaeef1..be030ec 100644 --- a/src/components/ChartOptions/index.jsx +++ b/src/components/ChartOptions/index.jsx @@ -1,89 +1,98 @@ -import React from 'react' -import ReactDOM from 'react-dom' -import { Radio, Icon } from 'antd' +import React from 'react'; +import ReactDOM from 'react-dom'; +import {Radio, Icon} from 'antd'; // TODO: look at how antd style sheets can be inherently added into project without imports, plugin may be doing this -import 'antd/dist/antd.css' +import 'antd/dist/antd.css'; import { - Button, - OptionsWrapper, - OptionHeader, - Wrapper, - radioStyle, - buttonStyle -} from './style' + Button, + OptionsWrapper, + OptionHeader, + Wrapper, + radioStyle, + buttonStyle, +} from './style'; -const RadioButton = Radio.Button -const RadioGroup = Radio.Group +const RadioButton = Radio.Button; +const RadioGroup = Radio.Group; const Options = props => ( - - - Chart display - -
- props.onOptionsChange(e.target.value)} - defaultValue='a' - buttonStyle='solid' - > - Normal - CandleStick - Smoothed - Area - -
- -) + + Chart display +
+ props.onOptionsChange(e.target.value)} + defaultValue="a" + buttonStyle="solid"> + + Normal + + + CandleStick + + + Smoothed + + + Area + + +
+ +); class ChartOptions extends React.Component { - constructor (props) { - super(props) - this.state = { - open: false + constructor(props) { + super(props); + this.state = { + open: false, + }; + this.optionsArea = React.createRef(); + this.handleOutsideClick = this.handleOutsideClick.bind(this); } - this.optionsArea = React.createRef() - this.handleOutsideClick = this.handleOutsideClick.bind(this) - } - onComponentDidUnmount () { - document.removeEventListener('click', e => this.handleOutsideClick(e)) - } - handleOutsideClick (e) { - const chartOptionsArea = ReactDOM.findDOMNode(this) - // chartOptionsArea = this.node - if (chartOptionsArea.contains(e.target)) { - return + onComponentDidUnmount() { + document.removeEventListener('click', e => this.handleOutsideClick(e)); + } + handleOutsideClick(e) { + const chartOptionsArea = ReactDOM.findDOMNode(this); + // chartOptionsArea = this.node + if (chartOptionsArea.contains(e.target)) { + return; + } + this.handleSelect(); } - this.handleSelect() - } - handleSelect () { - if (!this.state.open) { - // attach/remove event handler - document.addEventListener('click', this.handleOutsideClick, false) - } else { - document.removeEventListener('click', this.handleOutsideClick, false) + handleSelect() { + if (!this.state.open) { + // attach/remove event handler + document.addEventListener('click', this.handleOutsideClick, false); + } else { + document.removeEventListener( + 'click', + this.handleOutsideClick, + false, + ); + } + this.setState(prevState => ({ + open: !prevState.open, + })); + } + handleOptionsChange(e, v) { + console.log(e, v); } - this.setState(prevState => ({ - open: !prevState.open - })) - } - handleOptionsChange (e, v) { - console.log(e, v) - } - render () { - return ( - - - this.props.onChartOptionChange(v)} - open={this.state.open} - /> - - ) - } + render() { + return ( + + + this.props.onChartOptionChange(v)} + open={this.state.open} + /> + + ); + } } -export default ChartOptions +export default ChartOptions; diff --git a/src/components/Header/index.jsx b/src/components/Header/index.jsx index fae85b2..f970726 100644 --- a/src/components/Header/index.jsx +++ b/src/components/Header/index.jsx @@ -12,39 +12,41 @@ import {duration, transitionStyles, Wrapper} from './style'; * */ class Header extends React.Component { - constructor(props) { - super(props); - this.state = { - routes: [ - {text: 'About', url: '/about'}, - {text: 'Blog', url: '/blog'}, - {text: 'Disclaimer', url: '/disclaimer'}, - ], - inside: false, - }; - } - componentDidMount() { - this.toggleEnterState(); - } + constructor(props) { + super(props); + this.state = { + routes: [ + {text: 'About', url: '/about'}, + {text: 'Blog', url: '/blog'}, + {text: 'Disclaimer', url: '/disclaimer'}, + ], + inside: false, + }; + } + componentDidMount() { + this.toggleEnterState(); + } - toggleEnterState() { - this.setState({inside: true}); - } + toggleEnterState() { + this.setState({inside: true}); + } - render() { - return ( - - {state => { - return ( - - - - - ); - }} - - ); - } + render() { + return ( + + {state => { + return ( + + + + + ); + }} + + ); + } } export default Header; diff --git a/src/components/Legend/index.jsx b/src/components/Legend/index.jsx index 8ca34e4..a59d8fd 100644 --- a/src/components/Legend/index.jsx +++ b/src/components/Legend/index.jsx @@ -1,72 +1,79 @@ -import React from 'react' -import Transition from 'react-transition-group/Transition' -import LegendCompanyCode from '../../components/LegendCompanyCode' -import LegendCompanyLogo from '../../components/LegendCompanyLogo' -import LegendCompanyPE from '../../components/LegendCompanyPE' -import LegendCompanyMarketCap from '../../components/LegendCompanyMarketCap' +import React from 'react'; +import Transition from 'react-transition-group/Transition'; +import LegendCompanyCode from '../../components/LegendCompanyCode'; +import LegendCompanyLogo from '../../components/LegendCompanyLogo'; +import LegendCompanyPE from '../../components/LegendCompanyPE'; +import LegendCompanyMarketCap from '../../components/LegendCompanyMarketCap'; import { - Wrapper, - duration, - transitionStyles, - UnselectedWrapper, - CompanyName, - CompanySector -} from './style' -import ShortedAPI from '../../services/sapi/client' + Wrapper, + duration, + transitionStyles, + UnselectedWrapper, + CompanyName, + CompanySector, +} from './style'; +import ShortedAPI from '../../services/sapi/client'; /** * Renders a shorted.com.au logo * TODO: add data fetch here, async or prefetch based of top-short positions */ class Legend extends React.Component { - constructor (props) { - super(props) - this.apiClient = new ShortedAPI() - this.state = { - inside: false, - code: false + constructor(props) { + super(props); + this.apiClient = new ShortedAPI(); + this.state = { + inside: false, + code: false, + }; } - } - componentDidUpdate (prevProps) { - // You don't have to do this check first, but it can help prevent an unneeded render - if (prevProps.code !== this.props.code) { - this.setState({ - code: this.props.code, - inside: false - }) + componentDidUpdate(prevProps) { + // You don't have to do this check first, but it can help prevent an unneeded render + if (prevProps.code !== this.props.code) { + this.setState({ + code: this.props.code, + inside: false, + }); + } + } + componentDidMount() { + this.toggleEnterState(); } - } - componentDidMount () { - this.toggleEnterState() - } - toggleEnterState () { - this.setState({ inside: true }) - } - render () { - const data = this.apiClient.getStockSummary(this.props.code) - const logo = this.apiClient.getStockLogo(this.props.code) - return ( - - {state => { - return this.props.code - ? - - - - {data.metadata.name} - {data.metadata.sector} - - - : -

hover over graph to show profile

- - }} - - ) - } + toggleEnterState() { + this.setState({inside: true}); + } + render() { + const data = this.apiClient.getStockSummary(this.props.code); + const logo = this.apiClient.getStockLogo(this.props.code); + return ( + + {state => { + return this.props.code ? ( + + + + + {data.metadata.name} + + {data.metadata.sector} + + + + ) : ( + +

hover over graph to show profile

+ + ); + }} + + ); + } } -export default Legend +export default Legend; diff --git a/src/components/LegendCompanyCode/index.jsx b/src/components/LegendCompanyCode/index.jsx index 253b29b..5e6cef3 100644 --- a/src/components/LegendCompanyCode/index.jsx +++ b/src/components/LegendCompanyCode/index.jsx @@ -1,5 +1,5 @@ -import React from 'react' -import { Wrapper, Code, Header } from './style' +import React from 'react'; +import {Wrapper, Code, Header} from './style'; /** * Renders a nicely styled and dynamically scaling header for the legend view which will display the company icon/logo @@ -7,9 +7,9 @@ import { Wrapper, Code, Header } from './style' * */ const LegendCompanyCode = props => ( - -
Issuer code
- {props.code} - -) -export default LegendCompanyCode + +
Issuer code
+ {props.code} + +); +export default LegendCompanyCode; diff --git a/src/components/LegendCompanyCode/style.js b/src/components/LegendCompanyCode/style.js index 1b95163..b481742 100644 --- a/src/components/LegendCompanyCode/style.js +++ b/src/components/LegendCompanyCode/style.js @@ -8,7 +8,7 @@ export const Wrapper = styled.div` justify-content: center; vertical-align: middle; text-align: center; -` +`; export const Code = styled.div` flex-direction: column; @@ -17,14 +17,14 @@ export const Code = styled.div` text-align: center; font-size: 22px; font-weight: 600; - font-family: Avenir Next,sans-serif; -` -export const Header = styled.div` + font-family: Avenir Next, sans-serif; +`; +export const Header = styled.div` flex-direction: column; justify-content: center; vertical-align: middle; text-align: center; font-size: 15px; font-weight: bold; - font-family: Avenir Next,sans-serif; -` \ No newline at end of file + font-family: Avenir Next, sans-serif; +`; diff --git a/src/components/LegendCompanyLogo/index.jsx b/src/components/LegendCompanyLogo/index.jsx index c38cfc8..f5f1e10 100644 --- a/src/components/LegendCompanyLogo/index.jsx +++ b/src/components/LegendCompanyLogo/index.jsx @@ -1,5 +1,5 @@ -import React from 'react' -import { Wrapper, Image } from './style' +import React from 'react'; +import {Wrapper, Image} from './style'; /** * Renders a nicely styled and dynamically scaling header for the legend view which will display the company icon/logo @@ -7,8 +7,8 @@ import { Wrapper, Image } from './style' * */ const LegendCompanyLogo = props => ( - - - -) -export default LegendCompanyLogo + + + +); +export default LegendCompanyLogo; diff --git a/src/components/LegendCompanyLogo/style.js b/src/components/LegendCompanyLogo/style.js index 04e84c4..007294b 100644 --- a/src/components/LegendCompanyLogo/style.js +++ b/src/components/LegendCompanyLogo/style.js @@ -7,11 +7,11 @@ export const Wrapper = styled.div` vertical-align: middle; justify-content: center; grid-area: company-logo; -` +`; export const Image = styled.img` width: 60px; height: 60px; margin-left: auto; - margin-right: auto; - display: block; -` \ No newline at end of file + margin-right: auto; + display: block; +`; diff --git a/src/components/LegendCompanyMarketCap/style.js b/src/components/LegendCompanyMarketCap/style.js index 8d26532..8a7e98a 100644 --- a/src/components/LegendCompanyMarketCap/style.js +++ b/src/components/LegendCompanyMarketCap/style.js @@ -7,16 +7,16 @@ export const Wrapper = styled.div` height: 180px; grid-template-rows: 30px 170px; grid-template-areas: - "header" - "chart"; -` + 'header' + 'chart'; +`; export const Header = styled.div` grid-area: header; display: flex; flex-direction: column; justify-content: center; text-align: center; -` +`; export const Chart = styled.div` grid-area: chart; display: flex; @@ -24,4 +24,4 @@ export const Chart = styled.div` justify-content: center; text-align: center; height: 150px; -` \ No newline at end of file +`; diff --git a/src/components/LegendCompanyPE/index.jsx b/src/components/LegendCompanyPE/index.jsx index be0bd6a..0e68926 100644 --- a/src/components/LegendCompanyPE/index.jsx +++ b/src/components/LegendCompanyPE/index.jsx @@ -1,5 +1,5 @@ -import React from 'react' -import { Wrapper, Header, PE } from './style' +import React from 'react'; +import {Wrapper, Header, PE} from './style'; /** * Renders a nicely styled and dynamically scaling header for the legend view which will display the company icon/logo @@ -7,9 +7,9 @@ import { Wrapper, Header, PE } from './style' * */ const LegendCompanyPE = props => ( - -
P/E ratio
- {props.pe} - -) -export default LegendCompanyPE + +
P/E ratio
+ {props.pe} + +); +export default LegendCompanyPE; diff --git a/src/components/LegendCompanyPE/style.js b/src/components/LegendCompanyPE/style.js index 21cab55..647eee5 100644 --- a/src/components/LegendCompanyPE/style.js +++ b/src/components/LegendCompanyPE/style.js @@ -8,7 +8,7 @@ export const Wrapper = styled.div` justify-content: center; background: white; grid-area: company-pe; -` +`; export const PE = styled.div` flex-direction: column; @@ -17,14 +17,14 @@ export const PE = styled.div` text-align: center; font-size: 22px; font-weight: 600; - font-family: Avenir Next,sans-serif; -` -export const Header = styled.div` + font-family: Avenir Next, sans-serif; +`; +export const Header = styled.div` flex-direction: column; justify-content: center; vertical-align: middle; text-align: center; font-size: 15px; font-weight: bold; - font-family: Avenir Next,sans-serif; -` \ No newline at end of file + font-family: Avenir Next, sans-serif; +`; diff --git a/src/components/MoversList/index.jsx b/src/components/MoversList/index.jsx index 59151e9..a1ab6bd 100644 --- a/src/components/MoversList/index.jsx +++ b/src/components/MoversList/index.jsx @@ -9,38 +9,42 @@ import {Wrapper, Header, More, duration, transitionStyles} from './style'; * information for more stocks (maybe top 100). Will perhaps a more verbose set of properties and graphics. */ class MoversList extends React.Component { - constructor(props) { - super(props); - this.state = { - inside: false, - }; - } - componentDidMount() { - this.toggleEnterState(); - } + constructor(props) { + super(props); + this.state = { + inside: false, + }; + } + componentDidMount() { + this.toggleEnterState(); + } - toggleEnterState() { - this.setState({inside: true}); - } + toggleEnterState() { + this.setState({inside: true}); + } - render() { - const rows = this.props.data.data - .slice(0, 5) - .map(row_data => ); - return ( - - {state => { - return ( - -
Top Movers
- {rows} - show more - - ); - }} - - ); - } + render() { + const rows = this.props.data.data + .slice(0, 5) + .map(row_data => ( + + )); + return ( + + {state => { + return ( + +
Top Movers
+ {rows} + show more + + ); + }} + + ); + } } export default MoversList; diff --git a/src/components/MoversList/style.js b/src/components/MoversList/style.js index 4a6510c..76e53fb 100644 --- a/src/components/MoversList/style.js +++ b/src/components/MoversList/style.js @@ -2,43 +2,43 @@ import styled from 'styled-components'; export const duration = 500; export const transitionStyles = { - entering: { opacity: 0, Ypos: 500}, - entered: { opacity: 1, Ypos: 0}, - exited: { opacity: 0} - }; + entering: {opacity: 0, Ypos: 500}, + entered: {opacity: 1, Ypos: 0}, + exited: {opacity: 0}, +}; export const Wrapper = styled.div` - height: 100%; - grid-area: top-movers; - background: white; - display: flex; - flex-direction: column; - border-radius: 15px; - border: 1px solid #eee; - opacity: ${props => props.opacity}; - transition: ${props => `${props.duration}ms ease-in-out`}; - transition-property: opacity, transform; - transform: ${props => `translateY(${props.Ypos}px)`}; -` + height: 100%; + grid-area: top-movers; + background: white; + display: flex; + flex-direction: column; + border-radius: 15px; + border: 1px solid #eee; + opacity: ${props => props.opacity}; + transition: ${props => `${props.duration}ms ease-in-out`}; + transition-property: opacity, transform; + transform: ${props => `translateY(${props.Ypos}px)`}; +`; export const Header = styled.div` - height: 50px; - display: flex; - flex-direction: column; - text-align: center; - font-size: 35px; - font-weight: bold; - font-family: Avenir Next,sans-serif; -` + height: 50px; + display: flex; + flex-direction: column; + text-align: center; + font-size: 35px; + font-weight: bold; + font-family: Avenir Next, sans-serif; +`; export const More = styled.div` - height: 50px; - display: flex; - flex-direction: column; - text-align: center; - font-size: 35px; - font-weight: bold; - background: #dadada; - border-radius: 0 0 15px 15px; - margin: 4px; - justify-content: center; - font-family: Avenir Next,sans-serif; -` \ No newline at end of file + height: 50px; + display: flex; + flex-direction: column; + text-align: center; + font-size: 35px; + font-weight: bold; + background: #dadada; + border-radius: 0 0 15px 15px; + margin: 4px; + justify-content: center; + font-family: Avenir Next, sans-serif; +`; diff --git a/src/components/MoversListRow/index.jsx b/src/components/MoversListRow/index.jsx index d232156..ee7e463 100644 --- a/src/components/MoversListRow/index.jsx +++ b/src/components/MoversListRow/index.jsx @@ -1,34 +1,36 @@ -import React from 'react' +import React from 'react'; import { - Wrapper, - Name, - Code, - Percentage, - IndicatorWrapper, - IndicatorUp, - IndicatorDown, - PercentageChanged, - PercentageCurrent -} from './style' + Wrapper, + Name, + Code, + Percentage, + IndicatorWrapper, + IndicatorUp, + IndicatorDown, + PercentageChanged, + PercentageCurrent, +} from './style'; /** * Renders a given row in the alert & anomalies widget. */ const MoversListRow = props => ( - -
{props.code}
 - {props.name} - - {props.current}% - - {props.change}% - - - - {props.change > 0 ? : } - - -) + + +
{props.code}
+ + {props.name} + + {props.current}% + + {props.change}% + + + + {props.change > 0 ? : } + + +); -export default MoversListRow +export default MoversListRow; diff --git a/src/components/MoversListRow/style.js b/src/components/MoversListRow/style.js index b02f524..6afaa65 100644 --- a/src/components/MoversListRow/style.js +++ b/src/components/MoversListRow/style.js @@ -5,8 +5,8 @@ export const Wrapper = styled.div` grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(2, 1fr); grid-template-areas: - "code name name name percentage percentage indicator" - "code name name name percentage percentage indicator"; + 'code name name name percentage percentage indicator' + 'code name name name percentage percentage indicator'; margin: 2px; margin-left: 7px; margin-right: 7px; @@ -22,7 +22,7 @@ export const Name = styled.div` flex-direction: column; justify-content: center; vertical-align: middle; -` +`; export const Code = styled.div` grid-area: code; @@ -31,56 +31,54 @@ export const Code = styled.div` justify-content: center; vertical-align: middle; .code { - background-color: gray; - width: 60px; - height: 45px; - display: flex; - flex-direction: column; - justify-content: center; - vertical-align: middle; - text-align: center; - margin-left: 5px; - } -` + background-color: gray; + width: 60px; + height: 45px; + display: flex; + flex-direction: column; + justify-content: center; + vertical-align: middle; + text-align: center; + margin-left: 5px; + } +`; export const Percentage = styled.div` grid-area: percentage; display: grid; grid-template-rows: repeat(2, 1fr); grid-gap: 1px; grid-template-areas: - "current" - "changed"; -` + 'current' + 'changed'; +`; export const PercentageCurrent = styled.div` grid-area: current; font-size: 22px; font-weight: bold; - font-family: Avenir Next,sans-serif; - -` + font-family: Avenir Next, sans-serif; +`; export const PercentageChanged = styled.div` grid-area: changed; margin-left: 17px; font-weight: bold; - font-family: Avenir Next,sans-serif; - color: ${props => props.value > 0 ? `red`: `green`}; + font-family: Avenir Next, sans-serif; + color: ${props => (props.value > 0 ? `red` : `green`)}; padding-bottom: 10px; -` +`; export const IndicatorUp = styled.div` - width: 0; + width: 0; height: 0; border-left: 30px solid transparent; border-right: 30px solid transparent; border-bottom: 30px solid red; - ` +`; export const IndicatorDown = styled.div` - - width: 0; - height: 0; + width: 0; + height: 0; border-left: 30px solid transparent; border-right: 30px solid transparent; border-top: 30px solid green; -` +`; export const IndicatorWrapper = styled.div` grid-area: indicator; @@ -90,5 +88,4 @@ export const IndicatorWrapper = styled.div` vertical-align: middle; justify-content: center; margin-right: 10px; - -` +`; diff --git a/src/components/ProfileAlerts/index.jsx b/src/components/ProfileAlerts/index.jsx index b88dace..53634b2 100644 --- a/src/components/ProfileAlerts/index.jsx +++ b/src/components/ProfileAlerts/index.jsx @@ -1,5 +1,5 @@ -import React from 'react' -import { Wrapper } from './style' +import React from 'react'; +import {Wrapper} from './style'; /** * Top Navbar responsible for rendering the basic site-map layout including: blog | about | disclaimer etc @@ -9,18 +9,14 @@ import { Wrapper } from './style' * */ class SearchBar extends React.Component { - constructor (props) { - super(props) - this.state = {} - } + constructor(props) { + super(props); + this.state = {}; + } - render () { - return ( - - alerts go here - - ) - } + render() { + return alerts go here; + } } -export default SearchBar +export default SearchBar; diff --git a/src/components/ProfileAlerts/style.js b/src/components/ProfileAlerts/style.js index b9e26ef..2e5f2a1 100644 --- a/src/components/ProfileAlerts/style.js +++ b/src/components/ProfileAlerts/style.js @@ -12,4 +12,4 @@ export const Wrapper = styled.div` background: gray; width: 100%; height: 300px; -` \ No newline at end of file +`; diff --git a/src/components/ProfileChart/index.jsx b/src/components/ProfileChart/index.jsx index 83460a2..e1a6bb4 100644 --- a/src/components/ProfileChart/index.jsx +++ b/src/components/ProfileChart/index.jsx @@ -1,5 +1,5 @@ -import React from 'react' -import { Wrapper } from './style' +import React from 'react'; +import {Wrapper} from './style'; /** * Top Navbar responsible for rendering the basic site-map layout including: blog | about | disclaimer etc @@ -9,18 +9,14 @@ import { Wrapper } from './style' * */ class SearchBar extends React.Component { - constructor (props) { - super(props) - this.state = {} - } + constructor(props) { + super(props); + this.state = {}; + } - render () { - return ( - - chart goes here - - ) - } + render() { + return chart goes here; + } } -export default SearchBar +export default SearchBar; diff --git a/src/components/ProfileChart/style.js b/src/components/ProfileChart/style.js index 73534f6..4f11886 100644 --- a/src/components/ProfileChart/style.js +++ b/src/components/ProfileChart/style.js @@ -11,4 +11,4 @@ export const Wrapper = styled.div` margin-left: auto; background: gray; width: 800px; -` \ No newline at end of file +`; diff --git a/src/components/ProfileHeader/index.jsx b/src/components/ProfileHeader/index.jsx index 552f2e8..96a42c5 100644 --- a/src/components/ProfileHeader/index.jsx +++ b/src/components/ProfileHeader/index.jsx @@ -1,5 +1,5 @@ -import React from 'react' -import { Wrapper } from './style' +import React from 'react'; +import {Wrapper} from './style'; /** * Top Navbar responsible for rendering the basic site-map layout including: blog | about | disclaimer etc @@ -9,18 +9,14 @@ import { Wrapper } from './style' * */ class SearchBar extends React.Component { - constructor (props) { - super(props) - this.state = {} - } + constructor(props) { + super(props); + this.state = {}; + } - render () { - return ( - - {this.props.metadata.code} - - ) - } + render() { + return {this.props.metadata.code}; + } } -export default SearchBar +export default SearchBar; diff --git a/src/components/ProfileHeader/style.js b/src/components/ProfileHeader/style.js index 2932cd9..3159dc8 100644 --- a/src/components/ProfileHeader/style.js +++ b/src/components/ProfileHeader/style.js @@ -11,4 +11,4 @@ export const Wrapper = styled.div` margin-left: auto; background: gray; width: 100%; -` \ No newline at end of file +`; diff --git a/src/components/ProfileSidePanel/index.jsx b/src/components/ProfileSidePanel/index.jsx index 033330b..b6a3c76 100644 --- a/src/components/ProfileSidePanel/index.jsx +++ b/src/components/ProfileSidePanel/index.jsx @@ -1,5 +1,5 @@ -import React from 'react' -import { Wrapper } from './style' +import React from 'react'; +import {Wrapper} from './style'; /** * Top Navbar responsible for rendering the basic site-map layout including: blog | about | disclaimer etc @@ -9,18 +9,14 @@ import { Wrapper } from './style' * */ class SearchBar extends React.Component { - constructor (props) { - super(props) - this.state = {} - } + constructor(props) { + super(props); + this.state = {}; + } - render () { - return ( - - profile side panel - - ) - } + render() { + return profile side panel; + } } -export default SearchBar +export default SearchBar; diff --git a/src/components/ProfileSidePanel/style.js b/src/components/ProfileSidePanel/style.js index 44e39ba..49eef09 100644 --- a/src/components/ProfileSidePanel/style.js +++ b/src/components/ProfileSidePanel/style.js @@ -12,4 +12,4 @@ export const Wrapper = styled.div` margin-left: auto; background: gray; width: 100%; -` \ No newline at end of file +`; diff --git a/src/components/SearchBar/index.jsx b/src/components/SearchBar/index.jsx index b2258b5..9c83ab5 100644 --- a/src/components/SearchBar/index.jsx +++ b/src/components/SearchBar/index.jsx @@ -1,5 +1,5 @@ -import React from 'react' -import { Wrapper } from './style' +import React from 'react'; +import {Wrapper} from './style'; /** * Top Navbar responsible for rendering the basic site-map layout including: blog | about | disclaimer etc @@ -9,18 +9,14 @@ import { Wrapper } from './style' * */ class SearchBar extends React.Component { - constructor (props) { - super(props) - this.state = {} - } + constructor(props) { + super(props); + this.state = {}; + } - render () { - return ( - - search bar goes here - - ) - } + render() { + return search bar goes here; + } } -export default SearchBar +export default SearchBar; diff --git a/src/components/SearchBar/style.js b/src/components/SearchBar/style.js index 0a420c1..a69c4b2 100644 --- a/src/components/SearchBar/style.js +++ b/src/components/SearchBar/style.js @@ -4,9 +4,9 @@ export const Wrapper = styled.div` grid-area: navbar; justify-content: center; text-align: center; - verticle-align: middle; + vertical-align: middle; display: flex; flex-direction: row; float: right; margin-left: auto; -` \ No newline at end of file +`; diff --git a/src/components/ThemePicker/index.jsx b/src/components/ThemePicker/index.jsx index 2f403ba..35ea23c 100644 --- a/src/components/ThemePicker/index.jsx +++ b/src/components/ThemePicker/index.jsx @@ -1,27 +1,27 @@ -import React from 'react' +import React from 'react'; -import { Wrapper, Header, ThemeItemWrapper, ThemeItems } from './style' +import {Wrapper, Header, ThemeItemWrapper, ThemeItems} from './style'; const ThemeItem = props => ( - {props.name} -) + {props.name} +); /** * Renders ThemePicker widget, allowing users to select between different theme modes */ const ThemePicker = props => ( - -
Theme
- - {props.themes.map(theme => ( - props.onThemeSelect(theme.name)} - selected={props.selectedTheme === theme.name} - {...theme} - key={theme.name} - /> - ))} - - -) + +
Theme
+ + {props.themes.map(theme => ( + props.onThemeSelect(theme.name)} + selected={props.selectedTheme === theme.name} + {...theme} + key={theme.name} + /> + ))} + + +); -export default ThemePicker +export default ThemePicker; diff --git a/src/components/ThemePicker/style.js b/src/components/ThemePicker/style.js index 3bdff3a..8fd1490 100644 --- a/src/components/ThemePicker/style.js +++ b/src/components/ThemePicker/style.js @@ -1,4 +1,4 @@ -import styled from 'styled-components' +import styled from 'styled-components'; export const Wrapper = styled.div` background: white; @@ -10,34 +10,37 @@ export const Wrapper = styled.div` justify-content: center; text-align: center; grid-area: themepicker; -` +`; export const Header = styled.div` font-weight: bold; font-size: 20px; - font-family: Avenir Next,sans-serif; -` + font-family: Avenir Next, sans-serif; +`; export const ThemeItemWrapper = styled.div` font-weight: bold; font-size: 25px; - font-family: Avenir Next,sans-serif; + font-family: Avenir Next, sans-serif; background-color: ${props => props.backgroundColor}; color: ${props => props.textColor}; margin: 7px; margin-bottom: ${props => (props.selected ? 10 : 7)}px; - -webkit-box-shadow: ${props => (props.selected ? `-3px 4px 7px 0px rgba(0,0,0,0.75)` : `none`)}; - -moz-box-shadow: ${props => (props.selected ? `-3px 4px 7px 0px rgba(0,0,0,0.75)` : `none`)}; - box-shadow: ${props => (props.selected ? `-3px 4px 7px 0px rgba(0,0,0,0.75)` : `none`)}; + -webkit-box-shadow: ${props => + props.selected ? `-3px 4px 7px 0px rgba(0,0,0,0.75)` : `none`}; + -moz-box-shadow: ${props => + props.selected ? `-3px 4px 7px 0px rgba(0,0,0,0.75)` : `none`}; + box-shadow: ${props => + props.selected ? `-3px 4px 7px 0px rgba(0,0,0,0.75)` : `none`}; border-radius: 20px; border: solid 1px black; width: 100px; display: flex; flex-direction: row; - justify-content:center; + justify-content: center; text-align: center; -` +`; export const ThemeItems = styled.div` display: flex; flex-direction: row; - justify-content:center; + justify-content: center; text-align: center; -` +`; diff --git a/src/components/TopChartVictory/style.js b/src/components/TopChartVictory/style.js index 48f71ae..09dc37e 100644 --- a/src/components/TopChartVictory/style.js +++ b/src/components/TopChartVictory/style.js @@ -1,9 +1,9 @@ import styled from 'styled-components'; export const duration = 500; export const transitionStyles = { - entering: { opacity: 0, Ypos: 500}, - entered: { opacity: 1, Ypos: 0}, - exited: { opacity: 0} + entering: {opacity: 0, Ypos: 500}, + entered: {opacity: 1, Ypos: 0}, + exited: {opacity: 0}, }; export const Wrapper = styled.div` @@ -12,8 +12,8 @@ export const Wrapper = styled.div` grid-template-rows: 60px 850px; grid-template-columns: repeat(3, 1fr); grid-template-areas: - "none picker options" - "chart chart chart"; + 'none picker options' + 'chart chart chart'; opacity: ${props => props.opacity}; transition: ${props => `${props.duration}ms ease-in-out`}; transition-property: opacity, transform; @@ -22,54 +22,52 @@ export const Wrapper = styled.div` background-color: white; border-radius: 15px; border: 1px solid #eee; -` +`; export const ChartWrapper = styled.div` - grid-area: chart; -` + grid-area: chart; +`; export const PickerWrapper = styled.div` - grid-area: picker; - display: flex; - vertical-align: middle; - justify-content: center; -` + grid-area: picker; + display: flex; + vertical-align: middle; + justify-content: center; +`; export const OptionsWrapper = styled.div` - grid-area: options; - display: flex; - justify-content: flex-end; -` + grid-area: options; + display: flex; + justify-content: flex-end; +`; export const intervals = { - d: 2, - w: 7, - m: 40, - y: 100 - - -} + d: 2, + w: 7, + m: 40, + y: 100, +}; export const colors700 = [ - "#D32F2F", - "#303F9F", - "#00796B", - "#388E3C", - "#388E3C", - "#F57C00", - "#455A64", - "#5D4037", - "#C2185B", - "#7B1FA2", - "#00796B", - "#7B1FA2", - "#C2185B" -] + '#D32F2F', + '#303F9F', + '#00796B', + '#388E3C', + '#388E3C', + '#F57C00', + '#455A64', + '#5D4037', + '#C2185B', + '#7B1FA2', + '#00796B', + '#7B1FA2', + '#C2185B', +]; export const colors300 = [ - "#E57373", - "#F06292", - "#7986CB", - "#9575CD", - "#7986CB", - "#64B5F6", - "#F06292", - "#E57373", - "#FFB74D", - "#BCAAA4", - "#FFF176" -] \ No newline at end of file + '#E57373', + '#F06292', + '#7986CB', + '#9575CD', + '#7986CB', + '#64B5F6', + '#F06292', + '#E57373', + '#FFB74D', + '#BCAAA4', + '#FFF176', +]; diff --git a/src/components/TopShortsList/index.jsx b/src/components/TopShortsList/index.jsx index 91279f6..9ffbc00 100644 --- a/src/components/TopShortsList/index.jsx +++ b/src/components/TopShortsList/index.jsx @@ -10,55 +10,55 @@ import {Wrapper, Header, More, duration, transitionStyles} from './style'; * * load profile on select of a specific stock in list */ class TopShortsList extends React.Component { - constructor(props) { - super(props); - this.state = { - inside: false, - hovered: false, - }; - } - componentDidMount() { - this.toggleEnterState(); - } + constructor(props) { + super(props); + this.state = { + inside: false, + hovered: false, + }; + } + componentDidMount() { + this.toggleEnterState(); + } - toggleEnterState() { - this.setState({inside: true}); - } - handleHover(value) { - this.setState({hovered: value}); - } - handleMouseLeave() { - this.setState({ - hovered: false, - }); - } + toggleEnterState() { + this.setState({inside: true}); + } + handleHover(value) { + this.setState({hovered: value}); + } + handleMouseLeave() { + this.setState({ + hovered: false, + }); + } - render() { - const rows = this.props.data.map(row_data => ( - this.handleHover(row_data.code)} - key={row_data.code} - {...row_data} - /> - )); - return ( - - {state => { - return ( - this.handleMouseLeave()} - duration={duration} - {...transitionStyles[state]}> -
Top Short List
- {rows} - show more - - ); - }} - - ); - } + render() { + const rows = this.props.data.map(row_data => ( + this.handleHover(row_data.code)} + key={row_data.code} + {...row_data} + /> + )); + return ( + + {state => { + return ( + this.handleMouseLeave()} + duration={duration} + {...transitionStyles[state]}> +
Top Short List
+ {rows} + show more + + ); + }} + + ); + } } export default TopShortsList; diff --git a/src/components/TopShortsList/style.js b/src/components/TopShortsList/style.js index 677bc7c..a750bed 100644 --- a/src/components/TopShortsList/style.js +++ b/src/components/TopShortsList/style.js @@ -2,43 +2,43 @@ import styled from 'styled-components'; export const duration = 500; export const transitionStyles = { - entering: { opacity: 0, Ypos: 500}, - entered: { opacity: 1, Ypos: 0}, - exited: { opacity: 0} - }; + entering: {opacity: 0, Ypos: 500}, + entered: {opacity: 1, Ypos: 0}, + exited: {opacity: 0}, +}; export const Wrapper = styled.div` - height: 100%; - grid-area: top-list; - background: white; - display: flex; - flex-direction: column; - border-radius: 15px; - border: 1px solid #eee; - opacity: ${props => props.opacity}; - transition: ${props => `${props.duration}ms ease-in-out`}; - transition-property: opacity, transform; - transform: ${props => `translateY(${props.Ypos}px)`}; -` + height: 100%; + grid-area: top-list; + background: white; + display: flex; + flex-direction: column; + border-radius: 15px; + border: 1px solid #eee; + opacity: ${props => props.opacity}; + transition: ${props => `${props.duration}ms ease-in-out`}; + transition-property: opacity, transform; + transform: ${props => `translateY(${props.Ypos}px)`}; +`; export const Header = styled.div` - height: 50px; - display: flex; - flex-direction: column; - text-align: center; - font-size: 35px; - font-weight: bold; - font-family: Avenir Next,sans-serif; -` + height: 50px; + display: flex; + flex-direction: column; + text-align: center; + font-size: 35px; + font-weight: bold; + font-family: Avenir Next, sans-serif; +`; export const More = styled.div` - height: 50px; - display: flex; - flex-direction: column; - text-align: center; - font-size: 35px; - font-weight: bold; - background: #dadada; - border-radius: 0 0 15px 15px; - margin: 4px; - justify-content: center; - font-family: Avenir Next,sans-serif; -` \ No newline at end of file + height: 50px; + display: flex; + flex-direction: column; + text-align: center; + font-size: 35px; + font-weight: bold; + background: #dadada; + border-radius: 0 0 15px 15px; + margin: 4px; + justify-content: center; + font-family: Avenir Next, sans-serif; +`; diff --git a/src/components/TopShortsListRow/index.jsx b/src/components/TopShortsListRow/index.jsx index a1ee528..d991c39 100644 --- a/src/components/TopShortsListRow/index.jsx +++ b/src/components/TopShortsListRow/index.jsx @@ -1,6 +1,6 @@ -import React from 'react' +import React from 'react'; -import { Wrapper, WrapperHovered, Code, Name, Percent } from './style' +import {Wrapper, WrapperHovered, Code, Name, Percent} from './style'; /** * Renders a specfiic row that is contained within the TopSHortList view. This will show @@ -14,21 +14,30 @@ import { Wrapper, WrapperHovered, Code, Name, Percent } from './style' */ const TopShortListRow = props => { - return props.isHovered - ? -
{props.code}
 - {props.name} -
{props.current}%
 - - : -
{props.code}
 - {props.name} -
{props.current}%
 - -} + return props.isHovered ? ( + + +
{props.code}
+ + {props.name} + +
{props.current}%
+ + + ) : ( + + +
{props.code}
+ + {props.name} + +
{props.current}%
+ + + ); +}; -export default TopShortListRow +export default TopShortListRow; diff --git a/src/components/TopShortsListRow/style.js b/src/components/TopShortsListRow/style.js index 0812fa3..cb818ef 100644 --- a/src/components/TopShortsListRow/style.js +++ b/src/components/TopShortsListRow/style.js @@ -5,8 +5,7 @@ export const Wrapper = styled.a` color: black; text-decoration: none !important; grid-template-columns: repeat(5, 1fr); - grid-template-areas: - "code name name name percentage"; + grid-template-areas: 'code name name name percentage'; margin: 4px; margin-left: 7px; margin-right: 4px; @@ -16,20 +15,21 @@ export const Wrapper = styled.a` padding-top: 4px; padding-bottom: 4px; margin-bottom: 4px; - &:hover, &:visited, &:link, &:active { - text-decoration: none!important; + &:hover, + &:visited, + &:link, + &:active { + text-decoration: none !important; color: black; } -` +`; export const WrapperHovered = styled.a` - display: grid; color: black; text-decoration: none !important; z-index: 10; grid-template-columns: repeat(5, 1fr); - grid-template-areas: - "code name name name percentage"; + grid-template-areas: 'code name name name percentage'; margin: 4px; margin-left: 7px; margin-right: 4px; @@ -39,14 +39,17 @@ export const WrapperHovered = styled.a` padding-top: 4px; padding-bottom: 4px; margin-bottom: 6px; - -webkit-box-shadow: -3px 4px 7px 0px rgba(0,0,0,0.75); - -moz-box-shadow: -3px 4px 7px 0px rgba(0,0,0,0.75); - box-shadow: -3px 4px 7px 0px rgba(0,0,0,0.75); - &:hover, &:visited, &:link, &:active { - text-decoration: none!important; + -webkit-box-shadow: -3px 4px 7px 0px rgba(0, 0, 0, 0.75); + -moz-box-shadow: -3px 4px 7px 0px rgba(0, 0, 0, 0.75); + box-shadow: -3px 4px 7px 0px rgba(0, 0, 0, 0.75); + &:hover, + &:visited, + &:link, + &:active { + text-decoration: none !important; color: black; } -` +`; export const Name = styled.div` grid-area: name; @@ -55,15 +58,15 @@ export const Name = styled.div` justify-content: center; vertical-align: middle; font-size: 18px; -` +`; export const Code = styled.div` -grid-area: code; -display: flex; -flex-direction: column; -justify-content: center; -vertical-align: middle; -.code { + grid-area: code; + display: flex; + flex-direction: column; + justify-content: center; + vertical-align: middle; + .code { background-color: gray; width: 60px; height: 45px; @@ -76,29 +79,29 @@ vertical-align: middle; font-size: 21px; font-weight: bold; } -` +`; export const Percent = styled.div` -grid-area: percentage; -float: right; -margin-left: auto; -padding-right: 5px; -display: flex; -flex-direction: column; -justify-content: center; -vertical-align: middle; - -.circle { - background: #f98080; - height: 51px; - width: 51px; - border-radius: 50px; + grid-area: percentage; + float: right; + margin-left: auto; + padding-right: 5px; display: flex; flex-direction: column; justify-content: center; vertical-align: middle; - text-align: center; - font-size: 12px; - font-weight: 400; -} -` \ No newline at end of file + + .circle { + background: #f98080; + height: 51px; + width: 51px; + border-radius: 50px; + display: flex; + flex-direction: column; + justify-content: center; + vertical-align: middle; + text-align: center; + font-size: 12px; + font-weight: 400; + } +`; diff --git a/src/components/WindowPicker/index.jsx b/src/components/WindowPicker/index.jsx index c330a87..3234a58 100644 --- a/src/components/WindowPicker/index.jsx +++ b/src/components/WindowPicker/index.jsx @@ -11,22 +11,22 @@ import Button from '../Button'; */ class WindowPicker extends React.Component { - render() { - const {options, selectedOption, onSelect} = this.props; - const buttons = options.values.map(value => ( -