Crie um dashboard self-service com apenas 30 linhas de código

Vídeo de autoria do canal indicado, não da IANIA; todos os direitos pertencem ao criador. Transcrição, resumo e tradução gerados automaticamente; o conteúdo no idioma original é preservado na versão em idioma original.

Idioma original: inglês

Vídeo original: Build a self-service dashboard in just 30 lines of code · Canal: AG Grid · 46:45 · Assistir no YouTube

Tópicos: Agentes de IA, Dados, bancos de dados e embeddings, Ferramentas de desenvolvimento com IA

Resumo

O webinar compara a construção manual de um dashboard com AG Grid e AG Charts à configuração de um dashboard self-service com AG Studio, apresentada como uma solução de cerca de 30 linhas de código. A demonstração mostra como analistas podem montar e ajustar visualizações, medidas, filtros e layouts sem depender de um novo ciclo de desenvolvimento. Também apresenta recursos de persistência, permissões e um assistente de IA para criar widgets a partir de prompts. Na sessão de perguntas, os participantes discutem dados no servidor, personalização, integração com outras fontes, o Studio Agent Framework e limites de volume de dados.

Pontos-chave

A construção manual de um dashboard interativo exige integrar dados, filtros, KPIs, gráficos e cross-filtering entre componentes.
Novas solicitações de stakeholders podem transformar ajustes simples em ciclos repetidos de planejamento, implementação e deploy.
AG Studio permite configurar fontes de dados e relacionamentos e incorporar um canvas de criação de dashboards à aplicação.
O estado de um dashboard pode ser usado para fornecer um relatório inicial e também para salvar e restaurar alterações.
Os modos de visualização e edição e outras configurações permitem aplicar restrições aos usuários e aos componentes disponíveis.
Analistas podem criar medidas agregadas, gráficos, filtros e layouts pela interface de arrastar e soltar.
O assistente de IA pode interpretar um prompt, consultar o esquema e o estado da página e adicionar widgets ao dashboard.
O Studio Agent Framework pode ser integrado a diferentes configurações de LLM e permite personalizar agents, prompts e ferramentas.
O mecanismo de dados padrão executa agregações e filtros no navegador; a integração com processamento no servidor exige implementar uma interface própria.
O desempenho depende da estrutura e da complexidade dos dados e das agregações, não apenas do número de linhas.

Capítulos

Início	Capítulo	Resumo
00:02	Apresentação e contexto do webinar	Os apresentadores introduzem o tema e explicam o formato da sessão.
02:06	Requisitos do dashboard	A equipe define o exemplo da Acme Corp e os dados e análises que os stakeholders precisam acompanhar.
04:40	Construção manual com AG Grid e AG Charts	A demonstração integra dados, tabela, gráficos e KPIs para montar o dashboard inicial.
07:17	Filtros e cross-filtering	O exemplo sincroniza filtros de data, filtros da grade e seleções nos gráficos entre os componentes.
10:21	Novas solicitações e o custo de manter dashboards	Novos requisitos ilustram como mudanças recorrentes podem levar a ciclos adicionais de desenvolvimento.
12:27	Configuração do AG Studio	O apresentador mostra fontes de dados, relacionamentos e o canvas de criação do Studio.
15:02	Montagem e persistência de relatórios	A demonstração apresenta a criação de visualizações, o uso de um estado inicial e as opções de salvar e restaurar relatórios.
18:06	Edição do dashboard pela interface	A analista adiciona uma medida, ajusta gráficos e cria um filtro usando a interface de arrastar e soltar.
25:36	Assistente de IA para criar widgets	Um prompt orienta o assistente a analisar o esquema e a página e adicionar uma visualização ao dashboard.
29:39	Perguntas sobre exportação e dados no servidor	A equipe responde sobre exportação para PDF, processamento no navegador e integração com dados no servidor.
32:17	Configuração de dados e integrações	A sessão aborda definição de campos, fontes externas, conjuntos de dados personalizados e modelagem pela interface.
37:28	Temas e design system	Os participantes explicam as opções de tema e a integração do design system do Figma com o Studio.
39:01	Studio Agent Framework e Web MCP	Josh descreve integrações de IA, agents, personalização e o uso de Web MCP para interagir com a aplicação.
43:40	Estado, limites de dados e encerramento	A equipe responde sobre dashboards por usuário e volume de dados, e encerra o webinar.

Citações

É aqui que o AG Studio se encaixa bem. — 12:27

Isso é, essencialmente, dashboards em 30 linhas de código. — 14:32

Você também pode criar ou adicionar widgets usando o assistente de IA. — 25:36

O objetivo do Studio Agent Framework é aceitar todas essas configurações. — 40:02

Conceitos e entidades

AG Grid (ferramenta): Componente usado na demonstração para exibir e filtrar os dados tabulares do dashboard.
AG Charts (ferramenta): Componente de gráficos usado para visualizar dados e permitir cross-filtering.
AG Studio (ferramenta): Produto demonstrado para criar e editar dashboards self-service dentro de uma aplicação.
Studio Agent Framework (ferramenta): Framework que integra agents, prompts e ferramentas para apoiar a criação de dashboards com IA.
data engine (conceito): Mecanismo que recebe consultas do AG Studio e, na configuração padrão descrita, executa o processamento no navegador.
Web MCP (conceito): Tecnologia apresentada como forma de permitir que um agent interaja com ferramentas disponíveis na aplicação web.
Acme Corp (empresa): Empresa fictícia de construção global usada como exemplo para os requisitos do dashboard.
James (pessoa): Apresentador que demonstra a implementação manual e a configuração do AG Studio.
Ian Kelly (pessoa): Designer e engenheiro de visualização de dados que participa da demonstração do Studio.
Josh (pessoa): Desenvolvedor sênior do produto Studio que explica o framework de agents e responde a perguntas técnicas.
Adam (pessoa): Participante que comenta o roadmap para mecanismos híbridos e modelagem de dados.

Tradução completa (pt-BR)

00:02 Olá, pessoal. Bom dia, boa tarde, boa noite, dependendo de onde vocês estão acompanhando. Muito obrigado por participar deste webinar hoje, em que vamos mostrar dashboards de autoatendimento com cerca de 30 linhas de código. Antes de entrarmos no conteúdo, algumas apresentações rápidas para apresentar todos que estão conosco hoje. Para começar, meu nome é James, da Blinds. Sou o líder de Deborah aqui na AG Grids. Vou apresentar alguns slides, trechos de código e demonstrações. E, junto comigo, ajudando

00:34 nas demonstrações e também nos slides, está Ian Kelly. Ian, gostaria de se apresentar? >> Sim. Obrigado. Meu nome é Ian e sou designer e engenheiro híbrido de visualização de dados, com mais de 10 anos de experiência na criação de aplicativos de visualização de dados. Trabalho principalmente no produto de gráficos, mas hoje vou ajudar na demonstração do Studio. >> Ótimo. Obrigado, Ian. E também temos Josh conosco. Josh, gostaria de fazer uma breve apresentação? >> Sim, claro. Sou desenvolvedor sênior no produto Studio. Estou envolvido no projeto desde o início, desde que começamos.

01:05 Recentemente, tenho me concentrado principalmente na IA, na estrutura de agent do Studio que acabamos de lançar na versão três. Vamos falar um pouco sobre isso mais tarde, se vocês tiverem alguma dúvida. >> Ótimo. Obrigado, Josh. Agradeço muito. Antes de começarmos e entrarmos no conteúdo, só algumas informações práticas para responder a algumas dúvidas comuns. A sessão será gravada. Ela ficará disponível sob demanda. Basta acessar o mesmo link que vocês usaram hoje para a sessão e poderão assistir à gravação quando quiserem. Vocês também podem compartilhá-la com qualquer pessoa. Se essa pessoa

01:36 informar o endereço de e-mail, também terá acesso à gravação sob demanda. Em segundo lugar, vamos reservar cerca de 10 ou 15 minutos para perguntas no final. Sintam-se à vontade para enviar as dúvidas que tiverem, não apenas sobre esta sessão, mas também sobre outros assuntos. Vamos fazer o possível para responder. Há uma aba de perguntas e uma aba de bate-papo. Tentem deixar as perguntas na aba de perguntas para podermos acompanhá-las. Então, essas eram todas as informações práticas. Vamos direto ao conteúdo de hoje.

02:06 Hoje vamos falar de uma empresa fictícia, a Acme Corp. Neste exemplo, é uma empresa global de construção, e estamos usando-a para ilustrar um fluxo de trabalho ou caso de uso típico que vemos em muitas empresas dos nossos clientes. Normalmente, começamos com uma pessoa interessada que tem uma solicitação ou uma necessidade. Por exemplo, pode ser um executivo de nível C. Neste caso, essa pessoa decidiu que precisa de uma visão geral dos custos operacionais.

02:36 Por exemplo, quantos fornecedores tem, quantos materiais comprou e qual foi o gasto total com esses itens. Então, entra em contato com o departamento de análise e pede que a equipe entregue isso. Nesse momento, o analista decide que precisa de um dashboard para atender a esses requisitos, incluindo itens como grades, gráficos, filtros e tudo mais. E, claro, a quem pedem para implementar isso? A tarefa vai para a equipe de desenvolvimento, que fica responsável por transformar esses requisitos do

03:06 dashboard em um relatório utilizável com o qual as pessoas possam interagir. Então, hoje vamos nos concentrar nessa transferência de trabalho do analista para o desenvolvedor. Nesta sessão, vou falar mais da perspectiva do desenvolvedor, e Yin falará mais da perspectiva do analista. Para dar um pouco de contexto sobre o que vamos tentar alcançar e construir aqui, vou passar a palavra a Yin, que vai explicar os requisitos deste dashboard para o exemplo em questão. >> Ótimo. Obrigada. Como analista, eu gostaria

03:38 de apresentar os requisitos do nosso dashboard simples e, espero, familiar. Quero um dashboard que permita à nossa equipe de liderança e às partes interessadas acompanhar e analisar nossos gastos. Ele precisa ter filtros rápidos de data, um gráfico que mostre os gastos ao longo do tempo e uma visualização que divida os dados por materiais, fornecedores e gastos. Então, traduzindo esses dois requisitos, precisamos conseguir agregar os dados para mostrar o total de compras e gastos. Precisamos agrupar os dados para que eu possa ver os gastos por

