fix asyn

.vscode/settings.json

@@ -2,6 +2,7 @@
   "typescript.tsdk": "node_modules/typescript/lib",
   "eslint.format.enable": true,
   "eslint.codeActionsOnSave.mode": "all",
+  "css.format.spaceAroundSelectorSeparator": true,
   "[css]": {
     "editor.suggest.insertMode": "replace",
     "gitlens.codeLens.scopes": ["document"],

components/LineGraph.module.css

@@ -0,0 +1,34 @@
+.lineBackground {
+  fill: var(--card-background);
+}
+
+.line {
+  fill: var(--primary-accent-light);
+}
+
+.lineText {
+  visibility: hidden;
+  font-family: "Inconsolata", monospace;
+  font-weight: 800;
+  fill: var(--label);
+}
+
+.lineGroup:hover .line {
+  fill: var(--primary-accent);
+  filter: drop-shadow(0 0 calc(4rem / 16) var(--primary-accent));
+}
+
+.lineGroup:hover .lineText {
+  visibility: visible;
+}
+
+/* .tickLabel {
+  font-family: "Inconsolata", monospace;
+  font-weight: 800;
+  fill: var(--label);
+}
+.axisLabel {
+  font-family: "Inconsolata", monospace;
+  font-weight: 800;
+  fill: var(--label);
+} */

components/LineGraph.tsx

@@ -11,6 +11,8 @@ import {
 } from "@visx/xychart";
 import React from "react";
 
+import styles from "./LineGraph.module.css";
+
 interface LineGraphData {
   x: string;
   y: number;

data/mocks.ts

@@ -3,38 +3,66 @@
  */
 export const mockCategoricalData = [
   {
-    key: "Roboto",
+    category: "Roboto",
     value: 88,
   },
   {
-    key: "Open Sans",
+    category: "Open Sans",
     value: 16,
   },
   {
-    key: "Lato",
+    category: "Lato",
     value: 14,
   },
   {
-    key: "Montserrat",
+    category: "Montserrat",
     value: 73,
   },
   {
-    key: "Oswald",
+    category: "Oswald",
     value: 14,
   },
   {
-    key: "Source Sans Pro",
+    category: "Source Sans Pro",
     value: 8,
   },
   {
-    key: "Slabo 27px",
+    category: "Slabo 27px",
     value: 41,
   },
   {
-    key: "Raleway",
+    category: "Raleway",
     value: 29,
   },
 ];
+export const moreMockCategoricalData = [
+  { key: "Python", value: 29.53 },
+  { key: "Java", value: 17.06 },
+  { key: "JavaScript", value: 8.56 },
+  { key: "C", value: 6.49 },
+  { key: "Assembly", value: 6.31 },
+  { key: "R", value: 5.83 },
+  { key: "Objective C", value: 4.43 },
+  { key: "Swift", value: 3.89 },
+  { key: "PHP", value: 3.85 },
+  { key: "Rust", value: 3.33 },
+  { key: "Ruby", value: 3.25 },
+  { key: "Matlab", value: 3.06 },
+  { key: "TypeScript", value: 3.98 },
+  { key: "Go", value: 3.85 },
+  { key: "Haskell", value: 3.28 },
+  { key: "VBA", value: 3.11 },
+  { key: "Scala", value: 2.79 },
+  { key: "Lua", value: 2.79 },
+  { key: "Julia", value: 2.77 },
+  { key: "Kotlin", value: 2.7 },
+  { key: "Perl", value: 2.41 },
+  { key: "Groovy", value: 2.4 },
+  { key: "Abap", value: 2.24 },
+  { key: "Cobol", value: 2.23 },
+  { key: "Ada", value: 2.21 },
+  { key: "Dart", value: 2.21 },
+];
 
 export const mockLineGraphlData = [
   {

package.json

@@ -16,18 +16,19 @@
   },
   "dependencies": {
     "@visx/axis": "^2.10.0",
+    "@visx/event": "^2.6.0",
     "@visx/grid": "^2.10.0",
-    "@visx/mock-data": "^2.1.2",
+    "@visx/group": "^2.10.0",
+    "@visx/scale": "^2.2.2",
     "@visx/shape": "^2.10.0",
-    "@visx/threshold": "^2.10.0",
-    "@visx/xychart": "^2.11.1",
-    "d3-array": "^3.1.6",
+    "@visx/tooltip": "^2.10.0",
+    "@visx/wordcloud": "^2.10.0",
+    "@visx/text": "^2.10.0",
     "next": "12.1.6",
     "react": "18.1.0",
     "react-dom": "18.1.0"
   },
   "devDependencies": {
-    "@types/d3-array": "^3.0.3",
     "@types/node": "17.0.38",
     "@types/react": "18.0.10",
     "@types/react-dom": "18.0.5",

pages/playground.tsx

@@ -1,13 +1,62 @@
-import { mockLineGraphlData } from "data/mocks";
+import { BarGraphHorizontal, BarGraphVertical } from "components/BarGraph";
+import { mockCategoricalData, moreMockCategoricalData } from "data/mocks";
 import React from "react";
 
-import LineGraph from "@/components/LineGraph";
+import { ColorPalette } from "../components/ColorPalette";
+import { LineGraph } from "../components/LineGraph";
+import { WordCloud } from "../components/WordCloud";
+
+import styles from "./playground.module.css";
 
 export default function Home() {
   return (
-    <>
+    <div className={styles.page}>
       <h1>Playground</h1>
       <p>Show off your components here!</p>
+      <ColorPalette />
+      <h2>
+        <code>{"<BarGraphHorizontal />"}</code>
+      </h2>
+      <BarGraphHorizontal
+        className={styles.barGraphDemo}
+        data={mockCategoricalData}
+        width={800}
+        height={500}
+        margin={{
+          top: 20,
+          bottom: 40,
+          left: 150,
+          right: 20,
+        }}
+      />
+      <h2>
+        <code>{"<BarGraphVertical />"}</code>
+      </h2>
+      <p>
+        <code>{"<BarGraphVertical />"}</code> takes the same props as{" "}
+        <code>{"<BarGraphHorizontal />"}</code>.
+      </p>
+      <BarGraphVertical
+        className={styles.barGraphDemo}
+        data={mockCategoricalData}
+        width={800}
+        height={500}
+        margin={{
+          top: 20,
+          bottom: 80,
+          left: 60,
+          right: 20,
+        }}
+      />
+      <h2>
+        <code>{"<WordCloud />"}</code>
+      </h2>
+      <WordCloud
+        data={moreMockCategoricalData.map((word) => ({
+          text: word.key,
+          value: word.value,
+        }))}
+      />
       <h2>
         <code>{"<LineGraph />"}</code>
       </h2>
@@ -23,6 +72,6 @@ export default function Home() {
           right: 20,
         }}
       />
-    </>
+    </div>
   );
 }