From c0723665af315b3068a55db4b101e29991713b8e Mon Sep 17 00:00:00 2001 From: Loewy Date: Tue, 9 Jan 2024 15:25:36 -0800 Subject: [PATCH 1/2] add custom-grid and mock code, add direnv to gitignore --- .gitignore | 3 + App.tsx | 18 ++++++ component/custom-grid.tsx | 40 ++++++++++++ package.json | 2 + styles.ts | 10 +++ yarn.lock | 133 +++++++++++++++++++++++++++++++++++++- 6 files changed, 205 insertions(+), 1 deletion(-) create mode 100644 component/custom-grid.tsx create mode 100644 styles.ts diff --git a/.gitignore b/.gitignore index 05647d5..4e7793b 100644 --- a/.gitignore +++ b/.gitignore @@ -33,3 +33,6 @@ yarn-error.* # typescript *.tsbuildinfo + +#direnv +.direnv diff --git a/App.tsx b/App.tsx index 6a47ac6..efda426 100644 --- a/App.tsx +++ b/App.tsx @@ -2,12 +2,30 @@ import React from "react"; import { Text } from "react-native"; import ClientProvider from "./graphql/client"; import ShotsContainer from "./component/shot"; +import { CustomGrid } from "./component/custom-grid"; + +import * as scale from 'd3-scale'; + +// TODO: restructure into object +const graphHeight = 300; +const innerGraphRowContainerPadding = 10; +const xAxisMarginTop = -15; +const topInset = 30; +const adjustedGraphHeight = graphHeight - innerGraphRowContainerPadding - xAxisMarginTop - topInset; + +// Usable for mock testing +const domain = [0, 140]; +const range = [adjustedGraphHeight, 30]; + +export const defaultTicks = [0, 20, 40, 60, 80, 100, 120, 140]; +export const defaultScaleLinear = scale.scaleLinear().domain(domain).range(range); const App: React.FC = () => { return ( test + ); }; diff --git a/component/custom-grid.tsx b/component/custom-grid.tsx new file mode 100644 index 0000000..45595f0 --- /dev/null +++ b/component/custom-grid.tsx @@ -0,0 +1,40 @@ +import React from 'react'; +import { G, Line } from 'react-native-svg'; +import * as scale from 'd3-scale' +import { colors } from '../styles'; + +type scaleFunction = (value: number) => number; + +interface CustomGridProps { + y: scaleFunction; + ticks: number[]; +} + +export const CustomGrid: React.FC = ({ y, ticks }: Partial) => { + const [firstTick, ...remainingTicks] = ticks; + const dashArray = [1, 3]; + const strokeSolidWidth = 0.2; + const strokeSolidColor = colors.bgBlack; + const strokeDashWidth = 1; + const strokeDashColor = colors.lightGrey; + + const renderLine = (tick: number, stroke: string, strokeWidth: number, dashArray?: number[]) => ( + + ); + + return ( + + {renderLine(firstTick, strokeSolidColor, strokeSolidWidth)} + {remainingTicks.map((tick) => renderLine(tick, strokeDashColor, strokeDashWidth, dashArray))} + + ); +}; diff --git a/package.json b/package.json index ab292fe..02b63a4 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "@typescript-eslint/eslint-plugin": "^6.17.0", "@typescript-eslint/parser": "^6.17.0", "babel-plugin-inline-dotenv": "^1.7.0", + "d3-scale": "1.0.6", "eslint": "^8.56.0", "eslint-plugin-react": "^7.33.2", "eslint-plugin-react-hooks": "^4.6.0", @@ -35,6 +36,7 @@ "react": "18.2.0", "react-native": "0.72.6", "react-native-dotenv": "^3.4.9", + "react-native-svg": "^14.1.0", "typescript": "^5.3.3" }, "devDependencies": { diff --git a/styles.ts b/styles.ts new file mode 100644 index 0000000..29607da --- /dev/null +++ b/styles.ts @@ -0,0 +1,10 @@ +export const colors = { + bgBlack: '#121212', + lightGrey: '#BFC2C8', + themeBrown: '#D9AA84', + panelWhite: '#F2FBFE', + tournamentBlue: '#50a6c2', + blueCloth: '#539dc2', + buttonBlue: '#1987ff', + textWhite: '#ffffff' +}; \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index e360d9a..54d9078 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3093,6 +3093,11 @@ body-parser@^1.20.1: type-is "~1.6.18" unpipe "1.0.0" +boolbase@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e" + integrity sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww== + bplist-creator@0.1.0: version "0.1.0" resolved "https://registry.yarnpkg.com/bplist-creator/-/bplist-creator-0.1.0.tgz#018a2d1b587f769e379ef5519103730f8963ba1e" @@ -3605,6 +3610,30 @@ crypto-random-string@^2.0.0: resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-2.0.0.tgz#ef2a7a966ec11083388369baa02ebead229b30d5" integrity sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA== +css-select@^5.1.0: + version "5.1.0" + resolved "https://registry.yarnpkg.com/css-select/-/css-select-5.1.0.tgz#b8ebd6554c3637ccc76688804ad3f6a6fdaea8a6" + integrity sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg== + dependencies: + boolbase "^1.0.0" + css-what "^6.1.0" + domhandler "^5.0.2" + domutils "^3.0.1" + nth-check "^2.0.1" + +css-tree@^1.1.3: + version "1.1.3" + resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.1.3.tgz#eb4870fb6fd7707327ec95c2ff2ab09b5e8db91d" + integrity sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q== + dependencies: + mdn-data "2.0.14" + source-map "^0.6.1" + +css-what@^6.1.0: + version "6.1.0" + resolved "https://registry.yarnpkg.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4" + integrity sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw== + cssom@^0.5.0: version "0.5.0" resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.5.0.tgz#d254fa92cd8b6fbd83811b9fbaed34663cc17c36" @@ -3627,6 +3656,58 @@ csstype@^3.0.2: resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81" integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw== +d3-array@^1.2.0: + version "1.2.4" + resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-1.2.4.tgz#635ce4d5eea759f6f605863dbcfc30edc737f71f" + integrity sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw== + +d3-collection@1: + version "1.0.7" + resolved "https://registry.yarnpkg.com/d3-collection/-/d3-collection-1.0.7.tgz#349bd2aa9977db071091c13144d5e4f16b5b310e" + integrity sha512-ii0/r5f4sjKNTfh84Di+DpztYwqKhEyUlKoPrzUFfeSkWxjW49xU2QzO9qrPrNkpdI0XJkfzvmTu8V2Zylln6A== + +d3-color@1: + version "1.4.1" + resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-1.4.1.tgz#c52002bf8846ada4424d55d97982fef26eb3bc8a" + integrity sha512-p2sTHSLCJI2QKunbGb7ocOh7DgTAn8IrLx21QRc/BSnodXM4sv6aLQlnfpvehFMLZEfBc6g9pH9SWQccFYfJ9Q== + +d3-format@1: + version "1.4.5" + resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-1.4.5.tgz#374f2ba1320e3717eb74a9356c67daee17a7edb4" + integrity sha512-J0piedu6Z8iB6TbIGfZgDzfXxUFN3qQRMofy2oPdXzQibYGqPB/9iMcxr/TGalU+2RsyDO+U4f33id8tbnSRMQ== + +d3-interpolate@1: + version "1.4.0" + resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-1.4.0.tgz#526e79e2d80daa383f9e0c1c1c7dcc0f0583e987" + integrity sha512-V9znK0zc3jOPV4VD2zZn0sDhZU3WAE2bmlxdIwwQPPzPjvyLkd8B3JUVdS1IDUFDkWZ72c9qnv1GK2ZagTZ8EA== + dependencies: + d3-color "1" + +d3-scale@1.0.6: + version "1.0.6" + resolved "https://registry.yarnpkg.com/d3-scale/-/d3-scale-1.0.6.tgz#bce19da80d3a0cf422c9543ae3322086220b34ed" + integrity sha512-0vI2BkXJGLvMsLYfr49yZiegLe4MhsqOLRoDzV03Pc/Y5EkutKWmMg6abyG3PpSXCL5OzUJo3+KforHKEiOzyw== + dependencies: + d3-array "^1.2.0" + d3-collection "1" + d3-color "1" + d3-format "1" + d3-interpolate "1" + d3-time "1" + d3-time-format "2" + +d3-time-format@2: + version "2.3.0" + resolved "https://registry.yarnpkg.com/d3-time-format/-/d3-time-format-2.3.0.tgz#107bdc028667788a8924ba040faf1fbccd5a7850" + integrity sha512-guv6b2H37s2Uq/GefleCDtbe0XZAuy7Wa49VGkPVPMfLL9qObgBST3lEHJBMUp8S7NdLQAGIvr2KXk8Hc98iKQ== + dependencies: + d3-time "1" + +d3-time@1: + version "1.1.0" + resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-1.1.0.tgz#b1e19d307dae9c900b7e5b25ffc5dcc249a8a0f1" + integrity sha512-Xh0isrZ5rPYYdqhAVk8VLnMEidhz5aP7htAADH6MfzgmmicPkTo8LhkLxci61/lCB7n7UmE3bN0leRt+qvkLxA== + dag-map@~1.0.0: version "1.0.2" resolved "https://registry.yarnpkg.com/dag-map/-/dag-map-1.0.2.tgz#e8379f041000ed561fc515475c1ed2c85eece8d7" @@ -3814,6 +3895,20 @@ doctrine@^3.0.0: dependencies: esutils "^2.0.2" +dom-serializer@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-2.0.0.tgz#e41b802e1eedf9f6cae183ce5e622d789d7d8e53" + integrity sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg== + dependencies: + domelementtype "^2.3.0" + domhandler "^5.0.2" + entities "^4.2.0" + +domelementtype@^2.3.0: + version "2.3.0" + resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.3.0.tgz#5c45e8e869952626331d7aab326d01daf65d589d" + integrity sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw== + domexception@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/domexception/-/domexception-4.0.0.tgz#4ad1be56ccadc86fc76d033353999a8037d03673" @@ -3821,6 +3916,22 @@ domexception@^4.0.0: dependencies: webidl-conversions "^7.0.0" +domhandler@^5.0.2, domhandler@^5.0.3: + version "5.0.3" + resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-5.0.3.tgz#cc385f7f751f1d1fc650c21374804254538c7d31" + integrity sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w== + dependencies: + domelementtype "^2.3.0" + +domutils@^3.0.1: + version "3.1.0" + resolved "https://registry.yarnpkg.com/domutils/-/domutils-3.1.0.tgz#c47f551278d3dc4b0b1ab8cbb42d751a6f0d824e" + integrity sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA== + dependencies: + dom-serializer "^2.0.0" + domelementtype "^2.3.0" + domhandler "^5.0.3" + dotenv-expand@~10.0.0: version "10.0.0" resolved "https://registry.yarnpkg.com/dotenv-expand/-/dotenv-expand-10.0.0.tgz#12605d00fb0af6d0a592e6558585784032e4ef37" @@ -3878,7 +3989,7 @@ end-of-stream@^1.1.0: dependencies: once "^1.4.0" -entities@^4.4.0: +entities@^4.2.0, entities@^4.4.0: version "4.5.0" resolved "https://registry.yarnpkg.com/entities/-/entities-4.5.0.tgz#5d268ea5e7113ec74c4d033b79ea5a35a488fb48" integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw== @@ -6302,6 +6413,11 @@ md5hex@^1.0.0: resolved "https://registry.yarnpkg.com/md5hex/-/md5hex-1.0.0.tgz#ed74b477a2ee9369f75efee2f08d5915e52a42e8" integrity sha512-c2YOUbp33+6thdCUi34xIyOU/a7bvGKj/3DB1iaPMTuPHf/Q2d5s4sn1FaCOO43XkXggnb08y5W2PU8UNYNLKQ== +mdn-data@2.0.14: + version "2.0.14" + resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50" + integrity sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow== + media-typer@0.3.0: version "0.3.0" resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748" @@ -6870,6 +6986,13 @@ npm-run-path@^4.0.1: dependencies: path-key "^3.0.0" +nth-check@^2.0.1: + version "2.1.1" + resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-2.1.1.tgz#c9eab428effce36cd6b92c924bdb000ef1f1ed1d" + integrity sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w== + dependencies: + boolbase "^1.0.0" + nullthrows@^1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/nullthrows/-/nullthrows-1.1.1.tgz#7818258843856ae971eae4208ad7d7eb19a431b1" @@ -7466,6 +7589,14 @@ react-native-dotenv@^3.4.9: dependencies: dotenv "^16.3.1" +react-native-svg@^14.1.0: + version "14.1.0" + resolved "https://registry.yarnpkg.com/react-native-svg/-/react-native-svg-14.1.0.tgz#7903bddd3c71bf3a8a503918253c839e6edaa724" + integrity sha512-HeseElmEk+AXGwFZl3h56s0LtYD9HyGdrpg8yd9QM26X+d7kjETrRQ9vCjtxuT5dCZEIQ5uggU1dQhzasnsCWA== + dependencies: + css-select "^5.1.0" + css-tree "^1.1.3" + react-native@0.72.6: version "0.72.6" resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.72.6.tgz#9f8d090694907e2f83af22e115cc0e4a3d5fa626" From 29032076704a7e187c7c5ddd71a037fb62af6f12 Mon Sep 17 00:00:00 2001 From: Loewy Date: Tue, 9 Jan 2024 15:42:38 -0800 Subject: [PATCH 2/2] remove custom grid --- .env | 2 ++ App.tsx | 18 ------------------ component/custom-grid.tsx | 8 ++++---- 3 files changed, 6 insertions(+), 22 deletions(-) create mode 100644 .env diff --git a/.env b/.env new file mode 100644 index 0000000..7e0a5f8 --- /dev/null +++ b/.env @@ -0,0 +1,2 @@ +# .env.development +API_URI=https://api-dev.railbird.ai/graphql diff --git a/App.tsx b/App.tsx index efda426..6a47ac6 100644 --- a/App.tsx +++ b/App.tsx @@ -2,30 +2,12 @@ import React from "react"; import { Text } from "react-native"; import ClientProvider from "./graphql/client"; import ShotsContainer from "./component/shot"; -import { CustomGrid } from "./component/custom-grid"; - -import * as scale from 'd3-scale'; - -// TODO: restructure into object -const graphHeight = 300; -const innerGraphRowContainerPadding = 10; -const xAxisMarginTop = -15; -const topInset = 30; -const adjustedGraphHeight = graphHeight - innerGraphRowContainerPadding - xAxisMarginTop - topInset; - -// Usable for mock testing -const domain = [0, 140]; -const range = [adjustedGraphHeight, 30]; - -export const defaultTicks = [0, 20, 40, 60, 80, 100, 120, 140]; -export const defaultScaleLinear = scale.scaleLinear().domain(domain).range(range); const App: React.FC = () => { return ( test - ); }; diff --git a/component/custom-grid.tsx b/component/custom-grid.tsx index 45595f0..453f749 100644 --- a/component/custom-grid.tsx +++ b/component/custom-grid.tsx @@ -1,16 +1,16 @@ import React from 'react'; import { G, Line } from 'react-native-svg'; -import * as scale from 'd3-scale' +import { ScaleLinear } from 'd3-scale' import { colors } from '../styles'; -type scaleFunction = (value: number) => number; +type scaleFunction = ScaleLinear; interface CustomGridProps { y: scaleFunction; - ticks: number[]; + ticks: Array; } -export const CustomGrid: React.FC = ({ y, ticks }: Partial) => { +export const CustomGrid: React.FC = ({ y, ticks }) => { const [firstTick, ...remainingTicks] = ticks; const dashArray = [1, 3]; const strokeSolidWidth = 0.2;