Cowlde-charts

Cowlde-charts é uma biblioteca de gráficos construída utilizando React e Recharts.

Instalando

Rodar no terminal dentro do diretório raiz da aplicação o seguinte comando:

$ npm i cowlde-charts

Storybook

Para acessar o storybook para testes de componentes e acesso a documentação, rodar no diretório raiz do repositório o seguinte comando:

$ npm run storybook

# Irá rodar em: http://localhost:6006

Cypress Tests

Para verificar os testes E2E ou unitários da biblioteca com cypress, rodar no diretório raiz do repositório o comando:

$ npm run cypress

Após inicializar o cypress, escoher qual tipo de testes quer realizar (E2E ou unitário).

Exemplos

Line Charts

Simple Line

import { SimpleLineChart } from "cowlde-charts";

# Data Source Object

const dataSource = {
  lines: [
    {
      title: "uv",
      color: "#8884d8",
      dashed: { active: true, stroke: "3 3" },
      type: "linear",
    },
    {
      title: "pv",
      color: "#82ca9d",
      dashed: { active: false, stroke: "" },
      type: "monotone",
    },
  ],
  data: [
    {
      title: "Page A",
      uv: 4000,
      pv: 2400,
    },
    {
      title: "Page B",
      uv: 3000,
      pv: 1398,
    },
    {
      title: "Page C",
      uv: 2000,
      pv: 9800,
    },
  ],
};

# Chart Component

<SimpleLineChart
    width="100%"
    height={300}
    dataSource={dataSource}
    dashGrid="3 3"
    onClick={(details: any) => console.log(details)}
/>

Propriedades

width: Number | String

A largura do container.

height: Number | String

A altura do container.

dataSource: Object

Objeto de fonte dos dados a serem renderizados.

dashGrid: String

Configura o tracejado de fundo do grid.

onClick: Function

Função de click do gráfico. Esta função receberá o valor referente ao ponto clicado no gráfico.

Area Charts

Simple Area

import { SimpleAreaChart } from "cowlde-charts";

# Data Source Object

const dataSource = {
  areas: [
    { title: "uv", color: "#8884d8", type: "monotone", opacity: 0.7 },
    { title: "pv", color: "#82ca9d", type: "linear", opacity: 0.7 },
    { title: "amt", color: "#ffc658", type: "monotone", opacity: 0.7 },
  ],
  data: [
    {
      title: "Page A",
      uv: 4000,
      pv: 2400,
      amt: 2400,
    },
    {
      title: "Page B",
      uv: 3000,
      pv: 1398,
      amt: 2210,
    },
    {
      title: "Page C",
      uv: 2000,
      pv: 9800,
      amt: 2290,
    },
    {
      title: "Page D",
      uv: 2780,
      pv: 3908,
      amt: 2000,
    },
  ],
}

# Chart Component

<SimpleAreaChart
    width="100%"
    height={300}
    dataSource={dataSource}
    dashGrid="3 3"
    onClick={(details: any) => console.log(details)}
/>

Propriedades

width: Number | String

A largura do container.

height: Number | String

A altura do container.

dataSource: Object

Objeto de fonte dos dados a serem renderizados.

dashGrid: String

Configura o tracejado de fundo do grid.

onClick: Function

Função de click do gráfico. Esta função receberá o valor referente ao ponto clicado no gráfico.

Stacked Area

import { StackedAreaChart } from "cowlde-charts";

# Data Source Object

const dataSource = {
  areas: [
    { title: "uv", color: "#8884d8", type: "monotone", opacity: 0.7, stackId: "a" },
    { title: "pv", color: "#82ca9d", type: "monotone", opacity: 0.7, stackId: "a" },
    { title: "amt", color: "#ffc658", type: "monotone", opacity: 0.7, stackId: "a" },
  ],
  data: [
    {
      name: "Page A",
      uv: 4000,
      pv: 2400,
      amt: 2400,
    },
    {
      name: "Page B",
      uv: 3000,
      pv: 1398,
      amt: 2210,
    },
    {
      name: "Page C",
      uv: 2000,
      pv: 9800,
      amt: 2290,
    },
    {
      name: "Page D",
      uv: 2780,
      pv: 3908,
      amt: 2000,
    },
  ],
};

