Progress Ring Chart
progress-ring-chartuiProgress ring gauge as dependency-free SVG. Single or concentric rings with a centre summary. Picks up chart tokens via CSS variables.
Installation
$pnpm dlx uipkge-ng@latest add progress-ring-chart$npx uipkge-ng@latest add progress-ring-chart$yarn dlx uipkge-ng@latest add progress-ring-chart$bunx uipkge-ng@latest add progress-ring-chartManifest:
https://uipkge.dev/r/angular/progress-ring-chart.jsonInstalls to:src/app/components/ui/charts/progress-ring-chart/Examples
Loading interactive previews…
Loading interactive previews…
Props
| Name | Type / Values | Default | Required |
|---|---|---|---|
rings | ProgressRing[] | [] | optional |
height | number | string | 220 | optional |
strokeRing thickness in SVG units. Default 14. | number | 14 | optional |
showLabelShow the centre label (first ring value or custom). Default true. | boolean | true | optional |
centerLabelCentre label override. | string | — | optional |
colors | string[] | DEFAULT_COLORS | optional |
ariaLabelAccessible name announced for the chart image. Defaults to a per-ring summary. | string | — | optional |
class | string | — | optional |
Schema
Type aliases from this item's source — use them to shape the data you pass in.
ProgressRinginterface ProgressRing {
/** 0..100. */
value: number
/** Defaults to chart-1..N tokens. */
color?: string
label?: string
}npm dependencies
Used by
Files installed (3)
src/app/components/ui/charts/progress-ring-chart/progress-ring-chart.component.ts4 kB
import { Component, Input, booleanAttribute, ChangeDetectionStrategy } from '@angular/core' import { cn } from '@/lib/utils' export interface ProgressRing { /** 0..100. */ value: number /** Defaults to chart-1..N tokens. */ color?: string label?: string } const DEFAULT_COLORS = ['var(--chart-1)', 'var(--chart-2)', 'var(--chart-3)', 'var(--chart-4)', 'var(--chart-5)'] const CIRCUMFERENCE = 2 * Math.PI * 80 /** * Angular port of the UIPKGE ProgressRingChart — dependency-free SVG gauge. Same inputs as the Vue `ProgressRingChart` (`rings`, `height`, `stroke`, `showLabel`, `centerLabel`, `colors`). */ @Component({ changeDetection: ChangeDetectionStrategy.Eager, selector: 'ui-progress-ring-chart, [ui-progress-ring-chart]', standalone: true, host: { '[attr.data-slot]': '"progress-ring-chart"', '[attr.data-uipkge]': '""', '[class]': 'hostClass', '[attr.role]': '"img"', '[attr.aria-label]': 'resolvedAriaLabel', '[attr.tabindex]': '0', '[style.height]': 'heightStyle', }, template: ` <svg [attr.viewBox]="'0 0 ' + view + ' ' + view" class="aspect-square h-full max-h-full" role="presentation"> <g [attr.transform]="'rotate(-90 ' + center + ' ' + center + ')'"> @for (a of arcs; track $index) { <circle [attr.cx]="center" [attr.cy]="center" [attr.r]="a.r" fill="none" stroke="currentColor" [attr.stroke-width]="stroke" class="text-border" opacity="0.35" /> } @for (a of arcs; track $index) { <circle [attr.cx]="center" [attr.cy]="center" [attr.r]="a.r" fill="none" [attr.stroke]="a.color" [attr.stroke-width]="stroke" stroke-linecap="round" [attr.stroke-dasharray]="a.dash" /> } </g> @if (showLabel) { <text [attr.x]="center" [attr.y]="center" text-anchor="middle" dominant-baseline="middle" class="fill-foreground" font-size="26" font-weight="700" > {{ summary }} </text> } </svg> `, }) export class UiProgressRingChartComponent { @Input() rings: ProgressRing[] = [] @Input() height: number | string = 220 /** Ring thickness in SVG units. Default 14. */ @Input() stroke = 14 /** Show the centre label (first ring value or custom). Default true. */ @Input({ transform: booleanAttribute }) showLabel = true /** Centre label override. */ @Input() centerLabel?: string @Input() colors: string[] = DEFAULT_COLORS /** Accessible name announced for the chart image. Defaults to a per-ring summary. */ @Input() ariaLabel?: string @Input('class') className?: string get arcs(): { dash: string; color: string | undefined; r: number; value: number }[] { return this.rings.map((r, i) => { const pct = Math.max(0, Math.min(100, r.value)) / 100 return { dash: `${(pct * CIRCUMFERENCE).toFixed(1)} ${CIRCUMFERENCE.toFixed(1)}`, color: r.color ?? this.colors[i % this.colors.length], r: 80 - i * (this.stroke + 6), value: r.value, } }) } get view(): number { return 200 + (this.rings.length - 1) * (this.stroke + 6) * 2 } get center(): number { return this.view / 2 } get summary(): string { return ( this.centerLabel ?? (this.rings.length === 1 ? `${Math.round(this.rings[0]?.value ?? 0)}%` : `${this.rings.length} rings`) ) } get resolvedAriaLabel(): string { return ( this.ariaLabel || `Progress ring chart: ${this.rings.map((r) => `${r.label ?? 'value'} ${Math.round(r.value)}%`).join(', ')}` ) } get hostClass(): string { return cn( 'focus-visible:ring-ring flex w-full items-center justify-center focus-visible:ring-2 focus-visible:outline-none', this.className, ) } get heightStyle(): string { return /^\d+$/.test(String(this.height)) ? `${this.height}px` : String(this.height) } }src/app/components/ui/charts/progress-ring-chart/index.ts0.1 kB
export { UiProgressRingChartComponent, type ProgressRing } from './progress-ring-chart.component'src/app/components/ui/charts/use-chart-theme.ts7.4 kB
// Angular port of `useChartTheme.ts` (Vue) — framework-free helpers + plain // functions instead of Vue `computed` refs. The palette is driven by Tailwind // v4 CSS variables (`--chart-1`..`--chart-5`, `--muted-foreground`, `--border`, // `--popover`, …) so dark/light flips happen automatically when the consumer // toggles their theme class. Values resolve at runtime via `getComputedStyle`, // so they pick up whatever the consumer set in their own `tailwind.css`. // // In a non-DOM environment (SSR / unit tests) every accessor returns the // fallback palette, which roughly matches the shadcn Neutral defaults so the // first paint doesn't flicker. export const CHART_FALLBACK = ['#f59e0b', '#14b8a6', '#3b82f6', '#f97316', '#eab308'] // ECharts' canvas renderer does not accept OKLCH in every browser. Assigning // one of our Tailwind tokens to `fillStyle` can silently leave the sentinel // colour in place, turning a whole chart black. Convert OKLCH ourselves and // let the canvas normalize older CSS colour formats. let _hexCanvas: CanvasRenderingContext2D | null = null export function toCanvasColor(cssColor: string): string { const value = cssColor.trim() const match = value.match( /^oklch\(\s*([+-]?(?:\d+\.?\d*|\.\d+))(%?)\s+([+-]?(?:\d+\.?\d*|\.\d+))\s+([+-]?(?:\d+\.?\d*|\.\d+))(?:deg)?(?:\s*\/\s*([+-]?(?:\d+\.?\d*|\.\d+))(%?))?\s*\)$/i, ) if (match) { const lightness = Number(match[1]) / (match[2] === '%' ? 100 : 1) const chroma = Number(match[3]) const hue = (Number(match[4]) * Math.PI) / 180 const alpha = match[5] == null ? 1 : Number(match[5]) / (match[6] === '%' ? 100 : 1) const a = chroma * Math.cos(hue) const b = chroma * Math.sin(hue) const l = Math.pow(lightness + 0.3963377774 * a + 0.2158037573 * b, 3) const m = Math.pow(lightness - 0.1055613458 * a - 0.0638541728 * b, 3) const s = Math.pow(lightness - 0.0894841775 * a - 1.291485548 * b, 3) const linear = [ 4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s, -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s, -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s, ] const rgb = linear.map((channel) => { const encoded = channel <= 0.0031308 ? 12.92 * channel : 1.055 * Math.pow(channel, 1 / 2.4) - 0.055 return Math.round(Math.min(1, Math.max(0, encoded)) * 255) }) return alpha < 1 ? `rgba(${rgb.join(', ')}, ${alpha})` : `rgb(${rgb.join(', ')})` } if (typeof document === 'undefined') return cssColor if (!_hexCanvas) { _hexCanvas = document.createElement('canvas').getContext('2d') } if (!_hexCanvas) return cssColor _hexCanvas.fillStyle = '#010203' _hexCanvas.fillStyle = value const normalized = _hexCanvas.fillStyle as string return normalized === '#010203' && value.toLowerCase() !== '#010203' ? value : normalized } // Convert any CSS color (hex, rgb, oklch, color()) + alpha 0..1 to a // canvas-safe rgba(r,g,b,a). `colorString + '40'` (8-digit hex alpha) // only works when `colorString` is `#rrggbb`; once tokens resolve to // oklch() post-hydration the gradient stops break and the canvas paint // throws every frame. Stay defensive and always return rgba. export function toRgba(cssColor: string, alpha: number): string { const normalized = toCanvasColor(cssColor) if (normalized.startsWith('#') && normalized.length === 7) { const r = parseInt(normalized.slice(1, 3), 16) const g = parseInt(normalized.slice(3, 5), 16) const b = parseInt(normalized.slice(5, 7), 16) return `rgba(${r},${g},${b},${alpha})` } if (normalized.startsWith('rgba(')) { return normalized.replace(/,\s*[\d.]+\s*\)$/, `,${alpha})`) } if (normalized.startsWith('rgb(')) { return normalized.replace(/^rgb\(/, 'rgba(').replace(/\)$/, `,${alpha})`) } // Canvas refused to parse this color -- ship the original string and // let ECharts complain (better than crashing the paint loop). return cssColor } export function resolveCssVar(name: string, fallback: string): string { if (typeof window === 'undefined') return fallback const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim() if (!v) return fallback return toCanvasColor(v) } export function getChartColors(): string[] { return Array.from({ length: 5 }, (_, i) => resolveCssVar(`--chart-${i + 1}`, CHART_FALLBACK[i]!)) } export function getChartTextColor(): string { return resolveCssVar('--muted-foreground', '#888888') } export function getChartAxisColor(): string { return resolveCssVar('--border', '#e5e5e5') } export function getChartSplitLineColor(): string { return resolveCssVar('--border', '#f0f0f0') } export function getChartTooltipBg(): string { return resolveCssVar('--popover', 'rgba(255,255,255,0.96)') } export function getChartTooltipBorder(): string { return resolveCssVar('--border', '#e5e5e5') } export function getChartTooltipText(): string { return resolveCssVar('--popover-foreground', '#333333') } export function getChartBgColor(): string { return resolveCssVar('--card', resolveCssVar('--background', '#ffffff')) } // The app's accent, for the one highlighted element on a chart or map — a // selected route, a focused bar. Category series keep using getChartColors(). export function getChartAccentColor(): string { return resolveCssVar('--primary', '#38bdf8') } // Out-of-bounds / failure colour for charts that encode good vs bad rather // than a category — control limits, error series. export function getChartDangerColor(): string { return resolveCssVar('--destructive', '#dc2626') } // Two-level deep merge for ECharts option blocks (xAxis, yAxis, grid, // tooltip, legend, singleAxis, parallel, etc.). The top-level keys merge // shallowly, but one nested level (axisLabel, axisLine, splitLine, etc.) // merges shallowly too so a consumer passing `xAxis: { axisLabel: { fontSize: 9 } }` // doesn't blow away the wrapper's `color` + base font defaults on the same // axisLabel block. Arrays + primitives replace outright. export function mergeOptionBlock<T extends Record<string, any>>(base: T, user: Partial<T> | undefined): T { if (!user) return base const out: any = { ...base } for (const k of Object.keys(user)) { const bv = (base as any)[k] const uv = (user as any)[k] if ( bv != null && uv != null && typeof bv === 'object' && typeof uv === 'object' && !Array.isArray(bv) && !Array.isArray(uv) ) { out[k] = { ...bv, ...uv } } else { out[k] = uv } } return out } // Default gauge stoplight: teal (safe) -> amber (warning) -> red (danger). // Static because gauges have semantic meaning (green safe / red danger) that // we deliberately don't theme-flip. export const gaugeThresholds: [number, string][] = [ [0.6, '#14b8a6'], [0.85, '#f59e0b'], [1, '#dc2626'], ] /** * Re-render callback subscription for theme flips: bumps every listener * whenever `<html>` class/style changes (the typical shadcn dark-mode pivot) * so chart components can rebuild their options and re-paint. Returns an * unsubscribe function. No-op (never fires) outside the DOM. */ export function onChartThemeChange(cb: () => void): () => void { if (typeof window === 'undefined' || typeof MutationObserver === 'undefined') return () => {} const observer = new MutationObserver(() => cb()) observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class', 'style', 'data-theme'] }) return () => observer.disconnect() }
Raw manifest:https://uipkge.dev/r/angular/progress-ring-chart.json