@ojiepermana/angular-chart 22.0.27

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

@@ -0,0 +1,248 @@
+import { pie, arc } from 'd3-shape';
+import { seriesColorVar, ChartContext } from '@ojiepermana/angular-chart/core';
+import * as i0 from '@angular/core';
+import { inject, input, output, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+
+function computePieLayout(input) {
+    const { data, valueKey, nameKey, seriesKeys, 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;
+    if (data.length === 0 || outerRadius === 0) {
+        return { slices: [], centerX, centerY, outerRadius };
+    }
+    const pieGen = pie()
+        .value((d) => Number(d[valueKey] ?? 0))
+        .sort(null)
+        .padAngle(padAngle)
+        .startAngle(startAngle)
+        .endAngle(endAngle);
+    const arcGen = arc()
+        .innerRadius(innerRadius)
+        .outerRadius(outerRadius)
+        .cornerRadius(cornerRadius);
+    const arcs = pieGen(data);
+    const slices = arcs.map((a, i) => {
+        const d = a.data;
+        const key = seriesKeys?.[i] ?? String(d[nameKey] ?? i);
+        const centroid = arcGen.centroid(a);
+        const magnitude = Math.hypot(centroid[0], centroid[1]) || 1;
+        const isActive = i === activeIndex;
+        return {
+            seriesKey: key,
+            name: String(d[nameKey] ?? key),
+            value: Number(d[valueKey] ?? 0),
+            datumIndex: i,
+            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 };
+}
+
+const DEFAULT_MARGIN = { top: 8, right: 8, bottom: 8, left: 8 };
+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 */ []));
+    styles = input('base', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "styles" }] : /* istanbul ignore next */ []));
+    margin = input(DEFAULT_MARGIN, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "margin" }] : /* istanbul ignore next */ []));
+    innerRadius = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "innerRadius" }] : /* istanbul ignore next */ []));
+    padAngle = input(0.01, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "padAngle" }] : /* istanbul ignore next */ []));
+    cornerRadius = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cornerRadius" }] : /* 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();
+    innerWidth = computed(() => Math.max(0, this.root.dimensions().width - this.margin().left - this.margin().right), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "innerWidth" }] : /* istanbul ignore next */ []));
+    innerHeight = computed(() => Math.max(0, this.root.dimensions().height - this.margin().top - this.margin().bottom), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "innerHeight" }] : /* istanbul ignore next */ []));
+    layout = computed(() => computePieLayout({
+        data: this.data(),
+        valueKey: this.valueKey(),
+        nameKey: this.nameKey(),
+        seriesKeys: this.seriesKeys(),
+        innerWidth: this.innerWidth(),
+        innerHeight: this.innerHeight(),
+        innerRadius: this.innerRadius(),
+        padAngle: this.padAngle(),
+        cornerRadius: this.cornerRadius(),
+        startAngle: this.startAngle(),
+        endAngle: this.endAngle(),
+        activeIndex: this.activeIndex(),
+        activeOffset: this.activeOffset(),
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    viewBox = computed(() => {
+        const { width, height } = this.root.dimensions();
+        return `0 0 ${Math.max(0, width)} ${Math.max(0, height)}`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []));
+    innerTransform = computed(() => `translate(${this.margin().left},${this.margin().top})`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "innerTransform" }] : /* istanbul ignore next */ []));
+    ariaSummary = computed(() => `Pie chart, ${this.data().length} slices.`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaSummary" }] : /* 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,
+            name: s.name,
+            value: s.value,
+            datumIndex: s.datumIndex,
+            datum: this.data()[s.datumIndex],
+        });
+    }
+    setActive(event, s) {
+        const clientX = event instanceof PointerEvent ? event.clientX : event.target.getBoundingClientRect().left;
+        const clientY = event instanceof PointerEvent ? event.clientY : event.target.getBoundingClientRect().top;
+        this.root.activePoint.set({
+            index: s.datumIndex,
+            datumIndex: s.datumIndex,
+            seriesKey: s.seriesKey,
+            clientX,
+            clientY,
+        });
+    }
+    clearActive() {
+        this.root.activePoint.set(null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: PieChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", 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 }, 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": "styles()" }, classAttribute: "relative block h-full w-full" }, ngImport: i0, template: `
+    <svg:svg
+      class="block h-full w-full overflow-visible"
+      [attr.viewBox]="viewBox()"
+      preserveAspectRatio="xMidYMid meet"
+      role="img"
+      [attr.aria-label]="ariaSummary()">
+      <svg:g [attr.transform]="innerTransform()">
+        <svg:g [attr.transform]="'translate(' + layout().centerX + ',' + layout().centerY + ')'">
+          @for (s of layout().slices; track s.seriesKey) {
+            <svg:path
+              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)"
+              tabindex="0"
+              (click)="emitClick(s)"
+              (keydown.enter)="emitClick(s)"
+              (keydown.space)="emitClick(s); $event.preventDefault()"
+              (pointerenter)="setActive($event, s)"
+              (pointermove)="setActive($event, s)"
+              (pointerleave)="clearActive()"
+              (focus)="setActive($event, s)"
+              (blur)="clearActive()" />
+          }
+          @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" />
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: PieChart, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ChartPie',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { class: 'relative block h-full w-full', '[attr.data-style]': 'styles()' },
+                    template: `
+    <svg:svg
+      class="block h-full w-full overflow-visible"
+      [attr.viewBox]="viewBox()"
+      preserveAspectRatio="xMidYMid meet"
+      role="img"
+      [attr.aria-label]="ariaSummary()">
+      <svg:g [attr.transform]="innerTransform()">
+        <svg:g [attr.transform]="'translate(' + layout().centerX + ',' + layout().centerY + ')'">
+          @for (s of layout().slices; track s.seriesKey) {
+            <svg:path
+              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)"
+              tabindex="0"
+              (click)="emitClick(s)"
+              (keydown.enter)="emitClick(s)"
+              (keydown.space)="emitClick(s); $event.preventDefault()"
+              (pointerenter)="setActive($event, s)"
+              (pointermove)="setActive($event, s)"
+              (pointerleave)="clearActive()"
+              (focus)="setActive($event, s)"
+              (blur)="clearActive()" />
+          }
+          @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" />
+  `,
+                }]
+        }], 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 }] }], 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 };
+//# sourceMappingURL=ojiepermana-angular-chart-pie.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ojiepermana-angular-chart-pie.mjs","sources":["../../../library/chart/pie/pie-layout.ts","../../../library/chart/pie/pie-chart.ts","../../../library/chart/pie/ojiepermana-angular-chart-pie.ts"],"sourcesContent":["import { arc as d3arc, pie as d3pie, type PieArcDatum } from 'd3-shape';\nimport type { ChartDatum } from '@ojiepermana/angular-chart/core';\nimport { seriesColorVar } from '@ojiepermana/angular-chart/core';\n\nexport interface PieLayoutInput {\n  readonly data: readonly ChartDatum[];\n  /** Field on each datum whose value is the slice's numeric magnitude. */\n  readonly valueKey: string;\n  /** Field on each datum whose value is the slice's categorical label. */\n  readonly nameKey: string;\n  /**\n   * Ordered series keys used to resolve color (`var(--color-<key>)`).\n   * Must have the same length as `data`. If omitted, falls back to\n   * `nameKey` values.\n   */\n  readonly seriesKeys?: readonly string[];\n  readonly innerWidth: number;\n  readonly innerHeight: number;\n  /** Inner radius for donut-style charts (0 = full pie). */\n  readonly innerRadius: number;\n  /** Gap between slices, in radians. */\n  readonly padAngle: number;\n  /** Corner radius for slices (px). */\n  readonly cornerRadius: number;\n  /** Starting angle in radians (default −π/2 = 12 o'clock). */\n  readonly startAngle: number;\n  /** Ending angle in radians (default 3π/2). */\n  readonly endAngle: number;\n  readonly activeIndex?: number;\n  readonly activeOffset?: number;\n}\n\nexport interface PieSliceRect {\n  readonly seriesKey: string;\n  readonly name: string;\n  readonly value: number;\n  readonly datumIndex: number;\n  readonly color: string;\n  readonly arcPath: string;\n  readonly centroid: readonly [number, number];\n  readonly startAngle: number;\n  readonly endAngle: number;\n  readonly translateX: number;\n  readonly translateY: number;\n}\n\nexport interface PieLayout {\n  readonly slices: readonly PieSliceRect[];\n  readonly centerX: number;\n  readonly centerY: number;\n  readonly outerRadius: number;\n}\n\nexport function computePieLayout(input: PieLayoutInput): PieLayout {\n  const {\n    data,\n    valueKey,\n    nameKey,\n    seriesKeys,\n    innerWidth,\n    innerHeight,\n    innerRadius,\n    padAngle,\n    cornerRadius,\n    startAngle,\n    endAngle,\n    activeIndex,\n    activeOffset = 12,\n  } = input;\n\n  const outerRadius = Math.max(0, Math.min(innerWidth, innerHeight) / 2);\n  const centerX = innerWidth / 2;\n  const centerY = innerHeight / 2;\n\n  if (data.length === 0 || outerRadius === 0) {\n    return { slices: [], centerX, centerY, outerRadius };\n  }\n\n  const pieGen = d3pie<ChartDatum>()\n    .value((d) => Number(d[valueKey] ?? 0))\n    .sort(null)\n    .padAngle(padAngle)\n    .startAngle(startAngle)\n    .endAngle(endAngle);\n\n  const arcGen = d3arc<PieArcDatum<ChartDatum>>()\n    .innerRadius(innerRadius)\n    .outerRadius(outerRadius)\n    .cornerRadius(cornerRadius);\n\n  const arcs = pieGen(data as ChartDatum[]);\n  const slices: PieSliceRect[] = arcs.map((a, i) => {\n    const d = a.data;\n    const key = seriesKeys?.[i] ?? String(d[nameKey] ?? i);\n    const centroid = arcGen.centroid(a) as [number, number];\n    const magnitude = Math.hypot(centroid[0], centroid[1]) || 1;\n    const isActive = i === activeIndex;\n    return {\n      seriesKey: key,\n      name: String(d[nameKey] ?? key),\n      value: Number(d[valueKey] ?? 0),\n      datumIndex: i,\n      color: seriesColorVar(key),\n      arcPath: arcGen(a) ?? '',\n      centroid,\n      startAngle: a.startAngle,\n      endAngle: a.endAngle,\n      translateX: isActive ? (centroid[0] / magnitude) * activeOffset : 0,\n      translateY: isActive ? (centroid[1] / magnitude) * activeOffset : 0,\n    };\n  });\n\n  return { slices, centerX, centerY, outerRadius };\n}\n","import { ChangeDetectionStrategy, Component, computed, inject, input, output } from '@angular/core';\nimport { ChartContext } from '@ojiepermana/angular-chart/core';\nimport type { ChartDatum, ChartMargin, ChartStyleVariant } from '@ojiepermana/angular-chart/core';\nimport { computePieLayout, type PieSliceRect } from './pie-layout';\n\nconst DEFAULT_MARGIN: ChartMargin = { top: 8, right: 8, bottom: 8, left: 8 };\n\nexport interface PieSliceClickEvent {\n  readonly seriesKey: string;\n  readonly name: string;\n  readonly value: number;\n  readonly datumIndex: number;\n  readonly datum: ChartDatum;\n}\n\n@Component({\n  selector: 'ChartPie',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: { class: 'relative block h-full w-full', '[attr.data-style]': 'styles()' },\n  template: `\n    <svg:svg\n      class=\"block h-full w-full overflow-visible\"\n      [attr.viewBox]=\"viewBox()\"\n      preserveAspectRatio=\"xMidYMid meet\"\n      role=\"img\"\n      [attr.aria-label]=\"ariaSummary()\">\n      <svg:g [attr.transform]=\"innerTransform()\">\n        <svg:g [attr.transform]=\"'translate(' + layout().centerX + ',' + layout().centerY + ')'\">\n          @for (s of layout().slices; track s.seriesKey) {\n            <svg:path\n              class=\"chart-slice cursor-pointer transition-opacity hover:opacity-80\"\n              [attr.d]=\"s.arcPath\"\n              [attr.fill]=\"s.color\"\n              [attr.transform]=\"sliceTransform(s)\"\n              [attr.aria-label]=\"sliceAriaLabel(s)\"\n              tabindex=\"0\"\n              (click)=\"emitClick(s)\"\n              (keydown.enter)=\"emitClick(s)\"\n              (keydown.space)=\"emitClick(s); $event.preventDefault()\"\n              (pointerenter)=\"setActive($event, s)\"\n              (pointermove)=\"setActive($event, s)\"\n              (pointerleave)=\"clearActive()\"\n              (focus)=\"setActive($event, s)\"\n              (blur)=\"clearActive()\" />\n          }\n          @if (showLabels()) {\n            @for (s of layout().slices; track s.seriesKey) {\n              <svg:text\n                class=\"chart-slice-label fill-foreground text-2xs\"\n                text-anchor=\"middle\"\n                dominant-baseline=\"middle\"\n                [attr.x]=\"s.centroid[0] + s.translateX\"\n                [attr.y]=\"s.centroid[1] + s.translateY\">\n                {{ s.value }}\n              </svg:text>\n            }\n          }\n        </svg:g>\n      </svg:g>\n    </svg:svg>\n    <div class=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n      <ng-content select=\"ChartPieCenter\" />\n    </div>\n    <ng-content select=\"ChartTooltip\" />\n    <ng-content select=\"ChartLegend\" />\n  `,\n})\nexport class PieChart {\n  private readonly root = inject(ChartContext);\n\n  readonly data = input.required<readonly ChartDatum[]>();\n  readonly valueKey = input.required<string>();\n  readonly nameKey = input.required<string>();\n  readonly seriesKeys = input<readonly string[] | undefined>(undefined);\n  readonly styles = input<ChartStyleVariant>('base');\n  readonly margin = input<ChartMargin>(DEFAULT_MARGIN);\n  readonly innerRadius = input<number>(0);\n  readonly padAngle = input<number>(0.01);\n  readonly cornerRadius = input<number>(0);\n  readonly startAngle = input<number>(-Math.PI / 2);\n  readonly endAngle = input<number>((3 * Math.PI) / 2);\n  readonly showLabels = input<boolean>(false);\n  readonly activeIndex = input<number | undefined>(undefined);\n  readonly activeOffset = input<number>(12);\n\n  readonly sliceClick = output<PieSliceClickEvent>();\n\n  protected readonly innerWidth = computed(() =>\n    Math.max(0, this.root.dimensions().width - this.margin().left - this.margin().right),\n  );\n  protected readonly innerHeight = computed(() =>\n    Math.max(0, this.root.dimensions().height - this.margin().top - this.margin().bottom),\n  );\n\n  protected readonly layout = computed(() =>\n    computePieLayout({\n      data: this.data(),\n      valueKey: this.valueKey(),\n      nameKey: this.nameKey(),\n      seriesKeys: this.seriesKeys(),\n      innerWidth: this.innerWidth(),\n      innerHeight: this.innerHeight(),\n      innerRadius: this.innerRadius(),\n      padAngle: this.padAngle(),\n      cornerRadius: this.cornerRadius(),\n      startAngle: this.startAngle(),\n      endAngle: this.endAngle(),\n      activeIndex: this.activeIndex(),\n      activeOffset: this.activeOffset(),\n    }),\n  );\n\n  protected readonly viewBox = computed(() => {\n    const { width, height } = this.root.dimensions();\n    return `0 0 ${Math.max(0, width)} ${Math.max(0, height)}`;\n  });\n\n  protected readonly innerTransform = computed(() => `translate(${this.margin().left},${this.margin().top})`);\n  protected readonly ariaSummary = computed(() => `Pie chart, ${this.data().length} slices.`);\n\n  protected sliceAriaLabel(s: PieSliceRect): string {\n    return `${s.name}: ${s.value}`;\n  }\n\n  protected sliceTransform(s: PieSliceRect): string | null {\n    return s.translateX || s.translateY ? `translate(${s.translateX}, ${s.translateY})` : null;\n  }\n\n  protected emitClick(s: PieSliceRect): void {\n    this.sliceClick.emit({\n      seriesKey: s.seriesKey,\n      name: s.name,\n      value: s.value,\n      datumIndex: s.datumIndex,\n      datum: this.data()[s.datumIndex],\n    });\n  }\n\n  protected setActive(event: PointerEvent | FocusEvent, s: PieSliceRect): void {\n    const clientX =\n      event instanceof PointerEvent ? event.clientX : (event.target as Element).getBoundingClientRect().left;\n    const clientY =\n      event instanceof PointerEvent ? event.clientY : (event.target as Element).getBoundingClientRect().top;\n    this.root.activePoint.set({\n      index: s.datumIndex,\n      datumIndex: s.datumIndex,\n      seriesKey: s.seriesKey,\n      clientX,\n      clientY,\n    });\n  }\n\n  protected clearActive(): void {\n    this.root.activePoint.set(null);\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["d3pie","d3arc"],"mappings":"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"}