스크립트
00:00:00O TanStack fez isso de novo, desta vez resolvendo gráficos em JavaScript com o TanStack Charts.
00:00:04Ele promete um tamanho de pacote menor do que bibliotecas como ReCharts, tem suporte a SVG e
00:00:08saídas em canvas, animações, dicas de ferramentas, interações e, como a maioria das bibliotecas do TanStack, possui um
00:00:13núcleo agnóstico de framework, segurança de tipos e uma ótima experiência de desenvolvedor. E apesar de ser tão novo,
00:00:18você já pode construir tantos tipos de gráficos com ele, desde um gráfico de linhas básico
00:00:22ou um gráfico de barras, até outros mais complexos como um diagrama de Sankey, um mapa de árvore, mapas de calor, gráficos de radar,
00:00:27gráficos de rosca, medidores e até mapas-múndi bem legais. Ele provavelmente já consegue fazer o que você precisa
00:00:32agora. Agora, a primeira coisa que quero abordar é como o TanStack Charts realmente aborda os gráficos,
00:00:41porque ele faz isso de forma semelhante a uma biblioteca como o ggplot2 no R, ele usa uma gramática de gráficos. Esta
00:00:47abordagem não trata um gráfico como um tipo fixo; na verdade, eles são uma composição de marcas,
00:00:51escalas e mapeamentos. Então, em vez de pedir um gráfico de barras, você especifica algo como “coloque algumas barras
00:00:56aqui, mapeie esta variável para o eixo x, aquela para o eixo y e aplique estas escalas” e, a partir dessa descrição,
00:01:01um gráfico emerge. É uma diferença muito sutil, mas é parte do que torna esta biblioteca extremamente
00:01:05flexível. Quer dizer, alguém tuitou perguntando se ela consegue fazer um gráfico assim, e a resposta foi sim.
00:01:11Este não é um tipo de gráfico integrado, a biblioteca é apenas flexível o suficiente para criá-lo.
00:01:14Sobre como isso funciona, se dermos uma olhada nesta demonstração de gráfico de barras que mapeia a frequência de
00:01:18letras em inglês, o código mais importante para isso tem apenas 20 linhas. Ele começa com a definição de um gráfico
00:01:23usando a função define chart, e dentro dela começamos com as marcas. Você pode pensar
00:01:28nas marcas como os elementos que são efetivamente desenhados, como suas linhas, pontos ou barras. Eu criei um site de demonstração
00:01:32tentando usar todas as marcas disponíveis no TanStack Charts, e acho que há cerca de 55 delas,
00:01:37então este deve ser um exemplo bastante bom dos gráficos que você pode construir no TanStack Charts,
00:01:40e há muitos deles. Você vai ter que ter paciência comigo aqui,
00:01:43mas você pode ver que temos nossos gráficos de barras normais, quer você os queira na horizontal ou na vertical,
00:01:47o mesmo com coisas como linhas e áreas. Depois, também temos nossos gráficos de pontos,
00:01:51temos uma regra, que é a linha pontilhada que atravessa o gráfico, onde você pode tê-la na vertical,
00:01:54você pode criar um gráfico de marcações de escala (tick), novamente no eixo x ou y, você tem um retângulo, uma célula, faixas,
00:01:59setas, vetores para criar um campo de vento, conexões, hexágonos,
00:02:04texto, para que as marcas possam ser textos renderizados onde você quiser no gráfico. Temos molduras,
00:02:08linhas, diferenças, gráficos de regressão linear, caixas, gráficos de violino
00:02:13e gráficos de waffle. Você já pode criar mapas de contorno com isso. A propósito,
00:02:17esta biblioteca foi lançada há uma semana, é louco, tem todos esses recursos e a lista ainda continua.
00:02:22Podemos criar este gráfico, seja lá o que isso for, eu nem sei para que serve.
00:02:25Temos um mapa de árvore, um gráfico de explosão solar, diagramas de Sankey, guia de foco com retículo,
00:02:29gráficos radiais como gráficos de pizza, roscas ou radares, e então
00:02:33finalmente aqui embaixo, também temos geoshape se você quiser seus mapas-múndi. Como eu disse, há muitos
00:02:38deles que você pode combinar para criar praticamente qualquer gráfico de que precise. Voltando à nossa demonstração de gráfico de barras,
00:02:42a única marca de que preciso é bar y, e dentro dela você passa seus dados,
00:02:47esta matriz de objetos. Depois disso, você define qual deve ser a chave do eixo x e qual deve ser a chave
00:02:51do eixo y, o que é ótimo porque significa que você não precisa adaptar seus dados a uma estrutura específica;
00:02:56você pode simplesmente defini-la aqui. Também é seguro em termos de tipos, o que significa que se eu errar a digitação de uma dessas chaves,
00:03:00serei avisado imediatamente, e essa é a segurança de tipos que aprendemos a amar no TanStack.
00:03:04Depois de definir as marcas que queremos, temos nossos eixos x e y. Para o eixo x,
00:03:08isso é super simples. Eu disse que quero space band, que é para categorias, para que nossas letras fiquem
00:03:12igualmente espaçadas, e também tenho algum preenchimento (padding) entre elas. Para o eixo y, estou usando scale
00:03:17linear, que é para números, e também defini nice como true, o que significa apenas arredondar
00:03:21o eixo para um número sensato, em vez de parar no valor mais alto que temos. Se eu definir isso como falso,
00:03:26você pode ver que o topo do eixo aqui termina exatamente onde fica o topo da barra mais alta. Aqui,
00:03:30eu também dei um rótulo ao eixo e um formato, apenas para podermos formatar esses números como porcentagens
00:03:34em vez de pontos decimais. Agora, toda essa definição é a parte agnóstica de framework, mas para renderizar
00:03:39isso em React, tudo o que precisamos fazer é importar o componente chart, passar nossa definição,
00:03:43fornecer uma altura e um rótulo, e isso é tudo o que precisamos para criar nosso gráfico. Mas a coisa que quero
00:03:47deixar muito clara é que não usamos um gráfico de barras aqui. Definimos em nosso código onde queremos
00:03:51renderizar nossas marcas, e por acaso o resultado final é um gráfico de barras, mas é uma distinção
00:03:55muito sutil, e esse é o uso da gramática de gráficos. Como exemplo da flexibilidade disso,
00:04:00digamos que eu quisesse uma linha de média no meu gráfico de barras, tudo o que preciso fazer é entrar na matriz de marcas e adicionar uma
00:04:04nova marca, desta vez sendo rule Y. Para outro exemplo rápido, digamos que eu queira um gráfico de linhas com pontos e uma
00:04:09área por baixo, bem, posso definir todos eles como marcas, e veja só, agora tenho um gráfico
00:04:14da nossa contagem de inscritos, o que é o momento perfeito para dizer para você se inscrever e ficar por dentro das novidades de IA e
00:04:18de desenvolvedores como esta. Se você quiser ver ainda mais exemplos do uso dessas marcas para construir
00:04:22todos aqueles vários gráficos que mostrei antes, você pode conferir a documentação deles, eles têm toneladas
00:04:26de exemplos e é incrivelmente detalhada. De fato, peguei mais alguns exemplos da documentação deles
00:04:30aqui apenas para mostrar exatamente o que o TanStack Charts pode fazer, pois não tenho tempo para analisar todos os
00:04:34recursos em profundidade, isso levaria literalmente cerca de 20 horas, mas um dos mais legais é este gráfico de globo,
00:04:38eu realmente adoro, acho super legal você poder fazer isso em uma biblioteca com uma semana de vida.
00:04:42Depois, também temos interações, o que é super legal, então temos este pincel de seleção (brush), podemos arrastá-lo por
00:04:46nosso gráfico e também alterar seu intervalo de cada lado. Temos zoom no nosso gráfico, para podermos aproximar
00:04:51perfeitamente este gráfico de linhas. Temos seleção por chave com o teclado, então se eu passar o mouse sobre um
00:04:56deles e pressionar espaço, tudo funciona perfeitamente, e você pode ver que ele lê o valor do que selecionamos
00:05:00aqui embaixo. Em seguida, também temos um retículo (crosshair), então conforme avanço, você pode ver que ele imprime qual é a data
00:05:04real sobre a qual estou com o mouse no eixo abaixo. Ele também possui dicas de ferramentas (tooltips) com muitas configurações,
00:05:09então você pode ver que no momento isso está definido como nearest X, portanto, apenas a distância horizontal conta para o ponto
00:05:14que será escolhido. Também podemos escolher uma estratégia como group X, para que ele mostre todos esses
00:05:18valores quando eu passar o mouse sobre qualquer área aqui. Você também pode fixar uma dica de ferramenta, então se eu passar o mouse sobre
00:05:22estes gráficos de barras aqui, você pode ver que a dica de ferramenta está mudando, mas se eu clicar em um, isso fixa a
00:05:26dica de ferramenta e também mostra alguns detalhes extras. Aqui, você também pode ver que não temos uma dica de ferramenta,
00:05:31mas ela está lendo esses valores diretamente logo abaixo, para que você possa extrair essa informação, e aqui estamos
00:05:35renderizando uma dica de ferramenta personalizada, então se eu clicar para fixar, temos um botão de fechar personalizado, e tudo isso é
00:05:39feito em React. Esta biblioteca também atende você se quiser fazer algumas animações, então se eu alterar os
00:05:43valores dessas barras aqui, você pode ver que ela anima suavemente entre esses valores alterados.
00:05:48Também podemos clicar em reproduzir novamente aqui, e você pode ver que podemos ter uma entrada escalonada dos nossos gráficos de barras,
00:05:51e se eu for em frente e remover algumas das barras abaixo, você pode ver que ela anima suavemente ao
00:05:55adicionar ou remover essas barras. Podemos até fazer uma animação de streaming, então à medida que novos dados chegam,
00:06:00ela simplesmente desloca a barra de linhas em vez de redesenhar tudo. E antes de eu passar para como
00:06:03esses gráficos são estilizados, o último recurso que eu queria mostrar era o recurso de exportação. Você pode ver que tenho
00:06:07botões aqui para baixar como SVG e PNG, e se eu clicar neles, este é o resultado final que obtenho
00:06:12de volta. Então agora vamos falar sobre como aplicamos temas e estilizamos esses gráficos, porque se eu remover os estilos deste
00:06:16gráfico aqui, esta é a aparência básica padrão, pois fora da caixa ele não tem estilos, ele simplesmente
00:06:21usa a cor atual para o primeiro plano (foreground) e o fundo é transparente. Existem três níveis
00:06:25de estilização no TanStack Charts, e o primeiro são as suas variáveis CSS. Estas são suas cores
00:06:30categóricas a partir de seis propriedades personalizadas, e você pode substituir essas em qualquer contêiner que desejar. Então, se eu alterar esses
00:06:35valores aqui, você pode ver como este gráfico atualiza todas as suas cores. O segundo nível está no
00:06:39bloco de temas, que fica na definição real do gráfico. Isso é destinado ao que é chamado de mobiliário do gráfico
00:06:43(elementos de suporte), e não aos dados, ou seja, coisas como seu texto, linhas de grade, fundo,
00:06:47e assim por diante. O terceiro nível está nas próprias marcas, onde você pode definir coisas como preenchimento (fill),
00:06:51contorno (stroke), opacidade, estilo de término de linha, traços, raio dos cantos, fontes e muito mais. Eles também podem ser valores fixos ou
00:06:57baseados em dados, para que você possa colorir uma barra dependendo se ela está acima de uma determinada meta. Você pode até construir
00:07:01gradientes usando seus dados. Como eu disse, esta biblioteca é super flexível. Ela também é super leve.
00:07:06Nesse pacote de benchmark completo, que inclui coisas como retículos, pincel de seleção, zoom, seleção,
00:07:10tudo isso, o tamanho do pacote fica entre 36 e 43 quilobytes. Se compararmos isso com o Chart.js ou
00:07:16recharts, o Chart.js tem de 45 a 58 quilobytes, e o recharts de 153 a 168 quilobytes. Portanto, o TanStack
00:07:24Charts é significativamente menor. Outra parte incrível sobre isso é a filosofia. Eles realmente
00:07:28construíram isso para duas coisas. Primeiro, as pessoas devem obter gráficos refinados a partir de uma declaração curta,
00:07:32e segundo, a IA deve ser capaz de compor, inspecionar e modificar gráficos sem aprender um modelo de série específico de aplicação.
00:07:38Portanto, eles projetaram esta API para que um agente possa escrever gráficos sem ter lido a
00:07:42documentação, e sinceramente, usei o Claude para configurar a maioria das demonstrações que fiz anteriormente, e embora eu tenha verificado isso duplamente
00:07:47o que é bastante raro hoje em dia, ele se alinhou perfeitamente com tudo o que eu esperava. Tive que fazer muito
00:07:52poucas alterações, o que é bastante surpreendente para uma biblioteca novinha em folha. Então esse é o TanStack Charts. É o meu
00:07:57novo gráfico favorito e está melhorando rapidamente. Deixe-me saber o que você acha nos comentários
00:08:01abaixo. Enquanto estiver lá, inscreva-se. Como sempre, vejo você no próximo.