@ojiepermana/angular-chart 22.0.36 → 22.0.41

package/README.md

@@ -32,8 +32,8 @@ import { BarChart } from '@ojiepermana/angular-chart/bar';
 
 ### Supported chart entrypoints
 
-| Import path            | Selector       | Best for                                                          |
-| ---------------------- | -------------- | ----------------------------------------------------------------- |
+| Import path                          | Selector       | Best for                                                          |
+| ------------------------------------ | -------------- | ----------------------------------------------------------------- |
 | `@ojiepermana/angular-chart/bar`     | `ChartBar`     | grouped, stacked, horizontal, active, and mixed-color bar layouts |
 | `@ojiepermana/angular-chart/line`    | `ChartLine`    | trends, comparisons, and zoomable time-series lines               |
 | `@ojiepermana/angular-chart/area`    | `ChartArea`    | filled trend bands, stacked areas, and expanded percent views     |
@@ -47,17 +47,17 @@ import { BarChart } from '@ojiepermana/angular-chart/bar';
 The Angular structure keeps the same high-level idea as shadcn Chart: define a shared chart config once, then compose a specific chart type with optional grid, axis, tooltip, legend, and center content.
 
 ```text
-chart
-├── chart-bar | chart-line | chart-area | chart-scatter
-│   ├── svg:g[chart-grid]
-│   ├── svg:g[chart-axis-x]
-│   ├── svg:g[chart-axis-y]
-│   └── svg:g[chart-crosshair] / svg:g[chart-brush] (optional)
-├── chart-pie | chart-radial | chart-radar
-│   └── chart-pie-center | chart-radial-center (optional)
-├── chart-tooltip
-├── chart-legend
-└── chart-zoom-controls (optional)
+Chart
+├── ChartBar | ChartLine | ChartArea | ChartScatter
+│   ├── svg:g[ChartGrid]
+│   ├── svg:g[ChartAxisX]
+│   ├── svg:g[ChartAxisY]
+│   └── svg:g[ChartCrosshair] / svg:g[ChartBrush] (optional)
+├── ChartPie | ChartRadial | ChartRadar
+│   └── ChartPieCenter | ChartRadialCenter (optional)
+├── ChartTooltip
+├── ChartLegend
+└── ChartZoomControls (optional)
 ```
 
 All child primitives read dimensions, series metadata, and scoped color tokens from `Chart`.
@@ -168,7 +168,7 @@ Use `colorKey` when the dataset itself carries a color token such as `fill`, and
 | --------- | ---------------- | ---------------- |
 | `config`  | `ChartConfig`    | —                |
 | `aspect`  | `string`         | `'aspect-video'` |
-| `ChartId` | `string \| null` | auto-generated   |
+| `chartId` | `string \| null` | auto-generated   |
 
 `ChartConfig` is a readonly record of series keys to labels, icons, colors, or theme-aware light/dark color maps.
 

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

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { inject, input, output, computed, effect, ChangeDetectionStrategy, Component } from '@angular/core';
-import { seriesColorVar, ChartContext, CartesianContext, elementClientCenter } from '@ojiepermana/angular-chart/core';
+import { seriesColorVar, ChartContext, CartesianContext, ChartThemeRadius, elementClientCenter } from '@ojiepermana/angular-chart/core';
 import { scaleBand, scaleLinear } from 'd3-scale';
 import { min, max } from 'd3-array';
 import { stack } from 'd3-shape';
@@ -329,6 +329,7 @@ const defaultBarValueFormatter = (value) => `${value}`;
 class BarChart {
     root = inject(ChartContext);
     cart = inject(CartesianContext);
+    themeRadius = inject(ChartThemeRadius);
     data = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
     xKey = input.required(/* @ts-ignore */
@@ -345,7 +346,7 @@ class BarChart {
     ...(ngDevMode ? [{ debugName: "bandPadding" }] : /* istanbul ignore next */ []));
     groupPadding = input(0.05, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "groupPadding" }] : /* istanbul ignore next */ []));
-    cornerRadius = input(4, /* @ts-ignore */
+    cornerRadius = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "cornerRadius" }] : /* istanbul ignore next */ []));
     colorKey = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "colorKey" }] : /* istanbul ignore next */ []));
@@ -364,7 +365,7 @@ class BarChart {
     dotGap = input(2, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "dotGap" }] : /* istanbul ignore next */ []));
     /** Corner radius of each `dot` cell. */