04:10 mês, fornecedor e material. Filtrar os dados por data. E também fazer filtragem cruzada, que permite às partes interessadas filtrar e explorar rapidamente os dados com mais profundidade, simplesmente clicando em um gráfico à medida que surgem perguntas. >> Ótimo. Obrigado, Yin. Neste ponto, é claro, a sequência foi bastante encurtada, mas teríamos conversado com o analista, definido nossos tickets e nosso sprint, e talvez já tivéssemos decidido que, como já usamos AG Grid e AG Charts e estamos familiarizados com esses componentes, criar um dashboard com eles seria uma escolha natural.

04:40 Assim, podemos começar a ver como isso fica na prática, integrando e conectando AG Grid e AG Charts para criar um dashboard. Os próximos slides têm bastante código, mas não vou entrar em muitos detalhes sobre ele. Só quero dar uma ideia do trabalho necessário para fazer essa filtragem cruzada e conectar AG Grid e AG Charts.

05:12 Vou passar por eles relativamente rápido. A primeira coisa que precisamos analisar aqui são os dados. Neste exemplo, mantivemos tudo bem simples de propósito: é apenas um array JSON plano, com cerca de mil linhas, e contém basicamente informações sobre pedidos de compra. O que foi comprado, de quem, em que quantidade, quanto custou: coisas bem simples. Para acessar esses dados dentro do nosso aplicativo, podemos criar métodos auxiliares simples como este. Para colocar os dados na grade, basta retornar todas as informações. Daqui a pouco, vamos configurar a grade para renderizá-las corretamente. Para os gráficos, como mencionou Yin,

05:43 precisamos fazer um pouco de agregação e agrupamento para organizá-los mês a mês e colocá-los no formato aceito por AG Charts. Para os cartões de KPI, também precisamos fazer algumas agregações. Então, estamos apenas somando os totais de todos os diferentes pedidos. Nada muito complexo ou complicado até aqui. Depois que tivermos todos os dados dentro do nosso aplicativo e no formato de que precisamos, temos que fazer algo com eles e visualizá-los. Vamos começar com AG Grids, que é bem simples. Basta obter essas linhas usando aquele método auxiliar. Podemos definir algumas definições de coluna e fazer um pouco de agrupamento aqui, primeiro por material e depois por fornecedor. Podemos agregar os diferentes valores de gastos, custos e quantidades. Depois, basta fornecer os dados das linhas e as definições de coluna ao AG Grid, que cuida do resto. Mais uma vez, é muito simples e direto. Com AG Charts, é bem parecido. Acessamos os dados, passamos para o componente, definimos as séries e o gráfico fica disponível no nosso aplicativo. E, claro, temos um cartão de KPI que não é fornecido pelo AG Grid, então usamos alguns elementos HTML aqui

06:14 de agrupamento aqui, primeiro por material e depois por fornecedor. Podemos fazer algumas agregações de todos os diferentes gastos, custos e quantidades. Depois, basta fornecer os dados das linhas e as definições dessas colunas ao AG Grid, e ele cuida do resto para nós. De novo, é muito simples, muito direto. É bem parecido com o AG Charts. Você acessa os dados, passa-os para o componente, define suas séries e, mais uma vez, temos o gráfico disponível dentro da nossa aplicação. E, claro, temos um cartão de KPI, que não é fornecido pelo AG Grid, então temos apenas alguns elementos HTML aqui.

06:44 projetado para mostrar alguns rótulos sobre um layout simpático de cartões. E, neste ponto, temos uma espécie de esqueleto de um dashboard. Ele parece bem legal. Temos alguns KPIs, um gráfico e uma grade, mas não é muito interativo. Podemos aplicar alguns filtros à grade, mas isso fará com que ela fique fora de sincronia com os outros componentes desta página. Então, a primeira coisa que podemos fazer é começar a aplicar alguns filtros globais. Neste caso, queremos adicionar um filtro de data. Mais uma vez, é bem simples. Podemos usar uma variável de estado para armazenar o intervalo de datas. Nós

07:17 podemos passar isso para esses métodos auxiliares, para que eles filtrem com base nesse intervalo de datas. Depois, podemos simplesmente criar um componente de interface simples ou buscar um em alguma biblioteca para cuidar da parte visual e realmente acionar essas alterações no intervalo de datas, o que fará com que esses diferentes componentes sejam atualizados. E, obviamente, para fazer isso, precisamos atualizar nossos métodos auxiliares que acessam esses dados. Agora, em vez de apenas retornar os dados no formato de que os componentes precisam, eles também fazem um pouco de filtragem e verificam se os dados estão

07:47 dentro do intervalo de datas informado. Mais uma vez, é bem simples. Neste ponto, temos um novo componente que nos permite selecionar diferentes intervalos de datas e, depois que eles são aplicados, dá para ver que todos os componentes filtram juntos, em sincronia uns com os outros. Até aqui, tudo bem simples. Esta próxima etapa é um pouco mais complexa, mas ainda relativamente simples. Queremos poder aplicar aos outros componentes do dashboard os filtros da grade. A abordagem que adotamos aqui — claro, há várias abordagens diferentes para tudo o que estamos

08:18 discutindo aqui, e esta é uma abordagem bem simples, de propósito, para o webinar — consiste em nos conectarmos ao evento on filter changed dentro do AG Grid. Sempre que um filtro é aplicado, pegamos o modelo de filtro e o passamos ao componente pai, que pode então pegar esse modelo e passá-lo de volta para esses métodos auxiliares, acionando a filtragem com base no modelo de filtro da grade. E, claro, também precisamos atualizar esses métodos auxiliares. Assim, eles não levam em conta apenas o filtro de intervalo de datas, mas também aplicam quaisquer

08:48 filtros fornecidos pela grade aos dados e, em seguida, os repassam aos componentes correspondentes. Neste ponto, já conectamos a grade. Se acessarmos a grade e aplicarmos alguns filtros, veremos que eles também afetam os cartões de KPI e o gráfico logo acima. Também podemos usar as outras colunas. Temos filtros na maioria das colunas disponíveis na grade, e tudo é atualizado direitinho em tempo real. A última coisa que precisamos fazer agora é implementar a filtragem cruzada dos gráficos para a grade

09:19 e para os KPIs. A abordagem é bem parecida. Só precisamos tratar um evento de clique, então definimos um listener na nossa série de barras. Quando ela é clicada, chamamos este callback on month click, que é passado pelo componente pai. E então ele pode ser passado, da mesma forma, para… Desculpe, estou vendo alguém mencionar que está com uma tela de carregamento. Mais alguém está enfrentando o mesmo problema? Se estiver, avise a gente para podermos corrigir. Então, neste ponto, podemos simplesmente

09:50 pegar essa variável do mês selecionado e passá-la para nossos vários métodos auxiliares. Neste ponto, podemos atualizá-los para que também levem em conta o mês selecionado, além dos filtros da grade e dos filtros de data. E agora temos um dashboard bem robusto. Podemos acessar a grade, que já vem com os filtros pré-configurados, clicar em um elemento do gráfico e isso aplica filtros cruzados aos cartões de KPI e às grades também. Então, neste ponto, acho

10:21 que é razoavelmente seguro dizer que atendemos aos requisitos iniciais. Eu diria que, neste ponto, o dashboard está praticamente pronto para ser devolvido à Yin, e não foi muito difícil fazê-lo. Então, Yin, gostaria de compartilhar suas impressões e dizer o que achou? >> É, obrigado, James. É um ótimo começo e, depois de testar, estou percebendo que precisamos de um pouco mais, e nossos stakeholders também deram algumas sugestões. Então, algumas

10:53 adições que queremos fazer: seria útil incluir outro KPI mostrando o total de pedidos aceitos em porcentagem. Também gostaríamos de ver um gráfico de pizza com a divisão do gasto total por fornecedor. Também seria útil ver o gráfico de tendências dividido por material. E também queremos que essa experiência

11:26 esteja disponível para usuários de teclado e leitores de tela. E, por último, os stakeholders gostariam de poder exportar esses dashboards para PDF. >> Ótimo. Obrigado, Yen. Acho que, neste ponto, todos esses requisitos parecem bastante razoáveis e provavelmente poderiam ser atendidos sem muito esforço. Mas a questão é que, nesta etapa, precisamos voltar à prancheta. Precisamos voltar à IDE e, assim, entramos

11:56 em outra etapa do SDLC, na qual basicamente precisamos definir o escopo de todo esse trabalho, planejá-lo, depois executá-lo e, por fim, colocá-lo em produção. E acho que percebemos, conversando com tantos de nossos clientes, que o que mostramos no início, essa passagem organizada de uma pessoa para outra, acaba, na verdade, ficando mais parecido com isto: vira um ciclo de entrega de diferentes relatórios, com necessidade de fazer pequenos ajustes neles, enquanto outros stakeholders envolvidos querem ver uma visualização um pouco diferente. E, logo

12:27 você acaba sendo responsável por todo um framework de criação de dashboards, quando, na verdade, tudo o que queria fazer era criar um relatório bastante simples. Então, em vez de implementar toda essa funcionalidade e talvez refatorar a aplicação para que seja mais fácil de expandir com diferentes tipos de filtros e componentes, achamos que é aqui que o AG Studio se encaixa perfeitamente. Ele permite que seus usuários criem dashboards por conta própria, por meio de um componente incorporado diretamente à sua aplicação. Assim como o AG Grid e o

12:58 AG Charts, o AG Studio se encaixa diretamente. A ideia é que o desenvolvedor só precise configurar o Studio uma vez e passar isso para o analista. Então, o analista pode trabalhar com os stakeholders para fazer todos esses ajustes e alterações nos relatórios e criá-los na hora, sem precisar envolver o desenvolvedor nem passar por um ciclo completo de desenvolvimento para fazer mudanças que muitas vezes são simples. Então, vamos ver como é configurar o AG Studio

13:29 e tentar comparar isso com um pouco do código de grade e de gráficos que acabamos de ver. O que temos aqui é apenas um único objeto de dados, que contém dois arrays: um array sources e um array relationships. No array sources, o primeiro objeto é o nosso conjunto de dados de pedidos de compra, que contém todos os dados que estavam no nosso exemplo inicial, naquele array plano. Mas, para atender a esses requisitos adicionais, precisamos de um pouco mais de informação. Precisamos saber mais sobre os fornecedores e sobre os materiais que existem nos pedidos de compra. >> [fungada] >> Então, se quiséssemos fazer isso no

14:00 Na demonstração anterior, provavelmente teríamos que voltar e repensar nosso modelo de dados e como começaríamos a lidar com várias fontes de dados, em vez de apenas uma, e então tudo começaria a ficar mais complexo. Mas, no AG Studio, isso é muito fácil de fazer, e podemos simplesmente definir relacionamentos entre essas diferentes fontes. Então, neste caso, assim como faríamos em um banco de dados relacional, estamos fazendo uma junção muitos-para-um entre as tabelas PO e suppliers, e uma junção um-para-muitos entre as tabelas materials e PO. Depois, podemos simplesmente pegar esse objeto de dados, passá-lo ao AG Studio por meio da prop data, e é basicamente isso. Isso

