# 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} /> ```