Area Chart

"use client"

import {
  AreaChart,
  generateAreaChartData,
} from "@/components/ui/charts"

// Quarterly data
const months = ["Q1", "Q2", "Q3", "Q4", "Q1", "Q2", "Q3", "Q4"]

const values = [42, 58, 88, 70, 45, 72, 86, 64]

const chartData = generateAreaChartData(months, values)

export function AreaChartDemo() {
  return (
    <AreaChart
      data={chartData}
      showDots={false}
      showGrid
      showTooltip
      yAxisDomain={[0, 100]}
      yAxisTicks={[25, 50, 75, 100]}
      aspectRatio={2}
      xAxisAngle={0}
      curveType="linear"
    />
  )
}

"use client"

import {
  AreaChart,
  generateAreaChartData,
} from "@/components/ui/charts"

// Organic stock-like data with natural fluctuations
const months = Array.from({ length: 30 }, (_, i) => `${i + 1}`)

const values = [
  45, 42, 38, 35, 40, 48, 55, 65, 75, 85, 92, 95, 90, 82, 72, 62, 55, 52, 58,
  62, 55, 50, 55, 60, 65, 68, 72, 75, 72, 78,
]

const chartData = generateAreaChartData(months, values)

export function AreaChartSmoothDemo() {
  return (
    <AreaChart
      data={chartData}
      color="#8b5cf6"
      gradientFrom="#8b5cf6"
      gradientTo="#c4b5fd"
      showDots={false}
      showGrid
      showTooltip
      yAxisDomain={[0, 100]}
      yAxisTicks={[25, 50, 75, 100]}
      aspectRatio={2}
      xAxisAngle={0}
      curveType="monotone"
    />
  )
}

"use client"

import {
  AreaChart,
  generateAreaChartData,
} from "@/components/ui/charts"

// Organic stock-like data with step transitions
const months = Array.from({ length: 30 }, (_, i) => `${i + 1}`)

const values = [
  38, 42, 38, 35, 42, 52, 62, 72, 85, 92, 95, 88, 78, 68, 58, 52, 48, 52, 58,
  52, 48, 45, 50, 55, 58, 52, 48, 50, 52, 50,
]

const chartData = generateAreaChartData(months, values)

export function AreaChartStepDemo() {
  return (
    <AreaChart
      data={chartData}
      color="#10b981"
      gradientFrom="#10b981"
      gradientTo="#6ee7b7"
      showDots={false}
      showGrid
      showTooltip
      yAxisDomain={[0, 100]}
      yAxisTicks={[25, 50, 75, 100]}
      aspectRatio={2}
      xAxisAngle={0}
      curveType="step"
    />
  )
}

"use client"

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

// Organic stock-like data with natural fluctuations for multiple series
const data = Array.from({ length: 30 }, (_, i) => {
  const desktopBase = [
    180, 175, 170, 185, 210, 245, 290, 340, 375, 380, 360, 320, 280, 250, 225,
    235, 220, 230, 240, 228, 218, 225, 235, 240, 232, 225, 220, 228, 225, 230,
  ]
  const mobileBase = [
    95, 88, 85, 100, 125, 155, 190, 225, 242, 245, 230, 200, 172, 150, 135, 145,
    132, 140, 148, 138, 130, 138, 145, 150, 142, 138, 132, 140, 138, 142,
  ]
  const tabletBase = [
    52, 48, 45, 55, 70, 92, 115, 138, 148, 150, 140, 120, 100, 85, 75, 82, 75,
    80, 88, 80, 75, 80, 85, 88, 82, 78, 75, 80, 78, 82,
  ]
  return {
    label: `${i + 1}`,
    desktop: desktopBase[i],
    mobile: mobileBase[i],
    tablet: tabletBase[i],
  }
})

const series = [
  {
    name: "Desktop",
    dataKey: "desktop",
    color: "#2563eb",
    gradientFrom: "#2563eb",
    gradientTo: "#93c5fd",
  },
  {
    name: "Mobile",
    dataKey: "mobile",
    color: "#8b5cf6",
    gradientFrom: "#8b5cf6",
    gradientTo: "#c4b5fd",
  },
  {
    name: "Tablet",
    dataKey: "tablet",
    color: "#10b981",
    gradientFrom: "#10b981",
    gradientTo: "#6ee7b7",
  },
]

export function AreaChartMultiDemo() {
  return (
    <MultiAreaChart
      data={data}
      series={series}
      showGrid
      showTooltip
      showCursor
      showLegend
      curveType="linear"
      gradientOpacity={[0.5, 0.05]}
    />
  )
}