WIP: Line Graph Component #21
|
|
@ -33,4 +33,4 @@
|
|||
font-family: "Inconsolata", monospace;
|
||||
font-weight: 800;
|
||||
fill: var(--label);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
.lineSeries {
|
||||
stroke-width: 4;
|
||||
}
|
||||
|
||||
.lineSeries hover {
|
||||
filter: drop-shadow(0 0 calc(4rem / 16) var(--primary-accent));
|
||||
}
|
||||
|
||||
.axisLabel {
|
||||
font-family: "Inconsolata", monospace;
|
||||
font-weight: 800;
|
||||
fill: var(--label);
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
text-align: center;
|
||||
font-family: "Inconsolata", monospace;
|
||||
font-weight: bold;
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
background-color: var(--label);
|
||||
color: var(--primary-background);
|
||||
box-shadow: 0px calc(1rem / 16) calc(2rem / 16) var(--card-background);
|
||||
pointer-events: none;
|
||||
padding: calc(10rem / 16);
|
||||
font-size: calc(18rem / 16);
|
||||
border-radius: calc(10rem / 16);
|
||||
}
|
||||
|
|
@ -0,0 +1,115 @@
|
|||
import {
|
||||
Axis,
|
||||
Grid,
|
||||
buildChartTheme,
|
||||
LineSeries,
|
||||
Tooltip,
|
||||
XYChart,
|
||||
} from "@visx/xychart";
|
||||
import React from "react";
|
||||
import { Color } from "utils/Color";
|
||||
|
||||
import styles from "./LineGraph.module.css";
|
||||
|
||||
interface LineGraphData {
|
||||
x: string;
|
||||
y: number;
|
||||
|
|
||||
}
|
||||
|
||||
interface LineGraphProps {
|
||||
data: LineGraphData[][];
|
||||
width: number;
|
||||
height: number;
|
||||
margin: {
|
||||
top: number;
|
||||
bottom: number;
|
||||
left: number;
|
||||
right: number;
|
||||
};
|
||||
xLabelSize?: number;
|
||||
yLabelSize?: number;
|
||||
}
|
||||
|
||||
const DEFAULT_LABEL_SIZE = 16;
|
||||
|
||||
const lineKey = ["Java", "C++"];
|
||||
a258wang
commented
This probably shouldn't be hard coded in the final component 😛 This probably shouldn't be hard coded in the final component 😛
|
||||
|
||||
export const LineGraph = ({
|
||||
data,
|
||||
width,
|
||||
height,
|
||||
margin,
|
||||
xLabelSize = DEFAULT_LABEL_SIZE,
|
||||
yLabelSize = DEFAULT_LABEL_SIZE,
|
||||
}: LineGraphProps) => {
|
||||
const customTheme = buildChartTheme({
|
||||
|
a258wang
commented
Is it possible to cast this to a type (maybe visx has a type we can import?) to get rid of the unsafe assignment complaints? Is it possible to cast this to a type (maybe visx has a type we can import?) to get rid of the unsafe assignment complaints?
|
||||
// colors
|
||||
backgroundColor: Color.secondaryBackground, // used by Tooltip, Annotation
|
||||
colors: [Color.primaryAccent, Color.secondaryAccent], // categorical colors, mapped to series via `dataKey`s
|
||||
|
||||
tickLength: 5,
|
||||
|
||||
// grid
|
||||
gridColor: Color.tertiaryBackground,
|
||||
gridColorDark: Color.tertiaryBackground, // used for axis baseline if x/yxAxisLineStyles not set
|
||||
gridStyles: { strokeWidth: 4 },
|
||||
});
|
||||
|
||||
// accessors
|
||||
const xAccessor = (d: LineGraphData) => d.x;
|
||||
const yAccessor = (d: LineGraphData) => d.y;
|
||||
|
||||
return (
|
||||
<XYChart
|
||||
height={height}
|
||||
width={width}
|
||||
theme={customTheme}
|
||||
margin={margin}
|
||||
xScale={{ type: "band" }}
|
||||
yScale={{ type: "linear" }}
|
||||
>
|
||||
<Axis
|
||||
orientation="bottom"
|
||||
hideAxisLine
|
||||
hideTicks
|
||||
tickLabelProps={() => {
|
||||
return {
|
||||
dy: "0.25rem",
|
||||
fontSize: `${xLabelSize / 16}rem`,
|
||||
className: styles.axisLabel,
|
||||
};
|
||||
}}
|
||||
/>
|
||||
<Axis
|
||||
orientation="left"
|
||||
hideAxisLine
|
||||
hideTicks
|
||||
numTicks={4}
|
||||
tickLabelProps={() => {
|
||||
return {
|
||||
dy: "0.25rem",
|
||||
className: styles.axisLabel,
|
||||
fontSize: `${yLabelSize / 16}rem`,
|
||||
};
|
||||
}}
|
||||
/>
|
||||
<Grid
|
||||
numTicks={data[0].length}
|
||||
stroke={Color.label}
|
||||
strokeWidth={4}
|
||||
strokeDasharray="10"
|
||||
/>
|
||||
{data.map((d, i) => (
|
||||
<LineSeries
|
||||
enableEvents
|
||||
className={styles.lineSeries} // Why doesn't work???
|
||||
dataKey={lineKey[i]}
|
||||
key={i}
|
||||
data={d}
|
||||
xAccessor={xAccessor}
|
||||
yAccessor={yAccessor}
|
||||
/>
|
||||
))}
|
||||
</XYChart>
|
||||
);
|
||||
};
|
||||
|
|
@ -35,7 +35,6 @@ export const mockCategoricalData = [
|
|||
value: 29,
|
||||
},
|
||||
];
|
||||
|
||||
export const moreMockCategoricalData = [
|
||||
{ key: "Python", value: 29.53 },
|
||||
{ key: "Java", value: 17.06 },
|
||||
|
|
@ -64,3 +63,58 @@ export const moreMockCategoricalData = [
|
|||
{ key: "Ada", value: 2.21 },
|
||||
{ key: "Dart", value: 2.21 },
|
||||
];
|
||||
|
||||
export const mockLineGraphlData = [
|
||||
[
|
||||
{
|
||||
x: "1A",
|
||||
y: 30,
|
||||
},
|
||||
{
|
||||
x: "1B",
|
||||
y: 84,
|
||||
},
|
||||
{
|
||||
x: "2A",
|
||||
y: 93,
|
||||
},
|
||||
{
|
||||
x: "2B",
|
||||
y: 70,
|
||||
},
|
||||
{
|
||||
x: "3A",
|
||||
y: 100,
|
||||
},
|
||||
{
|
||||
x: "3B",
|
||||
y: 80,
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
x: "1A",
|
||||
y: 10,
|
||||
},
|
||||
{
|
||||
x: "1B",
|
||||
y: 64,
|
||||
},
|
||||
{
|
||||
x: "2A",
|
||||
y: 85,
|
||||
},
|
||||
{
|
||||
x: "2B",
|
||||
y: 90,
|
||||
},
|
||||
{
|
||||
x: "3A",
|
||||
y: 65,
|
||||
},
|
||||
{
|
||||
x: "3B",
|
||||
y: 77,
|
||||
},
|
||||
],
|
||||
];
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -21,9 +21,10 @@
|
|||
"@visx/group": "^2.10.0",
|
||||
"@visx/scale": "^2.2.2",
|
||||
"@visx/shape": "^2.10.0",
|
||||
"@visx/text": "^2.10.0",
|
||||
"@visx/tooltip": "^2.10.0",
|
||||
"@visx/wordcloud": "^2.10.0",
|
||||
"@visx/text": "^2.10.0",
|
||||
"@visx/xychart": "^2.12.2",
|
||||
"next": "12.1.6",
|
||||
"react": "18.1.0",
|
||||
"react-dom": "18.1.0"
|
||||
|
|
|
|||
|
|
@ -1,8 +1,13 @@
|
|||
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";
|
||||
import { LineGraph } from "../components/LineGraph";
|
||||
import { WordCloud } from "../components/WordCloud";
|
||||
|
||||
import styles from "./playground.module.css";
|
||||
|
|
@ -13,7 +18,6 @@ export default function Home() {
|
|||
<h1>Playground</h1>
|
||||
<p>Show off your components here!</p>
|
||||
<ColorPalette />
|
||||
|
||||
<h2>
|
||||
<code>{"<BarGraphHorizontal />"}</code>
|
||||
</h2>
|
||||
|
|
@ -29,7 +33,6 @@ export default function Home() {
|
|||
right: 20,
|
||||
}}
|
||||
/>
|
||||
|
||||
<h2>
|
||||
<code>{"<BarGraphVertical />"}</code>
|
||||
</h2>
|
||||
|
|
@ -49,7 +52,6 @@ export default function Home() {
|
|||
right: 20,
|
||||
}}
|
||||
/>
|
||||
|
||||
<h2>
|
||||
<code>{"<WordCloud />"}</code>
|
||||
</h2>
|
||||
|
|
@ -59,6 +61,20 @@ export default function Home() {
|
|||
value: word.value,
|
||||
}))}
|
||||
/>
|
||||
<h2>
|
||||
<code>{"<LineGraph />"}</code>
|
||||
</h2>
|
||||
<LineGraph
|
||||
data={mockLineGraphlData}
|
||||
width={800}
|
||||
height={500}
|
||||
margin={{
|
||||
top: 20,
|
||||
bottom: 80,
|
||||
left: 60,
|
||||
right: 20,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Two nits here:
lineKeyas part of thedataprop passed into the component?My idea would be to make the
LineGraphDatainterface an object that holds more information, and then adjust thexAccessorandyAccessorfunctions to accomodate: