Part 3 - Building the Admin dashboard

In this section, we will build a dashboard for the Admin.

The first step will be building an information panel which displays recently created surveys and second step will be adding a pie chart that will display the result of the surveys.

Source code

The following source code is shared using Confluence Storage Format, the XHTML-based format that Confluence uses to store the content of pages, page templates, blueprints, blog posts and comments.

For more information on how to use this source code on your Confluence, read the following article:

How do I use Recipes that use the Storage Format with the Confluence Source Editor?

Click here for the source code...

CODE

  <ac:structured-macro ac:macro-id="d877b510-29c6-47a9-b3ad-7aaa6195dc3d" ac:name="show-if" ac:schema-version="1">
  <ac:parameter ac:name="user">
    <ri:user ri:userkey="2c91808357cb99ba0157cbcea4030004"/>
  </ac:parameter>
  <ac:parameter ac:name="atlassian-macro-output-type">INLINE</ac:parameter>
  <ac:rich-text-body>
    <ac:emoticon ac:name="information"/> As <a href="https://demo.servicerocket.io/"> <strong>demo.admin</strong> </a>you can see the survey report. Try to login as <strong>
      <a href="https://demo.servicerocket.io/">demo.user</a> </strong>to see a different view on this page.<p>
      <br/>
    </p>
    <ac:structured-macro ac:macro-id="bcb83059-d493-4d00-bc96-44820621a1fe" ac:name="panel" ac:schema-version="1">
      <ac:parameter ac:name="bgColor">#00B8D9</ac:parameter>
      <ac:parameter ac:name="borderWidth">0</ac:parameter>
      <ac:rich-text-body>
        <h2 style="text-align: center;">
          <span style="color: rgb(51,51,51);">Surveys created in the last 24h</span>
        </h2>
        <ac:structured-macro ac:macro-id="5ce2d14b-3234-4e66-8a0c-2ea0078cf45b" ac:name="report-block" ac:schema-version="1">
          <ac:parameter ac:name="atlassian-macro-output-type">INLINE</ac:parameter>
          <ac:rich-text-body>
            <ac:structured-macro ac:macro-id="1f91ea42-55d5-4bbd-8210-ac7b8038b9fe" ac:name="local-reporter" ac:schema-version="1">
              <ac:parameter ac:name="">page:children</ac:parameter>
              <ac:rich-text-body>
                <p>
                  <ac:structured-macro ac:macro-id="78391abf-0a96-462c-ab75-048a279ff564" ac:name="date-filter" ac:schema-version="1">
                    <ac:parameter ac:name="minValue">-1d</ac:parameter>
                    <ac:parameter ac:name="">content:creation date</ac:parameter>
                  </ac:structured-macro>
                </p>
              </ac:rich-text-body>
            </ac:structured-macro>
            <ac:structured-macro ac:macro-id="b81d9955-cac0-48b2-b439-fdd12ebcaeb0" ac:name="report-header" ac:schema-version="1">
              <ac:rich-text-body>
                <h1 style="text-align: center;">
                  <span style="color: rgb(51,51,51);"> <ac:structured-macro ac:macro-id="639aa3c0-cc0d-4a80-9ba7-01bb65e0f585" ac:name="report-info" ac:schema-version="1">
                      <ac:parameter ac:name="">report:query&gt;collection:size</ac:parameter>
                    </ac:structured-macro> Surveys</span>
                </h1>
              </ac:rich-text-body>
            </ac:structured-macro>
            <ac:structured-macro ac:macro-id="7f12049d-f107-4f44-8c47-fff669a74a2c" ac:name="report-body" ac:schema-version="1">
              <ac:rich-text-body>
                <ac:structured-macro ac:macro-id="9ca89724-cee8-4f46-952d-2102941a193d" ac:name="hidden-data" ac:schema-version="1">
                  <ac:parameter ac:name="atlassian-macro-output-type">INLINE</ac:parameter>
                  <ac:rich-text-body>
                    <h1>
                      <span style="color: rgb(51,51,51);"> <ac:structured-macro ac:macro-id="6297c13e-0f4a-40f1-a13b-8623e5310f95" ac:name="report-info" ac:schema-version="1">
                          <ac:parameter ac:name="">content:title</ac:parameter>
                        </ac:structured-macro> </span>
                    </h1>
                  </ac:rich-text-body>
                </ac:structured-macro>
              </ac:rich-text-body>
            </ac:structured-macro>
            <ac:structured-macro ac:macro-id="93ca1aec-1602-4433-8e2b-b235432eecc2" ac:name="report-empty" ac:schema-version="1">
              <ac:rich-text-body>
                <h1 style="text-align: center;">
                  <span style="color: rgb(51,51,51);">0 Surveys</span>
                </h1>
              </ac:rich-text-body>
            </ac:structured-macro>
          </ac:rich-text-body>
        </ac:structured-macro>
        <p>
          <br/>
        </p>
        <p>
          <br/>
        </p>
      </ac:rich-text-body>
    </ac:structured-macro>
    <ac:structured-macro ac:macro-id="9e59e8f5-87b5-427c-9a5e-cc765858c390" ac:name="table-chart" ac:schema-version="1">
      <ac:parameter ac:name="innerlabels">Percentage</ac:parameter>
      <ac:parameter ac:name="dataorientation">Vertical</ac:parameter>
      <ac:parameter ac:name="legend">right</ac:parameter>
      <ac:parameter ac:name="column">Rating</ac:parameter>
      <ac:parameter ac:name="aggregation">Rating</ac:parameter>
      <ac:parameter ac:name="is3d">true</ac:parameter>
      <ac:parameter ac:name="align">Center</ac:parameter>
      <ac:parameter ac:name="separator">Point (.)</ac:parameter>
      <ac:parameter ac:name="version">3</ac:parameter>
      <ac:parameter ac:name="colors">#3572b0,#8eb021,#d04437</ac:parameter>
      <ac:parameter ac:name="datepattern">dd M yy</ac:parameter>
      <ac:parameter ac:name="pieKeys">5 - Very good‚4 - Good‚3 - Neither good nor poor</ac:parameter>
      <ac:parameter ac:name="id">1568191239498_-1184837541</ac:parameter>
      <ac:parameter ac:name="worklog">5|8|w d h m|w d h m</ac:parameter>
      <ac:parameter ac:name="formatVersion">3</ac:parameter>
      <ac:rich-text-body>
        <ac:structured-macro ac:macro-id="3fb6254a-1e6e-47ef-8647-3b6974290219" ac:name="report-table" ac:schema-version="1">
          <ac:rich-text-body>
            <ac:structured-macro ac:macro-id="889ed87f-6b7f-47c5-839f-2e5bdbe33894" ac:name="local-reporter" ac:schema-version="1">
              <ac:parameter ac:name="">page:children</ac:parameter>
              <ac:rich-text-body>
                <p>
                  <br/>
                </p>
              </ac:rich-text-body>
            </ac:structured-macro>
            <ac:structured-macro ac:macro-id="0bd6db7e-3b1b-4ff5-92fe-067f75b3f870" ac:name="report-column" ac:schema-version="1">
              <ac:parameter ac:name="title">Rating</ac:parameter>
              <ac:rich-text-body>
                <p>
                  <ac:structured-macro ac:macro-id="46240190-07b1-43ec-9fe5-03a6bfcbac1b" ac:name="report-info" ac:schema-version="1">
                    <ac:parameter ac:name="">data:rate</ac:parameter>
                  </ac:structured-macro>
                </p>
              </ac:rich-text-body>
            </ac:structured-macro>
            <ac:structured-macro ac:macro-id="9ce5566a-8747-4493-985c-984f29781944" ac:name="report-column" ac:schema-version="1">
              <ac:parameter ac:name="title">Suggestions</ac:parameter>
              <ac:rich-text-body>
                <p>
                  <ac:structured-macro ac:macro-id="107aea77-5fa7-4561-b6fc-9e3c240a42dc" ac:name="report-info" ac:schema-version="1">
                    <ac:parameter ac:name="render">richtext</ac:parameter>
                    <ac:parameter ac:name="">data:comment</ac:parameter>
                  </ac:structured-macro>
                </p>
              </ac:rich-text-body>
            </ac:structured-macro>
          </ac:rich-text-body>
        </ac:structured-macro>
      </ac:rich-text-body>
    </ac:structured-macro>
  </ac:rich-text-body>
