Use Case
The client is conducting shops in two waves, “Weekday” and “Weekend.” They would like to see how their locations score on each survey section, both for each wave separately and both waves combined. They would also like to see particularly good scores (greater than 90) and particularly bad scores (lower than 60) highlighted.
Report
Code
<img class="photo" src="http://sassieshop.com/2su/custom/chameleon/images/southface/boot.png" border="0" alt="">
<img class="logo" src="http://sassieshop.com/2su/custom/chameleon/images/southface/southface-logo.png" border="0" alt="">
<div class="clear"></div>
{|SHOWIF|OUTPUT_MODE=|EVALCONST(KNICKERS_OUTPUT_STANDARD)|}{DATATYPES.CONTROLS_START}
{DATATYPES.DEFAULT_DATE_FILTERS}
{DATATYPES.CONTROLS_END}{/|SHOWIF|}
{|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}
{|CROSSTAB|}
<div>
{|LOOP|CROSSTAB.CLIENT_49_LEVEL_1(SORT=NAME,CROSSTAB_FILTER=NO_BLANKS)}
{|SHOWIF|LOOP.ISFIRST}
<table class='data'>
<thead>
<tr>
<th rowspan="2">{|SORT_TOGGLE|CLIENT_49_LEVEL_1.NAME}{DATATYPES.SHOW_DATATYPE.CLIENT_49_LEVEL_1.NAME}{/|SORT_TOGGLE|}</th>
{|LOOP|CLIENT_49_LEVEL_1.CLIENT_49_WAVE(SORT=ORDER_NUM)}
<th class="col-wave-{CLIENT_49_WAVE.ID}" colspan="{DATATYPES.SHOW_DATATYPE.PROPERTIES(FILTER=type|eq|sectional_percent_score,SORT=ORDER_NUM).NUMELEMENTS}">
{CLIENT_49_WAVE.NAME}
</th>
{/|LOOP|}
<th class="col-combined" colspan="{DATATYPES.SHOW_DATATYPE.PROPERTIES(FILTER=type|eq|sectional_percent_score,SORT=ORDER_NUM).NUMELEMENTS}">
Combined
</th>
</tr>
<tr>
{|LOOP|CLIENT_49_LEVEL_1.CLIENT_49_WAVE(SORT=ORDER_NUM)}
{|LOOP|CLIENT_49_WAVE.PROPERTIES(FILTER=type|eq|major_sectional_percent_score,SORT=ORDER_NUM,LIMIT=5)}
<th class="col-wave-{CLIENT_49_WAVE.ID} {LOOP.HASNEXT?:last-property}">
{|SORT_TOGGLE|POS(AVG(CLIENT_49_WAVE.|EVALTAG(PROPERTIES.PROPERTY_ID)|),|EVALTAG(CLIENT_49_WAVE.INDEX)|)}
{PROPERTIES.NAME.SPLIT(:,1)}
{/|SORT_TOGGLE|}
</th>
{/|LOOP|}
{/|LOOP|}
{|LOOP|CLIENT_49_LEVEL_1.PROPERTIES(FILTER=type|eq|major_sectional_percent_score,SORT=ORDER_NUM,LIMIT=5)}
<th class="col-combined">
{|SORT_TOGGLE|AVG(CLIENT_49_LEVEL_1.|EVALTAG(PROPERTIES.PROPERTY_ID)|,CLIENT_49_LEVEL_1)}
{PROPERTIES.NAME.SPLIT(:,1)}
{/|SORT_TOGGLE|}
</th>
{/|LOOP|}
</tr>
</thead>
<tbody>
{/|SHOWIF|}
<tr>
<th>{CLIENT_49_LEVEL_1.NAME}</th>
{|LOOP|CLIENT_49_LEVEL_1.CLIENT_49_WAVE(SORT=ORDER_NUM)}
{|LOOP|CLIENT_49_WAVE.PROPERTIES(FILTER=type|eq|sectional_percent_score,SORT=ORDER_NUM)}
<td class="col-wave-{CLIENT_49_WAVE.ID} {AVG(CLIENT_49_WAVE.PROPERTIES.VALUE).ROUND>90?good-score} {AVG(CLIENT_49_WAVE.PROPERTIES.VALUE).ROUND<60?bad-score}">
{AVG(CLIENT_49_WAVE.PROPERTIES.VALUE).ROUND}
</td>
{/|LOOP|}
{/|LOOP|}
{|LOOP|CLIENT_49_LEVEL_1.PROPERTIES(FILTER=type|eq|sectional_percent_score,SORT=ORDER_NUM)}
<td class="col-combined {AVG(CLIENT_49_LEVEL_1.PROPERTIES.VALUE).ROUND>90?good-score} {AVG(CLIENT_49_LEVEL_1.PROPERTIES.VALUE).ROUND<60?bad-score}">
{AVG(CLIENT_49_LEVEL_1.PROPERTIES.VALUE, CLIENT_49_LEVEL_1).ROUND}
</td>
{/|LOOP|}
</tr>
{|VANISHIF|LOOP.HASNEXT}
</tbody>
</table>
{/|VANISHIF|}
{/|LOOP|}
</div>
{/|CROSSTAB|}
{/|SHOWIF|}
CSS
/* css for WaveComparison1355854956910 */
@import "themeroller/jquery.ui.all.css";
@import "chrome.theme.css";
@import "chrome.layout.css";
.data a
{
color: white;
text-decoration: underline;
}
.data thead th
{
text-align: center;
}
.data tbody td
{
text-align: center;
}
.last-property
{
border-right: 1px solid #B3B3B3;
}
/***** southface *****/
body {
background: #313030 url("http://sassieshop.com/2su/custom/chameleon/images/southface/bg.jpg") no-repeat top center fixed;
}
.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: #ddd url("http://sassieshop.com/2su/custom/chameleon/images/southface/bg-content.jpg") no-repeat top center fixed;
border: 1px solid #000;
padding: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
-moz-box-shadow: 0px 0px 18px #000;
-webkit-box-shadow: 0px 0px 18px #000;
box-shadow: 0px 0px 18px #000;
}
#content img.photo {
margin: -1.5em 0 0 1.5em;
height: 150px;
}
#content img.logo {
float: right;
margin: 1em 3em 0 0;
height: 125px;
}
.clear {
clear: both;
}
fieldset {
background: transparent;
border: 0;
padding: 0 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: 1.5em 1em 0 0;
text-align: right;
width: 40%;
}
fieldset .controls button {
background: #ff6a00; /* Old browsers */
background: -moz-linear-gradient(top, #ff6a00 0%, #ff0000 10%, #d80000 49%, #a50000 51%, #cc0000 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff6a00), color-stop(10%,#ff0000), color-stop(49%,#d80000), color-stop(51%,#a50000), color-stop(100%,#cc0000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ff6a00 0%,#ff0000 10%,#d80000 49%,#a50000 51%,#cc0000 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ff6a00 0%,#ff0000 10%,#d80000 49%,#a50000 51%,#cc0000 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ff6a00 0%,#ff0000 10%,#d80000 49%,#a50000 51%,#cc0000 100%); /* IE10+ */
background: linear-gradient(to bottom, #ff6a00 0%,#ff0000 10%,#d80000 49%,#a50000 51%,#cc0000 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff6a00', endColorstr='#cc0000',GradientType=0 ); /* IE6-9 */
border: 1px solid #800000;
color: #fff;
font-size: 1.1em;
float: right;
margin-left: 1em;
padding: .25em 1em;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
}
fieldset .controls button:hover {
background: #cc0000;
border: 1px solid #000;
color: #fff;
-moz-box-shadow: 0px 0px 12px #666;
-webkit-box-shadow: 0px 0px 12px #666;
box-shadow: 0px 0px 12px #666;
}
h2,
.score-title
{
color: #800000;
margin-bottom: .5em;
}
.results {
margin: 0;
padding: 0 2em 2em 2em;
}
.results:before,
.results:after {
content:"";
display:table;
}
.results:after {
clear:both;
}
table#data-table,
table.data
{
border: 1px solid #000;
float: none;
margin: 0 auto 2em auto;
width: 96%;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
-moz-box-shadow: 0px 0px 12px #666;
-webkit-box-shadow: 0px 0px 12px #666;
box-shadow: 0px 0px 12px #666;
}
thead th {
background: #d80000; /* Old browsers */
background: -moz-linear-gradient(top, #d80000 0%, #a50000 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d80000), color-stop(100%,#a50000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #d80000 0%,#a50000 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #d80000 0%,#a50000 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #d80000 0%,#a50000 100%); /* IE10+ */
background: linear-gradient(to bottom, #d80000 0%,#a50000 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d80000', endColorstr='#a50000',GradientType=0 ); /* IE6-9 */
color: #fff;
}
table tbody tr:nth-child(odd) {
background: #e3e2e1;
color: #111;
}
table tbody tr:nth-child(even) {
background: #faf6f5;
background: transparent;
color: #111;
}
table tbody tr th {
background: transparent;
color: #313030;
background: #931F1F;
color: #fff;
}
/*table tbody tr:hover,*/
table tbody td:hover
{
background: orange;
color: #000;
}
table thead th,
table thead th.last-property {
border: 0;
color: #fff;
}
table tbody tr th, table tbody td {
border-top: 1px solid #bd2828;
border-bottom: 1px solid #bd2828;
}
/*
th.col-survey-1229 {
background: #903535;
}
*/
td.col-wave-8 {
background: #faf6f5;
background: #e5e5e5;
}
/*
th.col-survey-1230 {
background: #9e453c;
}
*/
td.col-wave-9 {
background: #931f1f;
color: #fff;
}
/*
th.col-combined {
background: #903535;
}
*/
td.col-combined {
background: #faf6f5;
background: #e5e5e5;
}
td.good-score
{
color: #009800;
}
td.bad-score
{
color: red;
}
/***** 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;
}