-    dotCornerRadius = input(2, /* @ts-ignore */
+    dotCornerRadius = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "dotCornerRadius" }] : /* istanbul ignore next */ []));
     /** Render the faint full-height cell track behind the `dot` values. */
     showDotTrack = input(true, /* @ts-ignore */
@@ -374,6 +375,12 @@ class BarChart {
     ...(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 */ []));
+    /** Bar corner radius; an unset input follows the live theme-radius axis. */
+    resolvedCornerRadius = computed(() => this.cornerRadius() ?? this.themeRadius.px(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedCornerRadius" }] : /* istanbul ignore next */ []));
+    /** Dot-cell corner radius; an unset input follows the theme-radius axis (smaller, SVG clamps to half the cell). */
+    resolvedDotCornerRadius = computed(() => this.dotCornerRadius() ?? Math.min(this.themeRadius.px() * 0.5, 4), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedDotCornerRadius" }] : /* istanbul ignore next */ []));
     layout = computed(() => computeBarLayout({
         data: this.data(),
         xKey: this.xKey(),
@@ -424,6 +431,8 @@ class BarChart {
         return `Bar chart, ${n} categories, ${keys.length} series: ${keys.join(', ')}.`;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "ariaSummary" }] : /* istanbul ignore next */ []));
+    visibleSeriesKeys = computed(() => this.root.visibleSeriesKeys(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleSeriesKeys" }] : /* istanbul ignore next */ []));
     constructor() {
         effect(() => {
             const layout = this.layout();
@@ -495,6 +504,28 @@ class BarChart {
         const label = this.root.config()[bar.seriesKey]?.label ?? bar.seriesKey;
         return `${label} in ${bar.category}: ${bar.value}`;
     }
+    onKeydown(event, index) {
+        const key = event.key;
+        let targetIndex = -1;
+        if (key === 'ArrowRight' || key === 'ArrowDown') {
+            targetIndex = index + 1;
+        }
+        else if (key === 'ArrowLeft' || key === 'ArrowUp') {
+            targetIndex = index - 1;
+        }
+        if (targetIndex >= 0 && targetIndex < this.bars().length) {
+            event.preventDefault();
+            const svgEl = event.currentTarget;
+            const parent = svgEl.parentElement;
+            if (parent) {
+                const rects = parent.querySelectorAll('.chart-bar');
+                const targetRect = rects[targetIndex];
+                if (targetRect) {
+                    targetRect.focus();
+                }
+            }
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: BarChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.3", type: BarChart, isStandalone: true, selector: "ChartBar", 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 }, variant: { classPropertyName: "variant", publicName: "variant", 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 }, bandPadding: { classPropertyName: "bandPadding", publicName: "bandPadding", isSignal: true, isRequired: false, transformFunction: null }, groupPadding: { classPropertyName: "groupPadding", publicName: "groupPadding", isSignal: true, isRequired: false, transformFunction: null }, cornerRadius: { classPropertyName: "cornerRadius", publicName: "cornerRadius", isSignal: true, isRequired: false, transformFunction: null }, colorKey: { classPropertyName: "colorKey", publicName: "colorKey", isSignal: true, isRequired: false, transformFunction: null }, activeKey: { classPropertyName: "activeKey", publicName: "activeKey", isSignal: true, isRequired: false, transformFunction: null }, activeValue: { classPropertyName: "activeValue", publicName: "activeValue", 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 }, dotSize: { classPropertyName: "dotSize", publicName: "dotSize", isSignal: true, isRequired: false, transformFunction: null }, dotGap: { classPropertyName: "dotGap", publicName: "dotGap", isSignal: true, isRequired: false, transformFunction: null }, dotCornerRadius: { classPropertyName: "dotCornerRadius", publicName: "dotCornerRadius", isSignal: true, isRequired: false, transformFunction: null }, showDotTrack: { classPropertyName: "showDotTrack", publicName: "showDotTrack", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { barClick: "barClick" }, host: { properties: { "attr.data-style": "styles()" }, classAttribute: "relative block h-full w-full" }, providers: [CartesianContext], ngImport: i0, template: `
     <svg:svg
@@ -516,8 +547,8 @@ class BarChart {
                   [attr.y]="cell.y"
                   [attr.width]="cell.width"
                   [attr.height]="cell.height"
-                  [attr.rx]="dotCornerRadius()"
-                  [attr.ry]="dotCornerRadius()"
+                  [attr.rx]="resolvedDotCornerRadius()"
+                  [attr.ry]="resolvedDotCornerRadius()"
                   fill="hsl(var(--muted))" />
               }
               @for (cell of dotValueCells(); track cell.key) {
@@ -527,22 +558,22 @@ class BarChart {
                   [attr.y]="cell.y"
                   [attr.width]="cell.width"
                   [attr.height]="cell.height"
-                  [attr.rx]="dotCornerRadius()"
-                  [attr.ry]="dotCornerRadius()"
+                  [attr.rx]="resolvedDotCornerRadius()"
+                  [attr.ry]="resolvedDotCornerRadius()"
                   [attr.fill]="cell.color"
                   [attr.opacity]="dotCellOpacity(cell)" />
               }
             </svg:g>
           }
-          @for (bar of bars(); track bar.key) {
+          @for (bar of bars(); track bar.key; let idx = $index) {
             <svg:rect
               class="chart-bar cursor-pointer outline-none transition-opacity hover:opacity-80"
               [attr.x]="bar.x"
               [attr.y]="bar.y"
               [attr.width]="bar.width"
               [attr.height]="bar.height"
-              [attr.rx]="cornerRadius()"
-              [attr.ry]="cornerRadius()"
+              [attr.rx]="resolvedCornerRadius()"
+              [attr.ry]="resolvedCornerRadius()"
               [attr.fill]="barFill(bar)"
               [attr.opacity]="barOpacity(bar)"
               [attr.stroke]="bar.active ? 'hsl(var(--foreground))' : null"
@@ -553,7 +584,8 @@ class BarChart {
               (blur)="clearActivePoint()"
               (click)="emitClick(bar)"
               (keydown.enter)="emitClick(bar)"
-              (keydown.space)="emitClick(bar); $event.preventDefault()" />
+              (keydown.space)="emitClick(bar); $event.preventDefault()"
+              (keydown)="onKeydown($event, idx)" />
             @if (showValueLabels() && bar.height > 0 && bar.width > 0) {
               <svg:text
                 class="chart-bar-value pointer-events-none fill-muted-foreground text-2xs"
@@ -574,6 +606,27 @@ class BarChart {
     </svg:svg>
     <ng-content select="ChartTooltip" />
     <ng-content select="ChartLegend" />
+
+    <table class="sr-only" [attr.aria-label]="ariaSummary()">
+      <thead>
+        <tr>
+          <th scope="col">{{ xKey() }}</th>
+          @for (key of visibleSeriesKeys(); track key) {
+            <th scope="col">{{ key }}</th>
+          }
+        </tr>
+      </thead>
+      <tbody>
+        @for (row of data(); track row) {
+          <tr>
+            <th scope="row">{{ row[xKey()] }}</th>
+            @for (key of visibleSeriesKeys(); track key) {
+              <td>{{ row[key] }}</td>
+            }
+          </tr>
+        }
+      </tbody>
+    </table>
   `, isInline: true, dependencies: [{ kind: "directive", type: ChartPointerTracker, selector: "svg:svg[ChartPointerTracker]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: BarChart, decorators: [{
@@ -604,8 +657,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
                   [attr.y]="cell.y"
                   [attr.width]="cell.width"
                   [attr.height]="cell.height"
-                  [attr.rx]="dotCornerRadius()"
-                  [attr.ry]="dotCornerRadius()"
+                  [attr.rx]="resolvedDotCornerRadius()"
+                  [attr.ry]="resolvedDotCornerRadius()"
                   fill="hsl(var(--muted))" />
               }
               @for (cell of dotValueCells(); track cell.key) {
@@ -615,22 +668,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
                   [attr.y]="cell.y"
                   [attr.width]="cell.width"
                   [attr.height]="cell.height"
-                  [attr.rx]="dotCornerRadius()"
-                  [attr.ry]="dotCornerRadius()"
+                  [attr.rx]="resolvedDotCornerRadius()"
+                  [attr.ry]="resolvedDotCornerRadius()"
                   [attr.fill]="cell.color"
                   [attr.opacity]="dotCellOpacity(cell)" />
               }
             </svg:g>
           }
-          @for (bar of bars(); track bar.key) {
+          @for (bar of bars(); track bar.key; let idx = $index) {
             <svg:rect
               class="chart-bar cursor-pointer outline-none transition-opacity hover:opacity-80"
               [attr.x]="bar.x"
               [attr.y]="bar.y"
               [attr.width]="bar.width"
               [attr.height]="bar.height"
-              [attr.rx]="cornerRadius()"
-              [attr.ry]="cornerRadius()"
+              [attr.rx]="resolvedCornerRadius()"
+              [attr.ry]="resolvedCornerRadius()"
               [attr.fill]="barFill(bar)"
               [attr.opacity]="barOpacity(bar)"
               [attr.stroke]="bar.active ? 'hsl(var(--foreground))' : null"
@@ -641,7 +694,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
               (blur)="clearActivePoint()"
               (click)="emitClick(bar)"
               (keydown.enter)="emitClick(bar)"
-              (keydown.space)="emitClick(bar); $event.preventDefault()" />
+              (keydown.space)="emitClick(bar); $event.preventDefault()"
+              (keydown)="onKeydown($event, idx)" />
             @if (showValueLabels() && bar.height > 0 && bar.width > 0) {
               <svg:text
                 class="chart-bar-value pointer-events-none fill-muted-foreground text-2xs"
@@ -662,6 +716,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
     </svg:svg>
     <ng-content select="ChartTooltip" />
     <ng-content select="ChartLegend" />
+
+    <table class="sr-only" [attr.aria-label]="ariaSummary()">
+      <thead>
+        <tr>
+          <th scope="col">{{ xKey() }}</th>
+          @for (key of visibleSeriesKeys(); track key) {
+            <th scope="col">{{ key }}</th>
+          }
+        </tr>
+      </thead>
+      <tbody>
+        @for (row of data(); track row) {
+          <tr>
+            <th scope="row">{{ row[xKey()] }}</th>
+            @for (key of visibleSeriesKeys(); track key) {
+              <td>{{ row[key] }}</td>
+            }
+          </tr>
+        }
+      </tbody>
+    </table>
   `,
                 }]
         }], ctorParameters: () => [], 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 }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], styles: [{ type: i0.Input, args: [{ isSignal: true, alias: "styles", required: false }] }], margin: [{ type: i0.Input, args: [{ isSignal: true, alias: "margin", required: false }] }], bandPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "bandPadding", required: false }] }], groupPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupPadding", required: false }] }], cornerRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "cornerRadius", required: false }] }], colorKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorKey", required: false }] }], activeKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeKey", required: false }] }], activeValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeValue", required: false }] }], showValueLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValueLabels", required: false }] }], valueLabelFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueLabelFormat", required: false }] }], dotSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "dotSize", required: false }] }], dotGap: [{ type: i0.Input, args: [{ isSignal: true, alias: "dotGap", required: false }] }], dotCornerRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "dotCornerRadius", required: false }] }], showDotTrack: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDotTrack", required: false }] }], barClick: [{ type: i0.Output, args: ["barClick"] }] } });

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

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
-import { signal, computed, Injectable, inject, ElementRef, Renderer2, effect, ChangeDetectionStrategy, Component, NgZone, PLATFORM_ID, DestroyRef, viewChild, input, afterNextRender } from '@angular/core';
-import { isPlatformBrowser } from '@angular/common';
+import { signal, computed, Injectable, inject, ElementRef, Renderer2, effect, ChangeDetectionStrategy, Component, NgZone, PLATFORM_ID, DestroyRef, viewChild, input, afterNextRender, Service } from '@angular/core';
+import { isPlatformBrowser, DOCUMENT } from '@angular/common';
 import { scalePoint, scaleLinear, scaleBand } from 'd3-scale';
 import { max } from 'd3-array';
 import { curveLinear, curveStep, curveMonotoneX, line, area, stack, stackOffsetExpand } from 'd3-shape';
