org.eclipse.mdm.nucleus/org.eclipse.mdm.application/src/main/webapp/src/app/chartviewer/components/xy-chart-viewer-toolbar/xy-chart-viewer-toolbar.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, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { ChartToolbarProperties } from '../../model/chartviewer.model';

@Component({
  selector: 'mdm5-xy-chart-viewer-toolbar',
  templateUrl: './xy-chart-viewer-toolbar.component.html',
  styleUrls: ['../../chart-viewer.style.css']
})
export class XyChartViewerToolbarComponent implements OnInit {

  @Output()
  public xyModeChanged = new EventEmitter<boolean>();
  @Output()
  public toolbarPropertiesChanged = new EventEmitter<ChartToolbarProperties>();

  // if true, x- and y-channels have to be channels with axisType 'X_AXIS', or 'Y_AXIS' respectively.
  // change xy requires reloading of select options. Thus requires own event.
  public xyMode = true;
  // holds actual properties
  public properties = new ChartToolbarProperties();
  // model for showlines.
  public showLegend = true;

  constructor() { }

  ngOnInit() {

    /** properties for cahrt elements */

    // if true, shows pannel with channel(-group) selection
    this.properties.showSelection = true;
    // if true, draws datapoints
    this.properties.drawPoints = false;
    // the charts borderwidth (width of lines, border for points)
    this.properties.lineWidth = 1;
    // if true, draws lines connecting datapoints
    this.properties.showLines = true;
    // if true, fills are below graph
    this.properties.fillArea = false;
    // the interpolation degree. 0 = linear, 0.4 = Bezier
    this.properties.lineTension = 0;

    // /** properties directly passed to cahrt options */
    // if legend.display true, shows chart legend
    this.properties.options = {legend: {display: true}};

    // emit to send initial properties to chart viewer
    this.xyModeChanged.emit(this.xyMode);
    this.toolbarPropertiesChanged.emit(this.properties);
  }

  // X- and y-axis options are determined by channels axis type, if xyMode toggled to true
  public onToggleXyMode(event: Event) {
    this.xyModeChanged.emit(this.xyMode);
  }

  public onChangeProperty(event: Event) {
    this.toolbarPropertiesChanged.emit(this.properties);
  }

  // displays/hides lines connecting data points
  public onToggleShowLines(event: Event) {
    if (!this.properties.showLines) {
      this.properties.fillArea = false;
    }
    this.toolbarPropertiesChanged.emit(this.properties);
  }
}