feat(#10240): hide target counts past goal

package.json

@@ -126,7 +126,7 @@
     "chai-shallow-deep-equal": "^1.4.6",
     "chai-things": "^0.2.0",
     "chokidar": "^4.0.3",
-    "cht-conf": "^6.0.2",
+    "cht-conf": "github:cliftonmcintosh/cht-conf#feat/10240-hide-target-counts-past-goal",
     "cht-conf-test-harness": "^5.0.3",
     "clean-css-cli": "^5.6.2",
     "couchdb-compile": "^1.11.2",

shared-libs/rules-engine/src/target-state.js

@@ -205,7 +205,8 @@ module.exports = {
     const aggregateTarget = target => {
       const aggregated = pick(
         target,
-        ['id', 'type', 'goal', 'translation_key', 'name', 'icon', 'subtitle_translation_key', 'visible']
+        ['id', 'type', 'goal', 'translation_key', 'name', 'icon', 'subtitle_translation_key', 'visible',
+          'limit_count_to_goal']
       );
       aggregated.value = scoreTarget(target);
 

tests/e2e/default/targets/analytics.wdio-spec.js

@@ -152,6 +152,20 @@ describe('Targets', () => {
     await browser.waitUntil(async () => (await analyticsPage.noAdminTargets().isDisplayed()) === true);
   });
 
+  it('should display goal as count when limit_count_to_goal is set and count exceeds goal', async () => {
+    const settings = await compileTargets('targets-limit-count-config.js');
+    await utils.updateSettings(settings, { ignoreReload: true, sync: true, refresh: true, revert: true });
+
+    await analyticsPage.goToTargets();
+    await commonPage.waitForLoaders();
+
+    // The test setup includes person contacts, so the rules engine will calculate a pass count.
+    // goal=1 is set low enough that it will be exceeded, so limit_count_to_goal should cap the display at 1.
+    const targets = await analyticsPage.getTargets();
+    const activePregnancies = targets.find(t => t.title === 'Active pregnancies');
+    expect(activePregnancies.count).to.equal('1');
+  });
+
   it('should show error message for bad config', async () => {
     const settings = await compileTargets('targets-error-config.js');
     await utils.updateSettings(settings, { ignoreReload: true, sync: true, refresh: true, revert: true  });

tests/e2e/default/targets/config/targets-limit-count-config.js

@@ -0,0 +1,12 @@
+module.exports = [
+  {
+    id: 'active-pregnancies',
+    translation_key: 'targets.anc.active_pregnancies.title',
+    type: 'count',
+    goal: 1,
+    limit_count_to_goal: true,
+    appliesTo: 'contacts',
+    appliesToType: ['person'],
+    date: 'now',
+  },
+];

webapp/src/css/targets.less

@@ -69,6 +69,9 @@
         position: relative;
       }
       .count {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
         text-align: center;
         .number {
           text-align: center;
@@ -78,11 +81,7 @@
           padding-bottom: 0;
         }
         .goal {
-          position: absolute;
-          right: 0;
-          padding-right: 20px;
           color: @label-color;
-          top: 15px;
           p {
             font-size: @font-small;
             font-weight: 400;

webapp/src/ts/modules/analytics/analytics-targets.component.html

@@ -36,10 +36,10 @@
             [aggregate]="false">
           </mm-analytics-targets-progress>
           <div class="count" *ngIf="target.type !== 'percent'">
+            <div class="number">{{ getDisplayCount(target) | localizeNumber }}</div>
             <div class="goal" *ngIf="target.goal >= 0">
               <p>{{ 'analytics.target.monthly_goal' | translate }} {{ target.goal | localizeNumber }}</p>
             </div>
-            <div class="number">{{ target.value?.pass | localizeNumber }}</div>
           </div>
         </div>
         <div class="heading">

webapp/src/ts/modules/analytics/analytics-targets.component.ts

@@ -133,4 +133,11 @@ export class AnalyticsTargetsComponent implements OnInit, OnDestroy {
         });
       });
   }
+
+  getDisplayCount(target: any): number {
+    if (target.limit_count_to_goal && target.goal >= 0 && target.value?.pass >= target.goal) {
+      return target.goal;
+    }
+    return target.value?.pass;
+  }
 }

webapp/tests/karma/ts/modules/analytics/analytics-targets.component.spec.ts

@@ -19,6 +19,7 @@ import { ContactTypesService } from '@mm-services/contact-types.service';
 import { SettingsService } from '@mm-services/settings.service';
 import { TelemetryService } from '@mm-services/telemetry.service';
 import { Selectors } from '@mm-selectors/index';
+import { ResourceIconsService } from '@mm-services/resource-icons.service';
 
 describe('AnalyticsTargetsComponent', () => {
   let component: AnalyticsTargetsComponent;
@@ -102,6 +103,7 @@ describe('AnalyticsTargetsComponent', () => {
           { provide: ContactTypesService, useValue: contactTypesService },
           { provide: SettingsService, useValue: settingsService },
           { provide: TelemetryService, useValue: telemetryService },
+          { provide: ResourceIconsService, useValue: { getImg: sinon.stub().returns('') } },
         ]
       })
       .compileComponents()
@@ -323,4 +325,74 @@ describe('AnalyticsTargetsComponent', () => {
     expect(globalActions.setTitle.notCalled).to.be.true;
     expect(globalActions.setShowContent.calledOnceWithExactly(false)).to.be.true;
   }));
+
+  it('should display goal as count number when limit_count_to_goal is set and count exceeds goal', fakeAsync(() => {
+    sinon.reset();
+    rulesEngineService.isEnabled.resolves(true);
+    rulesEngineService.fetchTargets.resolves([
+      { id: 'target1', type: 'count', goal: 10, limit_count_to_goal: true, value: { pass: 15, total: 15 } },
+    ]);
+
+    component.ngOnInit();
+    tick(50);
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.querySelector('.count .number').innerText).to.equal('10');
+  }));
+
+  it('should display goal as count number when limit_count_to_goal is set and count equals goal', fakeAsync(() => {
+    sinon.reset();
+    rulesEngineService.isEnabled.resolves(true);
+    rulesEngineService.fetchTargets.resolves([
+      { id: 'target1', type: 'count', goal: 10, limit_count_to_goal: true, value: { pass: 10, total: 10 } },
+    ]);
+
+    component.ngOnInit();
+    tick(50);
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.querySelector('.count .number').innerText).to.equal('10');
+  }));
+
+  it('should display actual count when limit_count_to_goal is set but count is below goal', fakeAsync(() => {
+    sinon.reset();
+    rulesEngineService.isEnabled.resolves(true);
+    rulesEngineService.fetchTargets.resolves([
+      { id: 'target1', type: 'count', goal: 10, limit_count_to_goal: true, value: { pass: 5, total: 5 } },
+    ]);
+
+    component.ngOnInit();
+    tick(50);
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.querySelector('.count .number').innerText).to.equal('5');
+  }));
+
+  it('should display actual count when limit_count_to_goal is not set and count exceeds goal', fakeAsync(() => {
+    sinon.reset();
+    rulesEngineService.isEnabled.resolves(true);
+    rulesEngineService.fetchTargets.resolves([
+      { id: 'target1', type: 'count', goal: 10, value: { pass: 15, total: 15 } },
+    ]);
+
+    component.ngOnInit();
+    tick(50);
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.querySelector('.count .number').innerText).to.equal('15');
+  }));
+
+  it('should display actual count when limit_count_to_goal is set but target has no goal', fakeAsync(() => {
+    sinon.reset();
+    rulesEngineService.isEnabled.resolves(true);
+    rulesEngineService.fetchTargets.resolves([
+      { id: 'target1', type: 'count', goal: -1, limit_count_to_goal: true, value: { pass: 15, total: 15 } },
+    ]);
+
+    component.ngOnInit();
+    tick(50);
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.querySelector('.count .number').innerText).to.equal('15');
+  }));
 });