@@ -756,8 +756,68 @@ function provideCartesianFromLineLayout(ctx, layout, orientation, innerWidth, in
     ctx.categories.set(layout.categories);
 }
 
+/** 0.625rem @ 16px root — matches the theme `theme-radius='md'` default. */
+const FALLBACK_RADIUS_PX = 10;
+/**
+ * Resolves the live theme corner radius (the `--radius` token) in pixels for SVG
+ * chart geometry, and re-emits when the global `theme-radius` axis switches.
+ *
+ * SVG `rx`/`ry` need px numbers, so this reads the computed `--radius` off
+ * `<html>` and converts rem→px. A `MutationObserver` on the `<html theme-radius>`
+ * attribute keeps the `px` signal in sync with `ThemeRadiusService` at runtime;
+ * charts default their corner radius to this value (still overridable per chart).
+ *
+ * SSR-safe: with no document it returns the `md` fallback and skips observing.
+ */
+class ChartThemeRadius {
+    document = inject(DOCUMENT, { optional: true });
+    basePx = signal(this.readBasePx(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "basePx" }] : /* istanbul ignore next */ []));
+    /** Resolved base radius (`--radius`) in px; reactive to the theme-radius axis. */
+    px = this.basePx.asReadonly();
+    constructor() {
+        const root = this.document?.documentElement;
+        const view = this.document?.defaultView;
+        if (!root || !view || typeof view.MutationObserver !== 'function') {
+            return;
+        }
+        const observer = new view.MutationObserver(() => this.basePx.set(this.readBasePx()));
+        observer.observe(root, { attributes: true, attributeFilter: ['theme-radius'] });
+        inject(DestroyRef).onDestroy(() => observer.disconnect());
+    }
+    readBasePx() {
+        const root = this.document?.documentElement;
+        const view = this.document?.defaultView;
+        if (!root || !view) {
+            return FALLBACK_RADIUS_PX;
+        }
+        const raw = view.getComputedStyle(root).getPropertyValue('--radius').trim();
+        return this.toPx(raw, view, root) ?? FALLBACK_RADIUS_PX;
+    }
+    toPx(value, view, root) {
+        if (!value) {
+            return null;
+        }
+        const numeric = Number.parseFloat(value);
+        if (!Number.isFinite(numeric)) {
+            return null;
+        }
+        if (value.endsWith('rem')) {
+            const rootFontSize = Number.parseFloat(view.getComputedStyle(root).fontSize) || 16;
+            return numeric * rootFontSize;
+        }
+        // 'px' and the 9999px 'full' extreme parse directly.
+        return numeric;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: ChartThemeRadius, deps: [], target: i0.ɵɵFactoryTarget.Service });
+    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.0.3", ngImport: i0, type: ChartThemeRadius });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: ChartThemeRadius, decorators: [{
+            type: Service
+        }], ctorParameters: () => [] });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { CHART_DATA_ATTRIBUTE, CHART_THEMES, CartesianContext, CategoricalViewportContext, ChartContainer, ChartContext, ChartStyle, ScatterViewportContext, bandTicks, buildCartesianScales, buildChartCss, cloneLinear, computeAreaLayout, computeLineLayout, effectiveIndexRange, elementClientCenter, indexRangeSize, linearTicks, nearestCategoryIndex, normalizeIndexRange, normalizeNumericDomain, panIndexRange, panNumericDomain, pointToBandAdapter, provideCartesianFromLineLayout, seriesColorVar, sliceByIndexRange, xScale, yScale, zoomIndexRange, zoomNumericDomain };
+export { CHART_DATA_ATTRIBUTE, CHART_THEMES, CartesianContext, CategoricalViewportContext, ChartContainer, ChartContext, ChartStyle, ChartThemeRadius, ScatterViewportContext, bandTicks, buildCartesianScales, buildChartCss, cloneLinear, computeAreaLayout, computeLineLayout, effectiveIndexRange, elementClientCenter, indexRangeSize, linearTicks, nearestCategoryIndex, normalizeIndexRange, normalizeNumericDomain, panIndexRange, panNumericDomain, pointToBandAdapter, provideCartesianFromLineLayout, seriesColorVar, sliceByIndexRange, xScale, yScale, zoomIndexRange, zoomNumericDomain };

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

