diff --git a/apps/dash-clinical-analytics/app.py b/apps/dash-clinical-analytics/app.py index 0801ee931..c6d3743e4 100644 --- a/apps/dash-clinical-analytics/app.py +++ b/apps/dash-clinical-analytics/app.py @@ -1,7 +1,4 @@ import dash -# import dash_core_components as dcc -# import dash_html_components as html -# from dash.dependencies import Input, Output, ClientsideFunction from dash import dcc, html, Input, Output, ClientsideFunction import numpy as np import pandas as pd @@ -734,11 +731,6 @@ def update_table(start, end, clinic, admit_type, heatmap_click, reset_click, *ar score_selected_index, ) figure_list.append(department_score_figure) - # print('BREAKBREAKBREAKBREAK') - # departments = np.insert(departments, 0, None) - # figure_list[0]['layout']['margin']['b'] = 1 - # print(figure_list[0]['data'][0]) - # print(figure_list[0]['layout']['margin']['t']) # Put figures in table table = generate_patient_table( figure_list, departments, wait_time_xrange, score_xrange diff --git a/apps/dash-clinical-analytics/assets/base.css b/apps/dash-clinical-analytics/assets/base.css index edce847f3..7763aa57d 100644 --- a/apps/dash-clinical-analytics/assets/base.css +++ b/apps/dash-clinical-analytics/assets/base.css @@ -40,81 +40,172 @@ max-width: 960px; margin: 0 auto; padding: 0 20px; - box-sizing: border-box; } + box-sizing: border-box; +} + .column, .columns { width: 100%; float: left; - box-sizing: border-box; } + box-sizing: border-box; +} /* For devices larger than 400px */ @media (min-width: 400px) { .container { width: 85%; - padding: 0; } + padding: 0; + } } /* For devices larger than 550px */ @media (min-width: 550px) { .container { - width: 80%; } + width: 80%; + } + .column, .columns { - margin-left: 2%; } + margin-left: 2%; + } + .column:first-child, .columns:first-child { - margin-left: 1%; } + margin-left: 1%; + } .one.column, - .one.columns { width: 4.66666666667%; } - .two.columns { width: 13.3333333333%; } - .three.columns { width: 22%; } - .four.columns { width: 30.6666666667%; } - .five.columns { width: 39.3333333333%; } - .six.columns { width: 48%; } - .seven.columns { width: 56.6666666667%; } - .eight.columns { width: 65.3333333333%; } - .nine.columns { width: 74.0%; } - .ten.columns { width: 82.6666666667%; } - .eleven.columns { width: 91.3333333333%; } - .twelve.columns { width: 100%; margin-left: 0; } - - .one-third.column { width: 30.6666666667%; } - .two-thirds.column { width: 65.3333333333%; } - - .one-half.column { width: 48%; } + .one.columns { + width: 4.66666666667%; + } + + .two.columns { + width: 13.3333333333%; + } + + .three.columns { + width: 22%; + } + + .four.columns { + width: 30.6666666667%; + } + + .five.columns { + width: 39.3333333333%; + } + + .six.columns { + width: 48%; + } + + .seven.columns { + width: 56.6666666667%; + } + + .eight.columns { + width: 65.3333333333%; + } + + .nine.columns { + width: 74.0%; + } + + .ten.columns { + width: 82.6666666667%; + } + + .eleven.columns { + width: 91.3333333333%; + } + + .twelve.columns { + width: 100%; + margin-left: 0; + } + + .one-third.column { + width: 30.6666666667%; + } + + .two-thirds.column { + width: 65.3333333333%; + } + + .one-half.column { + width: 48%; + } /* Offsets */ .offset-by-one.column, - .offset-by-one.columns { margin-left: 8.66666666667%; } + .offset-by-one.columns { + margin-left: 8.66666666667%; + } + .offset-by-two.column, - .offset-by-two.columns { margin-left: 17.3333333333%; } + .offset-by-two.columns { + margin-left: 17.3333333333%; + } + .offset-by-three.column, - .offset-by-three.columns { margin-left: 26%; } + .offset-by-three.columns { + margin-left: 26%; + } + .offset-by-four.column, - .offset-by-four.columns { margin-left: 34.6666666667%; } + .offset-by-four.columns { + margin-left: 34.6666666667%; + } + .offset-by-five.column, - .offset-by-five.columns { margin-left: 43.3333333333%; } + .offset-by-five.columns { + margin-left: 43.3333333333%; + } + .offset-by-six.column, - .offset-by-six.columns { margin-left: 52%; } + .offset-by-six.columns { + margin-left: 52%; + } + .offset-by-seven.column, - .offset-by-seven.columns { margin-left: 60.6666666667%; } + .offset-by-seven.columns { + margin-left: 60.6666666667%; + } + .offset-by-eight.column, - .offset-by-eight.columns { margin-left: 69.3333333333%; } + .offset-by-eight.columns { + margin-left: 69.3333333333%; + } + .offset-by-nine.column, - .offset-by-nine.columns { margin-left: 78.0%; } + .offset-by-nine.columns { + margin-left: 78.0%; + } + .offset-by-ten.column, - .offset-by-ten.columns { margin-left: 86.6666666667%; } + .offset-by-ten.columns { + margin-left: 86.6666666667%; + } + .offset-by-eleven.column, - .offset-by-eleven.columns { margin-left: 95.3333333333%; } + .offset-by-eleven.columns { + margin-left: 95.3333333333%; + } .offset-by-one-third.column, - .offset-by-one-third.columns { margin-left: 34.6666666667%; } + .offset-by-one-third.columns { + margin-left: 34.6666666667%; + } + .offset-by-two-thirds.column, - .offset-by-two-thirds.columns { margin-left: 69.3333333333%; } + .offset-by-two-thirds.columns { + margin-left: 69.3333333333%; + } .offset-by-one-half.column, - .offset-by-one-half.columns { margin-left: 52%; } + .offset-by-one-half.columns { + margin-left: 52%; + } } @@ -125,30 +216,82 @@ html is set to 62.5% so that all the REM measurements throughout Skeleton are based on 10px sizing. So basically 1.5rem = 15px :) */ html { - font-size: 62.5%; } + font-size: 62.5%; +} + body { - font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */ + font-size: 1.5em; + /* currently ems cause chrome bug misinterpreting rems on body element */ line-height: 1.6; font-weight: 400; font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; - color: rgb(50, 50, 50); } + color: rgb(50, 50, 50); +} /* Typography –––––––––––––––––––––––––––––––––––––––––––––––––– */ -h1, h2, h3, h4, h5, h6 { +h1, +h2, +h3, +h4, +h5, +h6 { margin-top: 0; margin-bottom: 0; - font-weight: 300; } -h1 { font-size: 4.5rem; line-height: 1.2; letter-spacing: -.1rem; margin-bottom: 2rem; } -h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; margin-bottom: 1.8rem; margin-top: 1.8rem;} -h3 { font-size: 3.0rem; line-height: 1.3; letter-spacing: -.1rem; margin-bottom: 1.5rem; margin-top: 1.5rem;} -h4 { font-size: 2.6rem; line-height: 1.35; letter-spacing: -.08rem; margin-bottom: 1.2rem; margin-top: 1.2rem;} -h5 { font-size: 2.2rem; line-height: 1.5; letter-spacing: -.05rem; margin-bottom: 0.6rem; margin-top: 0.6rem;} -h6 { font-size: 2.0rem; line-height: 1.6; letter-spacing: 0; margin-bottom: 0.75rem; margin-top: 0.75rem;} + font-weight: 300; +} + +h1 { + font-size: 4.5rem; + line-height: 1.2; + letter-spacing: -.1rem; + margin-bottom: 2rem; +} + +h2 { + font-size: 3.6rem; + line-height: 1.25; + letter-spacing: -.1rem; + margin-bottom: 1.8rem; + margin-top: 1.8rem; +} + +h3 { + font-size: 3.0rem; + line-height: 1.3; + letter-spacing: -.1rem; + margin-bottom: 1.5rem; + margin-top: 1.5rem; +} + +h4 { + font-size: 2.6rem; + line-height: 1.35; + letter-spacing: -.08rem; + margin-bottom: 1.2rem; + margin-top: 1.2rem; +} + +h5 { + font-size: 2.2rem; + line-height: 1.5; + letter-spacing: -.05rem; + margin-bottom: 0.6rem; + margin-top: 0.6rem; +} + +h6 { + font-size: 2.0rem; + line-height: 1.6; + letter-spacing: 0; + margin-bottom: 0.75rem; + margin-top: 0.75rem; +} p { - margin-top: 0; } + margin-top: 0; +} /* Blockquotes @@ -167,9 +310,12 @@ blockquote { a { color: #1EAEDB; text-decoration: underline; - cursor: pointer;} + cursor: pointer; +} + a:hover { - color: #0FA0CE; } + color: #0FA0CE; +} /* Buttons @@ -195,7 +341,9 @@ input[type="button"] { border-radius: 4px; border: 1px solid #bbb; cursor: pointer; - box-sizing: border-box; } + box-sizing: border-box; +} + .button:hover, button:hover, input[type="submit"]:hover, @@ -208,7 +356,9 @@ input[type="reset"]:focus, input[type="button"]:focus { color: #333; border-color: #888; - outline: 0; } + outline: 0; +} + .button.button-primary, button.button-primary, input[type="submit"].button-primary, @@ -216,7 +366,9 @@ input[type="reset"].button-primary, input[type="button"].button-primary { color: #FFF; background-color: #33C3F0; - border-color: #33C3F0; } + border-color: #33C3F0; +} + .button.button-primary:hover, button.button-primary:hover, input[type="submit"].button-primary:hover, @@ -229,7 +381,8 @@ input[type="reset"].button-primary:focus, input[type="button"].button-primary:focus { color: #FFF; background-color: #1EAEDB; - border-color: #1EAEDB; } + border-color: #1EAEDB; +} /* Forms @@ -244,14 +397,18 @@ input[type="password"], textarea, select { height: 38px; - padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */ + padding: 6px 10px; + /* The 6px vertically centers text on FF, ignored by Webkit */ background-color: #fff; border: 1px solid #D1D1D1; border-radius: 4px; box-shadow: none; box-sizing: border-box; font-family: inherit; - font-size: inherit; /*https://stackoverflow.com/questions/6080413/why-doesnt-input-inherit-the-font-from-body*/} + font-size: inherit; + /*https://stackoverflow.com/questions/6080413/why-doesnt-input-inherit-the-font-from-body*/ +} + /* Removes awkward default styles on some inputs for iOS */ input[type="email"], input[type="number"], @@ -262,12 +419,16 @@ input[type="url"], input[type="password"], textarea { -webkit-appearance: none; - -moz-appearance: none; - appearance: none; } + -moz-appearance: none; + appearance: none; +} + textarea { min-height: 65px; padding-top: 6px; - padding-bottom: 6px; } + padding-bottom: 6px; +} + input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, @@ -282,36 +443,53 @@ textarea:focus, label, legend { display: block; - margin-bottom: 0px; } + margin-bottom: 0px; +} + fieldset { padding: 0; - border-width: 0; } + border-width: 0; +} + input[type="checkbox"], input[type="radio"] { - display: inline; } -label > .label-body { + display: inline; +} + +label>.label-body { display: inline-block; margin-left: .5rem; - font-weight: normal; } + font-weight: normal; +} /* Lists –––––––––––––––––––––––––––––––––––––––––––––––––– */ ul { - list-style: circle inside; } + list-style: circle inside; +} + ol { - list-style: decimal inside; } -ol, ul { + list-style: decimal inside; +} + +ol, +ul { padding-left: 0; - margin-top: 0; } + margin-top: 0; +} + ul ul, ul ol, ol ol, ol ul { margin: 1.5rem 0 1.5rem 3rem; - font-size: 90%; } + font-size: 90%; +} + li { - margin-bottom: 1rem; } + margin-bottom: 1rem; +} /* Tables @@ -319,52 +497,72 @@ li { table { border-collapse: collapse; } + th, td { padding: 12px 15px; text-align: left; - border-bottom: 1px solid #E1E1E1; } + border-bottom: 1px solid #E1E1E1; +} + th:first-child, td:first-child { - padding-left: 0; } + padding-left: 0; +} + th:last-child, td:last-child { - padding-right: 0; } + padding-right: 0; +} /* Spacing –––––––––––––––––––––––––––––––––––––––––––––––––– */ button, .button { - margin-bottom: 0rem; } + margin-bottom: 0rem; +} + input, textarea, select, fieldset { - margin-bottom: 0rem; } + margin-bottom: 0rem; +} + pre, dl, figure, table, form { - margin-bottom: 0rem; } + margin-bottom: 0rem; +} + p, ul, ol { - margin-bottom: 0.75rem; } + margin-bottom: 0.75rem; +} /* Utilities –––––––––––––––––––––––––––––––––––––––––––––––––– */ .u-full-width { width: 100%; - box-sizing: border-box; } + box-sizing: border-box; +} + .u-max-full-width { max-width: 100%; - box-sizing: border-box; } + box-sizing: border-box; +} + .u-pull-right { - float: right; } + float: right; +} + .u-pull-left { - float: left; } + float: left; +} /* Misc @@ -373,7 +571,8 @@ hr { margin-top: 3rem; margin-bottom: 3.5rem; border-width: 0; - border-top: 1px solid #E1E1E1; } + border-top: 1px solid #E1E1E1; +} /* Clearing @@ -385,7 +584,8 @@ hr { .u-cf { content: ""; display: table; - clear: both; } + clear: both; +} /* Media Queries