From 1a129f40dbe31597e694f99f55392ab07fc1490d Mon Sep 17 00:00:00 2001 From: Jason Calabrese Date: Sun, 29 Mar 2015 11:35:11 -0700 Subject: [PATCH 1/4] use selected time format for tooltips and x axises --- static/js/client.js | 63 +++++++++++++++++++++++++++-------------------------- 1 file changed, 32 insertions(+), 31 deletions(-) diff --git a/static/js/client.js b/static/js/client.js index e702aea5c..231705239 100644 --- a/static/js/client.js +++ b/static/js/client.js @@ -15,9 +15,11 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage; , TWENTY_FIVE_MINS_IN_MS = 1500000 , THIRTY_MINS_IN_MS = 1800000 , SIXTY_MINS_IN_MS = 3600000 - , FORMAT_TIME_12 = '%I:%M' + , FORMAT_TIME_12 = '%I:%M %p' + , FORMAT_TIME_12_COMAPCT = '%I:%M' , FORMAT_TIME_24 = '%H:%M%' - , FORMAT_TIME_SCALE = '%I %p' + , FORMAT_TIME_12_SCALE = '%I %p' + , FORMAT_TIME_24_SCALE = '%H' , WIDTH_SMALL_DOTS = 400 , WIDTH_BIG_DOTS = 800 , MINUTE_IN_SECS = 60 @@ -67,8 +69,8 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage; , brushInProgress = false , clip; - function formatTime(time) { - var timeFormat = getTimeFormat(); + function formatTime(time, compact) { + var timeFormat = getTimeFormat(false, compact); time = d3.time.format(timeFormat)(time); if(timeFormat == FORMAT_TIME_12){ time = time.replace(/^0/, '').toLowerCase(); @@ -76,33 +78,21 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage; return time; } - function getTimeFormat(isForScale) { - var timeFormat = FORMAT_TIME_12; - if (browserSettings.timeFormat) { - if (browserSettings.timeFormat == '24') { - timeFormat = FORMAT_TIME_24; - } - } + function isTimeFormat24() { + return browserSettings && browserSettings.timeFormat && parseInt(browserSettings.timeFormat) == 24; + } - if (isForScale && (timeFormat == FORMAT_TIME_12)) { - timeFormat = FORMAT_TIME_SCALE + function getTimeFormat(isForScale, compact) { + var timeFormat = FORMAT_TIME_12; + if (isTimeFormat24) { + timeFormat = isForScale ? FORMAT_TIME_24_SCALE : FORMAT_TIME_24; + } else { + timeFormat = isForScale ? FORMAT_TIME_12_SCALE : (compact ? FORMAT_TIME_12_COMAPCT : FORMAT_TIME_12); } return timeFormat; } - var x2TickFormat = d3.time.format.multi([ - ['.%L', function(d) { return d.getMilliseconds(); }], - [':%S', function(d) { return d.getSeconds(); }], - ['%I:%M', function(d) { return d.getMinutes(); }], - [(getTimeFormat() == FORMAT_TIME_12) ? '%I %p': '%H:%M%', function(d) { return d.getHours(); }], - ['%a %d', function(d) { return d.getDay() && d.getDate() != 1; }], - ['%b %d', function(d) { return d.getDate() != 1; }], - ['%B', function(d) { return d.getMonth(); }], - ['%Y', function() { return true; }] - ]); - - // lixgbg: Convert mg/dL BG value to metric mmol function scaleBg(bg) { if (browserSettings.units == 'mmol') { @@ -188,9 +178,20 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage; yScale2 = d3.scale.log() .domain([scaleBg(36), scaleBg(420)]); + var tickFormat = d3.time.format.multi( [ + ['.%L', function(d) { return d.getMilliseconds(); }], + [':%S', function(d) { return d.getSeconds(); }], + ['%I:%M', function(d) { return d.getMinutes(); }], + [isTimeFormat24() ? '%H:%M' : '%I %p', function(d) { return d.getHours(); }], + ['%a %d', function(d) { return d.getDay() && d.getDate() != 1; }], + ['%b %d', function(d) { return d.getDate() != 1; }], + ['%B', function(d) { return d.getMonth(); }], + ['%Y', function() { return true; }] + ]); + xAxis = d3.svg.axis() .scale(xScale) - .tickFormat(d3.time.format(getTimeFormat(true))) + .tickFormat(tickFormat) .ticks(4) .orient('bottom'); @@ -200,10 +201,10 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage; .tickValues(tickValues) .orient('left'); - xAxis2 = d3.svg.axis() + xAxis2 = d3.svg.axis() .scale(xScale2) - .tickFormat(x2TickFormat) - .ticks(4) + .tickFormat(tickFormat) + .ticks(6) .orient('bottom'); yAxis2 = d3.svg.axis() @@ -464,7 +465,7 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage; updateIOBIndicator(retroTime); $('#currentTime') - .text(formatTime(retroTime)) + .text(formatTime(retroTime, true)) .css('text-decoration','line-through'); updateTimeAgo(); @@ -1389,7 +1390,7 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage; if (inRetroMode()) return; now = Date.now(); var dateTime = new Date(now); - $('#currentTime').text(formatTime(dateTime)).css('text-decoration', ''); + $('#currentTime').text(formatTime(dateTime, true)).css('text-decoration', ''); } function updateTimeAgo() { From a8bdca04b77d8ad2a5204f93b293c2dbe48e1fc2 Mon Sep 17 00:00:00 2001 From: Jason Calabrese Date: Sun, 29 Mar 2015 11:50:40 -0700 Subject: [PATCH 2/4] fixed typos --- static/js/client.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/static/js/client.js b/static/js/client.js index 231705239..2dcb82b79 100644 --- a/static/js/client.js +++ b/static/js/client.js @@ -72,7 +72,7 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage; function formatTime(time, compact) { var timeFormat = getTimeFormat(false, compact); time = d3.time.format(timeFormat)(time); - if(timeFormat == FORMAT_TIME_12){ + if (!isTimeFormat24()) { time = time.replace(/^0/, '').toLowerCase(); } return time; @@ -84,7 +84,7 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage; function getTimeFormat(isForScale, compact) { var timeFormat = FORMAT_TIME_12; - if (isTimeFormat24) { + if (isTimeFormat24()) { timeFormat = isForScale ? FORMAT_TIME_24_SCALE : FORMAT_TIME_24; } else { timeFormat = isForScale ? FORMAT_TIME_12_SCALE : (compact ? FORMAT_TIME_12_COMAPCT : FORMAT_TIME_12); From 291e3470557738bdc2535e790d16cd98ab28a406 Mon Sep 17 00:00:00 2001 From: Jason Calabrese Date: Sun, 29 Mar 2015 14:26:29 -0700 Subject: [PATCH 3/4] remove 0 padding in 12hr format --- static/js/client.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/static/js/client.js b/static/js/client.js index 2dcb82b79..65a445bdc 100644 --- a/static/js/client.js +++ b/static/js/client.js @@ -15,10 +15,10 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage; , TWENTY_FIVE_MINS_IN_MS = 1500000 , THIRTY_MINS_IN_MS = 1800000 , SIXTY_MINS_IN_MS = 3600000 - , FORMAT_TIME_12 = '%I:%M %p' - , FORMAT_TIME_12_COMAPCT = '%I:%M' + , FORMAT_TIME_12 = '%-I:%M %p' + , FORMAT_TIME_12_COMAPCT = '%-I:%M' , FORMAT_TIME_24 = '%H:%M%' - , FORMAT_TIME_12_SCALE = '%I %p' + , FORMAT_TIME_12_SCALE = '%-I %p' , FORMAT_TIME_24_SCALE = '%H' , WIDTH_SMALL_DOTS = 400 , WIDTH_BIG_DOTS = 800 @@ -73,7 +73,7 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage; var timeFormat = getTimeFormat(false, compact); time = d3.time.format(timeFormat)(time); if (!isTimeFormat24()) { - time = time.replace(/^0/, '').toLowerCase(); + time = time.toLowerCase(); } return time; } @@ -182,7 +182,7 @@ var app = {}, browserSettings = {}, browserStorage = $.localStorage; ['.%L', function(d) { return d.getMilliseconds(); }], [':%S', function(d) { return d.getSeconds(); }], ['%I:%M', function(d) { return d.getMinutes(); }], - [isTimeFormat24() ? '%H:%M' : '%I %p', function(d) { return d.getHours(); }], + [isTimeFormat24() ? '%H:%M' : '%-I %p', function(d) { return d.getHours(); }], ['%a %d', function(d) { return d.getDay() && d.getDate() != 1; }], ['%b %d', function(d) { return d.getDate() != 1; }], ['%B', function(d) { return d.getMonth(); }], From dbadddc8d0804eb1672a58222cd1cd5236058d61 Mon Sep 17 00:00:00 2001 From: Jason Calabrese Date: Sun, 29 Mar 2015 14:28:57 -0700 Subject: [PATCH 4/4] adjust size of chart font --- static/css/main.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/static/css/main.css b/static/css/main.css index 775afcc51..e30a555e6 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -358,6 +358,7 @@ div.tooltip { #chartContainer { top: 185px; + font-size: 14px; } #chartContainer svg { height: calc(100vh - 185px); @@ -504,7 +505,7 @@ div.tooltip { @media (max-height: 700px) { #chartContainer { - font-size: 15px; + font-size: 14px; } }