feat(reports): add heat map widget

projects/core/heat-map/src/public_api.ts

@@ -20,4 +20,5 @@
  *
  */
 
+export * from './heat-map';
 export * from './heat-map-module';

projects/core/reports/src/interface/widgets-instances/heat-map-widget-instance.ts

@@ -0,0 +1,37 @@
+/**
+ * @license
+ * Copyright (C) Gnucoop soc. coop.
+ *
+ * This file is part of the Advanced JSON forms (ajf).
+ *
+ * Advanced JSON forms (ajf) is free software: you can redistribute it and/or
+ * modify it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the License,
+ * or (at your option) any later version.
+ *
+ * Advanced JSON forms (ajf) 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 Affero
+ * General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with Advanced JSON forms (ajf).
+ * If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import {AjfHeatMapFeatureCollection} from '@ajf/core/heat-map';
+
+import {AjfHeatMapWidget} from '../widgets/heat-map-widget';
+import {AjfBaseWidgetInstance} from './base-widget-instance';
+
+export interface AjfHeatMapWidgetInstance extends AjfBaseWidgetInstance {
+  widget: AjfHeatMapWidget;
+  idProp: string;
+  features: AjfHeatMapFeatureCollection;
+  values: number[];
+  startColor: string;
+  endColor: string;
+  highlightColor: string;
+  showVisualMap: boolean;
+}

projects/core/reports/src/interface/widgets-instances/widget-instance.ts

@@ -29,6 +29,7 @@ import {AjfDialogWidgetInstance} from './dialog-widget-instance';
 import {AjfDynamicTableWidgetInstance} from './dynamic-table-widget-instance';
 import {AjfFormulaWidgetInstance} from './formula-widget-instance';
 import {AjfGraphWidgetInstance} from './graph-widget-instance';
+import {AjfHeatMapWidgetInstance} from './heat-map-widget-instance';
 import {AjfImageContainerWidgetInstance} from './image-container-widget-instance';
 import {AjfImageWidgetInstance} from './image-widget-instance';
 import {AjfLayoutWidgetInstance} from './layout-widget-instance';
@@ -51,6 +52,7 @@ export type AjfWidgetInstance =
   | AjfDynamicTableWidgetInstance
   | AjfFormulaWidgetInstance
   | AjfGraphWidgetInstance
+  | AjfHeatMapWidgetInstance
   | AjfImageContainerWidgetInstance
   | AjfImageWidgetInstance
   | AjfLayoutWidgetInstance

projects/core/reports/src/interface/widgets/heat-map-widget.ts

@@ -0,0 +1,37 @@
+/**
+ * @license
+ * Copyright (C) Gnucoop soc. coop.
+ *
+ * This file is part of the Advanced JSON forms (ajf).
+ *
+ * Advanced JSON forms (ajf) is free software: you can redistribute it and/or
+ * modify it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the License,
+ * or (at your option) any later version.
+ *
+ * Advanced JSON forms (ajf) 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 Affero
+ * General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with Advanced JSON forms (ajf).
+ * If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import {AjfHeatMapFeatureCollection} from '@ajf/core/heat-map';
+
+import {AjfBaseWidget} from './base-widget';
+import {AjfWidgetType} from './widget-type';
+
+export interface AjfHeatMapWidget extends AjfBaseWidget {
+  widgetType: AjfWidgetType.HeatMap;
+  idProp?: string;
+  features: AjfHeatMapFeatureCollection | string;
+  values: string | number[];
+  startColor?: string;
+  endColor?: string;
+  highlightColor?: string;
+  showVisualMap?: boolean;
+}

projects/core/reports/src/interface/widgets/widget-type.ts

@@ -36,5 +36,6 @@ export enum AjfWidgetType {
   Graph,
   PaginatedList,
   Dialog,
+  HeatMap,
   LENGTH,
 }

projects/core/reports/src/interface/widgets/widget.ts

@@ -27,6 +27,7 @@ import {AjfDataWidget} from './data-widget';
 import {AjfDialogWidget} from './dialog-widget';
 import {AjfDynamicTableWidget} from './dynamic-table-widget';
 import {AjfFormulaWidget} from './formula-widget';
+import {AjfHeatMapWidget} from './heat-map-widget';
 import {AjfImageContainerWidget} from './image-container-widget';
 import {AjfImageWidget} from './image-widget';
 import {AjfLayoutWidget} from './layout-widget';
@@ -50,6 +51,7 @@ export type AjfWidget =
   | AjfDynamicTableWidget
   | AjfFormulaWidget
   | AjfGraphWidget
+  | AjfHeatMapWidget
   | AjfImageContainerWidget
   | AjfImageWidget
   | AjfLayoutWidget

projects/core/reports/src/public_api.ts

@@ -46,6 +46,7 @@ export * from './interface/widgets/dialog-widget';
 export * from './interface/widgets/filter';
 export * from './interface/widgets/formula-widget';
 export * from './interface/widgets/graph-widget';
+export * from './interface/widgets/heat-map-widget';
 export * from './interface/widgets/image-container-widget';
 export * from './interface/widgets/image-widget';
 export * from './interface/widgets/layout-widget';
@@ -66,6 +67,7 @@ export * from './interface/widgets-instances/dialog-widget-instance';
 export * from './interface/widgets-instances/filter-instance';
 export * from './interface/widgets-instances/formula-widget-instance';
 export * from './interface/widgets-instances/graph-widget-instance';
+export * from './interface/widgets-instances/heat-map-widget-instance';
 export * from './interface/widgets-instances/image-container-widget-instance';
 export * from './interface/widgets-instances/image-widget-instance';
 export * from './interface/widgets-instances/layout-widget-instance';

projects/core/reports/src/utils/widgets-instances/is-heat-map-widget-instance.ts

@@ -0,0 +1,31 @@
+/**
+ * @license
+ * Copyright (C) Gnucoop soc. coop.
+ *
+ * This file is part of the Advanced JSON forms (ajf).
+ *
+ * Advanced JSON forms (ajf) is free software: you can redistribute it and/or
+ * modify it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the License,
+ * or (at your option) any later version.
+ *
+ * Advanced JSON forms (ajf) 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 Affero
+ * General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with Advanced JSON forms (ajf).
+ * If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import {AjfHeatMapWidgetInstance} from '../../interface/widgets-instances/heat-map-widget-instance';
+import {AjfWidgetInstance} from '../../interface/widgets-instances/widget-instance';
+import {isHeatMapWidget} from '../widgets/is-heat-map-widget';
+
+export const isHeatMapWidgetInstance = (
+  instance: AjfWidgetInstance,
+): instance is AjfHeatMapWidgetInstance => {
+  return instance != null && isHeatMapWidget(instance.widget);
+};

projects/core/reports/src/utils/widgets-instances/widget-to-widget-instance.ts

@@ -36,6 +36,7 @@ import {isDialogWidget} from '../widgets/is-dialog-widget';
 import {isDynamicTableWidget} from '../widgets/is-dynamic-table-widget';
 import {isFormulaWidget} from '../widgets/is-formula-widget';
 import {isGraphWidget} from '../widgets/is-graph-widget';
+import {isHeatMapWidget} from '../widgets/is-heat-map-widget';
 import {isImageContainerWidget} from '../widgets/is-image-container-widget';
 import {isImageWidget} from '../widgets/is-image-widget';
 import {isMapWidget} from '../widgets/is-map-widget';
@@ -48,6 +49,7 @@ import {isDialogWidgetInstance} from '../widgets-instances/is-dialog-widget-inst
 import {isDynamicTableWidgetInstance} from '../widgets-instances/is-dynamic-table-widget-instance';
 import {isFormulaWidgetInstance} from '../widgets-instances/is-formula-widget-instance';
 import {isGraphWidgetInstance} from '../widgets-instances/is-graph-widget-instance';
+import {isHeatMapWidgetInstance} from '../widgets-instances/is-heat-map-widget-instance';
 import {isImageContainerWidgetInstance} from '../widgets-instances/is-image-container-widget-instance';
 import {isImageWidgetInstance} from '../widgets-instances/is-image-widget-instance';
 import {isMapWidgetInstance} from '../widgets-instances/is-map-widget-instance';
@@ -275,6 +277,15 @@ export function widgetToWidgetInstance(
     }
   } else if (isDialogWidget(widget) && isDialogWidgetInstance(wi)) {
     wi.toggle = widgetToWidgetInstance(widget.toggle, context, ts, variables);
+  } else if (isHeatMapWidget(widget) && isHeatMapWidgetInstance(wi)) {
+    wi.idProp = widget.idProp || 'id';
+    wi.features = (typeof widget.features === 'string'
+      ? JSON.parse(widget.features)
+      : widget.features) || {type: 'FeatureCollection', features: []};
+    wi.startColor = widget.startColor || '#ffeb3b';
+    wi.endColor = widget.endColor || '#f44336';
+    wi.highlightColor = widget.highlightColor || '#009688';
+    wi.showVisualMap = widget.showVisualMap === true;
   } else if (widget.widgetType > 100) {
     const iiFn =
       componentsMap[widget.widgetType] != null

projects/core/reports/src/utils/widgets/is-heat-map-widget.ts

@@ -0,0 +1,29 @@
+/**
+ * @license
+ * Copyright (C) Gnucoop soc. coop.
+ *
+ * This file is part of the Advanced JSON forms (ajf).
+ *
+ * Advanced JSON forms (ajf) is free software: you can redistribute it and/or
+ * modify it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the License,
+ * or (at your option) any later version.
+ *
+ * Advanced JSON forms (ajf) 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 Affero
+ * General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with Advanced JSON forms (ajf).
+ * If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import {AjfHeatMapWidget} from '../../interface/widgets/heat-map-widget';
+import {AjfWidget} from '../../interface/widgets/widget';
+import {AjfWidgetType} from '../../interface/widgets/widget-type';
+
+export const isHeatMapWidget = (widget: AjfWidget): widget is AjfHeatMapWidget => {
+  return widget != null && widget.widgetType === AjfWidgetType.HeatMap;
+};

projects/dev-app/src/widgets.ts

@@ -29,6 +29,8 @@ import {
 } from '@ajf/core/reports';
 import {TranslocoService} from '@ajf/core/transloco';
 
+import {features, values} from './heat-map/features';
+
 const baseWidget = {
   styles: {height: '200px'},
   visibility: {condition: 'true'},
@@ -337,6 +339,28 @@ export function demoWidgets(ts: TranslocoService): {name: string; instance: AjfW
         ],
       },
     },
+    {
+      name: 'Heat map',
+      instance: {
+        ...createWidgetInstance(
+          {
+            ...baseWidget,
+            widgetType: AjfWidgetType.HeatMap,
+            idProp: '',
+            features: '',
+            values: '',
+          },
+          {},
+          ts,
+        ),
+        features,
+        values,
+        idProp: 'GID_1',
+        startColor: '#ffeb3b',
+        endColor: '#f44336',
+        highlightColor: '#009688',
+      },
+    },
   ];
   return widgets;
 }

projects/ionic/reports/src/heat-map-widget.html

@@ -0,0 +1,8 @@
+<ajf-heat-map *ngIf="instance"
+    [idProp]="instance.idProp"
+    [features]="instance.features"
+    [values]="instance.values"
+    [startColor]="instance.startColor"
+    [endColor]="instance.endColor"
+    [highlightColor]="instance.highlightColor"
+    [showVisualMap]="instance.showVisualMap"></ajf-heat-map>

projects/ionic/reports/src/heat-map-widget.scss

@@ -0,0 +1,6 @@
+ajf-widget {
+  ajf-heat-map {
+    flex: 1;
+    height: 100%;
+  }
+}

projects/ionic/reports/src/heat-map-widget.ts

@@ -0,0 +1,42 @@
+/**
+ * @license
+ * Copyright (C) Gnucoop soc. coop.
+ *
+ * This file is part of the Advanced JSON forms (ajf).
+ *
+ * Advanced JSON forms (ajf) is free software: you can redistribute it and/or
+ * modify it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the License,
+ * or (at your option) any later version.
+ *
+ * Advanced JSON forms (ajf) 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 Affero
+ * General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with Advanced JSON forms (ajf).
+ * If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import {AjfBaseWidgetComponent, AjfHeatMapWidgetInstance} from '@ajf/core/reports';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  ViewEncapsulation,
+} from '@angular/core';
+
+@Component({
+  templateUrl: 'heat-map-widget.html',
+  styleUrls: ['heat-map-widget.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+})
+export class AjfHeatMapWidgetComponent extends AjfBaseWidgetComponent<AjfHeatMapWidgetInstance> {
+  constructor(cdr: ChangeDetectorRef, el: ElementRef) {
+    super(cdr, el);
+  }
+}

projects/ionic/reports/src/reports-module.ts

@@ -22,6 +22,7 @@
 
 import {AjfChartModule} from '@ajf/core/chart';
 import {AjfCommonModule} from '@ajf/core/common';
+import {AjfHeatMapModule} from '@ajf/core/heat-map';
 import {AjfMapModule} from '@ajf/core/map';
 import {AjfPageBreakModule} from '@ajf/core/page-break';
 import {AjfReportsModule as CoreModule} from '@ajf/core/reports';
@@ -36,6 +37,7 @@ import {AjfChartWidgetComponent} from './chart-widget';
 import {AjfDialogModal} from './dialog-modal';
 import {AjfDialogWidgetComponent} from './dialog-widget';
 import {AjfFormulaWidgetComponent} from './formula-widget';
+import {AjfHeatMapWidgetComponent} from './heat-map-widget';
 import {AjfImageContainerWidgetComponent} from './image-container-widget';
 import {AjfImageWidgetComponent} from './image-widget';
 import {AjfMapWidgetComponent} from './map-widget';
@@ -50,6 +52,7 @@ import {AjfColumnWidgetComponent, AjfLayoutWidgetComponent, AjfReportWidget} fro
   imports: [
     AjfChartModule,
     AjfCommonModule,
+    AjfHeatMapModule,
     AjfImageModule,
     AjfMapModule,
     AjfPageBreakModule,
@@ -65,6 +68,7 @@ import {AjfColumnWidgetComponent, AjfLayoutWidgetComponent, AjfReportWidget} fro
     AjfDialogModal,
     AjfDialogWidgetComponent,
     AjfFormulaWidgetComponent,
+    AjfHeatMapWidgetComponent,
     AjfImageContainerWidgetComponent,
     AjfImageWidgetComponent,
     AjfLayoutWidgetComponent,

projects/ionic/reports/src/widget.ts

@@ -44,6 +44,7 @@ import {BehaviorSubject, Observable} from 'rxjs';
 import {AjfChartWidgetComponent} from './chart-widget';
 import {AjfDialogWidgetComponent} from './dialog-widget';
 import {AjfFormulaWidgetComponent} from './formula-widget';
+import {AjfHeatMapWidgetComponent} from './heat-map-widget';
 import {AjfImageContainerWidgetComponent} from './image-container-widget';
 import {AjfImageWidgetComponent} from './image-widget';
 import {AjfMapWidgetComponent} from './map-widget';
@@ -67,6 +68,7 @@ const defaultWidgetsFactory = (): AjfWidgetComponentsMap => {
   defaultWidgets[wt.ImageContainer] = {component: AjfImageContainerWidgetComponent};
   defaultWidgets[wt.PaginatedList] = {component: AjfPaginatedListWidgetComponent};
   defaultWidgets[wt.Dialog] = {component: AjfDialogWidgetComponent};
+  defaultWidgets[wt.HeatMap] = {component: AjfHeatMapWidgetComponent};
   return defaultWidgets;
 };
 

projects/material/reports/src/heat-map-widget.html

@@ -0,0 +1,8 @@
+<ajf-heat-map *ngIf="instance"
+    [idProp]="instance.idProp"
+    [features]="instance.features"
+    [values]="instance.values"
+    [startColor]="instance.startColor"
+    [endColor]="instance.endColor"
+    [highlightColor]="instance.highlightColor"
+    [showVisualMap]="instance.showVisualMap"></ajf-heat-map>

projects/material/reports/src/heat-map-widget.scss

@@ -0,0 +1,6 @@
+ajf-widget {
+  ajf-heat-map {
+    flex: 1;
+    height: 100%;
+  }
+}