Chart Legend

import { Component } from '@angular/core';
import { WrChartLegend } from 'ngwr/charts/chart-legend';

@Component({ imports: [WrChartLegend] })
export class MyComponent {}

<ul
  wr-chart-legend
  [items]="[
    { label: 'Direct', color: 'var(--wr-color-primary)', value: '4,812' },
    { label: 'Search', color: 'var(--wr-color-success)', value: '3,206' }
  ]"
></ul>

<ul
  wr-chart-legend
  [items]="[
    { label: 'Dashed line', color: 'var(--wr-color-success)', dash: '7 4' },
    { label: 'Triangle', color: 'var(--wr-color-danger)', marker: 'triangle' },
    { label: 'Line with points', color: 'var(--wr-color-on-surface-muted)', dash: '2 3', marker: 'diamond' }
  ]"
></ul>

<ul wr-chart-legend toggleable [items]="items" [(hiddenSeries)]="hidden"></ul>

@for (metric of metrics; track $index) {
  @if (!hidden().includes($index)) {
    <wr-sparkline [data]="metric.data" [color]="metric.color" [ariaLabel]="metric.label" />
  }
}

hidden = signal<readonly number[]>([]);

interface WrChartLegendItem {
  label: string;
  color: string;
  value?: string | null;
  marker?: WrChartMarker;
  dash?: string;
}

type WrChartMarker = 'circle' | 'square' | 'triangle' | 'diamond' | 'cross' | 'triangle-down';

interface WrChartLegendToggle {
  index: number;
  label: string;
  hidden: boolean;
}