acai-ui 1.65.5

package/src/components/chart/acai-ui-chart.vue

@@ -0,0 +1,679 @@
+<template>
+  <figure class="acai-chart" role="group" :aria-labelledby="title ? idTitulo : undefined">
+    <figcaption v-if="title" :id="idTitulo" class="acai-chart__titulo">{{ title }}</figcaption>
+
+    <chart-legenda
+      v-if="mostrarLegenda && legendPosition === 'bottom'"
+      class="acai-chart__legenda"
+      :series="itensLegenda"
+      posicao="bottom"
+      @toggle="alternarSerie"
+    />
+
+    <div class="acai-chart__corpo" :class="{ 'acai-chart__corpo--lateral': legendaLateral }">
+      <div ref="caixaRef" class="acai-chart__area" :style="estiloArea">
+        <div v-if="loading" class="acai-chart__estado" role="status" aria-label="Carregando gráfico">
+          <!-- Sem `color="primary"`: a navy da marca some sobre a superfície do
+               tema escuro. Herdando currentColor, o spinner acompanha o tema. -->
+          <q-spinner size="28px" />
+        </div>
+
+        <div v-else-if="dados.vazio" class="acai-chart__estado acai-chart__estado--vazio">
+          <slot name="empty">
+            <q-icon :name="emptyIcon" size="32px" />
+            <span>{{ empty }}</span>
+          </slot>
+        </div>
+
+        <svg
+          v-else
+          ref="svgRef"
+          class="acai-chart__svg"
+          :width="largura"
+          :height="alturaSvg"
+          :viewBox="`0 0 ${largura} ${alturaSvg}`"
+          role="img"
+          tabindex="0"
+          :aria-labelledby="`${idTitulo} ${idDesc}`"
+          @keydown="aoTeclar"
+          @blur="focado = null"
+          @pointerleave="aoSairPonteiro"
+          @pointermove="aoMoverPonteiro"
+          @click="aoClicar"
+        >
+          <title :id="idTitulo">{{ title || 'Gráfico' }}</title>
+          <desc :id="idDesc">{{ descricaoFinal }}</desc>
+
+          <defs v-if="padroesAtivos">
+            <!--
+              Ids via useId(): dois gráficos na mesma página com id igual fazem o
+              segundo roubar o preenchimento do primeiro, em silêncio.
+            -->
+            <!--
+              O padrão é só a HACHURA, com fundo transparente — ele é sobreposto
+              à barra já pintada com a cor real. Se o pattern trouxesse a cor
+              (fundo colorido pelo slot da série), `colorBy="status"` e
+              `colorBy="threshold"` perderiam a cor por ponto: toda barra da
+              série sairia com a mesma tinta.
+            -->
+            <pattern
+              v-for="p in PADROES"
+              :key="p.indice"
+              :id="`${idBase}-p${p.indice}`"
+              width="6"
+              height="6"
+              patternUnits="userSpaceOnUse"
+              :patternTransform="`rotate(${p.angulo})`"
+            >
+              <line
+                x1="0"
+                y1="0"
+                x2="0"
+                y2="6"
+                stroke="var(--acai-chart-surface)"
+                stroke-width="2.5"
+                opacity="0.85"
+              />
+            </pattern>
+          </defs>
+
+          <chart-gauge v-if="ehMedidor" :plano="planoGauge" />
+          <chart-pizza
+            v-else-if="ehCircular"
+            :plano="planoPizza"
+            :padroes="padroesAtivos"
+            :id-padrao="idBase"
+            :focado="focado"
+            :atenuar="focoVisivel"
+          />
+          <chart-cartesiano
+            v-else
+            :plano="plano"
+            :mostrar-grade="showGrid"
+            :padroes="padroesAtivos"
+            :id-padrao="idBase"
+            :focado="focado"
+            :atenuar="focoVisivel"
+          />
+
+          <!-- Anel duplo: outline em filho de SVG é inconsistente entre
+               navegadores, então o foco é desenhado à mão (eMAG 4.3). -->
+          <rect
+            v-if="focoVisivel"
+            class="acai-chart__foco"
+            x="1"
+            y="1"
+            :width="largura - 2"
+            :height="alturaSvg - 2"
+            rx="4"
+          />
+        </svg>
+
+        <div v-if="tooltipVisivel" class="acai-chart__tooltip" :style="estiloTooltip" role="tooltip">
+          <slot name="tooltip" :pontos="pontosDoFoco" :label="rotuloDoFoco">
+            <strong>{{ rotuloDoFoco }}</strong>
+            <span v-for="p in pontosDoFoco" :key="p.seriesIndex" class="acai-chart__tooltip-linha">
+              <i class="acai-chart__tooltip-cor" :style="{ background: p.cor }" />
+              <template v-if="dados.series.length > 1">{{ p.seriesName }}:</template>
+              {{ p.formatted }}
+            </span>
+          </slot>
+        </div>
+      </div>
+
+      <chart-legenda
+        v-if="mostrarLegenda && legendaLateral"
+        class="acai-chart__legenda acai-chart__legenda--lateral"
+        :series="itensLegenda"
+        posicao="right"
+        @toggle="alternarSerie"
+      />
+    </div>
+
+    <!-- Live region: é como quem usa leitor de tela sabe onde o foco está. -->
+    <div class="acai-chart__vivo" aria-live="polite" aria-atomic="true">{{ anuncio }}</div>
+
+    <div v-if="tableToggle && !dados.vazio" class="acai-chart__acoes">
+      <button
+        type="button"
+        class="acai-chart__botao-tabela"
+        :aria-expanded="tabelaAberta"
+        :aria-controls="idTabela"
+        @click="tabelaAberta = !tabelaAberta"
+      >
+        {{ tabelaAberta ? 'Ocultar dados' : 'Ver dados em tabela' }}
+      </button>
+    </div>
+
+    <div :id="idTabela">
+      <chart-tabela
+        v-if="dataTable !== false && !dados.vazio"
+        :tabela="tabela"
+        :legenda="legendaTabela"
+        :visivel="tabelaAberta || dataTable === 'visible'"
+      />
+    </div>
+
+    <slot name="footer" />
+  </figure>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, useId } from 'vue'
+import { QIcon, QSpinner } from 'quasar'
+import ChartCartesiano from './chart-cartesiano.vue'
+import ChartGauge from './chart-gauge.vue'
+import ChartPizza from './chart-pizza.vue'
+import ChartLegenda from './chart-legenda.vue'
+import ChartTabela from './chart-tabela.vue'
+import { anuncioPonto, resumoGrafico, tabelaDeDados } from './chart-a11y'
+import { limitarCategorias, normalizarEntrada, resolverCor } from './chart-dados'
+import { resolverFormatador } from './chart-formatar'
+import { montarPlanoCartesiano, montarPlanoGauge, montarPlanoPizza } from './chart-plano'
+import { svgChartParaImagem, type ImagemChart, type OpcoesImagemChart } from './chart-imagem'
+import { useTamanhoElemento } from '../../hooks/use-tamanho-elemento'
+import { usePreferencias } from '../../hooks/use-preferencias'
+import { alturaAutomatica } from './chart-layout'
+import type { ChartColorBy, ChartPointEvent, ChartProps } from './acai-ui-chart-interface'
+
+const props = withDefaults(defineProps<ChartProps>(), {
+  type: 'bar',
+  curve: 'linear',
+  showGrid: true,
+  showLegend: 'auto',
+  legendPosition: 'bottom',
+  showValues: 'auto',
+  showTooltip: true,
+  height: 320,
+  otherLabel: 'Outros',
+  empty: 'Sem dados para exibir.',
+  emptyIcon: 'bar_chart',
+  dataTable: 'hidden',
+  tableToggle: true,
+  patterns: 'auto',
+  // `colorBy` NÃO tem default aqui: ele depende do tipo. Ver `colorByEfetivo`.
+})
+
+const emit = defineEmits<{
+  'point-click': [evento: ChartPointEvent]
+  'point-focus': [evento: ChartPointEvent]
+  'legend-toggle': [evento: { seriesIndex: number; hidden: boolean }]
+}>()
+
+const idBase = useId()
+const idTitulo = `${idBase}-t`
+const idDesc = `${idBase}-d`
+const idTabela = `${idBase}-tab`
+
+const PADROES = [
+  { indice: 0, angulo: 45 },
+  { indice: 1, angulo: 135 },
+  { indice: 2, angulo: 0 },
+  { indice: 3, angulo: 90 },
+  { indice: 4, angulo: 20 },
+]
+
+const caixaRef = ref<HTMLElement | null>(null)
+const svgRef = ref<SVGSVGElement | null>(null)
+const { preferencias } = usePreferencias()
+
+// Séries desligadas pela legenda. Estado local: o consumidor não precisa saber
+// que alguém escondeu uma série pra ver o resto.
+const ocultasLocal = ref<Set<number>>(new Set())
+const focado = ref<{ indiceSerie: number; indicePonto: number } | null>(null)
+const focoVisivel = ref(false)
+const tabelaAberta = ref(props.dataTable === 'visible')
+const anuncio = ref('')
+const ponteiro = ref<{ x: number; y: number } | null>(null)
+
+const horizontal = computed(() => props.horizontal === true)
+
+const dados = computed(() => {
+  const bruto = normalizarEntrada({
+    ...props,
+    series: props.series?.map((s, i) => ({
+      ...s,
+      hidden: s.hidden === true || ocultasLocal.value.has(i),
+    })),
+  })
+  const teto = props.maxCategories ?? (props.type === 'pie' || props.type === 'donut' ? 6 : 12)
+  return limitarCategorias(bruto, teto, props.otherLabel)
+})
+
+const amostra = computed(() =>
+  dados.value.series.flatMap((s) => s.pontos.map((p) => p.valor).filter((v): v is number => v !== null)),
+)
+
+const formatar = computed(() =>
+  resolverFormatador(props.valueFormat, props.valueDecimals, amostra.value),
+)
+
+const seriesVisiveis = computed(() => dados.value.series.filter((s) => !s.oculta))
+
+// A altura só é calculada DEPOIS de `dados` porque `autoHeight` depende da
+// quantidade de categorias. O padrão passado ao hook é constante de propósito:
+// ler `alturaBase.value` aqui avaliaria o computed antes de `dados` existir
+// (TDZ) — `<script setup>` executa de cima pra baixo.
+const alturaBase = computed(() => {
+  if (props.autoHeight) return alturaAutomatica(dados.value.rotulos.length)
+  return typeof props.height === 'number' ? props.height : 320
+})
+
+const { largura, altura: alturaMedida, remedir } = useTamanhoElemento(caixaRef, {
+  largura: 640,
+  altura: 320,
+})
+
+// Com autoHeight quem manda é o cálculo; senão, a caixa medida.
+const alturaSvg = computed(() => (props.autoHeight ? alturaBase.value : alturaMedida.value))
+
+const estiloArea = computed(() => ({
+  height: props.autoHeight
+    ? `${alturaBase.value}px`
+    : typeof props.height === 'number'
+      ? `${props.height}px`
+      : props.height,
+}))
+
+// 'auto' liga com 2+ séries. Não é preferência de estilo: sem legenda, série
+// distinta só por cor é informação transmitida só por cor (eMAG 4.2).
+//
+// Em pizza/rosca a legenda é SEMPRE necessária, mesmo com uma série só: ali as
+// categorias é que são codificadas por cor, e a medição da paleta mostrou que
+// entre todos os pares só 2 a 4 se separam.
+const mostrarLegenda = computed(() => {
+  if (props.showLegend !== 'auto') return props.showLegend === true
+  // Medidor mostra UM valor, e ele já está escrito no meio do arco: legenda ali
+  // é uma caixinha colorida repetindo o que o número diz.
+  if (ehMedidor.value) return false
+  return ehCircular.value || dados.value.series.length > 1
+})
+
+const compacto = computed(() => {
+  if (ehMedidor.value) return planoGauge.value.compacto
+  return ehCircular.value ? planoPizza.value.compacto : plano.value.compacto
+})
+
+const legendaLateral = computed(
+  () => mostrarLegenda.value && props.legendPosition === 'right' && !compacto.value,
+)
+
+/**
+ * Em pizza a legenda tem que listar as CATEGORIAS (uma cor cada), não a série
+ * única. Monta entradas sintéticas reaproveitando o mesmo componente.
+ */
+const itensLegenda = computed(() => {
+  if (!ehCircular.value) return dados.value.series
+  const serie = dados.value.series[0]
+  if (!serie) return []
+  return serie.pontos.map((ponto, i) => ({
+    ...serie,
+    indice: i,
+    nome: ponto.rotulo,
+    tipo: 'bar' as const,
+    cor: resolverCor(ponto, serie, colorByEfetivo.value, props.thresholds ?? []),
+    oculta: false,
+  }))
+})
+
+const mostrarValores = computed(() => {
+  if (props.showValues !== 'auto') return props.showValues === true
+  // Rótulo em toda barra vira ruído: só quando há folga real.
+  return dados.value.rotulos.length * seriesVisiveis.value.length <= 12
+})
+
+/**
+ * Hachura ligada por preferência, não por adivinhação: `usePreferencias` já é
+ * o estado reativo da lib. Em acromatopsia a cor não distingue nada, e em alto
+ * contraste o usuário pediu reforço explícito.
+ */
+const padroesAtivos = computed(() => {
+  if (props.patterns === true) return true
+  if (props.patterns === false) return false
+  return preferencias.daltonismo === 'acromatopsia' || preferencias.altoContraste
+})
+
+const ehCircular = computed(() => props.type === 'pie' || props.type === 'donut')
+const ehMedidor = computed(() => props.type === 'gauge')
+
+/** Domínio do medidor. Fora de 0..100 só com `min`/`max` explícitos. */
+const dominioMedidor = computed(() => ({
+  min: props.min ?? 0,
+  max: props.max ?? 100,
+}))
+
+/**
+ * O default de `colorBy` depende do tipo, e errar isso é visível: em barra/linha
+ * a cor identifica a SÉRIE, mas em pizza cada fatia é uma CATEGORIA. Com
+ * `'series'` numa pizza, todas as fatias sairiam da mesma cor.
+ */
+const colorByEfetivo = computed<ChartColorBy>(() => {
+  if (props.colorBy) return props.colorBy
+  // Medidor com faixas declaradas quer a cor DA FAIXA em que o valor caiu — é o
+  // "verde/amarelo/vermelho" que todo velocímetro de risco precisa, e exigir
+  // `colorBy="threshold"` à mão só produziria arco azul em toda tela.
+  if (ehMedidor.value) return (props.thresholds?.length ?? 0) > 0 ? 'threshold' : 'series'
+  return ehCircular.value ? 'point' : 'series'
+})
+
+const planoPizza = computed(() =>
+  montarPlanoPizza({
+    dados: dados.value,
+    largura: largura.value,
+    altura: alturaSvg.value,
+    formatar: formatar.value,
+    // Rosca sem `innerRadius` explícito usa 0.6: furo menor que isso vira uma
+    // pizza com um pontinho no meio, sem a legibilidade que a rosca traz.
+    raioInterno: props.innerRadius ?? (props.type === 'donut' ? 0.6 : 0),
+    colorBy: colorByEfetivo.value,
+    thresholds: props.thresholds ?? [],
+  }),
+)
+
+const planoGauge = computed(() =>
+  montarPlanoGauge({
+    dados: dados.value,
+    largura: largura.value,
+    altura: alturaSvg.value,
+    formatar: formatar.value,
+    min: dominioMedidor.value.min,
+    max: dominioMedidor.value.max,
+    ...(props.gauge?.startAngle === undefined ? {} : { anguloInicio: props.gauge.startAngle }),
+    ...(props.gauge?.endAngle === undefined ? {} : { anguloFim: props.gauge.endAngle }),
+    ...(props.gauge?.thickness === undefined ? {} : { espessura: props.gauge.thickness }),
+    ponteiro: props.gauge?.pointer === true,
+    bandas: props.gauge?.bands === true,
+    legenda: props.gauge?.caption ?? '',
+    colorBy: colorByEfetivo.value,
+    thresholds: props.thresholds ?? [],
+  }),
+)
+
+const plano = computed(() =>
+  montarPlanoCartesiano({
+    dados: dados.value,
+    largura: largura.value,
+    altura: alturaSvg.value,
+    formatar: formatar.value,
+    horizontal: horizontal.value,
+    empilhado: props.stacked === true || props.stacked === 'percent',
+    percentual: props.stacked === 'percent',
+    curva: props.curve,
+    ...(props.includeZero === undefined ? {} : { incluirZero: props.includeZero }),
+    min: props.min,
+    max: props.max,
+    ...(props.ticks === undefined ? {} : { ticksAlvo: props.ticks }),
+    colorBy: colorByEfetivo.value,
+    thresholds: props.thresholds ?? [],
+    mostrarValores: mostrarValores.value,
+    temTitulo: false,
+    temLegenda: false,
+    ...(props.legendPosition ? { posicaoLegenda: props.legendPosition } : {}),
+  }),
+)
+
+const descricaoFinal = computed(
+  () =>
+    props.description ??
+    resumoGrafico(dados.value, {
+      tipo: props.type,
+      titulo: props.title,
+      formatar: formatar.value,
+      ...(ehMedidor.value ? { medidor: dominioMedidor.value } : {}),
+    }),
+)
+
+const tabela = computed(() =>
+  tabelaDeDados(dados.value, formatar.value, props.categoryLabel ?? 'Categoria'),
+)
+const legendaTabela = computed(() =>
+  props.title ? `${props.title} — dados do gráfico` : 'Dados do gráfico',
+)
+
+// ── interação ──────────────────────────────────────────────────────────────
+
+function alternarSerie(indice: number): void {
+  // Em pizza a legenda lista CATEGORIAS, não séries — esconder uma categoria
+  // mudaria o total e faria os percentuais de todas as outras mentirem.
+  if (ehCircular.value) return
+  const proximo = new Set(ocultasLocal.value)
+  if (proximo.has(indice)) proximo.delete(indice)
+  else proximo.add(indice)
+  ocultasLocal.value = proximo
+  emit('legend-toggle', { seriesIndex: indice, hidden: proximo.has(indice) })
+}
+
+function eventoDoPonto(indiceSerie: number, indicePonto: number): ChartPointEvent | null {
+  const serie = dados.value.series[indiceSerie]
+  const ponto = serie?.pontos[indicePonto]
+  if (!serie || !ponto) return null
+  return {
+    seriesIndex: indiceSerie,
+    seriesName: serie.nome,
+    index: indicePonto,
+    label: ponto.rotulo,
+    value: ponto.valor,
+    formatted: ponto.valor === null ? '—' : formatar.value(ponto.valor),
+    meta: ponto.meta,
+  }
+}
+
+/**
+ * Move o foco. `indicePontoAbsoluto` posiciona direto (Home/End) em vez de
+ * somar — e, crucialmente, PRESERVA a série atual: pular para a última
+ * categoria não pode devolver o leitor para a primeira série, senão ele perde
+ * a linha que estava seguindo.
+ */
+function mover(
+  deltaPonto: number,
+  deltaSerie: number,
+  indicePontoAbsoluto?: number,
+): void {
+  const nPontos = dados.value.rotulos.length
+  const visiveis = seriesVisiveis.value
+  if (nPontos === 0 || visiveis.length === 0) return
+
+  const atual = focado.value ?? { indiceSerie: visiveis[0]!.indice, indicePonto: -1 }
+  const ordemAtual = Math.max(
+    0,
+    visiveis.findIndex((s) => s.indice === atual.indiceSerie),
+  )
+
+  const alvoPonto = indicePontoAbsoluto ?? atual.indicePonto + deltaPonto
+  const proximoPonto = Math.min(nPontos - 1, Math.max(0, alvoPonto))
+  const proximaOrdem = Math.min(visiveis.length - 1, Math.max(0, ordemAtual + deltaSerie))
+
+  focado.value = {
+    indiceSerie: visiveis[proximaOrdem]!.indice,
+    indicePonto: proximoPonto,
+  }
+  anuncio.value = anuncioPonto(
+    dados.value,
+    focado.value.indiceSerie,
+    focado.value.indicePonto,
+    formatar.value,
+  )
+  const evento = eventoDoPonto(focado.value.indiceSerie, focado.value.indicePonto)
+  if (evento) emit('point-focus', evento)
+}
+
+/**
+ * O SVG é UM tab stop só. 12 categorias × 3 séries dariam 36 paradas de Tab —
+ * hostil, e SVG filho focável tem suporte irregular no NVDA.
+ */
+function aoTeclar(e: KeyboardEvent): void {
+  const nPontos = dados.value.rotulos.length
+  switch (e.key) {
+    case 'ArrowRight':
+      mover(1, 0)
+      break
+    case 'ArrowLeft':
+      mover(-1, 0)
+      break
+    case 'ArrowDown':
+      mover(0, 1)
+      break
+    case 'ArrowUp':
+      mover(0, -1)
+      break
+    case 'Home':
+      mover(0, 0, 0)
+      break
+    case 'End':
+      mover(0, 0, nPontos - 1)
+      break
+    case 'Enter':
+    case ' ': {
+      if (!focado.value) return
+      const evento = eventoDoPonto(focado.value.indiceSerie, focado.value.indicePonto)
+      if (evento) emit('point-click', evento)
+      break
+    }
+    case 'Escape':
+      focado.value = null
+      anuncio.value = ''
+      break
+    case 't':
+    case 'T':
+      tabelaAberta.value = !tabelaAberta.value
+      break
+    default:
+      return
+  }
+  focoVisivel.value = true
+  e.preventDefault()
+}
+
+function aoMoverPonteiro(e: PointerEvent): void {
+  if (!props.showTooltip || dados.value.vazio) return
+  const caixa = svgRef.value?.getBoundingClientRect()
+  if (!caixa) return
+  const x = e.clientX - caixa.left
+  const y = e.clientY - caixa.top
+  ponteiro.value = { x, y }
+
+  const indice = indiceSobCursor(x, y)
+  if (indice === null) return
+  const serie = seriesVisiveis.value[0]
+  if (!serie) return
+  focado.value = { indiceSerie: serie.indice, indicePonto: indice }
+  focoVisivel.value = false
+}
+
+function indiceSobCursor(x: number, y: number): number | null {
+  // Medidor não tem ponto sob o cursor: o valor está escrito no meio do arco, e
+  // um tooltip repetiria a mesma informação seguindo o mouse.
+  if (ehMedidor.value) return null
+
+  // Pizza precisa de teste ANGULAR: a distância no eixo não diz nada num
+  // gráfico circular.
+  if (ehCircular.value) {
+    const p = planoPizza.value
+    const dx = x - p.cx
+    const dy = y - p.cy
+    const raio = Math.hypot(dx, dy)
+    // Fora do anel (ou dentro do furo da rosca) não há fatia sob o cursor.
+    if (raio > p.raioExterno || raio < p.raioInterno) return null
+
+    let angulo = (Math.atan2(dy, dx) * 180) / Math.PI
+    const fatia = p.fatias.find((f) => {
+      // Normaliza o ângulo pra mesma volta do início da fatia.
+      let a = angulo
+      while (a < f.anguloInicioBruto) a += 360
+      while (a >= f.anguloInicioBruto + 360) a -= 360
+      return a <= f.anguloFimBruto
+    })
+    return fatia ? fatia.indicePonto : null
+  }
+
+  const cats = plano.value.categorias
+  if (cats.length === 0) return null
+  const coordenada = horizontal.value ? y : x
+  let melhor = 0
+  let menorDistancia = Infinity
+  cats.forEach((cat, i) => {
+    const d = Math.abs(cat.centro - coordenada)
+    if (d < menorDistancia) {
+      menorDistancia = d
+      melhor = i
+    }
+  })
+  return melhor
+}
+
+function aoSairPonteiro(): void {
+  ponteiro.value = null
+  if (!focoVisivel.value) focado.value = null
+}
+
+function aoClicar(): void {
+  if (!focado.value) return
+  const evento = eventoDoPonto(focado.value.indiceSerie, focado.value.indicePonto)
+  if (evento) emit('point-click', evento)
+}
+
+// Tooltip aparece por hover E por foco de teclado — senão quem navega por
+// teclado perde a informação que o mouse tem.
+const tooltipVisivel = computed(
+  () => props.showTooltip && !ehMedidor.value && focado.value !== null && !dados.value.vazio,
+)
+
+const rotuloDoFoco = computed(() =>
+  focado.value ? (dados.value.rotulos[focado.value.indicePonto] ?? '') : '',
+)
+
+const pontosDoFoco = computed(() => {
+  if (!focado.value) return []
+  const i = focado.value.indicePonto
+  return seriesVisiveis.value
+    .map((serie) => {
+      const ponto = serie.pontos[i]
+      if (!ponto) return null
+      return {
+        seriesIndex: serie.indice,
+        seriesName: serie.nome,
+        formatted: ponto.valor === null ? '—' : formatar.value(ponto.valor),
+        cor: resolverCor(ponto, serie, colorByEfetivo.value, props.thresholds ?? []),
+      }
+    })
+    .filter((p): p is NonNullable<typeof p> => p !== null)
+})
+
+const estiloTooltip = computed(() => {
+  if (ponteiro.value) {
+    return { left: `${ponteiro.value.x}px`, top: `${ponteiro.value.y}px` }
+  }
+  // Sem cursor (navegação por teclado) o tooltip ancora no próprio dado.
+  if (ehCircular.value) {
+    const fatia = focado.value
+      ? planoPizza.value.fatias.find((f) => f.indicePonto === focado.value?.indicePonto)
+      : null
+    return { left: `${fatia?.rotuloX ?? planoPizza.value.cx}px`, top: `${fatia?.rotuloY ?? planoPizza.value.cy}px` }
+  }
+  const cat = focado.value ? plano.value.categorias[focado.value.indicePonto] : null
+  return { left: `${cat?.centro ?? 0}px`, top: `${plano.value.area.y}px` }
+})
+
+/**
+ * PNG do gráfico como está na tela — tema, paleta e faixas incluídos.
+ *
+ * Erro claro em vez de imagem vazia: estado de carregando ou sem dados não
+ * desenha `<svg>` nenhum, e devolver um PNG branco faria o relatório sair com um
+ * retângulo em branco no lugar do gráfico, sem ninguém notar.
+ */
+async function exportarImagem(opcoes: OpcoesImagemChart = {}): Promise<ImagemChart> {
+  const svg = svgRef.value
+  if (!svg) {
+    throw new Error(
+      'acai-ui-chart: nada desenhado para exportar (gráfico carregando ou sem dados).',
+    )
+  }
+  return svgChartParaImagem(svg, opcoes)
+}
+
+// `remedir` era um stub `() => undefined`: quem chamava depois de abrir aba ou
+// modal não remedia nada e o gráfico ficava no tamanho padrão.
+defineExpose({ remedir, exportarImagem })
+</script>
+
+<style lang="scss" src="./acai-ui-chart-styles.scss" />