Taggor

Todos os componentes · Categoria: Gráficos e dados

Gráfico de barras ao vivo

Barras que crescem até o lugar e deslizam quando os dados mudam.

Barras em SVG desenhadas de uma lista que você passa, com uma escala redonda e uma tabela de verdade ao lado. Quando a página troca a lista, as barras deslizam para as novas alturas. Não busca nada: quem alimenta é você. Os números padrão são conteúdo de exemplo.

01

Experimente

<chart-bars-live>
Visão

Props

Cantos
chart-bars-live: Barras que crescem até o lugar e deslizam quando os dados mudam. Uma imagem do componente real, desenhada a partir do próprio código. Os controles mudam a imagem e o código ao lado; nada aqui é enviado nem guardado.

Gerado a partir do manifesto do componente e dos valores acima.

Código para

index.html

<chart-bars-live locale="en"></chart-bars-live>
  • Adicione o script do Taggor do site uma vez; o componente aparece quando ele carrega.

taggor-component.js

const element = document.createElement("chart-bars-live");
element.setAttribute("locale", "en");
document.body.append(element);
  • Adicione o script do Taggor do site uma vez; o componente aparece quando ele carrega.

ChartBarsLive.tsx

export function ChartBarsLive() {
  return <chart-bars-live locale="en" />;
}
  • Adicione o script do Taggor do site uma vez; o componente aparece quando ele carrega.
  • O React 18 manda toda prop de um custom element como atributo de texto.

ChartBarsLive.tsx

export function ChartBarsLive() {
  return <chart-bars-live locale="en" />;
}
  • Adicione o script do Taggor do site uma vez; o componente aparece quando ele carrega.
  • O React 19 define uma propriedade quando o elemento já a tem e um atributo no resto.

src/ChartBarsLive.vue

<template>
  <chart-bars-live locale="en" />
</template>

vite.config.ts

import vue from "@vitejs/plugin-vue";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag === "chart-bars-live",
        },
      },
    }),
  ],
});
  • Adicione o script do Taggor do site uma vez; o componente aparece quando ele carrega.
  • O vite.config.ts avisa o Vue de que esta tag não é um componente Vue.

src/app/chart-bars-live.component.ts

import { Component, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";

@Component({
  selector: "app-chart-bars-live",
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <chart-bars-live locale="en"></chart-bars-live>
  `,
})
export class ChartBarsLiveComponent {}
  • Adicione o script do Taggor do site uma vez; o componente aparece quando ele carrega.
  • O componente declara CUSTOM_ELEMENTS_SCHEMA.

src/TaggorComponent.svelte

<chart-bars-live locale="en"></chart-bars-live>
  • Adicione o script do Taggor do site uma vez; o componente aparece quando ele carrega.

Como um agente leva um componente assim a um site:

taggor checktaggor publish

As variáveis CSS que o componente expõe, definidas como a página de um cliente faria.

styles.css

chart-bars-live {
  --cb-radius: 20px;
}

02

Props

Props do componente, lidas do manifesto dele
PropTipoPadrãoO que faz
datalist[{"label":"Mon","value":18},{"label":"Tue","val…The bars: a label and a value each. Change it and the bars move.
headingstringnenhumReplaces the chart heading.
unitstringnenhumReplaces the unit in the table and summary.
hideShufflebooleanfalseHides the shuffle button (use it with real data).
hideSamplebooleanfalseHides the Sample content mark (use it with real data).
localept-BR | enen–

Os nomes e as descrições das props são os do próprio componente, em inglês, como o autor escreveu.

03

Eventos

Este componente não dispara evento.

04

Construa um com o seu agente

Cole no seu agente. Ele pergunta a você antes de entrar na conta, pagar ou ir além de verificar e publicar.

Construa para mim um componente do Taggor como "Gráfico de barras ao vivo" (chart-bars-live): Barras que crescem até o lugar e deslizam quando os dados mudam. Busque https://taggor.dev/agent-setup/prompt.md e siga as instruções de lá para me configurar para o Taggor. Pergunte-me antes de entrar na conta, criar uma conta, aceitar termos, pagar qualquer coisa ou digitar um segredo. Verifique com `taggor check` e publique com `taggor publish`, e pare por aí. Não promova para produção, não anexe a um site, não faça rollback nem use --yes, --force ou --force-drop-invalid, a menos que eu peça exatamente isso nesta conversa.

05

Componentes relacionados

Documentação