52 lines
1.8 KiB
TypeScript
52 lines
1.8 KiB
TypeScript
/**
|
|
* Graph Legend Component
|
|
* Displays color groups with counts and allows filtering by clicking
|
|
*/
|
|
|
|
import { Component, ChangeDetectionStrategy, input, output } from '@angular/core';
|
|
import { CommonModule } from '@angular/common';
|
|
import { GroupLegendItem } from './graph-data.types';
|
|
|
|
@Component({
|
|
selector: 'app-graph-legend',
|
|
standalone: true,
|
|
imports: [CommonModule],
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
template: `
|
|
@if (items().length > 0) {
|
|
<div class="flex flex-wrap gap-2 p-3 bg-card dark:bg-card rounded-lg shadow-md">
|
|
@for (item of items(); track item.groupIndex) {
|
|
<button
|
|
type="button"
|
|
(click)="itemClicked.emit(item.groupIndex)"
|
|
[class.opacity-50]="!item.active"
|
|
[class.ring-2]="!item.active"
|
|
[class.ring-gray-400]="!item.active"
|
|
class="flex items-center gap-2 px-3 py-1.5 rounded-full bg-surface1 dark:bg-surface2 hover:bg-surface1 dark:hover:bg-gray-600 transition-all cursor-pointer group">
|
|
|
|
<!-- Color chip -->
|
|
<div
|
|
class="w-3 h-3 rounded-full ring-1 ring-gray-300 dark:ring-gray-600"
|
|
[style.background-color]="item.color">
|
|
</div>
|
|
|
|
<!-- Query text -->
|
|
<span class="text-xs font-medium text-main dark:text-main group-hover:text-main dark:group-hover:text-gray-100">
|
|
{{ item.query }}
|
|
</span>
|
|
|
|
<!-- Count badge -->
|
|
<span class="text-xs font-semibold px-1.5 py-0.5 rounded bg-surface2 dark:bg-gray-600 text-main dark:text-main">
|
|
{{ item.count }}
|
|
</span>
|
|
</button>
|
|
}
|
|
</div>
|
|
}
|
|
`
|
|
})
|
|
export class GraphLegendComponent {
|
|
items = input.required<GroupLegendItem[]>();
|
|
itemClicked = output<number>();
|
|
}
|