@@ -1,5 +1,5 @@
 import { pie, arc } from 'd3-shape';
-import { seriesColorVar, ChartContext } from '@ojiepermana/angular-chart/core';
+import { seriesColorVar, ChartContext, ChartThemeRadius } from '@ojiepermana/angular-chart/core';
 import * as i0 from '@angular/core';
 import { inject, input, output, computed, ChangeDetectionStrategy, Component } from '@angular/core';
 
@@ -48,6 +48,7 @@ function computePieLayout(input) {
 const DEFAULT_MARGIN = { top: 8, right: 8, bottom: 8, left: 8 };
 class PieChart {
     root = inject(ChartContext);
+    themeRadius = inject(ChartThemeRadius);
     data = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
     valueKey = input.required(/* @ts-ignore */
@@ -64,7 +65,7 @@ class PieChart {
     ...(ngDevMode ? [{ debugName: "innerRadius" }] : /* istanbul ignore next */ []));
     padAngle = input(0.01, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "padAngle" }] : /* istanbul ignore next */ []));
-    cornerRadius = input(0, /* @ts-ignore */
+    cornerRadius = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "cornerRadius" }] : /* istanbul ignore next */ []));
     startAngle = input(-Math.PI / 2, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "startAngle" }] : /* istanbul ignore next */ []));
