Skip to content

Commit

Permalink
Bugfix/814 handle multi factor data graphs (#837)
Browse files Browse the repository at this point in the history 
* change markdata object (#821)

* change markdata object

* condition is an object

* rename variable for clarity

* handling main effect graphs for multi factor

* interaction graph scrolling and table for 3 or more factors

* Bugfix/706: Handling old experiment json formats for importing experiments and import feature enhancement (#813)

* handling mostly all old experiment json formats for import

(cherry picked from commit fd588e6)

* scroll vertical for multiple import errors and added warnings for version mismatch

* reducing code complexity for import experiment component

* typing error corrected in import exp component

* peer review comments and graphs ui polishing

---------

Co-authored-by: jreddig <[email protected]>
Co-authored-by: danoswaltCL <[email protected]>
  • Loading branch information
@ppratikcr7 @jreddig @danoswaltCL
3 people authored Jun 9, 2023
1 parent 94355f2 commit 8758300
Show file tree
Hide file tree
Showing 6 changed files with 312 additions and 180 deletions.
17 changes: 16 additions & 1 deletion ...features/dashboard/home/components/enrollment-over-time/enrollment-over-time.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,22 @@ export class EnrollmentOverTimeComponent implements OnChanges, OnInit, OnDestroy
isInitialLoad = true;
showLabelOfxAxis = true;

colors = ['#31e8dd', '#7dc7fb', '#fedb64', '#51ed8f', '#ddaaf8', '#fd9099', '#14c9be'];
colors = [
'#31e8dd',
'#7dc7fb',
'#fedb64',
'#51ed8f',
'#ddaaf8',
'#fd9099',
'#14c9be',
'#57ff6d',
'#3dffec',
'#fedb64',
'#0a6de6',
'#da0766',
'#cd8014',
'#fa59a1',
];
colorScheme = {
domain: this.colors,
};
Expand Down
1 change: 0 additions & 1 deletion ...es/dashboard/home/components/experiment-participants/experiment-participants.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -175,7 +175,6 @@ export class ExperimentParticipantsComponent implements OnInit {
this.members1.removeAt(0);
this.members2.removeAt(0);


this.updateView1();
this.updateView2();

Expand Down
245 changes: 116 additions & 129 deletions .../dashboard/home/components/experiment-query-result/experiment-query-result.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,20 +13,20 @@
</span>
<br />
<div *ngIf="experimentType === 'Factorial'">
<table>
<tr>
<td class="ft-14-600 factor-name1" *ngFor="let factor of factors;">{{ factor | uppercase}}</td>
</tr>
</table>
<br />
<ng-container *ngIf="!(isQueryExecuting$ | async); else spinnerTemplate">
<ng-container *ngIf="!isResultExist(query.id); else noResultTemplate">
<div style="display: flex">
<div style="margin-right: 150px; height: 250px; width: 28%">
<div style="display: flex; overflow-x: scroll">
<br />
<div *ngFor="let factor of factors; let i = index" style="margin-right: 100px; height: 320px; width: 40%">
<table style="width: 100%">
<tr>
<td class="ft-14-600 factor-name-main">{{ factor | uppercase }}</td>
</tr>
</table>
<ngx-charts-bar-vertical
[view]="[400, 250]"
[view]="[300, 250]"
[scheme]="colorScheme"
[results]="queryFactorResults1[query?.id]"
[results]="queryFactorResults[i][query?.id]"
[xAxis]="true"
[yAxis]="true"
[barPadding]="20"
Expand All @@ -37,73 +37,50 @@
[trimXAxisTicks]="true"
[rotateXAxisTicks]="false"
>
<ng-template #tooltipTemplate let-model="model">
<span>{{ model.name }}</span>
<br>
<span>{{ model.value }}</span>
<br>
<span>( n = {{ model.extra }} )</span>
</ng-template>
<ng-template #tooltipTemplate let-model="model">
<span>{{ model.name }}</span>
<br />
<span>{{ model.value }}</span>
<br />
<span>( n = {{ model.extra }} )</span>
</ng-template>
</ngx-charts-bar-vertical>
<br />
</div>
<div style="margin-right: 150px; height: 250px; width: 28%">
<ngx-charts-bar-vertical
[view]="[400, 250]"
[scheme]="colorScheme"
[results]="queryFactorResults2[query?.id]"
[xAxis]="true"
[yAxis]="true"
[barPadding]="20"
[showXAxisLabel]="true"
[showYAxisLabel]="true"
[xAxisTickFormatting]="formateXAxisLabel"
[yAxisTickFormatting]="formateYAxisLabel"
[trimXAxisTicks]="true"
[rotateXAxisTicks]="false"
>
</div>
</ng-container>
</ng-container>
</div>
<div *ngIf="experimentType === 'Simple'">
<ng-container *ngIf="!(isQueryExecuting$ | async); else spinnerTemplate">
<ng-container *ngIf="!isResultExist(query.id); else noResultTemplate">
<div style="height: 250px; width: 30%">
<ngx-charts-bar-vertical
[view]="[400, 250]"
[scheme]="colorScheme"
[results]="queryResults[query?.id]"
[xAxis]="true"
[yAxis]="true"
[barPadding]="10"
[showXAxisLabel]="true"
[showYAxisLabel]="true"
[xAxisTickFormatting]="formateXAxisLabel"
[yAxisTickFormatting]="formateYAxisLabel"
[trimXAxisTicks]="true"
[rotateXAxisTicks]="false"
>
<ng-template #tooltipTemplate let-model="model">
<span>{{ model.name }}</span>
<br>
<br />
<span>{{ model.value }}</span>
<br>
<br />
<span>( n = {{ model.extra }} )</span>
</ng-template>
</ngx-charts-bar-vertical>
</div>
</ngx-charts-bar-vertical>
</div>
</ng-container>
</ng-container>
</div>
<div *ngIf="experimentType === 'Simple'">
<ng-container *ngIf="!(isQueryExecuting$ | async); else spinnerTemplate">
<ng-container *ngIf="!isResultExist(query.id); else noResultTemplate">
<div style="height: 250px; width: 30%">
<ngx-charts-bar-vertical
[view]="[300, 250]"
[scheme]="colorScheme"
[results]="queryResults[query?.id]"
[xAxis]="true"
[yAxis]="true"
[barPadding]="10"
[showXAxisLabel]="true"
[showYAxisLabel]="true"
[xAxisTickFormatting]="formateXAxisLabel"
[yAxisTickFormatting]="formateYAxisLabel"
[trimXAxisTicks]="true"
[rotateXAxisTicks]="false"
>
<ng-template #tooltipTemplate let-model="model">
<span>{{ model.name }}</span>
<br>
<span>{{ model.value }}</span>
<br>
<span>( n = {{ model.extra }} )</span>
</ng-template>
</ngx-charts-bar-vertical>
</div>
</ng-container>
</ng-container>
</div>
</div>
<br />
<!-- Interaction Section -->
Expand All @@ -120,62 +97,50 @@
<br />
<ng-container *ngIf="!(isQueryExecuting$ | async); else spinnerTemplate">
<ng-container *ngIf="!isResultExist(query.id); else noResultTemplate">
<table>
<tr>
<td class="ft-14-600 factor-name1" *ngFor="let factor of factors;">{{ factor | uppercase}}</td>
</tr>
</table>
<table>
<tr>
<td class="ft-14-600 factor-name2" *ngFor="let factor of factors.slice().reverse();"> ({{ factor | uppercase}})</td>
</tr>
</table>
<div style="display: flex">
<div style="margin-right: 150px; height: 250px; width: 28%">
<ngx-charts-line-chart
[view]="[400, 250]"
[scheme]="colorScheme"
[xAxis]="true"
[yAxis]="true"
[legend]="true"
[showXAxisLabel]="true"
[showYAxisLabel]="true"
[yAxisTickFormatting]="formateYAxisLabel"
[results]="interactionEffectQueryFactorResults1[query?.id]"
[legendTitle]=null
[legendPosition]="'below'"
>
<ng-template #tooltipTemplate let-model="model">
<span>{{ model.series }}</span>
<br>
<span>{{ model.value }}</span>
<br>
<span>( n = {{ model.participantsLogged }} )</span>
</ng-template>
</ngx-charts-line-chart>
<div style="display: table; overflow-x: scroll">
<br />
<div style="display: block; margin-right: 100px">
<table style="width: 100%">
<tr style="white-space: nowrap">
<td class="ft-14-600 factor-name1" *ngFor="let factor of factors">
{{ factor | uppercase }}
</td>
</tr>
<tr style="white-space: nowrap">
<td class="ft-14-600 factor-name2" *ngFor="let factor of factors.slice().reverse()">
({{ factor | uppercase }})
</td>
</tr>
</table>
</div>
<div style="margin-right: 150px; height: 250px; width: 28%">
<ngx-charts-line-chart
[view]="[420, 250]"
[scheme]="colorScheme"
[xAxis]="true"
[yAxis]="true"
[legend]="true"
[showXAxisLabel]="true"
[showYAxisLabel]="true"
[yAxisTickFormatting]="formateYAxisLabel"
[results]="interactionEffectQueryFactorResults2[query?.id]"
[legendTitle]=null
[legendPosition]="'below'"
<br />
<div style="display: flex">
<div
*ngFor="let factor of factors; let i = index"
style="margin-left: 30px; margin-right: 180px; height: 320px; width: 30%"
>
<ng-template #tooltipTemplate let-model="model">
<span>{{ model.series }}</span>
<br>
<span>{{ model.value }}</span>
<br>
<span>( n = {{ model.participantsLogged }} )</span>
</ng-template>
</ngx-charts-line-chart>
<ngx-charts-line-chart
[view]="[270, 250]"
[scheme]="colorScheme"
[xAxis]="true"
[yAxis]="true"
[legend]="true"
[showXAxisLabel]="true"
[showYAxisLabel]="true"
[yAxisTickFormatting]="formateYAxisLabel"
[results]="interactionEffectQueryFactorResults[i][query?.id]"
[legendTitle]="null"
[legendPosition]="'below'"
>
<ng-template #tooltipTemplate let-model="model">
<span>{{ model.series }}</span>
<br />
<span>{{ model.value }}</span>
<br />
<span>( n = {{ model.participantsLogged }} )</span>
</ng-template>
</ngx-charts-line-chart>
</div>
</div>
</div>
</ng-container>
Expand All @@ -184,14 +149,36 @@
<br />
</div>
</div>
</div>
<ng-template #noResultTemplate>
<span class="zero-state" [innerHTML]="'query.result.empty-result.text' | translate"> </span>
</ng-template>
<ng-template #spinnerTemplate>
<div class="loading-container">
<mat-spinner diameter="60"></mat-spinner>
<div class="table-container table-container-query" *ngIf="factors?.length >= 3">
<!-- Interaction Effect Table -->
<mat-table style="overflow-x: scroll" [dataSource]="dataSource" class="table query-table">
<!-- Factor columns -->
<ng-container *ngFor="let column of factorColumnDefs" [matColumnDef]="column.name">
<mat-header-cell class="ft-12-700" *matHeaderCellDef>{{ column.label | uppercase }}</mat-header-cell>
<mat-cell class="ft-12-600" *matCellDef="let row">{{ row[column.name] }}</mat-cell>
</ng-container>

<!-- Query columns -->
<ng-container *ngFor="let column of queryColumnDefs" [matColumnDef]="column.name">
<mat-header-cell class="ft-12-700" *matHeaderCellDef>{{ column.label | uppercase }}</mat-header-cell>
<mat-cell class="ft-12-600" *matCellDef="let row">{{ row[column.name] }}</mat-cell>
</ng-container>

<!-- Header row -->
<mat-header-row *matHeaderRowDef="headerColumns"></mat-header-row>

<!-- Data rows -->
<mat-row *matRowDef="let row; columns: dataColumns"></mat-row>
</mat-table>
</div>
</ng-template>
<br />
<ng-template #noResultTemplate>
<span class="zero-state" [innerHTML]="'query.result.empty-result.text' | translate"> </span>
</ng-template>
<ng-template #spinnerTemplate>
<div class="loading-container">
<mat-spinner diameter="60"></mat-spinner>
</div>
</ng-template>
<br />
</div>
</div>
46 changes: 35 additions & 11 deletions .../dashboard/home/components/experiment-query-result/experiment-query-result.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,18 +18,47 @@
margin-bottom: 10px;
}

.factor-name-main {
color: var(--grey-3);
margin-top: 10px;
padding-left: 150px;
}

.factor-name1 {
color: var(--grey-3);
margin-top: 10px;
padding-left: 190px;
padding-right: 280px;
padding-left: 150px;
padding-right: 330px;
}

.factor-name2 {
color: var(--grey-3);
margin-bottom: -50px;
padding-left: 185px;
padding-right: 275px;
padding-left: 150px;
padding-right: 330px;
}

.table-container {
padding: 24px 34px;

.table {
mat-cell,
mat-header-cell {
justify-content: flex-start !important;
}
}

&-query .query-table {
justify-content: space-between;

.mat-header-cell {
justify-content: left;
}

.mat-cell {
justify-content: left;
}
}
}

::ng-deep .ngx-charts {
Expand All @@ -41,14 +70,9 @@
}
}

::ng-deep .ngx-charts
g.line-chart
> g:last-of-type
> g:nth-child(n)
g.line-series
> path {
::ng-deep .ngx-charts g.line-chart > g:last-of-type > g:nth-child(n) g.line-series > path {
stroke-width: 5px;
}
}

::ng-deep {
.legend-labels {
Expand Down
Loading

0 comments on commit 8758300

Please sign in to comment.