acai-ui 1.65.5

package/src/components/chart/chart-imagem.ts

@@ -0,0 +1,247 @@
+// Export de imagem — SVG desenhado na tela → PNG (data URL).
+//
+// Existe porque gerador de relatório (Book/PDF) precisa da FIGURA, não do
+// componente: o jspdf recebe um `dataUrl` e o desenha na folha. Sem isto, um app
+// que já usa o `<acai-ui-chart>` na tela é obrigado a manter uma segunda lib de
+// gráfico só pra conseguir a imagem — e ficar com duas é pior que ficar com uma.
+//
+// ⚠️ A armadilha central: um `<img src="data:image/svg+xml,…">` é um DOCUMENTO
+// SEPARADO. Ele não vê a folha de estilo da página, nem as custom properties
+// `--acai-*`, nem as classes `scoped` do componente. Serializar o SVG cru
+// produziria um retângulo com tudo preto (ou nada). Por isso todo estilo COMPUTADO
+// é inlinado no clone antes de serializar: é o que carrega a paleta já resolvida
+// para o tema em vigor (claro, escuro, daltônico ou alto contraste).
+
+export interface OpcoesImagemChart {
+  /**
+   * Multiplicador de pixels. Default 2 — o PDF é impresso e 1× sai serrilhado.
+   * O `dataUrl` sai com `largura × escala` pixels, mas as dimensões devolvidas
+   * continuam em CSS px, que é o que o jspdf usa pra calcular a proporção.
+   */
+  escala?: number
+  /**
+   * Cor de fundo do PNG.
+   *
+   * Omitido, usa a **superfície do tema em vigor** (`--acai-chart-surface`) já
+   * resolvida — o que estava atrás do gráfico na tela. Não é preciosismo: o SVG é
+   * transparente, e no tema escuro a tinta do texto é CLARA. Chapar branco por
+   * padrão produziria texto claro sobre fundo branco, ilegível justamente no
+   * relatório, que é o único lugar onde ninguém vai reconferir.
+   *
+   * Passe `'#ffffff'` quando o destino é folha branca — e nesse caso gere o
+   * relatório com o tema claro, senão o gráfico não vai combinar com a página.
+   * `null` preserva a transparência.
+   */
+  fundo?: string | null
+}
+
+export interface ImagemChart {
+  /** `data:image/png;base64,…` — pronto pro `jspdf.addImage`. */
+  dataUrl: string
+  /** Dimensões em CSS px (não multiplicadas pela escala). */
+  largura: number
+  altura: number
+  /** `largura / altura`. É o que o gerador de PDF usa pra encaixar na folha. */
+  proporcao: number
+}
+
+/**
+ * Propriedades copiadas do estilo computado para o clone.
+ *
+ * Lista fechada de propósito: copiar o `cssText` inteiro do computado emitiria
+ * ~340 declarações POR NÓ, e o data URL de um gráfico de 300 elementos passaria
+ * de 1 MB — grande o bastante para o `<img>` engasgar. Aqui está só o que pinta.
+ */
+const PROPRIEDADES_PINTURA: readonly string[] = [
+  'fill',
+  'fill-opacity',
+  'fill-rule',
+  'stroke',
+  'stroke-width',
+  'stroke-opacity',
+  'stroke-dasharray',
+  'stroke-dashoffset',
+  'stroke-linecap',
+  'stroke-linejoin',
+  'stroke-miterlimit',
+  'opacity',
+  'display',
+  'visibility',
+  'color',
+  'font-family',
+  'font-size',
+  'font-style',
+  'font-weight',
+  'letter-spacing',
+  'text-anchor',
+  'dominant-baseline',
+  'paint-order',
+]
+
+/** Só na tela: o anel de foco não pode aparecer na figura do relatório. */
+const CLASSES_DESCARTADAS = ['acai-chart__foco']
+
+/**
+ * Copia o estilo computado da árvore ORIGINAL para a clonada, nó a nó.
+ *
+ * Percorre os dois em paralelo em vez de reconsultar o DOM: o clone está fora do
+ * documento, então `getComputedStyle` nele devolveria valores iniciais — é o erro
+ * que faz o export sair todo preto.
+ */
+function inlinarEstilos(origem: Element, destino: Element): void {
+  const computado = window.getComputedStyle(origem)
+
+  let css = ''
+  for (const propriedade of PROPRIEDADES_PINTURA) {
+    const valor = computado.getPropertyValue(propriedade)
+    if (valor) css += `${propriedade}:${valor};`
+  }
+  if (css) destino.setAttribute('style', css)
+
+  const filhosOrigem = origem.children
+  const filhosDestino = destino.children
+  for (let i = 0; i < filhosOrigem.length; i++) {
+    const filhoOrigem = filhosOrigem[i]
+    const filhoDestino = filhosDestino[i]
+    if (filhoOrigem && filhoDestino) inlinarEstilos(filhoOrigem, filhoDestino)
+  }
+}
+
+export interface SvgSerializado {
+  texto: string
+  largura: number
+  altura: number
+}
+
+/**
+ * SVG autossuficiente: estilos resolvidos, namespace declarado e dimensões
+ * explícitas. Serve tanto pro raster quanto pra quem quiser o `.svg` puro.
+ */
+export function serializarSvgChart(svg: SVGSVGElement): SvgSerializado {
+  const clone = svg.cloneNode(true) as SVGSVGElement
+  inlinarEstilos(svg, clone)
+
+  for (const classe of CLASSES_DESCARTADAS) {
+    clone.querySelectorAll(`.${classe}`).forEach((el) => el.remove())
+  }
+
+  const caixa = svg.getBoundingClientRect()
+  // O atributo vem do próprio componente (ele desenha 1:1, sem esticar viewBox);
+  // a caixa medida é a rede de segurança pra SVG sem atributo.
+  const largura = Number(svg.getAttribute('width')) || caixa.width || 640
+  const altura = Number(svg.getAttribute('height')) || caixa.height || 320
+
+  // Sem os namespaces o documento carregado pelo `<img>` não é SVG válido e o
+  // `onerror` dispara sem mensagem útil.
+  clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg')
+  clone.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink')
+  clone.setAttribute('width', String(largura))
+  clone.setAttribute('height', String(altura))
+  if (!clone.getAttribute('viewBox')) {
+    clone.setAttribute('viewBox', `0 0 ${largura} ${altura}`)
+  }
+  // Atributos de interação não fazem sentido numa figura estática.
+  clone.removeAttribute('tabindex')
+  clone.removeAttribute('role')
+
+  return { texto: new XMLSerializer().serializeToString(clone), largura, altura }
+}
+
+/**
+ * Resolve um valor de cor que pode ser `var(--token)`.
+ *
+ * ⚠️ `getComputedStyle(el).getPropertyValue('--acai-chart-surface')` **não serve**:
+ * custom property devolve o valor ESPECIFICADO, e aqui isso é a string literal
+ * `var(--acai-surface)` — que o canvas não entende. A sonda existe pra o motor de
+ * CSS fazer a substituição: atribuir a uma propriedade real (`background-color`) e
+ * ler o computado devolve `rgb(...)`.
+ *
+ * A sonda entra ao lado do gráfico, e não no `<body>`, porque o token pode ter
+ * sido sobrescrito num contêiner intermediário (é assim que a documentação pinta
+ * a própria identidade).
+ */
+function resolverCorCss(valor: string, contexto: Element, reserva: string): string {
+  const pai = contexto.parentElement ?? document.body
+  const sonda = document.createElement('span')
+  sonda.style.cssText = `position:absolute;width:0;height:0;visibility:hidden;background-color:${valor}`
+  pai.appendChild(sonda)
+  const resolvida = window.getComputedStyle(sonda).backgroundColor
+  sonda.remove()
+
+  // Token inexistente computa como transparente — aí a reserva é melhor do que
+  // devolver um PNG sem fundo achando que tem.
+  if (!resolvida || resolvida === 'rgba(0, 0, 0, 0)' || resolvida === 'transparent') {
+    return reserva
+  }
+  return resolvida
+}
+
+/** Acima disso desistimos: melhor erro claro que promessa que nunca resolve. */
+const TIMEOUT_MS = 8000
+
+function carregarImagem(dataUrl: string): Promise<HTMLImageElement> {
+  return new Promise((resolver, rejeitar) => {
+    const img = new Image()
+    const relogio = setTimeout(() => {
+      rejeitar(new Error('acai-ui-chart: tempo esgotado ao rasterizar o SVG do gráfico.'))
+    }, TIMEOUT_MS)
+
+    img.onload = () => {
+      clearTimeout(relogio)
+      resolver(img)
+    }
+    img.onerror = () => {
+      clearTimeout(relogio)
+      rejeitar(new Error('acai-ui-chart: o navegador recusou o SVG serializado do gráfico.'))
+    }
+    img.src = dataUrl
+  })
+}
+
+/**
+ * Rasteriza o SVG de um gráfico já desenhado.
+ *
+ * Data URL e não `URL.createObjectURL`: o blob de SVG **suja o canvas** em parte
+ * dos navegadores, e aí o `toDataURL` estoura `SecurityError`. E `encodeURIComponent`
+ * e não `btoa`: `btoa` quebra em qualquer caractere fora do Latin-1, ou seja em
+ * qualquer rótulo com acento — "Ananindeua", "Órgão", "Óbidos".
+ */
+export async function svgChartParaImagem(
+  svg: SVGSVGElement,
+  opcoes: OpcoesImagemChart = {},
+): Promise<ImagemChart> {
+  if (typeof document === 'undefined') {
+    throw new Error('acai-ui-chart: export de imagem exige navegador.')
+  }
+
+  const escala = Math.max(0.1, opcoes.escala ?? 2)
+  const fundo =
+    opcoes.fundo === undefined
+      ? resolverCorCss('var(--acai-chart-surface)', svg, '#ffffff')
+      : opcoes.fundo
+
+  const { texto, largura, altura } = serializarSvgChart(svg)
+  const img = await carregarImagem(
+    `data:image/svg+xml;charset=utf-8,${encodeURIComponent(texto)}`,
+  )
+
+  const canvas = document.createElement('canvas')
+  canvas.width = Math.max(1, Math.round(largura * escala))
+  canvas.height = Math.max(1, Math.round(altura * escala))
+
+  const ctx = canvas.getContext('2d')
+  if (!ctx) throw new Error('acai-ui-chart: canvas 2d indisponível.')
+
+  if (fundo) {
+    ctx.fillStyle = fundo
+    ctx.fillRect(0, 0, canvas.width, canvas.height)
+  }
+  ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
+
+  return {
+    dataUrl: canvas.toDataURL('image/png'),
+    largura,
+    altura,
+    proporcao: altura > 0 ? largura / altura : 1,
+  }
+}