# Chart Component

<StackedAreaChart
    width="100%"
    height={300}
    dataSource={dataSource}
    dashGrid="3 3"
    onClick={(details: any) => console.log(details)}
/>

Propriedades

width: Number | String

A largura do container.

height: Number | String

A altura do container.

dataSource: Object

Objeto de fonte dos dados a serem renderizados.

dashGrid: String

Configura o tracejado de fundo do grid.

onClick: Function

Função de click do gráfico. Esta função receberá o valor referente ao ponto clicado no gráfico.

Pie Charts

Simple Pie

import { SimplePieChart } from "cowlde-charts";

# Data Source Object

const dataSource = {
  cells: [
    { color: "#8884d8" },
    { color: "#82ca9d" },
    { color: "#ffc658" },
    { color: "#ff0000" },
  ],
  data: [
    { title: "Group A", value: 400 },
    { title: "Group B", value: 300 },
    { title: "Group C", value: 300 },
    { title: "Group D", value: 200 },
  ],
};

# Chart Component

<SimplePieChart
    width="100%"
    height={300}
    dataSource={dataSource}
    onClick={(details: any) => console.log(details)}
    outerRadius={80}, 
/>

Propriedades

width: Number | String

A largura do container.

height: Number | String

A altura do container.

dataSource: Object

Objeto de fonte dos dados a serem renderizados.

dashGrid: String

Configura o tracejado de fundo do grid.

barSize: Number

Configura o tamanho das barras.

onClick: Function

Função de click do gráfico. Esta função receberá o valor referente ao ponto clicado no gráfico.

outerRadius: Number

Configura o raio externo do círculo.

Active Label Pie

import { ActiveLabelPieChart } from "cowlde-charts";

# Data Source Object

const dataSource = {
  cells: [
    { color: "#8884d8" },
    { color: "#82ca9d" },
    { color: "#ffc658" },
    { color: "#ff0000" },
  ],
  data: [
    { title: "Group A", value: 400 },
    { title: "Group B", value: 300 },
    { title: "Group C", value: 300 },
    { title: "Group D", value: 200 },
  ],
};

# Chart Component

<ActiveLabelPieChart
    width="100%"
    height={300}
    dataSource={dataSource}
    onClick={(details: any) => console.log(details)}
    outerRadius={80}, 
    innerRadius={60},
/>

Propriedades

width: Number | String

A largura do container.

height: Number | String

A altura do container.

dataSource: Object

Objeto de fonte dos dados a serem renderizados.

dashGrid: String

Configura o tracejado de fundo do grid.

barSize: Number

Configura o tamanho das barras.

onClick: Function

Função de click do gráfico. Esta função receberá o valor referente ao ponto clicado no gráfico.

outerRadius: Number

Configura o raio externo do círculo.

innerRadius: Number

Configura o raio interno do círculo.

Bar Charts

Simple Bar

import { SimpleBarChart } from "cowlde-charts";

# Data Source Object

const dataSource = {
  bars: [
    { title: "uv", color: "#8884d8" },
    { title: "pv", color: "#82ca9d" },
    { title: "amt", color: "#ffc658" },
  ],
  data: [
    {
      title: "Page A",
      uv: 4000,
      pv: 2400,
      amt: 2400,
    },
    {
      title: "Page B",
      uv: 3000,
      pv: 1398,
      amt: 2210,
    },
    {
      title: "Page C",
      uv: 2000,
      pv: 9800,
      amt: 2290,
    },
    {
      title: "Page D",
      uv: 2780,
      pv: 3908,
      amt: 2000,
    },
  ],
};

