Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

[Bug] Focus guides: `url(#id)` paints ignore `idPrefix`

Abierto Apto para principiantes
  • ¿Algo no está bien?
#211 1 comentario 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

@getdownandcode ya está trabajando en esto.

Desde el 13/10/2026.

  • #217 de @getdownandcode — abierto

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
78/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
d3, typescript
Área
data-visualization, frontend

Línea de trabajo

Empieza en packages/charts-core/src/svg-renderer.ts, en focusGuideRenderHooks y la llamada paint(). Luego sigue cómo se pasa resolvePaint a través de svg.ts y svg-surface.ts. Añade una prueba de regresión basada en la reproducción del issue y ejecútala con pnpm vitest run; se considerará terminado cuando los paints de focus-guide que usan url(#id) se resuelvan al id del recurso dentro del ámbito de idPrefix.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

Version: @tanstack/charts 1.1.0 (57774e1). Split from #191 (section C) so it can be closed on its own.

With idPrefix set, mark paints such as fill: 'url(#fade)' resolve to the scoped resource id, but the same paint on a focus guide or crosshair is written verbatim and points at a resource that does not exist. This affects gradients today and <pattern> resources once PR #166 lands.

Why
Repro

Save as packages/charts-core/src/repro.test.ts, run pnpm vitest run packages/charts-core/src/repro.test.ts.

import { expect, it } from 'vitest'
import { scaleLinear } from 'd3-scale'
import { areaY } from './area'
import { crosshair } from './crosshair'
import { motion } from './motion'
import { createChartScene, defineChart } from './scene'

const make = (end: number, top: number) =>
  createChartScene(defineChart({
    marks: [
      areaY([{ x: 0, y: 1 }, { x: 1, y: top }, { x: 2, y: 2 }], { x: 'x', y: 'y', fill: 'url(#fade)' }),
      crosshair({ y: false, stroke: 'url(#fade)' }),
    ],
    scales: { x: { scale: scaleLinear().domain([0, 2]) }, y: { scale: scaleLinear().domain([0, 4]) } },
    gradients: [{ id: 'fade', stops: [
      { offset: 0, color: '#2563eb', opacity: 0.6 }, { offset: end, color: '#2563eb', opacity: 0 }] }],
  }), { width: 320, height: 200 })
const opts = { ariaLabel: 't', idPrefix: 'a' }

it('url(#id) in a focus-guide node is scoped by idPrefix', () => {
  const el = document.createElement('div')
  const surface = motion({ initial: false }).mount(el, () => {})
  const scene = make(1, 3)
  surface.render(scene, opts)
  const p = scene.points[0]!
  surface.paintFocus({ primary: p, group: [p], source: 'pointer', pinned: false })
  const rule = el.querySelector('[data-ts-focus-guide-layer] [data-ts-key$=":x-rule"]')!
  console.log('gradient id:', el.querySelector('linearGradient')?.id, '| guide stroke:', rule.getAttribute('stroke'))
  expect(rule.getAttribute('stroke')).toBe('url(#a-fade)')
})

Actual output:

gradient id: a-fade | guide stroke: url(#fade)
AssertionError: expected 'url(#fade)' to be 'url(#a-fade)'
Expected

Guide node paints resolve to the scoped id like mark paints. Proposal: pass resolvePaint into focusGuideRenderHooks and the renderer-based path (svg-surface.ts:326-327).

Related: #191 (gradient stops and units), #128 / PR #166 (<pattern> resources).

Lenguaje dominante
TypeScript
Estrellas
842
Forks
53
Merge medio
4 h 11 min
PR fusionados (30 d)
18

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de TanStack/charts

Todos los issues de TanStack/charts

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.