@ojiepermana/angular-chart 22.0.27

package/package.json

@@ -0,0 +1,76 @@
+{
+  "name": "@ojiepermana/angular-chart",
+  "version": "22.0.27",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/edsis/angular.git"
+  },
+  "homepage": "https://github.com/edsis/angular#readme",
+  "bugs": {
+    "url": "https://github.com/edsis/angular/issues"
+  },
+  "peerDependencies": {
+    "@angular/common": ">=22.0.0",
+    "@angular/core": ">=22.0.0",
+    "@ojiepermana/angular-component": "^22.0.27"
+  },
+  "dependencies": {
+    "d3-array": "^3.2.4",
+    "d3-scale": "^4.0.2",
+    "d3-shape": "^3.2.0",
+    "tslib": "^2.8.1"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/ojiepermana-angular-chart.mjs",
+  "typings": "types/ojiepermana-angular-chart.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/ojiepermana-angular-chart.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-chart.mjs"
+    },
+    "./area": {
+      "types": "./types/ojiepermana-angular-chart-area.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-chart-area.mjs"
+    },
+    "./bar": {
+      "types": "./types/ojiepermana-angular-chart-bar.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-chart-bar.mjs"
+    },
+    "./core": {
+      "types": "./types/ojiepermana-angular-chart-core.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-chart-core.mjs"
+    },
+    "./line": {
+      "types": "./types/ojiepermana-angular-chart-line.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-chart-line.mjs"
+    },
+    "./pie": {
+      "types": "./types/ojiepermana-angular-chart-pie.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-chart-pie.mjs"
+    },
+    "./primitives": {
+      "types": "./types/ojiepermana-angular-chart-primitives.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-chart-primitives.mjs"
+    },
+    "./radar": {
+      "types": "./types/ojiepermana-angular-chart-radar.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-chart-radar.mjs"
+    },
+    "./radial": {
+      "types": "./types/ojiepermana-angular-chart-radial.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-chart-radial.mjs"
+    },
+    "./scatter": {
+      "types": "./types/ojiepermana-angular-chart-scatter.d.ts",
+      "default": "./fesm2022/ojiepermana-angular-chart-scatter.mjs"
+    }
+  },
+  "type": "module"
+}

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

