cowlde-charts v1.1.3
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.