Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

Single-datum bars are capped at 48px, and scalar `radius` gives elliptical SVG corners on narrow bars

Aperta
  • Qualcosa non va?
#197 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
58/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
d3, typescript
Ambito
data-visualization

Direzione di ricerca

Start with the repro file packages/charts-core/test-repro/12-bar-rect-geometry.test.ts, run with pnpm vitest run on it. For A, look at the width fallback around bar.ts:872-873 and mirror the bandX.width option; the option name is still open. For B, the rx emission is at svg-renderer.ts:126, so also emit ry and clamp both radii per axis as canvas.ts:1424 does. Done when both tests pass and the radius docs in bar-and-rect.md still match.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

A. Single-datum bars are capped at 48px

Expected: a width (barY) / height (barX) option applied in the fallback, mirroring bandX.width.

B. Scalar radius is elliptical on narrow bars in SVG
  • A scalar radius reaches the scene as { radius } with no bar size: rect-radius-state-internal.ts:27-31.
  • SVG emits rx only: svg-renderer.ts:126. Per SVG 2, ry defaults to rx and each is clamped on its own axis, so a bar narrower than 2 * radius gets elliptical corners (not run: jsdom does no layout).
  • Canvas clamps one circular radius to min(radius, width / 2, height / 2): canvas.ts:1424.
  • The docs say a number rounds every corner (bar-and-rect.md:124).

Expected: SVG emits ry too and clamps both like Canvas.

Repro

packages/charts-core/test-repro/12-bar-rect-geometry.test.ts, run with pnpm vitest run <path> from the repo root. Both tests assert the expected behavior and fail on main.

import { scaleBand, scaleLinear } from 'd3-scale'
import { expect, it } from 'vitest'
import { barY } from '../src/bar'
import { createChartScene, defineChart } from '../src/scene'
import { renderChartSvg } from '../src/svg'

const rects = (nodes: any[]): any[] =>
  nodes.flatMap((n) => (n.kind === 'rect' ? [n] : rects(n.children ?? [])))
const y = { scale: scaleLinear().domain([0, 100]) }

it('A: a single bar on a linear x scale can be wider than 48px', () => {
  const scene = createChartScene(
    defineChart({
      marks: [barY([{ k: 1, v: 90 }], { x: 'k', y: 'v' })],
      scales: { x: { scale: scaleLinear().domain([0, 2]) }, y },
    }),
    { width: 600, height: 240 },
  )
  expect(rects(scene.nodes)[0].width).toBeGreaterThan(48)
})

it('B: scalar radius on a narrow bar is circular in SVG', () => {
  const scene = createChartScene(
    defineChart({
      marks: [barY([{ k: 'a', v: 90 }], { x: 'k', y: 'v', radius: 8 })],
      scales: { x: { scale: scaleBand<string>().domain(['a', 'b']).padding(0.8) }, y },
    }),
    { width: 120, height: 240 },
  )
  expect(renderChartSvg(scene, { ariaLabel: 'bars' }).match(/<rect[^>]*\brx=[^>]*>/)![0]).toMatch(/\bry="/)
})

Output (both fail):

A: AssertionError: expected 48 to be greater than 48
B: AssertionError: expected '<rect data-ts-key="bar-y-0:object:nul…' to match /\bry="/

Downstream measurement (bklit migration, Chrome): a tuple [r, r, r, r] gives circular corners; a scalar differs only when the bar is narrower or shorter than 2 * radius.

Lingua principale
TypeScript
Stelle
819
Fork
49
Merge medio
12h 9m
PR unite (30g)
6

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di TanStack/charts

Tutte le issue di TanStack/charts

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.