From e21ab4263a52bec5f82168bbd88904362930570b Mon Sep 17 00:00:00 2001 From: James Griffiths Date: Tue, 1 Oct 2024 16:16:45 +0100 Subject: [PATCH] EHD-1050: View Report for Year page: Add pay quarters visualisation --- .../PayComparisonQuartersVisualisation.cshtml | 71 +++ .../Views/ViewReports/ReportForYear.cshtml | 574 +++++++++--------- .../Views/ViewReports/SmilingFace.cshtml | 10 + .../styles/_gender-pay-gap-custom.scss | 1 + .../_pay-comparison-quarters-vis.scss | 104 ++++ 5 files changed, 474 insertions(+), 286 deletions(-) create mode 100644 GenderPayGap.WebUI/Views/ViewReports/PayComparisonQuartersVisualisation.cshtml create mode 100644 GenderPayGap.WebUI/Views/ViewReports/SmilingFace.cshtml create mode 100644 GenderPayGap.WebUI/wwwroot/styles/components/_pay-comparison-quarters-vis.scss diff --git a/GenderPayGap.WebUI/Views/ViewReports/PayComparisonQuartersVisualisation.cshtml b/GenderPayGap.WebUI/Views/ViewReports/PayComparisonQuartersVisualisation.cshtml new file mode 100644 index 000000000..764e1af3b --- /dev/null +++ b/GenderPayGap.WebUI/Views/ViewReports/PayComparisonQuartersVisualisation.cshtml @@ -0,0 +1,71 @@ +@model GenderPayGap.Database.Return + +@{ + async Task PayComparisonQuartersVisualisationForQuarter(decimal femalePercent, decimal malePercent) + { + decimal remainderFemale = ((femalePercent / 4) - Math.Floor(femalePercent / 4)) * 100; + decimal remainderMale = ((malePercent / 4) - Math.Floor(malePercent / 4)) * 100; + +
+
+ @for (int i = 0; i < Math.Floor(femalePercent / 4); i++) + { + + } + @if (remainderFemale > 10) + { +
+
+ +
+
+ } +
+
+ @for (int i = 0; i < Math.Floor(malePercent / 4); i++) + { + + } + @if (remainderMale > 10) + { +
+
+ +
+
+ } +
+
+ } +} + + diff --git a/GenderPayGap.WebUI/Views/ViewReports/ReportForYear.cshtml b/GenderPayGap.WebUI/Views/ViewReports/ReportForYear.cshtml index ea5e184c1..eb9c4c573 100644 --- a/GenderPayGap.WebUI/Views/ViewReports/ReportForYear.cshtml +++ b/GenderPayGap.WebUI/Views/ViewReports/ReportForYear.cshtml @@ -1,4 +1,4 @@ -@using GenderPayGap.Core.Helpers +@using GenderPayGap.Core.Helpers @using GovUkDesignSystem @using GovUkDesignSystem.GovUkDesignSystemComponents @using GenderPayGap.WebUI.Helpers @@ -7,145 +7,145 @@ @model GenderPayGap.Database.Return @{ - string reportingYearFormatted = ReportingYearsHelper.FormatYearAsReportingPeriod(Model.AccountingDate.Year); - ViewBag.Title = $"{Model.Organisation.OrganisationName} gender pay gap report for {reportingYearFormatted} reporting year"; - Layout = "~/Views/GovUkFrontend/GovUkFrontendLayout.cshtml"; -} - -@section BeforeMain { - @{ - var crumbs = new List - { - new CrumbViewModel - { - Text = "Homepage", - Href = Url.Action("Index", "Homepage") - }, - new CrumbViewModel - { - Text = "Search and compare", - Href = Url.Action("SearchResults", "Viewing") - }, - new CrumbViewModel - { - Text = Model.Organisation.OrganisationName, - Href = Url.Action("Employer", "ViewReports", new { organisationId = Model.Organisation.OrganisationId }) - }, - new CrumbViewModel - { - Text = $"Gender pay gap report for {reportingYearFormatted}" - } - }; - } - - @(await Html.GovUkBreadcrumbs(new BreadcrumbsViewModel - { - Crumbs = crumbs - })) -} - - - -
-
- -

- @(Model.Organisation.OrganisationName) -
- @(reportingYearFormatted) - Gender pay gap report -

- - @{ - var addRemoveButtonViewModel = new AddRemoveButtonViewModel - { - OrganisationIdEncrypted = Model.Organisation.GetEncryptedId(), - OrganisationName = Model.Organisation.OrganisationName - }; - } - - - -

