[V0_FILE]typescriptreact:file="combo-chart.tsx" isMerged="true" "use client" import { Bar, CartesianGrid, ComposedChart, Legend, Line, ResponsiveContainer, XAxis, YAxis } from "recharts" import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart" // Sample quarterly financial data const financialData = [ { quarter: "Q1 2023", revenue: 120.5, eps: 1.25 }, { quarter: "Q2 2023", revenue: 145.8, eps: 1.42 }, { quarter: "Q3 2023", revenue: 162.3, eps: 1.56 }, { quarter: "Q4 2023", revenue: 189.7, eps: 1.78 }, { quarter: "Q1 2024", revenue: 135.2, eps: 1.32 }, { quarter: "Q2 2024", revenue: 158.6, eps: 1.51 }, { quarter: "Q3 2024", revenue: 175.9, eps: 1.65 }, { quarter: "Q4 2024", revenue: 205.3, eps: 1.92 }, ] export default function ComboChart() { return (

Quarterly Revenue & EPS

Revenue (in millions USD) shown as bars with EPS (Earnings Per Share) as line

{/* Primary Y-axis for Revenue */} `$${value}M`} domain={[0, "auto"]} /> {/* Secondary Y-axis for EPS */} `$${value}`} domain={[0, "auto"]} /> { if (name === "revenue") return [`$${value}M`, "Revenue"] if (name === "eps") return [`$${value}`, "EPS"] return [value, name] }} /> } /> {/* Revenue as bars on primary axis */} {/* EPS as line on secondary axis */}

) } [V0_FILE]typescriptreact:file="nivo-combo-chart.tsx" isEdit="true" "use client" import { useState } from "react" import { ResponsiveBar } from "@nivo/bar" import { ResponsiveLine } from "@nivo/line" import { Card, CardContent } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" // Tesla colors: #e82127 (red), #393c41 (dark gray) // Nvidia colors: #76b900 (green), #000000 (black) const financialData = [ { quarter: "Q1 2023", "Tesla Revenue": 23.33, "Tesla EPS": 0.85, "Nvidia Revenue": 7.19, "Nvidia EPS": 0.82, }, { quarter: "Q2 2023", "Tesla Revenue": 24.93, "Tesla EPS": 0.91, "Nvidia Revenue": 13.51, "Nvidia EPS": 2.7, }, { quarter: "Q3 2023", "Tesla Revenue": 23.35, "Tesla EPS": 0.66, "Nvidia Revenue": 18.12, "Nvidia EPS": 3.71, }, { quarter: "Q4 2023", "Tesla Revenue": 25.17, "Tesla EPS": 0.71, "Nvidia Revenue": 22.1, "Nvidia EPS": 4.93, }, { quarter: "Q1 2024", "Tesla Revenue": 21.3, "Tesla EPS": 0.45, "Nvidia Revenue": 26.05, "Nvidia EPS": 5.16, }, { quarter: "Q2 2024", "Tesla Revenue": 25.5, "Tesla EPS": 0.52, "Nvidia Revenue": 30.0, "Nvidia EPS": 6.12, }, ] // Custom tooltip component for the bar chart const BarTooltip = ({ id, value, color, indexValue }) => (

{indexValue}

{id}: ${value}B

) // Custom tooltip component for the line chart const LineTooltip = ({ point }) => (

{point.data.x}

