Feature/generate report

backend/src/templates/report.script.js

@@ -3,11 +3,9 @@
  Transparency Report. Depends on d3.js (i.e. must run from a page 
  with d3.js included).
  @data is an array of objects with this format 
-   {label: "MY_LABEL", value: NUMERIC_VAL_HERE}
- @colors is an array of hex colors.  length of this array should match 
-  length of data array
+   {label: "MY_LABEL", value: NUMERIC_VAL_HERE, color: "HEX_COLOR"}
 */
-function horizontalBarChart(data, colors, numberFormat = '$0.2f') {
+function horizontalBarChart(data, numberFormat = '$0.2f') {
   const barHeight = 37;
   const marginTop = 0;
   const marginRight = 110;
@@ -57,7 +55,7 @@ function horizontalBarChart(data, colors, numberFormat = '$0.2f') {
     .selectAll()
     .data(data)
     .join('rect')
-    .attr('fill', (d, i) => color(i))
+    .attr('fill', (d, i) => d.color)
     .attr('x', x(0))
     .attr('y', (d) => y(d.label))
     .attr('width', (d) => x(d.value) - x(0))

backend/src/templates/report.script.spec.js

@@ -33,16 +33,10 @@ describe('horizontalBarChart', () => {
     //Define the data and colors that we'll show in the bar chart
     const params = {
       chartData: [
-        { label: 'Male', value: 1.0 },
-        { label: 'Feale', value: 0.92 },
-        { label: 'Non-binary', value: 0.97 },
-        { label: 'Unknown', value: 1.01 },
-      ],
-      chartColors: [
-        '#1c3664', //Male
-        '#1b75bb', //Female
-        '#00a54f', //Non-binary
-        '#444444', //Unknown
+        { label: 'Male', value: 1.0, color: '#1c3664' },
+        { label: 'Feale', value: 0.92, color: '#1b75bb' },
+        { label: 'Non-binary', value: 0.97, color: '#00a54f' },
+        { label: 'Unknown', value: 1.01, color: '#444444' },
       ],
     };
 
@@ -51,7 +45,7 @@ describe('horizontalBarChart', () => {
       const numberFormat = '0.2f'; //don't apply formatting to numbers
       document.getElementById('chart').appendChild(
         // @ts-ignore
-        horizontalBarChart(params.chartData, params.chartColors, numberFormat),
+        horizontalBarChart(params.chartData, numberFormat),
       );
     }, params);
 
@@ -75,7 +69,7 @@ describe('horizontalBarChart', () => {
 
     await browser.close();
 
-    expect(barColors).toEqual(params.chartColors);
+    expect(barColors).toEqual(params.chartData.map((d) => d.color));
     expect(genderCategoryLabels).toEqual(params.chartData.map((d) => d.label));
     expect(payGapLabels.map((d) => parseFloat(d))).toEqual(
       params.chartData.map((d) => d.value),

backend/src/templates/report.template.html

@@ -156,92 +156,88 @@
     <div class="page">
       <h1 class="text-primary mb-4">Pay Transparency Report</h1>
 
-      <p class="text-tertiary ">
-        Note: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pretium fermentum elementum. Quisque
-        varius
-        libero
-        eu mi rhoncus, non congue eros convallis. Pellentesque dictum auctor dolor, ac gravida mi convallis a. Mauris
-        enim
-        mauris,
-        efficitur aliquet lacus ac, suscipit sollicitudin mauris.
-      </p>
-
-      <h2 class="text-primary mb-4">Employer details</h3>
-
-        <table class="employer-details table" role="presentation" style="width:100%">
-          <tr>
-            <td class="table-header">Employer:</td>
-            <td>
-              <%= report.companyName %>
-            </td>
-          </tr>
-          <tr>
-            <td class="table-header">Address:</td>
-            <td>
-              <%= report.companyAddress %>
-            </td>
-          </tr>
-          <tr>
-            <td class="table-header">Time Period:</td>
-            <td>
-              <%= report.reportStartDate %> - <%= report.reportEndDate %>
-            </td>
-          </tr>
-          <tr>
-            <td class="table-header">NAICS Code:</td>
-            <td>
-              <%= report.naicsCode %> - <%= report.naicsLabel %>
-            </td>
-          </tr>
-          <tr>
-            <td class="table-header">Number of Employees:</td>
-            <td>
-              <%= report.employeeCountRange %>
-            </td>
-          </tr>
-        </table>
-
-        <div class="header-block mb-4">
-          <div class="header-circle">
-            <svg xmlns="http://www.w3.org/2000/svg" width="55" height="55" fill="currentColor"
-              class="bi bi-clock text-primary" viewBox="0 0 16 16">
-              <path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71z" />
-              <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0" />
-            </svg>
-          </div>
-          <div class="header-block-title flex-fill">
-            <h2 class="mb-0">Hourly pay</h2>
-          </div>
-        </div>
+      <% if (report.comments) { %>
+        <p class="text-tertiary">
+          <%= report.comments %>
+        </p>
+        <% } %>
+
+          <h2 class="text-primary mb-4">Employer details</h3>
+
+            <table class="employer-details table" role="presentation" style="width:100%">
+              <tr>
+                <td class="table-header">Employer:</td>
+                <td>
+                  <%= report.companyName %>
+                </td>
+              </tr>
+              <tr>
+                <td class="table-header">Address:</td>
+                <td>
+                  <%= report.companyAddress %>
+                </td>
+              </tr>
+              <tr>
+                <td class="table-header">Time Period:</td>
+                <td>
+                  <%= report.reportStartDate %> - <%= report.reportEndDate %>
+                </td>
+              </tr>
+              <tr>
+                <td class="table-header">NAICS Code:</td>
+                <td>
+                  <%= report.naicsCode %> - <%= report.naicsLabel %>
+                </td>
+              </tr>
+              <tr>
+                <td class="table-header">Number of Employees:</td>
+                <td>
+                  <%= report.employeeCountRange %>
+                </td>
+              </tr>
+            </table>
 
-        <table role="presentation">
-          <tr>
-            <td class="pe-2">
-              <h4>Mean hourly pay gap<sup>1</sup></h4>
-              <div id="mean-hourly-pay-gap-chart"></div>
-            </td>
-            <td>
-              <h4>Median hourly pay gap<sup>2</sup></h4>
-              <div id="median-hourly-pay-gap-chart"></div>
-            </td>
-          </tr>
-        </table>
-
-        <div class="explanatory-notes">
-          <h4>Explanatory notes</h4>
-          <div class="footnote">
-            <div class="footnote-number">1.</div>
-            <div>&quot;Mean hourly pay gap&quot; refers to the differences in pay
-              between gender groups calculated by average pay. Hourly pay does
-              not include bonuses and overtime.</div>
-          </div>
-          <div class="footnote">
-            <div class="footnote-number">2.</div>
-            <div>&quot;Median hourly pay gap&quot; refers to the differences in pay
-              between gender groups calculated by the mid range of pay for
-              each group. Hourly pay does not include bonuses and overtime.</div>
-          </div>
-        </div>
+            <div class="header-block mb-4">
+              <div class="header-circle">
+                <svg xmlns="http://www.w3.org/2000/svg" width="55" height="55" fill="currentColor"
+                  class="bi bi-clock text-primary" viewBox="0 0 16 16">
+                  <path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71z" />
+                  <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0" />
+                </svg>
+              </div>
+              <div class="header-block-title flex-fill">
+                <h2 class="mb-0">Hourly pay</h2>
+              </div>
+            </div>
+
+            <table role="presentation">
+              <tr>
+                <td class="pe-2">
+                  <h4>Mean hourly pay gap<sup>1</sup></h4>
+                  <div id="mean-hourly-pay-gap-chart"></div>
+                </td>
+                <td>
+                  <h4>Median hourly pay gap<sup>2</sup></h4>
+                  <div id="median-hourly-pay-gap-chart"></div>
+                </td>
+              </tr>
+            </table>
+
+            <div class="explanatory-notes">
+              <h4>Explanatory notes</h4>
+              <div class="footnote">
+                <div class="footnote-number">1.</div>
+                <div>&quot;Mean hourly pay gap&quot; refers to the differences in pay
+                  between gender groups calculated by average pay. Hourly pay does
+                  not include bonuses and overtime.</div>
+              </div>
+              <div class="footnote">
+                <div class="footnote-number">2.</div>
+                <div>&quot;Median hourly pay gap&quot; refers to the differences in pay
+                  between gender groups calculated by the mid range of pay for
+                  each group. Hourly pay does not include bonuses and overtime.</div>
+              </div>
+            </div>
 
     </div>