14:32 é um dashboard em 30 linhas de código. Então, se executássemos a aplicação neste ponto, teríamos algo parecido com isto. À esquerda, a maior parte da tela é ocupada pela tela de arrastar e soltar; é aqui que ficam os diferentes widgets do AG Studio e onde o relatório é montado. Temos o painel de filtros, que permite aos usuários aplicar vários filtros, o painel de componentes, que permite escolher as visualizações necessárias e, se a visualização necessária não estiver disponível, também oferecemos a possibilidade de integrar

15:02 componentes personalizados, para que você possa expandir isso o quanto quiser. Por fim, temos o painel de dados, que contém todos os dados que acabamos de fornecer ao AG Studio. Então, se reproduzirmos o vídeo aqui, podemos ver esse caso de uso principal: selecionamos o componente para o qual queremos criar uma visualização, selecionamos os dados que queremos visualizar — neste caso, o mês da data do pedido — e, no eixo Y, visualizamos o gasto total. O usuário pode acessar o widget, manipulá-lo, redimensioná-lo e movê-lo. Também pode aplicar esses

15:33 filtros à vontade, com base em qualquer um dos campos disponíveis no AG Studio. Assim que os filtros são aplicados, os widgets respondem de acordo. Então, poderíamos simplesmente deixar tudo assim neste ponto e voltar à nossa analista, Tiyen, e dizer: “Aqui está a aplicação. Pode criar o relatório que estava procurando. Fornecemos tudo de que você precisa.” Mas também seria bom se pudéssemos deixar um relatório parcialmente pronto para que Tiyen não precisasse começar do zero. Já fizemos parte do trabalho para definir como esse dashboard

16:04 deve ficar e onde cada elemento deve ser colocado. Então, podemos fazer isso facilmente no Studio usando a API de estado. Podemos acessar o AG Studio, configurar um relatório usando a interface e, em seguida, capturar o objeto de estado gerado pelo Studio, colocá-lo na nossa aplicação e usá-lo como estado inicial. Assim, podemos fornecer a Tiyen um dashboard parecido com este, bastante semelhante ao que criamos no exemplo de grid e gráficos. Além disso, também podemos adicionar alguns recursos

16:34 adicionais. Por exemplo, podemos salvar e restaurar relatórios de forma muito semelhante à abordagem que acabamos de usar para o estado inicial. Basta capturar esse estado, armazená-lo em algum lugar e depois restaurá-lo. Neste exemplo, estamos salvando-o no armazenamento local. Também podemos adicionar restrições. É claro que sabemos que, ao criar esses dashboards, algumas pessoas precisarão criá-los, enquanto outras só precisarão interagir com eles. Por padrão, oferecemos suporte a isso por meio dos modos de visualização e edição, que são configurações predefinidas. Você pode

17:04 levar isso tão longe quanto quiser. Pode restringir os dados a que os usuários têm acesso, quais painéis ficam visíveis, quais componentes eles podem usar nos relatórios, entre outras coisas. É muito fácil integrar isso aos sistemas existentes de permissões baseadas em funções. E, neste ponto, temos um dashboard bem completo, com várias funcionalidades que correspondem de perto ao resultado do exemplo de grid e gráficos feito manualmente. Mas, em vez de algumas centenas de linhas de lógica personalizada, são pouco menos de 30 linhas

17:35 de código de configuração. Então, neste ponto, acho — e estou certamente mais confiante — que esta será a entrega final do desenvolvedor para a analista. Yin, quer continuar daqui? >> Ótimo, obrigada. Todos conseguem ver minha tela? >> Consigo. >> Certo, ótimo. Então, este é um ótimo ponto para retomar o dashboard, porque posso começar a adicionar os recursos que solicitei

18:06 antes. Um desses pedidos foi adicionar um novo KPI. Então, vou editar a tela aqui e abrir espaço suficiente para adicionar um novo widget de KPI. No painel de composição, posso rolar para baixo, procurar o KPI e arrastá-lo. E o KPI que eu queria, que era o percentual de unidades aceitas, não

18:39 é um dos campos brutos do nosso modelo de dados, então vou adicioná-lo como uma nova medida. Vou explicar rapidamente que há duas maneiras de adicionar um campo: uma nova coluna calculada e uma nova medida. Uma nova coluna calculada é calculada no nível da linha, enquanto uma nova medida é um agregado. Para este KPI em particular, quero o valor no nível agregado, então vou selecionar a nova medida.

19:12 Vocês vão ver que este painel mudou e agora posso inserir um título ou nome. Vamos chamá-lo de “percentual de unidades aceitas”. Aqui, quero inserir uma expressão. Neste caso, é apenas uma divisão simples: a quantidade total aceita dividida pela quantidade total geral. Então, basta dividir. Enquanto digito, aparecem algumas funções

19:44 que correspondem às do Excel, então devem ser familiares para vocês, analistas. Quero dividir a soma da quantidade aceita pela soma da quantidade geral. Pronto. Acho que está bom. Agora, sei que quero que isso seja formatado como

20:17 porcentagem, então posso clicar nessa opção de formato percentual. Também quero exibir duas casas decimais, então vou digitar dois. A prévia aqui mostra o que esperar. Então, vou salvar. Agora, isso está disponível para usar no meu widget. Posso voltar ao widget de KPI e arrastar esse campo ou medida para o valor.

20:50 Vou adicionar um título a esse widget: “percentual de unidades aceitas”. Ótimo. Esse é o novo KPI que eu queria adicionar. Em seguida, temos este gráfico de tendências. Antes, eu queria atualizá-lo para dividir os gastos por subcategoria de material. Então, vou

21:21 fazer isso selecionando o campo de subcategoria aqui, na tabela materials, e arrastando-o para a legenda. Como vocês podem ver, o gráfico é atualizado de acordo. E ele parece estar como eu esperava. Vou redimensioná-lo, porque também quero adicionar mais um gráfico, aquele de pizza ou rosca que

21:52 mencionei antes. Quero dividir os gastos por fornecedor. Para isso, quero colocar o campo do valor total gasto no ângulo. Também quero colocar o nome do fornecedor no rótulo, para mostrar essa divisão. Vou formatar um pouco mais este gráfico de rosca. Está bem legal, mas quero adicionar o rótulo do total. Na aba de formatação, há várias opções que você pode ativar. Uma delas é o rótulo do total. Vou ativá-lo. Vou deixar o gráfico um pouco maior, porque parece pequeno. Também quero mostrar os rótulos de dados, então vou ativar essa opção também. Por fim, vou dar um título a ele: “Gasto total por fornecedor”.

22:22 rótulo. Então, na guia Formato, há muitas opções que você pode ativar. Uma delas é o rótulo total. Vou ativá-lo. Vou deixar isso um pouco maior, porque parece pequeno. Também quero exibir os rótulos de dados. Então, vou ativá-los também. Por último, vou dar um título a isso: gasto total por fornecedor.

22:53 Ótimo. Então, estou satisfeito com isso. Em seguida, quero adicionar um widget de filtro. O filtro de data é ótimo, então posso usá-lo para filtrar por período, mas, como minha organização é dividida por categoria, quero permitir que as partes interessadas filtrem rapidamente esta visualização pela categoria de material

23:27 categoria de material. Então, no painel de composição, há um widget de filtro aqui. Há algumas opções, mas quero o filtro de lista, que me dá uma visualização de seleção. Como eu disse antes, quero a categoria de material. Então, vou arrastar esse valor e atribuí-lo como o

23:59 filtro, esse campo. Vou aumentar um pouco o tamanho, porque está cortado. Também quero definir isso como seleção única, não múltipla. E pronto, está pronto para ser usado. Então, ao clicar nele, vocês podem ver que os outros widgets respondem. Agora, depois de adicionar alguns widgets novos, vou apenas organizar

24:32 o layout. Como vocês podem ver, é bem fácil arrastar e redimensionar. Vou fazer esse título ocupar toda a largura. Então, sim, estou bem satisfeito com isso. O James mencionou isso antes, mas ele configurou no código desta aplicação a possibilidade de salvar. Então, se eu clicar em salvar, meu trabalho será salvo e, se eu atualizar a página, vocês

25:04 podem ver que minhas alterações continuam lá, o que é ótimo. A última coisa que… Ah, antes de falar sobre o que eu queria comentar, quero demonstrar rapidamente a filtragem cruzada. Por padrão, o AG Studio permite fazer uma filtragem rápida, ou filtragem cruzada. Basta clicar em qualquer elemento do gráfico para aplicar o filtro aos outros widgets. Então, o painel de filtros aqui

25:36 mostra quais filtros estão sendo aplicados. Temos uma combinação de filtros vindos deste widget e também da filtragem cruzada, ao interagir com o gráfico. Ótimo. Por último, quero falar sobre o novo recurso, que é o assistente de IA. Até agora, fiz alterações neste dashboard

26:07 pela interface, usando o método de arrastar e soltar. Também é possível criar ou adicionar widgets usando o assistente de IA. Assim como em qualquer interface de chat com IA, você pode dar a ele um prompt. Neste caso, vou inventar algo, algo bem simples. Então: mostre de quais países vêm os pedidos e divida-os por subcategoria de material. Vou enviar

26:37 esse prompt. Vocês podem ver que já há um retorno neste painel. Há agents fazendo coisas diferentes. Ele está lendo o esquema dos dados. Está analisando a própria página, o que já existe. E vocês podem ver o canvas mudando ao vivo. Esse widget não estava aqui antes.

27:07 Ele adicionou esse widget. Também o preencheu com alguns campos. Escolheu um tipo de gráfico. E, por fim, quando termina, dá um retorno e um resumo do que fez. Então, essa é, sim, uma maneira de criar um

27:38 dashboard usando o recurso de assistente de IA. >> Incrível. Muito obrigado, Jen. Agradeço muito. E isso praticamente nos leva ao fim do webinar. Claro, vamos reservar um tempo para perguntas daqui a pouco. A parte de IA é um ótimo assunto para encerrar. Como o Josh mencionou, ele é mais ou menos o cérebro por trás desse recurso. Então, não poderia haver ninguém melhor na chamada para conversarmos com ele sobre isso. Fiquem à vontade para começar a enviar suas perguntas pelo painel de perguntas.