- Contents -

- - -
- -

- 1. Main gender pay gap figures -

- -

- In this organisation: -

-
    -
  • - women earned - @(ViewReportsHelper.FormatNumberAsPoundsOrPence((100 - Model.DiffMedianHourlyPercent)/100)) - for every £1 that men earned (comparing median hourly pay) -
    • -
  • - women made up - @(Model.FemaleUpperQuartilePayBand)% - of employees in the highest paid quarter, and - @(Model.FemaleLowerPayBand)% - of employees in the lowest paid quarter -
    • - @if ((Model.FemaleMedianBonusPayPercent > 0 || - Model.MaleMedianBonusPayPercent > 0) && - Model.DiffMedianBonusPercent.HasValue) - { -
  • - @(Model.FemaleMedianBonusPayPercent)% - of women received bonus pay, compared with - @(Model.MaleMedianBonusPayPercent)% - of men -
    • -
  • - women’s bonus pay was - @Math.Abs((double) Model.DiffMedianBonusPercent)% - @(Model.DiffMedianBonusPercent >= 0 ? "lower" : "higher") - than men’s (comparing median bonus pay) -
    • - } -
- -
- -

- 2. Hourly pay -

- -

- In this organisation: + string reportingYearFormatted = ReportingYearsHelper.FormatYearAsReportingPeriod(Model.AccountingDate.Year); + ViewBag.Title = $"{Model.Organisation.OrganisationName} gender pay gap report for {reportingYearFormatted} reporting year"; + Layout = "~/Views/GovUkFrontend/GovUkFrontendLayout.cshtml"; +} + +@section BeforeMain { + @{ + var crumbs = new List + { + new CrumbViewModel + { + Text = "Homepage", + Href = Url.Action("Index", "Homepage") + }, + new CrumbViewModel + { + Text = "Search and compare", + Href = Url.Action("SearchResults", "Viewing") + }, + new CrumbViewModel + { + Text = Model.Organisation.OrganisationName, + Href = Url.Action("Employer", "ViewReports", new { organisationId = Model.Organisation.OrganisationId }) + }, + new CrumbViewModel + { + Text = $"Gender pay gap report for {reportingYearFormatted}" + } + }; + } + + @(await Html.GovUkBreadcrumbs(new BreadcrumbsViewModel + { + Crumbs = crumbs + })) +} + + + +

+
+ +

+ @(Model.Organisation.OrganisationName) +
+ @(reportingYearFormatted) + Gender pay gap report +

+ + @{ + var addRemoveButtonViewModel = new AddRemoveButtonViewModel + { + OrganisationIdEncrypted = Model.Organisation.GetEncryptedId(), + OrganisationName = Model.Organisation.OrganisationName + }; + } + + + +

+ Contents +

+ + +
+ +

+ 1. Main gender pay gap figures +

+ +

+ In this organisation: +

+
    +
  • + women earned + @(ViewReportsHelper.FormatNumberAsPoundsOrPence((100 - Model.DiffMedianHourlyPercent)/100)) + for every £1 that men earned (comparing median hourly pay) +
    • +
  • + women made up + @(Model.FemaleUpperQuartilePayBand)% + of employees in the highest paid quarter, and + @(Model.FemaleLowerPayBand)% + of employees in the lowest paid quarter +
    • + @if ((Model.FemaleMedianBonusPayPercent > 0 || + Model.MaleMedianBonusPayPercent > 0) && + Model.DiffMedianBonusPercent.HasValue) + { +
  • + @(Model.FemaleMedianBonusPayPercent)% + of women received bonus pay, compared with + @(Model.MaleMedianBonusPayPercent)% + of men +
    • +
  • + women’s bonus pay was + @Math.Abs((double) Model.DiffMedianBonusPercent)% + @(Model.DiffMedianBonusPercent >= 0 ? "lower" : "higher") + than men’s (comparing median bonus pay) +
    • + } +
+ +
+ +

+ 2. Hourly pay +

+ +

+ In this organisation:

  • @@ -163,73 +163,75 @@
  • women’s mean (average) hourly pay was @Math.Abs((double) Model.DiffMeanHourlyPayPercent)% - @(Model.DiffMeanHourlyPayPercent >= 0 ? "lower" : "higher") - than men’s -
    • -
- -
- - - Read more about median and mean - - -
- -
-
- -
- -

- 3. Pay quarters -

- -

- In this organisation, women made up: -

