ngx-techlify-core 22.2.0 → 22.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-techlify-core",
-  "version": "22.2.0",
+  "version": "22.3.0",
   "peerDependencies": {
     "@angular/common": ">=22",
     "@angular/core": ">=22",
@@ -15,7 +15,8 @@
     "@angular/cdk": ">=22",
     "rxjs": ">=7.8.1",
     "zone.js": ">=0.15.0",
-    "ngx-infinite-scroll": ">=22.0.0"
+    "ngx-infinite-scroll": ">=22.0.0",
+    "angular-google-charts": ">=16.0.0"
   },
   "dependencies": {
     "bootstrap": "5.2",

package/types/ngx-techlify-core.d.ts

@@ -58,6 +58,7 @@ import * as i3$1 from "ngx-editor";
 import { Editor, Toolbar } from "ngx-editor";
 import { NgxSpinnerService } from "ngx-spinner";
 import * as i3 from "@angular/cdk/overlay";
+import { ChartType } from "angular-google-charts";
 export declare class ActionPopup {
   name: string;
   title: string;
@@ -6261,4 +6262,168 @@ export declare class DatetimeLocalDirective implements ControlValueAccessor {
     };
   }, {}, never, never, true, never>;
 }
+/** A column of aggregated data: the x column, then a column per series value and aggregate */
+export interface AggregateColumn {
+  key: string;
+  label: string;
+  type: 'text' | 'date' | 'number';
+  interval?: string | number;
+}
+/** Aggregated data, as returned by an aggregate endpoint, i.e. api/employee-data/aggregate */
+export interface AggregateData {
+  columns: AggregateColumn[];
+  rows: any[][];
+  totals: {
+    [columnKey: string]: number;
+  };
+}
+/**
+ * Loads aggregated data from an endpoint and displays it as a google chart
+ *
+ * The x, series, y and filters are sent as the request params, see ModelDataController in laravel-core.
+ * A custom endpoint can be used instead, i.e. for a calculation the generic aggregation can't do,
+ * as long as it returns the same AggregateData format
+ *
+ * Needs provideGoogleCharts() in the app providers, so all charts share the one script loader
+ *
+ * @example
+ * <app-techlify-chart title="Employees per Branch" url="api/employee-data/aggregate" [filters]="filters"
+ *    x="branch.title" series="gender.title" y="count"></app-techlify-chart>
+ */
+export declare class TechlifyChartComponent implements OnChanges {
+  /** Endpoint returning AggregateData */
+  url: string;
+  /** Filters of the model, i.e. { branch_ids: [1, 2], date_from: '2024-01-01' }. Arrays are sent comma separated */
+  filters: {
+    [key: string]: any;
+  };
+  /** Field to group by, on the x-axis: a column, i.e. join_date, or relation.column, i.e. branch.title */
+  x: string;
+  /** Date fields: day|week|month|quarter|year, number fields: the bucket size, i.e. 10 for age ranges */
+  xInterval: string | number;
+  /** moment format for date x values, defaults by the interval */
+  xFormat: string;
+  /** Field to split each group by, as a line/bar per value */
+  series: string;
+  /** Aggregates: count, or <sum|avg|min|max>:<number field> */
+  y: string | string[];
+  /** Show running totals along x */
+  cumulative: boolean;
+  /** Any other request params, i.e. for a custom endpoint */
+  params: {
+    [key: string]: any;
+  };
+  /** Chart type, i.e. ColumnChart, LineChart or PieChart */
+  type: `${ChartType}`;
+  title: string;
+  subtitle: string;
+  /** Google chart options, merged over the defaults */
+  chartOptions: any;
+  /** Colors of specific series by label, i.e. { Male: '#05A9F4' }. Others keep the chart's default colors */
+  colors: {
+    [label: string]: string;
+  };
+  /** Emits the loaded data, i.e. to show the totals */
+  loaded: EventEmitter<AggregateData>;
+  data: AggregateData;
+  chartColumns: any[];
+  chartData: any[][];
+  options: any;
+  isLoading: boolean;
+  hasError: boolean;
+  private readonly http;
+  private readonly requestHelperService;
+  private readonly changeDetector;
+  private readonly load$;
+  private lastRequest;
+  constructor();
+  /** The type as google chart's enum, as the type input also accepts its value, i.e. type="LineChart" */
+  get chartType(): ChartType;
+  /**
+   * Reload when the request changes, otherwise only redraw, i.e. when the chart options change
+   */
+  ngOnChanges(): void;
+  /**
+   * Returns the request params, without unset values, formatted as list filters, i.e. arrays comma separated
+   */
+  getParams(): {
+    [key: string]: any;
+  };
+  /**
+   * Converts the data into the google chart's columns, rows and options
+   */
+  render(): void;
+  /**
+   * Returns a random hex color
+   */
+  generateColor(): string;
+  /**
+   * Returns the x value as displayed, formatting dates and number ranges
+   *
+   * @param value x value of a row
+   * @param column the x column
+   */
+  formatX(value: any, column: AggregateColumn): string;
+  static ɵfac: i0.ɵɵFactoryDeclaration<TechlifyChartComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<TechlifyChartComponent, "app-techlify-chart", never, {
+    "url": {
+      "alias": "url";
+      "required": true;
+    };
+    "filters": {
+      "alias": "filters";
+      "required": false;
+    };
+    "x": {
+      "alias": "x";
+      "required": false;
+    };
+    "xInterval": {
+      "alias": "xInterval";
+      "required": false;
+    };
+    "xFormat": {
+      "alias": "xFormat";
+      "required": false;
+    };
+    "series": {
+      "alias": "series";
+      "required": false;
+    };
+    "y": {
+      "alias": "y";
+      "required": false;
+    };
+    "cumulative": {
+      "alias": "cumulative";
+      "required": false;
+    };
+    "params": {
+      "alias": "params";
+      "required": false;
+    };
+    "type": {
+      "alias": "type";
+      "required": false;
+    };
+    "title": {
+      "alias": "title";
+      "required": false;
+    };
+    "subtitle": {
+      "alias": "subtitle";
+      "required": false;
+    };
+    "chartOptions": {
+      "alias": "chartOptions";
+      "required": false;
+    };
+    "colors": {
+      "alias": "colors";
+      "required": false;
+    };
+  }, {
+    "loaded": "loaded";
+  }, never, ["*"], true, never>;
+}
 export { EntityFileListModule as EntityFilesViewAllModule };