@ojiepermana/angular 22.1.10 → 22.1.12

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

@@ -1,7 +1,298 @@
-export * from '@ojiepermana/angular-chart/line';
+import * as i0 from '@angular/core';
+import { inject, input, output, computed, Component } from '@angular/core';
+import { ChartContext, CartesianContext, CategoricalViewportContext, resolveChartStyle, ChartThemeSpace, resolveChartMargin, DEFAULT_CARTESIAN_MARGIN_UNITS, setupCartesianChart, provideCartesianFromLineLayout, computeLineLayout, resolveSeriesColor, ChartRovingFocus, ChartMarkFocus, ChartDataTable } from '@ojiepermana/angular/chart/core';
+export { buildCartesianScales, cloneLinear, computeAreaLayout, computeLineLayout, pointToBandAdapter, provideCartesianFromLineLayout } from '@ojiepermana/angular/chart/core';
+import { ChartPointerTracker } from '@ojiepermana/angular/chart/primitives';
 
-// Generated by scripts/gen-umbrella-entrypoints.mjs — do not edit by hand.
+const defaultLineValueFormatter = (value) => `${value}`;
+class LineChart {
+    root = inject(ChartContext);
+    cart = inject(CartesianContext);
+    viewport = inject(CategoricalViewportContext);
+    data = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    xKey = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "xKey" }] : /* istanbul ignore next */ []));
+    orientation = input('vertical', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* 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);
+    curve = input('monotone', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "curve" }] : /* istanbul ignore next */ []));
+    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_CARTESIAN_MARGIN_UNITS, this.themeSpace);
+    strokeWidth = input(2, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "strokeWidth" }] : /* 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 */ []));
+    dotColorKey = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dotColorKey" }] : /* istanbul ignore next */ []));
+    dotStrokeColor = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dotStrokeColor" }] : /* istanbul ignore next */ []));
+    dotStrokeWidth = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dotStrokeWidth" }] : /* istanbul ignore next */ []));
+    showValueLabels = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showValueLabels" }] : /* istanbul ignore next */ []));
+    valueLabelFormat = input(defaultLineValueFormatter, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueLabelFormat" }] : /* istanbul ignore next */ []));
+    pointClick = output();
+    /**
+     * The shared cartesian scaffolding: geometry, the index window, the layout
+     * effect, and the click plus active-point plus aria-label handlers.
+     *
+     * Declared before `layout` because the layout computed reads its geometry.
+     */
+    cx = setupCartesianChart({
+        data: () => this.data(),
+        margin: () => this.plotMargin(),
+        cartesian: { context: this.cart, orientation: () => this.orientation() },
+        viewport: this.viewport,
+        publishLayout: (inner) => provideCartesianFromLineLayout(this.cart, this.layout(), this.orientation(), inner.width, inner.height),
+        click: {
+            emit: (event) => this.pointClick.emit(event),
+            payload: (point, datumIndex, datum) => ({
+                seriesKey: point.seriesKey,
+                datumIndex,
+                category: point.category,
+                value: point.value,
+                datum,
+            }),
+        },
+        ariaLabel: (point, label) => `${label} at ${point.category}: ${point.value}`,
+    });
+    layout = computed(() => computeLineLayout({
+        data: this.cx.visibleData(),
+        xKey: this.xKey(),
+        seriesKeys: this.root.visibleSeriesKeys(),
+        orientation: this.orientation(),
+        innerWidth: this.cx.innerWidth(),
+        innerHeight: this.cx.innerHeight(),
+        curve: this.curve(),
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    series = computed(() => this.layout().series, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "series" }] : /* istanbul ignore next */ []));
+    ariaSummary = computed(() => {
+        const keys = this.root.visibleSeriesKeys();
+        return `Line chart, ${this.cx.visibleData().length} points, ${keys.length} series: ${keys.join(', ')}.`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaSummary" }] : /* istanbul ignore next */ []));
+    dataColumns = computed(() => [this.xKey(), ...this.root.visibleSeriesKeys()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataColumns" }] : /* istanbul ignore next */ []));
+    dotFill(point, fallbackColor) {
+        const colorKey = this.dotColorKey();
+        if (!colorKey) {
+            return fallbackColor;
+        }
+        // `point.datumIndex` is VISIBLE-relative here, unlike in emitClick where it is
+        // made absolute. The dot being painted is the one in the current window.
+        return resolveSeriesColor(this.cx.visibleData()[point.datumIndex]?.[colorKey], fallbackColor);
+    }
+    formatValueLabel(point) {
+        return this.valueLabelFormat()(point.value);
+    }
+    labelX(point) {
+        return this.orientation() === 'vertical' ? point.x : point.x + this.dotRadius() + 6;
+    }
+    labelY(point) {
+        return this.orientation() === 'vertical' ? point.y - this.dotRadius() - 8 : point.y;
+    }
+    labelAnchor() {
+        return this.orientation() === 'vertical' ? 'middle' : 'start';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LineChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: LineChart, isStandalone: true, selector: "ChartLine", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, xKey: { classPropertyName: "xKey", publicName: "xKey", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, styleVariant: { classPropertyName: "styleVariant", publicName: "styleVariant", isSignal: true, isRequired: false, transformFunction: null }, styles: { classPropertyName: "styles", publicName: "styles", isSignal: true, isRequired: false, transformFunction: null }, curve: { classPropertyName: "curve", publicName: "curve", isSignal: true, isRequired: false, transformFunction: null }, margin: { classPropertyName: "margin", publicName: "margin", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", 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 }, dotColorKey: { classPropertyName: "dotColorKey", publicName: "dotColorKey", isSignal: true, isRequired: false, transformFunction: null }, dotStrokeColor: { classPropertyName: "dotStrokeColor", publicName: "dotStrokeColor", isSignal: true, isRequired: false, transformFunction: null }, dotStrokeWidth: { classPropertyName: "dotStrokeWidth", publicName: "dotStrokeWidth", isSignal: true, isRequired: false, transformFunction: null }, showValueLabels: { classPropertyName: "showValueLabels", publicName: "showValueLabels", isSignal: true, isRequired: false, transformFunction: null }, valueLabelFormat: { classPropertyName: "valueLabelFormat", publicName: "valueLabelFormat", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pointClick: "pointClick" }, host: { properties: { "attr.data-style": "chartStyle()" }, classAttribute: "relative block h-full w-full" }, providers: [CartesianContext, CategoricalViewportContext], ngImport: i0, template: `
+    <svg:svg
+      ChartPointerTracker
+      ChartRovingFocus
+      class="block h-full w-full overflow-visible"
+      [attr.viewBox]="cx.viewBox()"
+      preserveAspectRatio="none"
+      role="img"
+      [attr.aria-label]="ariaSummary()"
+    >
+      <svg:g [attr.transform]="cx.innerTransform()">
+        <!-- The brush hitbox is slotted first so it sits UNDER the marks: it is
+             a hit-testable rect, and on top it swallowed every click, hover and
+             cursor affordance the dots publish. -->
+        <ng-content select="svg:g[ChartBrush]" />
+        <ng-content select="svg\\:g[ChartGrid]" />
+        <svg:g class="chart-lines">
+          @for (s of series(); track s.seriesKey) {
+            <svg:path
+              class="chart-line"
+              fill="none"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              [attr.stroke]="s.color"
+              [attr.stroke-width]="strokeWidth()"
+              [attr.d]="s.linePath"
+            />
+            @if (showDots()) {
+              @for (p of s.points; track p.datumIndex) {
+                <svg:circle
+                  ChartMarkFocus
+                  class="chart-dot cursor-pointer"
+                  [attr.cx]="p.x"
+                  [attr.cy]="p.y"
+                  [attr.r]="dotRadius()"
+                  [attr.fill]="dotFill(p, s.color)"
+                  [attr.stroke]="dotStrokeColor()"
+                  [attr.stroke-width]="dotStrokeWidth() || null"
+                  [attr.aria-label]="cx.pointAriaLabel(p)"
+                  role="img"
+                  tabindex="0"
+                  (focus)="cx.setActivePoint($event, p)"
+                  (blur)="cx.clearActivePoint()"
+                  (click)="cx.emitClick(p)"
+                  (keydown.enter)="cx.emitClick(p)"
+                  (keydown.space)="cx.emitClick(p); $event.preventDefault()"
+                />
+                @if (showValueLabels()) {
+                  <svg:text
+                    class="chart-line-value pointer-events-none fill-muted-foreground text-2xs"
+                    [attr.x]="labelX(p)"
+                    [attr.y]="labelY(p)"
+                    [attr.text-anchor]="labelAnchor()"
+                    dominant-baseline="middle"
+                  >
+                    {{ formatValueLabel(p) }}
+                  </svg:text>
+                }
+              }
+            }
+          }
+        </svg:g>
+        <ng-content select="svg\\:g[ChartAxisX]" />
+        <ng-content select="svg\\:g[ChartAxisY]" />
+        <ng-content select="svg\\:g[ChartCrosshair]" />
+      </svg:g>
+    </svg:svg>
+    <ng-content select="ChartTooltip" />
+    <ng-content select="ChartLegend" />
+    <ng-content select="ChartZoomControls" />
+    <ChartDataTable
+      [data]="cx.visibleData()"
+      [columns]="dataColumns()"
+      [rowHeaderKey]="xKey()"
+      [label]="ariaSummary()"
+    />
+  `, isInline: true, dependencies: [{ kind: "directive", type: ChartPointerTracker, selector: "svg:svg[ChartPointerTracker]" }, { 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: LineChart, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ChartLine',
+                    providers: [CartesianContext, CategoricalViewportContext],
+                    imports: [ChartPointerTracker, ChartRovingFocus, ChartMarkFocus, ChartDataTable],
+                    host: { class: 'relative block h-full w-full', '[attr.data-style]': 'chartStyle()' },
+                    template: `
+    <svg:svg
+      ChartPointerTracker
+      ChartRovingFocus
+      class="block h-full w-full overflow-visible"
+      [attr.viewBox]="cx.viewBox()"
+      preserveAspectRatio="none"
+      role="img"
+      [attr.aria-label]="ariaSummary()"
+    >
+      <svg:g [attr.transform]="cx.innerTransform()">
+        <!-- The brush hitbox is slotted first so it sits UNDER the marks: it is
+             a hit-testable rect, and on top it swallowed every click, hover and
+             cursor affordance the dots publish. -->
+        <ng-content select="svg:g[ChartBrush]" />
+        <ng-content select="svg\\:g[ChartGrid]" />
+        <svg:g class="chart-lines">
+          @for (s of series(); track s.seriesKey) {
+            <svg:path
+              class="chart-line"
+              fill="none"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              [attr.stroke]="s.color"
+              [attr.stroke-width]="strokeWidth()"
+              [attr.d]="s.linePath"
+            />
+            @if (showDots()) {
+              @for (p of s.points; track p.datumIndex) {
+                <svg:circle
+                  ChartMarkFocus
+                  class="chart-dot cursor-pointer"
+                  [attr.cx]="p.x"
+                  [attr.cy]="p.y"
+                  [attr.r]="dotRadius()"
+                  [attr.fill]="dotFill(p, s.color)"
+                  [attr.stroke]="dotStrokeColor()"
+                  [attr.stroke-width]="dotStrokeWidth() || null"
+                  [attr.aria-label]="cx.pointAriaLabel(p)"
+                  role="img"
+                  tabindex="0"
+                  (focus)="cx.setActivePoint($event, p)"
+                  (blur)="cx.clearActivePoint()"
+                  (click)="cx.emitClick(p)"
+                  (keydown.enter)="cx.emitClick(p)"
+                  (keydown.space)="cx.emitClick(p); $event.preventDefault()"
+                />
+                @if (showValueLabels()) {
+                  <svg:text
+                    class="chart-line-value pointer-events-none fill-muted-foreground text-2xs"
+                    [attr.x]="labelX(p)"
+                    [attr.y]="labelY(p)"
+                    [attr.text-anchor]="labelAnchor()"
+                    dominant-baseline="middle"
+                  >
+                    {{ formatValueLabel(p) }}
+                  </svg:text>
+                }
+              }
+            }
+          }
+        </svg:g>
+        <ng-content select="svg\\:g[ChartAxisX]" />
+        <ng-content select="svg\\:g[ChartAxisY]" />
+        <ng-content select="svg\\:g[ChartCrosshair]" />
+      </svg:g>
+    </svg:svg>
+    <ng-content select="ChartTooltip" />
+    <ng-content select="ChartLegend" />
+    <ng-content select="ChartZoomControls" />
+    <ChartDataTable
+      [data]="cx.visibleData()"
+      [columns]="dataColumns()"
+      [rowHeaderKey]="xKey()"
+      [label]="ariaSummary()"
+    />
+  `,
+                }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], xKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "xKey", required: true }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], styleVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleVariant", required: false }] }], styles: [{ type: i0.Input, args: [{ isSignal: true, alias: "styles", required: false }] }], curve: [{ type: i0.Input, args: [{ isSignal: true, alias: "curve", required: false }] }], margin: [{ type: i0.Input, args: [{ isSignal: true, alias: "margin", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], showDots: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDots", required: false }] }], dotRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "dotRadius", required: false }] }], dotColorKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "dotColorKey", required: false }] }], dotStrokeColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "dotStrokeColor", required: false }] }], dotStrokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "dotStrokeWidth", required: false }] }], showValueLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValueLabels", required: false }] }], valueLabelFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueLabelFormat", required: false }] }], pointClick: [{ type: i0.Output, args: ["pointClick"] }] } });
 
 /**
  * Generated bundle index. Do not edit.
- */
+ */
+
+export { LineChart };

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

@@ -1,7 +1,295 @@
-export * from '@ojiepermana/angular-chart/pie';
+import { pie, arc } from 'd3-shape';
+import { readNumber, seriesColorVar, ChartContext, resolveChartStyle, ChartThemeRadius, ChartThemeSpace, resolveChartMargin, DEFAULT_POLAR_MARGIN_UNITS, setupPolarChart, ChartRovingFocus, ChartMarkFocus, ChartDataTable } from '@ojiepermana/angular/chart/core';
+import * as i0 from '@angular/core';
+import { inject, input, computed, output, Component } from '@angular/core';
 
-// Generated by scripts/gen-umbrella-entrypoints.mjs — do not edit by hand.
+function computePieLayout(input) {
+    const { data, valueKey, nameKey, seriesKeys, hiddenSeriesKeys, innerWidth, innerHeight, innerRadius, padAngle, cornerRadius, startAngle, endAngle, activeIndex, activeOffset = 12, } = input;
+    const outerRadius = Math.max(0, Math.min(innerWidth, innerHeight) / 2);
+    const centerX = innerWidth / 2;
+    const centerY = innerHeight / 2;
+    // `datumIndex` is carried through the filter, so a slice keeps addressing the
+    // row it came from however many siblings the legend has hidden.
+    const entries = data
+        .map((datum, datumIndex) => ({
+        datum,
+        datumIndex,
+        seriesKey: seriesKeys?.[datumIndex] ?? String(datum[nameKey] ?? datumIndex),
+    }))
+        .filter((entry) => !hiddenSeriesKeys?.has(entry.seriesKey));
+    if (entries.length === 0 || outerRadius === 0) {
+        return { slices: [], centerX, centerY, outerRadius };
+    }
+    const pieGen = pie()
+        .value((entry) => readNumber(entry.datum, valueKey))
+        .sort(null)
+        .padAngle(padAngle)
+        .startAngle(startAngle)
+        .endAngle(endAngle);
+    const arcGen = arc()
+        .innerRadius(innerRadius)
+        .outerRadius(outerRadius)
+        .cornerRadius(cornerRadius);
+    const arcs = pieGen(entries);
+    const slices = arcs.map((a) => {
+        const { datum: d, datumIndex, seriesKey: key } = a.data;
+        const centroid = arcGen.centroid(a);
+        const magnitude = Math.hypot(centroid[0], centroid[1]) || 1;
+        const isActive = datumIndex === activeIndex;
+        return {
+            seriesKey: key,
+            name: String(d[nameKey] ?? key),
+            value: readNumber(d, valueKey),
+            datumIndex,
+            color: seriesColorVar(key),
+            arcPath: arcGen(a) ?? '',
+            centroid,
+            startAngle: a.startAngle,
+            endAngle: a.endAngle,
+            translateX: isActive ? (centroid[0] / magnitude) * activeOffset : 0,
+            translateY: isActive ? (centroid[1] / magnitude) * activeOffset : 0,
+        };
+    });
+    return { slices, centerX, centerY, outerRadius };
+}
+
+class PieChart {
+    root = inject(ChartContext);
+    data = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    valueKey = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueKey" }] : /* istanbul ignore next */ []));
+    nameKey = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nameKey" }] : /* istanbul ignore next */ []));
+    seriesKeys = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "seriesKeys" }] : /* 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);
+    themeRadius = inject(ChartThemeRadius);
+    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_POLAR_MARGIN_UNITS, this.themeSpace);
+    innerRadius = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "innerRadius" }] : /* istanbul ignore next */ []));
+    padAngle = input(0.01, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "padAngle" }] : /* istanbul ignore next */ []));
+    /**
+     * Slice corner radius. Unset now means "follow the theme-radius axis", the
+     * same contract `ChartBar` already offers, so a pie picks up the app's shape
+     * language instead of being the one chart that stays sharp.
+     *
+     * Zero is still available, and still means square corners: it is a real value,
+     * not the absence of one, which is why the default moved to `null`.
+     */
+    cornerRadius = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cornerRadius" }] : /* istanbul ignore next */ []));
+    /** The slice corner radius actually in effect. */
+    sliceCornerRadius = computed(() => this.cornerRadius() ?? this.themeRadius.px(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sliceCornerRadius" }] : /* istanbul ignore next */ []));
+    startAngle = input(-Math.PI / 2, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "startAngle" }] : /* istanbul ignore next */ []));
+    endAngle = input((3 * Math.PI) / 2, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "endAngle" }] : /* istanbul ignore next */ []));
+    showLabels = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showLabels" }] : /* istanbul ignore next */ []));
+    activeIndex = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    activeOffset = input(12, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeOffset" }] : /* istanbul ignore next */ []));
+    sliceClick = output();
+    polar = setupPolarChart({ margin: () => this.plotMargin() });
+    layout = computed(() => computePieLayout({
+        data: this.data(),
+        valueKey: this.valueKey(),
+        nameKey: this.nameKey(),
+        seriesKeys: this.seriesKeys(),
+        hiddenSeriesKeys: this.root.hiddenSeries(),
+        innerWidth: this.polar.innerWidth(),
+        innerHeight: this.polar.innerHeight(),
+        innerRadius: this.innerRadius(),
+        padAngle: this.padAngle(),
+        cornerRadius: this.sliceCornerRadius(),
+        startAngle: this.startAngle(),
+        endAngle: this.endAngle(),
+        activeIndex: this.activeIndex(),
+        activeOffset: this.activeOffset(),
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    ariaSummary = computed(() => `Pie chart, ${this.layout().slices.length} slices.`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaSummary" }] : /* istanbul ignore next */ []));
+    dataColumns = computed(() => [this.nameKey(), this.valueKey()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataColumns" }] : /* istanbul ignore next */ []));
+    sliceAriaLabel(s) {
+        return `${s.name}: ${s.value}`;
+    }
+    sliceTransform(s) {
+        return s.translateX || s.translateY ? `translate(${s.translateX}, ${s.translateY})` : null;
+    }
+    emitClick(s) {
+        this.sliceClick.emit({
+            seriesKey: s.seriesKey,
+            datumIndex: s.datumIndex,
+            // `category` is the shared name for what this family calls `name`; both are
+            // emitted so a handler written against either shape works.
+            category: s.name,
+            name: s.name,
+            value: s.value,
+            datum: this.data()[s.datumIndex],
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: PieChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: PieChart, isStandalone: true, selector: "ChartPie", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, valueKey: { classPropertyName: "valueKey", publicName: "valueKey", isSignal: true, isRequired: true, transformFunction: null }, nameKey: { classPropertyName: "nameKey", publicName: "nameKey", isSignal: true, isRequired: true, transformFunction: null }, seriesKeys: { classPropertyName: "seriesKeys", publicName: "seriesKeys", isSignal: true, isRequired: false, 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 }, innerRadius: { classPropertyName: "innerRadius", publicName: "innerRadius", isSignal: true, isRequired: false, transformFunction: null }, padAngle: { classPropertyName: "padAngle", publicName: "padAngle", isSignal: true, isRequired: false, transformFunction: null }, cornerRadius: { classPropertyName: "cornerRadius", publicName: "cornerRadius", isSignal: true, isRequired: false, transformFunction: null }, startAngle: { classPropertyName: "startAngle", publicName: "startAngle", isSignal: true, isRequired: false, transformFunction: null }, endAngle: { classPropertyName: "endAngle", publicName: "endAngle", isSignal: true, isRequired: false, transformFunction: null }, showLabels: { classPropertyName: "showLabels", publicName: "showLabels", isSignal: true, isRequired: false, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null }, activeOffset: { classPropertyName: "activeOffset", publicName: "activeOffset", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sliceClick: "sliceClick" }, 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 [attr.transform]="'translate(' + layout().centerX + ',' + layout().centerY + ')'">
+          @for (s of layout().slices; track s.seriesKey) {
+            <svg:path
+              ChartMarkFocus
+              class="chart-slice cursor-pointer transition-opacity hover:opacity-80"
+              [attr.d]="s.arcPath"
+              [attr.fill]="s.color"
+              [attr.transform]="sliceTransform(s)"
+              [attr.aria-label]="sliceAriaLabel(s)"
+              role="img"
+              tabindex="0"
+              (click)="emitClick(s)"
+              (keydown.enter)="emitClick(s)"
+              (keydown.space)="emitClick(s); $event.preventDefault()"
+              (pointerenter)="polar.setActivePoint($event, s)"
+              (pointermove)="polar.setActivePoint($event, s)"
+              (pointerleave)="polar.clearActivePoint()"
+              (focus)="polar.setActivePoint($event, s)"
+              (blur)="polar.clearActivePoint()"
+            />
+          }
+          @if (showLabels()) {
+            @for (s of layout().slices; track s.seriesKey) {
+              <svg:text
+                class="chart-slice-label fill-foreground text-2xs"
+                text-anchor="middle"
+                dominant-baseline="middle"
+                [attr.x]="s.centroid[0] + s.translateX"
+                [attr.y]="s.centroid[1] + s.translateY"
+              >
+                {{ s.value }}
+              </svg:text>
+            }
+          }
+        </svg:g>
+      </svg:g>
+    </svg:svg>
+    <div class="pointer-events-none absolute inset-0 flex items-center justify-center">
+      <ng-content select="ChartPieCenter" />
+    </div>
+    <ng-content select="ChartTooltip" />
+    <ng-content select="ChartLegend" />
+    <ChartDataTable
+      [data]="data()"
+      [columns]="dataColumns()"
+      [rowHeaderKey]="nameKey()"
+      [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: PieChart, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ChartPie',
+                    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 [attr.transform]="'translate(' + layout().centerX + ',' + layout().centerY + ')'">
+          @for (s of layout().slices; track s.seriesKey) {
+            <svg:path
+              ChartMarkFocus
+              class="chart-slice cursor-pointer transition-opacity hover:opacity-80"
+              [attr.d]="s.arcPath"
+              [attr.fill]="s.color"
+              [attr.transform]="sliceTransform(s)"
+              [attr.aria-label]="sliceAriaLabel(s)"
+              role="img"
+              tabindex="0"
+              (click)="emitClick(s)"
+              (keydown.enter)="emitClick(s)"
+              (keydown.space)="emitClick(s); $event.preventDefault()"
+              (pointerenter)="polar.setActivePoint($event, s)"
+              (pointermove)="polar.setActivePoint($event, s)"
+              (pointerleave)="polar.clearActivePoint()"
+              (focus)="polar.setActivePoint($event, s)"
+              (blur)="polar.clearActivePoint()"
+            />
+          }
+          @if (showLabels()) {
+            @for (s of layout().slices; track s.seriesKey) {
+              <svg:text
+                class="chart-slice-label fill-foreground text-2xs"
+                text-anchor="middle"
+                dominant-baseline="middle"
+                [attr.x]="s.centroid[0] + s.translateX"
+                [attr.y]="s.centroid[1] + s.translateY"
+              >
+                {{ s.value }}
+              </svg:text>
+            }
+          }
+        </svg:g>
+      </svg:g>
+    </svg:svg>
+    <div class="pointer-events-none absolute inset-0 flex items-center justify-center">
+      <ng-content select="ChartPieCenter" />
+    </div>
+    <ng-content select="ChartTooltip" />
+    <ng-content select="ChartLegend" />
+    <ChartDataTable
+      [data]="data()"
+      [columns]="dataColumns()"
+      [rowHeaderKey]="nameKey()"
+      [label]="ariaSummary()"
+    />
+  `,
+                }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], valueKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueKey", required: true }] }], nameKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "nameKey", required: true }] }], seriesKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "seriesKeys", required: false }] }], 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 }] }], innerRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "innerRadius", required: false }] }], padAngle: [{ type: i0.Input, args: [{ isSignal: true, alias: "padAngle", required: false }] }], cornerRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "cornerRadius", required: false }] }], startAngle: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAngle", required: false }] }], endAngle: [{ type: i0.Input, args: [{ isSignal: true, alias: "endAngle", required: false }] }], showLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabels", required: false }] }], activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: false }] }], activeOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeOffset", required: false }] }], sliceClick: [{ type: i0.Output, args: ["sliceClick"] }] } });
 
 /**
  * Generated bundle index. Do not edit.
- */
+ */
+
+export { PieChart, computePieLayout };