Todos os componentes · Categoria: Gráficos e dados

Medidor de ponteiro

Um medidor em semicírculo com zonas, ponteiro que balança e um controle para experimentar.

Um mostrador com três zonas, um ponteiro que balança até o valor e a zona dita em palavras além da cor. Um controle deslizante deixa o visitante experimentar outros valores, e a sua página pode definir o real. Os números padrão são ilustrativos.

Experimente

<gauge-meter>

VisãoPréviaCódigoCSS

Props

CantosSuavesRetosRedondos

label

gauge-meter: Um medidor em semicírculo com zonas, ponteiro que balança e um controle para experimentar. 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.

index.html

<gauge-meter locale="en"></gauge-meter>

<script>
  const element = document.querySelector("gauge-meter");
  element.addEventListener("gauge-meter:zonechange", (event) => {
    console.log(event.detail);
  });
</script>

Adicione o script do Taggor do site uma vez; o componente aparece quando ele carrega.

taggor-component.js

const element = document.createElement("gauge-meter");
element.setAttribute("locale", "en");
element.addEventListener("gauge-meter:zonechange", (event) => {
  console.log(event.detail);
});
document.body.append(element);

Adicione o script do Taggor do site uma vez; o componente aparece quando ele carrega.

GaugeMeter.tsx

import { useEffect, useRef } from "react";

export function GaugeMeter() {
  const ref = useRef<HTMLElement>(null);

  useEffect(() => {
    const element = ref.current;
    if (!element) return;
    const onZonechange = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    element.addEventListener("gauge-meter:zonechange", onZonechange);
    return () => {
      element.removeEventListener("gauge-meter:zonechange", onZonechange);
    };
  }, []);

  return <gauge-meter ref={ref} 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.
O evento é ouvido com addEventListener, dentro de um efeito.

GaugeMeter.tsx

import { useEffect, useRef } from "react";

export function GaugeMeter() {
  const ref = useRef<HTMLElement>(null);

  useEffect(() => {
    const element = ref.current;
    if (!element) return;
    const onZonechange = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    element.addEventListener("gauge-meter:zonechange", onZonechange);
    return () => {
      element.removeEventListener("gauge-meter:zonechange", onZonechange);
    };
  }, []);

  return <gauge-meter ref={ref} 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.
O evento é ouvido com addEventListener, dentro de um efeito.

src/GaugeMeter.vue

<script setup lang="ts">
function onZonechange(event: Event) {
  console.log((event as CustomEvent).detail);
}
</script>

<template>
  <gauge-meter locale="en" @gauge-meter:zonechange="onZonechange" />
</template>

vite.config.ts

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

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag === "gauge-meter",
        },
      },
    }),
  ],
});

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/gauge-meter.component.ts

import { afterNextRender, Component, CUSTOM_ELEMENTS_SCHEMA, DestroyRef, ElementRef, inject } from "@angular/core";

@Component({
  selector: "app-gauge-meter",
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <gauge-meter locale="en"></gauge-meter>
  `,
})
export class GaugeMeterComponent {
  constructor() {
    const host = inject<ElementRef<HTMLElement>>(ElementRef);
    const element = () => host.nativeElement.querySelector("gauge-meter");
    const onZonechange = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    afterNextRender(() => element()?.addEventListener("gauge-meter:zonechange", onZonechange));
    inject(DestroyRef).onDestroy(() => element()?.removeEventListener("gauge-meter:zonechange", onZonechange));
  }
}

Adicione o script do Taggor do site uma vez; o componente aparece quando ele carrega.
O componente declara CUSTOM_ELEMENTS_SCHEMA.
O evento é ouvido com addEventListener, dentro de um efeito.

src/TaggorComponent.svelte

<script>
  function onZonechange(event) {
    console.log(event.detail);
  }
</script>

<gauge-meter locale="en" ongauge-meter:zonechange={onZonechange}></gauge-meter>

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

gauge-meter {
  --gm-radius: 20px;
}

Props

Props do componente, lidas do manifesto dele
Prop	Tipo	Padrão	O que faz
value	number	72	The current value.
min	number	0	The value at the left end.
max	number	100	The value at the right end.
warn	number	60	From here the zone is High.
danger	number	85	From here the zone is Critical.
label	string	nenhum	Replaces the gauge name.
unit	string	nenhum	Replaces the unit shown after the value.
hideSlider	boolean	false	Hides the slider (use it with a real value).
hideSample	boolean	false	Hides the Illustrative numbers mark (use it with a real value).
locale	pt-BR \| en	en	–

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

Eventos

Eventos do componente, lidos do manifesto dele
Evento	Quando dispara
zonechange	The needle moved into another zone.

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 "Medidor de ponteiro" (gauge-meter): Um medidor em semicírculo com zonas, ponteiro que balança e um controle para experimentar. 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.

Componentes relacionados

Quadro de indicadores<kpi-board>
Gráfico de rosca<chart-donut>
Gráfico de barras ao vivo<chart-bars-live>

Medidor de ponteiro

Experimente

Props

Eventos

Construa um com o seu agente

Componentes relacionados

Documentação