28:09 Enquanto esperamos, quero destacar, caso ainda não saibam, que esta é a Studio Launch Week. Durante toda esta semana, publicamos uma tonelada de posts de blog, temos alguns podcasts, webinars, um monte de coisas e também alguns grandes anúncios que não posso compartilhar neste momento. E tudo isso vai acontecer ao longo da semana. Vocês podem escanear o código QR, que levará à página da Launch Week. Lá, podem conferir todo o conteúdo que publicamos. E podem acompanhar as novidades enquanto chegamos aos últimos

28:39 dias da Launch Week. Então, recomendo muito que confiram. Claro, se quiserem continuar por dentro das novidades depois da Launch Week, temos vários links úteis para o AG Studio. Vocês podem conferir nosso roadmap, nosso changelog e a documentação de novidades. Mas, se forem escanear apenas um deles, recomendo muito que se inscrevam na nossa newsletter. Compartilhamos muitas informações úteis sempre que lançamos uma versão. Destacamos alguns pontos dessas versões, com links úteis para a documentação. É uma maneira muito fácil de saber se há novos recursos que possam ser

29:09 úteis para vocês. Por último, mas não menos importante, se quiserem conversar um pouco mais conosco, se isso despertou o interesse de vocês, teremos o maior prazer em fazer uma demonstração personalizada, dar mais informações sobre os preços do Studio ou ajudar vocês a começar com as integrações. Se tiverem alguma pergunta, teremos o maior prazer em ajudar. Então, agora vou direto para as perguntas e respostas, pelos últimos 15 minutos, mais ou menos. Vou seguir a ordem de chegada.

29:39 Espero que tenhamos tempo para responder a todas essas perguntas. A primeira é sobre exportação para PDF. [fungada] Há alguma diferença entre o dashboard interativo e os dashboards para impressão? >> Claro. Sim, é uma boa pergunta. Em geral, nosso objetivo é que sejam exatamente iguais. No entanto, é claro que haverá algumas diferenças complicadas. Por exemplo, se vocês tiverem uma grade com rolagem, precisamos fazer adaptações para a forma como ela será exibida. Mas o objetivo é que corresponda exatamente ao que vocês veem no

30:11 relatório. Algumas dessas opções são configuráveis, mas queremos saber qual direção as pessoas preferem e que opções poderíamos adicionar. >> Incrível. Obrigado, Josh. Uma resposta completa. Temos aqui uma pergunta sobre dados no servidor. O AG Studio consegue lidar com filtragem no servidor, como o AG Grid e o AG Charts? >> Sim, vou responder a essa também. Vou responder. Analisando as perguntas, há mais algumas sobre dados no servidor em geral. Então, espero conseguir responder a todas

30:42 de uma vez. No momento, o Studio funciona com o que chamamos de mecanismo de dados. Essencialmente, ele recebe uma consulta do Studio. Nosso mecanismo de dados é executado inteiramente no navegador. Isso significa que todas as agregações, toda a filtragem e todo o processamento acontecem no navegador. Descobrimos que isso atende a muitos casos de uso, muito mais do que esperávamos. Com milhões de linhas, dá para fazer muita coisa diretamente no navegador.

31:14 No entanto, é claro que alguns de vocês terão dados que precisam ser filtrados primeiro, dados que precisam ser fornecidos pelo servidor, assim como acontece com o Grid. Atualmente, para fazer isso, é preciso implementar a própria interface do mecanismo de dados, que receberia uma consulta do Studio no navegador. Vocês a encaminhariam ao servidor por meio de uma solicitação assíncrona e implementariam a lógica para gerar a resposta à consulta. Temos cache no navegador e outros recursos para evitar sobrecarregar completamente o backend. Mas, por enquanto, é só isso.

31:46 No quarto trimestre, estamos trabalhando em muito mais ferramentas para ajudar com dados no servidor e também em um mecanismo híbrido que permitirá usar as duas camadas ao mesmo tempo. Assim, vocês poderiam executar os dados no servidor e também permitir que o usuário arrastasse uma planilha do Excel, por exemplo. O objetivo é dar essa flexibilidade a vocês e oferecer tudo

32:17 uma variedade de opções, sem deixar de oferecer o desempenho dos dados do lado do servidor. >> Incrível. Não poderia ter pedido uma resposta melhor. Obrigado, Josh. Então, seguindo em frente, isso tem uma relação um pouco indireta com a configuração de dados. O AG Studio exige que os dados sejam configurados? Ele cria esses campos dinamicamente com base nos dados fornecidos? >> Sim. Em geral, sugerimos que você defina seus campos, e fazemos bastante…

32:48 Há muito mais coisas relacionadas à grade sobre o funcionamento de um campo que é muito difícil inferirmos. No entanto, se você não fornecer essa configuração, fazemos uma estimativa. Sabe, se virmos um campo numérico, esperamos que ele contenha um número. Vamos configurá-lo dessa forma. Também vamos nomear as colunas para você etc. Mas, em geral, não há tantas opções por campo para fazer com que ele fique com a aparência certa. Por exemplo, se for um número, talvez deva ser exibido como uma porcentagem. Então, sabe, elas são relativamente simples. São todas configurações que simplesmente…

33:19 tornam muito melhor a experiência com o próprio dashboard. >> Perfeito. Obrigado. Então, na próxima pergunta, sim, ela também está relacionada a dados. Este dashboard pode se conectar a modelos de dados do Power BI / Fabric como fonte? >> Na verdade, acho que Adam e você talvez já tenham conversado sobre isso. É uma questão do que eles disponibilizam. Tecnicamente, qualquer fonte pode ser…

33:50 implementada, sabe, se você fizer a tradução das consultas. Adam, tem mais alguma coisa a acrescentar? >> Sim. Na verdade, estamos trabalhando no roadmap do próximo ano, e o principal ponto que queremos melhorar é como isso se integra a outras fontes de dados que podem ter formatos diferentes. Atualmente, estamos trabalhando em algo chamado mecanismo híbrido, o que significa que fica em algum lugar entre o mecanismo personalizado e o mecanismo de dados padrão do Studio. Como parte disso, esperamos…

34:20 disponibilizar algumas ferramentas para adaptar nosso mecanismo aos mecanismos externos. Mas, por outro lado, a conexão entre o aplicativo e seu próprio mecanismo fica a cargo do aplicativo. No futuro, teremos ferramentas úteis que tornarão essa integração um pouco mais simples. >> Perfeito. Obrigado. Acho que isso tem alguma relação, e vou reformular um pouco a pergunta para tentar chegar ao ponto principal. Essa pessoa tem usuários ou clientes que…

34:51 têm seus próprios conjuntos de dados, e o Studio ficaria por cima deles. Quanto trabalho eles precisam fazer para dar suporte a essas fontes de informação definidas pelos usuários e conseguir combinar essas diferentes fontes? Claro, isso é uma questão da camada do aplicativo, mas talvez possamos esclarecer um pouco o assunto. >> No que diz respeito à camada de relatórios do Studio, é muito fácil codificar, criar a interface e definir como esses campos…

35:25 mudam, e incorporar tudo isso à própria camada do aplicativo. O Studio em si não se importa. Você pode configurá-lo como quiser. Acho que talvez tenhamos algo no roadmap, então vou passar a palavra ao Adam para falar sobre o que podemos fazer nessa área. >> Desculpe, minha internet está muito lenta aqui. Pode repetir a pergunta? >> Sim. Estamos analisando quanto trabalho e esforço seriam necessários…

35:57 para que um usuário pudesse configurar seus conjuntos de dados. E minha pergunta para você era: o que está no roadmap para isso daqui para a frente? >> Ah, sim. Quanto à configuração dos conjuntos de dados para o usuário final, ou seja, as pessoas que estão realmente interagindo com a interface, estamos desenvolvendo uma interface de modelagem de dados. Isso permitirá que os usuários finais…

36:27 basicamente criem junções pela interface no frontend, em vez de fazerem a configuração de dados como o James mostrou. Como parte disso, também vamos simplificar bastante a experiência nessa área. Então, talvez haja mais funcionalidades de edição de dados e uma estrutura de dados mais visual, e talvez mais fontes de dados e tabelas de dados. Essa é a forma mais precisa de dizer. >> Obrigado, Adam. Então, acompanhem isso.

36:57 >> De novo. >> Não sei se aconteceu só comigo, mas parece que o Adam caiu. Acho que conseguimos a maior parte do que precisávamos. Vamos ver se ele consegue voltar. Uma pergunta aqui: há suporte a filtros relativos? Acredito que seja isso que a pessoa quis dizer, e acredito que a resposta seja sim. Então, podemos seguir em frente. Até que ponto há suporte a temas…

37:28 e como isso é feito? Por meio de CSS ou de um objeto de tema? >> Sim, é uma pergunta interessante. Em geral, adicionamos temas por meio de um objeto de tema. Isso porque o Starting usa a API canvas. Portanto, precisamos conhecer suas opções de tema em JavaScript quando usamos o canvas. Obviamente, para tudo que não é canvas, usamos CSS para aplicar os temas. Disponibilizamos um criador de temas no nosso…

38:00 site. Você pode explorar e descobrir rapidamente o que precisa criar. E tudo isso pode ser ajustado. E, novamente, se houver algum elemento específico ao qual você queira ter acesso, é só nos avisar. >> Ótimo. Muito obrigado, e bem-vindo de volta, Adam. Você queria acrescentar mais alguma coisa? Ou… >> Espero que agora vocês consigam me ouvir. Também lançamos um sistema de design do Figma como parte da versão três. Se ainda não conferiram, acessem nossa comunidade do Figma. Isso significa que, como designer, agora você pode configurar…

38:30 o tema dentro do Figma sem precisar, sabe, implementá-lo para ver como fica. Ele também gera uma saída muito útil que você pode importar diretamente para o AG Studio. Assim, o que você cria é exatamente o que projetou. Deem uma olhada. Também temos uma publicação no blog. >> É verdade. Boa lembrança, Adam. Muito obrigado. Acho que temos uma ou duas perguntas sobre IA, Josh. Talvez você possa dedicar um tempinho para explicar os principais pontos, e podemos indicar às pessoas onde encontrar mais…

39:01 informações. A primeira pergunta é: os usuários podem receber uma descrição do dashboard ou do widget gerada por IA, além de poderem criar esses dashboards? >> [fungada] >> Mas, como eu disse, acho que vale a pena dar uma breve visão geral, já que você entende bastante do assunto. >> Sim. Para responder primeiro a essa pergunta, a resposta é sim: é possível obter uma visão do widget ou da página inteira. Como o framework Studio Agent se conecta ao seu LLM, tentamos evitar enviar imagens ou fotos. E, na verdade, nem conseguimos obter uma captura de tela da página. Isso é uma limitação do navegador. Porém, uso uma ferramenta chamada verificações de integridade. Ela faz inferências, conversa com o widget, e o widget fornece informações sobre o quanto está bem configurado. Talvez esteja sem título. Talvez seja um gráfico de barras, mas tenha apenas uma barra muito grande. Sabe, algo que foi configurado de forma inadequada. E a ferramenta pode dar esse retorno ao usuário ou corrigir o problema…

