83:I[903690,["/chat-static/_next/static/immutable/chunks/3im61c5a8fkcz.js","/chat-static/_next/static/immutable/chunks/1guyin7zoczci.js","/chat-static/_next/static/immutable/chunks/39rg-vyko_oef.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/157bok9l8ft2k.js","/chat-static/_next/static/immutable/chunks/0wi_45vocl_-p.js","/chat-static/_next/static/immutable/chunks/3xk_70lpaq4rr.js","/chat-static/_next/static/immutable/chunks/0mwr0fog443j2.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/3qqefvmwew4y9.js","/chat-static/_next/static/immutable/chunks/31bw9_yzlia2t.js","/chat-static/_next/static/immutable/chunks/0s_cw7e8300g7.js","/chat-static/_next/static/immutable/chunks/2obw3omjz3a42.js","/chat-static/_next/static/immutable/chunks/2cytw68p34q_e.js","/chat-static/_next/static/immutable/chunks/1znnlzfkj81j9.js","/chat-static/_next/static/immutable/chunks/3263tgpkly9nu.js","/chat-static/_next/static/immutable/chunks/0wnsukyi4k1ek.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/31kxnp_byhi43.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/13kz2gfvgolzm.js","/chat-static/_next/static/immutable/chunks/3d5spne6o359m.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/2w2x4bf9lm3-y.js","/chat-static/_next/static/immutable/chunks/2uh_-aagfm1yq.js","/chat-static/_next/static/immutable/chunks/1m_firo4_gtz9.js","/chat-static/_next/static/immutable/chunks/3_3lqfmfv126f.js","/chat-static/_next/static/immutable/chunks/3wbu0v06tpqrr.js","/chat-static/_next/static/immutable/chunks/0m1kq5rn-0ww-.js","/chat-static/_next/static/immutable/chunks/3b31dkoetf3d7.js","/chat-static/_next/static/immutable/chunks/1vx8uudj0cz_4.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/1wyzgwbq801w-.js","/chat-static/_next/static/immutable/chunks/2bge0xx016en5.js","/chat-static/_next/static/immutable/chunks/1tftl9086q6dm.js","/chat-static/_next/static/immutable/chunks/08-__6bbjjmqq.js","/chat-static/_next/static/immutable/chunks/1zbczmbdcfpso.js","/chat-static/_next/static/immutable/chunks/2lw3dfa252fnx.js","/chat-static/_next/static/immutable/chunks/3v11vf3qhw5se.js"],"ExplicitChatIdProvider"] 84:I[838238,["/chat-static/_next/static/immutable/chunks/3im61c5a8fkcz.js","/chat-static/_next/static/immutable/chunks/1guyin7zoczci.js","/chat-static/_next/static/immutable/chunks/39rg-vyko_oef.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/157bok9l8ft2k.js","/chat-static/_next/static/immutable/chunks/0wi_45vocl_-p.js","/chat-static/_next/static/immutable/chunks/3xk_70lpaq4rr.js","/chat-static/_next/static/immutable/chunks/0mwr0fog443j2.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/3qqefvmwew4y9.js","/chat-static/_next/static/immutable/chunks/31bw9_yzlia2t.js","/chat-static/_next/static/immutable/chunks/0s_cw7e8300g7.js","/chat-static/_next/static/immutable/chunks/2obw3omjz3a42.js","/chat-static/_next/static/immutable/chunks/2cytw68p34q_e.js","/chat-static/_next/static/immutable/chunks/1znnlzfkj81j9.js","/chat-static/_next/static/immutable/chunks/3263tgpkly9nu.js","/chat-static/_next/static/immutable/chunks/0wnsukyi4k1ek.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/31kxnp_byhi43.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/13kz2gfvgolzm.js","/chat-static/_next/static/immutable/chunks/3d5spne6o359m.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/2w2x4bf9lm3-y.js","/chat-static/_next/static/immutable/chunks/2uh_-aagfm1yq.js","/chat-static/_next/static/immutable/chunks/1m_firo4_gtz9.js","/chat-static/_next/static/immutable/chunks/3_3lqfmfv126f.js","/chat-static/_next/static/immutable/chunks/3wbu0v06tpqrr.js","/chat-static/_next/static/immutable/chunks/0m1kq5rn-0ww-.js","/chat-static/_next/static/immutable/chunks/3b31dkoetf3d7.js","/chat-static/_next/static/immutable/chunks/1vx8uudj0cz_4.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/1wyzgwbq801w-.js","/chat-static/_next/static/immutable/chunks/2bge0xx016en5.js","/chat-static/_next/static/immutable/chunks/1tftl9086q6dm.js","/chat-static/_next/static/immutable/chunks/08-__6bbjjmqq.js","/chat-static/_next/static/immutable/chunks/1zbczmbdcfpso.js","/chat-static/_next/static/immutable/chunks/2lw3dfa252fnx.js","/chat-static/_next/static/immutable/chunks/3v11vf3qhw5se.js"],"SWRDataProvider"] 85:T1ba5,[V0_FILE]typescriptreact:file="app/layout.tsx" entry="true" isMerged="true" import type { Metadata } from "next" import { Geist, Geist_Mono } from "next/font/google" const geistSans = Geist({ subsets: ["latin"], variable: "--font-sans", }) const geistMono = Geist_Mono({ subsets: ["latin"], variable: "--font-mono", }) export const metadata: Metadata = { title: "Create Next App", description: "Generated by create next app", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import { ChartBar } from "@/components/chart-bar" import { ChartPie } from "@/components/chart-pie" import { SharedLegend } from "@/components/shared-legend" export default function Page() { return (

) } [V0_FILE]typescriptreact:file="components/chart-pie.tsx" isEdit="true" isMerged="true" "use client" import * as React from "react" import { Label, Pie, PieChart } from "recharts" import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart" const chartData = [ { activity: "walking", minutes: 342, fill: "hsl(160, 84%, 39%)" }, // emerald-700 { activity: "jogging", minutes: 187, fill: "hsl(48, 96%, 53%)" }, // yellow-400 ] const chartConfig = { minutes: { label: "Minutes", }, walking: { label: "Walking", color: "hsl(160, 84%, 39%)", // emerald-700 }, jogging: { label: "Jogging", color: "hsl(48, 96%, 53%)", // yellow-400 }, } satisfies ChartConfig export function ChartPie() { const totalMinutes = React.useMemo(() => { return chartData.reduce((acc, curr) => acc + curr.minutes, 0) }, []) return ( Weekly Exercise Distribution } /> { if (viewBox && "cx" in viewBox && "cy" in viewBox) { return ( {totalMinutes.toLocaleString()} Minutes ) } }} />

Walking: 65% | Jogging: 35% of total exercise time

) } [V0_FILE]typescriptreact:file="components/shared-legend.tsx" isEdit="true" isMerged="true" export function SharedLegend() { return (

Exercise Legend:

Walking: 342 total minutes Jogging: 187 total minutes

) } [V0_FILE]typescriptreact:file="components/chart-bar.tsx" isEdit="true" "use client" import { Bar, BarChart, CartesianGrid, XAxis } from "recharts" import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart" const chartData = [ { day: "Monday", walking: 45, jogging: 20 }, { day: "Tuesday", walking: 38, jogging: 25 }, { day: "Wednesday", walking: 52, jogging: 30 }, { day: "Thursday", walking: 30, jogging: 15 }, { day: "Friday", walking: 42, jogging: 22 }, { day: "Saturday", walking: 65, jogging: 40 }, { day: "Sunday", walking: 70, jogging: 35 }, ] const chartConfig = { walking: { label: "Walking", color: "hsl(160, 84%, 39%)", // emerald-700 }, jogging: { label: "Jogging", color: "hsl(48, 96%, 53%)", // yellow-400 }, } satisfies ChartConfig export function ChartBar() { return ( Weekly Exercise Activity value.slice(0, 3)} stroke="rgba(255,255,255,0.8)" /> } />

Weekend activity is 48% higher than weekdays

) } 7a:["$","$L83",null,{"chatId":"IilnmDArbZB","children":["$","$L84",null,{"data":{"@\"active-block\",\"IilnmDArbZB\",":{"id":"b_b4Stf4HMxU7","messageId":"w6xkJQeI6Y9ZcijiiPFv3r2oHq3B8U1I","source":"$85","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"Next.js + Charts","type":"code-project","project":"Next.js + Charts"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"IilnmDArbZB\",":false,"":null},"children":"$L86"}]}]

About

Tags

Share

About

Tags

Share

More from james-9405

More Templates Like This