@@ -0,0 +1,58 @@
+import * as _ojiepermana_angular_chart_core from '@ojiepermana/angular-chart/core';
+import { ChartOrientation, LineCurve, ChartMargin, ChartDatum, LineSeriesPath, LinePoint } from '@ojiepermana/angular-chart/core';
+import * as _angular_core from '@angular/core';
+
+interface AreaPointClickEvent {
+    readonly seriesKey: string;
+    readonly datumIndex: number;
+    readonly category: string;
+    readonly value: number;
+    readonly datum: ChartDatum;
+}
+/**
+ * Area chart — composable within `<Chart>`.
+ *
+ * - `stacked=true` stacks series along the value axis.
+ * - `gradient=true` fills each area with a vertical linear-gradient from
+ *   the series color (top) to transparent (bottom). The gradient is
+ *   emitted as `<defs><linearGradient>` per series, unique per chart id.
+ */
+declare class AreaChart {
+    private readonly root;
+    private readonly cart;
+    private readonly viewport;
+    readonly data: _angular_core.InputSignal<readonly Readonly<Record<string, unknown>>[]>;
+    readonly xKey: _angular_core.InputSignal<string>;
+    readonly orientation: _angular_core.InputSignal<ChartOrientation>;
+    readonly styles: _angular_core.InputSignal<"base">;
+    readonly stacked: _angular_core.InputSignal<boolean>;
+    readonly expanded: _angular_core.InputSignal<boolean>;
+    readonly gradient: _angular_core.InputSignal<boolean>;
+    readonly curve: _angular_core.InputSignal<LineCurve>;
+    readonly margin: _angular_core.InputSignal<ChartMargin>;
+    readonly strokeWidth: _angular_core.InputSignal<number>;
+    readonly showDots: _angular_core.InputSignal<boolean>;
+    readonly dotRadius: _angular_core.InputSignal<number>;
+    readonly pointClick: _angular_core.OutputEmitterRef<AreaPointClickEvent>;
+    protected readonly innerWidth: _angular_core.Signal<number>;
+    protected readonly innerHeight: _angular_core.Signal<number>;
+    protected readonly visibleStartIndex: _angular_core.Signal<number>;
+    protected readonly visibleData: _angular_core.Signal<readonly Readonly<Record<string, unknown>>[]>;
+    protected readonly layout: _angular_core.Signal<_ojiepermana_angular_chart_core.AreaLayoutResult>;
+    protected readonly series: _angular_core.Signal<readonly LineSeriesPath[]>;
+    protected readonly viewBox: _angular_core.Signal<string>;
+    protected readonly innerTransform: _angular_core.Signal<string>;
+    protected readonly ariaSummary: _angular_core.Signal<string>;
+    constructor();
+    protected gradientId(seriesKey: string): string;
+    protected areaFill(seriesKey: string, color: string): string;
+    protected emitClick(p: LinePoint): void;
+    protected setActivePoint(event: FocusEvent, p: LinePoint): void;
+    protected clearActivePoint(): void;
+    protected pointAriaLabel(p: LinePoint): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AreaChart, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AreaChart, "ChartArea", never, { "data": { "alias": "data"; "required": true; "isSignal": true; }; "xKey": { "alias": "xKey"; "required": true; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "styles": { "alias": "styles"; "required": false; "isSignal": true; }; "stacked": { "alias": "stacked"; "required": false; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; "gradient": { "alias": "gradient"; "required": false; "isSignal": true; }; "curve": { "alias": "curve"; "required": false; "isSignal": true; }; "margin": { "alias": "margin"; "required": false; "isSignal": true; }; "strokeWidth": { "alias": "strokeWidth"; "required": false; "isSignal": true; }; "showDots": { "alias": "showDots"; "required": false; "isSignal": true; }; "dotRadius": { "alias": "dotRadius"; "required": false; "isSignal": true; }; }, { "pointClick": "pointClick"; }, never, ["svg\\:g[ChartGrid]", "svg\\:g[ChartAxisX]", "svg\\:g[ChartAxisY]", "svg\\:g[ChartCrosshair]", "svg:g[ChartBrush]", "ChartTooltip", "ChartLegend", "ChartZoomControls"], true, never>;
+}
+
+export { AreaChart };
+export type { AreaPointClickEvent };

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

@@ -0,0 +1,171 @@
+import * as _ojiepermana_angular_chart_bar from '@ojiepermana/angular-chart/bar';
+import * as _angular_core from '@angular/core';
+import { ChartDatum, ChartOrientation, ChartStyleVariant, ChartMargin } from '@ojiepermana/angular-chart/core';
+import { scaleBand, scaleLinear } from 'd3-scale';
+
+/** Bar-chart layout variant. */
+type BarVariant = 'grouped' | 'stacked';
+/** A single bar rectangle ready to render. */
+interface BarRect {
+    readonly key: string;
+    readonly seriesKey: string;
+    readonly datumIndex: number;
+    readonly category: string;
+    readonly value: number;
+    readonly x: number;
+    readonly y: number;
+    readonly width: number;
+    readonly height: number;
+    readonly color: string;
+    readonly active: boolean;
+}
+/** Inputs required to compute bar-chart geometry. */
+interface BarLayoutInput {
+    readonly data: readonly ChartDatum[];
+    readonly xKey: string;
+    readonly seriesKeys: readonly string[];
+    readonly variant: BarVariant;
+    readonly orientation: ChartOrientation;
+    readonly innerWidth: number;
+    readonly innerHeight: number;
+    readonly bandPadding: number;
+    readonly groupPadding: number;
+    readonly colorKey?: string;
+    readonly activeKey?: string;
+    readonly activeValue?: string | number;
+}
+/** Computed layout: bars + scales. */
+interface BarLayoutResult {
+    readonly bars: readonly BarRect[];
+    readonly categoryScale: ReturnType<typeof scaleBand<string>>;
+    readonly valueScale: ReturnType<typeof scaleLinear<number, number>>;
+    readonly categories: readonly string[];
+}
+/** Build all bar rectangles for the given config. */
+declare function computeBarLayout(input: BarLayoutInput): BarLayoutResult;
+
+/**
+ * Styles supported by the bar family.
+ *
+ * - `base` — classic solid rectangles.
+ * - `dot`  — dot-matrix rendering: each bar becomes a stack of small rounded
+ *   cells, on top of a faint full-height cell track. Colors only reference
+ *   theme CSS variables (`--color-<key>` per series, `--muted` for the track),
+ *   so the style follows the active theme without touching the theme library.
+ */
+type BarChartStyle = ChartStyleVariant | 'dot';
+/** A faint background cell of the dot-matrix track. */
+interface BarDotTrackCell {
+    readonly key: string;
+    readonly x: number;
+    readonly y: number;
+    readonly width: number;
+    readonly height: number;
+}
+/** A filled (value) cell of the dot-matrix style. */
+interface BarDotValueCell extends BarDotTrackCell {
+    readonly seriesKey: string;
+    readonly datumIndex: number;
+    readonly color: string;
+    readonly active: boolean;
+}
+/** Inputs required to compute the dot-matrix cell layout. */
+interface BarDotLayoutInput {
+    readonly bars: readonly BarRect[];
+    readonly orientation: ChartOrientation;
+    readonly innerWidth: number;
+    readonly innerHeight: number;
+    /** Pixel position of value 0 on the value axis (`valueScale(0)`). */
+    readonly baseline: number;
+    /** Cell length along the value axis. Defaults to the bar thickness (square cells). */
+    readonly dotSize?: number;
+    /** Gap between consecutive cells along the value axis. */
+    readonly dotGap: number;
+}
+/** Computed dot-matrix layout: faint track cells + filled value cells. */
+interface BarDotLayoutResult {
+    readonly track: readonly BarDotTrackCell[];
+    readonly values: readonly BarDotValueCell[];
+}
+/**
+ * Build the dot-matrix cells for the `dot` bar style.
+ *
+ * Cells tile a global grid anchored at the value baseline, so stacked
+ * segments snap to the same rows and never overlap. A bar fills every cell
+ * whose center lies inside its value range; bars too short to cover a center
+ * still claim the cell nearest their midpoint when it is free.
+ */
+declare function computeBarDotCells(input: BarDotLayoutInput): BarDotLayoutResult;
+
+/** Event emitted when a user clicks a bar. */
+interface BarClickEvent {
+    readonly seriesKey: string;
+    readonly datumIndex: number;
+    readonly category: string;
+    readonly value: number;
+    readonly datum: ChartDatum;
+}
+/**
+ * Bar chart — composable within `<Chart>`.
+ *
+ * Layout variants (via inputs):
+ * - `orientation`: `'vertical'` (default) or `'horizontal'`
+ * - `variant`:     `'grouped'`  (default) or `'stacked'`
+ * - `styles`:      `'base'`     (default) or `'dot'` (dot-matrix cells)
+ */
+declare class BarChart {
+    private readonly root;
+    private readonly cart;
+    readonly data: _angular_core.InputSignal<readonly Readonly<Record<string, unknown>>[]>;
+    readonly xKey: _angular_core.InputSignal<string>;
+    readonly orientation: _angular_core.InputSignal<ChartOrientation>;
+    readonly variant: _angular_core.InputSignal<BarVariant>;
+    readonly styles: _angular_core.InputSignal<BarChartStyle>;
+    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 colorKey: _angular_core.InputSignal<string | undefined>;
+    readonly activeKey: _angular_core.InputSignal<string | undefined>;
+    readonly activeValue: _angular_core.InputSignal<string | number | undefined>;
+    readonly showValueLabels: _angular_core.InputSignal<boolean>;
+    readonly valueLabelFormat: _angular_core.InputSignal<(value: number) => string>;
+    /** Cell length along the value axis for the `dot` style; defaults to the bar thickness. */
+    readonly dotSize: _angular_core.InputSignal<number | undefined>;
+    /** 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>;
+    /** 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>;
+    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>;
+    protected readonly dotTrackCells: _angular_core.Signal<readonly _ojiepermana_angular_chart_bar.BarDotTrackCell[]>;
+    protected readonly dotValueCells: _angular_core.Signal<readonly BarDotValueCell[]>;
+    protected readonly viewBox: _angular_core.Signal<string>;
+    protected readonly innerTransform: _angular_core.Signal<string>;
+    protected readonly ariaSummary: _angular_core.Signal<string>;
+    constructor();
+    protected emitClick(bar: BarRect): void;
+    protected setActivePoint(event: FocusEvent, bar: BarRect): void;
+    protected clearActivePoint(): void;
+    protected barOpacity(bar: BarRect): number;
+    protected dotCellOpacity(cell: BarDotValueCell): number;
+    /** In `dot` style the bar rect stays as an invisible interaction target. */
+    protected barFill(bar: BarRect): string;
+    private emphasisOpacity;
+    protected formatValueLabel(bar: BarRect): string;
+    protected barLabelX(bar: BarRect): number;
+    protected barLabelY(bar: BarRect): number;
+    protected barLabelAnchor(bar: BarRect): 'middle' | 'start' | 'end';
+    protected barAriaLabel(bar: BarRect): string;
+    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>;
+}
+
+export { BarChart, computeBarDotCells, computeBarLayout };
+export type { BarChartStyle, BarClickEvent, BarDotLayoutInput, BarDotLayoutResult, BarDotTrackCell, BarDotValueCell, BarLayoutInput, BarLayoutResult, BarRect, BarVariant };