acai-ui 1.65.5

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

@@ -0,0 +1,818 @@
+// Plano de desenho — transforma dados + caixa em coordenadas prontas.
+//
+// Tudo que é ARITMÉTICA do gráfico mora aqui, e o `.vue` só percorre listas e
+// pinta. Ganho concreto: dá pra testar "a barra do valor 0 encosta no eixo",
+// "o rótulo do tick está no y certo", "a linha pula o buraco" sem montar
+// componente nem medir DOM.
+
+import {
+  caixaDoArco,
+  caminhoArco,
+  caminhoArea,
+  caminhoBarra,
+  caminhoLinha,
+  caminhoMarcador,
+  caminhoSetor,
+  fatiasPizza,
+  pontoNoArco,
+  type MarcadorSerie,
+  type Ponto,
+} from './chart-caminhos'
+import { corQuasarParaToken, dominioDeSeries, empilhar, resolverCor } from './chart-dados'
+import { escalaBanda, escalaLinear, escalaSubBanda } from './chart-escalas'
+import {
+  LARGURA_COMPACTA,
+  calcularLayout,
+  type AreaPlotagem,
+  type RotacaoRotulo,
+} from './chart-layout'
+import { quebrarRotulo } from './chart-rotulos'
+import { dominioBonito } from './chart-ticks'
+import type {
+  ChartColorBy,
+  ChartThreshold,
+  DadosNormalizados,
+} from './acai-ui-chart-interface'
+
+export interface TickPlano {
+  valor: number
+  /** Coordenada no eixo de valor (y em vertical, x em horizontal). */
+  posicao: number
+  rotulo: string
+}
+
+export interface CategoriaPlano {
+  rotulo: string
+  /** Já quebrado em linhas — em SVG cada uma vira um `<tspan>`. */
+  linhas: string[]
+  centro: number
+  inicio: number
+  largura: number
+}
+
+export interface BarraPlano {
+  chave: string
+  indiceSerie: number
+  indicePonto: number
+  d: string
+  cor: string
+  fantasma: boolean
+  /** Posição do rótulo direto de valor, quando ligado. */
+  rotulo: string
+  rotuloX: number
+  rotuloY: number
+}
+
+export interface LinhaPlano {
+  chave: string
+  indiceSerie: number
+  d: string
+  dArea: string
+  cor: string
+  tracejada: boolean
+  marcadores: Array<{ d: string; indicePonto: number }>
+  marcador: MarcadorSerie
+}
+
+export interface PlanoCartesiano {
+  area: AreaPlotagem
+  horizontal: boolean
+  rotacao: RotacaoRotulo
+  compacto: boolean
+  ticks: TickPlano[]
+  categorias: CategoriaPlano[]
+  barras: BarraPlano[]
+  linhas: LinhaPlano[]
+  /** Coordenada da linha do zero, quando ela cai dentro da área. */
+  zero: number | null
+}
+
+// ── pizza / rosca ──────────────────────────────────────────────────────────
+
+export interface FatiaPlano {
+  chave: string
+  indicePonto: number
+  d: string
+  cor: string
+  rotulo: string
+  valor: number
+  percentual: string
+  /** Valor absoluto já formatado. Percentual sozinho esconde a grandeza. */
+  valorFormatado: string
+  /** Ângulos crus — o hit-test do cursor em pizza é ANGULAR, não por distância. */
+  anguloInicioBruto: number
+  anguloFimBruto: number
+  /** Rótulo cabe DENTRO da fatia; senão vai pra fora com linha-guia. */
+  dentro: boolean
+  rotuloX: number
+  rotuloY: number
+  ancora: 'start' | 'middle' | 'end'
+  /** Traço ligando a fatia ao rótulo externo. Vazio quando o rótulo é interno. */
+  linhaGuia: string
+}
+
+export interface PlanoPizza {
+  cx: number
+  cy: number
+  raioExterno: number
+  raioInterno: number
+  fatias: FatiaPlano[]
+  compacto: boolean
+}
+
+export interface EntradaPizza {
+  dados: DadosNormalizados
+  largura: number
+  altura: number
+  formatar: (valor: number) => string
+  /** 0 = pizza; 0..0.95 = fração do raio virando furo. */
+  raioInterno?: number
+  colorBy?: ChartColorBy
+  thresholds?: readonly ChartThreshold[]
+  tamanhoFontePx?: number
+}
+
+/** Abaixo disso o rótulo não cabe dentro da fatia e vai pra fora. */
+const FRACAO_ROTULO_INTERNO = 0.12
+/** Espaço reservado nas laterais pros rótulos externos. */
+const MARGEM_ROTULO = 86
+
+/**
+ * Monta a pizza/rosca.
+ *
+ * O rótulo direto NÃO é enfeite: a medição da paleta mostrou que, entre TODOS
+ * os pares (e em pizza toda fatia toca todas), só 2 a 4 cores se separam
+ * dependendo do modo. Sem o rótulo na fatia, boa parte dos usuários não
+ * consegue ler o gráfico — por isso ele é calculado aqui, não opcional.
+ */
+export function montarPlanoPizza(entrada: EntradaPizza): PlanoPizza {
+  const {
+    dados,
+    largura,
+    altura,
+    formatar,
+    raioInterno = 0,
+    colorBy = 'series',
+    thresholds = [],
+  } = entrada
+
+  const compacto = largura < LARGURA_COMPACTA
+  const serie = dados.series.find((s) => !s.oculta)
+
+  const cx = largura / 2
+  const cy = altura / 2
+  // O raio desconta a margem dos rótulos externos; sem isso o texto sai da
+  // caixa e é cortado pelo container.
+  const margem = compacto ? 44 : MARGEM_ROTULO
+  const raioExterno = Math.max(
+    0,
+    Math.min(largura / 2 - margem, altura / 2 - 16),
+  )
+  const ri = Math.max(0, Math.min(0.95, raioInterno)) * raioExterno
+
+  if (!serie || raioExterno <= 0) {
+    return { cx, cy, raioExterno: 0, raioInterno: 0, fatias: [], compacto }
+  }
+
+  const valores = serie.pontos.map((p) => (p.valor === null ? 0 : p.valor))
+  const fatiasBase = fatiasPizza(valores, { espacoGraus: valores.length > 1 ? 1 : 0 })
+
+  const fatias: FatiaPlano[] = []
+  fatiasBase.forEach((fatia) => {
+    if (fatia.valor <= 0) return
+    const ponto = serie.pontos[fatia.indice]
+    if (!ponto) return
+
+    const meio = (fatia.anguloInicio + fatia.anguloFim) / 2
+    const dentro = fatia.fracao >= FRACAO_ROTULO_INTERNO && !compacto
+    const percentual = `${(fatia.fracao * 100).toFixed(fatia.fracao < 0.1 ? 1 : 0).replace('.', ',')}%`
+
+    let rotuloX: number
+    let rotuloY: number
+    let ancora: FatiaPlano['ancora'] = 'middle'
+    let linhaGuia = ''
+
+    if (dentro) {
+      const raioTexto = ri > 0 ? (raioExterno + ri) / 2 : raioExterno * 0.62
+      const p = pontoNoArco(cx, cy, raioTexto, meio)
+      rotuloX = p.x
+      rotuloY = p.y
+    } else {
+      const aDireita = Math.cos((meio * Math.PI) / 180) >= 0
+      const dobra = pontoNoArco(cx, cy, raioExterno + 10, meio)
+      const fim = { x: aDireita ? dobra.x + 14 : dobra.x - 14, y: dobra.y }
+      const inicio = pontoNoArco(cx, cy, raioExterno, meio)
+      linhaGuia = `M ${inicio.x.toFixed(2)} ${inicio.y.toFixed(2)} L ${dobra.x.toFixed(2)} ${dobra.y.toFixed(2)} L ${fim.x.toFixed(2)} ${fim.y.toFixed(2)}`
+      rotuloX = aDireita ? fim.x + 4 : fim.x - 4
+      rotuloY = fim.y
+      ancora = aDireita ? 'start' : 'end'
+    }
+
+    fatias.push({
+      chave: `f-${fatia.indice}`,
+      indicePonto: fatia.indice,
+      d: caminhoSetor(cx, cy, raioExterno, ri, fatia.anguloInicio, fatia.anguloFim),
+      cor: resolverCor(ponto, serie, colorBy, thresholds),
+      rotulo: ponto.rotulo,
+      valor: fatia.valor,
+      percentual,
+      valorFormatado: formatar(fatia.valor),
+      anguloInicioBruto: fatia.anguloInicio,
+      anguloFimBruto: fatia.anguloFim,
+      dentro,
+      rotuloX,
+      rotuloY,
+      ancora,
+      linhaGuia,
+    })
+  })
+
+  return { cx, cy, raioExterno, raioInterno: ri, fatias, compacto }
+}
+
+// ── medidor (gauge) ────────────────────────────────────────────────────────
+
+export interface FaixaGaugePlano {
+  chave: string
+  d: string
+  cor: string
+}
+
+export interface PlanoGauge {
+  cx: number
+  cy: number
+  raio: number
+  espessura: number
+  /** Arco de fundo — a escala inteira. */
+  dTrilho: string
+  /** Arco preenchido até o valor. Vazio quando não há valor. */
+  dProgresso: string
+  /** Trilho fatiado pelas faixas de `thresholds` (só com `bands`). */
+  faixas: FaixaGaugePlano[]
+  /** Agulha + eixo. Vazios quando `pointer` está desligado. */
+  dPonteiro: string
+  dEixoPonteiro: string
+  /**
+   * Traço radial cruzando o arco na posição do valor. Só com `bands` e sem
+   * agulha: ali o progresso é fino e da cor da faixa, e sobre um trilho já
+   * colorido o olho não acha onde ele termina.
+   */
+  dMarcadorValor: string
+  cor: string
+  valor: number | null
+  valorFormatado: string
+  /** Posição do valor no domínio, 0..1 — já com clamp. */
+  fracao: number
+  /** Rótulos das pontas da escala. */
+  minFormatado: string
+  maxFormatado: string
+  minX: number
+  maxX: number
+  rotulosY: number
+  /**
+   * Se vale desenhar os rótulos das pontas. Em volta completa as duas pontas
+   * caem no MESMO ponto: os dois rótulos se empilham um sobre o outro e ainda por
+   * cima do arco.
+   */
+  mostrarEscala: boolean
+  /** Âncora do número central (linha de base) e da legenda logo abaixo. */
+  textoX: number
+  textoY: number
+  legendaY: number
+  legenda: string
+  compacto: boolean
+}
+
+export interface EntradaGauge {
+  dados: DadosNormalizados
+  largura: number
+  altura: number
+  formatar: (valor: number) => string
+  min?: number
+  max?: number
+  anguloInicio?: number
+  anguloFim?: number
+  espessura?: number
+  ponteiro?: boolean
+  bandas?: boolean
+  legenda?: string
+  colorBy?: ChartColorBy
+  thresholds?: readonly ChartThreshold[]
+}
+
+/**
+ * Converte o ângulo polar do consumidor (0° à direita, crescendo no
+ * ANTI-horário, como no echarts) pro sistema do SVG, onde o y cresce pra baixo
+ * e o `pontoNoArco` cresce no horário. É só a inversão de sinal, mas explicitar
+ * evita a confusão que faria o medidor nascer de cabeça pra baixo.
+ */
+function paraAnguloSvg(anguloPolar: number): number {
+  return -anguloPolar
+}
+
+/** Respiro pros rótulos de mínimo/máximo nas pontas do arco. */
+const FOLGA_GAUGE = 10
+
+/**
+ * Altura reservada pro número quando ele sai do centro.
+ *
+ * Casa com o `font-size: 1.75rem` do `chart-gauge.vue` (28px) mais um fio de
+ * folga. Se aquele tamanho mudar, este número muda junto — é a duplicata
+ * inevitável entre o SCSS e a aritmética do layout, igual à dos breakpoints.
+ */
+const ALTURA_VALOR_GAUGE = 30
+
+/** Altura da legenda miúda sob o número. */
+const ALTURA_LEGENDA_GAUGE = 16
+
+/**
+ * Monta o medidor.
+ *
+ * O número vai DENTRO do SVG, e não num overlay HTML por cima: overlay não entra
+ * no export de imagem, e o medidor sem o número exportado viraria um arco
+ * colorido sem informação nenhuma no PDF.
+ */
+export function montarPlanoGauge(entrada: EntradaGauge): PlanoGauge {
+  const {
+    dados,
+    largura,
+    altura,
+    formatar,
+    min = 0,
+    max = 100,
+    anguloInicio = 180,
+    anguloFim = 0,
+    espessura = 14,
+    ponteiro = false,
+    bandas = false,
+    legenda = '',
+    colorBy = 'series',
+    thresholds = [],
+  } = entrada
+
+  const compacto = largura < LARGURA_COMPACTA
+
+  // Sem par ordenado não há escala: min == max dividiria por zero e o arco
+  // ficaria preso em 0% (ou em NaN, que não desenha e não avisa).
+  const baixo = Math.min(min, max)
+  const alto = Math.max(min, max)
+  const amplitude = alto - baixo
+
+  const serie = dados.series.find((s) => !s.oculta)
+  const ponto = serie?.pontos.find((p) => p.valor !== null) ?? serie?.pontos[0]
+  const valor = ponto?.valor ?? null
+
+  const fracao =
+    valor === null || amplitude <= 0 ? 0 : clamp((valor - baixo) / amplitude, 0, 1)
+
+  // Varredura no sentido do desenho. Ângulos iguais (ou invertidos) viram uma
+  // volta completa em vez de um arco de zero grau que não apareceria.
+  const svgInicio = paraAnguloSvg(anguloInicio)
+  const svgFimBruto = paraAnguloSvg(anguloFim)
+  const svgFim = svgFimBruto > svgInicio ? svgFimBruto : svgInicio + 360
+
+  const caixa = caixaDoArco(svgInicio, svgFim)
+  const larguraCaixa = Math.max(0.0001, caixa.maxX - caixa.minX)
+  const alturaCaixa = Math.max(0.0001, caixa.maxY - caixa.minY)
+
+  // A borda do traço avança meia espessura pra fora do raio, e o rótulo da ponta
+  // pede mais um pouco — descontar isso é o que impede o arco de ser cortado.
+  const margem = espessura / 2 + FOLGA_GAUGE + (compacto ? 8 : 14)
+
+  // 🔴 Com agulha o número NÃO pode ficar no centro: é exatamente por ali que a
+  // agulha e o eixo passam, e o traço corta o algarismo. Então ele desce pra
+  // baixo do arco — e o espaço tem que ser reservado ANTES de calcular o raio,
+  // senão o arco cresce até a borda e o número fica sem lugar (ou cortado no
+  // export, onde o `overflow: visible` do SVG não vale).
+  const reservaTexto = ponteiro
+    ? ALTURA_VALOR_GAUGE + (legenda ? ALTURA_LEGENDA_GAUGE : 0)
+    : 0
+
+  const dispX = Math.max(0, largura - margem * 2)
+  const dispY = Math.max(0, altura - margem * 2 - reservaTexto)
+  const raio = Math.max(0, Math.min(dispX / larguraCaixa, dispY / alturaCaixa))
+
+  // Centraliza a CAIXA DO ARCO na área, não o círculo: num semicírculo os dois
+  // não coincidem, e usar o círculo deixaria o desenho colado no topo.
+  const cx = margem + (dispX - larguraCaixa * raio) / 2 - caixa.minX * raio
+  const cy = margem + (dispY - alturaCaixa * raio) / 2 - caixa.minY * raio
+
+  const anguloDoValor = svgInicio + (svgFim - svgInicio) * fracao
+
+  const faixas: FaixaGaugePlano[] = []
+  if (bandas && thresholds.length > 0 && amplitude > 0) {
+    const ordenadas = [...thresholds].sort((a, b) => a.upTo - b.upTo)
+    let cursorFracao = 0
+    ordenadas.forEach((faixa, i) => {
+      const ate = clamp((faixa.upTo - baixo) / amplitude, 0, 1)
+      if (ate <= cursorFracao) return
+      faixas.push({
+        chave: `fx-${i}`,
+        d: caminhoArco(
+          cx,
+          cy,
+          raio,
+          svgInicio + (svgFim - svgInicio) * cursorFracao,
+          svgInicio + (svgFim - svgInicio) * ate,
+        ),
+        cor: corQuasarParaToken(faixa.color),
+      })
+      cursorFracao = ate
+    })
+  }
+
+  const dPonteiro = ponteiro ? caminhoPonteiro(cx, cy, raio, espessura, anguloDoValor) : ''
+
+  /** Y do ponto mais baixo que o arco alcança — onde o número assenta com agulha. */
+  const baseDoDesenho = cy + caixa.maxY * raio + espessura / 2
+
+  const marcarValor = faixas.length > 0 && !ponteiro && valor !== null
+  const dMarcadorValor = marcarValor
+    ? caminhoMarcadorRadial(cx, cy, raio, espessura, anguloDoValor)
+    : ''
+
+  return {
+    cx,
+    cy,
+    raio,
+    espessura,
+    dTrilho: caminhoArco(cx, cy, raio, svgInicio, svgFim),
+    dProgresso: valor === null ? '' : caminhoArco(cx, cy, raio, svgInicio, anguloDoValor),
+    faixas,
+    dPonteiro,
+    dEixoPonteiro: ponteiro ? caminhoMarcador('circle', cx, cy, espessura * 0.9) : '',
+    dMarcadorValor,
+    cor: ponto && serie ? resolverCor(ponto, serie, colorBy, thresholds) : 'var(--acai-chart-1)',
+    valor,
+    valorFormatado: valor === null ? '—' : formatar(valor),
+    fracao,
+    minFormatado: formatar(baixo),
+    maxFormatado: formatar(alto),
+    minX: pontoNoArco(cx, cy, raio, svgInicio).x,
+    maxX: pontoNoArco(cx, cy, raio, svgFim).x,
+    rotulosY: pontoNoArco(cx, cy, raio, svgInicio).y + espessura / 2 + 14,
+    mostrarEscala: !compacto && svgFim - svgInicio < 350,
+    textoX: cx,
+    // Sem agulha: linha de base um pouco ACIMA do centro. Num semicírculo o `cy`
+    // é a borda de baixo da caixa, e assentar o número exatamente nela o
+    // empurraria pra fora no export (o canvas corta o que o `overflow: visible`
+    // do SVG deixa passar na tela).
+    // Com agulha: abaixo do ponto mais baixo do desenho, no espaço reservado.
+    textoY: ponteiro ? baseDoDesenho + ALTURA_VALOR_GAUGE : cy - 6,
+    legendaY: ponteiro
+      ? baseDoDesenho + ALTURA_VALOR_GAUGE + ALTURA_LEGENDA_GAUGE
+      : cy + 12,
+    legenda,
+    compacto,
+  }
+}
+
+/**
+ * Agulha em forma de gota: larga no eixo, fina na ponta. Um retângulo fino ficaria
+ * ambíguo sobre qual extremidade aponta o valor.
+ */
+function caminhoPonteiro(
+  cx: number,
+  cy: number,
+  raio: number,
+  espessura: number,
+  anguloSvg: number,
+): string {
+  const comprimento = Math.max(0, raio - espessura)
+  if (comprimento <= 0) return ''
+  const meiaBase = Math.max(2, espessura * 0.28)
+
+  const ponta = pontoNoArco(cx, cy, comprimento, anguloSvg)
+  const esquerda = pontoNoArco(cx, cy, meiaBase, anguloSvg - 90)
+  const direita = pontoNoArco(cx, cy, meiaBase, anguloSvg + 90)
+  const cauda = pontoNoArco(cx, cy, meiaBase * 1.4, anguloSvg + 180)
+
+  const f = (valor: number): string => Number(valor.toFixed(2)).toString()
+  return (
+    `M ${f(ponta.x)} ${f(ponta.y)} L ${f(esquerda.x)} ${f(esquerda.y)}` +
+    ` L ${f(cauda.x)} ${f(cauda.y)} L ${f(direita.x)} ${f(direita.y)} Z`
+  )
+}
+
+/** Traço radial atravessando a espessura do arco, com uma sobra de cada lado. */
+function caminhoMarcadorRadial(
+  cx: number,
+  cy: number,
+  raio: number,
+  espessura: number,
+  anguloSvg: number,
+): string {
+  const sobra = espessura * 0.35
+  const dentro = pontoNoArco(cx, cy, Math.max(0, raio - espessura / 2 - sobra), anguloSvg)
+  const fora = pontoNoArco(cx, cy, raio + espessura / 2 + sobra, anguloSvg)
+  const f = (valor: number): string => Number(valor.toFixed(2)).toString()
+  return `M ${f(dentro.x)} ${f(dentro.y)} L ${f(fora.x)} ${f(fora.y)}`
+}
+
+export interface EntradaPlano {
+  dados: DadosNormalizados
+  largura: number
+  altura: number
+  formatar: (valor: number) => string
+  horizontal?: boolean
+  empilhado?: boolean
+  percentual?: boolean
+  curva?: 'linear' | 'smooth'
+  incluirZero?: boolean
+  min?: number | undefined
+  max?: number | undefined
+  ticksAlvo?: number
+  colorBy?: ChartColorBy
+  thresholds?: readonly ChartThreshold[]
+  mostrarValores?: boolean
+  temTitulo?: boolean
+  temLegenda?: boolean
+  posicaoLegenda?: 'bottom' | 'right'
+  tamanhoFontePx?: number
+  /** Raio da ponta da barra. 0 desliga. */
+  raioBarra?: number
+}
+
+/** Barra de valor exatamente 0 vira um traço: some, e "zero" viraria "sem dado". */
+const ALTURA_MINIMA_BARRA = 2
+
+export function montarPlanoCartesiano(entrada: EntradaPlano): PlanoCartesiano {
+  const {
+    dados,
+    largura,
+    altura,
+    formatar,
+    horizontal = false,
+    empilhado = false,
+    percentual = false,
+    curva = 'linear',
+    colorBy = 'series',
+    thresholds = [],
+    tamanhoFontePx = 12,
+    raioBarra = 3,
+  } = entrada
+
+  const visiveis = dados.series.filter((s) => !s.oculta)
+  const temBarra = visiveis.some((s) => s.tipo === 'bar')
+
+  // Domínio: barra inclui zero por padrão (a área codifica grandeza, cortar a
+  // base infla a diferença); linha não (codifica variação).
+  const incluirZero = entrada.incluirZero ?? temBarra
+
+  const [dominioMin, dominioMax] = calcularDominio(dados, {
+    empilhado,
+    percentual,
+    incluirZero,
+    min: entrada.min,
+    max: entrada.max,
+  })
+
+  const bonito = dominioBonito(dominioMin, dominioMax, {
+    alvo: entrada.ticksAlvo ?? 5,
+    incluirZero,
+  })
+
+  const rotulosValor = bonito.ticks.map(formatar)
+
+  const layout = calcularLayout({
+    largura,
+    altura,
+    rotulosCategoria: dados.rotulos,
+    rotulosValor: horizontal ? [] : rotulosValor,
+    horizontal,
+    temTitulo: entrada.temTitulo === true,
+    temLegenda: entrada.temLegenda === true,
+    ...(entrada.posicaoLegenda ? { posicaoLegenda: entrada.posicaoLegenda } : {}),
+    tamanhoFontePx,
+  })
+
+  const { area } = layout
+  // Em modo compacto o eixo ganha menos ticks — 5 rótulos num celular viram
+  // um borrão.
+  const ticksUsados = layout.compacto && bonito.ticks.length > 4
+    ? bonito.ticks.filter((_, i) => i % 2 === 0)
+    : bonito.ticks
+
+  // Eixo de valor: em vertical o y CRESCE pra baixo, então a faixa inverte.
+  const escalaValor = horizontal
+    ? escalaLinear([bonito.min, bonito.max], [area.x, area.x + area.largura])
+    : escalaLinear([bonito.min, bonito.max], [area.y + area.altura, area.y])
+
+  const escalaCategoria = horizontal
+    ? escalaBanda(dados.rotulos.length, [area.y, area.y + area.altura])
+    : escalaBanda(dados.rotulos.length, [area.x, area.x + area.largura])
+
+  const ticks: TickPlano[] = ticksUsados.map((valor) => ({
+    valor,
+    posicao: escalaValor(valor),
+    rotulo: formatar(valor),
+  }))
+
+  const categorias: CategoriaPlano[] = dados.rotulos.map((rotulo, i) => ({
+    rotulo,
+    linhas:
+      layout.rotacao === 0 && !horizontal
+        ? quebrarRotulo(rotulo, Math.max(4, Math.floor(escalaCategoria.larguraBanda / 7)), 2)
+        : [rotulo],
+    centro: escalaCategoria.centro(i),
+    inicio: escalaCategoria(i),
+    largura: escalaCategoria.larguraBanda,
+  }))
+
+  const zeroBruto = escalaValor(0)
+  const dentro = horizontal
+    ? zeroBruto >= area.x && zeroBruto <= area.x + area.largura
+    : zeroBruto >= area.y && zeroBruto <= area.y + area.altura
+  const zero = bonito.min <= 0 && bonito.max >= 0 && dentro ? zeroBruto : null
+
+  const barras = montarBarras({
+    dados,
+    visiveis,
+    escalaValor,
+    escalaCategoria,
+    horizontal,
+    empilhado,
+    percentual,
+    colorBy,
+    thresholds,
+    formatar,
+    mostrarValores: entrada.mostrarValores === true,
+    raioBarra,
+    base: escalaValor(clamp(0, bonito.min, bonito.max)),
+  })
+
+  const linhas = montarLinhas({
+    visiveis,
+    escalaValor,
+    escalaCategoria,
+    horizontal,
+    curva,
+    base: escalaValor(clamp(0, bonito.min, bonito.max)),
+  })
+
+  return {
+    area,
+    horizontal,
+    rotacao: layout.rotacao,
+    compacto: layout.compacto,
+    ticks,
+    categorias,
+    barras,
+    linhas,
+    zero,
+  }
+}
+
+function clamp(valor: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, valor))
+}
+
+/**
+ * Repassa pro `dominioDeSeries`, montando o objeto sem chaves `undefined` —
+ * `exactOptionalPropertyTypes` recusa `{ min: undefined }` numa prop opcional.
+ */
+function calcularDominio(
+  dados: DadosNormalizados,
+  opcoes: {
+    empilhado: boolean
+    percentual: boolean
+    incluirZero: boolean
+    min: number | undefined
+    max: number | undefined
+  },
+): [number, number] {
+  return dominioDeSeries(dados, {
+    empilhado: opcoes.empilhado,
+    percentual: opcoes.percentual,
+    incluirZero: opcoes.incluirZero,
+    ...(opcoes.min === undefined ? {} : { min: opcoes.min }),
+    ...(opcoes.max === undefined ? {} : { max: opcoes.max }),
+  })
+}
+
+interface EntradaBarras {
+  dados: DadosNormalizados
+  visiveis: DadosNormalizados['series']
+  escalaValor: ReturnType<typeof escalaLinear>
+  escalaCategoria: ReturnType<typeof escalaBanda>
+  horizontal: boolean
+  empilhado: boolean
+  percentual: boolean
+  colorBy: ChartColorBy
+  thresholds: readonly ChartThreshold[]
+  formatar: (valor: number) => string
+  mostrarValores: boolean
+  raioBarra: number
+  base: number
+}
+
+function montarBarras(e: EntradaBarras): BarraPlano[] {
+  const seriesBarra = e.visiveis.filter((s) => s.tipo === 'bar')
+  if (seriesBarra.length === 0) return []
+
+  const segmentos = e.empilhado ? empilhar(e.dados, e.percentual) : null
+  const sub = e.empilhado
+    ? null
+    : escalaSubBanda(e.escalaCategoria, seriesBarra.length)
+
+  const barras: BarraPlano[] = []
+
+  seriesBarra.forEach((serie, ordem) => {
+    serie.pontos.forEach((ponto, iPonto) => {
+      if (ponto.valor === null) return
+
+      const inicioBanda = e.escalaCategoria(iPonto)
+      const espessura = e.empilhado ? e.escalaCategoria.larguraBanda : (sub as NonNullable<typeof sub>).larguraBanda
+      const deslocamento = e.empilhado ? 0 : (sub as NonNullable<typeof sub>)(ordem)
+
+      let de: number
+      let ate: number
+      if (segmentos) {
+        const seg = segmentos[iPonto]?.find((s) => s.indiceSerie === serie.indice)
+        if (!seg) return
+        de = e.escalaValor(seg.base)
+        ate = e.escalaValor(seg.topo)
+      } else {
+        de = e.base
+        ate = e.escalaValor(ponto.valor)
+      }
+
+      const cor = resolverCor(ponto, serie, e.colorBy, e.thresholds)
+      const chave = `b-${serie.indice}-${iPonto}`
+      const texto = ponto.rotuloDireto ?? e.formatar(ponto.valor)
+
+      if (e.horizontal) {
+        const x = Math.min(de, ate)
+        const comprimento = Math.max(Math.abs(ate - de), ALTURA_MINIMA_BARRA)
+        const y = inicioBanda + deslocamento
+        barras.push({
+          chave,
+          indiceSerie: serie.indice,
+          indicePonto: iPonto,
+          d: caminhoBarra(x, y, comprimento, espessura, e.raioBarra, ate >= de ? 'direita' : 'esquerda'),
+          cor,
+          fantasma: ponto.fantasma,
+          rotulo: e.mostrarValores ? texto : '',
+          rotuloX: x + comprimento + 4,
+          rotuloY: y + espessura / 2,
+        })
+      } else {
+        const y = Math.min(de, ate)
+        const comprimento = Math.max(Math.abs(ate - de), ALTURA_MINIMA_BARRA)
+        const x = inicioBanda + deslocamento
+        barras.push({
+          chave,
+          indiceSerie: serie.indice,
+          indicePonto: iPonto,
+          d: caminhoBarra(x, y, espessura, comprimento, e.raioBarra, ate <= de ? 'topo' : 'base'),
+          cor,
+          fantasma: ponto.fantasma,
+          rotulo: e.mostrarValores ? texto : '',
+          rotuloX: x + espessura / 2,
+          rotuloY: y - 4,
+        })
+      }
+    })
+  })
+
+  return barras
+}
+
+interface EntradaLinhas {
+  visiveis: DadosNormalizados['series']
+  escalaValor: ReturnType<typeof escalaLinear>
+  escalaCategoria: ReturnType<typeof escalaBanda>
+  horizontal: boolean
+  curva: 'linear' | 'smooth'
+  base: number
+}
+
+function montarLinhas(e: EntradaLinhas): LinhaPlano[] {
+  const seriesLinha = e.visiveis.filter((s) => s.tipo === 'line' || s.tipo === 'area')
+
+  return seriesLinha.map((serie) => {
+    const pontos: Array<Ponto | null> = serie.pontos.map((ponto, i) => {
+      if (ponto.valor === null) return null
+      const aoLongo = e.escalaCategoria.centro(i)
+      const valor = e.escalaValor(ponto.valor)
+      // Linha sempre no CENTRO da banda: alinhada com o rótulo do eixo e com o
+      // grupo de barras, quando os dois convivem no mesmo gráfico.
+      return e.horizontal ? { x: valor, y: aoLongo } : { x: aoLongo, y: valor }
+    })
+
+    const marcadores = pontos
+      .map((p, i) => (p ? { d: caminhoMarcador(serie.marcador, p.x, p.y, 7), indicePonto: i } : null))
+      .filter((m): m is { d: string; indicePonto: number } => m !== null)
+
+    return {
+      chave: `l-${serie.indice}`,
+      indiceSerie: serie.indice,
+      d: caminhoLinha(pontos, e.curva),
+      dArea: serie.tipo === 'area' ? caminhoArea(pontos, e.base, e.curva) : '',
+      cor: serie.cor,
+      tracejada: serie.tracejada,
+      marcadores,
+      marcador: serie.marcador,
+    }
+  })
+}