alfresco-ng2-components/ng2-components/ng2-activiti-analytics/src/components/analytics.component.html

<div class="col-md-6">
    <analytics-report-parameters [appId]="appId" [reportId]="reportId"
                                 (onFormValueChanged)="reset()" (onSuccess)="showReport($event)"></analytics-report-parameters>

    <div *ngIf="reports">
        <div *ngFor="let report of reports">
            <h2>{{report.title}}</h2>
            <div [ngSwitch]="report.type">
                <div *ngSwitchCase="'pie'">
                    <div class="col-md-6">
                        <div *ngIf="!report.hasData()">{{'ANALYTICS.MESSAGES.NO-DATA-FOUND' | translate}}</div>
                        <base-chart *ngIf="report.hasData()" class="chart"
                                    [data]="report.data"
                                    [labels]="report.labels"
                                    [chartType]="report.type"></base-chart>
                    </div>
                </div>
                <div *ngSwitchCase="'table'">
                    <div *ngIf="!report.hasDatasets()">{{'ANALYTICS.MESSAGES.NO-DATA-FOUND' | translate}}</div>
                    <div [attr.id]="'chart-table-' + report.id" *ngIf="report.hasDatasets()">
                        <table class="table table-responsive table-condensed" style="width: 100%">
                            <tr>
                                <th *ngFor="let label of report.labels">{{label | translate}}</th>
                            </tr>
                            <tr *ngFor="let rows of report.datasets" style="text-align: center;">
                                <td *ngFor="let row of rows">{{row | translate }}</td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div *ngSwitchCase="'masterDetailTable'">
                    <div *ngIf="!report.hasDatasets()">{{'ANALYTICS.MESSAGES.NO-DATA-FOUND' | translate}}</div>
                    <div [attr.id]="'chart-master-detail-table-' + report.id" *ngIf="report.hasDatasets()">
                        <table class="table table-responsive table-condensed" style="width: 100%">
                            <tr>
                                <th *ngFor="let label of report.labels">{{label | translate}}</th>
                            </tr>
                            <tr *ngFor="let rows of report.datasets" style="text-align: center;">
                                <td *ngFor="let row of rows">{{row | translate }}</td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div *ngSwitchCase="'bar'">
                    <div class="col-md-6">
                        <div *ngIf="!report.hasDatasets()">{{'ANALYTICS.MESSAGES.NO-DATA-FOUND' | translate}}</div>
                        <base-chart *ngIf="report.hasDatasets()" class="chart"
                                    [datasets]="report.datasets"
                                    [labels]="report.labels"
                                    [options]="report.options"
                                    [chartType]="report.type"></base-chart>
                    </div>
                </div>
                <div *ngSwitchDefault>
                    <span>{{'ANALYTICS.MESSAGES.UNKNOWN-WIDGET-TYPE' | translate}}: {{report.type}}</span>
                </div>
            </div>
        </div>
    </div>
    <br><br><br>
    <div *ngIf="!reports">{{'ANALYTICS.MESSAGES.FILL-PARAMETER' | translate}}</div>
</div>