Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added function OnFieldClick #55

Closed
wants to merge 3 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions examples/blackTheme/mps.json

Large diffs are not rendered by default.

38 changes: 38 additions & 0 deletions examples/blackTheme/mps_prepop.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
<!DOCTYPE html>
<html>
<head>
<title>Pivot Demo</title>
<link rel="stylesheet" type="text/css" href="pivot.css">
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../jquery-ui-1.9.2.custom.min.js"></script>
<script type="text/javascript" src="../pivot.js"></script>

</head>
<style>
* {font-family: Verdana;}
</style>
<body>
<script type="text/javascript">
$(function(){
var derivers = $.pivotUtilities.derivers;

$.getJSON("mps.json", function(mps) {
$("#output").pivotUI(mps, {
derivedAttributes: {
"Age Bin": derivers.bin("Age", 10),
"Gender Imbalance": function(mp) {
return mp["Gender"] == "Male" ? 1 : -1;
}
},
rows: ["Province"],
cols: ["Party"],
effectsName: "Heatmap"
});
});
});
</script>

<div id="output" style="margin: 30px;"></div>

</body>
</html>
147 changes: 147 additions & 0 deletions examples/blackTheme/pivot.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,147 @@
table.table-bordered,.pvtAxisContainer {
background: #595c64;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzU5NWM2NCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxYjFiMWMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #595c64 0%, #1b1b1c 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #595c64), color-stop(100%, #1b1b1c) );
background: -webkit-linear-gradient(top, #595c64 0%, #1b1b1c 100%);
background: -o-linear-gradient(top, #595c64 0%, #1b1b1c 100%);
background: -ms-linear-gradient(top, #595c64 0%, #1b1b1c 100%);
background: linear-gradient(to bottom, #595c64 0%, #1b1b1c 100%);
filter: progid : DXImageTransform.Microsoft.gradient ( startColorstr ='#595c64', endColorstr = '#1b1b1c', GradientType = 0 );
}

table.table-bordered .form-inline {
color: #FCB712;
float: left;
font-size: 14px;
}


table.pvtTable {
font-family: arial;
font-size: 8pt;
text-align: left;
border-collapse: collapse;

}

table.pvtTable tr th{
border: 1px solid #CDCDCD;
font-size: 8pt;
padding: 5px;
background: #E8E8E8;
}
table.pvtTable .pvtAxisLabel{
}
table.pvtTable .pvtColLabel,table.pvtTable .pvtRowLabel, table.pvtTable .pvtTotalLabel, table.pvtTable .pvtAxisLabel {
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIzMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjY2NjY2NjIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
background: -moz-linear-gradient(top, #ffffff 30%, #cccccc 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(30%, #ffffff), color-stop(100%, #cccccc) );
background: -webkit-linear-gradient(top, #ffffff 30%, #cccccc 100%);
background: -o-linear-gradient(top, #ffffff 30%, #cccccc 100%);
background: -ms-linear-gradient(top, #ffffff 30%, #cccccc 100%);
background: linear-gradient(to bottom, #ffffff 30%, #cccccc 100%);
filter: progid : DXImageTransform.Microsoft.gradient ( startColorstr ='#ffffff', endColorstr = '#cccccc', GradientType = 0 ); /* IE6-8 */
}
table.pvtTable tr:hover td {
font-weight: 700;
background-color: #FCEBC4;
}


table.pvtTable tr {
cursor:default;
}

table.pvtTable td.pvtTotal,table.pvtTable td.pvtGrandTotal {
background: none repeat scroll 0 0 #E8E8E8 !important;
}

table.pvtTable td.pvtColLabel {
text-align: center;
}

table.pvtTable td.pvtTotalLabel {
text-align: right;
}

table.pvtTable tr td {
color: #3D3D3D;
padding: 5px;
border: 1px solid #CDCDCD;
vertical-align: top;
text-align: right;
background-color: #FFFFFF;
}

.pvtTotal,.pvtGrandTotal {
font-weight: bold;
}

.pvtAxisContainer {
border: 0;
padding: 2px 10px;
min-width: 20px;
min-height: 20px;
}

#vals.pvtAxisContainer li {
padding: 2px;
}

.pvtAxisContainer #aggregator {
background: none repeat scroll 0 0 #444444;
border: 1px solid #7c7c7c;
color: #FCB712;
}

.pvtAxisContainer li,.pvtAxisContainer li div p button {
border: 1px solid #7c7c7c;
-moz-box-shadow: 0 0 4px #7C7C7C inset;
-webkit-box-shadow: 0 0 4px #7C7C7C inset;
box-shadow: 0 0 4px #7C7C7C inset;


margin: 1px;
padding: 1px 10px;
list-style-type: none;
cursor: move;
color: #FCB712;
background: #696c72;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY5NmM3MiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzMzMzMzQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #696c72 0%, #333334 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #696c72), color-stop(100%, #333334) );
background: -webkit-linear-gradient(top, #696c72 0%, #333334 100%);
background: -o-linear-gradient(top, #696c72 0%, #333334 100%);
background: -ms-linear-gradient(top, #696c72 0%, #333334 100%);
background: linear-gradient(to bottom, #696c72 0%, #333334 100%);
filter: progid : DXImageTransform.Microsoft.gradient ( startColorstr = '#696c72', endColorstr = '#333334', GradientType = 0 );
}
.pvtAxisContainer li div {
background: #595c64 !important;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzU5NWM2NCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxYjFiMWMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+) !important;
background: -moz-linear-gradient(top, #595c64 0%, #1b1b1c 100%) !important;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #595c64), color-stop(100%, #1b1b1c) ) !important;
background: -webkit-linear-gradient(top, #595c64 0%, #1b1b1c 100%) !important;
background: -o-linear-gradient(top, #595c64 0%, #1b1b1c 100%) !important;
background: -ms-linear-gradient(top, #595c64 0%, #1b1b1c 100%) !important;
background: linear-gradient(to bottom, #595c64 0%, #1b1b1c 100%) !important;
filter: progid : DXImageTransform.Microsoft.gradient ( startColorstr ='#595c64', endColorstr = '#1b1b1c', GradientType = 0 ) !important;

}

.pvtAxisContainer div p > label {
font-size: 0.8em;
}

.pvtAxisContainer div p{
margin: 0px;
}

.pvtHorizList {

}

.pvtHorizList li {
display: inline;
}
41 changes: 41 additions & 0 deletions examples/mps_prepop_onClick.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
<!DOCTYPE html>
<html>
<head>
<title>Pivot Demo</title>
<link rel="stylesheet" type="text/css" href="pivot.css">
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.9.2.custom.min.js"></script>
<script type="text/javascript" src="pivot.js"></script>

</head>
<style>
* {font-family: Verdana;}
</style>
<body>
<script type="text/javascript">
$(function(){
var derivers = $.pivotUtilities.derivers;

$.getJSON("mps.json", function(mps) {
$("#output").pivotUI(mps, {
derivedAttributes: {
"Age Bin": derivers.bin("Age", 10),
"Gender Imbalance": function(mp) {
return mp["Gender"] == "Male" ? 1 : -1;
}
},
rows: ["Province"],
cols: ["Party"],
effectsName: "Heatmap",
onFieldClick: function (attrs){
alert(JSON.stringify(attrs));
}
});
});
});
</script>

<div id="output" style="margin: 30px;"></div>

</body>
</html>
46 changes: 41 additions & 5 deletions examples/pivot.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.