feat(shared): add Sparkline primitive for fixed-series density bars
A minimal presentational bar series (one bar per value, heights scaled to the max, faint floor for empty buckets). Lives in shared so both the timeline density strip and the document chart can use it. REQ-012 (supports). Refs #779 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
28
frontend/src/lib/shared/primitives/Sparkline.svelte.spec.ts
Normal file
28
frontend/src/lib/shared/primitives/Sparkline.svelte.spec.ts
Normal file
@@ -0,0 +1,28 @@
|
||||
import { describe, it, expect, afterEach } from 'vitest';
|
||||
import { cleanup, render } from 'vitest-browser-svelte';
|
||||
import Sparkline from './Sparkline.svelte';
|
||||
|
||||
afterEach(() => cleanup());
|
||||
|
||||
describe('Sparkline', () => {
|
||||
it('renders one bar per value', () => {
|
||||
render(Sparkline, { values: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11] });
|
||||
const bars = document.querySelectorAll('[data-testid="sparkline-bar"]');
|
||||
expect(bars).toHaveLength(12);
|
||||
});
|
||||
|
||||
it('scales bar heights relative to the largest value', () => {
|
||||
render(Sparkline, { values: [5, 10, 0] });
|
||||
const bars = document.querySelectorAll<HTMLElement>('[data-testid="sparkline-bar"]');
|
||||
const h = (i: number) => parseFloat(bars[i].style.height);
|
||||
// 10 is the max → tallest; 5 is half of the max's height; 0 is the shortest.
|
||||
expect(h(1)).toBeGreaterThan(h(0));
|
||||
expect(h(0)).toBeGreaterThan(h(2));
|
||||
});
|
||||
|
||||
it('exposes an accessible label when provided', () => {
|
||||
render(Sparkline, { values: [1, 2, 3], label: 'Monatsdichte' });
|
||||
const img = document.querySelector('[role="img"]');
|
||||
expect(img?.getAttribute('aria-label')).toBe('Monatsdichte');
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user