package/src/components/chart/chart-layout.ts

@@ -0,0 +1,184 @@
+// Layout — quanto espaço o chrome come e o que sobra pra plotagem.
+//
+// O ponto delicado aqui é medir texto SEM DOM. `canvas.measureText` seria exato,
+// mas exige `document` (morre em SSR), custa um reflow por medição e tornaria
+// esta camada intestável sem navegador. A saída é uma tabela de avanço médio por
+// classe de caractere: erro de ~8%, compensado por folga nas margens. Errar 8%
+// numa margem é invisível; não conseguir testar o layout, não.
+//
+// A responsividade da lib mora aqui: ela é por REGRA (menos ticks, rótulo
+// rotacionado, legenda embaixo), não por escala. Esticar o `viewBox` escalaria
+// o TEXTO junto — a mesma folha em 380px e 1400px teria rótulo de 8px e de
+// 20px, quebrando o eMAG 4.1 e ignorando a preferência de tamanho de fonte.
+
+export interface Margens {
+  topo: number
+  direita: number
+  base: number
+  esquerda: number
+}
+
+export interface AreaPlotagem {
+  x: number
+  y: number
+  largura: number
+  altura: number
+}
+
+export type RotacaoRotulo = 0 | -45 | -90
+
+/** Abaixo disto o layout entra em modo compacto. Casa com o `S`/`XS` do estudo. */
+export const LARGURA_COMPACTA = 480
+
+/** Avanço médio por caractere, em múltiplos do tamanho da fonte (stack sans do sistema). */
+const ESTREITOS = new Set("iljtIf.,:;'\"|!()[]{}-")
+const LARGOS = new Set('mwMW@%')
+
+/**
+ * Largura aproximada de um texto, sem tocar no DOM.
+ * Alvo de precisão: ±8%. Quem consome soma folga em cima.
+ */
+export function medirTextoAprox(texto: string, tamanhoFontePx: number): number {
+  if (!texto || tamanhoFontePx <= 0) return 0
+
+  let avanco = 0
+  for (const c of texto) {
+    if (c === ' ') avanco += 0.26
+    else if (ESTREITOS.has(c)) avanco += 0.3
+    else if (LARGOS.has(c)) avanco += 0.87
+    else if (c >= 'A' && c <= 'Z') avanco += 0.64
+    else if (c >= '0' && c <= '9') avanco += 0.56
+    else avanco += 0.52
+  }
+  return avanco * tamanhoFontePx
+}
+
+function maiorLargura(rotulos: readonly string[], tamanhoFontePx: number): number {
+  return rotulos.reduce((max, r) => Math.max(max, medirTextoAprox(r, tamanhoFontePx)), 0)
+}
+
+/**
+ * Rotação necessária pros rótulos do eixo de categoria não se sobreporem.
+ *
+ * Escalonado de propósito: horizontal é o mais legível, então só sai de 0 quando
+ * realmente não cabe. -90 é o último recurso (leitura vertical cansa).
+ */
+export function decidirRotacao(
+  rotulos: readonly string[],
+  larguraDisponivel: number,
+  tamanhoFontePx: number,
+): RotacaoRotulo {
+  if (rotulos.length === 0 || larguraDisponivel <= 0) return 0
+
+  const porCategoria = larguraDisponivel / rotulos.length
+  // 6px de respiro entre rótulos vizinhos: encostados, viram um borrão só.
+  const necessaria = maiorLargura(rotulos, tamanhoFontePx) + 6
+
+  if (necessaria <= porCategoria) return 0
+  // A 45° a projeção horizontal cai por ~cos(45); ainda dá pra ler correndo o olho.
+  if (necessaria * Math.SQRT1_2 <= porCategoria * 1.8) return -45
+  return -90
+}
+
+/** Altura que a faixa de rótulos vai ocupar abaixo do eixo. */
+export function alturaRotulos(
+  rotulos: readonly string[],
+  rotacao: RotacaoRotulo,
+  tamanhoFontePx: number,
+  maxLinhas = 2,
+): number {
+  if (rotulos.length === 0) return 0
+  const alturaLinha = tamanhoFontePx * 1.25
+
+  if (rotacao === 0) return alturaLinha * Math.max(1, Math.min(maxLinhas, 2))
+  const largura = maiorLargura(rotulos, tamanhoFontePx)
+  if (rotacao === -45) return largura * Math.SQRT1_2 + alturaLinha * 0.5
+  return largura + alturaLinha * 0.25
+}
+
+export interface EntradaLayout {
+  largura: number
+  altura: number
+  rotulosCategoria: readonly string[]
+  /** Rótulos JÁ formatados do eixo de valor — a margem esquerda depende do maior. */
+  rotulosValor: readonly string[]
+  horizontal?: boolean
+  temTitulo?: boolean
+  temLegenda?: boolean
+  posicaoLegenda?: 'bottom' | 'right'
+  tamanhoFontePx?: number
+}
+
+export interface ResultadoLayout {
+  margens: Margens
+  area: AreaPlotagem
+  rotacao: RotacaoRotulo
+  /** Abaixo de LARGURA_COMPACTA: menos ticks, sem rótulo de valor, legenda embaixo. */
+  compacto: boolean
+}
+
+/** Respiro mínimo pra o traço da linha e o rótulo de valor não serem cortados. */
+const FOLGA = 8
+
+export function calcularLayout(entrada: EntradaLayout): ResultadoLayout {
+  const fonte = entrada.tamanhoFontePx ?? 12
+  const largura = Math.max(0, entrada.largura)
+  const altura = Math.max(0, entrada.altura)
+  const compacto = largura < LARGURA_COMPACTA
+  const alturaLinha = fonte * 1.25
+
+  const topo = FOLGA + (entrada.temTitulo ? alturaLinha * 1.6 : 0)
+
+  // Legenda à direita em tela estreita rouba metade da plotagem: força embaixo.
+  const legendaDireita =
+    entrada.temLegenda === true && entrada.posicaoLegenda === 'right' && !compacto
+  const legendaAbaixo = entrada.temLegenda === true && !legendaDireita
+
+  const direita = FOLGA + (legendaDireita ? Math.min(largura * 0.28, 160) : 0)
+
+  let esquerda: number
+  let base: number
+  let rotacao: RotacaoRotulo = 0
+
+  if (entrada.horizontal) {
+    // Barras horizontais invertem os papéis: a categoria vira eixo Y, e o nome
+    // do município é MUITO mais largo que um número — daí o teto generoso.
+    esquerda = FOLGA + Math.min(maiorLargura(entrada.rotulosCategoria, fonte) + 10, largura * 0.4)
+    base = FOLGA + alturaLinha
+  } else {
+    esquerda = FOLGA + maiorLargura(entrada.rotulosValor, fonte) + 10
+    const larguraEixo = Math.max(0, largura - esquerda - direita)
+    rotacao = decidirRotacao(entrada.rotulosCategoria, larguraEixo, fonte)
+    base = FOLGA + alturaRotulos(entrada.rotulosCategoria, rotacao, fonte)
+  }
+
+  if (legendaAbaixo) base += alturaLinha * 1.8
+
+  const margens: Margens = { topo, direita, base, esquerda }
+
+  // Rótulo longo demais poderia comer a área inteira e produzir largura
+  // negativa — o SVG aceita e desenha nada, sem erro.
+  const area: AreaPlotagem = {
+    x: esquerda,
+    y: topo,
+    largura: Math.max(0, largura - esquerda - direita),
+    altura: Math.max(0, altura - topo - base),
+  }
+
+  return { margens, area, rotacao, compacto }
+}
+
+/**
+ * Altura total pra barras horizontais, onde a altura é FUNÇÃO da quantidade de
+ * barras (não o contrário): 40 municípios numa caixa de 320px viram traços de
+ * 4px. Espelha o `nItens * 36 + 40` que o est-web calculava na mão em cada tela.
+ */
+export function alturaAutomatica(
+  quantidadeBarras: number,
+  opcoes: { alturaBarra?: number; margens?: number } = {},
+): number {
+  const n = Math.max(0, Math.floor(quantidadeBarras))
+  const alturaBarra = opcoes.alturaBarra ?? 36
+  const margens = opcoes.margens ?? 40
+  return n * alturaBarra + margens
+}

