0.0.6 • Published 1 year ago

@gseller-monorepo/area-chart v0.0.6

Weekly downloads
-
License
ISC
Repository
-
Last release
1 year ago

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}
/>