path: root/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/chart-wizard/chart-wizard.component.html

<br/>
<div *ngIf="hideChart">
    <div class="tab-content">
        <h3>Chart Wizard Disabled</h3>
    </div>
</div>
<div *ngIf="!hideChart">
<span class="ecomp-spinner" *ngIf="showSpinner"></span>
<div *ngIf="!showSpinner" class="stdForm">
    <div class="tab-content">
        <h3>Step 5 - Chart Wizard Configuration</h3>
    </div>
    <br/>
    <div class="field-group">
        <label class="checkbox" for="animation1">
            <input [(ngModel)]="chartJson.commonChartOptions.animateAnimatedChart" class="defaultFontSize" id="animation1" type="checkbox">
            <i class="skin"></i><span>Animation</span>
        </label>
    </div>
    <br/>
    <div class="field-group">
        <label class="checkbox" for="title">
            <input [(ngModel)]="chartJson.showTitle" class="defaultFontSize" id="title" type="checkbox">
            <i class="skin"></i><span>Show Title</span>
        </label>
    </div>
    <br/>
    <div class="field-group">
        <table>
            <thead>
            <tr>
                <th style="width: 50px"><span>Width (px)</span></th>
                <th style="width: 50px">Height (px)</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td><label for="width2">
                    <input [(ngModel)]="chartJson.width" class="defaultFontSize" id="width2" name="displayName"
                           style="width: 100px;" type="text" appNumbersOnly>
                </label></td>
                <td><label for="height1">
                    <input [(ngModel)]="chartJson.height" class="defaultFontSize" id="height1" name="displayName"
                           style="width: 100px;" type="text" appNumbersOnly>
                </label></td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="field-group">
        <mat-form-field>
            <mat-label class="b2b-dro">Chart Type:</mat-label>
            <mat-select data-select-color="blue" [(ngModel)]="chartJson.chartType" aria-label="reportType" placeholder="Select chart Type">
                <mat-option value="none">--select--</mat-option>
                <mat-option  value="BarChart3D" (onSelectionChange)="setBarChartOptions()">Bar Chart</mat-option>
                <mat-option value="TimeSeriesChart" (onSelectionChange)="setTimeSeriesChartOptions()">Time Series/Area Chart</mat-option>
                <mat-option value="PieChart">Pie Chart</mat-option>
                <mat-option value="AnnotationChart">Annotation Chart</mat-option>
                <mat-option value="FlexTimeChart">Flexible Time Chart</mat-option>
            </mat-select>
        </mat-form-field>
        <br/>
        <mat-form-field>
            <mat-label class="lable">Domain Axis</mat-label>
            <mat-select [(ngModel)]="chartJson.domainAxisJSON.value" aria-label="domain axis">
                <mat-option *ngFor="let d of chartJson.chartColumnJSONList"
                            value="{{d.value}}">{{d.title}}</mat-option>
            </mat-select>
        </mat-form-field>
        <br/>
        <mat-form-field>
            <mat-label class="lable">Category</mat-label>
            <mat-select [(ngModel)]="chartJson.categoryAxis" aria-label="category axis">
                <mat-option>None</mat-option>
                <mat-option *ngFor="let d of chartJson.chartColumnJSONList"
                            value="{{d.value}}">{{d.title}}</mat-option>
            </mat-select>
        </mat-form-field>
    </div>

    <div id="RangeTable">
        <table>
            <thead>
            <tr>
                <th width="18%">Range Axis</th>
                <th width="15%">Y Axis</th>
                <th width="15%">Chart Title</th>
                <th width="22%">Color</th>
                <th width="25%">Line Type</th>
                <th></th>
            </tr>
            </thead>
            <tbody *ngFor="let rangeReport of chartJson.rangeAxisList">
            <tr>
                <td>
                    <mat-form-field>
                        <mat-select [(ngModel)]="rangeReport.rangeAxisLabelJSON.value" aria-label="category axis">
                            <mat-option *ngFor="let d of chartJson.chartColumnJSONList"
                                        value="{{d.value}}">{{d.title}}</mat-option>
                        </mat-select>
                    </mat-form-field>
                </td>
                <td>
                    <input [(ngModel)]="rangeReport.rangeYAxis" class="defaultFontSize1" id="rangeAxis" name="displayName"
                            type="text">
                </td>
                <td>
                    <input [(ngModel)]="rangeReport.rangeChartGroup" class="defaultFontSize1" id="rangeChartGroup" name="displayName"
                           type="text">
                </td>
                <td>
                    <mat-form-field>
                        <mat-label class="lable">Select Color</mat-label>
                        <mat-select [(ngModel)]="rangeReport.rangeColorJSON.value" aria-label="category axis">
                            <mat-option *ngFor="let d of rangeColors"
                                        value="{{d.value}}">{{d.title}}</mat-option>
                        </mat-select>
                    </mat-form-field>
                </td>
                <td>
                    <mat-form-field>
                        <mat-label class="lable">Select Line Type</mat-label>
                        <mat-select [(ngModel)]="rangeReport.rangeLineTypeJSON.value" aria-label="category axis">
                            <mat-option *ngFor="let d of lineTypes"
                                        value="{{d.value}}">{{d.title}}</mat-option>
                        </mat-select>
                    </mat-form-field>
                </td>
                <td><span>
                     <button (click)="removeRangeAxisRow(rangeReport)" class="btn btn-alt btn-small"
                                            ng-if="rangeReport.removed!='true'"
                                            type="submit">Remove</button>
                     </span></td>
            </tr>
            </tbody>
        </table>
        <div align="right" style="margin-right:20px">
            <button (click)="addRangeAxisRow()" class="btn btn-alt btn-small" style="font-size: 17px;">Add</button>
        </div>
    </div>
