{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "bento-metrics-mixed", "title": "Bento — Mixed Metrics", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/bento-metrics-mixed/bento-metrics-mixed.component.ts", "content": "// Six tiles mixing headline numbers, a sparkline row, a short list, and a status tile —\n// the summary band that sits beneath a hero. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core'\nimport { ArrowUpRight, CircleCheck, LucideAngularModule } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiCardComponent, UiCardContentComponent } from '@/ui/card/card.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\n\nconst series = [4, 9, 7, 14, 11, 18, 16, 23, 21, 28, 26, 33]\n\nconst definitions = [\n { name: 'revenue_net', owner: 'finance' },\n { name: 'margin_by_channel', owner: 'finance' },\n { name: 'pipeline_weighted', owner: 'revops' },\n]\n\n// Inline SVG polyline: a sparkline does not justify a charting dependency.\nfunction points(values: number[]): string {\n const min = Math.min(...values)\n const max = Math.max(...values)\n const span = max - min || 1\n return values\n .map((value, index) => {\n const x = (index / (values.length - 1)) * 100\n const y = 30 - ((value - min) / span) * 26\n return `${x.toFixed(1)},${y.toFixed(1)}`\n })\n .join(' ')\n}\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-bento-metrics-mixed, [ui-bento-metrics-mixed]',\n standalone: true,\n // React renders the root
itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiSeparatorComponent,\n ],\n template: `\n
\n
\n At a glance\n\n
\n
\n
\n

Days to close

\n

4.2

\n

down from 9.4

\n
\n
\n\n
\n
\n
\n

Certified metrics published

\n

12 months

\n
\n

340

\n \n \n \n
\n
\n\n
\n
\n

Status

\n
\n \n

All systems operational

\n
\n

99.98% · rolling 90 days

\n
\n
\n\n
\n
\n

Most-read definitions

\n
    \n @for (definition of definitionRows; track definition.name) {\n
  • \n {{ definition.name }}\n {{ definition.owner }}\n
    • \n }\n
\n
\n
\n\n
\n
\n
\n

See the whole workspace

\n

Live demo, no signup, real definitions.

\n
\n \n
\n
\n
\n\n \n

Figures from the Northwind workspace, refreshed hourly.

\n
\n
\n `,\n})\nexport class UiBentoMetricsMixedComponent {\n protected readonly ArrowUpRight = ArrowUpRight\n protected readonly CircleCheck = CircleCheck\n\n protected readonly definitionRows = definitions\n protected readonly sparkPoints = points(series)\n\n @Input('class') className?: string\n\n get rootClass(): string {\n return cn('bg-background', this.className)\n }\n}\n\nexport { points as bentoMetricsMixedPoints }\n", "type": "registry:block", "target": "~/src/app/components/blocks/bento-metrics-mixed/bento-metrics-mixed.component.ts" }, { "path": "packages/registry-angular/blocks/bento-metrics-mixed/index.ts", "content": "export { UiBentoMetricsMixedComponent, bentoMetricsMixedPoints } from './bento-metrics-mixed.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/bento-metrics-mixed/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/separator.json" ], "description": "Five-tile bento mixing headline numbers, an inline sparkline, a short list, and a status tile, for the summary band beneath a hero.", "categories": [ "marketing" ] }