nucleus/webclient/src/main/webapp/src/app/chartviewer/components/xy-chart-viewer/xy-chart-viewer.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-grid toolbar">
  <div class="thin">
    <p-selectButton [options]="modes" [(ngModel)]="selectedMode"></p-selectButton>
  </div>
  <mdm5-xy-chart-viewer-toolbar #toolbar
    (xyModeChanged)="onXyModeChanged($event)"
    (toolbarPropertiesChanged)="onToolbarPropertiesChanged($event)">
  </mdm5-xy-chart-viewer-toolbar>
</div>

<!-- View area -->
<div class="p-grid nested-grid">
  <!-- Axis selection -->
  <div [ngClass]="showSelection ? 'p-col-3' : 'hidden'">
    <mdm5-xy-chart-data-selection-panel
      [measurement]="measurement"
      [xyMode]="xyMode"
      (onSelectionChanged)="onDataSelectionChanged($event)"
    ></mdm5-xy-chart-data-selection-panel>
  </div>
  <!-- Chart / Table -->
  <div [ngClass]="showSelection ? 'p-col-9' : 'p-col-12'">
    <div [ngSwitch]="selectedMode">
      <p-chart #xyChart *ngSwitchCase="'chart'" type="scatter" [data]="data" (contextmenu)="cm.show($event)"></p-chart>
      <p-contextMenu #cm [model]="contextMenu">
        
      </p-contextMenu>

      <p-tabView *ngSwitchCase="'table'">
        <p-tabPanel [header]="sel[0]" *ngFor="let sel of groupedSelectedChannelRows; let i = index" [selected]="i == 0">
          <mdm5-dataTable [measurement]="measurement" [selectedChannelRows]="sel[1]"></mdm5-dataTable>
        </p-tabPanel>
      </p-tabView>
      <div *ngSwitchDefault></div>
    </div>
  </div>
</div>
<div class="p-grid">
  <div class="p-col-12">
    <mdm5-request-options *ngIf="selectedMode == 'chart'" [measurement]="measurement" (onRequestOptionsChanged)="onRequestOptionsChanged($event)"></mdm5-request-options>
  </div>
</div>