package/src/components/chart/chart-legenda.vue

@@ -0,0 +1,103 @@
+<template>
+  <ul class="acai-chart-legenda" :class="`acai-chart-legenda--${posicao}`">
+    <li v-for="serie in series" :key="serie.indice">
+      <!--
+        Botão de verdade, não div com @click: precisa de foco, Enter/Espaço e
+        anúncio de estado de graça. `aria-pressed` é o que diz ao leitor de tela
+        que a série está ligada ou desligada.
+      -->
+      <button
+        type="button"
+        class="acai-chart-legenda__item"
+        :class="{ 'acai-chart-legenda__item--oculta': serie.oculta }"
+        :aria-pressed="!serie.oculta"
+        @click="emit('toggle', serie.indice)"
+      >
+        <svg class="acai-chart-legenda__marca" viewBox="0 0 14 14" aria-hidden="true" focusable="false">
+          <!--
+            A MESMA forma do gráfico, não um quadradinho genérico: é o que liga
+            a legenda à linha desenhada quando a cor não basta (eMAG 4.2).
+          -->
+          <path v-if="serie.tipo !== 'bar'" :d="marcaLinha(serie)" :fill="serie.cor" />
+          <rect v-else x="1" y="3.5" width="12" height="7" rx="1.5" :fill="serie.cor" />
+        </svg>
+        <span class="acai-chart-legenda__texto">{{ serie.nome }}</span>
+      </button>
+    </li>
+  </ul>
+</template>
+
+<script setup lang="ts">
+import { caminhoMarcador } from './chart-caminhos'
+import type { SerieNormalizada } from './acai-ui-chart-interface'
+
+withDefaults(
+  defineProps<{
+    series: SerieNormalizada[]
+    posicao?: 'bottom' | 'right'
+  }>(),
+  { posicao: 'bottom' },
+)
+
+const emit = defineEmits<{ toggle: [indiceSerie: number] }>()
+
+function marcaLinha(serie: SerieNormalizada): string {
+  return caminhoMarcador(serie.marcador, 7, 7, 9)
+}
+</script>
+
+<style lang="scss" scoped>
+.acai-chart-legenda {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 16px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+
+  &--right {
+    flex-direction: column;
+    flex-wrap: nowrap;
+  }
+
+  &__item {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 2px 4px;
+    border: 0;
+    border-radius: 4px;
+    background: none;
+    color: var(--acai-chart-ink-muted);
+    font: inherit;
+    font-size: 0.75rem;
+    line-height: 1.4;
+    cursor: pointer;
+
+    &:hover {
+      background: var(--acai-surface-hover);
+    }
+
+    // Não remover: foco visível é requisito (eMAG 4.3).
+    &:focus-visible {
+      outline: 2px solid var(--acai-control-on);
+      outline-offset: 2px;
+    }
+
+    // Série desligada continua legível — some a cor, não o texto.
+    &--oculta {
+      opacity: 0.45;
+
+      .acai-chart-legenda__texto {
+        text-decoration: line-through;
+      }
+    }
+  }
+
+  &__marca {
+    flex: 0 0 14px;
+    width: 14px;
+    height: 14px;
+  }
+}
+</style>

