$(document).ready(function() {
window.storeNet = {};
window.storeNet.ReportName = {
minWidthThreashold: 10,
};
var singleSideDataSource = new kendo.data.DataSource({
transport: {
read: {
url: "singleSideData.json",
dataType: "json",
},
}
});
$("#product-aisle-poition-table1").kendoGrid({
dataSource: singleSideDataSource,
rowTemplate: kendo.template($("#product-aisle-poition-table1-script-template").html()),
altRowTemplate: kendo.template($("#product-aisle-poition-table1-script-template-alertnate-row").html())
});
$("#product-aisle-poition-table2").kendoGrid({
dataSource: singleSideDataSource,
rowTemplate: kendo.template($("#product-aisle-poition-table2-script-template").html()),
altRowTemplate: kendo.template($("#product-aisle-poition-table2-script-template-alertnate-row").html())
});
});
/* storenet.Insights.vertical-bar-table.css */
.table-bar {
border-radius: 5px;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#30409f+1,4e7ad3+52,30409f+52,30409f+52,4e7ad3+100 */
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff6800+0,f79f3b+19,ff6800+56 */
background: #ff6800;
/* Old browsers */
background: -moz-linear-gradient(top, #ff6800 0%, #f79f3b 19%, #ff6800 56%);
/* FF3.6-15 */
background: -webkit-linear-gradient(top, #ff6800 0%, #f79f3b 19%, #ff6800 56%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #ff6800 0%, #f79f3b 19%, #ff6800 56%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ff6800', endColorstr='#ff6800', GradientType=0);
/* IE6-9 */
-webkit-box-shadow: 0 6px 10px -4px rgba(0, 0, 0, 0.30);
-moz-box-shadow: 0 6px 10px -4px rgba(0, 0, 0, 0.30);
box-shadow: 0 6px 10px -4px rgba(0, 0, 0, 0.30);
}
.table-bar-label {
white-space: nowrap;
overflow: hidden;
color: #fff;
font-family: "arial";
font-weight: bold;
font-size: 10pt;
text-overflow: ellipsis;
}
.table-bar-label.left {
margin-right: 3px;
}
.table-bar-label.right {
margin-left: 3px;
}
.align.left {
text-align: right !important;
}
.align.right {
text-align: left !important;
}
.align.center {
text-align: center !important;
}
.middle.dark {
background-color: #888;
}
.note {
padding: 10px;
margin: 10px;
background-color: #FEC;
border:solid 1px #fff;
-webkit-box-shadow: 0px 6px 10px -4px rgba(0, 0, 0, 0.30);
-moz-box-shadow: 0px 6px 10px -4px rgba(0, 0, 0, 0.30);
box-shadow: 0px 6px 10px -4px rgba(0, 0, 0, 0.30);
}
/***DELETE***/
body {
margin-left: 5%;
width: 90%;
}
/***DELETE***/
[
{ "left": {"name":"pants" ,"value":"100"} , "right": {"name": "socks" , "value":"100"}},
{ "left": {"name":"pants2" ,"value":"50"} , "right": {"name": "socks2", "value":"50"}},
{ "left": {"name":"pants3" ,"value":"20"} , "right": {"name": "socks3", "value":"20"}},
{ "left": {"name":"pants4" ,"value":"10"} , "right": {"name": "socks4", "value":"10"}},
{ "left": {"name":"pants4" ,"value":"1"} , "right": {"name": "socks5", "value":"1"}}
]
<!DOCTYPE html>
<html>
<head>
<link data-require="kendoUI@*" data-semver="2016.2.504" rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.504/styles/kendo.common.min.css" />
<link data-require="kendoUI@*" data-semver="2016.2.504" rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.504/styles/kendo.default.min.css" />
<link data-require="material-design-lite@*" data-semver="1.1.3" rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link data-require="material-design-lite@*" data-semver="1.1.3" rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css" />
<script data-require="kendoUI@*" data-semver="2016.2.504" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script data-require="kendoUI@*" data-semver="2016.2.504" src="//kendo.cdn.telerik.com/2016.2.504/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="storenet.Insights.vertical-bar-table.css" />
<script src="StoreNet.Insights.AdjacencyCombinations.js"></script>
</head>
<body>
<div class='note'>
This demo shows how kendo grids can be changed to contain vertical bar charts using some CSS and custom table components.
</div>
<hr>
<h1>Adjacency Combinations</h1>
<hr>
<h5>All Combinations of Adjacencies</h5>
<p>
This graph shows possible adjacent combinations of merchandise relating to the selected merchandise item(s) contained within the specified stores
</p>
<table id="product-aisle-poition-table1">
<colgroup>
<col style="width:20%" />
<col style="width:15%" />
<col style="width:20%" />
<col style="width:45%" />
</colgroup>
<thead>
<tr>
<th data-field="left" class="align">Left Adjacency</th>
<th data-field="align">Main Object</th>
<th data-field="middle" class='middle'>Right Adjacency</th>
<th data-field="align">Frequency</th>
<th data-field="right" class="align center"></th>
</tr>
</thead>
<tbody></tbody>
</table>
<script id="product-aisle-poition-table1-script-template" type="text/x-kendo-template">
<tr role='row' class=''>
<td role='gridcell' class=''>#: left.name #</td>
<td role='gridcell' class='middle dark'></td>
<td role='gridcell' class=''>#: right.name #</td>
<td role='gridcell'>
<div style='width:#: right.value #%; #if(left.value>window.storeNet.ReportName.minWidthThreashold){ # margin-right:calc(100% - #: right.value #%); # }else{ # margin-right:calc(100% - #: 10 #%); # }# min-width:10%; height:20px;' class='table-bar right'>
<div class='table-bar-label align right tooltip' title='#: right.name # (#:right.value#)'>#: right.value #</div>
</div>
</td>
</tr>
</script>
<script id="product-aisle-poition-table1-script-template-alertnate-row" type="text/x-kendo-template">
<tr role='row' class='k-alt'>
<td role='gridcell' class=''>#: left.name #</td>
<td role='gridcell' class='middle dark'></td>
<td role='gridcell' class=''>#: right.name #</td>
<td role='gridcell'>
<div style='width:#: right.value #%; #if(left.value>window.storeNet.ReportName.minWidthThreashold){ # margin-right:calc(100% - #: right.value #%); # }else{ # margin-right:calc(100% - #: 10 #%); # }# min-width:10%; height:20px;' class='table-bar right'>
<div class='table-bar-label align right tooltip' title='#: right.name # (#:right.value#)'>#: right.value #</div>
</div>
</td>
</tr>
</script>
<hr>
<h5>Single Side Dominant Adjacencies</h5>
<p>
This graph shows prominent adjacency combinations relative to the selected merchandise item(s) contained within the specified stores.
</p>
<table id="product-aisle-poition-table2">
<colgroup>
<col style="width:35%" />
<col style="width:10%" />
<col class='middle dark' style="width:5%" />
<col style="width:10%" />
<col style="width:35%" />
</colgroup>
<thead>
<tr>
<th data-field="left" class="align center">Left Adjacency</th>
<th data-field="" class="align center">Count</th>
<th data-field="" class="align center">...</th>
<th data-field="" class="align center">Count</th>
<th data-field="right" class="align center">Right Adjacency</th>
</tr>
</thead>
<tbody></tbody>
</table>
<hr>
<div class='note'>
<i>
<b>
Ux Notes:
</b>that items with values of 10 and 1 are of the same size. This is because I have specified a minimum width; Ensuring that the items do not become too small to see or hover over for a tooltip. I have kept numbers visible to allow users to differenciate between values when the bar chart is the same.
At the moment both tables feed off a single data souce so I still need to switch the combinations table to have it's own independant source (which is quite easy to do).
<br><br>
As this screen is somewhat overwhelming; I have captioned both tables in an attempt to reduce the view's overall complexity. Hopefully this will reduce training.
</i>
</div>
<script id="product-aisle-poition-table2-script-template" type="text/x-kendo-template">
<tr role='row' class=''>
<td role='gridcell'>
<div style='width:#: left.value #%; #if(left.value>window.storeNet.ReportName.minWidthThreashold){ # margin-left:calc(100% - #: left.value #%); # }else{ # margin-left:calc(100% - #: 10 #%); # }# min-width:10%; height:20px;' class='table-bar align left'>
<div class='table-bar-label left tooltip' title='#: left.name # (#:left.value#)'>#: left.name #</div>
</div>
</td>
<td role='gridcell' class='align center'>#:left.value#</td>
<td role='gridcell' class='middle dark'></td>
<td role='gridcell' class='align center'>#:right.value#</td>
<td role='gridcell'>
<div style='width:#: right.value #%; #if(left.value>window.storeNet.ReportName.minWidthThreashold){ # margin-right:calc(100% - #: right.value #%); # }else{ # margin-right:calc(100% - #: 10 #%); # }# min-width:10%; height:20px;' class='table-bar right'>
<div class='table-bar-label align right tooltip' title='#: right.name # (#:right.value#)'>#: right.name #</div>
</div>
</td>
</tr>
</script>
<script id="product-aisle-poition-table2-script-template-alertnate-row" type="text/x-kendo-template">
<tr role='row' class='k-alt'>
<td role='gridcell'>
<div style='width:#: left.value #%; #if(left.value>window.storeNet.ReportName.minWidthThreashold){ # margin-left:calc(100% - #: left.value #%); # }else{ # margin-left:calc(100% - #: 10 #%); # }# min-width:10%; height:20px;' class='table-bar align left'>
<div class='table-bar-label left tooltip #if(left.value<window.storeNet.ReportName.marqueeScrollThreashold){ # marquee #} #' title='#: left.name # (#:left.value#)'>#: left.name #</div>
</div>
</td>
<td role='gridcell' class='align center'>#:left.value#</td>
<td role='gridcell' class='middle dark'></td>
<td role='gridcell' class='align center'>#:right.value#</td>
<td role='gridcell'>
<div style='width:#: right.value #%; #if(left.value>window.storeNet.ReportName.minWidthThreashold){ # margin-right:calc(100% - #: right.value #%); # }else{ # margin-right:calc(100% - #: 10 #%); # }# min-width:10%; height:20px;' class='table-bar right'>
<div class='table-bar-label align right tooltip' title='#: right.name # (#:right.value#)'>#: right.name #</div>
</div>
</td>
</tr>
</script>
</body>
</html>