org.eclipse.mdm.nucleus/org.eclipse.mdm.application/src/main/webapp/src/app/chartviewer/components/xy-chart-data-selection-panel/xy-chart-data-selection-panel.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">
  <div class="p-col-12" style="margin-top: 4px">
    <p-listbox
      [options]="channelGroups"
      [(ngModel)]="selectedChannelGroups"
      multiple="multiple"
      checkbox="checkbox"
      filter="filter"
      optionLabel="name"
      (onChange)="onSelectedChannelGroupsChanged($event)"
      [ngClass]="{'hiddenList': hiddenGroups}"
      [style]="{'width':'100%'}"
      [listStyle]="{'height':'100px'}">
      <p-header>
          <span class="icon channelgroup"></span>
          {{'SubMatrix' | mdmdatasourcetranslate}}
          <span
            class="fa toggler"
            [ngClass]="{'fa-chevron-down': !hiddenGroups, 'fa-chevron-right': hiddenGroups}"
            (click)="onToggleChannelGroupPanel($event)"></span>
      </p-header>
    </p-listbox>
  </div>
  <div class="p-col-12">
    <p-listbox [options]="yChannelOptions"
      [(ngModel)]="selectedYChannels"
      multiple="multiple"
      checkbox="checkbox"
      filter="filter"
      optionLabel="name"
      (onChange)="onSelectedYChannelsChanged($event)"
      [ngClass]="{'hiddenList': hiddenYChannels}"
      [style]="{'width':'100%'}"
      [styleClass]="'ypanel'"
      [listStyle]="{'height':'200px'}"
      [showToggleAll]="false">
      <p-header>
        <span class="icon channel"></span>
        Y-{{'MeaQuantity' | mdmdatasourcetranslate}}
        <span
        class="fa toggler"
        [ngClass]="{'fa-chevron-down': !hiddenYChannels, 'fa-chevron-right': hiddenYChannels}"
        (click)="onToggleYChannelPanel($event)"></span>
      </p-header>
    </p-listbox>
  </div>
  <div class="p-col-12">
    <p-panel
      [toggleable]="true"
      [collapsed]="true"
      expandIcon="fa fa-chevron-right"
      collapseIcon="fa fa-chevron-down">
      <p-header>
        <span class="icon channel"></span>
        &nbsp;X-{{'MeaQuantity' | mdmdatasourcetranslate}}
      </p-header>
      <ul class="channelList">
        <li *ngFor="let rowData of selectedChannelRows">
          <div class="row">
            <label>
              {{rowData.yChannel.name}}
            </label>
            
            <!-- appendTo="body" is workaround for overlay is hidden in panel. Problem: AppendTo body makes overly stuck on scroll -->
            <p-dropdown
              [(ngModel)]="rowData.xChannel"
              [options]="xChannelOptions[rowData.channelGroup.id]"
              appendTo="body"
              [filter]="xChannelOptions[rowData.channelGroup.id]?.length > 5"
              (onChange)="onSelectedXChannelChanged($event, rowData)"
              (onShow)="onShowSelectedXChannelChanged($event, rowData)"
              placeholder="{{'chartviewer.xy-chart-data-selection-panel.select-channel-placeholder' | translate}}"
              optionLabel="name"
              [showClear]="false"
              [style]="{'width':'95%'}">
            </p-dropdown>
          </div>
        </li>
      </ul>
    </p-panel>
  </div>
</div>

<p-confirmDialog icon="pi pi-exclamation-triangle"></p-confirmDialog>