39:31 ela mesma. Então, para falar um pouco sobre o que foi incluído no framework Studio Agent, esse trabalho é ao mesmo tempo simples e complexo. >> [fungada] >> A IA está avançando tão rápido que é muito difícil para as pessoas saberem o que querem e de que precisam, e cada pessoa tem uma configuração diferente. O objetivo do Studio Agent Framework é aceitar todas essas configurações. Então, pronto para usar, você pode apontar um Studio que acabou de, sabe, executar…

40:02 em si. Então, para falar um pouco sobre o que foi incorporado ao framework Studio Agent, o trabalho é ao mesmo tempo simples e complicado. >> [bufa] >> A IA está avançando tão rápido que é muito difícil as pessoas saberem o que querem e do que precisam, e cada pessoa tem uma configuração diferente. O objetivo do Studio Agent Framework é aceitar todas elas. Então, pronto para usar, você pode apontar um Studio que simplesmente, sabe, executa

40:32 instalar e iniciar um app de demonstração rápido, você pode conectá-lo diretamente ao ChatGPT, à Anthropic ou ao que for, e deixá-lo funcionando em cerca de 5 minutos. Como sabem, nossas demonstrações mostram exatamente como fazer isso. A desvantagem é, obviamente, que, com IA, muitas vezes você precisa colocar sua chave de IA no navegador, então não é uma boa opção para produção. A partir daí, há muitos níveis que você pode explorar. Você pode simplesmente criar um proxy para OpenAI e manter praticamente a mesma configuração. Você pode

41:03 usar o AI SDK, que cuida da parte do lado do cliente e do lado do servidor para você e gerencia todo o estado da conversa. Você pode usar um servidor AGUI, um novo protocolo que está surgindo para a comunicação entre o cliente e o servidor. Ou talvez você já tenha criado um aplicativo completo, com sua própria interface e seu próprio backend, e queira apenas as ferramentas. Ou, na verdade, você poderia usar as ferramentas para Web MCP, uma tecnologia que está

41:35 surgindo neste momento. Tudo isso é compatível com o Studio Agent Framework. Depois que você tiver… Então, você pode pegar seu aplicativo, a configuração de que precisa, e poderá integrá-lo da maneira que funcionar melhor. A partir daí, fornecemos um conjunto de agents, ou seja, um conjunto de prompts e um conjunto de ferramentas que trabalham juntos para criar um dashboard. Como vocês viram, ele passaria a tarefa para o agent da página, que definiria os filtros da página; depois, voltaria, e o agent de widgets configuraria o widget e verificaria se estava sendo exibido corretamente, talvez revisando-o se algum filtro alterasse os valores exibidos.

42:06 Esses são os prompts e agents que incluímos no Studio. No entanto, você pode começar do zero e personalizá-los. Pelos nossos testes, eles são bem sólidos. Mas, se você tiver conhecimento especializado do domínio, será difícil para nós igualarmos esse nível, certo? Se você sabe que determinado campo nunca deve ser usado de determinada maneira, ou prefere certos tipos de gráfico em vez de outros,

42:38 tudo isso está disponível para você personalizar e controlar. E a última parte — para a qual estou atualmente preparando uma demonstração online; há uma pequena demonstração na nossa documentação, mas vou fazer uma melhor — é o Web MCP. Essa é uma tecnologia nova. É realmente muito poderosa. Ela permite, essencialmente, transferir todo o controle e o trabalho do agent para a pessoa que está usando o navegador com seu aplicativo. Então, se eu estiver conectado ao ChatGPT para desktop, posso direcioná-lo para o site.

43:10 Ele pode ir até lá e ver quais ferramentas pode criar; pode consultar os dados, criar dashboards, aplicar filtros — tudo o que vocês viram naquela demonstração, ele pode fazer com o Web MCP. Há muitas possibilidades. Temos uma publicação no blog sobre o que lançamos, com bastante informação. Ficaremos muito felizes se vocês tiverem perguntas ou simplesmente quiserem nos enviar um e-mail; por favor, falem conosco. >> Incrível. Obrigado, Josh. Foi muito abrangente. E, falando de um ponto de vista pessoal,

43:40 gostei muito de aprender sobre o framework e sobre a abordagem que estamos adotando. Como você disse, tudo está avançando muito rápido e é algo muito inovador. Foi muito interessante aprender sobre isso e conhecer a abordagem que adotamos, que parece muito bacana. Então, gostei bastante. Temos mais algumas perguntas sobre dados no lado do servidor e agregação no backend. Espero que as perguntas anteriores já tenham respondido a elas. Também temos algumas perguntas sobre o estado. A primeira é: um usuário final pode copiar e

44:10 configurar um segundo dashboard usando o Studio? A resposta é sim. É apenas mais um objeto no array de páginas dentro do estado do AG Studio. Seu aplicativo pode simplesmente adicionar um objeto vazio a esse array, e você poderá começar a criar a partir de um relatório em branco, por assim dizer. E, da mesma forma, sobre a pergunta se podemos salvar dashboards com base no usuário conectado: claro que sim. Cabe ao seu aplicativo determinar quem está conectado e como você quer lidar com a persistência e a restauração desse estado no AG Studio.

44:41 Então, tudo isso fica essencialmente vinculado às APIs de estado do AG Studio. Cabe ao seu aplicativo decidir como, quando e onde esses dados são salvos. Acho que temos aqui uma pergunta sobre limitações de dados. Já falamos disso antes, Josh, sobre a quantidade de dados que o Studio consegue processar no lado do cliente. Mas, mais especificamente, há limites de linhas para o número de pontos em um gráfico de linhas, por exemplo? >> Sim. Como estamos usando o AG Charts por baixo,

45:13 temos limites muito altos para a quantidade de dados que conseguimos exibir. Isso tende a depender de uma expressão matemática complexa, porque não se trata apenas do número de linhas: se você tiver várias tabelas e agregações complexas entre elas, são esses cálculos que levarão mais tempo. Ainda estamos experimentando a melhor maneira de apresentar esses números. Mas, em geral, qualquer coisa com que você normalmente lidaria em uma planilha deve funcionar bem. Quando você está lidando com

45:44 milhões de registros e gigabytes de dados em um banco de dados, provavelmente não vai funcionar tão bem. E descobrir qual é o seu caso de uso será a questão mais importante. Algumas pessoas querem, por exemplo, apenas mil linhas, mas 4.000 colunas, por algum motivo. Tudo depende da configuração dos seus dados. Mas, por baixo do capô, conseguimos lidar com centenas de milhares de pontos de dados em cada widget. >> Ótimo. Obrigado. Isso nos deixa

46:14 na verdade, apenas 1 minuto além do nosso horário. Então, acho que vamos encerrar por aqui. Antes de nos despedirmos, é claro que vocês podem vir conversar conosco se quiserem saber um pouco mais, fazer perguntas para qualquer um de nós, ver uma demonstração ou conversar um pouco sobre preços. É claro que teremos todo o prazer em ajudar da maneira que precisarem. Vocês podem entrar em contato conosco usando este QR code. E não se esqueçam de conferir também a Studio Launch Week, que tem muito mais conteúdo e informações, caso tenham interesse. Mas é isso

46:45 da nossa parte. Josh, Yin e Adam, muito obrigado pelo tempo de vocês hoje. Agradecemos muito. Espero que todos tenham aproveitado algo desta sessão e esperamos encontrar vocês na próxima. Obrigado a todos.

Transcrição original

[00:02] Hello everyone. Good morning, good afternoon, good evening, depending on where you’re tuning in from. Thank you very much for joining us for this webinar today. Uh where we’ll be showing you self-service dashboards in around about 30 lines of code. So, just before we jump into the content, uh just a few introductions here just to introduce everyone that’s with us today. So, first off, my name is James from the blinds. I’m the Deborah lead here for AG Grids. I’ll be taking you through some slides, some code snippets, and some demos. And alongside me helping

[00:34] out with some demos and slides as well is Ian Kelly. Ian, would you like to introduce yourself? >> Yeah. Uh thanks. My name is Ian and I’m a hybrid data viz designer and engineer with over 10 years experience building data viz applications. Um I primarily work on the charts product, but today I’ll be helping out with the studio demo. >> Awesome. Thanks, Ian. And Josh we have with us as well. Josh, would you like to give a quick intro? >> Uh yeah, of course. Um so, I’m a senior developer on the um studio product. Um I’ve been involved in the whole thing

[01:05] from the ground from when we started. Um recently mostly focusing on the AI um the studio agent framework that we just released in version three. Uh we’ll talk about that a bit later if you’ve got any questions. >> Awesome. Thanks, Josh. Much appreciated. So, just before we kick off and get into the content, just a couple health keeping rules for some common questions. So, the session will be recorded. Uh it’s available on demand if you just go to the same link that you used today for the session, you’ll be able to watch the recording anytime you like. You can share that with anyone as well. If they

[01:36] pop their email address in, they’ll get access to the on demand recording there as well. Um secondly, we are going to leave about 10 or 15 minutes for questions at the end. Um so, please feel free to pop any questions in that you might have. Not just about this session, but also in general. We’ll try our best to answer. There is a questions tab and a chat tab. Please try and keep the questions into the questions tab, so we can just keep track of that. Um so, yeah, that’s uh all of the housekeeping stuff out of the way. So, let’s get straight into today’s

[02:06] content. So, today we’re kind of be talking about a fictional company in this sense uh in this instance Acme Corp. So, in this example, they’re a global construction company, and we’re really just using this to kind of illustrate a typical workflow or use case that we see occurring in a lot of our customers’ companies. You know, we typically start with a stakeholder who has a request or a need. So, it might be a C-level executive, for example. In this instance, they’ve decided that they need an overview of their operating costs.

[02:36] For example, how many suppliers they have, how many materials they’ve purchased, and the overall spend uh for those things. And so, they get in touch with their analyst department, and they task them with delivering this. And the analyst at this point decides that they need a dashboard in order to meet these requirements, complete with things like grids and charts and filters and all of that good stuff. And then, of course, who do they ask to actually implement this? Well, it goes off to the development team, and they’re tasked with taking these requirements for the