{point.serieId}: ${point.data.y.toFixed(2)}

) export default function NivoComboChart() { const [selectedTab, setSelectedTab] = useState("revenue") const [selectedCompany, setSelectedCompany] = useState("both") // Filter data based on selected company const filteredBarData = financialData.map((item) => { const filtered = { quarter: item.quarter } if (selectedCompany === "both" || selectedCompany === "tesla") { filtered["Tesla Revenue"] = item["Tesla Revenue"] } if (selectedCompany === "both" || selectedCompany === "nvidia") { filtered["Nvidia Revenue"] = item["Nvidia Revenue"] } return filtered }) // Prepare line data for EPS const lineData = [ { id: "Tesla EPS", data: financialData.map((d) => ({ x: d.quarter, y: d["Tesla EPS"], })), }, { id: "Nvidia EPS", data: financialData.map((d) => ({ x: d.quarter, y: d["Nvidia EPS"], })), }, ].filter((series) => { if (selectedCompany === "both") return true if (selectedCompany === "tesla" && series.id === "Tesla EPS") return true if (selectedCompany === "nvidia" && series.id === "Nvidia EPS") return true return false }) return (

Tesla vs Nvidia Financial Performance

Quarterly revenue (billions USD) and earnings per share (EPS) comparison

Both Tesla Nvidia Revenue EPS

(id === "Tesla Revenue" ? "#e82127" : "#76b900")} borderRadius={4} borderWidth={1} borderColor={{ from: "color", modifiers: [["darker", 0.6]] }} axisTop={null} axisRight={null} axisBottom={{ tickSize: 5, tickPadding: 5, tickRotation: 0, legend: "Quarter", legendPosition: "middle", legendOffset: 45, truncateTickAt: 0, }} axisLeft={{ tickSize: 5, tickPadding: 5, tickRotation: 0, legend: "Revenue (Billions USD)", legendPosition: "middle", legendOffset: -60, format: (value) => `$${value}B`, truncateTickAt: 0, }} labelSkipWidth={12} labelSkipHeight={12} labelFormat={(value) => `$${value}B`} labelTextColor={{ from: "color", modifiers: [["darker", 3]] }} tooltip={BarTooltip} legends={[ { dataFrom: "keys", anchor: "bottom", direction: "row", justify: false, translateX: 0, translateY: 65, itemsSpacing: 20, itemWidth: 100, itemHeight: 20, itemDirection: "left-to-right", itemOpacity: 0.85, symbolSize: 16, symbolShape: "square", effects: [ { on: "hover", style: { itemOpacity: 1, }, }, ], }, ]} theme={{ axis: { ticks: { text: { fontSize: 12, fontWeight: 500, }, }, legend: { text: { fontSize: 14, fontWeight: 600, }, }, }, grid: { line: { stroke: "#e2e8f0", strokeWidth: 1, }, }, legends: { text: { fontSize: 12, fontWeight: 500, }, }, }} animate={true} motionStiffness={90} motionDamping={15} enableGridY={true} gridYValues={5} /> `$${value}`, }} colors={({ id }) => (id === "Tesla EPS" ? "#e82127" : "#76b900")} lineWidth={3} pointSize={10} pointColor={{ theme: "background" }} pointBorderWidth={2} pointBorderColor={{ from: "serieColor" }} pointLabelYOffset={-12} enableArea={true} areaOpacity={0.1} useMesh={true} tooltip={LineTooltip} legends={[ { anchor: "bottom", direction: "row", justify: false, translateX: 0, translateY: 65, itemsSpacing: 20, itemDirection: "left-to-right", itemWidth: 100, itemHeight: 20, itemOpacity: 0.85, symbolSize: 16, symbolShape: "circle", symbolBorderColor: "rgba(0, 0, 0, .5)", effects: [ { on: "hover", style: { itemBackground: "rgba(0, 0, 0, .03)", itemOpacity: 1, }, }, ], }, ]} theme={{ axis: { ticks: { text: { fontSize: 12, fontWeight: 500, }, }, legend: { text: { fontSize: 14, fontWeight: 600, }, }, }, grid: { line: { stroke: "#e2e8f0", strokeWidth: 1, }, }, legends: { text: { fontSize: 12, fontWeight: 500, }, }, }} animate={true} motionStiffness={90} motionDamping={15} enableGridY={true} gridYValues={5} />

Tesla Highlights

Revenue peaked at $25.5B in Q2 2024
EPS declined from $0.85 in Q1 2023 to $0.52 in Q2 2024
Revenue growth of 9.3% from Q1 2023 to Q2 2024

Nvidia Highlights

Revenue grew 317% from $7.19B to $30B in 6 quarters
EPS increased by 646% from $0.82 to $6.12
Consistent quarter-over-quarter growth in both metrics

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" "use client" import NivoComboChart from "../nivo-combo-chart" export default function Page() { return (

) }