geonetwork-ui 2.1.0-initial

package/src/libs/feature/dataviz/src/lib/chart-view/chart-view.component.ts

@@ -0,0 +1,232 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  Input,
+  Output,
+} from '@angular/core'
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+import {
+  BaseReader,
+  FetchError,
+  FieldAggregation,
+  getJsonDataItemsProxy,
+} from '../../../../../../libs/util/data-fetcher/src'
+import { DropdownChoice } from '../../../../../../libs/ui/inputs/src'
+import { BehaviorSubject, combineLatest, EMPTY, Observable } from 'rxjs'
+import {
+  catchError,
+  filter,
+  map,
+  shareReplay,
+  startWith,
+  switchMap,
+  tap,
+} from 'rxjs/operators'
+import { DataService } from '../service/data.service'
+import { InputChartType } from '../../../../../../libs/common/domain/src/lib/dataviz-configuration.model'
+import { DatasetDistribution } from '../../../../../../libs/common/domain/src/lib/record'
+import { TranslateService } from '@ngx-translate/core'
+
+marker('chart.type.bar')
+marker('chart.type.barHorizontal')
+marker('chart.type.line')
+marker('chart.type.lineSmooth')
+marker('chart.type.pie')
+
+marker('chart.aggregation.sum')
+marker('chart.aggregation.max')
+marker('chart.aggregation.min')
+marker('chart.aggregation.average')
+marker('chart.aggregation.count')
+
+@Component({
+  selector: 'gn-ui-chart-view',
+  templateUrl: './chart-view.component.html',
+  styleUrls: ['./chart-view.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ChartViewComponent {
+  @Input() set link(value: DatasetDistribution) {
+    this.currentLink$.next(value)
+  }
+  private currentLink$ = new BehaviorSubject<DatasetDistribution>(null)
+
+  @Input() set aggregation(value: FieldAggregation[0]) {
+    this.aggregation$.next(value)
+  }
+  aggregation$ = new BehaviorSubject<FieldAggregation[0]>('sum')
+
+  @Input() set xProperty(value: string) {
+    this.xProperty$.next(value)
+  }
+  xProperty$ = new BehaviorSubject<string>(undefined)
+
+  @Input() set yProperty(value: string) {
+    this.yProperty$.next(value)
+  }
+  yProperty$ = new BehaviorSubject<string>(undefined)
+
+  @Input() set chartType(value: InputChartType) {
+    this.chartType$.next(value)
+  }
+  chartType$ = new BehaviorSubject<InputChartType>('bar')
+
+  @Output() chartConfig$ = combineLatest([
+    this.xProperty$.pipe(filter((value) => value !== undefined)),
+    this.yProperty$.pipe(filter((value) => value !== undefined)),
+    this.aggregation$,
+    this.chartType$,
+  ]).pipe(
+    map(([xProperty, yProperty, aggregation, chartType]) => ({
+      aggregation,
+      xProperty,
+      yProperty,
+      chartType,
+    }))
+  )
+
+  loading = false
+  error = null
+  errorInfo = null
+
+  typeChoices: DropdownChoice[] = [
+    { label: 'chart.type.bar', value: 'bar' },
+    { label: 'chart.type.barHorizontal', value: 'bar-horizontal' },
+    { label: 'chart.type.line', value: 'line' },
+    { label: 'chart.type.lineSmooth', value: 'line-interpolated' },
+    { label: 'chart.type.pie', value: 'pie' },
+  ]
+
+  get aggregationChoices() {
+    if (!this.yProperty$.value) {
+      return [{ label: 'chart.aggregation.count', value: 'count' }]
+    }
+    return [
+      { label: 'chart.aggregation.sum', value: 'sum' },
+      { label: 'chart.aggregation.max', value: 'max' },
+      { label: 'chart.aggregation.min', value: 'min' },
+      { label: 'chart.aggregation.average', value: 'average' },
+      { label: 'chart.aggregation.count', value: 'count' },
+    ] as DropdownChoice[]
+  }
+
+  dataset$: Observable<BaseReader> = this.currentLink$.pipe(
+    filter((link) => !!link),
+    switchMap((link) => {
+      this.error = null
+      this.loading = true
+      return this.dataService.getDataset(link).pipe(
+        catchError((error) => {
+          this.handleError(error)
+          return EMPTY
+        })
+      )
+    }),
+    shareReplay(1)
+  )
+  properties$ = this.dataset$.pipe(
+    switchMap((dataset) =>
+      dataset.properties.catch((error) => {
+        this.handleError(error)
+        return []
+      })
+    ),
+    shareReplay(1)
+  )
+  yChoices$ = this.properties$.pipe(
+    map((properties) =>
+      properties
+        .filter((prop) => prop.type === 'number' || prop.type === 'date')
+        .map((prop) => ({ value: prop.name, label: prop.label || prop.name }))
+    ),
+    tap((choices) => {
+      if (!choices.find((choice) => choice.value === this.yProperty$.value)) {
+        const newProp = choices[0]?.value || ''
+        if (!newProp && this.aggregation$.value !== 'count') {
+          this.aggregation$.next('count')
+        }
+        this.yProperty$.next(newProp)
+      }
+    })
+  )
+  xChoices$ = this.properties$.pipe(
+    map((properties) =>
+      properties
+        .filter((prop) => prop.type === 'string')
+        .map((prop) => ({
+          value: prop.name,
+          label: prop.label || prop.name,
+        }))
+    ),
+    tap((choices) => {
+      if (!choices.find((choice) => choice.value === this.xProperty$.value)) {
+        this.xProperty$.next(choices[0]?.value || '')
+      }
+    })
+  )
+
+  chartData$ = combineLatest([
+    this.dataset$,
+    this.xProperty$.pipe(filter((value) => value !== undefined)),
+    this.yProperty$.pipe(filter((value) => value !== undefined)),
+    this.aggregation$,
+  ]).pipe(
+    switchMap(([dataset, xProp, yProp, aggregation]) => {
+      const fieldAgg: FieldAggregation =
+        aggregation === 'count' ? ['count'] : [aggregation, yProp]
+      return dataset
+        .groupBy(['distinct', xProp])
+        .aggregate(fieldAgg)
+        .read()
+        .catch((error) => {
+          this.handleError(error)
+          return []
+        })
+        .finally(() => {
+          this.loading = false
+        })
+    }),
+    map(getJsonDataItemsProxy),
+    startWith([]),
+    shareReplay(1)
+  )
+
+  get labelProperty() {
+    if (!this.xProperty$.value) return ''
+    return `distinct(${this.xProperty$.value})`
+  }
+  get valueProperty() {
+    if (this.isCountAggregation) return 'count()'
+    return `${this.aggregation$.value}(${this.yProperty$.value})`
+  }
+  get isCountAggregation() {
+    return this.aggregation$.value === 'count'
+  }
+
+  constructor(
+    private dataService: DataService,
+    private changeDetector: ChangeDetectorRef,
+    private translateService: TranslateService
+  ) {}
+
+  handleError(error: FetchError | Error | string) {
+    if (error instanceof FetchError) {
+      this.error = this.translateService.instant(
+        `dataset.error.${error.type}`,
+        {
+          info: error.info,
+        }
+      )
+      console.warn(error.message)
+    } else if (error instanceof Error) {
+      this.error = this.translateService.instant(error.message)
+      console.warn(error.stack || error)
+    } else {
+      this.error = this.translateService.instant(error)
+      console.warn(error)
+    }
+    this.loading = false
+    this.changeDetector.detectChanges()
+  }
+}

package/src/libs/feature/dataviz/src/lib/feature-dataviz.module.ts

@@ -0,0 +1,43 @@
+import { NgModule } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { FeatureMapModule } from '../../../../../libs/feature/map/src'
+import { UiMapModule } from '../../../../../libs/ui/map/src'
+import { GeoTableViewComponent } from './geo-table-view/geo-table-view.component'
+import { FigureContainerComponent } from './figure/figure-container/figure-container.component'
+import {
+  ChartComponent,
+  TableComponent,
+  UiDatavizModule,
+} from '../../../../../libs/ui/dataviz/src'
+import { TableViewComponent } from './table-view/table-view.component'
+import { ChartViewComponent } from './chart-view/chart-view.component'
+import { TranslateModule } from '@ngx-translate/core'
+import { UiWidgetsModule } from '../../../../../libs/ui/widgets/src'
+import { UiInputsModule } from '../../../../../libs/ui/inputs/src'
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FeatureMapModule,
+    UiMapModule,
+    UiDatavizModule,
+    TableComponent,
+    UiWidgetsModule,
+    TranslateModule,
+    ChartComponent,
+    UiInputsModule,
+  ],
+  declarations: [
+    GeoTableViewComponent,
+    FigureContainerComponent,
+    TableViewComponent,
+    ChartViewComponent,
+  ],
+  exports: [
+    GeoTableViewComponent,
+    FigureContainerComponent,
+    TableViewComponent,
+    ChartViewComponent,
+  ],
+})
+export class FeatureDatavizModule {}