[03:06] dashboard and actually turning this into a usable report that people can actually interact with. And so, what we’re going to be focusing on today is this kind of analyst to developer a handoff. And for today’s session, I’m going to be talking more from the developer perspective, and then Yin will be talking more from the analyst perspective. So, just to give a little bit of context about what we’re going to be trying to achieve and build here, I’m just going to hand over to Yin to kind of talk us through the requirements for this dashboard in this particular example. >> Great. Thanks. So, as an analyst, I want

[03:38] to introduce um our simple, hopefully familiar dashboard uh requirements. So, um I would like a dashboard that allows our leadership team, our stakeholders, to track and analyze our spend. Um it needs quick date uh filters, a chart showing spend across time, and a view that splits materials, um, suppliers, um, and spend. So, translating those two requirements, we need the ability to aggregate the data to show total purchases and spend. Uh, we need to group the data so I can see the spend by

[04:10] month, supplier, and material. Um, filter filter the data by date. Um, and also cross-filtering, which allows, um, our stake stakeholders to quickly filter and explore the data further by simply clicking on a chart, as questions arise. >> Awesome. Thanks, Yin. So, you know, at this point, obviously, the sequence massively shortened, but, you know, we would gone through a back and forth with the analyst, we would have defined our tickets, uh, defined our sprint, and we may already have decided that, you know, we’re existing

[04:40] AG Grid and AG Charts users, we’ve got familiar familiarity with these components, and so building a dashboard with these components seems like a natural fit for them. And so, we can just go ahead and start taking a look at what that actually looks like from, uh, integrating and wiring up AG Grid and AG Charts to try and build a dashboard. So, the next couple of slides, they do have quite a bit of code in them, but I’m not going to go into the detail of the code too much. I’m just trying to give you an idea of sort of the the the work that goes in to this cross-filtering and wiring between AG Grid and AG Charts.

[05:12] So, I’ll move through them relatively quickly. So, the first thing that we need to look at here is the data. And so, in this example, we’ve purposely kept this really simple, it’s just a flat JSON array, it has about a thousand or so rows, and it’s basically purchase order information. What was purchased, who from, how much, how much did it cost, really simple stuff. And so, in order to access this data inside our application, we can just create simple little helper methods like this. So, for getting the data into the grid, we just return all the information, we’ll configure the grid in a moment in order to render that properly. For the charts, to Yin’s

[05:43] point, we need to do a little bit of aggregation and grouping in order to get this into the month by month basis and into the shape that AG Charts accepts. And for the KPI cards we need to do some aggregation there as well. So we’re just summing some totals across all of the different orders. So nothing too complex or crazy in here at this point. So once we’ve got all of the data inside our application and into the shape that we need it, we need to actually do something with it and visualize it. So we’ll start with AG Grids, really straightforward. We just grab those rows using that helper method. We can define some column definitions, so a little bit

[06:14] of grouping here, firstly by material and then supplier. We can do some aggregations across all of the different spend, the cost and the quantity. We can then just supply the row data and those column definitions into AG Grid and it will take care of the rest for us. Again, really simple, really straightforward. It’s very similar for AG Charts. You access the data, pass it through to the component, define your series and again we get the chart available inside our application. And then of course we have a KPI card which is not provided by AG Grid, so we just have a few HTML elements in here

[06:44] designed to show some labels on top of a nice little card layout. Um and so at this point we have a sort of a skeleton of a dashboard. It looks quite nice. We’ve got some KPIs, we’ve got a chart and we’ve got a grid, but it’s not very interactive. We can apply some filters onto the grid, but that will make it go out of sync with the rest of the components on this page. So the first thing that we can do is start applying some global filters. So in this case what we’re looking to do is add a date filter. So again, this is pretty straightforward. We can just use a state variable to capture the date range. We

[07:17] can pass that through to those helper methods so that they can filter based on that date range and then we can just build a simple UI component or pull that from a library somewhere in order to handle the UI part of this and actually trigger these changes to the date range which will then trigger these different components to refresh. And obviously in order to do this we need to make some updates into our helper methods that actually access this data. So now then rather than just returning the data in the format that the components need, it also does a little bit of filtering and it checks that that data within is

[07:47] within the given date range. So again, pretty straightforward and now at this point we have a new component in here that lets us select different date ranges and once those are applied, you can see all the different components filter in tandem or in sync with each other. So all pretty straightforward at this point. This next step is borderline more complex but still relatively straightforward as well. So we want to be able to apply the filters from the grid to the other components that exist on this dashboard. And the approach that we’ve taken here, of course there’s lots of different approaches to all of the

[08:18] stuff we’re talking about here and this is a fairly simple approach, purposely so for the webinar. But what we’re doing here is we’re just hooking into the on filter changed event inside AG Grid. So anytime a filter is applied, we just take the filter model and pass that up to our parent component who can then take that filter model and pass it back down to these helper methods and trigger the filtering uh based on the grid’s filter model. And so of course we also need to update those helper methods so now they don’t only take into consideration the date range filter, but they also apply any

[08:48] filters that were given from the grid to their data and then supply it to their relevant components. So at this point we’ve now wired up the grid so if we go in, we apply some filters into the grid, we can see them take effect on both the KPI cards and the chart just above. Can also go into the other columns here so we’ve got filtering across most of the columns that are available inside of the grid and everything updates nicely in real time for us. The last thing that we need to do at this point is implement the cross filtering from the charts into the grid

[09:19] and into the KPIs. So it’s a very similar approach. We just need to handle a click event so we define a listener on our bar series. Whenever that’s clicked, we call this on month click callback which is passed down from our parent component. And then that can be passed uh likewise into the Um, sorry, I’m seeing someone mention that they have a loading screen. Is anyone else facing the same issue? If you are, please let us know so we can can fix that. Um, so yeah, at this point we can just

[09:50] take those selected month variable and we can pass that down to our various different helper methods. And so at this point we can update them so that they also take into consideration the selected month alongside the grid filters and alongside the date filters. And at this point we have a pretty robust dashboard here. And so we can go in and we’ve got the grid filters pre-configured and we can go in and click on a chart element and then that cross filters our KPI cards and our grids as well. So at this point I think

[10:21] it’s reasonably safe to say that we have achieved those initial requirements. And so I would say at this point the dashboard is pretty much ready to hand back to Yin and it wasn’t too hard for us to do that. So Yin, would you like to give us your thoughts, see what you made of that? >> Uh, yeah, thanks James. This is a great start and after playing with this, I’m realizing we need a bit more and our stakeholder stakeholders have provided some feedback as well. So Um, some

[10:53] additions that we want to make is another KPI uh, showing total accepted orders as a percentage would be helpful. Um, we’d also want to see that uh, that a pie chart breaking down the total spend by supplier. It’s also helpful to see that trend chart split by material as well. Um, and we also want this experience to

[11:26] be available to keyboard users and screen readers. Um, and lastly, uh stakeholders would want um to be able to export uh these dashboards into a PDF. >> Awesome. Thanks, Yen. So, I think at this point, you know, all of those requirements sound pretty reasonable and I think, you know, they could probably be achieved without too much effort. But, the point is at this stage, we have to go back to the drawing board. We have to go back to the IDE, and so we enter

[11:56] into another stage of the SDLC, where we basically have to scope out all of this work, we have to plan it, and then we have to actually action that, and then push it into production. And I think what we’ve come to realize here is that uh from speaking to so many of our customers that what we showed you here at the start is this kind of nice neat handoff between each other. Actually ends up looking like something like this. Where it’s ends up becoming a loop of delivering different reports, needing to make slight tweaks to them, and other stakeholders involved, they want to see a slightly different view. And next

[12:27] thing you know, you’ve ended up owning an entire dashboard building framework when really all you started out to do was just build a quite simple report. And so, rather than going ahead and, you know, implementing all this functionality, perhaps refactoring the application so it’s a bit more easily scalable for different filter and different component types, instead, we think this is where AG Studio slots nicely in. And it allows your users to build dashboards themselves uh through a component that is embedded directly into your application. So, much like AG Grid and

[12:58] AG Charts, AG Studio slots straight in. And the idea is that the developer just needs to configure Studio once, hand this off to the analyst, and then they can work with their stakeholders in order to make all these tweaks and changes to the reports and build these reports on the fly without needing to involve the developer and without needing to go through a full build cycle in order to make what can often be quite simple little changes. And so, let’s actually take a look at what configuring AG Studio looks like

[13:29] and try and contrast that into some of the uh grid and charts code that we’ve just seen. So, what we have here is just a single data object, and that contains two arrays, a sources array and a relationships array. In the sources array, the first object there is our purchase orders data, and that’s all of the data that was just contained in our initial demo, that flat array. But, in order to meet these additional requirements, we need a little bit more information, so we need to know more about the suppliers, and we need to know more about the materials that exist within purchase orders. >> [snorts] >> So, if we wanted to achieve this in the

[14:00] previous demo, we’d probably have to go back and rethink our data model and how we start handling multiple data sources rather than just a single one, and then it starts becoming more complex. But, in AG Studio, this is really easy to do, and we can just define relationships between these different sources. So, in this case, much like we would in a relational database, we’re just doing a many-to-one join between the PO and suppliers tables, and a one-to-many join between the materials and the PO tables. We can then just take that data object, pass that to AG Studio through the data prop, and that is essentially it. That

[14:32] is dashboards in 30 lines of code. So, if we were to run the application at this point, we would get something that looks a little bit like this. So, on the left-hand side, the majority of the screen there is taken up by the drag-and-drop canvas, so this is where all the different widgets within AG Studio will live, and this is where the report is built. We have the filters panel that allows users to apply these various different filters, the components panel, which lets them pick visualizations that they need, and if the visualization they need isn’t there, we also offer the ability to integrate

[15:02] custom components, so you can extend this as far as you’d like. And then finally, we have the data panel that contains all of that data that we’ve just fed into AG Studio. And so, if we play the video here, we can kind of see this core use case, where we select the component that we want to build a visualization for, we select the data that we want to visualize, so in this case, the month of the order date, and then we’ll visualize on the Y axis the total spend. The user can come in, manipulate that widget, resize it, move it around. They can also apply these

[15:33] filters to their heart’s content based on any of the fields that are available within AG Studio. And as soon as those filters are applied, the widgets respond in turn. And so, really, we could just leave it at this point, and we could go back to our analyst, Tiyen, and we could say, you know, here is the Here is the application. Please go ahead and just, you know, build the report that you were looking for. We’ve supplied you everything you need. But wouldn’t it be nice as well if we could kind of pre-build a report in there so that Tiyen’s not having to start from scratch? We’ve already done a bit of work to figure out how that dashboard

