@lifecorner/angular-ui-kit 3.4.1 → 3.5.1

package/fesm2022/lifecorner-angular-ui-kit-gauge.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"lifecorner-angular-ui-kit-gauge.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/gauge/gauge.component.ts","../../../../libs/angular-ui-kit/src/lib/gauge/gauge.component.html"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  input,\n  computed,\n} from '@angular/core';\nimport { ChartValueFormatter, toFinite } from '@lifecorner/angular-ui-kit/internal/chart';\n\nexport type GaugeColor = 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';\nexport type GaugeSize = 'sm' | 'md' | 'lg';\n\n@Component({\n  selector: 'lc-gauge',\n  standalone: true,\n  templateUrl: './gauge.component.html',\n  styleUrls: ['./gauge.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\n/**\n * Gauge component for displaying a value on a semicircular scale.\n *\n * Features:\n * - Semicircle arc with value and track segments\n * - Color theme variants (primary, secondary, success, warning, error)\n * - Size presets (sm, md, lg)\n * - Configurable max value and suffix\n * - Optional numeric value display\n * - Responsive SVG rendering\n *\n * @example\n * ```html\n * <lc-gauge [value]=\"75\" [max]=\"100\" color=\"primary\" label=\"CPU\" suffix=\"%\" />\n * ```\n */\nexport class GaugeComponent {\n  /** Value between 0 and max. */\n  value = input<number>(0);\n\n  /** Maximum value. */\n  max = input<number>(100);\n\n  /** Color theme. */\n  color = input<GaugeColor>('primary');\n\n  /** Size preset. */\n  size = input<GaugeSize>('md');\n\n  /** Label text below the value. */\n  label = input<string>('');\n\n  /** Value suffix (e.g. '%', '°C'). */\n  suffix = input<string>('%');\n\n  /** Show the value in the center. */\n  showValue = input<boolean>(true);\n\n  /**\n   * Formats the displayed value. When set it replaces the default\n   * `Math.round(value) + suffix` entirely (the suffix is not appended).\n   */\n  formatValue = input<ChartValueFormatter | null>(null);\n\n  /**\n   * Accessible name of the gauge. Defaults to a generated summary such as\n   * \"CPU: 72% of 100%\", so assistive technology hears the value.\n   */\n  ariaLabel = input<string>('');\n\n  private readonly SIZE_MAP: Record<GaugeSize, number> = { sm: 100, md: 160, lg: 220 };\n\n  protected readonly svgSize = computed(() => this.SIZE_MAP[this.size()]);\n  protected readonly svgHeight = computed(() => {\n    const s = this.svgSize();\n    const sw = this.strokeW();\n    const r = (s - sw * 2) / 2;\n    // height = stroke padding + radius (arc) + text area\n    return sw + r + 36;\n  });\n  protected readonly viewBox = computed(() => {\n    const s = this.svgSize();\n    return `0 0 ${s} ${this.svgHeight()}`;\n  });\n\n  protected readonly cx = computed(() => this.svgSize() / 2);\n  protected readonly cy = computed(() => {\n    const sw = this.strokeW();\n    const r = (this.svgSize() - sw * 2) / 2;\n    return sw + r;\n  });\n  protected readonly radius = computed(() => (this.svgSize() - this.strokeW() * 2) / 2);\n  protected readonly strokeW = computed(() => {\n    const map: Record<GaugeSize, number> = { sm: 8, md: 12, lg: 16 };\n    return map[this.size()];\n  });\n\n  protected readonly fraction = computed(() => {\n    const m = toFinite(this.max()) || 1;\n    return Math.min(Math.max(toFinite(this.value()) / m, 0), 1);\n  });\n\n  protected readonly trackD = computed(() => {\n    const r = this.radius();\n    const cxv = this.cx();\n    const cyv = this.cy();\n    return `M${cxv - r},${cyv} A${r},${r} 0 0 1 ${cxv + r},${cyv}`;\n  });\n\n  protected readonly valueD = computed(() => {\n    const r = this.radius();\n    const cxv = this.cx();\n    const cyv = this.cy();\n    const f = this.fraction();\n    if (f <= 0) return '';\n    const angle = Math.PI * f;\n    const x = cxv - r * Math.cos(angle);\n    const y = cyv - r * Math.sin(angle);\n    return `M${cxv - r},${cyv} A${r},${r} 0 0 1 ${x},${y}`;\n  });\n\n  private formatted(value: number): string {\n    const fmt = this.formatValue();\n    return fmt ? fmt(value) : `${Math.round(toFinite(value))}${this.suffix()}`;\n  }\n\n  protected readonly displayValue = computed(() => this.formatted(this.value()));\n\n  protected readonly effectiveAriaLabel = computed(() => {\n    const explicit = this.ariaLabel();\n    if (explicit) return explicit;\n    const label = this.label();\n    const summary = `${this.displayValue()} of ${this.formatted(this.max())}`;\n    return label ? `${label}: ${summary}` : `Gauge: ${summary}`;\n  });\n\n  protected readonly valueFontSize = computed(() => {\n    const map: Record<GaugeSize, string> = { sm: '1rem', md: '1.5rem', lg: '2rem' };\n    return map[this.size()];\n  });\n\n  protected readonly labelFontSize = computed(() => {\n    const map: Record<GaugeSize, string> = { sm: '0.625rem', md: '0.75rem', lg: '0.875rem' };\n    return map[this.size()];\n  });\n}\n","<svg\n  [attr.width]=\"svgSize()\"\n  [attr.height]=\"svgHeight()\"\n  [attr.viewBox]=\"viewBox()\"\n  class=\"lc-gauge\"\n  role=\"img\"\n  [attr.aria-label]=\"effectiveAriaLabel()\"\n>\n  <title>{{ effectiveAriaLabel() }}</title>\n\n  <path\n    [attr.d]=\"trackD()\"\n    [attr.stroke-width]=\"strokeW()\"\n    fill=\"none\"\n    stroke-linecap=\"round\"\n    class=\"lc-gauge__track\"\n  />\n\n  @if (valueD()) {\n    <path\n      [attr.d]=\"valueD()\"\n      [attr.stroke-width]=\"strokeW()\"\n      fill=\"none\"\n      stroke-linecap=\"round\"\n      [class]=\"'lc-gauge__value-arc lc-gauge__value-arc--' + color()\"\n    />\n  }\n\n  @if (showValue()) {\n    <text\n      [attr.x]=\"cx()\"\n      [attr.y]=\"cy() + 8\"\n      text-anchor=\"middle\"\n      dominant-baseline=\"auto\"\n      class=\"lc-gauge__value-text\"\n      [style.font-size]=\"valueFontSize()\"\n    >\n      {{ displayValue() }}\n    </text>\n  }\n\n  @if (label()) {\n    <text\n      [attr.x]=\"cx()\"\n      [attr.y]=\"cy() + 24\"\n      text-anchor=\"middle\"\n      dominant-baseline=\"auto\"\n      class=\"lc-gauge__label\"\n      [style.font-size]=\"labelFontSize()\"\n    >\n      {{ label() }}\n    </text>\n  }\n</svg>\n"],"mappings":"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"}