# Chart Component

<SimpleBarChart
    width="100%"
    height={300}
    dataSource={dataSource}
    dashGrid="3 3"
    barSize={20}
    onClick={(details: any) => console.log(details)}
/>

Propriedades

width: Number | String

A largura do container.

height: Number | String

A altura do container.

dataSource: Object

Objeto de fonte dos dados a serem renderizados.

dashGrid: String

Configura o tracejado de fundo do grid.

barSize: Number

Configura o tamanho das barras.

onClick: Function

Função de click do gráfico. Esta função receberá o valor referente ao ponto clicado no gráfico.

Stacked Bar

import { StackedBarChart } from "cowlde-charts";

# Data Source Object

const dataSource = {
  bars: [
    { title: "uv", color: "#8884d8", stackId: "a" },
    { title: "pv", color: "#82ca9d", stackId: "a" },
    { title: "amt", color: "#ffc658", stackId: "b" },
  ],
  data: [
    {
      title: "Page A",
      uv: 4000,
      pv: 2400,
      amt: 2400,
    },
    {
      title: "Page B",
      uv: 3000,
      pv: 1398,
      amt: 2210,
    },
    {
      title: "Page C",
      uv: 2000,
      pv: 9800,
      amt: 2290,
    },
    {
      title: "Page D",
      uv: 2780,
      pv: 3908,
      amt: 2000,
    },
  ],
};

# Chart Component

<StackedBarChart
    width="100%"
    height={300}
    dataSource={dataSource}
    dashGrid="3 3"
    barSize={20}
    onClick={(details: any) => console.log(details)}
/>

Propriedades

width: Number | String

A largura do container.

height: Number | String

A altura do container.

dataSource: Object

Objeto de fonte dos dados a serem renderizados.

dashGrid: String

Configura o tracejado de fundo do grid.

barSize: Number

Configura o tamanho das barras.

onClick: Function

Função de click do gráfico. Esta função receberá o valor referente ao ponto clicado no gráfico.

Positive and Negative Bar

import { PositiveNegativeBarChart } from "cowlde-charts";

# Data Source Object

const dataSource = {
    bars: [
    { title: "uv", color: "#8884d8" },
    { title: "pv", color: "#82ca9d" },
    { title: "amt", color: "#ffc658" },
  ],
  data: [
    {
      title: "Page A",
      uv: 4000,
      pv: 2400,
      amt: 2400,
    },
    {
      title: "Page B",
      uv: -3000,
      pv: 1398,
      amt: 2210,
    },
    {
      title: "Page C",
      uv: -2000,
      pv: -9800,
      amt: 2290,
    },
    {
      title: "Page D",
      uv: 2780,
      pv: 3908,
      amt: 2000,
    },
  ],
};

# Chart Component

<PositiveNegativeBarChart
    width="100%"
    height={300}
    dataSource={dataSource}
    dashGrid="3 3"
    barSize={20}
    onClick={(details: any) => console.log(details)}
/>

Propriedades

width: Number | String

A largura do container.

height: Number | String

A altura do container.

dataSource: Object

Objeto de fonte dos dados a serem renderizados.

dashGrid: String

Configura o tracejado de fundo do grid.

barSize: Number

Configura o tamanho das barras.

onClick: Function

Função de click do gráfico. Esta função receberá o valor referente ao ponto clicado no gráfico.

Brush Bar

import { BrushBarChart } from "cowlde-charts";

# Data Source Object

