ngwr 15.0.1 → 15.2.0

package/fesm2022/ngwr-charts-meter-group.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngwr-charts-meter-group.mjs","names":[],"sources":["../../../projects/lib/charts/meter-group/meter-group.ts","../../../projects/lib/charts/meter-group/meter-group.html"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';\nimport {\n  Component,\n  type ElementRef,\n  LOCALE_ID,\n  ViewEncapsulation,\n  computed,\n  inject,\n  input,\n  viewChildren,\n} from '@angular/core';\n\nimport { useI18nText } from 'ngwr/i18n';\nimport { useChartTooltip } from 'ngwr/popover';\n\nimport type { WrMeterSegment } from './types';\n\n/**\n * Default series colours, in order.\n *\n * Four intents and the neutral role, and `info` is deliberately absent: it is the\n * same blue as `primary` to every reader (1.061:1 apart in light, 1.004:1 in\n * dark, and the same hue), so two adjacent series would be one series with a\n * seam. The neutral closes the list because it is the one tone here that no\n * intent is near — it used to be the `medium` intent, which v15 removed, and the\n * role resolves to the same step of the gray ramp.\n */\nconst FALLBACK_COLORS = [\n  'var(--wr-color-primary)',\n  'var(--wr-color-success)',\n  'var(--wr-color-warning)',\n  'var(--wr-color-danger)',\n  'var(--wr-color-on-surface-muted)',\n];\n\n/**\n * Stacked-segment progress bar. Visualises a breakdown of a total —\n * disk usage, budget, vote share, etc. Each segment contributes a slice\n * proportional to its `value` relative to the sum (or the explicit `max`).\n *\n * @example\n * ```html\n * <wr-meter-group\n *   [segments]=\"[\n *     { label: 'Used', value: 60 },\n *     { label: 'Reserved', value: 25, color: 'var(--wr-color-warning)' }\n *   ]\"\n *   [max]=\"100\"\n * />\n * ```\n *\n * @see https://ngwr.dev/charts/meter-group\n */\n@Component({\n  selector: 'wr-meter-group',\n  templateUrl: './meter-group.html',\n  encapsulation: ViewEncapsulation.None,\n  host: { class: 'wr-meter-group' },\n})\nexport class WrMeterGroup {\n  /** Accessible name — the role needs one. Falls back to `meterGroup.label`. */\n  readonly ariaLabel = input<string | null>(null);\n\n  protected readonly resolvedAriaLabel = useI18nText(this.ariaLabel, 'meterGroup.label', 'Meter');\n\n  /**\n   * The parts of the bar, in order. Values are summed and each segment is drawn\n   * as its share of that total, so they need not add up to anything in particular.\n   */\n  readonly segments = input<readonly WrMeterSegment[]>([]);\n\n  /** Explicit total. When `0` (default), `max = sum(values)`. @default 0 */\n  readonly max = input(0, { transform: (v: unknown): number => Math.max(0, coerceNumberProperty(v, 0)) });\n\n  /** Show the labelled legend under the bar. @default true */\n  readonly showLegend = input(true, { transform: coerceBooleanProperty });\n\n  /** Show each segment's value in the legend, next to its label. @default true */\n  readonly showValues = input(true, { transform: coerceBooleanProperty });\n\n  /**\n   * Show a tooltip with the segment's label and value on hover. It replaces the\n   * band's `title`, which is written only while this is off — or the browser would\n   * open a second copy a moment later. @default true\n   */\n  readonly tooltip = input(true, { transform: coerceBooleanProperty });\n\n  /**\n   * Writes every value in the legend and the tooltip, and the total the bar announces\n   * as `aria-valuetext`. `null` uses `Intl.NumberFormat` in `LOCALE_ID`.\n   * `aria-valuenow` stays a number.\n   */\n  readonly valueFormat = input<((value: number) => string) | null>(null);\n\n  private readonly locale = inject(LOCALE_ID);\n  private readonly numbers = new Intl.NumberFormat(this.locale);\n  /** Below one, by significant digits, which keep 0.0004 from rounding to `0`. */\n  private readonly smallNumbers = new Intl.NumberFormat(this.locale, { maximumSignificantDigits: 3 });\n\n  private formatValue(value: number): string {\n    const custom = this.valueFormat();\n    if (custom) return custom(value);\n    return (value !== 0 && Math.abs(value) < 1 ? this.smallNumbers : this.numbers).format(value);\n  }\n\n  private readonly sliceEls = viewChildren<ElementRef<HTMLElement>>('slice');\n\n  /**\n   * A segment's contribution, floored at `0` and with anything non-finite read\n   * as `0`. One `NaN` used to poison the whole bar: the sum is `NaN` as soon as\n   * one value is, so the total fell back to `1` and every OTHER segment was\n   * asked for a width of `value * 100`%, while `aria-valuenow` announced `NaN`.\n   */\n  private static amount(raw: number): number {\n    return Number.isFinite(raw) ? Math.max(0, raw) : 0;\n  }\n\n  protected readonly resolvedMax = computed(() => {\n    const explicit = this.max();\n    if (explicit > 0) return explicit;\n    const sum = this.segments().reduce((acc, s) => acc + WrMeterGroup.amount(s.value), 0);\n    return sum > 0 ? sum : 1;\n  });\n\n  /**\n   * Sum of the segments, for `aria-valuenow`. `role=\"progressbar\"` without it\n   * announces no value at all, so the bar was invisible to assistive tech.\n   *\n   * Capped at the total, because segments summing past an explicit `max` used\n   * to announce a value outside the range they were announced against.\n   */\n  protected readonly totalValue = computed(() =>\n    Math.min(\n      this.resolvedMax(),\n      this.segments().reduce((acc, s) => acc + WrMeterGroup.amount(s.value), 0)\n    )\n  );\n\n  /**\n   * The total as the bar announces it — `aria-valuetext`, written the way the legend\n   * writes each figure — so a `valueFormat` that adds a unit reaches a screen reader\n   * too, rather than a bare percentage of `aria-valuemax`. The gauge does the same.\n   */\n  protected readonly totalText = computed(() => this.formatValue(this.totalValue()));\n\n  protected readonly slices = computed(() =>\n    this.segments().map((segment, i) => ({\n      label: segment.label,\n      // The legend keeps a negative value visible — it is data the caller gave\n      // us — but not a non-finite one, which reads as the literal text `NaN`.\n      text: this.formatValue(Number.isFinite(segment.value) ? segment.value : 0),\n      color: segment.color ?? FALLBACK_COLORS[i % FALLBACK_COLORS.length],\n      percent: (WrMeterGroup.amount(segment.value) / this.resolvedMax()) * 100,\n    }))\n  );\n\n  /**\n   * One tooltip for the whole bar, pointing at the hovered band, with the value as\n   * the legend prints it.\n   */\n  protected readonly tip = useChartTooltip(this.tooltip, index => {\n    const slice = this.slices()[index];\n    const el = this.sliceEls()[index]?.nativeElement;\n    if (!slice || !el) return null;\n    return { datum: { label: slice.label, value: slice.text, color: slice.color }, anchor: el };\n  });\n}\n","<div\n  class=\"wr-meter-group__bar\"\n  role=\"progressbar\"\n  [attr.aria-label]=\"resolvedAriaLabel()\"\n  [attr.aria-valuemin]=\"0\"\n  [attr.aria-valuemax]=\"resolvedMax()\"\n  [attr.aria-valuenow]=\"totalValue()\"\n  [attr.aria-valuetext]=\"totalText()\"\n>\n  @for (slice of slices(); track $index) {\n    <!-- `data-label` is what the harness reads a band's label from; the `title` it\n         used to read is only written while the tooltip is off. -->\n    <span\n      #slice\n      class=\"wr-meter-group__slice\"\n      [attr.title]=\"tooltip() ? null : slice.label\"\n      [attr.data-label]=\"slice.label\"\n      [style.width.%]=\"slice.percent\"\n      [style.background]=\"slice.color\"\n      (mouseenter)=\"tip.enter($index)\"\n      (mouseleave)=\"tip.leave($event)\"\n    ></span>\n  }\n</div>\n\n@if (showLegend() && slices().length > 0) {\n  <ul class=\"wr-meter-group__legend\">\n    @for (slice of slices(); track $index) {\n      <li class=\"wr-meter-group__legend-item\">\n        <span class=\"wr-meter-group__swatch\" aria-hidden=\"true\" [style.background]=\"slice.color\"></span>\n        <span class=\"wr-meter-group__legend-label\">{{ slice.label }}</span>\n        @if (showValues()) {\n          <span class=\"wr-meter-group__legend-value\">{{ slice.text }}</span>\n        }\n      </li>\n    }\n  </ul>\n}\n"],"mappings":"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"}
+{"version":3,"file":"ngwr-charts-meter-group.mjs","names":[],"sources":["../../../projects/lib/charts/meter-group/meter-group.ts","../../../projects/lib/charts/meter-group/meter-group.html"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';\nimport { Component, type ElementRef, ViewEncapsulation, computed, input, model, viewChildren } from '@angular/core';\n\nimport { WR_CHART_LEGEND_BLOCK, WrChartLegend, type WrChartLegendItem } from 'ngwr/charts/chart-legend';\nimport { chartColor, useChartNumbers } from 'ngwr/charts/core';\nimport { useI18nText } from 'ngwr/i18n';\nimport { useChartTooltip } from 'ngwr/popover';\n\nimport type { WrMeterSegment } from './types';\n\n/**\n * Stacked-segment progress bar. Visualises a breakdown of a total —\n * disk usage, budget, vote share, etc. Each segment contributes a slice\n * proportional to its `value` relative to the sum of the segments shown (or the\n * explicit `max`).\n *\n * @example\n * ```html\n * <wr-meter-group\n *   [segments]=\"[\n *     { label: 'Used', value: 60 },\n *     { label: 'Reserved', value: 25, color: 'var(--wr-color-warning)' }\n *   ]\"\n *   [max]=\"100\"\n * />\n * ```\n *\n * The legend is a `ul[wr-chart-legend]` (`ngwr/charts/chart-legend`), and with\n * `toggleableLegend` its rows show and hide their segments through `hiddenSegments`.\n *\n * @see https://ngwr.dev/charts/meter-group\n */\n@Component({\n  selector: 'wr-meter-group',\n  templateUrl: './meter-group.html',\n  encapsulation: ViewEncapsulation.None,\n  host: { class: 'wr-meter-group' },\n  imports: [WrChartLegend],\n  // The legend's rows keep the classes this chart drew before it drew them through\n  // `WrChartLegend`: `.wr-meter-group__legend-item`, `__swatch`, `__legend-label` and\n  // `__legend-value`.\n  viewProviders: [{ provide: WR_CHART_LEGEND_BLOCK, useValue: 'wr-meter-group' }],\n})\nexport class WrMeterGroup {\n  /** Accessible name — the role needs one. Falls back to `meterGroup.label`. */\n  readonly ariaLabel = input<string | null>(null);\n\n  protected readonly resolvedAriaLabel = useI18nText(this.ariaLabel, 'meterGroup.label', 'Meter');\n\n  /**\n   * The parts of the bar, in order. Each segment is drawn as its share of `max` when\n   * set, else of the sum of the segments shown, so they need not add up to anything in\n   * particular.\n   */\n  readonly segments = input<readonly WrMeterSegment[]>([]);\n\n  /** Explicit total, a capacity the segments fill. `0` (default) uses the sum of the segments shown. @default 0 */\n  readonly max = input(0, { transform: (v: unknown): number => Math.max(0, coerceNumberProperty(v, 0)) });\n\n  /** Show the labelled legend under the bar. @default true */\n  readonly showLegend = input(true, { transform: coerceBooleanProperty });\n\n  /** Show each segment's value in the legend, next to its label. @default true */\n  readonly showValues = input(true, { transform: coerceBooleanProperty });\n\n  /**\n   * Make each legend row a toggle button that shows and hides its segment, through\n   * `hiddenSegments`. A row is a `<button aria-pressed>`, pressed while its segment is\n   * shown, so the legend becomes one tab stop per segment. @default false\n   */\n  readonly toggleableLegend = input(false, { transform: coerceBooleanProperty });\n\n  /**\n   * The positions in `segments` of the segments that are hidden. Positions rather than\n   * labels, since two segments may share a label. A toggleable legend writes it, and a\n   * host may bind it with or without one: `[(hiddenSegments)]`.\n   *\n   * A hidden segment is left out of the bar and out of the sum. With no `max`, the\n   * segments still shown share the whole bar between them, each at its share of their\n   * own total, as `wr-donut-chart`'s slices do: the bar is the whole of what it draws.\n   * An explicit `max` is a capacity rather than a sum, so it stays, and the hidden\n   * segment's share becomes empty track. Either way the bar announces the total of the\n   * segments shown (`aria-valuenow`, `aria-valuetext`), since that is what it draws, and\n   * the tooltip cannot open on a segment that is not drawn. The legend keeps the hidden\n   * segment's row, struck through and with its own value, so it can be shown again; the\n   * row says \"hidden\" to a screen reader as well, through `aria-pressed` on a toggle and\n   * a visually hidden word otherwise. A position past the end of `segments` is kept and\n   * ignored.\n   */\n  readonly hiddenSegments = model<readonly number[]>([]);\n\n  /**\n   * Show a tooltip with the segment's label and value on hover. It replaces the\n   * band's `title`, which is written only while this is off — or the browser would\n   * open a second copy a moment later. @default true\n   */\n  readonly tooltip = input(true, { transform: coerceBooleanProperty });\n\n  /**\n   * Writes every value in the legend and the tooltip, and the total the bar announces\n   * as `aria-valuetext`. `null` uses `Intl.NumberFormat` in `LOCALE_ID`.\n   * `aria-valuenow` stays a number.\n   */\n  readonly valueFormat = input<((value: number) => string) | null>(null);\n\n  /** Each value as the legend, the tooltip and the bar print it: never compact, in `LOCALE_ID` unless `valueFormat` is given. */\n  private readonly numbers = useChartNumbers(this.valueFormat);\n\n  private readonly sliceEls = viewChildren<ElementRef<HTMLElement>>('slice');\n\n  /**\n   * A segment's contribution, floored at `0` and with anything non-finite read\n   * as `0`. One `NaN` used to poison the whole bar: the sum is `NaN` as soon as\n   * one value is, so the total fell back to `1` and every OTHER segment was\n   * asked for a width of `value * 100`%, while `aria-valuenow` announced `NaN`.\n   */\n  private static amount(raw: number): number {\n    return Number.isFinite(raw) ? Math.max(0, raw) : 0;\n  }\n\n  private readonly hidden = computed(() => new Set(this.hiddenSegments()));\n\n  /** What the segments still shown add up to (see `hiddenSegments`). */\n  private readonly shownSum = computed(() => {\n    const hidden = this.hidden();\n    return this.segments().reduce((acc, s, i) => acc + (hidden.has(i) ? 0 : WrMeterGroup.amount(s.value)), 0);\n  });\n\n  protected readonly resolvedMax = computed(() => {\n    const explicit = this.max();\n    if (explicit > 0) return explicit;\n    const sum = this.shownSum();\n    return sum > 0 ? sum : 1;\n  });\n\n  /**\n   * Sum of the segments, for `aria-valuenow`. `role=\"progressbar\"` without it\n   * announces no value at all, so the bar was invisible to assistive tech.\n   *\n   * Capped at the total, because segments summing past an explicit `max` used\n   * to announce a value outside the range they were announced against.\n   */\n  protected readonly totalValue = computed(() => Math.min(this.resolvedMax(), this.shownSum()));\n\n  /**\n   * The total as the bar announces it — `aria-valuetext`, written the way the legend\n   * writes each figure — so a `valueFormat` that adds a unit reaches a screen reader\n   * too, rather than a bare percentage of `aria-valuemax`. The gauge does the same.\n   */\n  protected readonly totalText = computed(() => this.numbers.value(this.totalValue()));\n\n  protected readonly slices = computed(() => {\n    const hidden = this.hidden();\n    const max = this.resolvedMax();\n    return this.segments().map((segment, i) => ({\n      index: i,\n      label: segment.label,\n      // The legend keeps a negative value visible — it is data the caller gave\n      // us — but not a non-finite one, which reads as the literal text `NaN`.\n      text: this.numbers.value(Number.isFinite(segment.value) ? segment.value : 0),\n      color: segment.color ?? chartColor(i),\n      hidden: hidden.has(i),\n      percent: hidden.has(i) ? 0 : (WrMeterGroup.amount(segment.value) / max) * 100,\n    }));\n  });\n\n  /**\n   * The bands drawn, in order: every segment but the hidden ones. A hidden band is left\n   * out rather than drawn at zero width, since a zero band still lays its gap over the\n   * boundary and would leave a double one.\n   */\n  protected readonly bands = computed(() => this.slices().filter(slice => !slice.hidden));\n\n  /** The legend's rows: every segment, hidden ones included, with its value unless `showValues` is off. */\n  protected readonly legendItems = computed<readonly WrChartLegendItem[]>(() => {\n    const values = this.showValues();\n    return this.slices().map(({ label, color, text }) => ({ label, color, value: values ? text : null }));\n  });\n\n  /**\n   * One tooltip for the whole bar, pointing at the hovered band, with the value as\n   * the legend prints it. Asked by the segment's own position, and the drawn bands are\n   * only the shown ones, so the band is found among them by that position.\n   */\n  protected readonly tip = useChartTooltip(this.tooltip, index => {\n    const slice = this.slices()[index];\n    if (!slice || slice.hidden) return null;\n    const el = this.sliceEls()[this.bands().indexOf(slice)]?.nativeElement;\n    if (!el) return null;\n    return { datum: { label: slice.label, value: slice.text, color: slice.color }, anchor: el };\n  });\n}\n","<div\n  class=\"wr-meter-group__bar\"\n  role=\"progressbar\"\n  [attr.aria-label]=\"resolvedAriaLabel()\"\n  [attr.aria-valuemin]=\"0\"\n  [attr.aria-valuemax]=\"resolvedMax()\"\n  [attr.aria-valuenow]=\"totalValue()\"\n  [attr.aria-valuetext]=\"totalText()\"\n>\n  <!-- Only the shown segments draw a band; each keeps its segment's own position, which\n       is what the tooltip looks it up by. `data-label` is what the harness reads a band's\n       label from; the `title` it used to read is only written while the tooltip is off. -->\n  @for (slice of bands(); track slice.index) {\n    <span\n      #slice\n      class=\"wr-meter-group__slice\"\n      [attr.title]=\"tooltip() ? null : slice.label\"\n      [attr.data-label]=\"slice.label\"\n      [style.width.%]=\"slice.percent\"\n      [style.background]=\"slice.color\"\n      (mouseenter)=\"tip.enter(slice.index)\"\n      (mouseleave)=\"tip.leave($event)\"\n    ></span>\n  }\n</div>\n\n@if (showLegend() && slices().length > 0) {\n  <ul\n    wr-chart-legend\n    class=\"wr-meter-group__legend\"\n    [items]=\"legendItems()\"\n    [toggleable]=\"toggleableLegend()\"\n    [(hiddenSeries)]=\"hiddenSegments\"\n  ></ul>\n}\n"],"mappings":";;;;;;;;;;;;;AAkDA,IAAa,eAAb,MAAa,aAAY;CAEd,YAAY,MAAqB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAE5B,oBAAoB,YAAY,KAAK,WAAW,oBAAoB,OAAO;CAOrF,WAAW,MAAiC,CAAA,GAAG,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CAG/C,MAAM,MAAM,GAAC;EAAA,GAAA,YAAA,EAAA,WAAA,MAAA,+BAAA,CAAA;EAAI,YAAY,MAAuB,KAAK,IAAI,GAAG,qBAAqB,GAAG,CAAC,CAAC;CAAC,CAAA;CAG3F,aAAa,MAAM,MAAI;EAAA,GAAA,YAAA,EAAA,WAAA,aAAA,+BAAA,CAAA;EAAI,WAAW;CAAqB,CAAA;CAG3D,aAAa,MAAM,MAAI;EAAA,GAAA,YAAA,EAAA,WAAA,aAAA,+BAAA,CAAA;EAAI,WAAW;CAAqB,CAAA;CAO3D,mBAAmB,MAAM,OAAK;EAAA,GAAA,YAAA,EAAA,WAAA,mBAAA,+BAAA,CAAA;EAAI,WAAW;CAAqB,CAAA;CAmBlE,iBAAiB,MAAyB,CAAA,GAAG,GAAA,YAAA,CAAA,EAAA,WAAA,iBAAA,CAAA,+BAAA,CAAA,CAAA;CAO7C,UAAU,MAAM,MAAI;EAAA,GAAA,YAAA,EAAA,WAAA,UAAA,+BAAA,CAAA;EAAI,WAAW;CAAqB,CAAA;CAOxD,cAAc,MAA0C,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CAGrD,UAAU,gBAAgB,KAAK,WAAW;CAE1C,WAAW,aAAsC,SAAQ,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CAQlE,OAAO,OAAO,KAAW;EAC/B,OAAO,OAAO,SAAS,GAAG,IAAI,KAAK,IAAI,GAAG,GAAG,IAAI;CACnD;CAEiB,SAAS,eAAe,IAAI,IAAI,KAAK,eAAc,CAAE,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CAGvD,WAAW,eAAc;EACxC,MAAM,SAAS,KAAK,OAAM;EAC1B,OAAO,KAAK,SAAQ,CAAE,CAAC,QAAQ,KAAK,GAAG,MAAM,OAAO,OAAO,IAAI,CAAC,IAAI,IAAI,aAAa,OAAO,EAAE,KAAK,IAAI,CAAC;CAC1G,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CAEiB,cAAc,eAAc;EAC7C,MAAM,WAAW,KAAK,IAAG;EACzB,IAAI,WAAW,GAAG,OAAO;EACzB,MAAM,MAAM,KAAK,SAAQ;EACzB,OAAO,MAAM,IAAI,MAAM;CACzB,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CASiB,aAAa,eAAe,KAAK,IAAI,KAAK,YAAW,GAAI,KAAK,SAAQ,CAAE,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CAO1E,YAAY,eAAe,KAAK,QAAQ,MAAM,KAAK,WAAU,CAAE,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAEjE,SAAS,eAAc;EACxC,MAAM,SAAS,KAAK,OAAM;EAC1B,MAAM,MAAM,KAAK,YAAW;EAC5B,OAAO,KAAK,SAAQ,CAAE,CAAC,KAAK,SAAS,OAAO;GAC1C,OAAO;GACP,OAAO,QAAQ;GAGf,MAAM,KAAK,QAAQ,MAAM,OAAO,SAAS,QAAQ,KAAK,IAAI,QAAQ,QAAQ,CAAC;GAC3E,OAAO,QAAQ,SAAS,WAAW,CAAC;GACpC,QAAQ,OAAO,IAAI,CAAC;GACpB,SAAS,OAAO,IAAI,CAAC,IAAI,IAAK,aAAa,OAAO,QAAQ,KAAK,IAAI,MAAO;EAC3E,EAAC;CACJ,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CAOiB,QAAQ,eAAe,KAAK,OAAM,CAAE,CAAC,QAAO,UAAS,CAAC,MAAM,MAAM,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAGpE,cAAc,eAA4C;EAC3E,MAAM,SAAS,KAAK,WAAU;EAC9B,OAAO,KAAK,OAAM,CAAE,CAAC,KAAK,EAAE,OAAO,OAAO,YAAY;GAAE;GAAO;GAAO,OAAO,SAAS,OAAO;EAAI,EAAG;CACtG,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CAOiB,MAAM,gBAAgB,KAAK,UAAS,UAAQ;EAC7D,MAAM,QAAQ,KAAK,OAAM,CAAE,CAAC;EAC5B,IAAI,CAAC,SAAS,MAAM,QAAQ,OAAO;EACnC,MAAM,KAAK,KAAK,SAAQ,CAAE,CAAC,KAAK,MAAK,CAAE,CAAC,QAAQ,KAAK,EAAE,EAAE;EACzD,IAAI,CAAC,IAAI,OAAO;EAChB,OAAO;GAAE,OAAO;IAAE,OAAO,MAAM;IAAO,OAAO,MAAM;IAAM,OAAO,MAAM;GAAK;GAAI,QAAQ;EAAE;CAC3F,CAAC;CAnJU,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAY,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAZ,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAY,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,WAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,UAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,KAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,YAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,YAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,kBAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,gBAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,aAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,SAAA,EAAA,gBAAA,uBAAA;EAAA,MAAA,EAAA,gBAAA,iBAAA;EAAA,aAAA,CAAA;GAAA,cAAA;GAAA,WAAA,CAAA,OAAA;GAAA,aAAA;GAAA,UAAA;EAAA,CAAA;EAAA,UAAA;EAAA,UClDzB;EAmCA,cAAA,CAAA;GAAA,MAAA;GAAA,MDSY;GAAa,UAAA;GAAA,QAAA;IAAA;IAAA;IAAA;IAAA;GAAA;GAAA,SAAA,CAAA,sBAAA,SAAA;EAAA,CAAA;EAAA,eAIR,CAAC;GAAE,SAAS;GAAuB,UAAU;EAAgB,CAAE;EAAC,eAAA,GAAA,kBAAA;CAAA,CAAA;;AAEpE,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAY,YAAA,CAAA;EAXxB,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAgB,eAEX,kBAAkB;GAAI,MAC/B,EAAE,OAAO,iBAAgB;GAAE,SACxB,CAAC,aAAa;GAAC,eAIT,CAAC;IAAE,SAAS;IAAuB,UAAU;GAAgB,CAAE;GAAC,UAAA;EAAA,CAAA;CAmEb,CAAA;CAAA,gBAAA;EAAA,WAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,UAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,KAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,YAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,YAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,kBAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,gBAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,GAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA,sBAAA;EAAA,CAAA;EAAA,SAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,aAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,UAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA,SAAO,EAAA,UAAA,KAAA,CAAA;EAAA,CAAA;CAAA;AAAA,CAAA"}

package/fesm2022/ngwr-charts-radar-chart-testing.mjs

@@ -0,0 +1,98 @@
+import { ComponentHarness, HarnessPredicate } from "@angular/cdk/testing";
+import { WrChartLegendHarness } from "ngwr/charts/chart-legend/testing";
+/**
+* @license
+*
+* Use of this source code is governed by an MIT-style license that can be
+* found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+*/
+var TableRowHarness = class extends ComponentHarness {
+	static hostSelector = ".wr-chart-table tbody tr";
+	async read() {
+		const header = await this.locatorFor("th[scope=\"row\"]")();
+		const cells = await this.locatorForAll("td")();
+		return {
+			header: await header.text(),
+			cells: await Promise.all(cells.map((cell) => cell.text()))
+		};
+	}
+};
+var WrRadarChartHarness = class WrRadarChartHarness extends ComponentHarness {
+	static hostSelector = "wr-radar-chart";
+	static with(options = {}) {
+		return new HarnessPredicate(WrRadarChartHarness, options).addOption("ariaLabel", options.ariaLabel, (harness, label) => HarnessPredicate.stringMatches(harness.getAccessibleName(), label)).addOption("axisLabel", options.axisLabel, async (harness, label) => {
+			for (const axis of await harness.getAxisLabels()) if (await HarnessPredicate.stringMatches(axis, label)) return true;
+			return false;
+		});
+	}
+	async getAccessibleName() {
+		return (await this.locatorFor(".wr-radar-chart__svg")()).getAttribute("aria-label");
+	}
+	async getVariant() {
+		const host = await this.host();
+		if (await host.hasClass("wr-radar-chart--polar-area")) return "polar-area";
+		if (await host.hasClass("wr-radar-chart--polygon")) return "polygon";
+		throw new Error("WrRadarChartHarness.getVariant(): the host carries neither .wr-radar-chart--polygon nor .wr-radar-chart--polar-area. The component writes one unconditionally, so its absence is the bug.");
+	}
+	async getAxisLabels() {
+		const labels = await this.locatorForAll(".wr-radar-chart__axis-label")();
+		return Promise.all(labels.map((label) => label.text()));
+	}
+	async getRingLabels() {
+		const labels = await this.locatorForAll(".wr-radar-chart__ring-label")();
+		return Promise.all(labels.map((label) => label.text()));
+	}
+	async hasGrid() {
+		return await this.locatorForOptional(".wr-radar-chart__ring")() !== null;
+	}
+	async getPolygonCount() {
+		return (await this.locatorForAll(".wr-radar-chart__line")()).length;
+	}
+	async getPolygons() {
+		const lines = await this.locatorForAll(".wr-radar-chart__line")();
+		return Promise.all(lines.map(async (line) => ({
+			color: await line.getAttribute("stroke"),
+			dash: await line.getAttribute("stroke-dasharray") ?? "",
+			closed: /Z\s*$/i.test(await line.getAttribute("d") ?? "")
+		})));
+	}
+	async getAreaCount() {
+		return (await this.locatorForAll(".wr-radar-chart__area")()).length;
+	}
+	async getDotCount() {
+		return (await this.locatorForAll(".wr-radar-chart__dot")()).length;
+	}
+	async hasLegend() {
+		return await this.locatorForOptional(".wr-radar-chart__legend")() !== null;
+	}
+	async getLegendHarness() {
+		const legend = await this.locatorForOptional(WrChartLegendHarness)();
+		if (!legend) throw new Error("WrRadarChartHarness.getLegendHarness(): the chart draws no legend — `showLegend` is off or there are no series. Ask hasLegend() first.");
+		return legend;
+	}
+	async hasDataTable() {
+		return await this.locatorForOptional(".wr-chart-table")() !== null;
+	}
+	async getTableColumns() {
+		await this.assertDataTable("getTableColumns");
+		const headings = await this.locatorForAll(".wr-chart-table thead th[scope=\"col\"]")();
+		return Promise.all(headings.map((heading) => heading.text()));
+	}
+	async getTableRows() {
+		await this.assertDataTable("getTableRows");
+		const rows = await this.locatorForAll(TableRowHarness)();
+		return Promise.all(rows.map((row) => row.read()));
+	}
+	async getSize() {
+		const style = await (await this.locatorFor(".wr-radar-chart__surface")()).getAttribute("style");
+		const match = /width:\s*([\d.]+)px/.exec(style ?? "");
+		if (!match) throw new Error(`WrRadarChartHarness.getSize(): no inline width on .wr-radar-chart__surface (style: "${style ?? ""}"). The component writes one unconditionally, so its absence is the bug rather than a zero.`);
+		return Number.parseFloat(match[1]);
+	}
+	async assertDataTable(method) {
+		if (!await this.hasDataTable()) throw new Error(`WrRadarChartHarness.${method}(): the chart renders no data table — \`dataTable\` is off. Ask hasDataTable() first.`);
+	}
+};
+export { WrRadarChartHarness };
+
+//# sourceMappingURL=ngwr-charts-radar-chart-testing.mjs.map

package/fesm2022/ngwr-charts-radar-chart-testing.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngwr-charts-radar-chart-testing.mjs","names":[],"sources":["../../../projects/lib/charts/radar-chart/testing/wr-radar-chart-harness.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { ComponentHarness, HarnessPredicate } from '@angular/cdk/testing';\n\nimport { WrChartLegendHarness } from 'ngwr/charts/chart-legend/testing';\nimport type { WrRadarVariant } from 'ngwr/charts/radar-chart';\n\nimport type { WrRadarChartHarnessFilters, WrRadarChartPolygon, WrRadarChartTableRow } from './types';\n\n/**\n * One body row of the chart's data table, so its header and cells are read off the row\n * they sit in rather than matched up by position across the whole table.\n */\nclass TableRowHarness extends ComponentHarness {\n  static hostSelector = '.wr-chart-table tbody tr';\n\n  async read(): Promise<WrRadarChartTableRow> {\n    const header = await this.locatorFor('th[scope=\"row\"]')();\n    const cells = await this.locatorForAll('td')();\n    return { header: await header.text(), cells: await Promise.all(cells.map(cell => cell.text())) };\n  }\n}\n\n/**\n * Test harness for `<wr-radar-chart>`.\n *\n * **The polygons' geometry is not read.** Where a vertex lands moves with the scale and\n * the drawing's box, so this harness counts what was drawn and reads what is TEXT: the\n * axis names, the ring values, the legend and the data table. Those are what a reader\n * gets, and they are what breaks when the data wiring does. The one thing it does read off\n * a path is whether the outline CLOSES ({@link getPolygons}): a series with a missing\n * value is drawn open across the gap and never filled, and an outline closed across a\n * value the series does not have is exactly the defect worth catching.\n *\n * **The tooltip cannot be opened from a spec.** It follows the pointer by its angle from\n * the drawing's centre, measured off the drawing's box, which jsdom reports as 0×0 — so\n * there is deliberately no `hoverAxis()`. The numbers it would show are in the data table\n * (`dataTable`), which {@link getTableRows} reads, and which is where a screen reader\n * finds them too.\n *\n * Labels are positioned by the stylesheet from numbers the component writes; with no\n * layout in jsdom there is no method for where a label sits or whether it was ellipsised.\n *\n * @example\n * ```ts\n * const chart = await loader.getHarness(WrRadarChartHarness);\n *\n * expect(await chart.getAxisLabels()).toEqual(['Speed', 'Power', 'Range']);\n * expect(await chart.getPolygonCount()).toBe(2);\n * expect((await chart.getPolygons()).every(p => p.closed)).toBe(true);\n * ```\n *\n * @see https://ngwr.dev/guides/testing\n */\nexport class WrRadarChartHarness extends ComponentHarness {\n  static hostSelector = 'wr-radar-chart';\n\n  /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */\n  static with(options: WrRadarChartHarnessFilters = {}): HarnessPredicate<WrRadarChartHarness> {\n    return new HarnessPredicate(WrRadarChartHarness, options)\n      .addOption('ariaLabel', options.ariaLabel, (harness, label) =>\n        HarnessPredicate.stringMatches(harness.getAccessibleName(), label)\n      )\n      .addOption('axisLabel', options.axisLabel, async (harness, label) => {\n        for (const axis of await harness.getAxisLabels()) {\n          if (await HarnessPredicate.stringMatches(axis, label)) return true;\n        }\n        return false;\n      });\n  }\n\n  /**\n   * The drawing's accessible name — the only name it has. Read off the `<svg>`, which\n   * carries the `img` role, rather than off the surface round it: a name on the wrapper\n   * would take the axis names beside the drawing out of the accessibility tree.\n   */\n  async getAccessibleName(): Promise<string | null> {\n    return (await this.locatorFor('.wr-radar-chart__svg')()).getAttribute('aria-label');\n  }\n\n  /**\n   * How the chart draws its series (`variant`): `'polygon'` or `'polar-area'`, read off\n   * the host's BEM modifier, which the component writes for either one.\n   *\n   * Throws when the host carries neither modifier rather than answering `'polygon'` by\n   * default: a chart that lost its variant binding would otherwise read as the default\n   * exactly when the binding is what broke.\n   */\n  async getVariant(): Promise<WrRadarVariant> {\n    const host = await this.host();\n    if (await host.hasClass('wr-radar-chart--polar-area')) return 'polar-area';\n    if (await host.hasClass('wr-radar-chart--polygon')) return 'polygon';\n    throw new Error(\n      'WrRadarChartHarness.getVariant(): the host carries neither .wr-radar-chart--polygon nor ' +\n        '.wr-radar-chart--polar-area. The component writes one unconditionally, so its absence is the bug.'\n    );\n  }\n\n  /** The axis names round the drawing, clockwise from twelve o'clock, as given — the full text, ellipsised or not. */\n  async getAxisLabels(): Promise<string[]> {\n    const labels = await this.locatorForAll('.wr-radar-chart__axis-label')();\n    return Promise.all(labels.map(label => label.text()));\n  }\n\n  /** The ring values beside the first axis, from the outer ring in. `[]` with `showGrid` off. */\n  async getRingLabels(): Promise<string[]> {\n    const labels = await this.locatorForAll('.wr-radar-chart__ring-label')();\n    return Promise.all(labels.map(label => label.text()));\n  }\n\n  /** Whether the web is drawn (`showGrid`): the rings and the spokes. */\n  async hasGrid(): Promise<boolean> {\n    return (await this.locatorForOptional('.wr-radar-chart__ring')()) !== null;\n  }\n\n  /**\n   * How many series outlines were drawn: one per series shown that has at least one\n   * value, and none at all with fewer than three axes. In the polar-area variant a\n   * series' outline is the one silhouette round its wedges, so this still counts series,\n   * not wedges.\n   *\n   * Worth comparing with the legend: both come from the same list, so a mismatch is a\n   * series filtered out of one of them. The difference by design is a series hidden\n   * through `hiddenSeries`, which keeps its legend row and draws no outline — the legend\n   * harness's `getHidden()` names those.\n   */\n  async getPolygonCount(): Promise<number> {\n    return (await this.locatorForAll('.wr-radar-chart__line')()).length;\n  }\n\n  /**\n   * Every outline drawn, in order: the colour and dash the component wrote on it, and\n   * whether it closes. Closed is read off the path's own closing command, which is what\n   * makes a browser close the shape. In the polar-area variant the outline is the\n   * silhouette round the series' wedges, which always closes, and a missing value is a\n   * missing wedge — which {@link getDotCount} and the data table show instead.\n   */\n  async getPolygons(): Promise<WrRadarChartPolygon[]> {\n    const lines = await this.locatorForAll('.wr-radar-chart__line')();\n    return Promise.all(\n      lines.map(async line => ({\n        color: await line.getAttribute('stroke'),\n        dash: (await line.getAttribute('stroke-dasharray')) ?? '',\n        closed: /Z\\s*$/i.test((await line.getAttribute('d')) ?? ''),\n      }))\n    );\n  }\n\n  /**\n   * How many polygons are filled (`fill`). Only a closed outline is ever filled, so with\n   * `fill` on this is the number of closed outlines in {@link getPolygons}; anything more\n   * is a fill drawn across a missing value. In the polar-area variant it is one per\n   * series drawn, each fill covering that series' wedges.\n   */\n  async getAreaCount(): Promise<number> {\n    return (await this.locatorForAll('.wr-radar-chart__area')()).length;\n  }\n\n  /** How many value dots were drawn across every series (`showDots`). A missing value has none. */\n  async getDotCount(): Promise<number> {\n    return (await this.locatorForAll('.wr-radar-chart__dot')()).length;\n  }\n\n  /** Whether the legend is rendered (`showLegend`, and at least one series). */\n  async hasLegend(): Promise<boolean> {\n    return (await this.locatorForOptional('.wr-radar-chart__legend')()) !== null;\n  }\n\n  /**\n   * The legend, as a {@link WrChartLegendHarness}: each row's name, its key and its hidden\n   * state and, with `toggleableLegend`, the toggles that show and hide a series.\n   *\n   * Throws when the chart draws no legend (`showLegend` off, or no series) rather than\n   * answering with an empty one: {@link hasLegend} is the question for that.\n   */\n  async getLegendHarness(): Promise<WrChartLegendHarness> {\n    const legend = await this.locatorForOptional(WrChartLegendHarness)();\n    if (!legend) {\n      throw new Error(\n        'WrRadarChartHarness.getLegendHarness(): the chart draws no legend — `showLegend` is off or there are no ' +\n          'series. Ask hasLegend() first.'\n      );\n    }\n    return legend;\n  }\n\n  /** Whether the hidden data table is rendered (`dataTable`). */\n  async hasDataTable(): Promise<boolean> {\n    return (await this.locatorForOptional('.wr-chart-table')()) !== null;\n  }\n\n  /**\n   * The data table's column headings: one per series shown, in order. Hidden series\n   * leave the table.\n   *\n   * Throws when the chart renders no table (`dataTable` off) rather than answering with\n   * no columns, which is also what a table of fully hidden series answers.\n   */\n  async getTableColumns(): Promise<string[]> {\n    await this.assertDataTable('getTableColumns');\n    const headings = await this.locatorForAll('.wr-chart-table thead th[scope=\"col\"]')();\n    return Promise.all(headings.map(heading => heading.text()));\n  }\n\n  /**\n   * The data table's rows, one per axis: its name and each series' own value, as a screen\n   * reader walks them. A value outside a fixed `max` is drawn on the edge and tabulated as\n   * itself, and a missing one is `''`.\n   *\n   * Throws when the chart renders no table (`dataTable` off), for the reason\n   * {@link getTableColumns} gives.\n   */\n  async getTableRows(): Promise<WrRadarChartTableRow[]> {\n    await this.assertDataTable('getTableRows');\n    const rows = await this.locatorForAll(TableRowHarness)();\n    return Promise.all(rows.map(row => row.read()));\n  }\n\n  /**\n   * The drawing's diameter in pixels — `size` as the component wrote it — read off the\n   * `style` ATTRIBUTE of the surface.\n   *\n   * NOT `getCssValue()`, which is `getComputedStyle()`: a computed read answers from the\n   * LAID-OUT box, which agrees with the inline value in jsdom and disagrees in a browser,\n   * where the drawing shrinks in a narrow container and sub-pixel rounding moves the rest.\n   * A harness that answers differently in the two places it runs is worse than one that\n   * refuses.\n   */\n  async getSize(): Promise<number> {\n    const style = await (await this.locatorFor('.wr-radar-chart__surface')()).getAttribute('style');\n    const match = /width:\\s*([\\d.]+)px/.exec(style ?? '');\n    if (!match) {\n      throw new Error(\n        `WrRadarChartHarness.getSize(): no inline width on .wr-radar-chart__surface (style: \"${style ?? ''}\"). ` +\n          'The component writes one unconditionally, so its absence is the bug rather than a zero.'\n      );\n    }\n    return Number.parseFloat(match[1]);\n  }\n\n  private async assertDataTable(method: string): Promise<void> {\n    if (!(await this.hasDataTable())) {\n      throw new Error(\n        `WrRadarChartHarness.${method}(): the chart renders no data table — \\`dataTable\\` is off. Ask hasDataTable() first.`\n      );\n    }\n  }\n}\n"],"mappings":"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"}