cs-2022-class-profile/pages/playground.tsx

import { mockPieData } from "data/mocks";
import { BarGraphHorizontal, BarGraphVertical } from "components/BarGraph";
import { mockCategoricalData } from "data/mocks";
import React from "react";

import { PieChart } from "@/components/PieChart";

import { ColorPalette } from "../components/ColorPalette";

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>
      <div style={{ padding: "30px" }}>
        <PieChart data={mockPieData} width={800} labelWidth={215} />
      </div>
      <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,
        }}
      />
    </div>
  );
}