</ac:structured-macro>

Step 1

Let's build the first component of the Admin dashboard where a Confluence admin can immediately view recently created surveys.

Something that looks like this:

Add a Show If macro and set the group parameter to "confluence-administrators" or set the user parameter to specific admin account as you preferred.
Create a panel. Insert text "Surveys created in the last 24h" within this panel.
We're going to retrieve survey count that is created within 24 hours.
Then create a Report Block macro.
Within the Report Block macro, create a Local Reporter macro and set the Key parameter to "page:children".
Within the Local Reporter macro, create a Date Filter macro.
Set the Key parameter to "content:creation date" and Minimum Value parameter to "-1d".
Now back within the Report Block, create a Report Header macro.
Within the Report Header macro, create a Report Info macro.
Set the Key parameter to "report:query>collection:size".
Add text "Surveys" next to this macro.
Back within the Report Block, create a Report Body macro.
Within the Report Body macro, create a Hidden Data macro.
Within the Hidden Data macro, create a Report Info macro and set the Key parameter to "content:title".
Extra: After Report Body macro, add Report Empty macro and insert text "0 Surveys" within this macro.
When there is no survey created, the report will display message "0 Surveys".

Step 2

Now let's add a pie chart showing the result of surveys.

By the end of this section you will have something that looks like this:

Add a Chart from Table macro and set aggregation to "Rating".
Then create a Report Table macro.
Within the Report Table macro, create a Local Reporter macro and set the Key parameter to "page:children".
Now within the Report Table macro, create two Report Column macros.
Within the first Report Column macro set the title as "Rating".
Add a Report Info macro and set the Key parameter to "data:rate".
Within the second Report Column macro set the title as "Suggestions".
Add a Report Info macro and set the Key parameter to "data:comment".

Macro structure