[16:04] should look and where the different things should be placed. And so, we can do that nice and easily in Studio by just using its state API. So, [snorts] we can go into AG Studio, configure a report using the UI, and then we can just capture that state object that’s outputted from Studio, put that into our application, and use that as our initial state. And by doing so, we’re able to provide Tiyen with a dashboard that looks a little bit more like this, which is quite similar to the dashboard that we created in the grid and charts example. What’s more is that we can also add a

[16:34] few additional features on top of this as well. So, being able to persist and restore reports very similar to the approach we’ve just taken around the initial state. It’s just capturing that state, storing it somewhere, and then restoring it. In this example, we’re just pushing it to local storage. And then we can also add guardrails as well. So, obviously, we know that when people are building these dashboards, certain people will need to build them, and certain people will just need to interact with them. And so, by default, we support that through these view and edit modes, which kind of just are these default configurations. You can take

[17:04] that as far as you want. You can restrict what data users might have access to, what panels are currently shown, what components they can use within their reports, and so on and so forth. It’s really be to slit slot into your existing role-based permissioning systems. >> [snorts] >> And so at this point, we have a pretty well-built dashboard with a bunch of functionality that matches our output pretty closely from that hand-rolled grid and charts demo, but rather than a couple of hundred lines of code of custom logic, it’s just under 30 lines

[17:35] of configuration code. And so at this point, I think and I’m certainly more confident that this will be the final handover from the developer over to the analyst. So Yin, would you like to take it from here? >> So Great, thank you. Can everyone see my screen? >> I can. >> All right, great. Um so this is a great uh place to pick the dashboard up because um I can start adding uh those features that I’ve requested

[18:06] um before. So one of those requests was adding a new KPI. So I’m going to edit uh the canvas here, uh make enough space to add a new KPI widget. So in the compose panel, I can scroll down, look for that KPI, and drag it. So um and the KPI that I wanted, which was percent uh units units accepted, that is

[18:39] not one of the raw fields coming from our data model, so I am going to um add that as a new uh measure. So I’ll just take a moment to explain that there’s two ways to add a field. Um there’s a new calculated column and a new measure. So a new calculated column is performed at the row level, and a new measure um is um an aggregate. So with this KPI um in particular, I want this at the aggregated level, so I’m going to go ahead and select uh the new measure.

[19:12] You’ll see that this panel has changed and I can then supply it a title or name. So, let’s just say percent units accepted. Here, I want to give it an expression. So, in this case, it’s just a simple division of the total um accepted quantity over the total uh overall quantity. So, that’s just a divide. So, as I’m typing, there are um

[19:44] some functions that come up and these mirror what uh Excel have, so they should be familiar to you and analyst. So, I want to divide the sum of the accepted quantity by the sum of the overall quantity. There we go. So, I think we’re happy with that. Now, I know I want this uh to be format at formatted as a

[20:17] percentage, so I can click on that percentage format. I also want to display this with two decimal places, so I’ll go ahead and um type in two and the preview here um yeah, just gives me that preview of what to expect. So, I will go ahead and save that. Um so, now this is available to use um in my widget. So, I can click back onto my KPI widget and drag that field or measure um onto that value.

[20:50] Um I’ll just go ahead and add a title to that widget, so percent units accepted. Great. So, that is um the new KPI that I wanted to add. Next is this trend chart. So, previously I wanted to update this to split the spend by material subcategory. So, I’m going to

[21:21] go ahead and do that by selecting the subcategory fields over here under my materials table and drag that over to the legend. And you can see that the chart updates accordingly. And this this seems to look as I expected. So, I’m just going to resize this as I am I also want to add one more chart which is that pie or donut that I

[21:52] mentioned previously. So, I want to split the spend by supplier. So, to do that I want to give the angle the total spend amount field. I also want to give the supplier name to the label to give me that split. So, I’m going to just going to format this donut further. It looks pretty good, but I want to give it the total

[22:22] label. So, under the format tab there is a lots of options that you can enable. So, one of them being the total label. So, I’ll enable that. I’m going to make this a little bit bigger cuz it looks a bit small. I also want to show data labels. So, I will enable that as well. And then lastly I’m going to give this a title. So, total spend by supplier.

[22:53] Great. So, I’m happy with that. Next I want to add a filter widget. So, the filter the date filter is great, so I can use that to filter by time period, but because my organized my organization is split um by category, I want to allow the stakeholders to quickly uh filter this view by the material

[23:27] material category. So, under my composed panel, there is a filter widget over here. Um there’s a couple options, but I want the list filter, um which gives me um a a select view. So, um as I said before, I want the material category. So, I’m going to drag that value, give it to that as give the

[23:59] filter um that field. Just going to make this bigger as it’s cut off. Um I also want to set this as a single selection, not multiple. Um and so, and it’s ready to start um ready for action. So, as I’m clicking on it, you can see the other widgets um respond. Now, I’m just going to after adding some new widgets, I’m just going to tidy up

[24:32] um the layout. So, as you can see, it’s quite easy uh to drag and resize. So, I’m just going to make this title span the full width. Um so, yeah, so I’m quite happy with this. Um so, James has mentioned this earlier, but he that but he’s configured in this application code that we can save. So if I click on save, it saves my work and if I refresh, you

[25:04] can see that my changes are still there, which is great. The last thing that Oh, before I talk about what I wanted to talk about, I wanted to just quickly demonstrate the cross filtering. So out of the box, AG Studio allows you to quick filter so or cross filter. So by just clicking any elements on the chart, um it applies the filter across the other widgets. So the filter panel here

[25:36] um tells you what filters are being applied. So we’ve got a mix of filters coming from this widget and also with the cross filter by interacting on the chart. Great. So lastly, I want to talk about the new feature, which is the AI assistant. Um now, so far I’ve been making changes on this dashboard

[26:07] via the UI, the drag and drop method. Um you can also create or add widgets using the AI assistant. So just like any AI chat interface, you can give it a prompt. In this case, I I’m just going to make something up, something quite simple. So um show me which countries orders are coming from and split this by material subcategory. So I’m just going to go ahead and send

[26:37] that prompt. So you can see that there’s already feedback coming uh coming back in this panel. There’s agents doing different things. It’s reading the data scheming schema. It’s looking at the page itself, what’s existing. And you can see the canvas changing live. So, this widget wasn’t there before. Um

[27:07] the Um it’s gone ahead and added that widget. It’s also populated that widget um with some fields. It’s chosen um a chart type. And and then lastly, once it’s done, it gives feedback and summary on what it’s done. So, that is uh yeah, one way that you can create a

[27:38] dashboard using the AI assistant feature. >> Awesome. Thank you very much, Jen. Much appreciate it. And that pretty much brings us to the end here of the webinar. So, of course, we’re going to leave some time for questions in just a moment. The AI piece is a nice piece to end on. As Josh mentioned, he is kind of the brains behind that feature. So, you couldn’t have anyone better on the call to sort of pick his brain around that. So, please feel free to start throwing your questions into the questions panel.

[28:09] Um just while we wait for that, I do want to call out, in case you weren’t already aware, that it’s currently Studio Launch Week. So, this entire week we’ve been running a ton we’ve published a ton of blogs, there’s some podcasts, webinars, a whole bunch of stuff, and then some big announcements that I can’t share at the moment. And this is going to be running all week. So, you can scan the QR code, it will take you over to the landing page for Launch Week. You can check out all the content and stuff that we’ve been putting out. And you can keep up to date as we go through the last couple of

[28:39] days here of Launch Week as well. So, really do encourage you to check that out. Of course, if you do want to stay up to date outside of Launch Week, Uh we have a bunch of handy links here for AG Studio. You can check out our road map, our change log, our what’s new documentation. But if you are only going to scan one of these, I’d highly recommend you sign up to our newsletter. We share lots of useful information every time we put out a release. Uh we’ll share some highlights from those releases with some handy links to the docs. It’s a really easy way to see if there’s new features that might be of

[29:09] value to you. Last but not least, of course, if you do want to speak to us a little bit more, um if this sparked your interest, we’d be more than happy to run a sort of custom demo for you, give you a little bit more information around Studio’s pricing, or help you get started with your integrations. If you’ve got any questions for us, we’re more than happy to help. So, at this point, I’m going to jump straight over into our Q&A for the last 15 minutes or so. So, I’m just going to go on a first-come, first-serve basis.

[29:39] Hopefully, we have the time to get through all of these questions. So, the first one’s around PDF exporting. Is [snorts] there a difference between the interactive dashboard and the printable dashboards? >> Sure. Um yeah, that’s a good question. Um in general, we’re aiming for them to be exactly the same. Um however, there are obviously going to be some uh tricky differences. For example, if you have a grid that can scroll, um you know, we have to make adaptations for how that will look. Um however, the goal is to be one-to-one with what you see in

[30:11] your report. Um some of that is configurable, um but we’re interested to hear which, you know, direction people want to go and what options uh we might be able to add there. >> Awesome. Thanks, Josh. Comprehensive answer. So, a question here around server-side data. So, can AG Studio handle server-side filtering like AG Grid and AG Charts? >> Yeah, so I’ll take that one again. Um I’ll answer this So, looking through the questions, there’s a few more that talk about server-side data in general. Um so, hopefully, I can answer all of these

[30:42] at once. Um, right now uh Studio runs off what we call a data engine. Um, this is essentially something that accepts a query from Studio. Um, our data engine runs entirely in the browser. So that means that all the aggregations, all the filtering, all the work done happens within the browser. Now, we’ve actually found that this handles so many use cases, way more than we actually expected. You know, millions of rows, you you can do a lot of work purely in the browser.

[31:14] However, obviously some of you will have, you know, data that needs to be filtered first, data that needs to have be served up from the server side, same as with Grid. Currently, the way to do that is to implement your own data engine interface, but you would accept a query from Studio in the browser. You would hand that off through over, you know, um, an async request to your server, and you would work out the logic to implement the the answer to that query. We do browser side caching, we do some other features to avoid it, you know,

[31:46] absolutely hammering your back end. Um, but right now that’s all. Coming in Q4, we are working on um, a lot more tools to help with server side data, um, and also a hybrid engine that will allow you to um, do both layers at the same time. So you could, you know, have your server side data run, and also allow your user to drag in an Excel spreadsheet, for example. The goal is to give you that flexibility, um, and give you the full

[32:17] range of options while still giving you the performance that server side data that provides. >> Amazing. Couldn’t have asked for a better answer. Thank you, Josh. Um, so moving on, slightly related to around data configuration. So does AG Studio require the data to be configured, it, does it create those fields dynamically based on the data that is supplied to it? >> Yeah, so in general, we suggest that you define your fields, and we do a lot

