Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixed bar chart color display. Specified variable types. #1462 #1527

Merged
merged 5 commits into from
Jun 3, 2024
Merged

Fixed bar chart color display. Specified variable types. #1462 #1527

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
678b29b
Fixed bar chart color display. Sorted the displaying graphData, graph…
May 13, 2024
73306fc
Merge branch 'dev' into bugfix/bar-chart-initial-display-correct-cond…
Yagnik56 May 14, 2024
f36a6ae
Required Prettier changes and datatype changes done
May 15, 2024
19d55ff
conditionsFilterOptions sorting moved outside loop
May 20, 2024
cb3e4a4
Merge branch 'dev' into bugfix/bar-chart-initial-display-correct-cond…
ppratikcr7 Jun 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions frontend/projects/upgrade/src/app/core/experiments/store/experiments.model.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,22 @@ export {
DATE_RANGE,
};
Yagnik56 marked this conversation as resolved.
Show resolved Hide resolved

export interface ExperimentConditionFilterOptions {
code: string;
id: string;
}
Yagnik56 marked this conversation as resolved.
Show resolved Hide resolved

export interface ExperimentPartitionFilterOptions {
id: string;
point: string;
twoCharacterId: string;
}
Yagnik56 marked this conversation as resolved.
Show resolved Hide resolved

export interface ExperimentDateFilterOptions {
value: DATE_RANGE;
viewValue: string;
}

