diff --git a/components/LineGraph.tsx b/components/LineGraph.tsx index 23879ed..0511861 100644 --- a/components/LineGraph.tsx +++ b/components/LineGraph.tsx @@ -40,14 +40,9 @@ const COLOURS = { darkblue: "#354265", }; -const defaultMargin = { top: 40, right: 30, bottom: 50, left: 40 }; +const DEFAULT_LABEL_SIZE = 16; -export default function LineGraph({ - data, - width, - height, - margin = defaultMargin, -}: BarGraphProps) { +export function LineGraph({ data, width, height, margin }: BarGraphProps) { if (width < 10) return null; // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call diff --git a/package-lock.json b/package-lock.json index 7f2a1f1..d03a2da 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,6 +17,7 @@ "@visx/text": "^2.10.0", "@visx/tooltip": "^2.10.0", "@visx/wordcloud": "^2.10.0", + "@visx/xychart": "^2.12.2", "next": "12.1.6", "react": "18.1.0", "react-dom": "18.1.0" @@ -342,6 +343,11 @@ "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==", "dev": true }, + "node_modules/@juggle/resize-observer": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.3.1.tgz", + "integrity": "sha512-zMM9Ds+SawiUkakS7y94Ymqx+S0ORzpG3frZirN3l+UlXUmSUR7hF4wxCVqW+ei94JzV5kt0uXBcoOEAuiydrw==" + }, "node_modules/@next/env": { "version": "12.1.6", "resolved": "https://registry.npmjs.org/@next/env/-/env-12.1.6.tgz", @@ -571,6 +577,79 @@ "node": ">= 8" } }, + "node_modules/@react-spring/animated": { + "version": "9.5.2", + "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-9.5.2.tgz", + "integrity": "sha512-oRlX+MmYLbK8IuUZR7SQUnRjXxJ4PMIZeBkBd1SUWVgVJAHMTfJzPltzm+I6p59qX+qLlklYHfnWaonQKDqLuQ==", + "peer": true, + "dependencies": { + "@react-spring/shared": "~9.5.2", + "@react-spring/types": "~9.5.2" + }, + "peerDependencies": { + "react": "^16.8.0 || >=17.0.0 || >=18.0.0" + } + }, + "node_modules/@react-spring/core": { + "version": "9.5.2", + "resolved": "https://registry.npmjs.org/@react-spring/core/-/core-9.5.2.tgz", + "integrity": "sha512-UMRtFH6EfebMp/NMDGCUY5+hZFXsg9iT9hzt/iPzJSz2WMXKBjLoFZHJXcmiVOrIhzHmg1O0pFECn1Wp6pZ5Gw==", + "peer": true, + "dependencies": { + "@react-spring/animated": "~9.5.2", + "@react-spring/rafz": "~9.5.2", + "@react-spring/shared": "~9.5.2", + "@react-spring/types": "~9.5.2" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/react-spring/donate" + }, + "peerDependencies": { + "react": "^16.8.0 || >=17.0.0 || >=18.0.0" + } + }, + "node_modules/@react-spring/rafz": { + "version": "9.5.2", + "resolved": "https://registry.npmjs.org/@react-spring/rafz/-/rafz-9.5.2.tgz", + "integrity": "sha512-xHSRXKKBI/wDUkZGrspkOm4VlgN6lZi8Tw9Jzibp9QKf3neoof+U2mDNgklvnLaasymtUwAq9o4ZfFvQIVNgPQ==", + "peer": true + }, + "node_modules/@react-spring/shared": { + "version": "9.5.2", + "resolved": "https://registry.npmjs.org/@react-spring/shared/-/shared-9.5.2.tgz", + "integrity": "sha512-/OSf2sjwY4BUnjZL6xMC+H3WxOOhMUCk+yZwgdj40XuyUpk6E6tYyiPeD9Yq5GLsZHodkvE1syVMRVReL4ndAg==", + "peer": true, + "dependencies": { + "@react-spring/rafz": "~9.5.2", + "@react-spring/types": "~9.5.2" + }, + "peerDependencies": { + "react": "^16.8.0 || >=17.0.0 || >=18.0.0" + } + }, + "node_modules/@react-spring/types": { + "version": "9.5.2", + "resolved": "https://registry.npmjs.org/@react-spring/types/-/types-9.5.2.tgz", + "integrity": "sha512-n/wBRSHPqTmEd4BFWY6TeR1o/UY+3ujoqMxLjqy90CcY/ozJzDRuREL3c+pxMeTF2+B7dX33dTPCtFMX51nbxg==", + "peer": true + }, + "node_modules/@react-spring/web": { + "version": "9.5.2", + "resolved": "https://registry.npmjs.org/@react-spring/web/-/web-9.5.2.tgz", + "integrity": "sha512-cusTjbOGTgtbsnpBDjb6Ia+B0lQLE0Fk5rGDog6Sww7hWnLIQ521PMiOBnAWtkntB9eXDUfj7L91nwJviEC0lw==", + "peer": true, + "dependencies": { + "@react-spring/animated": "~9.5.2", + "@react-spring/core": "~9.5.2", + "@react-spring/shared": "~9.5.2", + "@react-spring/types": "~9.5.2" + }, + "peerDependencies": { + "react": "^16.8.0 || >=17.0.0 || >=18.0.0", + "react-dom": "^16.8.0 || >=17.0.0 || >=18.0.0" + } + }, "node_modules/@rushstack/eslint-patch": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.1.3.tgz", @@ -629,6 +708,11 @@ "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-2.1.1.tgz", "integrity": "sha512-9MVYlmIgmRR31C5b4FVSWtuMmBHh2mOWQYfl7XAYOa8dsnb7iEmUmRSWSFgXFtkjxO65d7hTUHQC+RhR/9IWFg==" }, + "node_modules/@types/d3-voronoi": { + "version": "1.1.9", + "resolved": "https://registry.npmjs.org/@types/d3-voronoi/-/d3-voronoi-1.1.9.tgz", + "integrity": "sha512-DExNQkaHd1F3dFPvGA/Aw2NGyjMln6E9QzsiqOcBgnE+VInYnFBHBBySbZQts6z6xD+5jTfKCP7M4OqMyVjdwQ==" + }, "node_modules/@types/json-schema": { "version": "7.0.11", "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz", @@ -886,17 +970,36 @@ "url": "https://opencollective.com/typescript-eslint" } }, + "node_modules/@visx/annotation": { + "version": "2.12.2", + "resolved": "https://registry.npmjs.org/@visx/annotation/-/annotation-2.12.2.tgz", + "integrity": "sha512-NhIexNL2QJKc5escOpCe5apNdqBUqmQzGLqc40L7GslYuS3KgxtMa4tdpI+WCct8b/EK3fyQmN9oqG0H5HTY9A==", + "dependencies": { + "@types/react": "*", + "@visx/drag": "2.10.0", + "@visx/group": "2.10.0", + "@visx/point": "2.6.0", + "@visx/shape": "2.12.2", + "@visx/text": "2.12.2", + "classnames": "^2.3.1", + "prop-types": "^15.5.10", + "react-use-measure": "^2.0.4" + }, + "peerDependencies": { + "react": "^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0" + } + }, "node_modules/@visx/axis": { - "version": "2.10.0", - "resolved": "https://registry.npmjs.org/@visx/axis/-/axis-2.10.0.tgz", - "integrity": "sha512-myEcXPzD7ZmKiXuhue2lpiuTDgl3Glhe1LB+xoUDS8ZAW76Asd6PwurjoxSnq3tHCz0EDBh7YlgApeFy3Bw38A==", + "version": "2.12.2", + "resolved": "https://registry.npmjs.org/@visx/axis/-/axis-2.12.2.tgz", + "integrity": "sha512-nE+DGNwRzXOmp6ZwMQ1yUhbF7uR2wd3j6Xja/kVgGA7wSbqUeCZzqKZvhRsCqyay6PtHVlRRAhHP31Ob39+jtw==", "dependencies": { "@types/react": "*", "@visx/group": "2.10.0", "@visx/point": "2.6.0", "@visx/scale": "2.2.2", - "@visx/shape": "2.10.0", - "@visx/text": "2.10.0", + "@visx/shape": "2.12.2", + "@visx/text": "2.12.2", "classnames": "^2.3.1", "prop-types": "^15.6.0" }, @@ -927,6 +1030,20 @@ "d3-shape": "^1.0.6" } }, + "node_modules/@visx/drag": { + "version": "2.10.0", + "resolved": "https://registry.npmjs.org/@visx/drag/-/drag-2.10.0.tgz", + "integrity": "sha512-1G7ABfue8/Jn7tHxEPsDK+84Jbgej3Cqgi8FHaV15XlDRlaWs/fDNz4ECdJUGvhXuXLYCpaWFzhD1HaSEDJL1g==", + "dependencies": { + "@types/react": "*", + "@visx/event": "2.6.0", + "@visx/point": "2.6.0", + "prop-types": "^15.5.10" + }, + "peerDependencies": { + "react": "^16.8.0-0 || ^17.0.0-0 || ^18.0.0-0" + } + }, "node_modules/@visx/event": { "version": "2.6.0", "resolved": "https://registry.npmjs.org/@visx/event/-/event-2.6.0.tgz", @@ -936,17 +1053,33 @@ "@visx/point": "2.6.0" } }, - "node_modules/@visx/grid": { + "node_modules/@visx/glyph": { "version": "2.10.0", - "resolved": "https://registry.npmjs.org/@visx/grid/-/grid-2.10.0.tgz", - "integrity": "sha512-2uj8vfwQ0f7EN1MuNne/1a94gyux19MZxBd36BqXmyUpnRxC4DSYQRra05tqoydUupe1mAlJZHUuKl2zDK7tOw==", + "resolved": "https://registry.npmjs.org/@visx/glyph/-/glyph-2.10.0.tgz", + "integrity": "sha512-qjbnfSgV920+V4ctXeDJWwzBorZLz97cDA4b/GmJ2tk2h0AVMrAejF2LNLgPQpzsVb7BIuVXAJXgp0dop2gr6w==", + "dependencies": { + "@types/d3-shape": "^1.3.1", + "@types/react": "*", + "@visx/group": "2.10.0", + "classnames": "^2.3.1", + "d3-shape": "^1.2.0", + "prop-types": "^15.6.2" + }, + "peerDependencies": { + "react": "^16.3.0-0 || ^17.0.0-0 || ^18.0.0-0" + } + }, + "node_modules/@visx/grid": { + "version": "2.12.2", + "resolved": "https://registry.npmjs.org/@visx/grid/-/grid-2.12.2.tgz", + "integrity": "sha512-lyMQvq5afjOh0nRqF0OBjgsLfsgUeLcFc95oj0FJ/NJ/MvtI6Gd5BxxbmYzuVfZ4f0Dm1pvtBu1swoB3451tkg==", "dependencies": { "@types/react": "*", "@visx/curve": "2.1.0", "@visx/group": "2.10.0", "@visx/point": "2.6.0", "@visx/scale": "2.2.2", - "@visx/shape": "2.10.0", + "@visx/shape": "2.12.2", "classnames": "^2.3.1", "prop-types": "^15.6.2" }, @@ -972,6 +1105,39 @@ "resolved": "https://registry.npmjs.org/@visx/point/-/point-2.6.0.tgz", "integrity": "sha512-amBi7yMz4S2VSchlPdliznN41TuES64506ySI22DeKQ+mc1s1+BudlpnY90sM1EIw4xnqbKmrghTTGfy6SVqvQ==" }, + "node_modules/@visx/react-spring": { + "version": "2.12.2", + "resolved": "https://registry.npmjs.org/@visx/react-spring/-/react-spring-2.12.2.tgz", + "integrity": "sha512-+Oo9S75lSbpF6VV3Ym8kB/I4H7O3qYk5Nltv2CNUoVuWvzd4tRnxiVLBxYuGjtj6lIAhDJ+W8QYHXhZhe0zNHw==", + "dependencies": { + "@types/react": "*", + "@visx/axis": "2.12.2", + "@visx/grid": "2.12.2", + "@visx/scale": "2.2.2", + "@visx/text": "2.12.2", + "classnames": "^2.3.1", + "prop-types": "^15.6.2" + }, + "peerDependencies": { + "@react-spring/web": "^9.4.5", + "react": "^16.3.0-0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@visx/responsive": { + "version": "2.10.0", + "resolved": "https://registry.npmjs.org/@visx/responsive/-/responsive-2.10.0.tgz", + "integrity": "sha512-NssDPpuUYp7hqVISuYkKZ5zk6ob0++RdTIaUjRcUdyFEbvzb9+zIb8QToOkvI90L2EC/MY4Jx0NpDbEe79GpAw==", + "dependencies": { + "@juggle/resize-observer": "^3.3.1", + "@types/lodash": "^4.14.172", + "@types/react": "*", + "lodash": "^4.17.21", + "prop-types": "^15.6.1" + }, + "peerDependencies": { + "react": "^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0" + } + }, "node_modules/@visx/scale": { "version": "2.2.2", "resolved": "https://registry.npmjs.org/@visx/scale/-/scale-2.2.2.tgz", @@ -986,9 +1152,9 @@ } }, "node_modules/@visx/shape": { - "version": "2.10.0", - "resolved": "https://registry.npmjs.org/@visx/shape/-/shape-2.10.0.tgz", - "integrity": "sha512-aRQBfclEWEPDmQmnB+BGN9Issg7u9lLrZ5LUSI3gfR9WAAHoNldxjpHRcYx8Y16A3YlCFVgWIBBL7pH0XUYcCA==", + "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", @@ -1008,9 +1174,9 @@ } }, "node_modules/@visx/text": { - "version": "2.10.0", - "resolved": "https://registry.npmjs.org/@visx/text/-/text-2.10.0.tgz", - "integrity": "sha512-Wbt0Mq130akOahaby2Ziwkr62LuK6td9RcIWI9o4xsLE7GCIkxeUiVci0YUo2yewgwOLwR9F1guPuHPqYd+eYg==", + "version": "2.12.2", + "resolved": "https://registry.npmjs.org/@visx/text/-/text-2.12.2.tgz", + "integrity": "sha512-Sv9YEolggfv2Nf6+l28ESG3VXVR1+s4u/Cz17QpgOxygcbOM8LfLtriWtBsBMKdMbYKeUpoUro0clx55TUwzew==", "dependencies": { "@types/lodash": "^4.14.172", "@types/react": "*", @@ -1039,6 +1205,21 @@ "react-dom": "^16.8.0-0 || ^17.0.0-0 || ^18.0.0-0" } }, + "node_modules/@visx/voronoi": { + "version": "2.10.0", + "resolved": "https://registry.npmjs.org/@visx/voronoi/-/voronoi-2.10.0.tgz", + "integrity": "sha512-2GSosmQ25a9OctY4xPpPTwY6N4CW53Ssos8kzPHTo5Si/2h9AUNqVg7eGUb8lrEjakQYAAdX0J4U8D02tsQI+w==", + "dependencies": { + "@types/d3-voronoi": "^1.1.9", + "@types/react": "*", + "classnames": "^2.3.1", + "d3-voronoi": "^1.1.2", + "prop-types": "^15.6.1" + }, + "peerDependencies": { + "react": "^16.3.0-0 || ^17.0.0-0 || ^18.0.0-0" + } + }, "node_modules/@visx/wordcloud": { "version": "2.10.0", "resolved": "https://registry.npmjs.org/@visx/wordcloud/-/wordcloud-2.10.0.tgz", @@ -1052,6 +1233,46 @@ "react": "^16.8.0-0 || ^17.0.0-0 || ^18.0.0-0" } }, + "node_modules/@visx/xychart": { + "version": "2.12.2", + "resolved": "https://registry.npmjs.org/@visx/xychart/-/xychart-2.12.2.tgz", + "integrity": "sha512-Bg/7gZjWcctFhdd42c5DOAmo25qxWUbQTbSzkCW/D97v/531svnPyMqKCe5mMuxDQzAAx7KX06rWPn/Cih+RWA==", + "dependencies": { + "@types/lodash": "^4.14.172", + "@types/react": "*", + "@visx/annotation": "2.12.2", + "@visx/axis": "2.12.2", + "@visx/event": "2.6.0", + "@visx/glyph": "2.10.0", + "@visx/grid": "2.12.2", + "@visx/react-spring": "2.12.2", + "@visx/responsive": "2.10.0", + "@visx/scale": "2.2.2", + "@visx/shape": "2.12.2", + "@visx/text": "2.12.2", + "@visx/tooltip": "2.10.0", + "@visx/voronoi": "2.10.0", + "classnames": "^2.3.1", + "d3-array": "^2.6.0", + "d3-interpolate-path": "2.2.1", + "d3-shape": "^2.0.0", + "lodash": "^4.17.21", + "mitt": "^2.1.0", + "prop-types": "^15.6.2" + }, + "peerDependencies": { + "@react-spring/web": "^9.4.5", + "react": "^16.8.0 || ^17.0.0 || ^ 18.0.0" + } + }, + "node_modules/@visx/xychart/node_modules/d3-shape": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-2.1.0.tgz", + "integrity": "sha512-PnjUqfM2PpskbSLTJvAzp2Wv4CZsnAgTfcVRTwW03QR3MkXF8Uo7B1y/lWkAsmbKwuecto++4NlsYcvYpXpTHA==", + "dependencies": { + "d3-path": "1 - 2" + } + }, "node_modules/acorn": { "version": "8.7.1", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.1.tgz", @@ -1530,6 +1751,11 @@ "d3-color": "1" } }, + "node_modules/d3-interpolate-path": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/d3-interpolate-path/-/d3-interpolate-path-2.2.1.tgz", + "integrity": "sha512-6qLLh/KJVzls0XtMsMpcxhqMhgVEN7VIbR/6YGZe2qlS8KDgyyVB20XcmGnDyB051HcefQXM/Tppa9vcANEA4Q==" + }, "node_modules/d3-path": { "version": "1.0.9", "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz", @@ -1571,6 +1797,11 @@ "d3-time": "1 - 2" } }, + "node_modules/d3-voronoi": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/d3-voronoi/-/d3-voronoi-1.1.4.tgz", + "integrity": "sha512-dArJ32hchFsrQ8uMiTBLq256MpnZjeuBtdHpaDlYuQyjU0CVzCJl/BVW+SkszaAeH95D/8gxqAhgx0ouAWAfRg==" + }, "node_modules/damerau-levenshtein": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz", @@ -2976,6 +3207,11 @@ "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==", "dev": true }, + "node_modules/mitt": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/mitt/-/mitt-2.1.0.tgz", + "integrity": "sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg==" + }, "node_modules/ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", @@ -4641,6 +4877,11 @@ "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==", "dev": true }, + "@juggle/resize-observer": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.3.1.tgz", + "integrity": "sha512-zMM9Ds+SawiUkakS7y94Ymqx+S0ORzpG3frZirN3l+UlXUmSUR7hF4wxCVqW+ei94JzV5kt0uXBcoOEAuiydrw==" + }, "@next/env": { "version": "12.1.6", "resolved": "https://registry.npmjs.org/@next/env/-/env-12.1.6.tgz", @@ -4753,6 +4994,62 @@ "fastq": "^1.6.0" } }, + "@react-spring/animated": { + "version": "9.5.2", + "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-9.5.2.tgz", + "integrity": "sha512-oRlX+MmYLbK8IuUZR7SQUnRjXxJ4PMIZeBkBd1SUWVgVJAHMTfJzPltzm+I6p59qX+qLlklYHfnWaonQKDqLuQ==", + "peer": true, + "requires": { + "@react-spring/shared": "~9.5.2", + "@react-spring/types": "~9.5.2" + } + }, + "@react-spring/core": { + "version": "9.5.2", + "resolved": "https://registry.npmjs.org/@react-spring/core/-/core-9.5.2.tgz", + "integrity": "sha512-UMRtFH6EfebMp/NMDGCUY5+hZFXsg9iT9hzt/iPzJSz2WMXKBjLoFZHJXcmiVOrIhzHmg1O0pFECn1Wp6pZ5Gw==", + "peer": true, + "requires": { + "@react-spring/animated": "~9.5.2", + "@react-spring/rafz": "~9.5.2", + "@react-spring/shared": "~9.5.2", + "@react-spring/types": "~9.5.2" + } + }, + "@react-spring/rafz": { + "version": "9.5.2", + "resolved": "https://registry.npmjs.org/@react-spring/rafz/-/rafz-9.5.2.tgz", + "integrity": "sha512-xHSRXKKBI/wDUkZGrspkOm4VlgN6lZi8Tw9Jzibp9QKf3neoof+U2mDNgklvnLaasymtUwAq9o4ZfFvQIVNgPQ==", + "peer": true + }, + "@react-spring/shared": { + "version": "9.5.2", + "resolved": "https://registry.npmjs.org/@react-spring/shared/-/shared-9.5.2.tgz", + "integrity": "sha512-/OSf2sjwY4BUnjZL6xMC+H3WxOOhMUCk+yZwgdj40XuyUpk6E6tYyiPeD9Yq5GLsZHodkvE1syVMRVReL4ndAg==", + "peer": true, + "requires": { + "@react-spring/rafz": "~9.5.2", + "@react-spring/types": "~9.5.2" + } + }, + "@react-spring/types": { + "version": "9.5.2", + "resolved": "https://registry.npmjs.org/@react-spring/types/-/types-9.5.2.tgz", + "integrity": "sha512-n/wBRSHPqTmEd4BFWY6TeR1o/UY+3ujoqMxLjqy90CcY/ozJzDRuREL3c+pxMeTF2+B7dX33dTPCtFMX51nbxg==", + "peer": true + }, + "@react-spring/web": { + "version": "9.5.2", + "resolved": "https://registry.npmjs.org/@react-spring/web/-/web-9.5.2.tgz", + "integrity": "sha512-cusTjbOGTgtbsnpBDjb6Ia+B0lQLE0Fk5rGDog6Sww7hWnLIQ521PMiOBnAWtkntB9eXDUfj7L91nwJviEC0lw==", + "peer": true, + "requires": { + "@react-spring/animated": "~9.5.2", + "@react-spring/core": "~9.5.2", + "@react-spring/shared": "~9.5.2", + "@react-spring/types": "~9.5.2" + } + }, "@rushstack/eslint-patch": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.1.3.tgz", @@ -4811,6 +5108,11 @@ "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-2.1.1.tgz", "integrity": "sha512-9MVYlmIgmRR31C5b4FVSWtuMmBHh2mOWQYfl7XAYOa8dsnb7iEmUmRSWSFgXFtkjxO65d7hTUHQC+RhR/9IWFg==" }, + "@types/d3-voronoi": { + "version": "1.1.9", + "resolved": "https://registry.npmjs.org/@types/d3-voronoi/-/d3-voronoi-1.1.9.tgz", + "integrity": "sha512-DExNQkaHd1F3dFPvGA/Aw2NGyjMln6E9QzsiqOcBgnE+VInYnFBHBBySbZQts6z6xD+5jTfKCP7M4OqMyVjdwQ==" + }, "@types/json-schema": { "version": "7.0.11", "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz", @@ -4975,17 +5277,33 @@ "eslint-visitor-keys": "^3.3.0" } }, + "@visx/annotation": { + "version": "2.12.2", + "resolved": "https://registry.npmjs.org/@visx/annotation/-/annotation-2.12.2.tgz", + "integrity": "sha512-NhIexNL2QJKc5escOpCe5apNdqBUqmQzGLqc40L7GslYuS3KgxtMa4tdpI+WCct8b/EK3fyQmN9oqG0H5HTY9A==", + "requires": { + "@types/react": "*", + "@visx/drag": "2.10.0", + "@visx/group": "2.10.0", + "@visx/point": "2.6.0", + "@visx/shape": "2.12.2", + "@visx/text": "2.12.2", + "classnames": "^2.3.1", + "prop-types": "^15.5.10", + "react-use-measure": "^2.0.4" + } + }, "@visx/axis": { - "version": "2.10.0", - "resolved": "https://registry.npmjs.org/@visx/axis/-/axis-2.10.0.tgz", - "integrity": "sha512-myEcXPzD7ZmKiXuhue2lpiuTDgl3Glhe1LB+xoUDS8ZAW76Asd6PwurjoxSnq3tHCz0EDBh7YlgApeFy3Bw38A==", + "version": "2.12.2", + "resolved": "https://registry.npmjs.org/@visx/axis/-/axis-2.12.2.tgz", + "integrity": "sha512-nE+DGNwRzXOmp6ZwMQ1yUhbF7uR2wd3j6Xja/kVgGA7wSbqUeCZzqKZvhRsCqyay6PtHVlRRAhHP31Ob39+jtw==", "requires": { "@types/react": "*", "@visx/group": "2.10.0", "@visx/point": "2.6.0", "@visx/scale": "2.2.2", - "@visx/shape": "2.10.0", - "@visx/text": "2.10.0", + "@visx/shape": "2.12.2", + "@visx/text": "2.12.2", "classnames": "^2.3.1", "prop-types": "^15.6.0" } @@ -5009,6 +5327,17 @@ "d3-shape": "^1.0.6" } }, + "@visx/drag": { + "version": "2.10.0", + "resolved": "https://registry.npmjs.org/@visx/drag/-/drag-2.10.0.tgz", + "integrity": "sha512-1G7ABfue8/Jn7tHxEPsDK+84Jbgej3Cqgi8FHaV15XlDRlaWs/fDNz4ECdJUGvhXuXLYCpaWFzhD1HaSEDJL1g==", + "requires": { + "@types/react": "*", + "@visx/event": "2.6.0", + "@visx/point": "2.6.0", + "prop-types": "^15.5.10" + } + }, "@visx/event": { "version": "2.6.0", "resolved": "https://registry.npmjs.org/@visx/event/-/event-2.6.0.tgz", @@ -5018,17 +5347,30 @@ "@visx/point": "2.6.0" } }, - "@visx/grid": { + "@visx/glyph": { "version": "2.10.0", - "resolved": "https://registry.npmjs.org/@visx/grid/-/grid-2.10.0.tgz", - "integrity": "sha512-2uj8vfwQ0f7EN1MuNne/1a94gyux19MZxBd36BqXmyUpnRxC4DSYQRra05tqoydUupe1mAlJZHUuKl2zDK7tOw==", + "resolved": "https://registry.npmjs.org/@visx/glyph/-/glyph-2.10.0.tgz", + "integrity": "sha512-qjbnfSgV920+V4ctXeDJWwzBorZLz97cDA4b/GmJ2tk2h0AVMrAejF2LNLgPQpzsVb7BIuVXAJXgp0dop2gr6w==", + "requires": { + "@types/d3-shape": "^1.3.1", + "@types/react": "*", + "@visx/group": "2.10.0", + "classnames": "^2.3.1", + "d3-shape": "^1.2.0", + "prop-types": "^15.6.2" + } + }, + "@visx/grid": { + "version": "2.12.2", + "resolved": "https://registry.npmjs.org/@visx/grid/-/grid-2.12.2.tgz", + "integrity": "sha512-lyMQvq5afjOh0nRqF0OBjgsLfsgUeLcFc95oj0FJ/NJ/MvtI6Gd5BxxbmYzuVfZ4f0Dm1pvtBu1swoB3451tkg==", "requires": { "@types/react": "*", "@visx/curve": "2.1.0", "@visx/group": "2.10.0", "@visx/point": "2.6.0", "@visx/scale": "2.2.2", - "@visx/shape": "2.10.0", + "@visx/shape": "2.12.2", "classnames": "^2.3.1", "prop-types": "^15.6.2" } @@ -5048,6 +5390,32 @@ "resolved": "https://registry.npmjs.org/@visx/point/-/point-2.6.0.tgz", "integrity": "sha512-amBi7yMz4S2VSchlPdliznN41TuES64506ySI22DeKQ+mc1s1+BudlpnY90sM1EIw4xnqbKmrghTTGfy6SVqvQ==" }, + "@visx/react-spring": { + "version": "2.12.2", + "resolved": "https://registry.npmjs.org/@visx/react-spring/-/react-spring-2.12.2.tgz", + "integrity": "sha512-+Oo9S75lSbpF6VV3Ym8kB/I4H7O3qYk5Nltv2CNUoVuWvzd4tRnxiVLBxYuGjtj6lIAhDJ+W8QYHXhZhe0zNHw==", + "requires": { + "@types/react": "*", + "@visx/axis": "2.12.2", + "@visx/grid": "2.12.2", + "@visx/scale": "2.2.2", + "@visx/text": "2.12.2", + "classnames": "^2.3.1", + "prop-types": "^15.6.2" + } + }, + "@visx/responsive": { + "version": "2.10.0", + "resolved": "https://registry.npmjs.org/@visx/responsive/-/responsive-2.10.0.tgz", + "integrity": "sha512-NssDPpuUYp7hqVISuYkKZ5zk6ob0++RdTIaUjRcUdyFEbvzb9+zIb8QToOkvI90L2EC/MY4Jx0NpDbEe79GpAw==", + "requires": { + "@juggle/resize-observer": "^3.3.1", + "@types/lodash": "^4.14.172", + "@types/react": "*", + "lodash": "^4.17.21", + "prop-types": "^15.6.1" + } + }, "@visx/scale": { "version": "2.2.2", "resolved": "https://registry.npmjs.org/@visx/scale/-/scale-2.2.2.tgz", @@ -5062,9 +5430,9 @@ } }, "@visx/shape": { - "version": "2.10.0", - "resolved": "https://registry.npmjs.org/@visx/shape/-/shape-2.10.0.tgz", - "integrity": "sha512-aRQBfclEWEPDmQmnB+BGN9Issg7u9lLrZ5LUSI3gfR9WAAHoNldxjpHRcYx8Y16A3YlCFVgWIBBL7pH0XUYcCA==", + "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", @@ -5081,9 +5449,9 @@ } }, "@visx/text": { - "version": "2.10.0", - "resolved": "https://registry.npmjs.org/@visx/text/-/text-2.10.0.tgz", - "integrity": "sha512-Wbt0Mq130akOahaby2Ziwkr62LuK6td9RcIWI9o4xsLE7GCIkxeUiVci0YUo2yewgwOLwR9F1guPuHPqYd+eYg==", + "version": "2.12.2", + "resolved": "https://registry.npmjs.org/@visx/text/-/text-2.12.2.tgz", + "integrity": "sha512-Sv9YEolggfv2Nf6+l28ESG3VXVR1+s4u/Cz17QpgOxygcbOM8LfLtriWtBsBMKdMbYKeUpoUro0clx55TUwzew==", "requires": { "@types/lodash": "^4.14.172", "@types/react": "*", @@ -5105,6 +5473,18 @@ "react-use-measure": "^2.0.4" } }, + "@visx/voronoi": { + "version": "2.10.0", + "resolved": "https://registry.npmjs.org/@visx/voronoi/-/voronoi-2.10.0.tgz", + "integrity": "sha512-2GSosmQ25a9OctY4xPpPTwY6N4CW53Ssos8kzPHTo5Si/2h9AUNqVg7eGUb8lrEjakQYAAdX0J4U8D02tsQI+w==", + "requires": { + "@types/d3-voronoi": "^1.1.9", + "@types/react": "*", + "classnames": "^2.3.1", + "d3-voronoi": "^1.1.2", + "prop-types": "^15.6.1" + } + }, "@visx/wordcloud": { "version": "2.10.0", "resolved": "https://registry.npmjs.org/@visx/wordcloud/-/wordcloud-2.10.0.tgz", @@ -5115,6 +5495,44 @@ "d3-cloud": "^1.2.5" } }, + "@visx/xychart": { + "version": "2.12.2", + "resolved": "https://registry.npmjs.org/@visx/xychart/-/xychart-2.12.2.tgz", + "integrity": "sha512-Bg/7gZjWcctFhdd42c5DOAmo25qxWUbQTbSzkCW/D97v/531svnPyMqKCe5mMuxDQzAAx7KX06rWPn/Cih+RWA==", + "requires": { + "@types/lodash": "^4.14.172", + "@types/react": "*", + "@visx/annotation": "2.12.2", + "@visx/axis": "2.12.2", + "@visx/event": "2.6.0", + "@visx/glyph": "2.10.0", + "@visx/grid": "2.12.2", + "@visx/react-spring": "2.12.2", + "@visx/responsive": "2.10.0", + "@visx/scale": "2.2.2", + "@visx/shape": "2.12.2", + "@visx/text": "2.12.2", + "@visx/tooltip": "2.10.0", + "@visx/voronoi": "2.10.0", + "classnames": "^2.3.1", + "d3-array": "^2.6.0", + "d3-interpolate-path": "2.2.1", + "d3-shape": "^2.0.0", + "lodash": "^4.17.21", + "mitt": "^2.1.0", + "prop-types": "^15.6.2" + }, + "dependencies": { + "d3-shape": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-2.1.0.tgz", + "integrity": "sha512-PnjUqfM2PpskbSLTJvAzp2Wv4CZsnAgTfcVRTwW03QR3MkXF8Uo7B1y/lWkAsmbKwuecto++4NlsYcvYpXpTHA==", + "requires": { + "d3-path": "1 - 2" + } + } + } + }, "acorn": { "version": "8.7.1", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.1.tgz", @@ -5438,6 +5856,11 @@ "d3-color": "1" } }, + "d3-interpolate-path": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/d3-interpolate-path/-/d3-interpolate-path-2.2.1.tgz", + "integrity": "sha512-6qLLh/KJVzls0XtMsMpcxhqMhgVEN7VIbR/6YGZe2qlS8KDgyyVB20XcmGnDyB051HcefQXM/Tppa9vcANEA4Q==" + }, "d3-path": { "version": "1.0.9", "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz", @@ -5479,6 +5902,11 @@ "d3-time": "1 - 2" } }, + "d3-voronoi": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/d3-voronoi/-/d3-voronoi-1.1.4.tgz", + "integrity": "sha512-dArJ32hchFsrQ8uMiTBLq256MpnZjeuBtdHpaDlYuQyjU0CVzCJl/BVW+SkszaAeH95D/8gxqAhgx0ouAWAfRg==" + }, "damerau-levenshtein": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz", @@ -6535,6 +6963,11 @@ "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==", "dev": true }, + "mitt": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/mitt/-/mitt-2.1.0.tgz", + "integrity": "sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg==" + }, "ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", diff --git a/package.json b/package.json index 814c0d7..56f3e1a 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "@visx/text": "^2.10.0", "@visx/tooltip": "^2.10.0", "@visx/wordcloud": "^2.10.0", + "@visx/xychart": "^2.12.2", "next": "12.1.6", "react": "18.1.0", "react-dom": "18.1.0" diff --git a/pages/playground.tsx b/pages/playground.tsx index 96e240d..0d255cf 100644 --- a/pages/playground.tsx +++ b/pages/playground.tsx @@ -1,5 +1,9 @@ import { BarGraphHorizontal, BarGraphVertical } from "components/BarGraph"; -import { mockCategoricalData, moreMockCategoricalData } from "data/mocks"; +import { + mockCategoricalData, + moreMockCategoricalData, + mockLineGraphlData, +} from "data/mocks"; import React from "react"; import { ColorPalette } from "../components/ColorPalette"; @@ -57,6 +61,20 @@ export default function Home() { value: word.value, }))} /> +

+ {""} +

+ ); }