diff --git a/package-lock.json b/package-lock.json index ad7bd46..7c5ba07 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,6 +17,10 @@ "@types/node": "^16.11.43", "@types/react": "^18.0.15", "@types/react-dom": "^18.0.6", + "@visx/group": "^2.10.0", + "@visx/mock-data": "^2.1.2", + "@visx/scale": "^2.2.2", + "@visx/shape": "^2.12.2", "knex": "^2.2.0", "moment": "^2.29.4", "next": "^12.2.3", @@ -4350,6 +4354,11 @@ "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz", "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==" }, + "node_modules/@types/lodash": { + "version": "4.14.182", + "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.182.tgz", + "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==" + }, "node_modules/@types/mime": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz", @@ -4704,6 +4713,168 @@ "url": "https://opencollective.com/typescript-eslint" } }, + "node_modules/@visx/curve": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@visx/curve/-/curve-2.1.0.tgz", + "integrity": "sha512-9b6JOnx91gmOQiSPhUOxdsvcnW88fgqfTPKoVgQxidMsD/I3wksixtwo8TR/vtEz2aHzzsEEhlv1qK7Y3yaSDw==", + "dependencies": { + "@types/d3-shape": "^1.3.1", + "d3-shape": "^1.0.6" + } + }, + "node_modules/@visx/curve/node_modules/@types/d3-path": { + "version": "1.0.9", + "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-1.0.9.tgz", + "integrity": "sha512-NaIeSIBiFgSC6IGUBjZWcscUJEq7vpVu7KthHN8eieTV9d9MqkSOZLH4chq1PmcKy06PNe3axLeKmRIyxJ+PZQ==" + }, + "node_modules/@visx/curve/node_modules/@types/d3-shape": { + "version": "1.3.8", + "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-1.3.8.tgz", + "integrity": "sha512-gqfnMz6Fd5H6GOLYixOZP/xlrMtJms9BaS+6oWxTKHNqPGZ93BkWWupQSCYm6YHqx6h9wjRupuJb90bun6ZaYg==", + "dependencies": { + "@types/d3-path": "^1" + } + }, + "node_modules/@visx/curve/node_modules/d3-path": { + "version": "1.0.9", + "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz", + "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==" + }, + "node_modules/@visx/curve/node_modules/d3-shape": { + "version": "1.3.7", + "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz", + "integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==", + "dependencies": { + "d3-path": "1" + } + }, + "node_modules/@visx/group": { + "version": "2.10.0", + "resolved": "https://registry.npmjs.org/@visx/group/-/group-2.10.0.tgz", + "integrity": "sha512-DNJDX71f65Et1+UgQvYlZbE66owYUAfcxTkC96Db6TnxV221VKI3T5l23UWbnMzwFBP9dR3PWUjjqhhF12N5pA==", + "dependencies": { + "@types/react": "*", + "classnames": "^2.3.1", + "prop-types": "^15.6.2" + }, + "peerDependencies": { + "react": "^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0" + } + }, + "node_modules/@visx/mock-data": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/@visx/mock-data/-/mock-data-2.1.2.tgz", + "integrity": "sha512-6xUVP56tiPwVi3BxvoXPQzDYWG6iX2nnOlsHEYsHgK8gHq1r7AhjQtdbQUX7QF0QkmkJM0cW8TBjZ2e+dItB8Q==", + "dependencies": { + "@types/d3-random": "^2.2.0", + "d3-random": "^2.2.2" + } + }, + "node_modules/@visx/mock-data/node_modules/@types/d3-random": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/@types/d3-random/-/d3-random-2.2.1.tgz", + "integrity": "sha512-5vvxn6//poNeOxt1ZwC7QU//dG9QqABjy1T7fP/xmFHY95GnaOw3yABf29hiu5SR1Oo34XcpyHFbzod+vemQjA==" + }, + "node_modules/@visx/scale": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/@visx/scale/-/scale-2.2.2.tgz", + "integrity": "sha512-3aDySGUTpe6VykDQmF+g2nz5paFu9iSPTcCOEgkcru0/v5tmGzUdvivy8CkYbr87HN73V/Jc53lGm+kJUQcLBw==", + "dependencies": { + "@types/d3-interpolate": "^1.3.1", + "@types/d3-scale": "^3.3.0", + "@types/d3-time": "^2.0.0", + "d3-interpolate": "^1.4.0", + "d3-scale": "^3.3.0", + "d3-time": "^2.1.1" + } + }, + "node_modules/@visx/scale/node_modules/@types/d3-color": { + "version": "1.4.2", + "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-1.4.2.tgz", + "integrity": "sha512-fYtiVLBYy7VQX+Kx7wU/uOIkGQn8aAEY8oWMoyja3N4dLd8Yf6XgSIR/4yWvMuveNOH5VShnqCgRqqh/UNanBA==" + }, + "node_modules/@visx/scale/node_modules/@types/d3-interpolate": { + "version": "1.4.2", + "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-1.4.2.tgz", + "integrity": "sha512-ylycts6llFf8yAEs1tXzx2loxxzDZHseuhPokrqKprTQSTcD3JbJI1omZP1rphsELZO3Q+of3ff0ZS7+O6yVzg==", + "dependencies": { + "@types/d3-color": "^1" + } + }, + "node_modules/@visx/scale/node_modules/@types/d3-scale": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-3.3.2.tgz", + "integrity": "sha512-gGqr7x1ost9px3FvIfUMi5XA/F/yAf4UkUDtdQhpH92XCT0Oa7zkkRzY61gPVJq+DxpHn/btouw5ohWkbBsCzQ==", + "dependencies": { + "@types/d3-time": "^2" + } + }, + "node_modules/@visx/scale/node_modules/@types/d3-time": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-2.1.1.tgz", + "integrity": "sha512-9MVYlmIgmRR31C5b4FVSWtuMmBHh2mOWQYfl7XAYOa8dsnb7iEmUmRSWSFgXFtkjxO65d7hTUHQC+RhR/9IWFg==" + }, + "node_modules/@visx/scale/node_modules/d3-color": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.4.1.tgz", + "integrity": "sha512-p2sTHSLCJI2QKunbGb7ocOh7DgTAn8IrLx21QRc/BSnodXM4sv6aLQlnfpvehFMLZEfBc6g9pH9SWQccFYfJ9Q==" + }, + "node_modules/@visx/scale/node_modules/d3-interpolate": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-1.4.0.tgz", + "integrity": "sha512-V9znK0zc3jOPV4VD2zZn0sDhZU3WAE2bmlxdIwwQPPzPjvyLkd8B3JUVdS1IDUFDkWZ72c9qnv1GK2ZagTZ8EA==", + "dependencies": { + "d3-color": "1" + } + }, + "node_modules/@visx/shape": { + "version": "2.12.2", + "resolved": "https://registry.npmjs.org/@visx/shape/-/shape-2.12.2.tgz", + "integrity": "sha512-4gN0fyHWYXiJ+Ck8VAazXX0i8TOnLJvOc5jZBnaJDVxgnSIfCjJn0+Nsy96l9Dy/bCMTh4DBYUBv9k+YICBUOA==", + "dependencies": { + "@types/d3-path": "^1.0.8", + "@types/d3-shape": "^1.3.1", + "@types/lodash": "^4.14.172", + "@types/react": "*", + "@visx/curve": "2.1.0", + "@visx/group": "2.10.0", + "@visx/scale": "2.2.2", + "classnames": "^2.3.1", + "d3-path": "^1.0.5", + "d3-shape": "^1.2.0", + "lodash": "^4.17.21", + "prop-types": "^15.5.10" + }, + "peerDependencies": { + "react": "^16.3.0-0 || ^17.0.0-0 || ^18.0.0-0" + } + }, + "node_modules/@visx/shape/node_modules/@types/d3-path": { + "version": "1.0.9", + "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-1.0.9.tgz", + "integrity": "sha512-NaIeSIBiFgSC6IGUBjZWcscUJEq7vpVu7KthHN8eieTV9d9MqkSOZLH4chq1PmcKy06PNe3axLeKmRIyxJ+PZQ==" + }, + "node_modules/@visx/shape/node_modules/@types/d3-shape": { + "version": "1.3.8", + "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-1.3.8.tgz", + "integrity": "sha512-gqfnMz6Fd5H6GOLYixOZP/xlrMtJms9BaS+6oWxTKHNqPGZ93BkWWupQSCYm6YHqx6h9wjRupuJb90bun6ZaYg==", + "dependencies": { + "@types/d3-path": "^1" + } + }, + "node_modules/@visx/shape/node_modules/d3-path": { + "version": "1.0.9", + "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz", + "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==" + }, + "node_modules/@visx/shape/node_modules/d3-shape": { + "version": "1.3.7", + "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz", + "integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==", + "dependencies": { + "d3-path": "1" + } + }, "node_modules/@webassemblyjs/ast": { "version": "1.11.1", "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz", @@ -6796,6 +6967,11 @@ "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-2.0.0.tgz", "integrity": "sha512-ZwZQxKhBnv9yHaiWd6ZU4x5BtCQ7pXszEV9CU6kRgwIQVQGLMv1oiL4M+MK/n79sYzsj+gcgpPQSctJUsLN7fA==" }, + "node_modules/d3-random": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/d3-random/-/d3-random-2.2.2.tgz", + "integrity": "sha512-0D9P8TRj6qDAtHhRQn6EfdOtHMfsUWanl3yb/84C4DqpZ+VsgfI5iTVRNRbELCfNvRfpMr8OrqqUTQ6ANGCijw==" + }, "node_modules/d3-scale": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-3.3.0.tgz", @@ -21434,6 +21610,11 @@ "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz", "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==" }, + "@types/lodash": { + "version": "4.14.182", + "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.182.tgz", + "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==" + }, "@types/mime": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz", @@ -21685,6 +21866,170 @@ "eslint-visitor-keys": "^3.3.0" } }, + "@visx/curve": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@visx/curve/-/curve-2.1.0.tgz", + "integrity": "sha512-9b6JOnx91gmOQiSPhUOxdsvcnW88fgqfTPKoVgQxidMsD/I3wksixtwo8TR/vtEz2aHzzsEEhlv1qK7Y3yaSDw==", + "requires": { + "@types/d3-shape": "^1.3.1", + "d3-shape": "^1.0.6" + }, + "dependencies": { + "@types/d3-path": { + "version": "1.0.9", + "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-1.0.9.tgz", + "integrity": "sha512-NaIeSIBiFgSC6IGUBjZWcscUJEq7vpVu7KthHN8eieTV9d9MqkSOZLH4chq1PmcKy06PNe3axLeKmRIyxJ+PZQ==" + }, + "@types/d3-shape": { + "version": "1.3.8", + "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-1.3.8.tgz", + "integrity": "sha512-gqfnMz6Fd5H6GOLYixOZP/xlrMtJms9BaS+6oWxTKHNqPGZ93BkWWupQSCYm6YHqx6h9wjRupuJb90bun6ZaYg==", + "requires": { + "@types/d3-path": "^1" + } + }, + "d3-path": { + "version": "1.0.9", + "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz", + "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==" + }, + "d3-shape": { + "version": "1.3.7", + "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz", + "integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==", + "requires": { + "d3-path": "1" + } + } + } + }, + "@visx/group": { + "version": "2.10.0", + "resolved": "https://registry.npmjs.org/@visx/group/-/group-2.10.0.tgz", + "integrity": "sha512-DNJDX71f65Et1+UgQvYlZbE66owYUAfcxTkC96Db6TnxV221VKI3T5l23UWbnMzwFBP9dR3PWUjjqhhF12N5pA==", + "requires": { + "@types/react": "*", + "classnames": "^2.3.1", + "prop-types": "^15.6.2" + } + }, + "@visx/mock-data": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/@visx/mock-data/-/mock-data-2.1.2.tgz", + "integrity": "sha512-6xUVP56tiPwVi3BxvoXPQzDYWG6iX2nnOlsHEYsHgK8gHq1r7AhjQtdbQUX7QF0QkmkJM0cW8TBjZ2e+dItB8Q==", + "requires": { + "@types/d3-random": "^2.2.0", + "d3-random": "^2.2.2" + }, + "dependencies": { + "@types/d3-random": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/@types/d3-random/-/d3-random-2.2.1.tgz", + "integrity": "sha512-5vvxn6//poNeOxt1ZwC7QU//dG9QqABjy1T7fP/xmFHY95GnaOw3yABf29hiu5SR1Oo34XcpyHFbzod+vemQjA==" + } + } + }, + "@visx/scale": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/@visx/scale/-/scale-2.2.2.tgz", + "integrity": "sha512-3aDySGUTpe6VykDQmF+g2nz5paFu9iSPTcCOEgkcru0/v5tmGzUdvivy8CkYbr87HN73V/Jc53lGm+kJUQcLBw==", + "requires": { + "@types/d3-interpolate": "^1.3.1", + "@types/d3-scale": "^3.3.0", + "@types/d3-time": "^2.0.0", + "d3-interpolate": "^1.4.0", + "d3-scale": "^3.3.0", + "d3-time": "^2.1.1" + }, + "dependencies": { + "@types/d3-color": { + "version": "1.4.2", + "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-1.4.2.tgz", + "integrity": "sha512-fYtiVLBYy7VQX+Kx7wU/uOIkGQn8aAEY8oWMoyja3N4dLd8Yf6XgSIR/4yWvMuveNOH5VShnqCgRqqh/UNanBA==" + }, + "@types/d3-interpolate": { + "version": "1.4.2", + "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-1.4.2.tgz", + "integrity": "sha512-ylycts6llFf8yAEs1tXzx2loxxzDZHseuhPokrqKprTQSTcD3JbJI1omZP1rphsELZO3Q+of3ff0ZS7+O6yVzg==", + "requires": { + "@types/d3-color": "^1" + } + }, + "@types/d3-scale": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-3.3.2.tgz", + "integrity": "sha512-gGqr7x1ost9px3FvIfUMi5XA/F/yAf4UkUDtdQhpH92XCT0Oa7zkkRzY61gPVJq+DxpHn/btouw5ohWkbBsCzQ==", + "requires": { + "@types/d3-time": "^2" + } + }, + "@types/d3-time": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-2.1.1.tgz", + "integrity": "sha512-9MVYlmIgmRR31C5b4FVSWtuMmBHh2mOWQYfl7XAYOa8dsnb7iEmUmRSWSFgXFtkjxO65d7hTUHQC+RhR/9IWFg==" + }, + "d3-color": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.4.1.tgz", + "integrity": "sha512-p2sTHSLCJI2QKunbGb7ocOh7DgTAn8IrLx21QRc/BSnodXM4sv6aLQlnfpvehFMLZEfBc6g9pH9SWQccFYfJ9Q==" + }, + "d3-interpolate": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-1.4.0.tgz", + "integrity": "sha512-V9znK0zc3jOPV4VD2zZn0sDhZU3WAE2bmlxdIwwQPPzPjvyLkd8B3JUVdS1IDUFDkWZ72c9qnv1GK2ZagTZ8EA==", + "requires": { + "d3-color": "1" + } + } + } + }, + "@visx/shape": { + "version": "2.12.2", + "resolved": "https://registry.npmjs.org/@visx/shape/-/shape-2.12.2.tgz", + "integrity": "sha512-4gN0fyHWYXiJ+Ck8VAazXX0i8TOnLJvOc5jZBnaJDVxgnSIfCjJn0+Nsy96l9Dy/bCMTh4DBYUBv9k+YICBUOA==", + "requires": { + "@types/d3-path": "^1.0.8", + "@types/d3-shape": "^1.3.1", + "@types/lodash": "^4.14.172", + "@types/react": "*", + "@visx/curve": "2.1.0", + "@visx/group": "2.10.0", + "@visx/scale": "2.2.2", + "classnames": "^2.3.1", + "d3-path": "^1.0.5", + "d3-shape": "^1.2.0", + "lodash": "^4.17.21", + "prop-types": "^15.5.10" + }, + "dependencies": { + "@types/d3-path": { + "version": "1.0.9", + "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-1.0.9.tgz", + "integrity": "sha512-NaIeSIBiFgSC6IGUBjZWcscUJEq7vpVu7KthHN8eieTV9d9MqkSOZLH4chq1PmcKy06PNe3axLeKmRIyxJ+PZQ==" + }, + "@types/d3-shape": { + "version": "1.3.8", + "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-1.3.8.tgz", + "integrity": "sha512-gqfnMz6Fd5H6GOLYixOZP/xlrMtJms9BaS+6oWxTKHNqPGZ93BkWWupQSCYm6YHqx6h9wjRupuJb90bun6ZaYg==", + "requires": { + "@types/d3-path": "^1" + } + }, + "d3-path": { + "version": "1.0.9", + "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz", + "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==" + }, + "d3-shape": { + "version": "1.3.7", + "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz", + "integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==", + "requires": { + "d3-path": "1" + } + } + } + }, "@webassemblyjs/ast": { "version": "1.11.1", "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz", @@ -23257,6 +23602,11 @@ "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-2.0.0.tgz", "integrity": "sha512-ZwZQxKhBnv9yHaiWd6ZU4x5BtCQ7pXszEV9CU6kRgwIQVQGLMv1oiL4M+MK/n79sYzsj+gcgpPQSctJUsLN7fA==" }, + "d3-random": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/d3-random/-/d3-random-2.2.2.tgz", + "integrity": "sha512-0D9P8TRj6qDAtHhRQn6EfdOtHMfsUWanl3yb/84C4DqpZ+VsgfI5iTVRNRbELCfNvRfpMr8OrqqUTQ6ANGCijw==" + }, "d3-scale": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-3.3.0.tgz", diff --git a/package.json b/package.json index 2dfc7e8..f417850 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,10 @@ "@types/node": "^16.11.43", "@types/react": "^18.0.15", "@types/react-dom": "^18.0.6", + "@visx/group": "^2.10.0", + "@visx/mock-data": "^2.1.2", + "@visx/scale": "^2.2.2", + "@visx/shape": "^2.12.2", "knex": "^2.2.0", "moment": "^2.29.4", "next": "^12.2.3", diff --git a/src/components/_experiments/TrackMap.tsx b/src/components/_experiments/TrackMap.tsx new file mode 100644 index 0000000..46693ba --- /dev/null +++ b/src/components/_experiments/TrackMap.tsx @@ -0,0 +1,142 @@ +import React, { useRef, useEffect, useState, useMemo } from "react"; +import { extent, max } from "d3-array"; +import { scaleLinear } from "@visx/scale"; +import { LinePath } from "@visx/shape"; +import { Group } from "@visx/group"; + +import { useRefDimensions } from "libs/react/dimensions"; +import type { TrackData, DriverData, Telemetry } from "libs/types"; + +type DriverTelemetry = Partial & { + Code?: string; + X: number; + Y: number; +}; + +const pickTelemetryAtDistance = ( + distance: number, + data: Telemetry[] +): Telemetry | undefined => { + for (let i = 1; i < data.length; i++) { + if (data[i].Distance >= distance) { + // TODO: need to interpolate distance...? + return data[i]; + } + } +}; + +const pickFastest = (drivers: DriverData[]): DriverTelemetry[] => { + const tel: DriverTelemetry[] = []; + const fastest = drivers[0].data.forEach((d) => { + const { Speed: speed, Distance: distance } = d; + // TODO: support more than 2 drivers? + const telOtherDriver = pickTelemetryAtDistance(distance, drivers[1].data); + const row: DriverTelemetry = { + X: d.X, + Y: d.Y, + }; + + if (telOtherDriver === undefined) { + tel.push(row); + return; + } + + if (speed > telOtherDriver.Speed) { + tel.push({ + Code: drivers[0].driverCode, + ...d, + }); + } else if (telOtherDriver.Speed > speed) { + tel.push({ + Code: drivers[1].driverCode, + ...telOtherDriver, + ...row, + }); + } else { + tel.push(row); + } + }); + return tel; +}; + +interface TrackMapProps { + color: string; + driverData: DriverData[]; + telemetryOverlay?: "none" | "fastest"; +} + +export const TrackMap = (props: TrackMapProps) => { + const ref = useRef(null); + const dimensions = useRefDimensions(ref); + const map = props.driverData[0].data; + const [xMargin, yMargin] = [14, 14]; + + // x scale bounds + const xScale = scaleLinear({ + domain: extent(map, (m: Telemetry) => m.X) as [number, number], + }).range([xMargin, dimensions.width - xMargin]); + + // y scale bounds + const yScale = scaleLinear({ + domain: extent(map, (m: Telemetry) => m.Y) as [number, number], + }).range([dimensions.height - yMargin, yMargin]); + + const overlay = pickFastest(props.driverData); + + return ( +
+ + + + data={map} + x={(d) => xScale(d.X) ?? 0} + y={(d) => yScale(d.Y) ?? 0} + stroke={props.color} + strokeWidth={12} + shapeRendering="geometricPrecision" + /> + {overlay && + props.driverData.map((driver) => { + const data = overlay.map((d) => + d.Code === driver.driverCode ? d : null + ); + + const terminated: DriverTelemetry[][] = [[]]; + let idx = 0; + let prevNull = true; + data.forEach((d) => { + if (d === null) { + if (!prevNull) { + idx++; + } + prevNull = true; + return; + } + if (terminated.length === idx) { + terminated.push([]); + } + prevNull = false; + terminated[idx].push(d); + }); + return terminated.map((t) => { + return ( + + data={t} + x={(d) => xScale(d.X)} + y={(d) => yScale(d.Y)} + stroke={driver.driverColor} + strokeWidth={6} + shapeRendering="geometricPrecision" + /> + ); + }); + })} + + +
+ ); +}; + +TrackMap.defaultProps = { + telemetryOverlay: "none", +}; diff --git a/src/pages/experiments/visx.tsx b/src/pages/experiments/visx.tsx new file mode 100644 index 0000000..d474c7c --- /dev/null +++ b/src/pages/experiments/visx.tsx @@ -0,0 +1,19 @@ +import { TrackMap } from "components/_experiments/TrackMap"; +import { NorrisData, RicciardoData } from "libs/data/mclaren"; + +export default function VisxExperiment() { + return ( +
+
+ +
+
+ ); +}