@ojiepermana/angular 22.1.11 → 22.1.12

package/fesm2022/ojiepermana-angular-chart-radar.mjs

@@ -1,7 +1,425 @@
-export * from '@ojiepermana/angular-chart/radar';
+import { curveCardinalClosed, curveLinearClosed, lineRadial } from 'd3-shape';
+import { max } from 'd3-array';
+import { readNumber, seriesColorVar, ChartContext, resolveChartStyle, ChartThemeSpace, resolveChartMargin, DEFAULT_RADAR_MARGIN_UNITS, setupPolarChart, ChartRovingFocus, ChartMarkFocus, ChartDataTable } from '@ojiepermana/angular/chart/core';
+import * as i0 from '@angular/core';
+import { inject, input, output, computed, Component } from '@angular/core';
 
-// Generated by scripts/gen-umbrella-entrypoints.mjs — do not edit by hand.
+function computeRadarLayout(input) {
+    const { data, axisKey, seriesKeys, innerWidth, innerHeight, levels, curve, grid } = input;
+    const radius = Math.max(0, Math.min(innerWidth, innerHeight) / 2);
+    const centerX = innerWidth / 2;
+    const centerY = innerHeight / 2;
+    if (data.length === 0 || seriesKeys.length === 0 || radius === 0) {
+        return { centerX, centerY, radius, axes: [], levels: [], maxValue: 0, series: [], grid };
+    }
+    const maxValue = input.maxValue ?? max(data, (d) => max(seriesKeys, (k) => readNumber(d, k)) ?? 0) ?? 1;
+    const safeMaxValue = maxValue > 0 ? maxValue : 1;
+    const angleStep = (2 * Math.PI) / data.length;
+    const angleFor = (i) => i * angleStep - Math.PI / 2;
+    const axes = data.map((d, i) => {
+        const angle = angleFor(i);
+        return {
+            name: String(d[axisKey] ?? i),
+            angle,
+            x: Math.cos(angle) * radius,
+            y: Math.sin(angle) * radius,
+        };
+    });
+    const levelValues = Array.from({ length: levels }, (_, index) => {
+        const value = ((index + 1) / levels) * safeMaxValue;
+        const levelRadius = ((index + 1) / levels) * radius;
+        return {
+            value,
+            radius: levelRadius,
+            path: polygonPath(axes.map((axis) => ({
+                x: Math.cos(axis.angle) * levelRadius,
+                y: Math.sin(axis.angle) * levelRadius,
+            }))),
+        };
+    });
+    const curveFactory = curve === 'cardinal' ? curveCardinalClosed : curveLinearClosed;
+    const radial = lineRadial()
+        .angle((point) => point.angle + Math.PI / 2)
+        .radius((point) => (point.value / safeMaxValue) * radius)
+        .curve(curveFactory);
+    const series = seriesKeys.map((seriesKey) => {
+        const points = data.map((datum, index) => {
+            const value = readNumber(datum, seriesKey);
+            const angle = angleFor(index);
+            const pointRadius = (value / safeMaxValue) * radius;
+            return {
+                axis: String(datum[axisKey] ?? index),
+                value,
+                x: Math.cos(angle) * pointRadius,
+                y: Math.sin(angle) * pointRadius,
+            };
+        });
+        return {
+            seriesKey,
+            color: seriesColorVar(seriesKey),
+            path: radial(data.map((datum, index) => ({
+                angle: angleFor(index),
+                value: readNumber(datum, seriesKey),
+            }))) ?? '',
+            points,
+        };
+    });
+    return {
+        centerX,
+        centerY,
+        radius,
+        axes,
+        levels: levelValues,
+        maxValue: safeMaxValue,
+        series,
+        grid,
+    };
+}
+function polygonPath(points) {
+    if (points.length === 0) {
+        return '';
+    }
+    const [first, ...rest] = points;
+    return `M ${first.x} ${first.y} ${rest.map((point) => `L ${point.x} ${point.y}`).join(' ')} Z`;
+}
+
+class RadarChart {
+    root = inject(ChartContext);
+    data = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    axisKey = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "axisKey" }] : /* istanbul ignore next */ []));
+    /**
+     * Presentational style of the chart.
+     *
+     * Replaces `styles`, which read like a CSS styles bag rather than a single
+     * variant. Named `styleVariant` and not `variant` because `ChartBar` already
+     * publishes a `variant` input for its grouped versus stacked axis, and one
+     * name cannot mean two things across the family.
+     */
+    styleVariant = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "styleVariant" }] : /* istanbul ignore next */ []));
+    /**
+     * @deprecated Use `styleVariant`. Still fully supported; when both are bound,
+     *   `styleVariant` wins. Due for removal in the next major.
+     */
+    styles = input('base', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "styles" }] : /* istanbul ignore next */ []));
+    /** The style actually in effect. Bind this, never `styles()`. */
+    chartStyle = resolveChartStyle(this.styleVariant, this.styles);
+    themeSpace = inject(ChartThemeSpace);
+    /**
+     * Plot gutters. Leave it unset and they follow the theme-space density
+     * axis; set it and your numbers win, unchanged, whatever the axis says.
+     */
+    margin = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "margin" }] : /* istanbul ignore next */ []));
+    /** The margin actually in effect. Bind this, never `margin()`. */
+    plotMargin = resolveChartMargin(this.margin, DEFAULT_RADAR_MARGIN_UNITS, this.themeSpace);
+    curve = input('linear', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "curve" }] : /* istanbul ignore next */ []));
+    levels = input(4, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "levels" }] : /* istanbul ignore next */ []));
+    maxValue = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxValue" }] : /* istanbul ignore next */ []));
+    strokeWidth = input(2, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "strokeWidth" }] : /* istanbul ignore next */ []));
+    fillOpacity = input(0.2, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fillOpacity" }] : /* istanbul ignore next */ []));
+    showLabels = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showLabels" }] : /* istanbul ignore next */ []));
+    showDots = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showDots" }] : /* istanbul ignore next */ []));
+    dotRadius = input(3, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dotRadius" }] : /* istanbul ignore next */ []));
+    grid = input('circle', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "grid" }] : /* istanbul ignore next */ []));
+    gridFilled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "gridFilled" }] : /* istanbul ignore next */ []));
+    showAxes = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showAxes" }] : /* istanbul ignore next */ []));
+    linesOnly = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "linesOnly" }] : /* istanbul ignore next */ []));
+    /**
+     * Emitted when a dot is activated by pointer or keyboard. Radar was the one
+     * chart family a keyboard user could focus but never operate.
+     */
+    pointClick = output();
+    polar = setupPolarChart({ margin: () => this.plotMargin() });
+    layout = computed(() => computeRadarLayout({
+        data: this.data(),
+        axisKey: this.axisKey(),
+        seriesKeys: this.root.visibleSeriesKeys(),
+        innerWidth: this.polar.innerWidth(),
+        innerHeight: this.polar.innerHeight(),
+        maxValue: this.maxValue(),
+        levels: this.levels(),
+        curve: this.curve(),
+        grid: this.grid(),
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    ariaSummary = computed(() => {
+        const keys = this.root.visibleSeriesKeys();
+        return `Radar chart, ${this.data().length} axes, ${keys.length} series.`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaSummary" }] : /* istanbul ignore next */ []));
+    dataColumns = computed(() => [
+        this.axisKey(),
+        ...this.root.visibleSeriesKeys(),
+    ], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataColumns" }] : /* istanbul ignore next */ []));
+    gridFill() {
+        return this.gridFilled() ? 'hsl(var(--muted))' : 'none';
+    }
+    gridFillOpacity(levelIndex) {
+        return this.gridFilled() ? Math.max(0.06, 0.18 - levelIndex * 0.02) : null;
+    }
+    dotAriaLabel(seriesKey, p) {
+        const label = this.polar.seriesLabel(seriesKey);
+        return `${label} at ${p.axis}: ${p.value}`;
+    }
+    emitClick(seriesKey, point, datumIndex) {
+        this.pointClick.emit({
+            seriesKey,
+            datumIndex,
+            category: point.axis,
+            value: point.value,
+            datum: this.data()[datumIndex],
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: RadarChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: RadarChart, isStandalone: true, selector: "ChartRadar", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, axisKey: { classPropertyName: "axisKey", publicName: "axisKey", isSignal: true, isRequired: true, transformFunction: null }, styleVariant: { classPropertyName: "styleVariant", publicName: "styleVariant", isSignal: true, isRequired: false, transformFunction: null }, styles: { classPropertyName: "styles", publicName: "styles", isSignal: true, isRequired: false, transformFunction: null }, margin: { classPropertyName: "margin", publicName: "margin", isSignal: true, isRequired: false, transformFunction: null }, curve: { classPropertyName: "curve", publicName: "curve", isSignal: true, isRequired: false, transformFunction: null }, levels: { classPropertyName: "levels", publicName: "levels", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, fillOpacity: { classPropertyName: "fillOpacity", publicName: "fillOpacity", isSignal: true, isRequired: false, transformFunction: null }, showLabels: { classPropertyName: "showLabels", publicName: "showLabels", isSignal: true, isRequired: false, transformFunction: null }, showDots: { classPropertyName: "showDots", publicName: "showDots", isSignal: true, isRequired: false, transformFunction: null }, dotRadius: { classPropertyName: "dotRadius", publicName: "dotRadius", isSignal: true, isRequired: false, transformFunction: null }, grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: false, transformFunction: null }, gridFilled: { classPropertyName: "gridFilled", publicName: "gridFilled", isSignal: true, isRequired: false, transformFunction: null }, showAxes: { classPropertyName: "showAxes", publicName: "showAxes", isSignal: true, isRequired: false, transformFunction: null }, linesOnly: { classPropertyName: "linesOnly", publicName: "linesOnly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pointClick: "pointClick" }, host: { properties: { "attr.data-style": "chartStyle()" }, classAttribute: "relative block h-full w-full" }, ngImport: i0, template: `
+    <svg:svg
+      ChartRovingFocus
+      class="block h-full w-full overflow-visible"
+      [attr.viewBox]="polar.viewBox()"
+      preserveAspectRatio="xMidYMid meet"
+      role="img"
+      [attr.aria-label]="ariaSummary()"
+    >
+      <svg:g [attr.transform]="polar.innerTransform()">
+        <svg:g
+          class="chart-radar"
+          [attr.transform]="'translate(' + layout().centerX + ',' + layout().centerY + ')'"
+        >
+          @if (layout().grid !== 'none') {
+            @for (level of layout().levels; track level.value; let levelIndex = $index) {
+              @if (layout().grid === 'circle') {
+                <svg:circle
+                  class="chart-radar-level stroke-border"
+                  [attr.fill]="gridFill()"
+                  [attr.fill-opacity]="gridFillOpacity(levelIndex)"
+                  stroke-dasharray="2 2"
+                  cx="0"
+                  cy="0"
+                  [attr.r]="level.radius"
+                />
+              } @else {
+                <svg:path
+                  class="chart-radar-level stroke-border"
+                  [attr.d]="level.path"
+                  [attr.fill]="gridFill()"
+                  [attr.fill-opacity]="gridFillOpacity(levelIndex)"
+                  stroke-dasharray="2 2"
+                />
+              }
+            }
+          }
+          @if (showAxes()) {
+            @for (axis of layout().axes; track axis.name) {
+              <svg:line
+                class="chart-radar-axis stroke-border"
+                x1="0"
+                y1="0"
+                [attr.x2]="axis.x"
+                [attr.y2]="axis.y"
+              />
+              @if (showLabels()) {
+                <svg:text
+                  class="chart-radar-axis-label fill-muted-foreground text-2xs"
+                  text-anchor="middle"
+                  dominant-baseline="middle"
+                  [attr.x]="axis.x * 1.12"
+                  [attr.y]="axis.y * 1.12"
+                >
+                  {{ axis.name }}
+                </svg:text>
+              }
+            }
+          }
+          @for (s of layout().series; track s.seriesKey) {
+            <svg:path
+              class="chart-radar-series"
+              [attr.d]="s.path"
+              [attr.stroke]="s.color"
+              [attr.fill]="linesOnly() ? 'none' : s.color"
+              [attr.fill-opacity]="linesOnly() ? null : fillOpacity()"
+              [attr.stroke-width]="strokeWidth()"
+              stroke-linejoin="round"
+            />
+            @if (showDots()) {
+              @for (p of s.points; track p.axis; let i = $index) {
+                <svg:circle
+                  ChartMarkFocus
+                  class="chart-radar-dot cursor-pointer"
+                  [attr.cx]="p.x"
+                  [attr.cy]="p.y"
+                  [attr.r]="dotRadius()"
+                  [attr.fill]="s.color"
+                  tabindex="0"
+                  [attr.aria-label]="dotAriaLabel(s.seriesKey, p)"
+                  role="img"
+                  (pointerenter)="
+                    polar.setActivePoint($event, { seriesKey: s.seriesKey, datumIndex: i })
+                  "
+                  (pointermove)="
+                    polar.setActivePoint($event, { seriesKey: s.seriesKey, datumIndex: i })
+                  "
+                  (pointerleave)="polar.clearActivePoint()"
+                  (focus)="polar.setActivePoint($event, { seriesKey: s.seriesKey, datumIndex: i })"
+                  (blur)="polar.clearActivePoint()"
+                  (click)="emitClick(s.seriesKey, p, i)"
+                  (keydown.enter)="emitClick(s.seriesKey, p, i)"
+                  (keydown.space)="emitClick(s.seriesKey, p, i); $event.preventDefault()"
+                />
+              }
+            }
+          }
+        </svg:g>
+        <ng-content />
+      </svg:g>
+    </svg:svg>
+    <ng-content select="ChartTooltip" />
+    <ng-content select="ChartLegend" />
+    <ChartDataTable
+      [data]="data()"
+      [columns]="dataColumns()"
+      [rowHeaderKey]="axisKey()"
+      [label]="ariaSummary()"
+    />
+  `, isInline: true, dependencies: [{ kind: "directive", type: ChartRovingFocus, selector: "svg[ChartRovingFocus]" }, { kind: "directive", type: ChartMarkFocus, selector: "[ChartMarkFocus]" }, { kind: "component", type: ChartDataTable, selector: "ChartDataTable", inputs: ["data", "columns", "label", "rowHeaderKey"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: RadarChart, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ChartRadar',
+                    imports: [ChartRovingFocus, ChartMarkFocus, ChartDataTable],
+                    host: { class: 'relative block h-full w-full', '[attr.data-style]': 'chartStyle()' },
+                    template: `
+    <svg:svg
+      ChartRovingFocus
+      class="block h-full w-full overflow-visible"
+      [attr.viewBox]="polar.viewBox()"
+      preserveAspectRatio="xMidYMid meet"
+      role="img"
+      [attr.aria-label]="ariaSummary()"
+    >
+      <svg:g [attr.transform]="polar.innerTransform()">
+        <svg:g
+          class="chart-radar"
+          [attr.transform]="'translate(' + layout().centerX + ',' + layout().centerY + ')'"
+        >
+          @if (layout().grid !== 'none') {
+            @for (level of layout().levels; track level.value; let levelIndex = $index) {
+              @if (layout().grid === 'circle') {
+                <svg:circle
+                  class="chart-radar-level stroke-border"
+                  [attr.fill]="gridFill()"
+                  [attr.fill-opacity]="gridFillOpacity(levelIndex)"
+                  stroke-dasharray="2 2"
+                  cx="0"
+                  cy="0"
+                  [attr.r]="level.radius"
+                />
+              } @else {
+                <svg:path
+                  class="chart-radar-level stroke-border"
+                  [attr.d]="level.path"
+                  [attr.fill]="gridFill()"
+                  [attr.fill-opacity]="gridFillOpacity(levelIndex)"
+                  stroke-dasharray="2 2"
+                />
+              }
+            }
+          }
+          @if (showAxes()) {
+            @for (axis of layout().axes; track axis.name) {
+              <svg:line
+                class="chart-radar-axis stroke-border"
+                x1="0"
+                y1="0"
+                [attr.x2]="axis.x"
+                [attr.y2]="axis.y"
+              />
+              @if (showLabels()) {
+                <svg:text
+                  class="chart-radar-axis-label fill-muted-foreground text-2xs"
+                  text-anchor="middle"
+                  dominant-baseline="middle"
+                  [attr.x]="axis.x * 1.12"
+                  [attr.y]="axis.y * 1.12"
+                >
+                  {{ axis.name }}
+                </svg:text>
+              }
+            }
+          }
+          @for (s of layout().series; track s.seriesKey) {
+            <svg:path
+              class="chart-radar-series"
+              [attr.d]="s.path"
+              [attr.stroke]="s.color"
+              [attr.fill]="linesOnly() ? 'none' : s.color"
+              [attr.fill-opacity]="linesOnly() ? null : fillOpacity()"
+              [attr.stroke-width]="strokeWidth()"
+              stroke-linejoin="round"
+            />
+            @if (showDots()) {
+              @for (p of s.points; track p.axis; let i = $index) {
+                <svg:circle
+                  ChartMarkFocus
+                  class="chart-radar-dot cursor-pointer"
+                  [attr.cx]="p.x"
+                  [attr.cy]="p.y"
+                  [attr.r]="dotRadius()"
+                  [attr.fill]="s.color"
+                  tabindex="0"
+                  [attr.aria-label]="dotAriaLabel(s.seriesKey, p)"
+                  role="img"
+                  (pointerenter)="
+                    polar.setActivePoint($event, { seriesKey: s.seriesKey, datumIndex: i })
+                  "
+                  (pointermove)="
+                    polar.setActivePoint($event, { seriesKey: s.seriesKey, datumIndex: i })
+                  "
+                  (pointerleave)="polar.clearActivePoint()"
+                  (focus)="polar.setActivePoint($event, { seriesKey: s.seriesKey, datumIndex: i })"
+                  (blur)="polar.clearActivePoint()"
+                  (click)="emitClick(s.seriesKey, p, i)"
+                  (keydown.enter)="emitClick(s.seriesKey, p, i)"
+                  (keydown.space)="emitClick(s.seriesKey, p, i); $event.preventDefault()"
+                />
+              }
+            }
+          }
+        </svg:g>
+        <ng-content />
+      </svg:g>
+    </svg:svg>
+    <ng-content select="ChartTooltip" />
+    <ng-content select="ChartLegend" />
+    <ChartDataTable
+      [data]="data()"
+      [columns]="dataColumns()"
+      [rowHeaderKey]="axisKey()"
+      [label]="ariaSummary()"
+    />
+  `,
+                }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], axisKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "axisKey", required: true }] }], styleVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleVariant", required: false }] }], styles: [{ type: i0.Input, args: [{ isSignal: true, alias: "styles", required: false }] }], margin: [{ type: i0.Input, args: [{ isSignal: true, alias: "margin", required: false }] }], curve: [{ type: i0.Input, args: [{ isSignal: true, alias: "curve", required: false }] }], levels: [{ type: i0.Input, args: [{ isSignal: true, alias: "levels", required: false }] }], maxValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxValue", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], fillOpacity: [{ type: i0.Input, args: [{ isSignal: true, alias: "fillOpacity", required: false }] }], showLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabels", required: false }] }], showDots: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDots", required: false }] }], dotRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "dotRadius", required: false }] }], grid: [{ type: i0.Input, args: [{ isSignal: true, alias: "grid", required: false }] }], gridFilled: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridFilled", required: false }] }], showAxes: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAxes", required: false }] }], linesOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "linesOnly", required: false }] }], pointClick: [{ type: i0.Output, args: ["pointClick"] }] } });
 
 /**
  * Generated bundle index. Do not edit.
- */
+ */
+
+export { RadarChart, computeRadarLayout };