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