@lifecorner/angular-ui-kit 3.4.0 → 3.5.0

package/fesm2022/lifecorner-angular-ui-kit-radar-chart.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"lifecorner-angular-ui-kit-radar-chart.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/radar-chart/radar-chart.component.ts","../../../../libs/angular-ui-kit/src/lib/radar-chart/radar-chart.component.html"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  input,\n  computed,\n} from '@angular/core';\nimport { ChartValueFormatter, formatChartValue, toFinite } from '@lifecorner/angular-ui-kit/internal/chart';\n\nexport interface RadarChartSeries {\n  label: string;\n  /** One value per axis; drawn clamped to [0, max]. */\n  data: number[];\n  color?: string;\n}\n\n@Component({\n  selector: 'lc-radar-chart',\n  standalone: true,\n  templateUrl: './radar-chart.component.html',\n  styleUrls: ['./radar-chart.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\n/**\n * Radar chart component for multi-axis data comparison.\n *\n * Features:\n * - Multiple data series overlay\n * - Configurable concentric grid rings\n * - Axis labels with configurable max values\n * - Adjustable fill opacity per series\n * - Optional legend display\n * - Responsive SVG rendering\n *\n * @example\n * ```html\n * <lc-radar-chart [series]=\"data\" [axes]=\"categories\" [showLegend]=\"true\" />\n * ```\n */\nexport class RadarChartComponent {\n  series = input.required<RadarChartSeries[]>();\n  /** Axis labels. */\n  axes = input<string[]>([]);\n  /** Max value for each axis. */\n  max = input<number>(100);\n  /** SVG size in pixels. */\n  size = input<number>(250);\n  /** Number of concentric grid rings. */\n  rings = input<number>(4);\n  /** Show axis labels. */\n  showLabels = input<boolean>(true);\n  /** Fill opacity for series polygons. */\n  fillOpacity = input<number>(0.15);\n  /** Show legend. */\n  showLegend = input<boolean>(false);\n  /** Formats values in the generated accessible summary. Defaults to a float-safe `String(value)`. */\n  formatValue = input<ChartValueFormatter>(formatChartValue);\n  /**\n   * Accessible name of the chart. Defaults to a generated summary listing each\n   * series with its per-axis values.\n   */\n  ariaLabel = input<string>('');\n\n  protected readonly viewBox = computed(() => `0 0 ${this.size()} ${this.size()}`);\n  protected readonly center = computed(() => this.size() / 2);\n  protected readonly radius = computed(() => this.size() / 2 - 30);\n\n  private readonly cleanSeries = computed(() =>\n    (this.series() ?? []).map((ser) => ({\n      ...ser,\n      data: (ser.data ?? []).map((v) => toFinite(v)),\n    }))\n  );\n\n  protected readonly axisCount = computed(() => {\n    const s = this.cleanSeries();\n    return s.length ? Math.max(...s.map(ser => ser.data.length)) : 0;\n  });\n\n  protected readonly gridRings = computed(() => {\n    const n = this.rings();\n    const r = this.radius();\n    const cx = this.center();\n    const cy = this.center();\n    const ac = this.axisCount();\n    if (!ac) return [];\n\n    return Array.from({ length: n }, (_, ri) => {\n      const ringR = ((ri + 1) / n) * r;\n      const points = Array.from({ length: ac }, (_, ai) => {\n        const angle = (ai / ac) * Math.PI * 2 - Math.PI / 2;\n        return `${cx + ringR * Math.cos(angle)},${cy + ringR * Math.sin(angle)}`;\n      });\n      return points.join(' ');\n    });\n  });\n\n  protected readonly axisLines = computed(() => {\n    const ac = this.axisCount();\n    const cx = this.center();\n    const cy = this.center();\n    const r = this.radius();\n    if (!ac) return [];\n\n    return Array.from({ length: ac }, (_, i) => {\n      const angle = (i / ac) * Math.PI * 2 - Math.PI / 2;\n      return {\n        x2: cx + r * Math.cos(angle),\n        y2: cy + r * Math.sin(angle),\n      };\n    });\n  });\n\n  protected readonly labelItems = computed(() => {\n    if (!this.showLabels()) return [];\n    const ax = this.axes();\n    const ac = this.axisCount();\n    const cx = this.center();\n    const cy = this.center();\n    const r = this.radius() + 14;\n    if (!ac) return [];\n\n    return Array.from({ length: ac }, (_, i) => {\n      const angle = (i / ac) * Math.PI * 2 - Math.PI / 2;\n      const x = cx + r * Math.cos(angle);\n      const y = cy + r * Math.sin(angle);\n      const anchor = Math.abs(Math.cos(angle)) < 0.01 ? 'middle' :\n        Math.cos(angle) > 0 ? 'start' : 'end';\n      return { x, y, label: ax[i] || `Axis ${i + 1}`, anchor };\n    });\n  });\n\n  protected readonly seriesPolygons = computed(() => {\n    const allSeries = this.cleanSeries();\n    const cx = this.center();\n    const cy = this.center();\n    const r = this.radius();\n    const m = toFinite(this.max()) || 1;\n    const ac = this.axisCount();\n    if (!ac) return [];\n\n    return allSeries.map((ser, si) => {\n      const points = ser.data.map((v, i) => {\n        const angle = (i / ac) * Math.PI * 2 - Math.PI / 2;\n        const vr = (Math.min(Math.max(v, 0), m) / m) * r;\n        return `${cx + vr * Math.cos(angle)},${cy + vr * Math.sin(angle)}`;\n      });\n      return { points: points.join(' '), colorIndex: si % 8, customColor: ser.color || null, label: ser.label };\n    });\n  });\n\n  protected readonly legendItems = computed(() => {\n    if (!this.showLegend()) return [];\n    return this.seriesPolygons().map(s => ({ label: s.label, colorIndex: s.colorIndex, customColor: s.customColor }));\n  });\n\n  protected readonly effectiveAriaLabel = computed(() => {\n    const explicit = this.ariaLabel();\n    if (explicit) return explicit;\n    const series = this.cleanSeries();\n    if (!series.length || !this.axisCount()) return 'Radar chart: no data';\n    const fmt = this.formatValue();\n    const axes = this.axes();\n    const parts = series.map((s, si) => {\n      const values = s.data.map((v, i) => `${axes[i] || `Axis ${i + 1}`} ${fmt(v)}`).join(', ');\n      return `${s.label || `Series ${si + 1}`} (${values})`;\n    });\n    return `Radar chart: ${parts.join('; ')}`;\n  });\n}\n","<div class=\"lc-radar-chart\">\n  <svg [attr.width]=\"size()\" [attr.height]=\"size()\" [attr.viewBox]=\"viewBox()\" role=\"img\" [attr.aria-label]=\"effectiveAriaLabel()\" class=\"lc-radar-chart__svg\">\n    <title>{{ effectiveAriaLabel() }}</title>\n\n    @for (ring of gridRings(); track $index) {\n      <polygon [attr.points]=\"ring\" class=\"lc-radar-chart__grid\" />\n    }\n\n    @for (axis of axisLines(); track $index) {\n      <line [attr.x1]=\"center()\" [attr.y1]=\"center()\" [attr.x2]=\"axis.x2\" [attr.y2]=\"axis.y2\" class=\"lc-radar-chart__axis\" />\n    }\n\n    @for (ser of seriesPolygons(); track $index) {\n      <polygon [attr.points]=\"ser.points\" [class]=\"'lc-radar-chart__polygon lc-radar-chart__polygon--' + ser.colorIndex\" [attr.fill]=\"ser.customColor\" [attr.stroke]=\"ser.customColor\" [attr.fill-opacity]=\"fillOpacity()\" stroke-width=\"2\" />\n    }\n\n    @for (lbl of labelItems(); track $index) {\n      <text [attr.x]=\"lbl.x\" [attr.y]=\"lbl.y\" [attr.text-anchor]=\"lbl.anchor\" dominant-baseline=\"central\" class=\"lc-radar-chart__label\">{{ lbl.label }}</text>\n    }\n  </svg>\n\n  @if (legendItems().length) {\n    <div class=\"lc-radar-chart__legend\">\n      @for (item of legendItems(); track $index) {\n        <div class=\"lc-radar-chart__legend-item\">\n          <span [class]=\"'lc-radar-chart__legend-dot lc-radar-chart__legend-dot--' + item.colorIndex\" [style.background-color]=\"item.customColor\"></span>\n          <span class=\"lc-radar-chart__legend-text\">{{ item.label }}</span>\n        </div>\n      }\n    </div>\n  }\n</div>\n"],"mappings":"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"}