const dataSource = {
  bars: [
    { title: "uv", color: "#8884d8" },
    { title: "pv", color: "#82ca9d" },
  ],
  data: [
    { title: "1", uv: 300, pv: 456 },
    { title: "2", uv: -145, pv: 230 },
    { title: "3", uv: -100, pv: 345 },
    { title: "4", uv: -8, pv: 450 },
    { title: "5", uv: 100, pv: 321 },
    { title: "6", uv: 9, pv: 235 },
    { title: "7", uv: 53, pv: 267 },
    { title: "8", uv: 252, pv: -378 },
    { title: "9", uv: 79, pv: -210 },
    { title: "10", uv: 294, pv: -23 },
    { title: "12", uv: 43, pv: 45 },
    { title: "13", uv: -74, pv: 90 },
    { title: "14", uv: -71, pv: 130 },
    { title: "15", uv: -117, pv: 11 },
    { title: "16", uv: -186, pv: 107 },
    { title: "17", uv: -16, pv: 926 },
    { title: "18", uv: -125, pv: 653 },
    { title: "19", uv: 222, pv: 366 },
    { title: "20", uv: 372, pv: 486 },
  ],
};

# Chart Component

<BrushBarChart
    width="100%"
    height={300}
    dataSource={dataSource}
    dashGrid="3 3"
    barSize={20}
    onClick={(details: any) => console.log(details)}
    brushFilter="title"
    brushColor="#8884d8"
    brushHeight={30}
/>

Propriedades

width: Number | String

A largura do container.

height: Number | String

A altura do container.

dataSource: Object

Objeto de fonte dos dados a serem renderizados.

dashGrid: String

Configura o tracejado de fundo do grid.

barSize: Number

Configura o tamanho das barras.

brushFilter: String

Configura o valor do objeto dataSource que será utilizado para realizar a filtragem no brush input.

brushColor: String

Configura a cor do brush input.

brushHeight: Number

Configura a altura do brush input.

onClick: Function

Função de click do gráfico. Esta função receberá o valor referente ao ponto clicado no gráfico.

Stacked Positive and Negative Bar

import { StackedPositiveNegativeBarChart } from "cowlde-charts";

# Data Source Object

const dataSource = {
  bars: [
    { title: "uv", color: "#8884d8", stackId: "a" },
    { title: "pv", color: "#82ca9d", stackId: "a" },
    { title: "amt", color: "#ffc658", stackId: "b" },
  ],
  data: [
    {
      title: "Page A",
      uv: 4000,
      pv: 2400,
      amt: 2400,
    },
    {
      title: "Page B",
      uv: -3000,
      pv: 1398,
      amt: 2210,
    },
    {
      title: "Page C",
      uv: -2000,
      pv: -9800,
      amt: 2290,
    },
    {
      title: "Page D",
      uv: 2780,
      pv: 3908,
      amt: 2000,
    },
    {
      title: "Page E",
      uv: -1890,
      pv: 4800,
      amt: 2181,
    },
    {
      title: "Page F",
      uv: 2390,
      pv: -3800,
      amt: 2500,
    },
    {
      title: "Page G",
      uv: 3490,
      pv: 4300,
      amt: 2100,
    },
  ],
};


# Chart Component

<StackedPositiveNegativeBarChart
    width="100%"
    height={300}
    dataSource={dataSource}
    dashGrid="3 3"
    barSize={20}
    onClick={(details: any) => console.log(details)}
/>

Propriedades

width: Number | String

A largura do container.

height: Number | String

A altura do container.

dataSource: Object

Objeto de fonte dos dados a serem renderizados.

dashGrid: String

Configura o tracejado de fundo do grid.

barSize: Number

Configura o tamanho das barras.

onClick: Function

Função de click do gráfico. Esta função receberá o valor referente ao ponto clicado no gráfico.

Biaxial Bar

import { BiaxialBarChart } from "cowlde-charts";

# Data Source Object

const dataSource = {
  bars: [
    { title: "uv", color: "#8884d8", axisId: "left" },
    { title: "pv", color: "#82ca9d", axisId: "right" },
  ],
  data: [
    {
      title: "Page A",
      uv: 4000,
      pv: 2400,
    },
    {
      title: "Page B",
      uv: 3000,
      pv: 1398,
    },
    {
      title: "Page C",
      uv: 2000,
      pv: 9800,
    },
    {
      title: "Page D",
      uv: 2780,
      pv: 3908,
    },
  ],
};

