{"size":{"Width":565,"Height":460},"appearance":{"background":null,"padding":14,"font":{"family":"Courier New","size":10.0,"bold":false,"italic":false,"underline":false,"strikeout":false,"color":"rgb(0,72,168)"},"border":{"on":true,"size":0.0,"style":"solid","color":"#666"},"text":{"wrap":false,"hAlign":"left","vAlign":"top"}},"outputType":"WIDGET","widgetState":null,"wikiPageTitle":null,"outputs":{"text":"loading...","htmlwidgets":"<div id=\"htmlwidget_container\">\n <div id=\"htmlwidget-9276d3b3a80132534441\" style=\"width:960px;height:500px;\" class=\"rhtmlMetro html-widget\"></div>\n</div>\n<script type=\"application/json\" data-for=\"htmlwidget-9276d3b3a80132534441\">{\"x\":{\"text\":\"<!DOCTYPE html>\\n <html>\\n <head>\\n <style>\\n h1 {\\n font-size: 20;\\n font-family: verdana; \\n font-weight: 100; \\n line-height: 70%;\\n color: #444444;\\n margin-top: 20px;\\n text-indent: 5px; \\n align: left;\\n }\\n\\n h2 {\\n font-size: 14px;\\n font-family: verdana;\\n font-weight: 200; \\n line-height: 60%;\\n color: #444444;\\n margin-top: 10px;\\n text-indent: 5px\\n }}\\n\\n p {}\\n\\n .table-caption-div {\\n display: inline-block;\\n\\n }\\n table {\\n border-color: #3E7DCC;\\n border-style: solid;\\n background-color: #efefef;\\n margin-left: 0px; \\n width: auto;\\n padding: 6px;\\n display: inline-block;\\n border-collapse: collapse;\\n table-layout: fixed\\n }\\n\\n caption { display: inline-block;\\n text-align:left}\\n td {\\n width: 80px; \\n height: 45px; \\n font-family: verdana; \\n color: grey; \\n font-size: 12px;\\n font-weight: 100; \\n border-top: 2px solid #dddddd;\\n border-bottom: 2px solid #dddddd;\\n text-indent: 5px; \\n }\\n td.center {\\n width: 90px; \\n text-align: center;\\n }\\n td.right {\\n width: 90px; \\n border-left: 1px solid #dddddd;\\n border-right: 1px solid #dddddd;\\n text-align: right;\\n padding-right: 50px;\\n }\\ntd.cell1 {background-color: #F7FBFF; color: blue;}td.cell2 {background-color: #083776; color: white;}td.cell3 {background-color: #084286; color: white;}td.cell4 {background-color: #1866AD; color: white;}td.cell5 {background-color: #08306B; color: white;}\\n\\ntd.no-left {\\n border-top: none\\n\\n }\\n\\n\\n <\\/style>\\n <\\/head>\\n <body>\\n\\n <table >\\n <caption class=\\\"table-caption-div\\\">\\n <h1>Age<\\/h1>\\n <h2>How old are you?<\\/h2>\\n <\\/caption><tr>\\n <td>18 to 24<\\/td>\\n <td class = \\\"center\\\">2016<\\/td>\\n <td class = \\\"right cell1\\\";>13%<\\/td>\\n <\\/tr><tr>\\n <td>25 to 34<\\/td>\\n <td class = \\\"center\\\">2016<\\/td>\\n <td class = \\\"right cell2\\\";>22%<\\/td>\\n <\\/tr><tr>\\n <td>35 to 44<\\/td>\\n <td class = \\\"center\\\">2016<\\/td>\\n <td class = \\\"right cell3\\\";>22%<\\/td>\\n <\\/tr><tr>\\n <td>45 to 54<\\/td>\\n <td class = \\\"center\\\">2016<\\/td>\\n <td class = \\\"right cell4\\\";>20%<\\/td>\\n <\\/tr><tr>\\n <td>55+<\\/td>\\n <td class = \\\"center\\\">2016<\\/td>\\n <td class = \\\"right cell5\\\";>22%<\\/td>\\n <\\/tr><\\/table>\\n <\\/body>\\n <\\/html>\",\"horizontal_align\":\"left\",\"vertical_align\":\"top\",\"wrap_text\":true,\"background_color\":\"Transparent\",\"background_shape\":\"Rectangle\",\"font_family\":\"sans-serif\",\"font_size\":11,\"font_color\":\"black\",\"font_bold\":false,\"font_italic\":false,\"font_underline\":false,\"font_strikethrough\":false,\"border_width\":0,\"border_color\":\"Transparent\",\"border_style\":\"Solid\",\"as_html\":true,\"class\":\"box\",\"width\":null,\"height\":null},\"evals\":[],\"jsHooks\":[]}</script>\n<script type=\"application/htmlwidget-sizing\" data-for=\"htmlwidget-9276d3b3a80132534441\">{\"viewer\":{\"width\":450,\"height\":350,\"padding\":0,\"fill\":true},\"browser\":{\"width\":960,\"height\":500,\"padding\":0,\"fill\":true}}</script>","htmlwidget-head":"{\"stylesheets\":[\"https://rserverhtmlwidgetasset.azureedge.net/main-1c2ecf90c95d7abb5b3f8b8a31dc8484.css\"],\"javascript\":[\"https://rserverhtmlwidgetasset.azureedge.net/htmlwidgets-917a66c6e5036eb1bfd1fb672a82635a.js\",\"https://rserverhtmlwidgetasset.azureedge.net/rhtmlMetro-fde5d25081b54ec58052aaa4d9465a39.js\"],\"attachments\":[],\"widget-cannot-re-render\":false,\"package\":\"rhtmlMetro\",\"package_version\":\"0.1.0\"}","warning":""},"secondsTaken":0.2989415,"updated":"2018-11-02T06:06:00.720704Z","lastUpdatedMessage":null,"executedCode":"library(RColorBrewer)\nCustomTable <- function(x, \n year, \n as.percent = TRUE, \n hide.values = FALSE, \n values.width = 90,\n scale.min = NULL, \n scale.max = NULL, \n heatmap = FALSE, \n cell.colors = colorRampPalette(brewer.pal(9,\"Blues\"))(101), #RColorBrewer::brewer.pal(9, \"Blues\"),\n font.colors = c(rep(\"blue\", 76), rep(\"white\", 25)))\n\n{\n categories <- rownames(x)\n values = unname(x)\n # Scaling the input values to be in [1, 2, 3, ..., n.color]\n n.colors = length(cell.colors)\n if (is.null(scale.min))\n scale.min = min(values)\n if (is.null(scale.max))\n scale.max = max(values)\n scaled.values = round((values - scale.min) / (scale.max - scale.min) * (n.colors - 1), 0) + 1\n if (as.percent)\n values <- flipFormat::FormatAsPercent(values / 100, decimals = 0)\n if (hide.values)\n values <- rep(\"\", length(values))\n\n # Heatmap formatting of cells\n n = length(values)\n # Creating the CSS\n cell.shading = paste0('td.cell', 1:n, ' {}')\n print(scaled.values)\nprint(cell.colors[scaled.values]) \n \n if (heatmap)\n cell.shading = paste0('td.cell', 1:n, ' {background-color: ', cell.colors[scaled.values], '; color: ', font.colors[scaled.values], ';}')\n cell.shading = paste0(cell.shading, collapse = '')\n print(cell.shading)\n \n \n .cell <- function(category, year, value, i)\n {\n paste0('<tr>\n <td>', category, '</td>\n <td class = \"center\">', year, '</td>\n <td class = \"right cell', i, '\";>', value, '</td>\n </tr>')\n }\n \n cells = paste0(.cell(categories, year, values, 1:n), collapse = \"\")\n\n html = paste0('<!DOCTYPE html>\n <html>\n <head>\n <style>\n h1 {\n font-size: 20;\n font-family: verdana; \n font-weight: 100; \n line-height: 70%;\n color: #444444;\n margin-top: 20px;\n text-indent: 5px; \n align: left;\n }\n\n h2 {\n font-size: 14px;\n font-family: verdana;\n font-weight: 200; \n line-height: 60%;\n color: #444444;\n margin-top: 10px;\n text-indent: 5px\n }}\n\n p {}\n\n .table-caption-div {\n display: inline-block;\n\n }\n table {\n border-color: #3E7DCC;\n border-style: solid;\n background-color: #efefef;\n margin-left: 0px; \n width: auto;\n padding: 6px;\n display: inline-block;\n border-collapse: collapse;\n table-layout: fixed\n }\n\n caption { display: inline-block;\n text-align:left}\n td {\n width: 80px; \n height: 45px; \n font-family: verdana; \n color: grey; \n font-size: 12px;\n font-weight: 100; \n border-top: 2px solid #dddddd;\n border-bottom: 2px solid #dddddd;\n text-indent: 5px; \n }\n td.center {\n width: 90px; \n text-align: center;\n }\n td.right {\n width: ', values.width, 'px; \n border-left: 1px solid #dddddd;\n border-right: 1px solid #dddddd;\n text-align: right;\n padding-right: 50px;\n }\n', cell.shading, '\n\ntd.no-left {\n border-top: none\n\n }\n\n\n </style>\n </head>\n <body>\n\n <table >\n <caption class=\"table-caption-div\">\n <h1>Age</h1>\n <h2>How old are you?</h2>\n </caption>',\n cells,\n '</table>\n </body>\n </html>')\n rhtmlMetro::Box(text = html, text.as.html = TRUE)}\n \nCustomTable(table.Q3.Age, year = 2016, as.percent = TRUE, heatmap = TRUE) ","lastSavedCode":null,"highlightedCodeSpans":[{"start":3615,"length":12,"index":2}],"tableTransformations":"<TabularTransformer>\r\n <TabularTransform type=\"Truncation\" truncationHeaderType=\"Column\" />\r\n <TabularTransform />\r\n</TabularTransformer>","tabularFilteringOptions":null,"hasGuiControls":false,"calculating":"Idle","showDebug":false,"layout":"Top","vSplit":0.23737084398976976,"hSplit":0.45,"updateWarnings":true,"updateMode":"Automatic","warnSlow":true,"Options":{"debugconsole":false,"codeposition":"Top","splitH":0.45,"splitV":0.23737084398976976,"update warnings":true,"updating":"Automatic","warn slow":true}}