@voila.dev/chart 4.0.107 → 4.0.108

package/src/core/marks/polar.ts

@@ -10,6 +10,7 @@ import {
 	markId,
 	paint,
 	seriesResolver,
+	tips,
 } from "#/core/marks/shared.ts";
 import {
 	arcPath,
@@ -187,7 +188,7 @@ export function arc<TDatum>(
 						opacity: options.opacity,
 					}),
 				});
-				if (options.tip === false) {
+				if (!tips(options.tip, data[index], index)) {
 					continue;
 				}
 				const middle = (angle.startAngle + angle.endAngle) / 2;
@@ -307,7 +308,7 @@ export function radialBar<TDatum>(
 					d: arcPath(shape),
 					paint: paint({ fill: series.color, opacity: options.opacity }),
 				});
-				if (options.tip === false) {
+				if (!tips(options.tip, data[index], index)) {
 					continue;
 				}
 				const anchor = polarToCartesian(
@@ -512,7 +513,7 @@ export function radar<TDatum>(
 				};
 				polygon.vertices[spoke] = vertex;
 				polygons.set(series.key, polygon);
-				if (options.tip !== false) {
+				if (tips(options.tip, data[index], index)) {
 					points.push({
 						key: `${id}:${index}`,
 						markId: id,

package/src/core/marks/rect.ts

@@ -10,6 +10,7 @@ import {
 	markId,
 	paint,
 	seriesResolver,
+	tips,
 	valueOn,
 } from "#/core/marks/shared.ts";
 import { stackSegments } from "#/core/marks/stack.ts";
@@ -131,7 +132,7 @@ export function rectY<TDatum>(
 						opacity: options.opacity,
 					}),
 				});
-				if (options.tip !== false) {
+				if (tips(options.tip, data[index], index)) {
 					points.push({
 						key: `${id}:${index}`,
 						markId: id,

package/src/core/marks/shared.ts

@@ -22,8 +22,12 @@ export interface ChartMarkOptions<TDatum> {
 	readonly label?: string;
 	/** A field or function whose distinct values split the mark into coloured series. */
 	readonly color?: ChartAccessor<TDatum, ChartValue>;
-	/** `false` keeps the mark out of focus, tooltips and the data table. */
-	readonly tip?: boolean;
+	/**
+	 * `false` keeps the mark out of focus, tooltips and the data table; a
+	 * function decides per datum (the point where a recorded line hands over
+	 * to its dashed projection belongs to one of the two, not both).
+	 */
+	readonly tip?: boolean | ((datum: TDatum, index: number) => boolean);
 	readonly opacity?: number;
 }
 
@@ -132,3 +136,12 @@ export function valueOn(
 	}
 	return numericValue(raw);
 }
+
+/** Whether a datum takes part in focus, tooltips and the data table. */
+export function tips<TDatum>(
+	tip: ChartMarkOptions<TDatum>["tip"],
+	datum: TDatum,
+	index: number,
+): boolean {
+	return typeof tip === "function" ? tip(datum, index) : tip !== false;
+}

package/src/core/marks/stats/dodge.ts

@@ -5,6 +5,7 @@ import {
 	markId,
 	paint,
 	seriesResolver,
+	tips,
 	valueOn,
 } from "#/core/marks/shared.ts";
 import type {
@@ -109,7 +110,7 @@ export function dodgeY<TDatum>(
 					r,
 					paint: paint({ fill: series.color, opacity: options.opacity }),
 				});
-				if (options.tip !== false) {
+				if (tips(options.tip, data[entry.index], entry.index)) {
 					points.push({
 						key: `${id}:${entry.index}`,
 						markId: id,

package/src/core/marks/stats/histogram.ts

@@ -95,7 +95,8 @@ export function histogram<TDatum>(
 	return rectY(bins, {
 		id: options.id,
 		label: options.label,
-		tip: options.tip,
+		// Bins are not the caller's data: only a plain on/off carries over.
+		tip: typeof options.tip === "function" ? undefined : options.tip,
 		opacity: options.opacity,
 		fill: options.fill,
 		x1: (bin) => bin.x1,

package/src/core/marks/stats/waffle.ts

@@ -10,6 +10,7 @@ import {
 	markId,
 	paint,
 	seriesResolver,
+	tips,
 } from "#/core/marks/shared.ts";
 import { categoryKey } from "#/core/scales/discrete.ts";
 import type {
@@ -117,7 +118,7 @@ export function waffleY<TDatum>(
 						paint: paint({ fill: series.color, opacity: options.opacity }),
 					});
 				}
-				if (options.tip !== false) {
+				if (tips(options.tip, data[index], index)) {
 					points.push({
 						key: `${id}:${index}`,
 						markId: id,

package/src/core/types.ts

@@ -90,6 +90,8 @@ export interface ChartPaint {
 	readonly opacity?: number;
 	readonly fillOpacity?: number;
 	readonly strokeOpacity?: number;
+	/** Fill with diagonal hatching in the fill colour: a value pencilled in, not yet true. */
+	readonly hatch?: boolean;
 }
 
 export interface ChartTextPaint extends ChartPaint {

package/src/react/chart-placeholders.tsx

@@ -0,0 +1,93 @@
+import type * as React from "react";
+
+/**
+ * Stand-ins for a chart: no data yet, or none at all. Sized like the chart
+ * they replace (pass the same height), so the page does not jump when the
+ * data lands. Styled with the kit's tokens when the page has them.
+ */
+
+const BOX: React.CSSProperties = {
+	width: "100%",
+	aspectRatio: "16 / 9",
+	borderRadius: 8,
+};
+
+interface EmptyProps extends React.ComponentProps<"div"> {}
+
+/** In place of a chart with nothing to show. Pass the localized message as children. */
+export function ChartEmpty({ style, ...props }: EmptyProps) {
+	return (
+		<div
+			data-slot="chart-empty"
+			style={{
+				...BOX,
+				display: "flex",
+				flexDirection: "column",
+				alignItems: "center",
+				justifyContent: "center",
+				gap: 4,
+				border:
+					"1px dashed var(--border, color-mix(in oklab, currentColor 25%, transparent))",
+				color: "var(--muted-foreground, inherit)",
+				fontSize: 14,
+				textAlign: "center",
+				textWrap: "balance",
+				...style,
+			}}
+			{...props}
+		/>
+	);
+}
+
+/** Fixed, not random, so the server and the browser render the same bars. */
+const BAR_HEIGHTS = [40, 70, 55, 90, 65, 80, 50] as const;
+
+const SKELETON_CSS = `
+@keyframes voila-chart-pulse{50%{opacity:.5}}
+@media (prefers-reduced-motion:no-preference){[data-slot="chart-skeleton-bar"]{animation:voila-chart-pulse 2s cubic-bezier(.4,0,.6,1) infinite}}
+`;
+
+interface SkeletonProps extends React.ComponentProps<"div"> {
+	/** What a screen reader hears while the chart loads. */
+	readonly label?: string;
+}
+
+/** A loading placeholder shaped like a bar chart, announced as a status. */
+export function ChartSkeleton({
+	label = "Chargement",
+	style,
+	...props
+}: SkeletonProps) {
+	return (
+		<div
+			data-slot="chart-skeleton"
+			role="status"
+			aria-label={label}
+			style={{
+				...BOX,
+				display: "flex",
+				alignItems: "flex-end",
+				gap: 8,
+				...style,
+			}}
+			{...props}
+		>
+			<style href="voila-chart-skeleton" precedence="default">
+				{SKELETON_CSS}
+			</style>
+			{BAR_HEIGHTS.map((height) => (
+				<div
+					key={height}
+					data-slot="chart-skeleton-bar"
+					style={{
+						width: "100%",
+						height: `${height}%`,
+						borderRadius: 6,
+						background:
+							"var(--muted, color-mix(in oklab, currentColor 10%, transparent))",
+					}}
+				/>
+			))}
+		</div>
+	);
+}

package/src/react/index.ts

@@ -1,5 +1,6 @@
 export type { ChartBrush, ChartBrushRange } from "#/react/brush-contract.ts";
 export { Chart } from "#/react/chart.tsx";
+export { ChartEmpty, ChartSkeleton } from "#/react/chart-placeholders.tsx";
 export {
 	ChartTooltipContent,
 	type ChartTooltipRenderProps,

package/src/react/svg-scene.tsx

@@ -17,9 +17,40 @@ const BASELINE: Record<
 	alphabetic: "alphabetic",
 };
 
-function paintProps(paint: ChartPaint): React.SVGAttributes<SVGElement> {
+const HATCH_STEP = 6;
+
+/** A stable id per colour (djb2), the same on the server and in the browser. */
+function hatchId(prefix: string, color: string): string {
+	let hash = 5381;
+	for (const character of color) {
+		hash = ((hash << 5) + hash + character.charCodeAt(0)) | 0;
+	}
+	return `${prefix}-hatch-${(hash >>> 0).toString(36)}`;
+}
+
+function hatchColors(
+	nodes: ReadonlyArray<SceneNode>,
+	into = new Set<string>(),
+): Set<string> {
+	for (const node of nodes) {
+		if (node.kind === "group") {
+			hatchColors(node.children, into);
+		} else if (node.paint.hatch && node.paint.fill) {
+			into.add(node.paint.fill);
+		}
+	}
+	return into;
+}
+
+function paintProps(
+	paint: ChartPaint,
+	prefix: string,
+): React.SVGAttributes<SVGElement> {
 	return {
-		fill: paint.fill ?? "none",
+		fill:
+			paint.hatch && paint.fill
+				? `url(#${hatchId(prefix, paint.fill)})`
+				: (paint.fill ?? "none"),
 		stroke: paint.stroke,
 		strokeWidth: paint.strokeWidth,
 		strokeDasharray: paint.strokeDasharray,
@@ -72,7 +103,7 @@ function SceneElement({
 				<path
 					{...data}
 					d={roundedBarPath({ ...node, radius: node.corners })}
-					{...paintProps(node.paint)}
+					{...paintProps(node.paint, clipPrefix)}
 				/>
 			) : (
 				<rect
@@ -81,11 +112,13 @@ function SceneElement({
 					y={node.y}
 					width={node.width}
 					height={node.height}
-					{...paintProps(node.paint)}
+					{...paintProps(node.paint, clipPrefix)}
 				/>
 			);
 		case "path":
-			return <path {...data} d={node.d} {...paintProps(node.paint)} />;
+			return (
+				<path {...data} d={node.d} {...paintProps(node.paint, clipPrefix)} />
+			);
 		case "circle":
 			return (
 				<circle
@@ -93,7 +126,7 @@ function SceneElement({
 					cx={node.cx}
 					cy={node.cy}
 					r={node.r}
-					{...paintProps(node.paint)}
+					{...paintProps(node.paint, clipPrefix)}
 				/>
 			);
 		case "line":
@@ -104,7 +137,7 @@ function SceneElement({
 					y1={node.y1}
 					x2={node.x2}
 					y2={node.y2}
-					{...paintProps(node.paint)}
+					{...paintProps(node.paint, clipPrefix)}
 				/>
 			);
 		case "text":
@@ -124,7 +157,7 @@ function SceneElement({
 					dominantBaseline={
 						node.paint.baseline ? BASELINE[node.paint.baseline] : undefined
 					}
-					{...paintProps(node.paint)}
+					{...paintProps(node.paint, clipPrefix)}
 				>
 					{node.text}
 				</text>
@@ -140,7 +173,35 @@ export function SvgSceneNodes({
 	scene: ChartScene;
 	clipPrefix: string;
 }) {
-	return scene.nodes.map((node) => (
-		<SceneElement key={node.key} node={node} clipPrefix={clipPrefix} />
-	));
+	const hatches = [...hatchColors(scene.nodes)];
+	return (
+		<>
+			{hatches.length > 0 ? (
+				<defs>
+					{hatches.map((color) => (
+						<pattern
+							key={color}
+							id={hatchId(clipPrefix, color)}
+							width={HATCH_STEP}
+							height={HATCH_STEP}
+							patternUnits="userSpaceOnUse"
+							patternTransform="rotate(45)"
+						>
+							<line
+								x1={0}
+								y1={0}
+								x2={0}
+								y2={HATCH_STEP}
+								stroke={color}
+								strokeWidth={1.5}
+							/>
+						</pattern>
+					))}
+				</defs>
+			) : null}
+			{scene.nodes.map((node) => (
+				<SceneElement key={node.key} node={node} clipPrefix={clipPrefix} />
+			))}
+		</>
+	);
 }