export interface IEnrollmentStatByDate {
date: string;
stats: IExperimentEnrollmentDetailDateStats;
Expand Down
26 changes: 5 additions & 21 deletions ...atures/dashboard/home/components/enrollment-over-time/enrollment-over-time.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,7 @@
<div class="enrollment-over-time">
<span class="ft-18-700 title">{{ 'home.view-experiment.enrollments-by-decision-point.title.text' | translate }}</span>
<div class="enrollment-filters">
<mat-form-field
class="dense-2 sites"
appearance="outline"
subscriptSizing="dynamic"
>
<mat-form-field class="dense-2 sites" appearance="outline" subscriptSizing="dynamic">
<mat-label class="ft-14-400 dropdown-label">
{{ 'home.view-experiment.graph-decision-point.text' | translate }}
</mat-label>
Expand Down Expand Up @@ -33,11 +29,7 @@
</mat-select>
</mat-form-field>

<mat-form-field
class="dense-2 conditions"
appearance="outline"
subscriptSizing="dynamic"
>
<mat-form-field class="dense-2 conditions" appearance="outline" subscriptSizing="dynamic">
<mat-label class="ft-14-400 dropdown-label">
{{ 'home.view-experiment.graph-conditions.text' | translate }}
</mat-label>
Expand Down Expand Up @@ -65,11 +57,7 @@
</mat-select>
</mat-form-field>

<mat-form-field
class="dense-2"
appearance="outline"
subscriptSizing="dynamic"
>
<mat-form-field class="dense-2" appearance="outline" subscriptSizing="dynamic">
<mat-label class="ft-14-400 dropdown-label">
{{ 'home.view-experiment.graph-type.text' | translate }}
</mat-label>
Expand All @@ -85,11 +73,7 @@
</mat-select>
</mat-form-field>

<mat-form-field
class="dense-2"
appearance="outline"
subscriptSizing="dynamic"
>
<mat-form-field class="dense-2" appearance="outline" subscriptSizing="dynamic">
<mat-label class="ft-14-400 dropdown-label">
{{ 'home.view-experiment.graph-time.text' | translate }}
</mat-label>
Expand All @@ -107,7 +91,7 @@

<div class="chart-container">
<div class="condition-container">
<div class="condition" *ngFor="let condition of experiment.conditions; let index = index">
<div class="condition" *ngFor="let condition of graphColorIndicators; let index = index">
<span class="color-box" [ngStyle]="{ 'background-color': colors[index] }"></span>
<span>{{ condition.conditionCode }}</span>
</div>
Expand Down
29 changes: 23 additions & 6 deletions ...features/dashboard/home/components/enrollment-over-time/enrollment-over-time.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,10 @@ import {
ExperimentVM,
DATE_RANGE,
IEnrollmentStatByDate,
ExperimentConditionFilterOptions,
ExperimentPartitionFilterOptions,
ExperimentDateFilterOptions,
ExperimentCondition,
} from '../../../../../core/experiments/store/experiments.model';
import { ExperimentService } from '../../../../../core/experiments/experiments.service';
import { filter } from 'rxjs/operators';
Expand All @@ -28,9 +32,9 @@ const INDIVIDUAL = 'individual';
export class EnrollmentOverTimeComponent implements OnChanges, OnInit, OnDestroy {
@Input() experiment: ExperimentVM;
groupFiltersOptions: string[] = [];
conditionsFilterOptions: any[] = [];
partitionsFilterOptions: any[] = [];
dateFilterOptions: any[] = [
conditionsFilterOptions: ExperimentConditionFilterOptions[] = [];
partitionsFilterOptions: ExperimentPartitionFilterOptions[] = [];
dateFilterOptions: ExperimentDateFilterOptions[] = [
{ value: DATE_RANGE.LAST_SEVEN_DAYS, viewValue: 'Last 7 days' },
{ value: DATE_RANGE.LAST_THREE_MONTHS, viewValue: 'Last 3 months' },
{ value: DATE_RANGE.LAST_SIX_MONTHS, viewValue: 'Last 6 months' },
Expand All @@ -44,6 +48,7 @@ export class EnrollmentOverTimeComponent implements OnChanges, OnInit, OnDestroy
copyGraphData: IEnrollmentStatByDate[] = [];
isInitialLoad = true;
Yagnik56 marked this conversation as resolved.
Show resolved Hide resolved
showLabelOfxAxis = true;
Yagnik56 marked this conversation as resolved.
Show resolved Hide resolved
graphColorIndicators: ExperimentCondition[] = [];

colors = [
'#31e8dd',
Expand Down Expand Up @@ -91,7 +96,9 @@ export class EnrollmentOverTimeComponent implements OnChanges, OnInit, OnDestroy
this.experiment.conditions.forEach((condition) => {
this.conditionsFilterOptions.push({ code: condition.conditionCode, id: condition.id });
this.selectedCondition.push(condition.id);
this.conditionsFilterOptions.sort((a, b) => a.code.localeCompare(b.code));
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The sort is done in every loop. This statement can be moved outside of the loop

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moved sorting outside the loop

});

this.partitionsFilterOptions = [];
this.selectedPartition = [];
this.experiment.partitions.forEach((partition) => {
Expand All @@ -102,6 +109,7 @@ export class EnrollmentOverTimeComponent implements OnChanges, OnInit, OnDestroy
});
this.selectedPartition.push(partition.id);
});

this.groupFiltersOptions =
this.experiment.assignmentUnit === ASSIGNMENT_UNIT.INDIVIDUAL
? [INDIVIDUAL]
Expand All @@ -115,9 +123,13 @@ export class EnrollmentOverTimeComponent implements OnChanges, OnInit, OnDestroy
}

ngOnInit() {
// Creating a new array with experiment conditionCode for the condition colour indicator to align with sorted graphData
this.graphColorIndicators = [...this.experiment.conditions];
this.graphColorIndicators.sort((a, b) => a.conditionCode.localeCompare(b.conditionCode));

this.graphInfoSub = this.experimentService.selectExperimentGraphInfo$
.pipe(filter((info) => !!info))
.subscribe((graphInfo: any) => {
.subscribe((graphInfo: IEnrollmentStatByDate[]) => {
this.copyGraphData = graphInfo;
this.populateGraphData(graphInfo);
});
Expand All @@ -137,7 +149,7 @@ export class EnrollmentOverTimeComponent implements OnChanges, OnInit, OnDestroy
return value % 1 !== 0 ? '' : value;
}

populateGraphData(graphData: any) {
populateGraphData(graphData: IEnrollmentStatByDate[]) {
this.graphData = this.setDataInGraphFormat(graphData);
switch (this.selectedDateFilter) {
case DATE_RANGE.LAST_SEVEN_DAYS:
Expand All @@ -155,7 +167,7 @@ export class EnrollmentOverTimeComponent implements OnChanges, OnInit, OnDestroy
}
}

setDataInGraphFormat(data: any) {
setDataInGraphFormat(data: IEnrollmentStatByDate[]) {
const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
const months = [
'January',
Expand Down Expand Up @@ -203,6 +215,11 @@ export class EnrollmentOverTimeComponent implements OnChanges, OnInit, OnDestroy
});
}
});

// Sort the series array alphabetically based on the condition names.
// This ensures consistent ordering of conditions in the resulting graph.
series.sort((a, b) => a.name.localeCompare(b.name));

return {
name:
this.selectedDateFilter === DATE_RANGE.LAST_SEVEN_DAYS
Expand Down
Loading