package/src/libs/feature/dataviz/src/lib/figure/figure-container/figure-container.component.html

@@ -0,0 +1,6 @@
+<gn-ui-figure
+  [figure]="figure"
+  [icon]="icon"
+  [title]="title"
+  [unit]="unit"
+></gn-ui-figure>

package/src/libs/feature/dataviz/src/lib/figure/figure-container/figure-container.component.ts

@@ -0,0 +1,33 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnChanges,
+} from '@angular/core'
+import { TableItemModel } from '../../../../../../../libs/ui/dataviz/src'
+import { FigureService } from '../figure.service'
+
+@Component({
+  selector: 'gn-ui-figure-container',
+  templateUrl: './figure-container.component.html',
+  styleUrls: ['./figure-container.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FigureContainerComponent implements OnChanges {
+  @Input() dataset: TableItemModel[]
+  @Input() expression: string
+  @Input() icon: string
+  @Input() title: string
+  @Input() unit: string
+  @Input() digits?: number = 2
+  figure: string
+
+  constructor(private service: FigureService) {}
+
+  ngOnChanges(): void {
+    const figure = this.service
+      .compute(this.expression, this.dataset)
+      .toFixed(this.digits)
+    this.figure = parseFloat(figure).toString()
+  }
+}

package/src/libs/feature/dataviz/src/lib/figure/figure.fixtures.ts

@@ -0,0 +1,40 @@
+export const FIGURE_ITEM_FIXTURE = [
+  {
+    name: 'name 1',
+    id: 'id 1',
+    age: 15,
+  },
+  {
+    name: 'name 2',
+    id: 'id 2',
+    age: 10,
+  },
+  {
+    name: 'name 3',
+    id: 'id 3',
+    age: 55,
+  },
+]
+
+export const FIGURE_ITEM_FIXTURE_HAB = [
+  {
+    name: 'France',
+    id: '1',
+    pop: 50500000,
+  },
+  {
+    name: 'Italy',
+    id: '2',
+    pop: 155878789655,
+  },
+  {
+    name: 'UK',
+    id: '3',
+    pop: 31522456,
+  },
+  {
+    name: 'US',
+    id: '4',
+    pop: 3215448888,
+  },
+]

package/src/libs/feature/dataviz/src/lib/figure/figure.service.ts

@@ -0,0 +1,30 @@
+import { Injectable } from '@angular/core'
+import { TableItemModel } from '../../../../../../libs/ui/dataviz/src'
+
+type FigureOperationTypes = 'sum' | 'average'
+type FigureOperationsModel = Record<
+  FigureOperationTypes,
+  (data: number[]) => number
+>
+export const FIGURE_OPERATION_DELIMITER = '|'
+
+@Injectable({
+  providedIn: 'root',
+})
+export class FigureService {
+  private operations: FigureOperationsModel = {
+    sum: (data) => data.reduce((sum, value) => (sum += value), 0),
+    average: (data) => this.operations.sum(data) / data.length,
+  }
+
+  compute(expression: string, dataset: TableItemModel[]): number {
+    try {
+      const computing = expression.split(FIGURE_OPERATION_DELIMITER)[0]
+      const column = expression.split(FIGURE_OPERATION_DELIMITER)[1]
+      const data = dataset.map((row) => row[column])
+      return this.operations[computing](data)
+    } catch (e) {
+      return NaN
+    }
+  }
+}

package/src/libs/feature/dataviz/src/lib/geo-table-view/geo-table-view.component.html

@@ -0,0 +1,17 @@
+<div class="flex flex-row h-full overflow-auto">
+  <gn-ui-table
+    class="w-1/2 overflow-auto"
+    [data]="tableData"
+    [activeId]="selectionId"
+    (selected)="onTableSelect($event)"
+  ></gn-ui-table>
+  <gn-ui-map-context
+    class="w-1/2 h-full"
+    [context]="mapContext"
+  ></gn-ui-map-context>
+  <gn-ui-feature-detail
+    style="width: 300px"
+    class="p-3 shrink-0 overflow-auto"
+    [feature]="selection"
+  ></gn-ui-feature-detail>
+</div>

package/src/libs/feature/dataviz/src/lib/geo-table-view/geo-table-view.component.ts

@@ -0,0 +1,156 @@
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  Inject,
+  Input,
+  OnDestroy,
+  OnInit,
+  ViewChild,
+} from '@angular/core'
+import {
+  FEATURE_MAP_OPTIONS,
+  FeatureInfoService,
+  MapContextLayerTypeEnum,
+  MapContextModel,
+  MapManagerService,
+  MapOptionsModel,
+} from '../../../../../../libs/feature/map/src'
+import {
+  TableComponent,
+  TableItemId,
+  TableItemModel,
+} from '../../../../../../libs/ui/dataviz/src'
+import type { FeatureCollection } from 'geojson'
+import Map from 'ol/Map'
+import View from 'ol/View'
+import Feature from 'ol/Feature'
+import { Geometry } from 'ol/geom'
+import VectorLayer from 'ol/layer/Vector'
+import VectorSource from 'ol/source/Vector'
+import Style from 'ol/style/Style'
+import { Subscription } from 'rxjs'
+
+@Component({
+  selector: 'gn-ui-geo-table-view',
+  templateUrl: './geo-table-view.component.html',
+  styleUrls: ['./geo-table-view.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class GeoTableViewComponent implements OnInit, AfterViewInit, OnDestroy {
+  @Input() data: FeatureCollection = { type: 'FeatureCollection', features: [] }
+  @ViewChild(TableComponent) uiTable: TableComponent
+
+  private map: Map
+  private view: View
+  private vectorLayer: VectorLayer<VectorSource<Geometry>>
+  private vectorSource: VectorSource<Geometry>
+  private features: Feature<Geometry>[]
+
+  tableData: TableItemModel[]
+  mapContext: MapContextModel
+  selectionId: TableItemId
+  selection: Feature<Geometry>
+  private subscription = new Subscription()
+
+  constructor(
+    private manager: MapManagerService,
+    private featureInfo: FeatureInfoService,
+    private changeRef: ChangeDetectorRef,
+    @Inject(FEATURE_MAP_OPTIONS) private mapOptions: MapOptionsModel
+  ) {}
+
+  ngOnInit(): void {
+    this.tableData = this.geojsonToTableData(this.data)
+    this.mapContext = this.initMapContext()
+    this.featureInfo.handleFeatureInfo()
+    this.subscription.add(
+      this.featureInfo.features$.subscribe((features) => {
+        this.onMapFeatureSelect(features)
+      })
+    )
+  }
+
+  ngAfterViewInit(): void {
+    const map = (this.map = this.manager.map)
+    this.view = map.getView()
+    this.vectorLayer = this.manager.map.getLayers().item(1) as VectorLayer<
+      VectorSource<Geometry>
+    >
+    this.vectorLayer.setStyle(this.styleFn.bind(this))
+    this.vectorSource = this.vectorLayer.getSource()
+    this.features = this.vectorSource.getFeatures()
+    this.view.fit(this.vectorSource.getExtent())
+  }
+
+  onTableSelect(tableEntry: TableItemModel) {
+    const { id } = tableEntry
+    this.selectionId = id
+    this.selection = this.getFeatureFromId(id)
+    if (this.selection) {
+      this.animateToFeature(this.selection)
+    }
+  }
+
+  onMapFeatureSelect(features: Feature<Geometry>[]): void {
+    this.selection = features?.length > 0 && features[0]
+    if (this.selection) {
+      this.selectionId = this.selection.getId()
+      this.changeRef.detectChanges()
+      this.vectorLayer.changed()
+      this.uiTable.scrollToItem(this.selectionId)
+    }
+  }
+
+  private geojsonToTableData(geojson: FeatureCollection) {
+    return geojson.features.map((f) => ({
+      id: f.id,
+      ...f.properties,
+    }))
+  }
+
+  private initMapContext(): MapContextModel {
+    return {
+      layers: [
+        {
+          type: MapContextLayerTypeEnum.XYZ,
+          url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+        },
+        {
+          type: MapContextLayerTypeEnum.GEOJSON,
+          data: this.data,
+        },
+      ],
+    }
+  }
+
+  private animateToFeature(feature: Feature<Geometry>): void {
+    this.view.fit(feature.getGeometry().getExtent(), {
+      duration: 1000,
+      maxZoom: 11,
+    })
+  }
+
+  private getFeatureFromId(id: TableItemId) {
+    return this.features.find((feature) => feature.getId() === id)
+  }
+
+  private styleFn(
+    feature: Feature<Geometry>,
+    resolution: number
+  ): void | Style | Style[] {
+    if (
+      this.selectionId !== undefined &&
+      this.selectionId === feature.getId()
+    ) {
+      return this.mapOptions.hlStyle(feature, resolution)
+    } else {
+      return this.mapOptions.defaultStyle(feature, resolution)
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.subscription.unsubscribe()
+  }
+}