---
# System prepended metadata

title: Adicionar suporte a drill no gráfico de tabela

---

# Adicionar suporte a drill no gráfico de tabela

Hoje temos suporte a drill down/anyware para alguns tipos de gráficos, como o gráfico de pizza, ou o de barras. Alem desses precisamos dar suporte ao drill no gráfico de tabela, então será necessário realizar toda a análise e implementação para que isso seja possivél já que os gráficos de tabela, não dão suporte ao drill.

**Exemplo de uso:**

Na tabela abaixo foi configurada dentro do KPI builder para que quando clicarmos sobre alguma linha seja feito um filtro pelo vendedor correspondente a linha clicada.

| Vendedor | Total de Vendas |
| -------- | --------------- |
| João     | R$ 10.152,60    |
| Maria    | R$ 9.130,02     |
| José     | R$ 8.324,88     |
| Pedro    | R$ 5.456,93     |

Ao clicarmos na linha do vendedor **João** será carregado o drill de outra tabela, a qual foi configurada para mostrar o cliente e o valor de cada venda que João realizou, como podemos observar abaixo:

| Vendedor | Cliente  | Valor da Venda   |
| -------- | -------- | ---------------- |
| João     | Bruno    | R$ 4.523,60      |
| João     | Raimundo | R$ 2.235,00      |
| João     | Roberto  | R$ 1.503,00      |
| João     | Ana      | R$ 1.891,00      |

**Separação inicial das tarefas e estimativas de hora:**
* (6h) - [Front] - Adicionar a propriedade onClick na AgGrid, e adequar o seu retorno para que faça a mesma função dos outros charts.
* (8h) - [Front] - Modificar o componente Kpi.jsx para que utilize o atributo value no lugar de categoria quando for do tipo tabela e ajustar a montagem dos filtros.
* (2h) - [Front] - Validar se o componente View funcionará de forma correta quando chamado a função onClick pela AgGrid.
* (24h) - [Front] - Possibilitar adicionar drills nos Kpis do tipo tabela dentro do KPI Builder e analisar o que será necessário alterar o back end.
* (20h) - [Back] - Adicionar novo atributo KpiValue na entidade DrillFilter e criar validações sobre os atributos KpiValue e KpiCategory.
* (2h) - [Back] - Gerar migration.
* (2h) - Validar se a alteração no backend não irá impactar no filtro que é criado ao realizar o drill.
* (32h) - Testes na web e mobile.

*Horas de desenvolvimento: 64h
Horas de teste: 32h
Total de horas: 96h***



2. Levantamento técnico

* AgGrid tem suporte para seleção de linha:

```
handleGridReady = ({ api }) => {
    this.gridApi = api;
};

handleSelect = () => {
    console.log(this.gridApi.getSelectedRows());
};

<AgGri
    ...
    onGridReady={this.handleGridReady}
    rowSelection="single"
    onSelectionChanged={this.handleSelect}
/>
```


