Componente de StackedAreaChart

O StackedAreaChart é utilizado para exibir gráficos de área empilhados, permitindo a comparação entre múltiplas categorias (como mobile e desktop) ao longo do tempo. Ele também pode incluir uma legenda para distinguir os diferentes conjuntos de dados.

Como importar

import { StackedAreaChart } from '@/app/shared/@JustLaunch/components/Charts'

Exemplo de uso

<StackedAreaChart
  xDataKey="name"
  yDataKeys={['mobile', 'desktop']}
  data={[
    { name: 'Jan', mobile: 400, desktop: 200 },
    { name: 'Fev', mobile: 300, desktop: 100 },
    { name: 'Mar', mobile: 500, desktop: 300 },
    { name: 'Abr', mobile: 200, desktop: 400 },
  ]}
  title="Stacked Area Chart"
  description="This chart shows mobile and desktop data over time."
  showLegend={false}
/>

Com Legenda

<StackedAreaChart
  xDataKey="name"
  yDataKeys={['mobile', 'desktop']}
  data={[
    { name: 'Jan', mobile: 400, desktop: 200 },
    { name: 'Fev', mobile: 300, desktop: 100 },
    { name: 'Mar', mobile: 500, desktop: 300 },
    { name: 'Abr', mobile: 200, desktop: 400 },
  ]}
  title="Stacked Area Chart"
  description="This chart shows mobile and desktop data over time."
  showLegend={true}
/>

Sem Dados

<StackedAreaChart xDataKey="name" yDataKeys={['mobile', 'desktop']} data={[]} />

Chaves de Dados Ausentes

<StackedAreaChart
  xDataKey=""
  yDataKeys={[]}
  data={[
    { name: 'Jan', mobile: 400, desktop: 200 },
    { name: 'Fev', mobile: 300, desktop: 100 },
  ]}
/>