2022-07-27 19:46:08 -04:00
|
|
|
import { BarGraphHorizontal, BarGraphVertical } from "components/BarGraph";
|
2022-08-04 02:17:19 -04:00
|
|
|
import { mockCategoricalData, moreMockCategoricalData } from "data/mocks";
|
2022-06-03 01:31:07 -04:00
|
|
|
import React from "react";
|
|
|
|
|
2022-08-08 23:15:38 -04:00
|
|
|
import SideComponentWrapper from "@/components/SideComponentWrapper";
|
|
|
|
|
2022-07-01 14:30:57 -04:00
|
|
|
import { ColorPalette } from "../components/ColorPalette";
|
2022-08-04 02:17:19 -04:00
|
|
|
import { WordCloud } from "../components/WordCloud";
|
2022-07-01 14:30:57 -04:00
|
|
|
|
2022-07-27 19:46:08 -04:00
|
|
|
import styles from "./playground.module.css";
|
|
|
|
|
2022-06-03 01:31:07 -04:00
|
|
|
export default function Home() {
|
|
|
|
return (
|
2022-07-27 19:46:08 -04:00
|
|
|
<div className={styles.page}>
|
2022-06-03 01:31:07 -04:00
|
|
|
<h1>Playground</h1>
|
|
|
|
<p>Show off your components here!</p>
|
2022-07-01 14:30:57 -04:00
|
|
|
<ColorPalette />
|
2022-07-27 19:46:08 -04:00
|
|
|
|
|
|
|
<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,
|
|
|
|
}}
|
|
|
|
/>
|
2022-08-04 02:17:19 -04:00
|
|
|
|
|
|
|
<h2>
|
|
|
|
<code>{"<WordCloud />"}</code>
|
|
|
|
</h2>
|
|
|
|
<WordCloud
|
|
|
|
data={moreMockCategoricalData.map((word) => ({
|
|
|
|
text: word.key,
|
|
|
|
value: word.value,
|
|
|
|
}))}
|
|
|
|
/>
|
2022-07-27 19:46:08 -04:00
|
|
|
</div>
|
2022-06-03 01:31:07 -04:00
|
|
|
);
|
|
|
|
}
|