5392320Interactive illustration of Floater-Hormann barycentric rational interpolationJeremy Magland 1import { ink } from './palette.ts'
3export interface LegendItem {
4 label: string
5 color: string
6 /** stroke-dasharray for a line swatch */
7 dash?: string
8 shape?: 'line' | 'dot' | 'cross'
9 /** e.g. the max error for this series, shown after the label */
10 value?: string
11}
13/**
14 * Identity is never carried by colour alone: every series that appears in a
15 * plot appears here too, and the ones the reader most needs are also labelled
16 * directly on the plot.
17 */
18export default function Legend({ items }: { items: LegendItem[] }) {
19 return (
20 <div className="legend">
21 {items.map((it) => (
22 <span className="legend-item" key={it.label}>
23 <svg width={18} height={10} aria-hidden="true">
24 {it.shape === 'dot' ? (
25 <circle cx={9} cy={5} r={3.5} fill={it.color} stroke={ink.grid} strokeWidth={1} />
26 ) : it.shape === 'cross' ? (
27 <path d="M5 1 L13 9 M13 1 L5 9" stroke={it.color} strokeWidth={2} strokeLinecap="round" />
28 ) : (
29 <line
30 x1={1}
31 x2={17}
32 y1={5}
33 y2={5}
34 stroke={it.color}
35 strokeWidth={2}
36 strokeDasharray={it.dash}
37 strokeLinecap="round"
38 />
39 )}
40 </svg>
41 <span>{it.label}</span>
42 {it.value && <span className="legend-value">{it.value}</span>}
43 </span>
44 ))}
45 </div>
46 )
47}