[32:48] There’s a lot more relative to grid with how a field operates that is very hard for us to infer. However, if you don’t provide that config, we do a best guess. You know, if we see a number field, we expect it to be a number. Um you know, we’ll configure it that way. We’ll, you know, name the columns for you, etc. But, it’s generally not too many options per field to just actually get it looking right. For example, if it’s a number, well, maybe it should be shown as a as a percentage. So, you know, they’re They’re relatively simple. They’re all configurations that just

[33:19] make the dashboard experience itself a lot better. >> Perfect. Thank you. Um so, in this next question here, uh yeah, I It’s also related to data. So, can this dashboard connect to Power BI {slash} Fabric data models as a source? >> So, I actually think Adam and you might have had experience uh discussing this already. Um it’s a question of what they expose. Um any source can technically be

[33:50] implemented, you know, if you do the query translation. Um Adam, do you have any extra uh bits to add to that? >> Yeah, so actually we’re working on the road map for next year, and the key part we want to improve is how this integrate with other data sources that might come in different shapes and form. So, currently we are working on something called um hybrid engine, so which means that it’s somewhere in between the custom engine and the uh default data engine uh from Studio. Um with part of that, we will hopefully uh hopefully

[34:20] provide a bit of toolkit to, you know, adapt um our engine to the external engines. But, then again, the connection between application and your own engine that’s with the application. Uh we will have useful tool kits come up in the future that make that journey a bit smoother. >> Perfect. Thank you. Um I guess this is somewhat related and I’m going to slightly rephrase the question to try and get to the essence of it. So, this person has uh users or customers who

[34:51] have their own data sets and Studio would sit on top of this. So, how much work do they need to do to be able to support those user-defined sources of information and be able to join those different sources up. So, of course that’s kind of like an application layer question, but perhaps we could shine some light on that. >> So, as far as the Studio uh reporting layer is concerned, it’s very easy for, you know, you to encode, create UI, define how those fields um

[35:25] change, and build that all into your application layer itself. Um Studio itself doesn’t care. You know, it can you can configure that however you like. Um I do think we might have something on the road map, so I’ll hand back over to Adam uh for what we might be doing in this area ourselves. >> Sorry, my my internet is super laggy here. Can you repeat that question? >> Uh yes, so we’re looking at um how much work and effort it would take

[35:57] for, you know, a user to a user how much development work it would take for to allow a user to configure their data sets. Um and my question to you was are we what’s the you know, what’s on the road map for this going forward? >> Oh yeah, so um in terms of configuring data set, um for the front for the front for the end user, people who are actually interacting with a UI, um so we have data modeling UI coming up. So, which means that it will allow the end users

[36:27] to basically create joints from the UI on the front end instead of you know what James has showed you and configuring from the data configuration. As part of that we will streamline a lot of the experience around the area as well. So potentially some more data editing functionality and more visualized data structure and maybe perhaps more data source data tables. Um It’s more correctly. >> Thank you Adam. So watch this.

[36:57] >> Again. >> Not sure if that’s just me, but looks like Adam’s dropped. I think we got most of what we needed there. We’ll see if he’s able to join back. So question here. Does it support related filters? I believe this probably means relative filters and I believe the answer is yes to that question. So we can probably move swiftly on. Um to what extent is theming being

[37:28] supported and how is it done? Is it done through CSS or through a theming object? >> Yeah, so it’s an interesting question. Theming we generally do add through a theming object. That is because starting uses canvas API. So we need to know your theming options, you know, in JavaScript when we’re using the canvas. Obviously for anything that’s non-canvas we are using CSS to do theming. We provide a theming builder on our

[38:00] website. You can go through and see what it is that you actually need to create quite quickly. And all of that is very adjustable. And again, if there’s any particular bits that you want access to, just let us know. >> Awesome. Thank you very much and welcome back Adam. Was there anything else you wanted to add there? Or >> Hopefully you can hear me now. So we actually also pushed out a Figma design system as part of version three. If you haven’t checked that out, go to our Figma community. So, what it means that as a designer, you can now configure

[38:30] theming inside of Figma without having to, you know, actually build it to see what it looks like. It also generates a very helpful output you can directly import into AG Studio. So, what you build is actually what you have designed. Check it out. We also have a blog post as well. >> We do indeed. Good catch, Adam. Thank you very much. Um so, I think we’ve got one or two questions here about AI, Josh. So, maybe if you just want to spend a small amount of time kind of just covering all of the bases here and we can kind of point people in the right direction for more

[39:01] information. But, the first question here is just around how can users Sorry, can users get an AI description of the dashboard or the widget as well as being able to actually build those dashboards. >> [snorts] >> Um but, yeah, like I said, I think it might be worthwhile just kind of giving a a little overview given your expertise. >> Yes. Um so, to answer the that question first, the answer is yes, it can get a view of the the widget or the whole page. Um since we’re not since

[39:31] the Studio Agent framework plugs into your LLM, we try and avoid sending you images or pictures. And in fact, we can’t actually get a screenshot of the page. It’s just a limitation of the browser. Though, I use a tool called health checks. So, it will infer it will talk to the widget and the widget will tell it information about how well configured it is. Maybe it’s missing a title. Maybe, you know, it’s a bar chart, but it’s only got one very large bar. You know, something that’s been poorly configured. And it can feed that back to the user or it can fix it up

[40:02] itself. Um so, to talk a little bit about what’s gone into the Studio Agent framework, the piece of work while both it is both simple and complicated. >> [snorts] >> AI is moving so quickly that it’s very hard for people to know what they want and what they need and everybody has a different setup. The goal of the Studio Agent Framework is to accept all of those. So, out of the box, you can point a studio that you just, you know, run

[40:32] install and boot it up a quick demo app, you can point that directly at chat at GPT or Anthropic or whatever it is and you can have it running in about 5 minutes. You know, our demos will demonstrate exactly how to do that. The downside of that is obviously that the AI is uh you often have to put your AI key into the browser, so it’s not great for production. From there, there are many levels you can then go through. You can um simply create a proxy for OpenAI and keep roughly the same setup. You might

[41:03] use AI SDK um which do does the sort of the client-side, server-side piece for you and manages all your conversation state. You might use an AGUI um ser- uh server which is a new protocol that’s emerging for how to talk between um the client and server. Or it might be that you’ve already got a full application that you’ve already built with its own UI, its own back end and you just want the tools. Um or in fact, the tools you could use for WebNCP which is a technology that’s

[41:35] emerging at the moment. All of that is supported by the Studio Agent Framework. Once you’ve got up your So, you can take your application, your setup that you need and you will be able to fit in with what works. From there, we provide a set of agents, so essentially a set of prompts and a set of tools that work together to build a dashboard. So, you saw there, it would hand off to the page agent, the page agent would set the filters for the page um then it would come back and then the widget agent would, you know, configure

[42:06] that widget and check that it was showing correctly, you know, maybe revisit it if some filter changed the values that we’re showing. Those are the um prompts and agents that we ship with Studio. However, you can, you know, start from scratch, you can customize those. They are from our uh testing, they’re pretty solid. However, if you have domain expertise, it’s going to be hard to for us to match that, right? If you know that this certain field should never be used in this certain way, or you prefer certain chart types over others,

[42:38] that is all available for you to customize and control. And the final piece uh which I am currently in the process of getting a demo online for, um there is a small one in our docs, but a better one, is uh Web MCP. Um so, this is a new technology. It’s really, really powerful. It allows you to essentially hand off all the agent owners, all the agent work for the person who is using your the browser with your application. So, you know, if I’m logged into ChatGPT desktop, I can point it to the website.

[43:10] It can go there, and it can see what tools it can create, you know, it can interrogate the data, it can um build dashboards, filter, you know, everything it can do that you saw in that demo, it can do with a Web MCP. Whole range of things. There’s a blog post about the what we’ve um released. Lots of information. We’re very happy if you’ve got questions or um you just want to email us, uh please let us know. >> Amazing. Thanks, Josh. Super comprehensive, and just from a personal

[43:40] point of view, I’ve really enjoyed learning about the framework, the approach we’re taking, you know, like you said, it’s moving so quickly, and it’s such a novel thing. It’s been really interesting to learn about and see the approach that we’ve taken, which seems really cool. So, I’ve certainly enjoyed that. Um [snorts] few more questions here around server-side data and aggregation on the back end. So, hopefully those have already been answered by our earlier questions. Um we do have a couple of questions here around state? So, the first one is can an end user copy and

[44:10] configure a second dashboard using Studio? The answer is yes, you know, it’s just another object in that page is array inside the state of AG Studio. And there your application can just append an empty object into that array and you’ll be able to build from a blank report, so to speak. And then similarly, the question here around can we save dashboards based on a logged in user? Of course you can. It would just be up to your application to determine who’s logged in and how you want to handle that persistence and restoring of that state into AG Studio.

[44:41] So, all of it is essentially just hanging off the back of the state APIs in AG Studio. It’s up to your application, you know, how, when, and where that data is saved. Um so, I think well, that is a question here around data limitation. So, we did touch on this earlier, Josh, you did around how much data Studio can handle in the client side, but more specifically, are there row limitations to the number of points in a line chart, for example? >> Yes, so since we’re using um AG Charts

[45:13] underneath, we have way like huge ceilings for the amount of data we can actually display. It tends to come down to a complex mathematical expression because it’s not just the number of rows cuz if you have multiple tables and complex aggregations across those tables, that’s the calculations that will take longer. Um we’re still experimenting with the best way to sort of expose those numbers. But in general, you know, anything you would normally deal with in a spreadsheet it’s going to be fine. When you’re looking at

[45:44] millions and you know, gigabytes of data in a database, then it’s probably not. And it’s you know, finding your use case is going to be the bigger question. You know, we have some people who want, you know, just a thousand rows, but you know, 4,000 columns for some reason. It’s it’s all about your data setup. Um but, you know, under the hood, we can handle, you know, hundreds of thousands of data points within each widget. >> Awesome. Thank you. Um that does bring

[46:14] us to, well, just 1 minute over our time, actually. And so, I think we will bring things to a close there. So, just before we say goodbye, uh of course, we do have the option to come and speak to us if you would like to learn a little bit more, pick any of our brains, see a demo, talk a little bit about pricing. Obviously, we’re more than happy to support you in any way that you need to, so you can get in touch with us through this QR code. Uh and don’t forget to check out Studio Launch Week as well for a whole bunch more content and information, uh should you be interested. Um but, that’s everything

[46:45] from us. So, Josh, Yin, Adam, thank you all very much for your time today. Much appreciated. Hope you all got uh some value out of this session, and uh yeah, looking forward to seeing you on the next one. Thanks, everyone.