From 678b29b3c5ab44c713d814ed0536e91fdf02717d Mon Sep 17 00:00:00 2001 From: khanjan Date: Mon, 13 May 2024 15:11:28 +0530 Subject: [PATCH 1/3] Fixed bar chart color display. Sorted the displaying graphData, graphColorIndicators and conditionsFilterOptions(for correct display order). Updated variable types previously designated as 'any'. --- .../experiments/store/experiments.model.ts | 13 ++++++ .../enrollment-over-time.component.html | 4 +- .../enrollment-over-time.component.ts | 42 ++++++++++++++----- 3 files changed, 47 insertions(+), 12 deletions(-) diff --git a/frontend/projects/upgrade/src/app/core/experiments/store/experiments.model.ts b/frontend/projects/upgrade/src/app/core/experiments/store/experiments.model.ts index 33693498f4..45ed2151f5 100644 --- a/frontend/projects/upgrade/src/app/core/experiments/store/experiments.model.ts +++ b/frontend/projects/upgrade/src/app/core/experiments/store/experiments.model.ts @@ -37,6 +37,19 @@ export { IExperimentEnrollmentDetailStats, DATE_RANGE, }; +export interface ExperimentConditionFilterOptions { + code: string; + id: string +} +export interface ExperimentPartitionFilterOptions { + id:string + point:string + twoCharacterId:string +} +export interface ExperimentDateFilterOptions { + value:DATE_RANGE + viewValue:string +} export interface IEnrollmentStatByDate { date: string; diff --git a/frontend/projects/upgrade/src/app/features/dashboard/home/components/enrollment-over-time/enrollment-over-time.component.html b/frontend/projects/upgrade/src/app/features/dashboard/home/components/enrollment-over-time/enrollment-over-time.component.html index 8698abd560..4bf53cd642 100644 --- a/frontend/projects/upgrade/src/app/features/dashboard/home/components/enrollment-over-time/enrollment-over-time.component.html +++ b/frontend/projects/upgrade/src/app/features/dashboard/home/components/enrollment-over-time/enrollment-over-time.component.html @@ -107,7 +107,7 @@
-
+
{{ condition.conditionCode }}
@@ -116,7 +116,7 @@
{ this.conditionsFilterOptions.push({ code: condition.conditionCode, id: condition.id }); this.selectedCondition.push(condition.id); + this.conditionsFilterOptions.sort((a, b) => a.code.localeCompare(b.code)); }); + + this.partitionsFilterOptions = []; this.selectedPartition = []; this.experiment.partitions.forEach((partition) => { @@ -102,6 +109,8 @@ export class EnrollmentOverTimeComponent implements OnChanges, OnInit, OnDestroy }); this.selectedPartition.push(partition.id); }); + + this.groupFiltersOptions = this.experiment.assignmentUnit === ASSIGNMENT_UNIT.INDIVIDUAL ? [INDIVIDUAL] @@ -113,11 +122,15 @@ export class EnrollmentOverTimeComponent implements OnChanges, OnInit, OnDestroy this.showLabelOfxAxis = false; } } - + 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); }); @@ -137,7 +150,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: @@ -155,7 +168,8 @@ 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', @@ -203,16 +217,24 @@ 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 - ? this.dateToString(new Date(graphData.date), days) - : months[new Date(graphData.date).getMonth()], + this.selectedDateFilter === DATE_RANGE.LAST_SEVEN_DAYS + ? this.dateToString(new Date(graphData.date), days) + : months[new Date(graphData.date).getMonth()], series, }; + }); } + + applyExperimentFilter(type: ExperimentFilterType) { switch (type) { case ExperimentFilterType.DATE_FILTER: From f36a6aeb63ffb462b21a0456b21667a33e90db94 Mon Sep 17 00:00:00 2001 From: khanjan Date: Wed, 15 May 2024 15:25:08 +0530 Subject: [PATCH 2/3] Required Prettier changes and datatype changes done --- .../experiments/store/experiments.model.ts | 15 ++++++----- .../enrollment-over-time.component.html | 26 ++++--------------- .../enrollment-over-time.component.ts | 19 +++++--------- 3 files changed, 21 insertions(+), 39 deletions(-) diff --git a/frontend/projects/upgrade/src/app/core/experiments/store/experiments.model.ts b/frontend/projects/upgrade/src/app/core/experiments/store/experiments.model.ts index 45ed2151f5..888485c9c6 100644 --- a/frontend/projects/upgrade/src/app/core/experiments/store/experiments.model.ts +++ b/frontend/projects/upgrade/src/app/core/experiments/store/experiments.model.ts @@ -37,18 +37,21 @@ export { IExperimentEnrollmentDetailStats, DATE_RANGE, }; + export interface ExperimentConditionFilterOptions { code: string; - id: string + id: string; } + export interface ExperimentPartitionFilterOptions { - id:string - point:string - twoCharacterId:string + id: string; + point: string; + twoCharacterId: string; } + export interface ExperimentDateFilterOptions { - value:DATE_RANGE - viewValue:string + value: DATE_RANGE; + viewValue: string; } export interface IEnrollmentStatByDate { diff --git a/frontend/projects/upgrade/src/app/features/dashboard/home/components/enrollment-over-time/enrollment-over-time.component.html b/frontend/projects/upgrade/src/app/features/dashboard/home/components/enrollment-over-time/enrollment-over-time.component.html index 4bf53cd642..c352598561 100644 --- a/frontend/projects/upgrade/src/app/features/dashboard/home/components/enrollment-over-time/enrollment-over-time.component.html +++ b/frontend/projects/upgrade/src/app/features/dashboard/home/components/enrollment-over-time/enrollment-over-time.component.html @@ -1,11 +1,7 @@
{{ 'home.view-experiment.enrollments-by-decision-point.title.text' | translate }}
- + {{ 'home.view-experiment.graph-decision-point.text' | translate }} @@ -33,11 +29,7 @@ - + {{ 'home.view-experiment.graph-conditions.text' | translate }} @@ -65,11 +57,7 @@ - + {{ 'home.view-experiment.graph-type.text' | translate }} @@ -85,11 +73,7 @@ - + {{ 'home.view-experiment.graph-time.text' | translate }} @@ -116,7 +100,7 @@
a.code.localeCompare(b.code)); }); - this.partitionsFilterOptions = []; this.selectedPartition = []; this.experiment.partitions.forEach((partition) => { @@ -110,7 +110,6 @@ export class EnrollmentOverTimeComponent implements OnChanges, OnInit, OnDestroy this.selectedPartition.push(partition.id); }); - this.groupFiltersOptions = this.experiment.assignmentUnit === ASSIGNMENT_UNIT.INDIVIDUAL ? [INDIVIDUAL] @@ -122,10 +121,10 @@ export class EnrollmentOverTimeComponent implements OnChanges, OnInit, OnDestroy this.showLabelOfxAxis = false; } } - + 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 = [...this.experiment.conditions]; this.graphColorIndicators.sort((a, b) => a.conditionCode.localeCompare(b.conditionCode)); this.graphInfoSub = this.experimentService.selectExperimentGraphInfo$ @@ -169,7 +168,6 @@ export class EnrollmentOverTimeComponent implements OnChanges, OnInit, OnDestroy } setDataInGraphFormat(data: IEnrollmentStatByDate[]) { - const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; const months = [ 'January', @@ -224,17 +222,14 @@ export class EnrollmentOverTimeComponent implements OnChanges, OnInit, OnDestroy return { name: - this.selectedDateFilter === DATE_RANGE.LAST_SEVEN_DAYS - ? this.dateToString(new Date(graphData.date), days) - : months[new Date(graphData.date).getMonth()], + this.selectedDateFilter === DATE_RANGE.LAST_SEVEN_DAYS + ? this.dateToString(new Date(graphData.date), days) + : months[new Date(graphData.date).getMonth()], series, }; - }); } - - applyExperimentFilter(type: ExperimentFilterType) { switch (type) { case ExperimentFilterType.DATE_FILTER: From 19d55ff0512c98d473912659b0ca76da6630570b Mon Sep 17 00:00:00 2001 From: khanjan Date: Mon, 20 May 2024 11:02:44 +0530 Subject: [PATCH 3/3] conditionsFilterOptions sorting moved outside loop --- .../enrollment-over-time/enrollment-over-time.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/projects/upgrade/src/app/features/dashboard/home/components/enrollment-over-time/enrollment-over-time.component.ts b/frontend/projects/upgrade/src/app/features/dashboard/home/components/enrollment-over-time/enrollment-over-time.component.ts index e6ec85441c..819b92f268 100644 --- a/frontend/projects/upgrade/src/app/features/dashboard/home/components/enrollment-over-time/enrollment-over-time.component.ts +++ b/frontend/projects/upgrade/src/app/features/dashboard/home/components/enrollment-over-time/enrollment-over-time.component.ts @@ -96,8 +96,8 @@ 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)); }); + this.conditionsFilterOptions.sort((a, b) => a.code.localeCompare(b.code)); this.partitionsFilterOptions = []; this.selectedPartition = [];