Line Chart

"use client"

import { LineChart } from "@/components/ui/charts"

const data = [
  {
    name: "Views",
    data: [
      { x: "Jan", y: 186 },
      { x: "Feb", y: 305 },
      { x: "Mar", y: 237 },
      { x: "Apr", y: 73 },
      { x: "May", y: 209 },
      { x: "Jun", y: 214 },
      { x: "Jul", y: 251 },
      { x: "Aug", y: 298 },
      { x: "Sep", y: 187 },
      { x: "Oct", y: 342 },
      { x: "Nov", y: 276 },
      { x: "Dec", y: 301 },
    ],
    color: "#93c5fd",
  },
]

export function LineChartDemo() {
  return (
    <div className="w-full max-w-3xl">
      <LineChart data={data} />
    </div>
  )
}

"use client"

import * as React from "react"

import { LineChart } from "@/components/ui/charts"

// Generate smooth time series data (like Google Analytics)
function generateTimeSeriesData(days: number): { x: Date; y: number }[] {
  const data: { x: Date; y: number }[] = []
  const startDate = new Date("2024-04-01")

  // Seeded pseudo-random for deterministic results
  const seededRandom = (seed: number) => {
    const x = Math.sin(seed) * 10000
    return x - Math.floor(x)
  }

  let value = 50

  for (let i = 0; i < days; i++) {
    const date = new Date(startDate)
    date.setDate(startDate.getDate() + i)

    // Random walk with some periodicity
    value += (seededRandom(i * 100) - 0.5) * 20
    value = Math.max(10, Math.min(100, value))

    // Add some weekly pattern
    const dayOfWeek = date.getDay()
    const weekendDip = dayOfWeek === 0 || dayOfWeek === 6 ? -15 : 0

    data.push({
      x: date,
      y: Math.round(value + weekendDip + Math.sin(i / 7) * 10),
    })
  }

  return data
}

export function LineChartSmoothDemo() {
  const [data, setData] = React.useState<{ x: Date; y: number }[]>([])

  React.useEffect(() => {
    setData(generateTimeSeriesData(90))
  }, [])

  if (data.length === 0) {
    return <div className="h-[300px] w-full max-w-4xl" />
  }

  return (
    <div className="w-full max-w-4xl">
      <LineChart
        data={[
          {
            name: "Traffic",
            data: data,
            color: "#93c5fd",
          },
        ]}
        variant="smooth"
        xType="time"
        height={300}
        strokeWidth={2}
      />
    </div>
  )
}

"use client"

import * as React from "react"

import { LineChart } from "@/components/ui/charts"

// Generate deterministic multi-series data
function generateMultiSeriesData() {
  const colors = [
    "#2563eb", // blue
    "#06b6d4", // cyan
    "#f97316", // orange
    "#8b5cf6", // violet
    "#eab308", // yellow
    "#ec4899", // pink
    "#22c55e", // green
    "#64748b", // slate
  ]

  const names = [
    "Product A",
    "Product B",
    "Product C",
    "Product D",
    "Product E",
    "Product F",
    "Product G",
    "Product H",
  ]

  // Use seeded pseudo-random for deterministic results
  const seededRandom = (seed: number) => {
    const x = Math.sin(seed) * 10000
    return x - Math.floor(x)
  }

  const result = []
  const startDate = new Date("2024-08-01")

  for (let s = 0; s < 8; s++) {
    const data: { x: Date; y: number }[] = []
    let value = 100 + seededRandom(s * 1000) * 400

    for (let i = 0; i < 100; i++) {
      const date = new Date(startDate)
      date.setDate(startDate.getDate() + i)

      const growth =
        1 + (seededRandom(s * 1000 + i) - 0.3) * 0.05 * (s % 3 === 0 ? 2 : 1)
      value *= growth
      value = Math.max(50, value)

      data.push({
        x: date,
        y: Math.round(value),
      })
    }

    result.push({
      name: names[s],
      data,
      color: colors[s],
    })
  }

  return result
}

export function LineChartMultiDemo() {
  const [data, setData] = React.useState<
    ReturnType<typeof generateMultiSeriesData>
  >([])

  React.useEffect(() => {
    setData(generateMultiSeriesData())
  }, [])

  if (data.length === 0) {
    return <div className="h-[400px] w-full max-w-4xl" />
  }

  return (
    <div className="w-full max-w-4xl">
      <LineChart
        data={data}
        variant="multi"
        xType="time"
        height={400}
        yAxisLabel="Value"
      />
    </div>
  )
}

"use client"

import * as React from "react"

import { LineChart } from "@/components/ui/charts"

// Generate stock price data (like Amazon chart)
function generateStockData(days: number): { x: Date; y: number }[] {
  const data: { x: Date; y: number }[] = []
  const startDate = new Date("2024-01-02")

  // Seeded pseudo-random for deterministic results
  const seededRandom = (seed: number) => {
    const x = Math.sin(seed) * 10000
    return x - Math.floor(x)
  }

  let price = 1180

  for (let i = 0; i < days; i++) {
    const date = new Date(startDate)
    date.setDate(startDate.getDate() + i)

    // Skip weekends
    if (date.getDay() === 0 || date.getDay() === 6) continue

    // Random walk with upward drift (typical stock behavior)
    const drift = 0.0008
    const volatility = 0.02
    const change = drift + volatility * (seededRandom(i * 50) - 0.5) * 2
    price *= 1 + change

    // Add some intraday variation
    price += (seededRandom(i * 100) - 0.5) * 10

    data.push({
      x: date,
      y: Math.round(price * 100) / 100,
    })
  }

  return data
}

export function LineChartStockDemo() {
  const [data, setData] = React.useState<{ x: Date; y: number }[]>([])

  React.useEffect(() => {
    setData(generateStockData(280))
  }, [])

  if (data.length === 0) {
    return <div className="h-[400px] w-full max-w-4xl" />
  }

  return (
    <div className="w-full max-w-4xl">
      <LineChart
        data={[
          {
            name: "AMZN",
            data: data,
            color: "#0d9488",
          },
        ]}
        variant="stock"
        xType="time"
        height={400}
        title="Amazon"
        subtitle="2024 year to date"
        yAxisLabel="Closing Price"
        xAxisLabel="Date"
        yAxisFormatter={(value) => `$${value.toLocaleString()}`}
      />
    </div>
  )
}