Gseller Area Chart

Componente criado para exibir gráficos de área com a possibilidade de formatar os valores como moeda e customizar tooltips.

Props

• title -> Título do gráfico.
• data -> Array de objetos com os dados para o gráfico. Cada objeto deve ter um índice e um valor total opcional.
• isCurrency -> Booleano que determina se os valores devem ser formatados como moeda. Padrão: false.
• isLoading -> Booleano que controla a exibição do skeleton da interface: se verdadeiro, o skeleton é renderizado, indicando que a aplicação está em processo de carregamento de dados. O valor padrão é false.
• indexName -> Nome do índice a ser usado no gráfico.

Lembrete

• A alteração das cores não é possível de ser realizada, pois o componente foi pensado para seguir a estrutura e cores do Gseller

Dependências

Certifique-se de ter as seguintes dependências instaladas:

• @gseller-monorepo/box-model
• tailwindcss
• postcss
• autoprefixer
• tailwind-merge
• clsx

Instalação

  yarn add @gseller-monorepo/area-chart
  or
  npm install @gseller-monorepo/area-chart
  or
  pnpm add @gseller-monorepo/area-chart

Estrutura de Pastas e Arquivos

A estrutura do projeto é organizada para facilitar a compreensão e manutenção.

Pasta src

Arquivo index.ts

Responsável pela exportação de todos os arquivos necessários para utilização do componente

Arquivo global.css

Arquivo que define os resets e css base para utilização do tailwindcss

Arquivo area-chart.tsx

Arquivo que exporta toda a lógica do componente

Exemplo de Uso

const chartdata = [
  {
    index: '01/01',
    total: 1
  },
  {
    index: '02/01',
    total: 5
  },
  {
    index: '03/01',
    total: 3
  },
  {
    index: '04/01',
    total: 12
  },
  {
    index: '04/01',
    total: 43
  },
  {
    index: '06/01',
    total: 12
  },
  {
    index: '07/01',
    total: 3
  },
]

<AreaChartComponent
  title="Grafico de vendas"
  indexName="Data"
  isCurrency={true}
  isLoading={loading}
  data={chartdata}
/>