@forgeroute/ui 0.3.2 → 0.3.3

package/package.json

@@ -1,16 +1,20 @@
 {
   "name": "@forgeroute/ui",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "peerDependencies": {
     "@angular/common": ">=22.0.0",
     "@angular/core": ">=22.0.0",
     "@angular/forms": ">=22.0.0",
     "@angular/router": ">=22.0.0",
-    "@angular/platform-browser": ">=22.0.0"
+    "@angular/platform-browser": ">=22.0.0",
+    "chart.js": ">=4.0.0"
   },
   "peerDependenciesMeta": {
     "@angular/forms": {
       "optional": false
+    },
+    "chart.js": {
+      "optional": true
     }
   },
   "publishConfig": {

package/types/forgeroute-ui.d.ts

@@ -1823,6 +1823,99 @@ export declare class ProgressBarComponent {
     };
   }, {}, never, never, true, never>;
 }
+/**
+ * Bar chart of one series (e.g. calls per day). Pass the category `labels` and the matching `values`.
+ *
+ *   <ui-bar-chart [labels]="['8/1', '8/2']" [values]="[3, 0]" ariaLabel="Daily call volume"
+ *                 unitSingular="call" unitPlural="calls" />
+ *
+ * - Bars show their value above them (`showValues`, a 0 bar shows nothing), the y axis starts at 0 and counts whole numbers.
+ * - The tooltip reads "<value> <unit>" (`unitSingular` for 1, `unitPlural` otherwise; no unit = just the number).
+ * - The canvas is an image for assistive tech (`role="img"` + `ariaLabel`); render the same figures as text next to it
+ *   (e.g. a visually hidden list) when the exact values matter.
+ * - Height is `height` px (shorter on phones: 200px up to 768px wide, 160px up to 480px wide, when the default 240 is used);
+ *   the width follows the container. Needs the optional peer dependency `chart.js` (>= 4).
+ */
+export declare class BarChartComponent {
+  /** Category labels, left to right (one per bar). */
+  readonly labels: import("@angular/core").InputSignal<string[]>;
+  /** The bar values, in the order of `labels`. */
+  readonly values: import("@angular/core").InputSignal<number[]>;
+  /** Bar colour (any CSS colour). */
+  readonly color: import("@angular/core").InputSignal<string>;
+  /** Bar colour while hovered. */
+  readonly hoverColor: import("@angular/core").InputSignal<string>;
+  /** Chart height in px. */
+  readonly height: import("@angular/core").InputSignal<number>;
+  /** Spoken description of the chart. */
+  readonly ariaLabel: import("@angular/core").InputSignal<string>;
+  /** Show each bar's value above it. */
+  readonly showValues: import("@angular/core").InputSignal<boolean>;
+  /** Tooltip unit for exactly 1 (e.g. "call"). */
+  readonly unitSingular: import("@angular/core").InputSignal<string>;
+  /** Tooltip unit for any other value (e.g. "calls"). */
+  readonly unitPlural: import("@angular/core").InputSignal<string>;
+  private readonly canvas;
+  private readonly zone;
+  private chart;
+  private readonly tooltipText;
+  protected readonly series: import("@angular/core").Signal<{
+    labels: string[];
+    data: number[];
+    color: string;
+    hoverColor: string;
+    showValues: boolean;
+  }>;
+  constructor();
+  static ɵfac: i0.ɵɵFactoryDeclaration<BarChartComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<BarChartComponent, "ui-bar-chart", never, {
+    "labels": {
+      "alias": "labels";
+      "required": false;
+      "isSignal": true;
+    };
+    "values": {
+      "alias": "values";
+      "required": false;
+      "isSignal": true;
+    };
+    "color": {
+      "alias": "color";
+      "required": false;
+      "isSignal": true;
+    };
+    "hoverColor": {
+      "alias": "hoverColor";
+      "required": false;
+      "isSignal": true;
+    };
+    "height": {
+      "alias": "height";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "showValues": {
+      "alias": "showValues";
+      "required": false;
+      "isSignal": true;
+    };
+    "unitSingular": {
+      "alias": "unitSingular";
+      "required": false;
+      "isSignal": true;
+    };
+    "unitPlural": {
+      "alias": "unitPlural";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
 export declare class SkeletonComponent {
   readonly height: import("@angular/core").InputSignal<number>;
   readonly width: import("@angular/core").InputSignal<string>;