Use Case
The client would like to see cleanliness information for each of their mystery shops, for their various store departments. They would like the cleanliness ratings heat mapped to indicate good and bad ratings.
Report
Code
{|SHOWIF|OUTPUT_MODE=|EVALCONST(KNICKERS_OUTPUT_STANDARD)|}{DATATYPES.CONTROLS_START}
{DATATYPES.DEFAULT_DATE_FILTERS}
{DATATYPES.SHOW_DATATYPE.RESULT_CONTROLS.PAGING.INPUT}
{DATATYPES.CONTROLS_END}{/|SHOWIF|}
<div class='results'>
{|VANISHIF|DATATYPES.SHOW_DATATYPE.TOTAL_COUNT}
<div class='ui-state-highlight no-data'><p>No data was found to display</p></div>
{/|VANISHIF|}
{|SHOWIF|DATATYPES.SHOW_DATATYPE.TOTAL_COUNT}
<h2>Cleanliness Ratings</h2>
{|RESULT|}
{|LOOP|RESULT.DATAPOINTS(SORTSET=TRENDING_TIMESTAMP;CLIENT_49_LEVEL_1.NAME)}
{|SHOWIF|LOOP.ISFIRST}
<div>
<table class='data' id='data'>
<thead>
<tr>
<th>{|SORT_TOGGLE|ID}Shop ID{/|SORT_TOGGLE|}</th>
<th>{|SORT_TOGGLE|TRENDING_TIMESTAMP}Date{/|SORT_TOGGLE|}</th>
<th>{|SORT_TOGGLE|CLIENT_49_LEVEL_1.NAME}Location{/|SORT_TOGGLE|}</th>
<th>{|SORT_TOGGLE|PERCENT_SCORE}Score{/|SORT_TOGGLE|}</th>
<th>{|SORT_TOGGLE|CLIENT_49_SURVEY_1229_QUESTION_561.ORDER_NUM}Health and Beauty{/|SORT_TOGGLE|}</th>
<th>{|SORT_TOGGLE|CLIENT_49_SURVEY_1229_QUESTION_541.ORDER_NUM}Sporting Goods{/|SORT_TOGGLE|}</th>
<th>{|SORT_TOGGLE|CLIENT_49_SURVEY_1229_QUESTION_551.ORDER_NUM}Grocery{/|SORT_TOGGLE|}</th>
</tr>
</thead>
<tbody>
{/|SHOWIF|}
<tr>
<th>{DATAPOINTS.DATAPOINT_ID}</th>
<td>{DATAPOINTS.TRENDING_TIMESTAMP.FORMATTED(n/d/Y)}</td>
<td>{DATAPOINTS.CLIENT_49_LEVEL_1.NAME}</td>
<td class="percent-score">{DATAPOINTS.PERCENT_SCORE}</td>
<td class="cleanliness-value-{DATAPOINTS.CLIENT_49_SURVEY_1229_QUESTION_561.ID}">{DATAPOINTS.CLIENT_49_SURVEY_1229_QUESTION_561.NAME}</td>
<td class="cleanliness-value-{DATAPOINTS.CLIENT_49_SURVEY_1229_QUESTION_541.ID}">{DATAPOINTS.CLIENT_49_SURVEY_1229_QUESTION_541.NAME}</td>
<td class="cleanliness-value-{DATAPOINTS.CLIENT_49_SURVEY_1229_QUESTION_551.ID}">{DATAPOINTS.CLIENT_49_SURVEY_1229_QUESTION_551.NAME}</td>
</tr>
{/|LOOP|}
</tbody>
</table>
</div>
{/|RESULT|}
{/|SHOWIF|}
</div>
CSS
/* css for CleanlinessLog1347311260937 */
@import "themeroller/jquery.ui.all.css";
@import "chrome.theme.css";
@import "chrome.layout.css";
#data
{
width: auto;
margin: auto;
}
#data a
{
color: white;
text-decoration: underline;
}
.cleanliness-value-1
{
background-color: #00aa00;
color: white;
}
.cleanliness-value-2
{
background-color: #aaff22;
}
.cleanliness-value-3
{
background-color: #ffff22;
}
.cleanliness-value-4
{
background-color: #ff1111;
color: white;
}
.results h2
{
margin-top: 1em;
}
.percent-score
{
text-align: center;
}
/***** clean *****/
body {
background: #99bbcc;
}
.wrap {
padding: 2em 0;
}
header.main, .header.main {
background: transparent;
border: 0;
padding: 0;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#content {
background: #ecf4f9;
border: 9px solid #fff;
padding: 0;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
border-radius: 9px;
-moz-box-shadow: 0px 0px 12px #3a6478;
-webkit-box-shadow: 0px 0px 12px #3a6478;
box-shadow: 0px 0px 12px #3a6478;
}
fieldset {
background: #ecf4f9;
border: 0;
padding: 1em;
text-align: right;
}
fieldset > div, fieldset .level-input {
float: left;
width: 25%;
text-align: left;
}
fieldset .date-input {
width: 50%;
}
fieldset .date-input div {
float: left;
margin-left: 15px;
}
fieldset .controls, fieldset .ui-controls {
float: right;
margin: 18px 18px 0 0;
text-align: right;
width: 40%;
}
fieldset .controls button {
background: #138bbf; /* Old browsers */
background: -moz-linear-gradient(top, #138bbf 0%, #72c1e5 50%, #2982a5 51%, #138bbf 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#138bbf), color-stop(50%,#72c1e5), color-stop(51%,#2982a5), color-stop(100%,#138bbf)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #138bbf 0%,#72c1e5 50%,#2982a5 51%,#138bbf 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #138bbf 0%,#72c1e5 50%,#2982a5 51%,#138bbf 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #138bbf 0%,#72c1e5 50%,#2982a5 51%,#138bbf 100%); /* IE10+ */
background: linear-gradient(to bottom, #138bbf 0%,#72c1e5 50%,#2982a5 51%,#138bbf 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#138bbf', endColorstr='#138bbf',GradientType=0 ); /* IE6-9 */
border: 1px solid #4095bf;
color: #fff;
font-size: 1.1em;
float: right;
margin-left: 1em;
padding: .25em 1em;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
}
fieldset .controls button:hover {
background: #2982a5;
border: 2px solid #111;
color: #fff;
-moz-box-shadow: 0px 0px 12px #fff;
-webkit-box-shadow: 0px 0px 12px #fff;
box-shadow: 0px 0px 12px #fff;
border: 1px solid #fff;
}
.results {
background: #fff;
border: 1px solid #ccc;
margin: 2em;
padding: 1em 2em 2em 2em;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
border-radius: 9px;
-moz-box-shadow: 0px 0px 12px #ccc;
-webkit-box-shadow: 0px 0px 12px #ccc;
box-shadow: 0px 0px 12px #ccc;
}
.results:before,
.results:after {
content:"";
display:table;
}
.results:after {
clear:both;
}
table#data {
border: 1px solid #bbb;
float: none;
width: 100%;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
}
thead th {
background: #138bbf; /* Old browsers */
background: -moz-linear-gradient(top, #138bbf 0%, #72c1e5 50%, #2982a5 51%, #138bbf 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#138bbf), color-stop(50%,#72c1e5), color-stop(51%,#2982a5), color-stop(100%,#138bbf)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #138bbf 0%,#72c1e5 50%,#2982a5 51%,#138bbf 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #138bbf 0%,#72c1e5 50%,#2982a5 51%,#138bbf 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #138bbf 0%,#72c1e5 50%,#2982a5 51%,#138bbf 100%); /* IE10+ */
background: linear-gradient(to bottom, #138bbf 0%,#72c1e5 50%,#2982a5 51%,#138bbf 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#138bbf', endColorstr='#138bbf',GradientType=0 ); /* IE6-9 */
color: #fff;
}
table tbody tr:nth-child(odd) {
background: #eef4f6;
color: #4095bf;
}
table tbody tr:nth-child(even) {
background: #fff;
color: #4095bf;
}
table tbody tr th {
background: transparent
}
table tbody tr:hover {
background: orange;
color: #fff;
}
table tbody tr:hover .cleanliness-value-1 {
background-color: #00aa00;
background-color: #88cc00;
color: #fff;
}
table tbody tr:hover .cleanliness-value-2 {
background-color: #aaff22;
background-color: #dfff80;
color: #4095bf;
}
table tbody tr:hover .cleanliness-value-3 {
background-color: #ffff22;
background-color: #fff266;
color: #4095bf;
}
table tbody tr:hover .cleanliness-value-4 {
background-color: #ff1111;
background-color: #ff8c66;
color: #fff;
}
#summary-graph .grapher {
margin: 0 auto;
text-align: center;
}
/***** print mode *****/
body.output-mode-print,
.output-mode-print #content,
.output-mode-print .results
{
background: #fff;
border: 0;
margin: 0 auto;
padding: 0;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.output-mode-print .results {
margin: 2em;
}