findme-emaki-charts v1.7.9
Findme-emaki-charts
Findme-emaki-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 findme-emaki-charts
Storybook
Para acessar o storybook, rodar no diretório raiz do repositório o seguinte comando:
$ npm run storybook
Para buildar uma versão estática do storybook, rodar no cmd:
$ npm run build-storybook
# Uma nova pasta chamada static-storybook será criada contendo os arquivos para deploy no servidor web de preferência
Para rodar a versão estática gerada, após buildar o storybook, rodar no cmd:
$ npm run static-storybook
Para realizar o deploy da build do storybook no chromatic, rodar no cmd:
# Obs: Antes de realizar o deploy, verifique no package.json se o token do projeto no script "chromatic" coincide com o token do projeto de destino.
# Ex: "chromatic --project-token=<token-do-projeto> --exit-zero-on-changes"
$ npm run chromatic
Cypress Tests
Para rodar os testes dos componentes com cypress, rodar no diretório raiz do repositório o comando:
$ npm run test
Caso deseje abrir o cypress, rodar:
$ npm run cypress
Eslint
Para rodar o eslint no código fonte, rodar o seguinte comando no diretório raiz do repositório:
$ npm run fix
Compilação
Para compilar o código fonte em typescript, rodar o seguindo comando no diretório raiz do repositório:
$ npm run compile
Após rodar o comando, será gerado um novo diretório "dist" contendo os arquivos do código fonte compilados para javascript.
Deploy
Para subir a versão atual para o NPM, rodar o seguinte comando no diretório raiz do repositório:
$ npm run deploy
Exemplos
Line Charts
Simple Line
import { SimpleLineChart } from "emaki-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 "emaki-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 "emaki-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 "emaki-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 "emaki-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 "emaki-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 "emaki-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 "emaki-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 "emaki-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 "emaki-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 "emaki-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 "emaki-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 "emaki-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.
Scatter Charts
Simple Scatter
import { SimpleScatterChart } from "emaki-charts";
# Data Source Object
const dataSource = {
axes: [
{
type: 'number',
dataKey: 'x',
title: "Eficiência de atividades",
unit: '%',
label: {
value: 'Eficiência de atividades',
offset: 0,
position: 'bottom'
},
},
{
type: 'number',
dataKey: 'y',
title: "Eficiência de checklists",
unit: '%',
label: {
value: 'Eficiência de checklists',
angle: -90,
position: 'insideBottomLeft'
}
},
],
scatters: [
{
color: 'rgb(13, 76, 138)',
data: [
{ label: 'Local A', x: 100, y: 200 },
{ label: 'Local B', x: 120, y: 100 },
{ label: 'Local C', x: 170, y: 300 },
]
},
{
color: 'rgb(227, 82, 34)',
data: [
{ label: 'Total', x: 200, y: 260 },
]
}
],
}
# Chart Component
<SimpleScatterChart
width="100%"
height={300}
dataSource={dataSource}
/>
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.
XAxisTickFormatter: React.Component
Componente de formatação dos ticks do eixo X
YAxisTickFormatter: React.Component
Componente de formatação dos ticks do eixo Y
tooltipFormatter: React.component
Componente de formatação dos tooltips
3 months ago
7 months ago
8 months ago
8 months ago
8 months ago
9 months ago
8 months ago
8 months ago
9 months ago
9 months ago
9 months ago
8 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
12 months ago