@@ -77,6 +78,8 @@ class PieChart {
     activeOffset = input(12, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "activeOffset" }] : /* istanbul ignore next */ []));
     sliceClick = output();
+    resolvedCornerRadius = computed(() => this.cornerRadius() ?? this.themeRadius.px(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedCornerRadius" }] : /* istanbul ignore next */ []));
     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 */
@@ -90,7 +93,7 @@ class PieChart {
         innerHeight: this.innerHeight(),
         innerRadius: this.innerRadius(),
         padAngle: this.padAngle(),
-        cornerRadius: this.cornerRadius(),
+        cornerRadius: this.resolvedCornerRadius(),
         startAngle: this.startAngle(),
         endAngle: this.endAngle(),
         activeIndex: this.activeIndex(),

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

@@ -1,6 +1,6 @@
 import { arc } from 'd3-shape';
 import { max } from 'd3-array';
-import { seriesColorVar, ChartContext } from '@ojiepermana/angular-chart/core';
+import { seriesColorVar, ChartContext, ChartThemeRadius } from '@ojiepermana/angular-chart/core';
 import * as i0 from '@angular/core';
 import { inject, input, output, computed, ChangeDetectionStrategy, Component } from '@angular/core';
 
@@ -46,6 +46,7 @@ const DEFAULT_MARGIN = { top: 8, right: 8, bottom: 8, left: 8 };
 const defaultRadialValueFormatter = (value) => `${value}`;
 class RadialChart {
     root = inject(ChartContext);
+    themeRadius = inject(ChartThemeRadius);
     data = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
     nameKey = input.required(/* @ts-ignore */
@@ -60,7 +61,7 @@ class RadialChart {
     ...(ngDevMode ? [{ debugName: "margin" }] : /* istanbul ignore next */ []));
     trackPadding = input(4, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "trackPadding" }] : /* istanbul ignore next */ []));
-    cornerRadius = input(8, /* @ts-ignore */
+    cornerRadius = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "cornerRadius" }] : /* istanbul ignore next */ []));
     startAngle = input(-Math.PI / 2, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "startAngle" }] : /* istanbul ignore next */ []));