# Chart Component

<BiaxialBarChart
    width="100%"
    height={300}
    dataSource={dataSource}
    dashGrid="3 3"
    barSize={20}
    onClick={(details: any) => console.log(details)}
    leftAxisColor="#8884d8"
    rightAxisColor="#82ca9d"
/>

Propriedades

width: Number | String

A largura do container.

height: Number | String

A altura do container.

dataSource: Object

Objeto de fonte dos dados a serem renderizados.

dashGrid: String

Configura o tracejado de fundo do grid.

barSize: Number

Configura o tamanho das barras.

leftAxisColor: String

Configura a cor do eixo esquerdo.

rightAxisColor: String

Configura a cor do eixo direito.

onClick: Function

Função de click do gráfico. Esta função receberá o valor referente ao ponto clicado no gráfico.

Composed Charts

Line Bar Area

import { LineBarAreaChart } from "cowlde-charts";

# Data Source Object

const dataSource = {
  areas: [{ title: "amt", color: "#ffc658", type: "monotone", opacity: 0.7 }],
  lines: [{ title: "uv", color: "#8884d8", type: "monotone" }],
  bars: [{ title: "pv", color: "#82ca9d" }],
  data: [
    {
      title: "Page A",
      uv: 590,
      pv: 800,
      amt: 1400,
    },
    {
      title: "Page B",
      uv: 868,
      pv: 967,
      amt: 1506,
    },
    {
      title: "Page C",
      uv: 1397,
      pv: 1098,
      amt: 989,
    },
    {
      title: "Page D",
      uv: 1480,
      pv: 1200,
      amt: 1228,
    },
  ],
};

# Chart Component

<LineBarAreaChart
    width="100%"
    height={300}
    dataSource={dataSource}
    dashGrid="3 3"
    barSize={20}
    onClick={(details: any) => console.log(details)}
/>

Propriedades

width: Number | String

A largura do container.

height: Number | String

A altura do container.

dataSource: Object

Objeto de fonte dos dados a serem renderizados.

dashGrid: String

Configura o tracejado de fundo do grid.

barSize: Number

Configura o tamanho das barras.

onClick: Function

Função de click do gráfico. Esta função receberá o valor referente ao ponto clicado no gráfico.

Line Bar Area Horizontal

import { LineBarAreaHorizontalChart } from "cowlde-charts";

# Data Source Object

const dataSource = {
  areas: [
    { title: "amt", color: "#ffc658", type: "monotone", opacity: 0.7 }
  ],
  lines: [
    { title: "uv", color: "#8884d8", type: "monotone" }
  ],
  bars: [
    { title: "pv", color: "#82ca9d" }
  ],
  data: [
    {
      title: "Page A",
      uv: 590,
      pv: 800,
      amt: 1400,
    },
    {
      title: "Page B",
      uv: 868,
      pv: 967,
      amt: 1506,
    },
    {
      title: "Page C",
      uv: 1397,
      pv: 1098,
      amt: 989,
    },
    {
      title: "Page D",
      uv: 1480,
      pv: 1200,
      amt: 1228,
    },
  ],
};

# Chart Component

<LineBarAreaHorizontalChart
    width="100%"
    height={300}
    dataSource={dataSource}
    dashGrid="3 3"
    barSize={20}
    onClick={(details: any) => console.log(details)}
/>

Propriedades

width: Number | String

A largura do container.

height: Number | String

A altura do container.

dataSource: Object

Objeto de fonte dos dados a serem renderizados.

dashGrid: String

Configura o tracejado de fundo do grid.

barSize: Number

Configura o tamanho das barras.

onClick: Function

Função de click do gráfico. Esta função receberá o valor referente ao ponto clicado no gráfico.