From e4cd644d8bca9e5fa1fb5b5011457012b4800f3b Mon Sep 17 00:00:00 2001 From: Ben Kiarie Date: Mon, 30 Oct 2023 15:30:20 +0300 Subject: [PATCH] feat(#8513): update target component to use material design * Chore: update packages * Feat: update targets-below-color * Chore: change order of target card * Chore: update target card styles * Fix: update structure of targets test * Chore: update css styling * Chore: update test to check count number color * Fix: update target aggregate background color * Fix: update tests after targets page changes * Fix: update tests after targets page changes * Fix: update tests after targets page changes * Fix: revert changes * Fix: use saved variable * Fix: add and use target color constant * Fix: delete unused variable * Fix: use color constant * Fix: clean up * Fix: format code --------- Co-authored-by: Ben Kiarie --- .../default/analytics/analytics.wdio-spec.js | 15 ++--- .../default/enketo/death-report.wdio-spec.js | 21 ++++--- ...pregnancy-complete-a-delivery.wdio-spec.js | 15 ++--- .../e2e/default/enketo/pregnancy.wdio-spec.js | 15 ++--- .../enketo/undo-death-report.wdio-spec.js | 15 ++--- .../e2e/standard/enketo/delivery.wdio-spec.js | 17 +++--- .../enketo/immunization-visit.wdio-spec.js | 45 ++++++++------- .../standard/enketo/pregnancy.wdio-spec.js | 17 +++--- .../default/analytics/analytics.wdio.page.js | 17 +++++- webapp/src/css/targets.less | 57 ++++++++++++------- webapp/src/css/variables.less | 3 +- .../analytics-targets.component.html | 24 ++++---- 12 files changed, 154 insertions(+), 107 deletions(-) diff --git a/tests/e2e/default/analytics/analytics.wdio-spec.js b/tests/e2e/default/analytics/analytics.wdio-spec.js index 30cf6a3c01c..27b1bd99b46 100644 --- a/tests/e2e/default/analytics/analytics.wdio-spec.js +++ b/tests/e2e/default/analytics/analytics.wdio-spec.js @@ -10,6 +10,7 @@ const placeFactory = require('@factories/cht/contacts/place'); const personFactory = require('@factories/cht/contacts/person'); const chtConfUtils = require('@utils/cht-conf'); const chtDbUtils = require('@utils/cht-db'); +const { TARGET_MET_COLOR, TARGET_UNMET_COLOR } = analyticsPage; const updateSettings = async (settings) => { await utils.updateSettings(settings, 'api'); @@ -61,14 +62,14 @@ describe('Targets', () => { const targets = await analyticsPage.getTargets(); expect(targets).to.have.deep.members([ - { title: 'Deaths', goal: '0', count: '0' }, - { title: 'New pregnancies', goal: '20', count: '0' }, - { title: 'Live births', count: '0' }, - { title: 'Active pregnancies', count: '0' }, - { title: 'Active pregnancies with 1+ routine facility visits', count: '0' }, + { title: 'Deaths', goal: '0', count: '0', countNumberColor: TARGET_MET_COLOR }, + { title: 'New pregnancies', goal: '20', count: '0', countNumberColor: TARGET_UNMET_COLOR }, + { title: 'Live births', count: '0', countNumberColor: TARGET_MET_COLOR }, + { title: 'Active pregnancies', count: '0', countNumberColor: TARGET_MET_COLOR }, + { title: 'Active pregnancies with 1+ routine facility visits', count: '0', countNumberColor: TARGET_MET_COLOR }, { title: 'In-facility deliveries', percent: '0%', percentCount: '(0 of 0)' }, - { title: 'Active pregnancies with 4+ routine facility visits', count: '0' }, - { title: 'Active pregnancies with 8+ routine contacts', count: '0' }, + { title: 'Active pregnancies with 4+ routine facility visits', count: '0', countNumberColor: TARGET_MET_COLOR }, + { title: 'Active pregnancies with 8+ routine contacts', count: '0', countNumberColor: TARGET_MET_COLOR }, ]); }); diff --git a/tests/e2e/default/enketo/death-report.wdio-spec.js b/tests/e2e/default/enketo/death-report.wdio-spec.js index 9903f22a978..700bafd5f09 100644 --- a/tests/e2e/default/enketo/death-report.wdio-spec.js +++ b/tests/e2e/default/enketo/death-report.wdio-spec.js @@ -11,6 +11,7 @@ const analyticsPage = require('@page-objects/default/analytics/analytics.wdio.pa const genericForm = require('@page-objects/default/enketo/generic-form.wdio.page'); const deathReportForm = require('@page-objects/default/enketo/death-report.page'); const sentinelUtils = require('@utils/sentinel'); +const { TARGET_MET_COLOR, TARGET_UNMET_COLOR } = analyticsPage; describe('Submit a death report', () => { const places = placeFactory.generateHierarchy(); @@ -74,14 +75,20 @@ describe('Submit a death report', () => { const targets = await analyticsPage.getTargets(); expect(targets).to.have.deep.members([ - { title: 'Deaths', goal: '0', count: '1' }, - { title: 'New pregnancies', goal: '20', count: '0' }, - { title: 'Live births', count: '0' }, - { title: 'Active pregnancies', count: '0' }, - { title: 'Active pregnancies with 1+ routine facility visits', count: '0' }, + { title: 'Deaths', goal: '0', count: '1', countNumberColor: TARGET_MET_COLOR }, + { title: 'New pregnancies', goal: '20', count: '0', countNumberColor: TARGET_UNMET_COLOR }, + { title: 'Live births', count: '0', countNumberColor: TARGET_MET_COLOR }, + { title: 'Active pregnancies', count: '0', countNumberColor: TARGET_MET_COLOR }, + { title: 'Active pregnancies with 1+ routine facility visits', + count: '0', + countNumberColor: TARGET_MET_COLOR + }, { title: 'In-facility deliveries', percent: '0%', percentCount: '(0 of 0)' }, - { title: 'Active pregnancies with 4+ routine facility visits', count: '0' }, - { title: 'Active pregnancies with 8+ routine contacts', count: '0' } + { title: 'Active pregnancies with 4+ routine facility visits', + count: '0', + countNumberColor: TARGET_MET_COLOR + }, + { title: 'Active pregnancies with 8+ routine contacts', count: '0', countNumberColor: TARGET_MET_COLOR } ]); }); diff --git a/tests/e2e/default/enketo/pregnancy-complete-a-delivery.wdio-spec.js b/tests/e2e/default/enketo/pregnancy-complete-a-delivery.wdio-spec.js index d9b544ba319..fb78ccebea4 100644 --- a/tests/e2e/default/enketo/pregnancy-complete-a-delivery.wdio-spec.js +++ b/tests/e2e/default/enketo/pregnancy-complete-a-delivery.wdio-spec.js @@ -11,6 +11,7 @@ const placeFactory = require('@factories/cht/contacts/place'); const userFactory = require('@factories/cht/users/users'); const personFactory = require('@factories/cht/contacts/person'); const pregnancyForm = require('@page-objects/default/enketo/pregnancy.wdio.page'); +const { TARGET_MET_COLOR, TARGET_UNMET_COLOR } = analyticsPage; describe('Contact Delivery Form', () => { const BABY_NAME = 'Benja'; @@ -113,14 +114,14 @@ describe('Contact Delivery Form', () => { const targets = await analyticsPage.getTargets(); expect(targets).to.have.deep.members([ - { title: 'Deaths', goal: '0', count: '0' }, - { title: 'New pregnancies', goal: '20', count: '1' }, - { title: 'Live births', count: '1' }, - { title: 'Active pregnancies', count: '0' }, - { title: 'Active pregnancies with 1+ routine facility visits', count: '0' }, + { title: 'Deaths', goal: '0', count: '0', countNumberColor: TARGET_MET_COLOR }, + { title: 'New pregnancies', goal: '20', count: '1', countNumberColor: TARGET_UNMET_COLOR }, + { title: 'Live births', count: '1', countNumberColor: TARGET_MET_COLOR }, + { title: 'Active pregnancies', count: '0', countNumberColor: TARGET_MET_COLOR }, + { title: 'Active pregnancies with 1+ routine facility visits', count: '0', countNumberColor: TARGET_MET_COLOR }, { title: 'In-facility deliveries', percent: '100%', percentCount: '(1 of 1)' }, - { title: 'Active pregnancies with 4+ routine facility visits', count: '0' }, - { title: 'Active pregnancies with 8+ routine contacts', count: '0' }, + { title: 'Active pregnancies with 4+ routine facility visits', count: '0', countNumberColor: TARGET_MET_COLOR }, + { title: 'Active pregnancies with 8+ routine contacts', count: '0', countNumberColor: TARGET_MET_COLOR }, ]); }); }); diff --git a/tests/e2e/default/enketo/pregnancy.wdio-spec.js b/tests/e2e/default/enketo/pregnancy.wdio-spec.js index ce0f6c1e4dd..94cf4dfc4c1 100644 --- a/tests/e2e/default/enketo/pregnancy.wdio-spec.js +++ b/tests/e2e/default/enketo/pregnancy.wdio-spec.js @@ -11,6 +11,7 @@ const reportsPage = require('@page-objects/default/reports/reports.wdio.page'); const analyticsPage = require('@page-objects/default/analytics/analytics.wdio.page'); const genericForm = require('@page-objects/default/enketo/generic-form.wdio.page'); const pregnancyForm = require('@page-objects/default/enketo/pregnancy.wdio.page'); +const { TARGET_MET_COLOR, TARGET_UNMET_COLOR } = analyticsPage; describe('Pregnancy registration', () => { const places = placeFactory.generateHierarchy(); @@ -125,14 +126,14 @@ describe('Pregnancy registration', () => { const targets = await analyticsPage.getTargets(); expect(targets).to.have.deep.members([ - { title: 'Deaths', goal: '0', count: '0' }, - { title: 'New pregnancies', goal: '20', count: '1' }, - { title: 'Live births', count: '0' }, - { title: 'Active pregnancies', count: '1' }, - { title: 'Active pregnancies with 1+ routine facility visits', count: '0' }, + { title: 'Deaths', goal: '0', count: '0', countNumberColor: TARGET_MET_COLOR }, + { title: 'New pregnancies', goal: '20', count: '1', countNumberColor: TARGET_UNMET_COLOR }, + { title: 'Live births', count: '0', countNumberColor: TARGET_MET_COLOR }, + { title: 'Active pregnancies', count: '1', countNumberColor: TARGET_MET_COLOR }, + { title: 'Active pregnancies with 1+ routine facility visits', count: '0', countNumberColor: TARGET_MET_COLOR }, { title: 'In-facility deliveries', percent: '0%', percentCount: '(0 of 0)' }, - { title: 'Active pregnancies with 4+ routine facility visits', count: '0' }, - { title: 'Active pregnancies with 8+ routine contacts', count: '0' } + { title: 'Active pregnancies with 4+ routine facility visits', count: '0', countNumberColor: TARGET_MET_COLOR }, + { title: 'Active pregnancies with 8+ routine contacts', count: '0', countNumberColor: TARGET_MET_COLOR } ]); }); }); diff --git a/tests/e2e/default/enketo/undo-death-report.wdio-spec.js b/tests/e2e/default/enketo/undo-death-report.wdio-spec.js index 9d1323f5ecb..d22b7877223 100644 --- a/tests/e2e/default/enketo/undo-death-report.wdio-spec.js +++ b/tests/e2e/default/enketo/undo-death-report.wdio-spec.js @@ -10,6 +10,7 @@ const reportsPage = require('@page-objects/default/reports/reports.wdio.page'); const analyticsPage = require('@page-objects/default/analytics/analytics.wdio.page'); const deathReportForm = require('@page-objects/default/enketo/death-report.page'); const undoDeathReportForm = require('@page-objects/default/enketo/undo-death-report.page'); +const { TARGET_MET_COLOR, TARGET_UNMET_COLOR } = analyticsPage; describe('Submit an undo death report', () => { const places = placeFactory.generateHierarchy(); @@ -51,14 +52,14 @@ describe('Submit an undo death report', () => { const targets = await analyticsPage.getTargets(); expect(targets).to.have.deep.members([ - { title: 'Deaths', goal: '0', count: '0' }, - { title: 'New pregnancies', goal: '20', count: '0' }, - { title: 'Live births', count: '0' }, - { title: 'Active pregnancies', count: '0' }, - { title: 'Active pregnancies with 1+ routine facility visits', count: '0' }, + { title: 'Deaths', goal: '0', count: '0', countNumberColor: TARGET_MET_COLOR }, + { title: 'New pregnancies', goal: '20', count: '0', countNumberColor: TARGET_UNMET_COLOR }, + { title: 'Live births', count: '0', countNumberColor: TARGET_MET_COLOR }, + { title: 'Active pregnancies', count: '0', countNumberColor: TARGET_MET_COLOR }, + { title: 'Active pregnancies with 1+ routine facility visits', count: '0', countNumberColor: TARGET_MET_COLOR }, { title: 'In-facility deliveries', percent: '0%', percentCount: '(0 of 0)' }, - { title: 'Active pregnancies with 4+ routine facility visits', count: '0' }, - { title: 'Active pregnancies with 8+ routine contacts', count: '0' } + { title: 'Active pregnancies with 4+ routine facility visits', count: '0', countNumberColor: TARGET_MET_COLOR }, + { title: 'Active pregnancies with 8+ routine contacts', count: '0', countNumberColor: TARGET_MET_COLOR }, ]); }); }); diff --git a/tests/e2e/standard/enketo/delivery.wdio-spec.js b/tests/e2e/standard/enketo/delivery.wdio-spec.js index 9da310461a9..3a56eb7993b 100644 --- a/tests/e2e/standard/enketo/delivery.wdio-spec.js +++ b/tests/e2e/standard/enketo/delivery.wdio-spec.js @@ -12,6 +12,7 @@ const genericForm = require('@page-objects/default/enketo/generic-form.wdio.page const pregnancyForm = require('@page-objects/standard/enketo/pregnancy.wdio.page'); const pregnancyVisitForm = require('@page-objects/standard/enketo/pregnancy-visit.wdio.page'); const deliveryForm = require('@page-objects/standard/enketo/delivery.wdio.page'); +const { TARGET_MET_COLOR } = analyticsPage; describe('Delivery', () => { const places = placeFactory.generateHierarchy(); @@ -143,18 +144,18 @@ describe('Delivery', () => { const targets = await analyticsPage.getTargets(); expect(targets).to.have.deep.members([ - { title: 'Active pregnancies', count: '0' }, - { title: 'New pregnancies', count: '2' }, - { title: 'Births', count: '2' }, + { title: 'Active pregnancies', count: '0', countNumberColor: TARGET_MET_COLOR }, + { title: 'New pregnancies', count: '2', countNumberColor: TARGET_MET_COLOR }, + { title: 'Births', count: '2', countNumberColor: TARGET_MET_COLOR }, { title: 'Deliveries with 1+ visit', percent: '100%', percentCount: '(2 of 2)' }, { title: 'Deliveries with 4+ visits', percent: '50%', percentCount: '(1 of 2)' }, { title: 'Deliveries at facility', percent: '100%', percentCount: '(2 of 2)' }, { title: '<5 children screened for growth monitoring', percent: '0%', percentCount: '(0 of 0)' }, - { title: '<5 Underweight Growth Monitoring', count: '0' }, - { title: 'Active MAM cases', count: '0' }, - { title: 'Active SAM cases', count: '0' }, - { title: 'Active OTP cases', count: '0' }, - { title: 'Active SFP cases', count: '0' } + { title: '<5 Underweight Growth Monitoring', count: '0', countNumberColor: TARGET_MET_COLOR }, + { title: 'Active MAM cases', count: '0', countNumberColor: TARGET_MET_COLOR }, + { title: 'Active SAM cases', count: '0', countNumberColor: TARGET_MET_COLOR }, + { title: 'Active OTP cases', count: '0', countNumberColor: TARGET_MET_COLOR }, + { title: 'Active SFP cases', count: '0', countNumberColor: TARGET_MET_COLOR }, ]); }); }); diff --git a/tests/e2e/standard/enketo/immunization-visit.wdio-spec.js b/tests/e2e/standard/enketo/immunization-visit.wdio-spec.js index 6e25397b179..c4f9b5f2b72 100644 --- a/tests/e2e/standard/enketo/immunization-visit.wdio-spec.js +++ b/tests/e2e/standard/enketo/immunization-visit.wdio-spec.js @@ -9,6 +9,7 @@ const placeFactory = require('@factories/cht/contacts/place'); const userFactory = require('@factories/cht/users/users'); const gatewayApiUtils = require('@utils/gateway-api'); const immVisitForm = require('@page-objects/standard/enketo/immunization-visit.wdio.page'); +const { TARGET_MET_COLOR } = analyticsPage; describe('Immunization Visit', () => { const places = placeFactory.generateHierarchy(); @@ -34,7 +35,7 @@ describe('Immunization Visit', () => { await commonPage.waitForPageLoaded(); const messageValue = `CW 60 ${babyName}`; - + await gatewayApiUtils.api.postMessage({ id: 'CW-id', from: user.phone, @@ -51,7 +52,7 @@ describe('Immunization Visit', () => { expect(firstReport.heading).to.equal(babyName); expect(firstReport.form).to.equal('New Child Registration (SMS)'); }); - + it('Submit immunization visit - webapp', async () => { await loginPage.login(user); await commonPage.waitForPageLoaded(); @@ -159,7 +160,7 @@ describe('Immunization Visit', () => { from: user.phone, content: messageValue }); - + await commonPage.goToReports(); const firstReport = await reportsPage.getListReportInfo(await reportsPage.firstReport()); expect(firstReport.heading).to.equal(babyName); @@ -173,26 +174,26 @@ describe('Immunization Visit', () => { await commonPage.goToAnalytics(); const targets = await analyticsPage.getTargets(); - + expect(targets).to.have.deep.members([ - { title: 'Active pregnancies', count: '0' }, - { title: 'New pregnancies', count: '0' }, - { title: 'Births', count: '0' }, - { title: 'Deliveries with 1+ visit', percent: '0%', percentCount: '(0 of 0)' }, - { title: 'Deliveries with 4+ visits', percent: '0%', percentCount: '(0 of 0)' }, - { title: 'Deliveries at facility', percent: '0%', percentCount: '(0 of 0)' }, - { title: 'Children under 5', count: '1' }, - { title: 'Children registered', count: '1' }, - { title: 'Vaccines given', count: '2' }, - { title: 'Children vaccinated', count: '1' }, - { title: 'Children with no vaccines reported', count: '0' }, - { title: 'Children with BCG reported', percent: '100%', percentCount: '(1 of 1)' }, - { title: '<5 children screened for growth monitoring', percent: '0%', percentCount: '(0 of 1)' }, - { title: '<5 Underweight Growth Monitoring', count: '0' }, - { title: 'Active MAM cases', count: '0' }, - { title: 'Active SAM cases', count: '0' }, - { title: 'Active OTP cases', count: '0' }, - { title: 'Active SFP cases', count: '0' } + { title: 'Active pregnancies', count: '0', countNumberColor: TARGET_MET_COLOR }, + { title: 'New pregnancies', count: '0', countNumberColor: TARGET_MET_COLOR }, + { title: 'Births', count: '0', countNumberColor: TARGET_MET_COLOR }, + { title: 'Deliveries with 1+ visit', percent: '0%', percentCount: '(0 of 0)' }, + { title: 'Deliveries with 4+ visits', percent: '0%', percentCount: '(0 of 0)' }, + { title: 'Deliveries at facility', percent: '0%', percentCount: '(0 of 0)' }, + { title: 'Children under 5', count: '1', countNumberColor: TARGET_MET_COLOR }, + { title: 'Children registered', count: '1', countNumberColor: TARGET_MET_COLOR }, + { title: 'Vaccines given', count: '2', countNumberColor: TARGET_MET_COLOR }, + { title: 'Children vaccinated', count: '1', countNumberColor: TARGET_MET_COLOR }, + { title: 'Children with no vaccines reported', count: '0', countNumberColor: TARGET_MET_COLOR }, + { title: 'Children with BCG reported', percent: '100%', percentCount: '(1 of 1)' }, + { title: '<5 children screened for growth monitoring', percent: '0%', percentCount: '(0 of 1)' }, + { title: '<5 Underweight Growth Monitoring', count: '0', countNumberColor: TARGET_MET_COLOR }, + { title: 'Active MAM cases', count: '0', countNumberColor: TARGET_MET_COLOR }, + { title: 'Active SAM cases', count: '0', countNumberColor: TARGET_MET_COLOR }, + { title: 'Active OTP cases', count: '0', countNumberColor: TARGET_MET_COLOR }, + { title: 'Active SFP cases', count: '0', countNumberColor: TARGET_MET_COLOR }, ]); }); diff --git a/tests/e2e/standard/enketo/pregnancy.wdio-spec.js b/tests/e2e/standard/enketo/pregnancy.wdio-spec.js index a0fbd4aff13..cfa3563c6c8 100644 --- a/tests/e2e/standard/enketo/pregnancy.wdio-spec.js +++ b/tests/e2e/standard/enketo/pregnancy.wdio-spec.js @@ -11,6 +11,7 @@ const reportsPage = require('@page-objects/default/reports/reports.wdio.page'); const analyticsPage = require('@page-objects/default/analytics/analytics.wdio.page'); const genericForm = require('@page-objects/default/enketo/generic-form.wdio.page'); const pregnancyForm = require('@page-objects/standard/enketo/pregnancy.wdio.page'); +const { TARGET_MET_COLOR } = analyticsPage; describe('New pregnancy', () => { const places = placeFactory.generateHierarchy(); @@ -132,18 +133,18 @@ describe('New pregnancy', () => { const targets = await analyticsPage.getTargets(); expect(targets).to.have.deep.members([ - { title: 'Active pregnancies', count: '2' }, - { title: 'New pregnancies', count: '2' }, - { title: 'Births', count: '0' }, + { title: 'Active pregnancies', count: '2', countNumberColor: TARGET_MET_COLOR }, + { title: 'New pregnancies', count: '2', countNumberColor: TARGET_MET_COLOR }, + { title: 'Births', count: '0', countNumberColor: TARGET_MET_COLOR }, { title: 'Deliveries with 1+ visit', percent: '0%', percentCount: '(0 of 0)' }, { title: 'Deliveries with 4+ visits', percent: '0%', percentCount: '(0 of 0)' }, { title: 'Deliveries at facility', percent: '0%', percentCount: '(0 of 0)' }, { title: '<5 children screened for growth monitoring', percent: '0%', percentCount: '(0 of 0)' }, - { title: '<5 Underweight Growth Monitoring', count: '0' }, - { title: 'Active MAM cases', count: '0' }, - { title: 'Active SAM cases', count: '0' }, - { title: 'Active OTP cases', count: '0' }, - { title: 'Active SFP cases', count: '0' } + { title: '<5 Underweight Growth Monitoring', count: '0', countNumberColor: TARGET_MET_COLOR }, + { title: 'Active MAM cases', count: '0', countNumberColor: TARGET_MET_COLOR }, + { title: 'Active SAM cases', count: '0', countNumberColor: TARGET_MET_COLOR }, + { title: 'Active OTP cases', count: '0', countNumberColor: TARGET_MET_COLOR }, + { title: 'Active SFP cases', count: '0', countNumberColor: TARGET_MET_COLOR }, ]); }); diff --git a/tests/page-objects/default/analytics/analytics.wdio.page.js b/tests/page-objects/default/analytics/analytics.wdio.page.js index acd16a74fbc..41b34026e43 100644 --- a/tests/page-objects/default/analytics/analytics.wdio.page.js +++ b/tests/page-objects/default/analytics/analytics.wdio.page.js @@ -1,3 +1,7 @@ +const TARGET_MET_COLOR = '#76b0b0'; + +const TARGET_UNMET_COLOR = '#000000'; + const goToTargets = () => browser.url('/#/analytics/targets'); const noSelectedTarget = () => $('.empty-selection'); @@ -12,13 +16,15 @@ const targetGoal = (targetElement) => targetElement.$('.body .count .goal'); const targetCountNumber = (targetElement) => targetElement.$('.body .count .number'); +const targetCountNumberColor = (targetElement) => targetElement.$('.body .count .number:not(.goal-met)'); + const targetProgressNumber = (targetElement) => targetElement.$('.body .target-progress .number'); const targetNumberPercent = (targetElement) => targetElement.$('.body .target-progress .number .value'); const targetNumberPercentCount = (targetElement) => targetElement.$('.body .target-progress .number span:nth-child(2)'); -const targetGoalValue = (targetElement) => targetElement.$('.body .count .goal p'); +const targetGoalValue = (targetElement) => targetElement.$('.body .count .goal'); const errorLog = () => $(`.page error-log`); @@ -45,13 +51,18 @@ const getTargetInfo = async (targetElement) => { }; if (await (await targetGoal(targetElement)).isExisting()) { - target.goal = await (await targetGoalValue(targetElement)).getText(); + const fullText = await (await targetGoalValue(targetElement)).getText(); + target.goal = fullText.split(' ').pop(); } if (await (await targetCountNumber(targetElement)).isExisting()) { target.count = await (await targetCountNumber(targetElement)).getText(); } + if (await (await targetCountNumberColor(targetElement)).isExisting()) { + target.countNumberColor = (await (await targetCountNumberColor(targetElement)).getCSSProperty('color')).parsed.hex; + } + if (await (await targetProgressNumber(targetElement)).isExisting()) { target.percent = await (await targetNumberPercent(targetElement)).getText(); target.percentCount = await (await targetNumberPercentCount(targetElement)).getText(); @@ -80,5 +91,7 @@ module.exports = { getErrorLog, emptySelectionError, emptySelectionNoError, + TARGET_MET_COLOR, + TARGET_UNMET_COLOR }; diff --git a/webapp/src/css/targets.less b/webapp/src/css/targets.less index f3f6bc22fab..2ce501a4798 100644 --- a/webapp/src/css/targets.less +++ b/webapp/src/css/targets.less @@ -6,63 +6,78 @@ padding: 35px 0; .target { - padding: 10px; - width: 350px; - min-height: 180px; - background-color: #FFFFFF; - border: 1px solid @separator-color; - border-radius: @radius-size-small; + width: 296px; + min-height: 151px; + background-color: @gray-ultra-light; + border: 1px solid @gray-light; + border-radius: @radius-size; margin: 15px; display: flex; flex-direction: column; justify-content: space-between; .heading { + display: flex; + padding: 10px; + background-color: @white; + border-bottom-left-radius: @radius-size; + border-bottom-right-radius: @radius-size; .title { - margin-left: 65px; + margin-left: 10px; h2 { margin: 0; + color: @gray-ultra-dark; + font-size: @font-medium; + font-weight: 700; + line-height: 20px; } p { - color: @label-color; + color: @gray-dark; + font-size: @font-small; + font-weight: 400px; } } .icon { float: left; + align-self: center; img, svg { - width: @icon-large; - height: @icon-large; + width: 35px; + height: 35px; } } } .body { clear: both; + padding: 10px 10px 0; position: relative; margin: 0 5px; + min-height: 74px; .percent { position: relative; } .count { text-align: center; .number { - font-size: 56px; + text-align: center; + font-size: 48px; line-height: 1; font-weight: bold; - margin-bottom: 15px; } .goal { position: absolute; right: 0; - bottom: 20px; + margin-right: 10px; color: @label-color; p { - font-size: @font-extra-extra-large; - line-height: 1; + font-size: @font-small; + font-weight: 400; + line-height: 24px; margin-bottom: 0; + color: @gray-dark; } label { - font-size: @font-small; + font-size: @font-extra-extra-large; line-height: 1; margin-bottom: 0; } @@ -74,7 +89,8 @@ .target { &.has-goal, - &.has-goal:not(.goal-met), .percent { + &.has-goal:not(.goal-met), + .percent { .number { color: @targets-below-color; } @@ -82,7 +98,8 @@ background-color: @targets-below-color; } } - &.goal-met, .percent { + &.goal-met, + .percent { .number { color: @targets-above-goal; } @@ -118,13 +135,13 @@ width: 8px; margin-left: -4px; /* center */ background-color: @label-color; - border: 2px solid #FFFFFF; + border: 2px solid @target-progress-bar-border-color; border-radius: @radius-size; } } .value { - font-size: @font-extra-extra-large; + font-size: @font-medium; line-height: 1; font-weight: bold; } diff --git a/webapp/src/css/variables.less b/webapp/src/css/variables.less index 71e9adfd5e8..208519982fe 100644 --- a/webapp/src/css/variables.less +++ b/webapp/src/css/variables.less @@ -26,7 +26,7 @@ @unread-color: @blue-dark; @contacts-primary-color: @yellow-dark; @inactive-color: @gray-medium; -@targets-below-color: @red; +@targets-below-color: @black; @targets-above-goal: @teal; @report-review-error-color: @red; @report-review-verified-color: @teal-dark; @@ -46,6 +46,7 @@ @shadow-color: @gray-light; @tooltip-background: @gray-ultra-dark; @tooltip-text: @gray-light; +@target-progress-bar-border-color: @white; /* tab colors */ @messages-color: @blue; diff --git a/webapp/src/ts/modules/analytics/analytics-targets.component.html b/webapp/src/ts/modules/analytics/analytics-targets.component.html index 32aafc963e3..8deeb676b5d 100644 --- a/webapp/src/ts/modules/analytics/analytics-targets.component.html +++ b/webapp/src/ts/modules/analytics/analytics-targets.component.html @@ -17,6 +17,19 @@
+
+ + +
+
+

{{ 'analytics.target.monthly_goal' | translate }} {{ target.goal | localizeNumber }}

+
+
{{ target.value?.pass | localizeNumber }}
+
+
@@ -25,17 +38,6 @@

{{ target.name | translateFrom }}

{{ target.subtitle_translation_key | translate }}

- -
- -
-
- -

{{ target.goal | localizeNumber }}

-
-
{{ target.value?.pass | localizeNumber }}
-
-