diff options
Diffstat (limited to 'ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/chart-wizard/chart-wizard.component.html')
| -rw-r--r-- | ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/chart-wizard/chart-wizard.component.html | 449 |
1 files changed, 445 insertions, 4 deletions
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/chart-wizard/chart-wizard.component.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/chart-wizard/chart-wizard.component.html index 0f9a2f85..1c0dc5a2 100644 --- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/chart-wizard/chart-wizard.component.html +++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/ngapp/src/app/pages/analytics/Report_List/Report/chart-wizard/chart-wizard.component.html @@ -1,6 +1,447 @@ -<div class="stdForm"> - <div class="tab-content"> - <h1>Report Chart Configuration</h1> - </div> +<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="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°</mat-radio-button> + <mat-radio-button value ='up90'>up 90°</mat-radio-button> + <mat-radio-button value ='down45'>down 45°</mat-radio-button> + <mat-radio-button value ='down90'>down 90°</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()" class="btn btn-alt btn-small" style="font-size: 17px;">Save</button> </div> +</div> +</div> |