-
    -
  • - @(Model.FemaleUpperQuartilePayBand)% - of employees in the upper hourly pay quarter (highest paid jobs) -
    • -
  • - @(Model.FemaleUpperPayBand)% - of employees in the upper middle hourly pay quarter -
    • -
  • - @(Model.FemaleMiddlePayBand)% - of employees in the lower middle hourly pay quarter -
    • -
  • - @(Model.FemaleLowerPayBand)% - of employees in the lower hourly pay quarter (lowest paid jobs) -
    • -
- -
- - - Read more about pay quarters - - -
- -
-
- -
- -

- 4. Bonus pay -

- -

- In this organisation: -

-
    - @if (Model.FemaleMedianBonusPayPercent > 0 || Model.MaleMedianBonusPayPercent > 0) - { + @(Model.DiffMeanHourlyPayPercent >= 0 ? "lower" : "higher") + than men’s + +
+ +
+ + + Read more about median and mean + + +
+ +
+
+ +
+ +

+ 3. Pay quarters +

+ +

+ In this organisation, women made up: +

+
    +
  • + @(Model.FemaleUpperQuartilePayBand)% + of employees in the upper hourly pay quarter (highest paid jobs) +
    • +
  • + @(Model.FemaleUpperPayBand)% + of employees in the upper middle hourly pay quarter +
    • +
  • + @(Model.FemaleMiddlePayBand)% + of employees in the lower middle hourly pay quarter +
    • +
  • + @(Model.FemaleLowerPayBand)% + of employees in the lower hourly pay quarter (lowest paid jobs) +
    • +
+ + + +
+ + + Read more about pay quarters + + +
+ +
+
+ +
+ +

+ 4. Bonus pay +

+ +

+ In this organisation: +

+
    + @if (Model.FemaleMedianBonusPayPercent > 0 || Model.MaleMedianBonusPayPercent > 0) + { @if (Model.DiffMedianBonusPercent.HasValue) {
  • @@ -245,62 +247,62 @@
    • } @if (Model.DiffMeanBonusPercent.HasValue) - { -
  • - women’s mean (average) bonus pay was - @Math.Abs((double) Model.DiffMeanBonusPercent.Value)% - @(Model.DiffMeanBonusPercent.Value >= 0 ? "lower" : "higher") - than men’s -
    • - } -
  • - @(Model.FemaleMedianBonusPayPercent)% - of women and - @(Model.MaleMedianBonusPayPercent)% - of men received bonus pay -
    • - } - else - { -
  • - no bonuses were paid -
    • - } -
- -
- -

- 5. About @(Model.Organisation.OrganisationName) -

- -
-
-
- Registered address -
-
- @(Model.Organisation.GetLatestAddress()?.GetAddressString()) -
-
-
-
- Sector -
-
- @(Model.Organisation.GetSicSectorsString()) -
-
-
-
- Snapshot date -
-
- @(Model.AccountingDate.ToString("d MMMM yyyy")) -
-
-
-
+ { +
  • + women’s mean (average) bonus pay was + @Math.Abs((double) Model.DiffMeanBonusPercent.Value)% + @(Model.DiffMeanBonusPercent.Value >= 0 ? "lower" : "higher") + than men’s +
    • + } +
  • + @(Model.FemaleMedianBonusPayPercent)% + of women and + @(Model.MaleMedianBonusPayPercent)% + of men received bonus pay +
    • + } + else + { +
  • + no bonuses were paid +
    • + } + + +
    + +

    + 5. About @(Model.Organisation.OrganisationName) +

    + +
    +
    +
    + Registered address +
    +
    + @(Model.Organisation.GetLatestAddress()?.GetAddressString()) +
    +
    +
    +
    + Sector +
    +
    + @(Model.Organisation.GetSicSectorsString()) +
    +
    +
    +
    + Snapshot date +
    +
    + @(Model.AccountingDate.ToString("d MMMM yyyy")) +
    +
    +
    +
    Employee headcount
    @@ -308,26 +310,26 @@
    -
    - Person responsible -
    -
    - @(Model.ResponsiblePerson) -
    -
    -
    - - @if (UriSanitiser.IsValidHttpOrHttpsLink(Model.CompanyLinkToGPGInfo)) - { -

    - - What this employer says about their gender pay gap (opens in a new window) - -

    - } - -
    -
    +
    + Person responsible +
    +
    + @(Model.ResponsiblePerson) +
    +
    + + + @if (UriSanitiser.IsValidHttpOrHttpsLink(Model.CompanyLinkToGPGInfo)) + { +

    + + What this employer says about their gender pay gap (opens in a new window) + +

    + } + +
    +
    diff --git a/GenderPayGap.WebUI/Views/ViewReports/SmilingFace.cshtml b/GenderPayGap.WebUI/Views/ViewReports/SmilingFace.cshtml new file mode 100644 index 000000000..3102182cf --- /dev/null +++ b/GenderPayGap.WebUI/Views/ViewReports/SmilingFace.cshtml @@ -0,0 +1,10 @@ +@model string + + + + + + + + + diff --git a/GenderPayGap.WebUI/wwwroot/styles/_gender-pay-gap-custom.scss b/GenderPayGap.WebUI/wwwroot/styles/_gender-pay-gap-custom.scss index c7ab92ada..134d659c6 100644 --- a/GenderPayGap.WebUI/wwwroot/styles/_gender-pay-gap-custom.scss +++ b/GenderPayGap.WebUI/wwwroot/styles/_gender-pay-gap-custom.scss @@ -14,6 +14,7 @@ @import "./components/header"; @import "./components/hero-banner"; @import "./components/pay-comparison-vertical-bar-chart"; +@import "./components/pay-comparison-quarters-vis"; @import "./components/searchbar"; @import "./components/status-message"; @import "./components/table"; diff --git a/GenderPayGap.WebUI/wwwroot/styles/components/_pay-comparison-quarters-vis.scss b/GenderPayGap.WebUI/wwwroot/styles/components/_pay-comparison-quarters-vis.scss new file mode 100644 index 000000000..07a23d466 --- /dev/null +++ b/GenderPayGap.WebUI/wwwroot/styles/components/_pay-comparison-quarters-vis.scss @@ -0,0 +1,104 @@ + +.pay-comparison-quarters-vis { + margin: 0; + + .pay-comparison-quarters-vis-arrow { + position: relative; + text-align: center; + + &::after { + content: ""; + position: absolute; + left: calc(50% - 15px); + border: 15px solid transparent; + } + } + + .pay-comparison-quarters-vis-arrow--up { + padding-bottom: 20px; + + &::after { + bottom: 0; + border-bottom-color: black; + } + } + + .pay-comparison-quarters-vis-arrow--down { + padding-top: 20px; + + &::after { + top: 0; + border-top-color: black; + } + } + + .pay-comparison-quarters-vis-quarter { + display: flex; + border-bottom-width: 2px; + border-bottom-style: solid; + border-bottom-color: #ddd; + + &.pay-comparison-quarters-vis-quarter--captions { + .pay-comparison-quarters-vis-quarter--side { + height: auto; + } + } + + &.pay-comparison-quarters-vis-quarter--captions, + &:last-child { + border-bottom: none; + } + + .pay-comparison-quarters-vis-quarter--side { + width: 50%; + height: calc((min(35px, (50vw - 35px) / 8 - 3px, 4.5vh) + 3px) * 3 + 10px); + padding: 5px 10px; + display: flex; + flex-direction: column; + flex-wrap: wrap; + justify-content: center; + align-content: flex-start; + + @media screen and (min-width: 641px) { + height: calc((min(35px, (33.3333vw - 25px) / 8 - 3px, 4.5vh) + 3px) * 3 + 10px); + } + } + + .pay-comparison-quarters-vis-quarter--women { + direction: rtl; + border-right: 2px solid black; + text-align: right; + } + + .pay-comparison-quarters-vis-quarter--men { + border-left: 2px solid black; + } + } + + .pay-comparison-quarters-vis-face-container { + width: 35px; /* fallback for older browsers */ + width: calc(min(35px, (50vw - 35px) / 8 - 3px, 4.5vh)); + + @media screen and (min-width: 641px) { + width: calc(min(35px, (33.3333vw - 25px) / 8 - 3px, 4.5vh)); + } + } + + .pay-comparison-quarters-vis-face { + display: block; + width: 35px; /* fallback for older browsers */ + height: 35px; /* fallback for older browsers */ + width: calc(min(35px, (50vw - 35px) / 8 - 3px, 4.5vh)); + height: calc(min(35px, (50vw - 35px) / 8 - 3px, 4.5vh)); + margin: 1px; + + @media screen and (min-width: 641px) { + width: calc(min(35px, (33.3333vw - 25px) / 8 - 3px, 4.5vh)); + height: calc(min(35px, (33.3333vw - 25px) / 8 - 3px, 4.5vh)); + } + } + + .pay-comparison-quarters-vis-caption { + margin-top: 10px; + } +}