@@ -75,6 +76,8 @@ class RadialChart {
     valueLabelFormat = input(defaultRadialValueFormatter, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "valueLabelFormat" }] : /* istanbul ignore next */ []));
     barClick = output();
+    resolvedCornerRadius = computed(() => this.cornerRadius() ?? this.themeRadius.px(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedCornerRadius" }] : /* istanbul ignore next */ []));
     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 */
@@ -89,7 +92,7 @@ class RadialChart {
         trackPadding: this.trackPadding(),
         startAngle: this.startAngle(),
         endAngle: this.endAngle(),
-        cornerRadius: this.cornerRadius(),
+        cornerRadius: this.resolvedCornerRadius(),
         maxValue: this.maxValue(),
     }), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ojiepermana/angular-chart",
-  "version": "22.0.36",
+  "version": "22.0.41",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/edsis/angular.git"
@@ -12,7 +12,7 @@
   "peerDependencies": {
     "@angular/common": ">=22.0.0",
     "@angular/core": ">=22.0.0",
-    "@ojiepermana/angular-component": "^22.0.36"
+    "@ojiepermana/angular-component": "^22.0.41"
   },
   "dependencies": {
     "d3-array": "^3.2.4",

package/types/ojiepermana-angular-chart-bar.d.ts

@@ -116,6 +116,7 @@ interface BarClickEvent {
 declare class BarChart {
     private readonly root;
     private readonly cart;
+    private readonly themeRadius;
     readonly data: _angular_core.InputSignal<readonly Readonly<Record<string, unknown>>[]>;
     readonly xKey: _angular_core.InputSignal<string>;
     readonly orientation: _angular_core.InputSignal<ChartOrientation>;
@@ -124,7 +125,7 @@ declare class BarChart {
     readonly margin: _angular_core.InputSignal<ChartMargin>;
     readonly bandPadding: _angular_core.InputSignal<number>;
     readonly groupPadding: _angular_core.InputSignal<number>;
-    readonly cornerRadius: _angular_core.InputSignal<number>;
+    readonly cornerRadius: _angular_core.InputSignal<number | null>;
     readonly colorKey: _angular_core.InputSignal<string | undefined>;
     readonly activeKey: _angular_core.InputSignal<string | undefined>;
     readonly activeValue: _angular_core.InputSignal<string | number | undefined>;
@@ -135,12 +136,16 @@ declare class BarChart {
     /** Gap between consecutive cells along the value axis for the `dot` style. */
     readonly dotGap: _angular_core.InputSignal<number>;
     /** Corner radius of each `dot` cell. */
-    readonly dotCornerRadius: _angular_core.InputSignal<number>;
+    readonly dotCornerRadius: _angular_core.InputSignal<number | null>;
     /** Render the faint full-height cell track behind the `dot` values. */
     readonly showDotTrack: _angular_core.InputSignal<boolean>;
     readonly barClick: _angular_core.OutputEmitterRef<BarClickEvent>;
     protected readonly innerWidth: _angular_core.Signal<number>;
     protected readonly innerHeight: _angular_core.Signal<number>;
+    /** Bar corner radius; an unset input follows the live theme-radius axis. */
+    protected readonly resolvedCornerRadius: _angular_core.Signal<number>;
+    /** Dot-cell corner radius; an unset input follows the theme-radius axis (smaller, SVG clamps to half the cell). */
+    protected readonly resolvedDotCornerRadius: _angular_core.Signal<number>;
     protected readonly layout: _angular_core.Signal<_ojiepermana_angular_chart_bar.BarLayoutResult>;
     protected readonly bars: _angular_core.Signal<readonly BarRect[]>;
     protected readonly dotLayout: _angular_core.Signal<BarDotLayoutResult | null>;
@@ -149,6 +154,7 @@ declare class BarChart {
     protected readonly viewBox: _angular_core.Signal<string>;
     protected readonly innerTransform: _angular_core.Signal<string>;
     protected readonly ariaSummary: _angular_core.Signal<string>;
+    protected readonly visibleSeriesKeys: _angular_core.Signal<readonly string[]>;
     constructor();
     protected emitClick(bar: BarRect): void;
     protected setActivePoint(event: FocusEvent, bar: BarRect): void;
@@ -163,6 +169,7 @@ declare class BarChart {
     protected barLabelY(bar: BarRect): number;
     protected barLabelAnchor(bar: BarRect): 'middle' | 'start' | 'end';
     protected barAriaLabel(bar: BarRect): string;
+    protected onKeydown(event: KeyboardEvent, index: number): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<BarChart, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<BarChart, "ChartBar", never, { "data": { "alias": "data"; "required": true; "isSignal": true; }; "xKey": { "alias": "xKey"; "required": true; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "styles": { "alias": "styles"; "required": false; "isSignal": true; }; "margin": { "alias": "margin"; "required": false; "isSignal": true; }; "bandPadding": { "alias": "bandPadding"; "required": false; "isSignal": true; }; "groupPadding": { "alias": "groupPadding"; "required": false; "isSignal": true; }; "cornerRadius": { "alias": "cornerRadius"; "required": false; "isSignal": true; }; "colorKey": { "alias": "colorKey"; "required": false; "isSignal": true; }; "activeKey": { "alias": "activeKey"; "required": false; "isSignal": true; }; "activeValue": { "alias": "activeValue"; "required": false; "isSignal": true; }; "showValueLabels": { "alias": "showValueLabels"; "required": false; "isSignal": true; }; "valueLabelFormat": { "alias": "valueLabelFormat"; "required": false; "isSignal": true; }; "dotSize": { "alias": "dotSize"; "required": false; "isSignal": true; }; "dotGap": { "alias": "dotGap"; "required": false; "isSignal": true; }; "dotCornerRadius": { "alias": "dotCornerRadius"; "required": false; "isSignal": true; }; "showDotTrack": { "alias": "showDotTrack"; "required": false; "isSignal": true; }; }, { "barClick": "barClick"; }, never, ["svg\\:g[ChartGrid]", "svg\\:g[ChartAxisX]", "svg\\:g[ChartAxisY]", "svg\\:g[ChartCrosshair]", "*", "ChartTooltip", "ChartLegend"], true, never>;
 }

package/types/ojiepermana-angular-chart-core.d.ts

@@ -365,5 +365,28 @@ declare function provideCartesianFromLineLayout(ctx: CartesianContext, layout: {
     categories: readonly string[];
 }, orientation: 'vertical' | 'horizontal', innerWidth: number, innerHeight: number): void;
 
-export { CHART_DATA_ATTRIBUTE, CHART_THEMES, CartesianContext, CategoricalViewportContext, ChartContainer, ChartContext, ChartStyle, ScatterViewportContext, bandTicks, buildCartesianScales, buildChartCss, cloneLinear, computeAreaLayout, computeLineLayout, effectiveIndexRange, elementClientCenter, indexRangeSize, linearTicks, nearestCategoryIndex, normalizeIndexRange, normalizeNumericDomain, panIndexRange, panNumericDomain, pointToBandAdapter, provideCartesianFromLineLayout, seriesColorVar, sliceByIndexRange, xScale, yScale, zoomIndexRange, zoomNumericDomain };
+/**
+ * Resolves the live theme corner radius (the `--radius` token) in pixels for SVG
+ * chart geometry, and re-emits when the global `theme-radius` axis switches.
+ *
+ * SVG `rx`/`ry` need px numbers, so this reads the computed `--radius` off
+ * `<html>` and converts rem→px. A `MutationObserver` on the `<html theme-radius>`
+ * attribute keeps the `px` signal in sync with `ThemeRadiusService` at runtime;
+ * charts default their corner radius to this value (still overridable per chart).
+ *
+ * SSR-safe: with no document it returns the `md` fallback and skips observing.
+ */
+declare class ChartThemeRadius {
+    private readonly document;
+    private readonly basePx;
+    /** Resolved base radius (`--radius`) in px; reactive to the theme-radius axis. */
+    readonly px: _angular_core.Signal<number>;
+    constructor();
+    private readBasePx;
+    private toPx;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ChartThemeRadius, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<ChartThemeRadius>;
+}
+
+export { CHART_DATA_ATTRIBUTE, CHART_THEMES, CartesianContext, CategoricalViewportContext, ChartContainer, ChartContext, ChartStyle, ChartThemeRadius, ScatterViewportContext, bandTicks, buildCartesianScales, buildChartCss, cloneLinear, computeAreaLayout, computeLineLayout, effectiveIndexRange, elementClientCenter, indexRangeSize, linearTicks, nearestCategoryIndex, normalizeIndexRange, normalizeNumericDomain, panIndexRange, panNumericDomain, pointToBandAdapter, provideCartesianFromLineLayout, seriesColorVar, sliceByIndexRange, xScale, yScale, zoomIndexRange, zoomNumericDomain };
 export type { AreaLayoutInput, AreaLayoutResult, CartesianBase, CategoryScale, ChartActivePoint, ChartConfig, ChartDatum, ChartDimensions, ChartIndexRange, ChartMargin, ChartOrientation, ChartSeriesConfig, ChartStyleVariant, ChartThemeKey, ChartTick, ClientPoint, LineCurve, LineLayoutResult, LinePoint, LineSeriesPath, NumericDomain, ValueScale };

package/types/ojiepermana-angular-chart-pie.d.ts

@@ -59,6 +59,7 @@ interface PieSliceClickEvent {
 }
 declare class PieChart {
     private readonly root;
+    private readonly themeRadius;
     readonly data: _angular_core.InputSignal<readonly Readonly<Record<string, unknown>>[]>;
     readonly valueKey: _angular_core.InputSignal<string>;
     readonly nameKey: _angular_core.InputSignal<string>;
@@ -67,13 +68,14 @@ declare class PieChart {
     readonly margin: _angular_core.InputSignal<ChartMargin>;
     readonly innerRadius: _angular_core.InputSignal<number>;
     readonly padAngle: _angular_core.InputSignal<number>;
-    readonly cornerRadius: _angular_core.InputSignal<number>;
+    readonly cornerRadius: _angular_core.InputSignal<number | null>;
     readonly startAngle: _angular_core.InputSignal<number>;
     readonly endAngle: _angular_core.InputSignal<number>;
     readonly showLabels: _angular_core.InputSignal<boolean>;
     readonly activeIndex: _angular_core.InputSignal<number | undefined>;
     readonly activeOffset: _angular_core.InputSignal<number>;
     readonly sliceClick: _angular_core.OutputEmitterRef<PieSliceClickEvent>;
+    protected readonly resolvedCornerRadius: _angular_core.Signal<number>;
     protected readonly innerWidth: _angular_core.Signal<number>;
     protected readonly innerHeight: _angular_core.Signal<number>;
     protected readonly layout: _angular_core.Signal<_ojiepermana_angular_chart_pie.PieLayout>;

package/types/ojiepermana-angular-chart-radial.d.ts

@@ -49,6 +49,7 @@ interface RadialBarClickEvent {
 }
 declare class RadialChart {
     private readonly root;
+    private readonly themeRadius;
     readonly data: _angular_core.InputSignal<readonly Readonly<Record<string, unknown>>[]>;
     readonly nameKey: _angular_core.InputSignal<string>;
     readonly valueKey: _angular_core.InputSignal<string>;
@@ -56,7 +57,7 @@ declare class RadialChart {
     readonly styles: _angular_core.InputSignal<"base">;
     readonly margin: _angular_core.InputSignal<ChartMargin>;
     readonly trackPadding: _angular_core.InputSignal<number>;
-    readonly cornerRadius: _angular_core.InputSignal<number>;
+    readonly cornerRadius: _angular_core.InputSignal<number | null>;
     readonly startAngle: _angular_core.InputSignal<number>;
     readonly endAngle: _angular_core.InputSignal<number>;
     readonly maxValue: _angular_core.InputSignal<number | undefined>;
@@ -64,6 +65,7 @@ declare class RadialChart {
     readonly showValueLabels: _angular_core.InputSignal<boolean>;
     readonly valueLabelFormat: _angular_core.InputSignal<RadialValueLabelFormatter>;
     readonly barClick: _angular_core.OutputEmitterRef<RadialBarClickEvent>;
+    protected readonly resolvedCornerRadius: _angular_core.Signal<number>;
     protected readonly innerWidth: _angular_core.Signal<number>;
     protected readonly innerHeight: _angular_core.Signal<number>;
     protected readonly layout: _angular_core.Signal<_ojiepermana_angular_chart_radial.RadialLayout>;