Example Reports Summary report

This is an example report using the summary template

Contents

    <div class="govuk-width-container">
      <div class="govuk-width-container report-list-container">
    
        <div class="dpr-reports-heading-container govuk-!-margin-top-5">
    
          <div class="dpr-report-header">
    
            <div class="dpr-report-heading__actions">
    
              <div class="report-actions" data-dpr-module='report-actions'>
                <div class="moj-button-menu"></div>
    
                <div class="dpr-display-none">
    
                </div>
              </div>
    
            </div>
    
            <div class="dpr-report-heading">
              <div class="dpr-report-heading__title">
                <span class="govuk-caption-l">C Test Report</span>
                <h1 class="govuk-heading-l">
                  Summaries template
                </h1>
              </div>
            </div>
    
            <div id="dpr-download-message" class="dpr-download-message--hidden govuk-!-margin-bottom-6" data-dpr-module='download-message'>
              <article class="moj-ticket-panel" aria-label="Sub navigation 1">
    
                <section class="moj-ticket-panel__content moj-ticket-panel__content--blue" aria-label="Section 1">
                  <h2 class="govuk-heading-m">To download this report</h2>
                  <p><a href="/download/test-report-3/variantId-28/tblId_1747314039609/feedback?reportUrl=/async/report/test-report-3/variantId-28/request/tblId_1747314039609/report" class="govuk-link govuk-link--no-visited-state">Fill out a form</a>, which will take about 1 minute to complete.</p>
                  <p>You can then download the report whenever you need it.</p>
                </section>
    
              </article>
    
            </div>
    
            <details class="govuk-details dpr-meta-data-details">
              <summary class="govuk-details__summary">
                <span class="govuk-details__summary-text">
                  Report details
                </span>
              </summary>
              <div class="govuk-details__text">
    
                <div class="dpr-request-details">
    
                  <table class="dpr-request-details__table">
                    <tbody>
    
                      <tr>
                        <td class="dpr-request-details__table-heading">
                          <p class="govuk-body-m dpr-request-details__table-heading_name">Name:</p>
                        </td>
                        <td>
                          <h1 class="govuk-heading-s govuk-!-margin-bottom-0">Summaries template</h1>
                        </td>
                      </tr>
    
                      <tr>
                        <td class="dpr-request-details__table-heading">
                          <p class="govuk-body-m dpr-request-details__table-heading_name">Product:</p>
                        </td>
                        <td>
                          <h1 class="govuk-heading-s govuk-!-margin-bottom-0">C Test Report</h1>
                        </td>
                      </tr>
    
                      <tr>
                        <td class="dpr-request-details__table-heading">
                          <p class="govuk-body-m dpr-request-details__table-heading_name">Description:</p>
                        </td>
                        <td>
                          <p class="govuk-body-m govuk-!-margin-bottom-0">A report with summaries, but no list.</p>
                        </td>
                      </tr>
    
                      <tr>
                        <td class="dpr-request-details__table-heading">
                          <p class="govuk-body-m dpr-request-details__table-heading_name">Classification:</p>
                        </td>
                        <td>
                          <p class="govuk-body-m govuk-!-margin-bottom-0">OFFICIAL</p>
                        </td>
                      </tr>
    
                      <tr>
                        <td class="dpr-request-details__table-heading">
                          <p class="govuk-body-m dpr-request-details__table-heading_name">Requested at:</p>
                        </td>
                        <td>
                          <p class="govuk-body-m govuk-!-margin-bottom-0">15/05/2025, 14:00:40</p>
                        </td>
                      </tr>
    
                    </tbody>
                  </table>
                </div>
    
              </div>
            </details>
    
            <div class="dpr-report-details-print">
    
              <div class="dpr-request-details">
    
                <table class="dpr-request-details__table">
                  <tbody>
    
                    <tr>
                      <td class="dpr-request-details__table-heading">
                        <p class="govuk-body-m dpr-request-details__table-heading_name">Name:</p>
                      </td>
                      <td>
                        <h1 class="govuk-heading-s govuk-!-margin-bottom-0">Summaries template</h1>
                      </td>
                    </tr>
    
                    <tr>
                      <td class="dpr-request-details__table-heading">
                        <p class="govuk-body-m dpr-request-details__table-heading_name">Product:</p>
                      </td>
                      <td>
                        <h1 class="govuk-heading-s govuk-!-margin-bottom-0">C Test Report</h1>
                      </td>
                    </tr>
    
                    <tr>
                      <td class="dpr-request-details__table-heading">
                        <p class="govuk-body-m dpr-request-details__table-heading_name">Description:</p>
                      </td>
                      <td>
                        <p class="govuk-body-m govuk-!-margin-bottom-0">A report with summaries, but no list.</p>
                      </td>
                    </tr>
    
                    <tr>
                      <td class="dpr-request-details__table-heading">
                        <p class="govuk-body-m dpr-request-details__table-heading_name">Classification:</p>
                      </td>
                      <td>
                        <p class="govuk-body-m govuk-!-margin-bottom-0">OFFICIAL</p>
                      </td>
                    </tr>
    
                    <tr>
                      <td class="dpr-request-details__table-heading">
                        <p class="govuk-body-m dpr-request-details__table-heading_name">Requested at:</p>
                      </td>
                      <td>
                        <p class="govuk-body-m govuk-!-margin-bottom-0">15/05/2025, 14:00:40</p>
                      </td>
                    </tr>
    
                  </tbody>
                </table>
              </div>
    
            </div>
    
            <div class="dpr-report-interactive-actions">
    
            </div>
          </div>
    
        </div>
    
        <div class="report-template-container  ">
    
          <div class="dpr-summary-container-group dpr-summary-container-group-page-header">
    
            <div class="dpr-summary-container">
              <table class="govuk-table">
    
                <thead class="govuk-table__head">
                  <tr class="govuk-table__row">
    
                    <th scope="col" class="govuk-table__header">Total</th>
    
                  </tr>
                </thead>
    
                <tbody class="govuk-table__body">
    
                  <tr class="govuk-table__row">
    
                    <td class="govuk-table__cell govuk-table__cell--string">52</td>
    
                  </tr>
    
                </tbody>
              </table>
    
            </div>
    
            <div class="dpr-summary-container">
              <table class="govuk-table">
    
                <thead class="govuk-table__head">
                  <tr class="govuk-table__row">
    
                    <th scope="col" class="govuk-table__header">Good (%)</th>
    
                    <th scope="col" class="govuk-table__header">Bad (%)</th>
    
                    <th scope="col" class="govuk-table__header">Ugly (%)</th>
    
                  </tr>
                </thead>
    
                <tbody class="govuk-table__body">
    
                  <tr class="govuk-table__row">
    
                    <td class="govuk-table__cell govuk-table__cell--string">1</td>
    
                    <td class="govuk-table__cell govuk-table__cell--string">10</td>
    
                    <td class="govuk-table__cell govuk-table__cell--string">89</td>
    
                  </tr>
    
                </tbody>
              </table>
    
            </div>
    
          </div>
    
        </div>
    
      </div>
    </div>
    

    
    {%- from "dpr/components/_reports/report-wrapper/view.njk" import dprReportWrapper -%}
    
    {% set data = {
      "filterData": {
        "filters": [],
        "selectedFilters": []
      },
      "count": 100,
      "csrfToken": "csrfToken",
      "classification": "OFFICIAL",
      "template": "summary",
      "loadType": "async",
      "type": "report",
      "actions": [],
      "canDownload": false,
      "printable": true,
      "reportName": "C Test Report",
      "name": "Summaries template",
      "description": "A report with summaries, but no list.",
      "requestedTimestamp": "15/05/2025, 14:00:40",
      "reportId": "test-report-3",
      "tableId": "tblId_1747314039609",
      "id": "variantId-28",
      "executionId": "exId_1747314039609",
      "querySummary": [],
      "requestUrl": {
        "fullUrl": "http://localhost:3010/async/report/test-report-3/variantId-28/request",
        "pathname": "/async/report/test-report-3/variantId-28/request",
        "search": ""
      },
      "reportUrl": "/async/report/test-report-3/variantId-28/request/tblId_1747314039609/report",
      "reportSearch": null,
      "search": null,
      "pathname": "/async/report/test-report-3/variantId-28/request/tblId_1747314039609/report",
      "reportSummaries": {
        "page-header": [
          {
            "head": [
              {
                "text": "Total",
                "classes": null
              }
            ],
            "rows": [
              [
                {
                  "fieldName": "total",
                  "text": 52,
                  "format": "string",
                  "classes": ""
                }
              ]
            ],
            "rowCount": 1,
            "colCount": 1
          },
          {
            "head": [
              {
                "text": "Good (%)",
                "classes": null
              },
              {
                "text": "Bad (%)",
                "classes": null
              },
              {
                "text": "Ugly (%)",
                "classes": null
              }
            ],
            "rows": [
              [
                {
                  "fieldName": "percentGood",
                  "text": 1,
                  "format": "string",
                  "classes": ""
                },
                {
                  "fieldName": "percentBad",
                  "text": 10,
                  "format": "string",
                  "classes": ""
                },
                {
                  "fieldName": "percentUgly",
                  "text": 89,
                  "format": "string",
                  "classes": ""
                }
              ]
            ],
            "rowCount": 1,
            "colCount": 3
          }
        ]
      },
      "dataTable": [{
        "head": [],
        "rows": [],
        "rowCount": 20,
        "colCount": 0
      }]
    } %}
    
    {{ dprReportWrapper(data) }}