org.eclipse.mdm.application/src/main/webapp/src/app/chartviewer/components/chartviewer/chart-viewer.component.ts

/********************************************************************************
 * Copyright (c) 2015-2018 Contributors to the Eclipse Foundation
 *
 * See the NOTICE file(s) distributed with this work for additional
 * information regarding copyright ownership.
 *
 * This program and the accompanying materials are made available under the
 * terms of the Eclipse Public License v. 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0.
 *
 * SPDX-License-Identifier: EPL-2.0
 *
 ********************************************************************************/

import { Component,  ViewChild, Input, SimpleChanges, OnChanges } from '@angular/core';
import { Observable } from 'rxjs';
import { map, tap, catchError } from 'rxjs/operators';

import { UIChart } from 'primeng/primeng';

import { HttpErrorHandler } from '../../../core/http-error-handler';
import { Node } from '../../../navigator/node';
import { ChartViewerDataService, getDataArray } from '../../services/chart-viewer-data.service';
import { MeasuredValues } from '../../model/chartviewer.model';

@Component({
  selector: 'mdm5-chartViewer',
  templateUrl: 'chart-viewer.component.html',
  providers: []
})
export class ChartViewerComponent implements OnChanges {

  @Input()
  channelGroup = new Node();
  @Input()
  channels = [new Node()];

  @ViewChild('lineChart')
  chart: UIChart;

  maxRequestedValues = 10000;
  previewEnabled = true;
  numberOfChunks = 600;
  numberOfRows = 0;
  startIndex = 1;
  requestedValues = 0;

  // range of values to show; 1-based; start and end inclusive
  rangeValues: number[] = [this.startIndex, this.requestedValues];
  step = 1000;

  data = {
    labels: [],
    datasets: [
      {
        label: 'No data',
        data: [],
        borderColor: '#fff',
      }
    ]
  };

  options = {
    elements: {
      point: {
        radius: 0
      },
      line: {
        tension: 0
      }
    },
    legend: {
      display: true,
    },
    plugins: {
      zoom: {
        pan: {
          enabled: true,
          mode: 'xy'
        },
        zoom: {
          enabled: true,
          mode: 'xy'
        }
      }
    },
  };

  constructor(private httpErrorHandler: HttpErrorHandler,
    private chartService: ChartViewerDataService) {
  }

  ngOnChanges(changes: SimpleChanges) {
    for (let propName in changes) {
      if (propName === 'channelGroup' || propName === 'channels') {
        this.channelGroup = this.channelGroup;
        this.numberOfRows = this.chartService.getNumberOfRows(this.channelGroup);
        if (this.numberOfRows < this.numberOfChunks) {
          this.previewEnabled = false;
        }
        this.requestedValues = Math.min(this.numberOfRows, this.maxRequestedValues);

        this.updateRange();
        this.chartChannel();
        break;
      }
    }
  }

  getColor(name: string) {
    return this.data.datasets.find(dataset => dataset.label === name).borderColor;
  }

  applySettings(event: any) {
    this.chartChannel();
  }

  chartChannel() {
    this.chartMeasuredValues(this.chartService.loadPreviewValues(
      this.channelGroup, [this.channels[0]], this.numberOfChunks, this.rangeValues[0] - 1, this.rangeValues[1]));
  }

  chartMeasuredValues(measuredValues: Observable<MeasuredValues[]>) {
    measuredValues.pipe(
      map(mvl => <any>{
        data: {
          labels: this.getLabels(this.rangeValues[0], this.rangeValues[1], this.getLength(mvl)),
          datasets: mvl.map(this.convertToDataset, this)
        }
      }),
      catchError(this.httpErrorHandler.handleError)
    ).subscribe(d => {
      console.log(d);
      this.data = d.data;
    });
  }

  updateRange() {
    this.rangeValues = [this.startIndex, this.requestedValues];
    this.step = Math.min(1000, Math.max(Math.floor(this.numberOfRows / 1000), 1));
  }

  getLabels(startIndex: number, endIndex: number, numberOfChunks: number) {
    let labels: number[] = Array();
    for (let i = startIndex; i <= endIndex; i += (endIndex - startIndex + 1) / numberOfChunks) {
      labels.push(Math.floor(i));
    }
    return labels;
  }

  getLength(measuredValues: MeasuredValues[]) {
    return measuredValues.map(mv => mv.length).reduce((p, l) => Math.max(p, l));
  }

  convertToDataset(measuredValues: MeasuredValues) {
    return <any>{
      label: measuredValues.name + ' [' + measuredValues.unit + ']',
      unit: measuredValues.unit,
      data: getDataArray(measuredValues).values,
      borderColor: '#' + Math.random().toString(16).substr(-6),
      measuredValues: map,
      channel: new Node()
    };
  }
}