package/src/components/chart/chart-pizza.vue

@@ -0,0 +1,134 @@
+<template>
+  <g class="acai-chart-pizza">
+    <g v-for="fatia in plano.fatias" :key="fatia.chave">
+      <path
+        :d="fatia.d"
+        :fill="fatia.cor"
+        :class="{ 'acai-chart-pizza--apagada': apagada(fatia.indicePonto) }"
+        stroke="var(--acai-chart-surface)"
+        stroke-width="1.5"
+      />
+      <!-- Hachura por CIMA da cor real, pra não substituir o colorBy. -->
+      <path
+        v-show="padroes"
+        :d="fatia.d"
+        :fill="`url(#${idPadrao}-p${fatia.indicePonto % 5})`"
+        :class="{ 'acai-chart-pizza--apagada': apagada(fatia.indicePonto) }"
+      />
+    </g>
+
+    <!-- Realce: anel por fora da fatia focada. Deslocar a fatia mexeria na
+         geometria de todas as outras e faria o gráfico "pular". -->
+    <path
+      v-if="fatiaFocada"
+      class="acai-chart-pizza__realce"
+      :d="fatiaFocada.d"
+    />
+
+    <!--
+      Rótulos por último, sempre por cima. Em pizza eles NÃO são enfeite: como
+      só 2 a 4 cores se separam entre TODOS os pares (e aqui toda fatia toca
+      todas), o rótulo é o canal primário de leitura.
+    -->
+    <g class="acai-chart-pizza__guias" aria-hidden="true">
+      <path v-for="fatia in externas" :key="`g${fatia.chave}`" :d="fatia.linhaGuia" />
+    </g>
+
+    <g class="acai-chart-pizza__rotulos" aria-hidden="true">
+      <text
+        v-for="fatia in plano.fatias"
+        :key="`r${fatia.chave}`"
+        :x="fatia.rotuloX"
+        :y="fatia.rotuloY"
+        :text-anchor="fatia.ancora"
+        :class="fatia.dentro ? 'acai-chart-pizza__rotulo--dentro' : 'acai-chart-pizza__rotulo--fora'"
+        dominant-baseline="middle"
+      >
+        <template v-if="fatia.dentro">{{ fatia.percentual }}</template>
+        <template v-else>
+          <tspan :x="fatia.rotuloX" dy="-0.55em">{{ encurtar(fatia.rotulo) }}</tspan>
+          <!-- Valor + percentual: só a porcentagem esconde a grandeza, e num
+               relatório de governo o número absoluto é o que se confere. -->
+          <tspan :x="fatia.rotuloX" dy="1.15em" class="acai-chart-pizza__pct">
+            {{ fatia.valorFormatado }} · {{ fatia.percentual }}
+          </tspan>
+        </template>
+      </text>
+    </g>
+  </g>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { truncarRotulo } from './chart-rotulos'
+import type { PlanoPizza } from './chart-plano'
+
+const props = withDefaults(
+  defineProps<{
+    plano: PlanoPizza
+    padroes?: boolean | undefined
+    idPadrao?: string | undefined
+    focado?: { indiceSerie: number; indicePonto: number } | null | undefined
+    atenuar?: boolean | undefined
+  }>(),
+  { padroes: false, idPadrao: '', focado: null, atenuar: false },
+)
+
+const externas = computed(() => props.plano.fatias.filter((f) => f.linhaGuia))
+
+const fatiaFocada = computed(() => {
+  if (!props.focado) return null
+  return props.plano.fatias.find((f) => f.indicePonto === props.focado?.indicePonto) ?? null
+})
+
+function apagada(indicePonto: number): boolean {
+  if (!props.atenuar || !props.focado) return false
+  return props.focado.indicePonto !== indicePonto
+}
+
+// Nome de município não cabe ao lado da fatia; cortar é melhor que sobrepor.
+function encurtar(rotulo: string): string {
+  return truncarRotulo(rotulo, props.plano.compacto ? 10 : 16)
+}
+</script>
+
+<style lang="scss" scoped>
+.acai-chart-pizza {
+  &__guias path {
+    fill: none;
+    stroke: var(--acai-chart-axis);
+    stroke-width: 1;
+  }
+
+  &__rotulos text {
+    // rem, não atributo: acompanha a preferência de tamanho de fonte.
+    font-size: 0.75rem;
+    fill: var(--acai-chart-ink);
+  }
+
+  &__rotulo--dentro {
+    font-weight: 700;
+    // Contorno na cor da superfície: o percentual fica legível sobre QUALQUER
+    // cor de fatia, sem precisar decidir texto claro ou escuro por fatia.
+    paint-order: stroke;
+    stroke: var(--acai-chart-surface);
+    stroke-width: 3px;
+    stroke-linejoin: round;
+  }
+
+  &__pct {
+    fill: var(--acai-chart-ink-muted);
+  }
+
+  &__realce {
+    fill: none;
+    stroke: var(--acai-control-on);
+    stroke-width: 3;
+    pointer-events: none;
+  }
+
+  &--apagada {
+    opacity: 0.35;
+  }
+}
+</style>