<!--********************************************************************************
 * 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">
  <mdm5-xy-chart-viewer-toolbar #toolbar
    (xyModeChanged)="onXyModeChanged($event)"
    (toolbarPropertiesChanged)="onToolbarPropertiesChanged($event)">
  </mdm5-xy-chart-viewer-toolbar>
</div>

  <!-- <ng-template let-dataset pTemplate="item">
      <span class="fa fa-fw fa-square"></span> {{dataset.name}} &nbsp; ({{dataset.id}})
  </ng-template> -->

<!-- View area -->
<div class="p-grid nested-grid">
  <!-- Axis selection -->
  <div [ngClass]="showSelection ? 'p-col-3' : 'hidden'">
    <mdm5-xy-chart-data-selection-panel
      [channelGroups]="channelGroups"
      [channels]="channels"
      [xyMode]="xyMode"
      (onSelectionChanged)="onDataSelectionChanged($event)"
    ></mdm5-xy-chart-data-selection-panel>
  </div>
  <!-- Chart / Table -->
  <div [ngClass]="showSelection ? 'p-col-9' : 'p-col-12'">
    <p-chart #xyChart type="scatter" [data]="data"></p-chart>
  </div>
</div>
<div class="p-grid">
  <div class="p-col-12">
    <mdm5-request-options [channelGroups]="channelGroups" (onRequestOptionsChanged)="onRequestOptionsChanged($event)"></mdm5-request-options>
  </div>
</div>