org.eclipse.mdm.nucleus/org.eclipse.mdm.application/src/main/webapp/src/app/chartviewer/components/xy-chart-viewer-toolbar/xy-chart-viewer-toolbar.component.html

<!--********************************************************************************
 * 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
 *
 ********************************************************************************-->
<div class="p-col-12 thin" >
  <!-- ChannelSelection -->
  <p-toggleButton
    [(ngModel)]="properties.showSelection"
    [onIcon]="'fa fa-columns'"
    offIcon="fa fa-square-o"
    onLabel=""
    offLabel=""
    (onChange)="onChangeProperty($event)"
    title="{{(properties.showSelection ? 'chartviewer.xy-chart-viewer-toolbar.hide-data-selection-panel' : 'chartviewer.xy-chart-viewer-toolbar.show-data-selection-panel')| translate }}">
  </p-toggleButton>
  <!-- X/Y-mode -->
  <p-toggleButton
    [(ngModel)]="xyMode"
    [onIcon]="'fa fa-filter'"
    offIcon="fa fa-filter"
    onLabel=""
    offLabel=""
    (onChange)="onToggleXyMode($event)"
    title="{{(xyMode ? 'chartviewer.xy-chart-viewer-toolbar.deactivate-xy-mode' : 'chartviewer.xy-chart-viewer-toolbar.activate-xy-mode')| translate }}">
  </p-toggleButton>
  <span style="width:12px; display:inline-block;"></span>
  <!-- Legend -->
  <p-toggleButton
    [onIcon]="'fa fa-map'"
    offIcon="fa fa-map-o"
    onLabel=""
    offLabel=""
    [(ngModel)]="properties.options.legend.display"
    (onChange)="onChangeProperty($event)"
    title="{{(properties?.options?.legend?.display ? 'chartviewer.xy-chart-viewer-toolbar.hide-chart-legend' : 'chartviewer.xy-chart-viewer-toolbar.show-chart-legend')| translate }}">
  </p-toggleButton>
  <!-- Linewidth -->
  <p-spinner
    [(ngModel)]="properties.lineWidth"
    [min]="0.25"
    [step]="0.25"
    size="1"
    (onChange)="onChangeProperty($event)"
    title="{{'chartviewer.xy-chart-viewer-toolbar.line-width' | translate }}">
  </p-spinner>
  <!-- draw lines -->
  <p-toggleButton
    [onIcon]="'fa fa-line-chart'"
    offIcon="fa fa-line-chart"
    onLabel=""
    offLabel=""
    [(ngModel)]="properties.showLines"
    (onChange)="onToggleShowLines($event)"
    title="{{(properties.showLines ? 'chartviewer.xy-chart-viewer-toolbar.hide-lines' : 'chartviewer.xy-chart-viewer-toolbar.show-lines')| translate }}">
  </p-toggleButton>
  <!-- fill area -->
  <p-toggleButton
    [onIcon]="'fa fa-area-chart'"
    offIcon="fa fa-area-chart"
    onLabel=""
    offLabel=""
    [(ngModel)]="properties.fillArea"
    (onChange)="onChangeProperty($event)"
    [disabled]="!properties.showLines"
    title="{{(properties.fillArea ? 'chartviewer.xy-chart-viewer-toolbar.clear-area' : 'chartviewer.xy-chart-viewer-toolbar.fill-area')| translate }}">
  </p-toggleButton>
  <!-- Datapoints -->
  <p-toggleButton
    title="Show Datapoints"
    [onIcon]="'fa fa-share-alt'"
    offIcon="fa fa-share-alt"
    onLabel=""
    offLabel=""
    [(ngModel)]="properties.drawPoints"
    (onChange)="onChangeProperty($event)"
    title="{{(properties.drawPoints ? 'chartviewer.xy-chart-viewer-toolbar.hide-datapoints' : 'chartviewer.xy-chart-viewer-toolbar.show-datapoints'| translate) }}">
  </p-toggleButton>
  <!-- tension -->
  <p-spinner
    size="1"
    [(ngModel)]="properties.lineTension"
    [min]="0"
    [step]="0.1"
    [max]="1"
    (onChange)="onChangeProperty($event)"
    title="{{'chartviewer.xy-chart-viewer-toolbar.tension' | translate }}">
  </p-spinner>
</div>