| /******************************************************************************** |
| * 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); |
| } |
| } |