From e5c5ee74f0f9a6312765f4b55c57a244876f3508 Mon Sep 17 00:00:00 2001 From: Gehad elrobey Date: Mon, 7 Jul 2014 14:01:36 +0200 Subject: HTML: fix profile labels Fix labels view in dive profile. Add Jqplot css file to the exports. The css files fix the view and enahnce the plot. Signed-off-by: Gehad elrobey Signed-off-by: Miika Turkia Signed-off-by: Dirk Hohndel --- theme/dive_export.html | 6 ++ theme/jquery.jqplot.css | 259 ++++++++++++++++++++++++++++++++++++++++++++++++ theme/list_lib.js | 32 +++--- 3 files changed, 281 insertions(+), 16 deletions(-) create mode 100644 theme/jquery.jqplot.css (limited to 'theme') diff --git a/theme/dive_export.html b/theme/dive_export.html index e1d89f48c..ec08e86b0 100644 --- a/theme/dive_export.html +++ b/theme/dive_export.html @@ -24,6 +24,12 @@ function load_scripts() fileref.setAttribute("href", location.pathname + "_files/theme.css"); document.getElementsByTagName("head")[0].appendChild(fileref); + fileref=document.createElement("link"); + fileref.setAttribute("rel", "stylesheet"); + fileref.setAttribute("type", "text/css"); + fileref.setAttribute("href", location.pathname + "_files/jquery.jqplot.css"); + document.getElementsByTagName("head")[0].appendChild(fileref); + fileref=document.createElement('script'); fileref.setAttribute("src", location.pathname + "_files/file.json"); document.getElementsByTagName("head")[0].appendChild(fileref); diff --git a/theme/jquery.jqplot.css b/theme/jquery.jqplot.css new file mode 100644 index 000000000..2810d2be4 --- /dev/null +++ b/theme/jquery.jqplot.css @@ -0,0 +1,259 @@ +/*rules for the plot target div. These will be cascaded down to all plot elements according to css rules*/ +.jqplot-target { + position: relative; + color: #666666; + font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; + font-size: 1em; +/* height: 300px; + width: 400px;*/ +} + +/*rules applied to all axes*/ +.jqplot-axis { + font-size: 0.75em; +} + +.jqplot-xaxis { + margin-top: 10px; +} + +.jqplot-x2axis { + margin-bottom: 10px; +} + +.jqplot-yaxis { + margin-right: 10px; +} + +.jqplot-y2axis, .jqplot-y3axis, .jqplot-y4axis, .jqplot-y5axis, .jqplot-y6axis, .jqplot-y7axis, .jqplot-y8axis, .jqplot-y9axis, .jqplot-yMidAxis { + margin-left: 10px; + margin-right: 10px; +} + +/*rules applied to all axis tick divs*/ +.jqplot-axis-tick, .jqplot-xaxis-tick, .jqplot-yaxis-tick, .jqplot-x2axis-tick, .jqplot-y2axis-tick, .jqplot-y3axis-tick, .jqplot-y4axis-tick, .jqplot-y5axis-tick, .jqplot-y6axis-tick, .jqplot-y7axis-tick, .jqplot-y8axis-tick, .jqplot-y9axis-tick, .jqplot-yMidAxis-tick { + position: absolute; + white-space: pre; +} + + +.jqplot-xaxis-tick { + top: 0px; + /* initial position untill tick is drawn in proper place */ + left: 15px; +/* padding-top: 10px;*/ + vertical-align: top; +} + +.jqplot-x2axis-tick { + bottom: 0px; + /* initial position untill tick is drawn in proper place */ + left: 15px; +/* padding-bottom: 10px;*/ + vertical-align: bottom; +} + +.jqplot-yaxis-tick { + right: 0px; + /* initial position untill tick is drawn in proper place */ + top: 15px; +/* padding-right: 10px;*/ + text-align: right; +} + +.jqplot-yaxis-tick.jqplot-breakTick { + right: -20px; + margin-right: 0px; + padding:1px 5px 1px 5px; +/* background-color: white;*/ + z-index: 2; + font-size: 1.5em; +} + +.jqplot-y2axis-tick, .jqplot-y3axis-tick, .jqplot-y4axis-tick, .jqplot-y5axis-tick, .jqplot-y6axis-tick, .jqplot-y7axis-tick, .jqplot-y8axis-tick, .jqplot-y9axis-tick { + left: 0px; + /* initial position untill tick is drawn in proper place */ + top: 15px; +/* padding-left: 10px;*/ +/* padding-right: 15px;*/ + text-align: left; +} + +.jqplot-yMidAxis-tick { + text-align: center; + white-space: nowrap; +} + +.jqplot-xaxis-label { + margin-top: 10px; + font-size: 11pt; + position: absolute; +} + +.jqplot-x2axis-label { + margin-bottom: 10px; + font-size: 11pt; + position: absolute; +} + +.jqplot-yaxis-label { + margin-right: 10px; +/* text-align: center;*/ + font-size: 11pt; + position: absolute; +} + +.jqplot-yMidAxis-label { + font-size: 11pt; + position: absolute; +} + +.jqplot-y2axis-label, .jqplot-y3axis-label, .jqplot-y4axis-label, .jqplot-y5axis-label, .jqplot-y6axis-label, .jqplot-y7axis-label, .jqplot-y8axis-label, .jqplot-y9axis-label { +/* text-align: center;*/ + font-size: 11pt; + margin-left: 10px; + position: absolute; +} + +.jqplot-meterGauge-tick { + font-size: 0.75em; + color: #999999; +} + +.jqplot-meterGauge-label { + font-size: 1em; + color: #999999; +} + +table.jqplot-table-legend { + margin-top: 12px; + margin-bottom: 12px; + margin-left: 12px; + margin-right: 12px; +} + +table.jqplot-table-legend, table.jqplot-cursor-legend { + background-color: rgba(255,255,255,0.6); + border: 1px solid #cccccc; + position: absolute; + font-size: 0.75em; +} + +td.jqplot-table-legend { + vertical-align:middle; +} + +/* +These rules could be used instead of assigning +element styles and relying on js object properties. +*/ + +/* +td.jqplot-table-legend-swatch { + padding-top: 0.5em; + text-align: center; +} + +tr.jqplot-table-legend:first td.jqplot-table-legend-swatch { + padding-top: 0px; +} +*/ + +td.jqplot-seriesToggle:hover, td.jqplot-seriesToggle:active { + cursor: pointer; +} + +.jqplot-table-legend .jqplot-series-hidden { + text-decoration: line-through; +} + +div.jqplot-table-legend-swatch-outline { + border: 1px solid #cccccc; + padding:1px; +} + +div.jqplot-table-legend-swatch { + width:0px; + height:0px; + border-top-width: 5px; + border-bottom-width: 5px; + border-left-width: 6px; + border-right-width: 6px; + border-top-style: solid; + border-bottom-style: solid; + border-left-style: solid; + border-right-style: solid; +} + +.jqplot-title { + top: 0px; + left: 0px; + padding-bottom: 0.5em; + font-size: 1.2em; +} + +table.jqplot-cursor-tooltip { + border: 1px solid #cccccc; + font-size: 0.75em; +} + + +.jqplot-cursor-tooltip { + border: 1px solid #cccccc; + font-size: 0.75em; + white-space: nowrap; + background: rgba(208,208,208,0.5); + padding: 1px; +} + +.jqplot-highlighter-tooltip, .jqplot-canvasOverlay-tooltip { + border: 1px solid #cccccc; + font-size: 0.75em; + white-space: nowrap; + background: rgba(208,208,208,0.5); + padding: 1px; +} + +.jqplot-point-label { + font-size: 0.75em; + z-index: 2; +} + +td.jqplot-cursor-legend-swatch { + vertical-align: middle; + text-align: center; +} + +div.jqplot-cursor-legend-swatch { + width: 1.2em; + height: 0.7em; +} + +.jqplot-error { +/* Styles added to the plot target container when there is an error go here.*/ + text-align: center; +} + +.jqplot-error-message { +/* Styling of the custom error message div goes here.*/ + position: relative; + top: 46%; + display: inline-block; +} + +div.jqplot-bubble-label { + font-size: 0.8em; +/* background: rgba(90%, 90%, 90%, 0.15);*/ + padding-left: 2px; + padding-right: 2px; + color: rgb(20%, 20%, 20%); +} + +div.jqplot-bubble-label.jqplot-bubble-label-highlight { + background: rgba(90%, 90%, 90%, 0.7); +} + +div.jqplot-noData-container { + text-align: center; + background-color: rgba(96%, 96%, 96%, 0.3); +} diff --git a/theme/list_lib.js b/theme/list_lib.js index 798c40a41..7135369d0 100644 --- a/theme/list_lib.js +++ b/theme/list_lib.js @@ -788,31 +788,31 @@ function int_to_time(n) function canvas_draw() { document.getElementById("chart1").innerHTML = ""; - var d1 = new Array(); //depth - var d2 = new Array(); //pressure - var d3 = new Array(); //events - var d4 = new Array(); //temperature + var depthData = new Array(); + var pressureData = new Array(); + var eventsData = new Array(); + var temperatureData = new Array(); var last = 0; for (var i = 0; i < items[dive_id].samples.length; i++) { - d1.push([ + depthData.push([ items[dive_id].samples[i][0] / 60, -1 * mm_to_meter(items[dive_id].samples[i][1]) ]); if (items[dive_id].samples[i][2] != 0) { - d2.push([ + pressureData.push([ items[dive_id].samples[i][0] / 60, mbar_to_bar(items[dive_id].samples[i][2]) ]); } if (items[dive_id].samples[i][3] != 0) { - d4.push([ + temperatureData.push([ items[dive_id].samples[i][0] / 60, mkelvin_to_C(items[dive_id].samples[i][3]), ]); last = items[dive_id].samples[i][3]; } else { if (last != 0) { - d4.push([ + temperatureData.push([ items[dive_id].samples[i][0] / 60, mkelvin_to_C(last), ]); @@ -820,16 +820,16 @@ function canvas_draw() } } for (var i = 0; i < items[dive_id].events.length; i++) { - d3.push([ + eventsData.push([ items[dive_id].events[i].time / 60, 0, ]); } plot1 = $.jqplot('chart1', [ - d1, - d2, - d3, - d4, + depthData, + pressureData, + eventsData, + temperatureData, ], { grid : { @@ -886,9 +886,9 @@ function canvas_draw() tickRenderer : $.jqplot.CanvasAxisTickRenderer, tickOptions : { showGridline : false, - formatString : '%i min', - angle : -30 - } + formatString : '%i', + }, + label:'Time (min)' }, yaxis : { max : 0, -- cgit v1.2.3-70-g09d2