@lumeer/pivot 0.0.1

package/.eslintrc.json

@@ -0,0 +1,35 @@
+{
+  "extends": "../../.eslintrc.json",
+  "ignorePatterns": [
+    "!**/*"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "*.ts"
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": [
+        "*.html"
+      ],
+      "rules": {}
+    }
+  ]
+}

package/README.md

@@ -0,0 +1,24 @@
+# LmrPivotTable
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 15.2.0.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project lmr-pivot-table` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project lmr-pivot-table`.
+> Note: Don't forget to add `--project lmr-pivot-table` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build lmr-pivot-table` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build lmr-pivot-table`, go to the dist folder `cd dist/lmr-pivot-table` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test lmr-pivot-table` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/lmr-pivot-table",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@lumeer/pivot",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^16.2.12",
+    "@angular/core": "^16.2.12",
+    "@lumeer/data-filters": "^0.8.4",
+    "@lumeer/utils": "^0.1.3"
+  },
+  "dependencies": {
+    "tslib": "^2.6.2"
+  },
+  "sideEffects": false
+}

package/src/lib/directives/lmr-templates.directive.ts

@@ -0,0 +1,11 @@
+import {Directive, TemplateRef} from '@angular/core';
+
+@Directive({ selector: '[lmr-empty-tables-tmp]' })
+export class LmrEmptyTablesTemplateDirective {
+  constructor(public template: TemplateRef<any>) { }
+}
+
+@Directive({ selector: '[lmr-table-cell-tmp]' })
+export class LmrTableCellTemplateDirective {
+  constructor(public template: TemplateRef<any>) { }
+}

package/src/lib/lmr-pivot-table.component.html

@@ -0,0 +1,69 @@
+<ng-container *ngIf="{pivotTables: pivotTables$ | async, pivotData: pivotData$ | async} as data">
+  <ng-container *ngIf="data.pivotTables?.length && !(data.pivotData | pivotDataEmpty)">
+    <table *ngFor="let pivotTable of data.pivotTables; let first"
+           class="table table-without-padding table-borderless table-md"
+           [class.mt-4]="!first">
+      <tr *ngFor="let rowCells of pivotTable.cells; let rowIndex = index">
+
+        <ng-container *ngFor="let cell of rowCells; let cellIndex = index">
+          <td *ngIf="cell && {hasValue: cell | pivotTableCellHasValue} as cellData"
+              class="cell {{cell.constraint ? (cell.constraint.type | lowercase) : ''}} text-truncate"
+              [style.max-width.px]="300"
+              [class.sticky-start]="cell.stickyStart"
+              [class.sticky-top]="cell.stickyTop"
+              [rowSpan]="cell.rowSpan"
+              [colSpan]="cell.colSpan"
+              [style.top.px]="cell.stickyTop ? (rowIndex * 40) : undefined"
+              [style.left.px]="cell.stickyStart ? (cellIndex * 150) : undefined"
+              [ngClass]="cell.cssClass"
+              [style.background]="cell.background"
+              [style.color]="cell.background && (cell.background | contrastColor)">
+            <ng-container *ngIf="cell.summary">
+              <div class="d-flex align-items-center h-100">
+                <span class="summary" [class.me-2]="cellData.hasValue">{{cell.summary}}</span>
+                <ng-container *ngIf="cellData.hasValue">
+                  <ng-template #defaultTableCellTemplate>
+                  <span class="flex-grow-1 h-100 text-truncate d-inline-block">
+                    {{ cell.value }}
+                  </span>
+                  </ng-template>
+
+                  <ng-template
+                    [ngTemplateOutlet]="tableCellTemplate || defaultTableCellTemplate"
+                    [ngTemplateOutletContext]="{ value: cell.value, cell: cell }">
+                  </ng-template>
+                </ng-container>
+              </div>
+            </ng-container>
+            <ng-container *ngIf="!cell.summary">
+              <ng-container *ngIf="cellData.hasValue">
+                <ng-template #defaultTableCellTemplate>
+                  <span class="d-inline-block">
+                    {{ cell.value }}
+                  </span>
+                </ng-template>
+
+                <ng-template
+                  [ngTemplateOutlet]="tableCellTemplate || defaultTableCellTemplate"
+                  [ngTemplateOutletContext]="{ value: cell.value, cell: cell }">
+                </ng-template>
+              </ng-container>
+              <ng-container *ngIf="!cellData.hasValue">&nbsp;</ng-container>
+            </ng-container>
+          </td>
+        </ng-container>
+      </tr>
+    </table>
+  </ng-container>
+
+  <ng-container *ngIf="!data.pivotTables?.length || (data.pivotData | pivotDataEmpty)">
+    <ng-template #defaultEmptyTablesTemplate>
+      <div>&nbsp;</div>
+    </ng-template>
+
+    <ng-template
+      [ngTemplateOutlet]="emptyTablesTemplate || defaultEmptyTablesTemplate"
+      [ngTemplateOutletContext]="{  }">
+    </ng-template>
+  </ng-container>
+</ng-container>

