feat: new chart page

fluid-design-io · Oct 20, 2023 · d5e7d0f · d5e7d0f
1 parent e6fa7d6
commit d5e7d0f
Showing 1 changed file with 101 additions and 17 deletions.
diff --git a/apps/web/app/visualizer/chart/page.tsx b/apps/web/app/visualizer/chart/page.tsx
@@ -1,6 +1,7 @@
 "use client";
 
-import React, { PureComponent } from "react";
+import { Pi } from "lucide-react";
+import React, { PureComponent, useEffect, useState } from "react";
 import {
   AreaChart,
   Area,
@@ -9,8 +10,11 @@ import {
   CartesianGrid,
   Tooltip,
   ResponsiveContainer,
+  PieChart,
+  Pie,
+  Cell,
 } from "recharts";
-
+import { ScrollArea, ScrollBar } from "ui/components/ui/scroll-area";
 import { cn } from "ui/lib/utils";
 
 const data = [
@@ -57,20 +61,11 @@ const data = [
     amt: 2100,
   },
 ];
+
 const OverView = () => {
   return (
     <ResponsiveContainer width="100%" height={350}>
-      <AreaChart
-        width={500}
-        height={400}
-        data={data}
-        margin={{
-          top: 10,
-          right: 30,
-          left: 0,
-          bottom: 0,
-        }}
-      >
+      <AreaChart width={350} height={350} data={data}>
         <CartesianGrid strokeDasharray="3 3" />
         <XAxis dataKey="name" className="stroke-border/30 text-xs" />
         <YAxis className="stroke-border/30 text-xs" />
@@ -121,15 +116,104 @@ const OverView = () => {
   );
 };
 
+const BreakDown = ({ title, unit, factor, seed }) => {
+  const r = () => Math.random() * 90 * factor + 10;
+  const [pieData, setPieData] = useState([
+    { name: "Group A", value: 0 },
+    { name: "Group B", value: 0 },
+    { name: "Group C", value: 0 },
+  ]);
+  const FILLS = [
+    [
+      "hsl(var(--primary-400))",
+      "hsl(var(--primary-600))",
+      "hsl(var(--primary-800))",
+    ],
+    [
+      "hsl(var(--secondary-400))",
+      "hsl(var(--secondary-600))",
+      "hsl(var(--secondary-800))",
+    ],
+    [
+      "hsl(var(--accent-400))",
+      "hsl(var(--accent-600))",
+      "hsl(var(--accent-800))",
+    ],
+  ];
+  const STOKES = [
+    "hsl(var(--primary)/0.5)",
+    "hsl(var(--secondary)/0.5)",
+    "hsl(var(--acceny)/0.5)",
+  ];
+  const total = Math.round(pieData.reduce((acc, cur) => acc + cur.value, 0));
+  useEffect(() => {
+    setPieData([
+      { name: "Group A", value: r() },
+      { name: "Group B", value: r() },
+      { name: "Group C", value: r() },
+    ]);
+  }, []);
+  return (
+    <div className="relative h-full w-full">
+      <ResponsiveContainer width="100%" height={280}>
+        <PieChart className="w-[200px] md:w-[280px]" height={280}>
+          <Pie
+            data={pieData}
+            cx="50%"
+            cy={140}
+            innerRadius={90}
+            outerRadius={125}
+            paddingAngle={5}
+            dataKey="value"
+          >
+            {data.map((entry, index) => (
+              <Cell
+                key={`cell-${index}`}
+                className="[&_*]:transition-colors"
+                fill={FILLS[seed][index % FILLS.length]}
+                stroke={STOKES[seed]}
+              />
+            ))}
+          </Pie>
+        </PieChart>
+      </ResponsiveContainer>
+      <div className="absolute inset-0 flex translate-y-2 items-center justify-center">
+        <div className="flex flex-col items-center justify-center space-y-2">
+          <h2 className="text-2xl font-semibold leading-none tracking-tight">
+            {total} {unit}
+          </h2>
+          <p className="text-sm text-muted-foreground">{title}</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
 export default function VisChart() {
+  const cardStyle =
+    "w-full flex flex-col items-center space-y-2 rounded-lg border border-border/50 p-4 transition-all hover:border-border hover:bg-muted/30 hover:shadow";
   return (
-    <div className="mx-auto flex w-full max-w-7xl flex-1 flex-col items-center justify-center px-4 sm:px-6 lg:px-8">
-      <div className="flex flex-col items-center space-y-2 rounded-lg border border-border/50 p-4 transition-all hover:border-border hover:bg-muted/30 hover:shadow">
-        <div className="flex flex-col space-y-1.5 p-6">
+    <div className="mx-auto flex w-full max-w-7xl flex-1 flex-col items-center justify-stretch space-y-4 px-4 py-8 sm:px-6 md:space-y-8 lg:px-8">
+      <ScrollArea className="w-full">
+        <div className="flex min-w-[60rem]">
+          <div className={cn(cardStyle, "mr-4 md:mr-8")}>
+            <BreakDown title="USA" unit="kg" factor={10} seed={0} />
+          </div>
+          <div className={cn(cardStyle, "mr-4 md:mr-8")}>
+            <BreakDown title="China" unit="kg" factor={5} seed={1} />
+          </div>
+          <div className={cn(cardStyle)}>
+            <BreakDown title="India" unit="kg" factor={2} seed={2} />
+          </div>
+        </div>
+        <ScrollBar className="invisible md:visible" orientation="horizontal" />
+      </ScrollArea>
+      <div className={cardStyle}>
+        <div className="flex w-full flex-col items-start justify-start space-y-1.5 p-6">
           <h2 className="text-2xl font-semibold leading-none tracking-tight">
             Emission Overview
           </h2>
-          <p className="text-sm text-muted-foreground">
+          <p className="w-11/12 max-w-md text-sm text-muted-foreground sm:w-4/5">
             Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
             voluptate, quia, quos, natus voluptates quod quas quibusdam
             exercitationem voluptatum autem quae.