hierarchic-heatmap-table-component

<html><head><title>Heatmap table</title><link type="text/css" rel="stylesheet" href="./static/css/codemirror.css"/><link type="text/css" rel="stylesheet" href="./static/css/doc.css"/><script type="text/javascript" src="./static/js/codemirror.js"></script><script type="text/javascript" src="./static/js/xml.js"></script><script type="text/javascript" src="./static/js/css.js"> </script><script type="text/javascript" src="./static/js/javascript.js"></script><link type="text/css" rel="stylesheet" href="../dist/heatmap-table.css"/><script type="text/javascript" src="../dist/heatmap-table-bundle.js"></script></head><body style="height:auto"><div class="panel panel-default col-lg-12 col-md-12" style="float: left; height:auto"><div class="row panel-heading"><h4 class="text-center">linkLabel and linkURL</h4></div><div id="heatmap-table-1" style="width:800px;margin:20px auto 50px auto; height:auto"></div><div class="panel-body pull-left" style="width:50%"><p>This is the classic display of a heatmap.</p><ul> <li><p><strong>tableID</strong>(<em>String</em>): The id of the HTML element</p> </li> <li><p><strong>options</strong>(<em>Object</em>): The option of the heatMap table</p> <ul> <li><strong>columnWidth</strong>(<em>String</em>): Set the width of columns, "70px" by default</li> <li><strong>valuesSetting</strong>(<em>Array</em>):<ul> <li><strong>{value: "", color: ""}</strong>: color is a value of css color</li> <li><strong>{value: "", cssClass: ""}</strong>: cssClass is a css class</li> <li><strong>{value: "", html: ""}</strong>: </li> </ul> </li> <li><strong>headerTemplateID</strong>(String): The name of handlebars template</li> <li><strong>headerTemplateData</strong>(Object): {header: ["..", ".."]}</li> </ul> </li> <li><p><strong>Data structure</strong>:</p> <pre><code> [{ "rowLabel": String, "values": Array, "linkLabel": String, "linkURL": String, "children": Array }]; </code></pre></li> </ul> </div><div class="pull-right" style="width:50%;overflow:auto"><div><ul class="nav nav-tabs" role="tablist"><li class="active" role="presentation"><a href="#javascript" aria-controls="javascript" role="tab" data-toggle="tab">Javascript</a></li><li role="presentation"><a href="#html" aria-controls="html" role="tab" data-toggle="tab">HTML</a></li><li role="presentation"><a href="#css" aria-controls="css" role="tab" data-toggle="tab">CSS</a></li></ul></div><div class="tab-content"><div class="tab-pane active" id="javascript" role="tabpanel"><textarea id="javascriptCode" name="javascriptCode" style="max-height:200px;overflow:auto;font-size:11px">var heatmapTableOptions = { valuesSetting: [ { value: 'Positive', html: '<div>\ <img style="width:15px" src="./static/img/chili.gif">\ <img style="width:15px" src="./static/img/chili.gif">\ </div>' }, { value: 'High', cssClass: 'red'}, { value: 'NotDetected', color: 'lightgray'} ], columnWidth: "120px", headerTemplateID: "headerTemplate", headerTemplateData: {header:['MANotDetected', 'MAPositive', 'ESTPositive']} } var heatMapTable = new HeatMapTable({ tableID: "heatmap-table-1", options: heatmapTableOptions }); var data = [ { "rowLabel": "Human anatomical entity", "linkLabel": "[TS-2178]", "linkURL": "http://www.nextprot.org/db/term/TS-2178", "values": ["NotDetected", "High", "Positive"], "children": [ { "rowLabel": "Fluid and secretion", "linkLabel": "[TS-2101]", "linkURL": "http://www.nextprot.org/db/term/TS-2101", "values": ["NotDetected", "High", "Positive"], "children": [ { "linkLabel": "[TS-0079]", "linkURL": "http://www.nextprot.org/db/term/TS-0079", "rowLabel": "Blood", "values": ["", "High", "Positive"], "children": [] } ] } ], } ]; heatMapTable.loadJSONData(data); heatMapTable.show();</textarea></div><div class="tab-pane active" id="html" role="tabpanel"><textarea id="htmlCode" name="htmlCode" style="max-height:300px;height:100%;overflow:auto;font-size:11px"><div id="heatmap-table-1"></div> <script type="text/javascript"> Handlebars.registerHelper('createHeader', function(columnName, block) { var result = {}; result.columnWidth = "120px"; result.columnName = columnName; return block.fn(result); }); </script> <script type="text/x-handlebars-template"> {{#each header}} {{#createHeader this}} <div class="heatmap-column {{columnClass}}" style="width: {{columnWidth}}"> {{columnName}} </div> {{/createHeader}} {{/each}} </script></textarea></div><div class="tab-pane active" id="css" role="tabpanel"><textarea id="cssCode" name="cssCode" style="max-height:300px;height:100%;overflow:auto;font-size:11px">.red { background-color: red; }</textarea></div></div></div></div><script>var simpleHeatMap; var executeCode = function (outputDiv, mirrorCode) { $(outputDiv).empty(); var code = mirrorCode.getValue(); eval(code); $(outputDiv).animate({opacity: "100"}, 2000); }; window.onload = function () { javascriptCode = CodeMirror.fromTextArea($("#javascriptCode")[0], { mode: "javascript", lineNumbers: true, lineWrapping: true, styleActiveLine: true, matchBrackets: true, readOnly: true }); htmlCode = CodeMirror.fromTextArea($("#htmlCode")[0], { mode: "xml", htmlMode: true, lineNumbers: true, lineWrapping: true, readOnly: true }); cssCode = CodeMirror.fromTextArea($("#cssCode")[0], { mode: "css", lineNumbers: true, lineWrapping: true, readOnly: true }); $(function () { executeCode("#heatmap-table-1", javascriptCode); //can't remove this code, because codeMirror can't render a element which is invisiable $('#html').each( function () { $(this).removeClass('active') }); $('#css').each( function () { $(this).removeClass('active') }); }); };</script><script>Handlebars.registerHelper('createHeader', function(columnName, block) { var result = {}; result.columnWidth = "120px"; result.columnName = columnName; return block.fn(result); });</script><script id="headerTemplate" type="text/x-handlebars-template"><div style="overflow:hidden"> <div class="pull-right"> {{#each header}} {{#createHeader this}} <div class="heatmap-column {{columnClass}}" style="width: {{columnWidth}}"> {{columnName}} </div> {{/createHeader}} {{/each}} </div> </div></script><style>.red { background-color: red; }</style></body></html>