<br/>
    <div class="form-group">
        <mat-accordion>
            <mat-expansion-panel>
                <mat-expansion-panel-header>
                    <mat-panel-title>
                        Additional Options
                    </mat-panel-title>
                    <mat-panel-description>
                        Set Additional Chart Properties
                    </mat-panel-description>
                </mat-expansion-panel-header>
                <div class="field-group">
                    <table>
                        <thead>
                        <tr>
                            <th style="width: 30%"><span>Primary Axis Label</span></th>
                            <th style="width: 30%">Secondary Axis Label</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td><label for="primaryAxisLabel">
                                <input [(ngModel)]="chartJson.primaryAxisLabel" class="defaultFontSize" id="primaryAxisLabel" name="displayName"
                                       style="width: 200px;" type="text">
                            </label></td>
                            <td><label for="secondaryAxisLabel">
                                <input [(ngModel)]="chartJson.secondaryAxisLabel" class="defaultFontSize" id="secondaryAxisLabel" name="displayName"
                                       style="width: 200px;" type="text">
                            </label></td>
                        </tr>
                        </tbody>
                    </table>
                </div><br/>
                <div class="field-group">
                    <table>
                        <thead>
                        <tr>
                            <th style="width: 30%"><span>Range Axis Minimum Range</span></th>
                            <th style="width: 30%">Maximum Range</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td><label for="width1">
                                <input [(ngModel)]="chartJson.minRange" class="defaultFontSize" id="width1" name="displayName"
                                       style="width: 200px;" type="text">
                            </label></td>
                            <td><label for="height">
                                <input [(ngModel)]="chartJson.maxRange" class="defaultFontSize" id="height" name="displayName"
                                       style="width: 200px;" type="text">
                            </label></td>
                        </tr>
                        </tbody>
                    </table>
                </div>

            </mat-expansion-panel>
            <br/>
            <mat-expansion-panel>
                <mat-expansion-panel-header>
                    <mat-panel-title>
                        Common Options
                    </mat-panel-title>
                    <mat-panel-description>
                        Set Common chart Options
                    </mat-panel-description>
                </mat-expansion-panel-header>
                <div>
                    <table>
                        <thead>
                        <tr>
                            <th>Label Angle</th>
                            <th>Legend Position</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>
                              <mat-radio-group aria-label="Select an option" [(ngModel)]="chartJson.commonChartOptions.legendLabelAngle" >
                                  <mat-radio-button   value ="up45">up 45&deg;</mat-radio-button>
                                  <mat-radio-button   value ='up90'>up 90&deg;</mat-radio-button>
                                  <mat-radio-button   value ='down45'>down 45&deg;</mat-radio-button>
                                  <mat-radio-button   value ='down90'>down 90&deg;</mat-radio-button>
                                  <mat-radio-button   value ='standard'>Standard</mat-radio-button>
                              </mat-radio-group>
                            </td>
                            <td>
                                <mat-radio-group aria-label="Select an option" [(ngModel)]="chartJson.commonChartOptions.legendPosition" >
                                    <mat-radio-button   value ="top">Top</mat-radio-button>
                                    <mat-radio-button   value ='right'>Right</mat-radio-button>
                                </mat-radio-group>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <table>
                        <thead>
                           <tr>
                               <th width="20%">Legend</th>
                               <th width="20%">Animation</th>
                               <th></th>
                           </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    <mat-radio-group aria-label="Select an option" [(ngModel)]="chartJson.commonChartOptions.hideLegend" >
                                        <mat-radio-button   [value]='false'>Yes</mat-radio-button>
                                        <mat-radio-button   [value]='true'>No</mat-radio-button>
                                    </mat-radio-group>
                                </td>
                                <td>
                                    <mat-radio-group aria-label="Select an option" [(ngModel)]="chartJson.commonChartOptions.animateAnimatedChart" >
                                        <mat-radio-button   [value]='true'>Yes</mat-radio-button>
                                        <mat-radio-button   [value]='false'>No</mat-radio-button>
                                    </mat-radio-group>
                                </td>
                            </tr>
                        </tbody>
                    </table>

                    <table>
                        <thead>
                           <tr>
                               <th width="25%">Top Margin</th>
                               <th width="25%">Bottom Margin</th>
                               <th width="25%">Left Margin</th>
                               <th width="25%">Right Margin</th>
                           </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    <input [(ngModel)]="chartJson.commonChartOptions.topMargin" class="defaultFontSize1" id="topMargin" name="displayName"
                                            type="text" appNumbersOnly>
                                </td>
                                <td>
                                    <input [(ngModel)]="chartJson.commonChartOptions.bottomMargin" class="defaultFontSize1" id="bottomMargin" name="displayName"
                                            type="text" appNumbersOnly>
                                </td>
                                <td>
                                    <input [(ngModel)]="chartJson.commonChartOptions.leftMargin" class="defaultFontSize1" id="leftMargin" name="displayName"
                                            type="text" appNumbersOnly>
                                </td>
                                <td>
                                    <input [(ngModel)]="chartJson.commonChartOptions.rightMargin" class="defaultFontSize1" id="rightMargin" name="displayName"
                                            type="text" appNumbersOnly>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </mat-expansion-panel>
            <br/>
            <mat-expansion-panel *ngIf="chartJson.chartType=='BarChart3D'">
                <mat-expansion-panel-header>
                    <mat-panel-title>
                        Bar Chart Options
                    </mat-panel-title>
                    <mat-panel-description>
                         Set Bar chart Options
                    </mat-panel-description>
                </mat-expansion-panel-header>
          <div>
              <table>
                  <thead>
                  <tr>
                      <th width="25%">Orientation</th>
                      <th width="18%">Stacked</th>
                      <th width="18%">Show Controls</th>
                      <th width="18%">XAxis Date Type</th>
                      <th width="21%">Display less XAxis tickers</th>
                      <th></th>
                  </tr>
                  </thead>
                  <tbody>
                      <tr>
                          <td>
                              <mat-radio-group aria-label="Select an option" [(ngModel)]="chartJson.barChartOptions.verticalOrientation" >
                                  <mat-radio-button   [value]='true'>Vertical</mat-radio-button>
                                  <mat-radio-button  [value]='false'>Horizontal</mat-radio-button>
                              </mat-radio-group>
                          </td>
                          <td>
                          <mat-radio-group aria-label="Select an option" [(ngModel)]="chartJson.barChartOptions.stackedChart" >
                              <mat-radio-button  [value]='true'>Yes</mat-radio-button>
                              <mat-radio-button  [value]='false'>No</mat-radio-button>
                          </mat-radio-group>
                      </td>
                          <td>
                              <mat-radio-group aria-label="Select an option" [(ngModel)]="chartJson.barChartOptions.displayBarControls" >
                                  <mat-radio-button  [value]='true'>Yes</mat-radio-button>
                                  <mat-radio-button  [value]='false'>No</mat-radio-button>
                              </mat-radio-group>
                          </td>
                          <td>
                              <mat-radio-group aria-label="Select an option" [(ngModel)]="chartJson.barChartOptions.xAxisDateType" >
                                  <mat-radio-button  [value]='true'>Yes</mat-radio-button>
                                  <mat-radio-button  [value]='false'>No</mat-radio-button>
                              </mat-radio-group>
                          </td>
                          <td>
                              <mat-radio-group aria-label="Select an option" [(ngModel)]="chartJson.barChartOptions.minimizeXAxisTickers" >
                                  <mat-radio-button  [value]='true'>Yes</mat-radio-button>
                                  <mat-radio-button  [value]='false'>No</mat-radio-button>
                              </mat-radio-group>
                          </td>


                      </tr>
                  </tbody>
              </table>
              <br/>
              <table>
                  <thead>
                    <tr>
                        <th width="25%">Is Time Axis?</th>
                        <th width="25%">Log Scale (Y Axis)</th>
                        <th></th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                        <td>
                            <mat-radio-group aria-label="Select an option" [(ngModel)]="chartJson.barChartOptions.timeAxis" >
                                <mat-radio-button  [value]='true'>Yes</mat-radio-button>
                                <mat-radio-button  [value]='false'>No</mat-radio-button>
                            </mat-radio-group>
                        </td>
                        <td>
                            <label class="checkbox" for="yAxisLogScale">
                                <input [(ngModel)]="chartJson.barChartOptions.yAxisLogScale" class="defaultFontSize" id="yAxisLogScale" type="checkbox">
                                <i class="skin"></i>
                            </label>
                        </td>
                    </tr>
                  </tbody>

              </table>
          </div>
            </mat-expansion-panel>
            <mat-expansion-panel *ngIf="chartJson.chartType=='TimeSeriesChart'">
                <mat-expansion-panel-header>
                    <mat-panel-title>
                        Time Series Chart Options
                    </mat-panel-title>
                    <mat-panel-description>
                        Set Time Series Chart Options
                    </mat-panel-description>
                </mat-expansion-panel-header>
                <div class="field-group">
                    <table>
                        <thead>
                        <tr>
                            <th width="20%">Render as</th>
                            <th width="20%">X Axis Label</th>
                            <th width="20%">X Axis Tickers</th>
                            <th width="20%">Is Time Axis?</th>
                            <th width="20%">Multi Series</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>
                                <mat-radio-group aria-label="Select an option" [(ngModel)]="chartJson.timeSeriesChartOptions.lineChartRenderer" >
                                    <mat-radio-button  value="line">Line</mat-radio-button>
                                    <mat-radio-button  value='Area'>No</mat-radio-button>
                                </mat-radio-group>
                            </td>
                            <td>
                                <label class="checkbox" for="showXAxisLabel">
                                    <input [(ngModel)]="chartJson.timeSeriesChartOptions.showXAxisLabel" class="defaultFontSize" id="showXAxisLabel" type="checkbox">
                                    <i class="skin"></i><span></span>
                                </label>
                            </td>
                            <td>
                                <label class="checkbox" for="addXAxisTicker">
                                    <input [(ngModel)]="chartJson.timeSeriesChartOptions.addXAxisTicker" class="defaultFontSize" id="addXAxisTicker" type="checkbox">
                                    <i class="skin"></i><span></span>
                                </label>
                            </td>
                            <td>
                                <label class="checkbox" for="nonTimeAxis">
                                    <input [(ngModel)]="chartJson.timeSeriesChartOptions.nonTimeAxis" class="defaultFontSize" id="nonTimeAxis" type="checkbox">
                                    <i class="skin"></i><span></span>
                                </label>
                            </td>
                            <td>
                                <label class="checkbox" for="multiSeries">
                                    <input [(ngModel)]="chartJson.timeSeriesChartOptions.multiSeries" class="defaultFontSize" id="multiSeries" type="checkbox">
                                    <i class="skin"></i><span></span>
                                </label>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </mat-expansion-panel>
        </mat-accordion>
    </div>
    <br/>

    <div class="field-group">
        <button (click)="saveChartData('save')" class="btn btn-alt btn-small" style="font-size: 17px;">Save</button>
        <button (click)="saveChartData('reset')" class="btn btn-alt btn-small" style="font-size: 17px;">Reset</button>
    </div>
</div>
</div>