Initial commit

makp0 · Jul 19, 2023 · 9266ee7 · 9266ee7
1 parent 699adc6
commit 9266ee7
Show file tree

Hide file tree

Showing 9 changed files with 454 additions and 0 deletions.
diff --git a/.codesandbox/workspace.json b/.codesandbox/workspace.json
@@ -0,0 +1,20 @@
+{
+  "responsive-preview": {
+    "Mobile": [
+      320,
+      675
+    ],
+    "Tablet": [
+      1024,
+      765
+    ],
+    "Desktop": [
+      1400,
+      800
+    ],
+    "Desktop  HD": [
+      1920,
+      1080
+    ]
+  }
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/package.json b/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "@visx/demo-brush",
+  "description": "Standalone visx brush demo.",
+  "main": "index.tsx",
+  "private": true,
+  "dependencies": {
+    "@babel/runtime": "^7.8.4",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "@visx/axis": "latest",
+    "@visx/brush": "latest",
+    "@visx/curve": "latest",
+    "@visx/gradient": "latest",
+    "@visx/group": "latest",
+    "@visx/mock-data": "latest",
+    "@visx/pattern": "latest",
+    "@visx/responsive": "latest",
+    "@visx/scale": "latest",
+    "@visx/shape": "latest",
+    "@visx/vendor": "latest",
+    "react": "^18",
+    "react-dom": "^18",
+    "react-scripts-ts": "3.1.0",
+    "typescript": "^3"
+  },
+  "keywords": ["visualization", "d3", "react", "visx", "brush", "interaction"]
+}
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<meta name="theme-color" content="#000000">
+	<!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+	<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+	<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+	<!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+	<title>React App</title>
+</head>
+
+<body>
+	<noscript>
+		You need to enable JavaScript to run this app.
+	</noscript>
+	<div id="root"></div>
+	<!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+</body>
+
+</html>
diff --git a/src/AreaChart.tsx b/src/AreaChart.tsx
@@ -0,0 +1,99 @@
+import React from 'react';
+import { Group } from '@visx/group';
+import { AreaClosed } from '@visx/shape';
+import { AxisLeft, AxisBottom, AxisScale } from '@visx/axis';
+import { LinearGradient } from '@visx/gradient';
+import { curveMonotoneX } from '@visx/curve';
+import { AppleStock } from '@visx/mock-data/lib/mocks/appleStock';
+
+// Initialize some variables
+const axisColor = '#fff';
+const axisBottomTickLabelProps = {
+  textAnchor: 'middle' as const,
+  fontFamily: 'Arial',
+  fontSize: 10,
+  fill: axisColor,
+};
+const axisLeftTickLabelProps = {
+  dx: '-0.25em',
+  dy: '0.25em',
+  fontFamily: 'Arial',
+  fontSize: 10,
+  textAnchor: 'end' as const,
+  fill: axisColor,
+};
+
+// accessors
+const getDate = (d: AppleStock) => new Date(d.date);
+const getStockValue = (d: AppleStock) => d.close;
+
+export default function AreaChart({
+  data,
+  gradientColor,
+  width,
+  yMax,
+  margin,
+  xScale,
+  yScale,
+  hideBottomAxis = false,
+  hideLeftAxis = false,
+  top,
+  left,
+  children,
+}: {
+  data: AppleStock[];
+  gradientColor: string;
+  xScale: AxisScale<number>;
+  yScale: AxisScale<number>;
+  width: number;
+  yMax: number;
+  margin: { top: number; right: number; bottom: number; left: number };
+  hideBottomAxis?: boolean;
+  hideLeftAxis?: boolean;
+  top?: number;
+  left?: number;
+  children?: React.ReactNode;
+}) {
+  if (width < 10) return null;
+  return (
+    <Group left={left || margin.left} top={top || margin.top}>
+      <LinearGradient
+        id="gradient"
+        from={gradientColor}
+        fromOpacity={1}
+        to={gradientColor}
+        toOpacity={0.2}
+      />
+      <AreaClosed<AppleStock>
+        data={data}
+        x={(d) => xScale(getDate(d)) || 0}
+        y={(d) => yScale(getStockValue(d)) || 0}
+        yScale={yScale}
+        strokeWidth={1}
+        stroke="url(#gradient)"
+        fill="url(#gradient)"
+        curve={curveMonotoneX}
+      />
+      {!hideBottomAxis && (
+        <AxisBottom
+          top={yMax}
+          scale={xScale}
+          numTicks={width > 520 ? 10 : 5}
+          stroke={axisColor}
+          tickStroke={axisColor}
+          tickLabelProps={axisBottomTickLabelProps}
+        />
+      )}
+      {!hideLeftAxis && (
+        <AxisLeft
+          scale={yScale}
+          numTicks={5}
+          stroke={axisColor}
+          tickStroke={axisColor}
+          tickLabelProps={axisLeftTickLabelProps}
+        />
+      )}
+      {children}
+    </Group>
+  );
+}