EHD-1050: View Report for Year page: Add pay quarters visualisation

cabinetoffice · Oct 1, 2024 · e21ab42 · e21ab42
1 parent eb5de32
commit e21ab42
Show file tree

Hide file tree

Showing 5 changed files with 474 additions and 286 deletions.
diff --git a/GenderPayGap.WebUI/Views/ViewReports/PayComparisonQuartersVisualisation.cshtml 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;
+
+        <div class="pay-comparison-quarters-vis-quarter">
+            <div class="pay-comparison-quarters-vis-quarter--side pay-comparison-quarters-vis-quarter--women">
+                @for (int i = 0; i < Math.Floor(femalePercent / 4); i++)
+                {
+                    <partial name="SmilingFace" model="@("#28a197")"/>
+                }
+                @if (remainderFemale > 10)
+                {
+                    <div class="pay-comparison-quarters-vis-face-container">
+                        <div style="overflow: hidden; width:@(remainderFemale)%;">
+                            <partial name="SmilingFace" model="@("#28a197")"/>
+                        </div>
+                    </div>
+                }
+            </div>
+            <div class="pay-comparison-quarters-vis-quarter--side pay-comparison-quarters-vis-quarter--men">
+                @for (int i = 0; i < Math.Floor(malePercent / 4); i++)
+                {
+                    <partial name="SmilingFace" model="@("#12436d")"/>
+                }
+                @if (remainderMale > 10)
+                {
+                    <div class="pay-comparison-quarters-vis-face-container">
+                        <div style="overflow: hidden; width:@(remainderMale)%;">
+                            <partial name="SmilingFace" model="@("#12436d")"/>
+                        </div>
+                    </div>
+                }
+            </div>
+        </div>
+    }
+}
+
+<figure class="pay-comparison-quarters-vis govuk-body"
+        aria-hidden="true" @* We use aria-hidden="true" because the content is repeated in the text above *@>
+    <div class="pay-comparison-quarters-vis-arrow pay-comparison-quarters-vis-arrow--up">
+        Highest paid jobs
+    </div>
+    <div class="pay-comparison-quarters-vis-quarter pay-comparison-quarters-vis-quarter--captions">
+        <div class="pay-comparison-quarters-vis-quarter--side pay-comparison-quarters-vis-quarter--women">
+            Women
+        </div>
+        <div class="pay-comparison-quarters-vis-quarter--side pay-comparison-quarters-vis-quarter--men">
+            Men
+        </div>
+    </div>
+    <div>
+        @{ await PayComparisonQuartersVisualisationForQuarter(Model.FemaleUpperQuartilePayBand.Value, Model.MaleUpperQuartilePayBand.Value); }
+        @{ await PayComparisonQuartersVisualisationForQuarter(Model.FemaleUpperPayBand.Value, Model.MaleUpperPayBand.Value); }
+        @{ await PayComparisonQuartersVisualisationForQuarter(Model.FemaleMiddlePayBand.Value, Model.MaleMiddlePayBand.Value); }
+        @{ await PayComparisonQuartersVisualisationForQuarter(Model.FemaleLowerPayBand.Value, Model.MaleLowerPayBand.Value); }
+    </div>
+    <div class="pay-comparison-quarters-vis-arrow pay-comparison-quarters-vis-arrow--down">
+        Lowest paid jobs
+    </div>
+    <div class="pay-comparison-quarters-vis-caption">
+        Each
+        <span style="display: inline-block; vertical-align: middle;">
+            <partial name="SmilingFace" model="@("#000")"/>
+        </span>
+        represents 1% of the employees in this organisation
+    </div>
+</figure>