package/src/lib/lmr-pivot-table.component.scss

@@ -0,0 +1,69 @@
+.table {
+  border-spacing: 0;
+  border-collapse: separate;
+}
+
+.pivot-data-cell,
+.pivot-data-group-cell {
+  text-align: right;
+}
+
+.pivot-column-header-cell,
+.pivot-row-header-cell,
+.pivot-data-group-cell,
+.pivot-row-group-header-cell,
+.pivot-column-group-header-cell {
+  font-weight: bold;
+  border: 1px #f8f9fa solid;
+}
+
+.pivot-row-header-cell,
+.pivot-row-group-header-cell,
+.pivot-empty-cell {
+  &.sticky-start {
+    position: sticky;
+    width: 150px;
+    min-width: 150px;
+    max-width: 150px !important;
+    z-index: 9;
+  }
+}
+
+.pivot-column-header-cell,
+.pivot-column-group-header-cell,
+.pivot-empty-cell {
+  &.sticky-top {
+    position: sticky;
+    z-index: 10;
+  }
+}
+
+.pivot-empty-cell {
+  background: white;
+  border: 1px white solid;
+
+  &.sticky-top {
+    z-index: 11;
+  }
+}
+
+.cell.color {
+  padding: 0 !important;
+  height: 30px;
+
+  .summary {
+    padding-left: 0.5rem;
+  }
+}
+
+data-input-preview.clickable-cell {
+  cursor: pointer;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.data-input {
+  min-height: 30px;
+}

package/src/lib/lmr-pivot-table.component.ts

@@ -0,0 +1,108 @@
+import {ChangeDetectionStrategy, Component, ContentChild, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, TemplateRef} from '@angular/core';
+import {LmrPivotConfig, LmrPivotStrings, LmrPivotTransform} from './util/lmr-pivot-config';
+import {Collection, ConstraintData, DocumentsAndLinksData, LinkType, Query} from '@lumeer/data-filters';
+import {PivotDataConverter} from './util/pivot-data-converter';
+import {LmrPivotData} from './util/lmr-pivot-data';
+import {asyncScheduler, BehaviorSubject, filter, map, Observable, tap, throttleTime} from 'rxjs';
+import {LmrPivotTable, LmrPivotTableCell} from './util/lmr-pivot-table';
+import {PivotTableConverter} from './util/pivot-table-converter';
+import {LmrEmptyTablesTemplateDirective, LmrTableCellTemplateDirective} from './directives/lmr-templates.directive';
+
+interface Data {
+  collections: Collection[];
+  linkTypes: LinkType[];
+  data: DocumentsAndLinksData;
+  query: Query;
+  constraintData: ConstraintData;
+  config: LmrPivotConfig;
+  transform: LmrPivotTransform;
+}
+
+@Component({
+  selector: 'lmr-pivot-table',
+  templateUrl: 'lmr-pivot-table.component.html',
+  styleUrls: ['./lmr-pivot-table.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class LmrPivotTableComponent implements OnInit, OnChanges {
+
+  @Input()
+  public collections: Collection[];
+
+  @Input()
+  public data: DocumentsAndLinksData;
+
+  @Input()
+  public linkTypes: LinkType[];
+
+  @Input()
+  public query: Query;
+
+  @Input()
+  public constraintData: ConstraintData;
+
+  @Input()
+  public config: LmrPivotConfig;
+
+  @Input()
+  public transform: LmrPivotTransform;
+
+  @Input()
+  public strings: LmrPivotStrings;
+
+  @Output()
+  public cellClick = new EventEmitter<LmrPivotTableCell>();
+
+  @Output()
+  public pivotDataChange = new EventEmitter<LmrPivotData>();
+
+  @ContentChild(LmrEmptyTablesTemplateDirective, { read: TemplateRef }) emptyTablesTemplate: TemplateRef<any>;
+  @ContentChild(LmrTableCellTemplateDirective, { read: TemplateRef }) tableCellTemplate: TemplateRef<any>;
+
+  private readonly pivotTransformer = new PivotDataConverter();
+  private readonly pivotTableConverter: PivotTableConverter = new PivotTableConverter();
+
+  private dataSubject = new BehaviorSubject<Data>(null);
+
+  public pivotData$: Observable<LmrPivotData>;
+  public pivotTables$: Observable<LmrPivotTable[]>;
+
+  public ngOnInit() {
+    const observable = this.dataSubject.pipe(filter(data => !!data));
+
+    this.pivotData$ = observable.pipe(
+      throttleTime(200, asyncScheduler, {trailing: true, leading: true}),
+      map(data => this.handleData(data)),
+      tap(data => this.pivotDataChange.emit(data)),
+    );
+
+    this.pivotTables$ = this.pivotData$.pipe(
+      map(data => this.pivotTableConverter.createTables(data, this.strings))
+    );
+  }
+
+  private handleData(data: Data): LmrPivotData {
+    return this.pivotTransformer.createData(
+      data.config,
+      data.transform,
+      data.collections,
+      data.linkTypes,
+      data.data,
+      data.query,
+      data.constraintData
+    );
+  }
+
+  public ngOnChanges(changes: SimpleChanges) {
+    this.dataSubject.next({
+      config: this.config,
+      transform: this.transform,
+      collections: this.collections,
+      linkTypes: this.linkTypes,
+      data: this.data,
+      query: this.query,
+      constraintData: this.constraintData,
+    });
+  }
+
+}

package/src/lib/lmr-pivot-table.module.ts

@@ -0,0 +1,28 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {LmrPivotTableComponent} from './lmr-pivot-table.component';
+import {PivotDataEmptyPipe} from './pipes/pivot-data-empty.pipe';
+import {PivotTableCellHasValuePipe} from './pipes/pivot-table-value.pipe';
+import {ContrastColorPipe} from './pipes/contrast-color.pipe';
+import {LmrEmptyTablesTemplateDirective, LmrTableCellTemplateDirective} from './directives/lmr-templates.directive';
+
+@NgModule({
+  declarations: [
+    LmrPivotTableComponent,
+    PivotDataEmptyPipe,
+    PivotTableCellHasValuePipe,
+    ContrastColorPipe,
+    LmrEmptyTablesTemplateDirective,
+    LmrTableCellTemplateDirective,
+  ],
+  imports: [
+    CommonModule,
+  ],
+  exports: [
+    LmrPivotTableComponent,
+    LmrEmptyTablesTemplateDirective,
+    LmrTableCellTemplateDirective,
+  ]
+})
+export class LmrPivotTableModule {
+}

package/src/lib/pipes/contrast-color.pipe.ts

@@ -0,0 +1,33 @@
+/*
+ * Lumeer: Modern Data Definition and Processing Platform
+ *
+ * Copyright (C) since 2017 Lumeer.io, s.r.o. and/or its affiliates.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import {Injectable, Pipe, PipeTransform} from '@angular/core';
+import {contrastColor} from '../util/pivot-util';
+
+
+@Pipe({
+  name: 'contrastColor',
+})
+@Injectable({
+  providedIn: 'root',
+})
+export class ContrastColorPipe implements PipeTransform {
+  public transform(color: string, returnCodes?: {dark: string; light: string}, opacity?: number): string {
+    return contrastColor(color, returnCodes, opacity);
+  }
+}

package/src/lib/pipes/pivot-data-empty.pipe.ts

@@ -0,0 +1,36 @@
+/*
+ * Lumeer: Modern Data Definition and Processing Platform
+ *
+ * Copyright (C) since 2017 Lumeer.io, s.r.o. and/or its affiliates.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import {Pipe, PipeTransform} from '@angular/core';
+
+import {LmrPivotData} from '../util/lmr-pivot-data';
+
+@Pipe({
+  name: 'pivotDataEmpty',
+})
+export class PivotDataEmptyPipe implements PipeTransform {
+  public transform(value: LmrPivotData): boolean {
+    let anythingToDisplay = false;
+
+    value?.data?.forEach(d => {
+      anythingToDisplay = anythingToDisplay || d.columnHeaders?.length > 0 || d.rowHeaders?.length > 0;
+    });
+
+    return !anythingToDisplay;
+  }
+}

package/src/lib/pipes/pivot-table-value.pipe.ts

@@ -0,0 +1,32 @@
+/*
+ * Lumeer: Modern Data Definition and Processing Platform
+ *
+ * Copyright (C) since 2017 Lumeer.io, s.r.o. and/or its affiliates.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import {Pipe, PipeTransform} from '@angular/core';
+
+import {isNotNullOrUndefined} from '@lumeer/utils';
+
+import {LmrPivotTableCell} from '../util/lmr-pivot-table';
+
+@Pipe({
+  name: 'pivotTableCellHasValue',
+})
+export class PivotTableCellHasValuePipe implements PipeTransform {
+  public transform(cell: LmrPivotTableCell): boolean {
+    return isNotNullOrUndefined(cell.value) && String(cell.value).trim() !== '';
+  }
+}

package/src/lib/util/lmr-pivot-config.ts

@@ -0,0 +1,68 @@
+import {Constraint, DataAggregationType, QueryAttribute, QueryStem} from '@lumeer/data-filters';
+
+export interface LmrPivotConfig {
+  version?: LmrPivotConfigVersion;
+  stemsConfigs: LmrPivotStemConfig[];
+  mergeTables?: boolean;
+}
+
+export interface LmrPivotTransform {
+  checkValidConstraintOverride?: (c1: Constraint, c2: Constraint) => Constraint;
+  translateAggregation?: (type: DataAggregationType) => string;
+}
+
+export interface LmrPivotStrings {
+  summaryString: string;
+  headerSummaryString: string;
+}
+
+export interface LmrPivotStemConfig {
+  stem?: QueryStem;
+  rowAttributes: LmrPivotRowAttribute[];
+  columnAttributes: LmrPivotColumnAttribute[];
+  valueAttributes: LmrPivotValueAttribute[];
+}
+
+export enum LmrPivotConfigVersion {
+  V1 = '1',
+}
+
+export interface LmrPivotAttribute extends QueryAttribute {}
+
+export interface LmrPivotRowColumnAttribute extends LmrPivotAttribute {
+  showSums?: boolean;
+  sticky?: boolean;
+  sort?: LmrPivotSort;
+}
+
+export interface LmrPivotRowAttribute extends LmrPivotRowColumnAttribute {}
+
+export interface LmrPivotColumnAttribute extends LmrPivotRowColumnAttribute {}
+
+export interface LmrPivotSortValue {
+  title: string;
+  isSummary?: boolean;
+}
+
+export interface LmrPivotSortList {
+  valueTitle: string;
+  values: LmrPivotSortValue[];
+}
+
+export interface LmrPivotSort {
+  attribute?: LmrPivotAttribute;
+  list?: LmrPivotSortList;
+  asc: boolean;
+}
+
+export enum LmrPivotValueType {
+  Default = 'default',
+  ColumnPercentage = 'column',
+  RowPercentage = 'row',
+  AllPercentage = 'all',
+}
+
+export interface LmrPivotValueAttribute extends LmrPivotAttribute {
+  aggregation: DataAggregationType;
+  valueType?: LmrPivotValueType;
+}

package/src/lib/util/lmr-pivot-constants.ts

@@ -0,0 +1,13 @@
+export const COLOR_GRAY100 = '#f8f9fa';
+export const COLOR_GRAY200 = '#ecf0f1';
+export const COLOR_GRAY300 = '#dee2e6';
+export const COLOR_GRAY400 = '#ced4da';
+export const COLOR_GRAY500 = '#b4bcc2';
+export const COLOR_GRAY600 = '#95a5a6';
+export const COLOR_GRAY700 = '#7b8a8b';
+export const COLOR_GRAY800 = '#343a40';
+export const COLOR_GRAY900 = '#212529';
+
+export const COLOR_PRIMARY = '#253746';
+
+export const COLOR_LIGHT = COLOR_GRAY200;

package/src/lib/util/lmr-pivot-data.ts

@@ -0,0 +1,57 @@
+/*
+ * Lumeer: Modern Data Definition and Processing Platform
+ *
+ * Copyright (C) since 2017 Lumeer.io, s.r.o. and/or its affiliates.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import {Constraint, ConstraintData, DataAggregationType, DataResource} from '@lumeer/data-filters';
+import {LmrPivotSort, LmrPivotValueType} from './lmr-pivot-config';
+
+export interface LmrPivotData {
+  data: LmrPivotStemData[];
+
+  constraintData?: ConstraintData;
+  mergeTables?: boolean;
+  ableToMerge?: boolean;
+}
+
+export interface LmrPivotStemData {
+  columnHeaders: LmrPivotDataHeader[];
+  rowHeaders: LmrPivotDataHeader[];
+  valueTitles: string[];
+  values: any[][];
+  dataResources: DataResource[][][];
+  valuesConstraints?: Constraint[];
+  valueTypes?: LmrPivotValueType[];
+  valueAggregations?: DataAggregationType[];
+
+  rowShowSums: boolean[];
+  rowSticky: boolean[];
+  rowSorts?: LmrPivotSort[];
+  columnShowSums: boolean[];
+  columnSticky: boolean[];
+  columnSorts?: LmrPivotSort[];
+  hasAdditionalColumnLevel?: boolean;
+}
+
+export interface LmrPivotDataHeader {
+  title: string;
+  children?: LmrPivotDataHeader[];
+  targetIndex?: number;
+  color: string;
+  isValueHeader: boolean;
+  constraint?: Constraint;
+  attributeName?: string;
+}

package/src/lib/util/lmr-pivot-table.ts

@@ -0,0 +1,38 @@
+/*
+ * Lumeer: Modern Data Definition and Processing Platform
+ *
+ * Copyright (C) since 2017 Lumeer.io, s.r.o. and/or its affiliates.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import {Constraint, DataResource} from '@lumeer/data-filters';
+
+export interface LmrPivotTable {
+  cells: LmrPivotTableCell[][];
+}
+
+export interface LmrPivotTableCell {
+  value: any;
+  dataResources?: DataResource[];
+  constraint?: Constraint;
+  summary?: string;
+  rowSpan: number;
+  colSpan: number;
+  cssClass: string;
+  isHeader: boolean;
+  background?: string;
+  label?: string;
+  stickyTop?: boolean;
+  stickyStart?: boolean;
+}