From ab182281316b819f34c08a33a10cd3c8d52aa303 Mon Sep 17 00:00:00 2001 From: Colin McLeod Date: Sun, 26 Jul 2015 22:38:01 -0700 Subject: [PATCH] Further improvement to size ratio --- app/js/app.js | 2 +- app/js/directives/directive-bar-chart.js | 4 ++-- app/js/directives/directive-header.js | 3 ++- app/js/directives/directive-line-chart.js | 4 ++-- app/js/directives/directive-power-bands.js | 18 ++++++--------- app/js/directives/directive-slider.js | 2 +- app/js/service-persist.js | 26 +++++++++++++++++++++- app/views/_header.html | 7 ++++-- 8 files changed, 45 insertions(+), 21 deletions(-) diff --git a/app/js/app.js b/app/js/app.js index 1ba7ae8b..1dfcd0e7 100755 --- a/app/js/app.js +++ b/app/js/app.js @@ -51,7 +51,7 @@ function($rootScope, $location, $window, $doc, $state, $translate, localeFormat, $rootScope.discounts = { opts: Discounts }; $rootScope.STATUS = ['', 'disabled', 'off', 'on']; $rootScope.STATUS_CLASS = ['', 'disabled', 'warning', 'secondary-disabled']; - $rootScope.sizeRatio = 1; + $rootScope.sizeRatio = Persist.getSizeRatio(); $rootScope.title = 'Coriolis'; $rootScope.changeLanguage = function() { diff --git a/app/js/directives/directive-bar-chart.js b/app/js/directives/directive-bar-chart.js index 41ea0f7a..02030696 100755 --- a/app/js/directives/directive-bar-chart.js +++ b/app/js/directives/directive-bar-chart.js @@ -11,7 +11,7 @@ angular.module('app').directive('barChart', ['$window', '$translate', '$rootScop for (var i = 0; i < words.length; i++) { var tspan = el.append('tspan').text(words[i]); if (i > 0) { - tspan.attr('x', -9).attr('dy', 12); + tspan.attr('x', -9).attr('dy', '1em'); } } } @@ -71,7 +71,7 @@ angular.module('app').directive('barChart', ['$window', '$translate', '$rootScop var data = scope.data, width = element[0].offsetWidth, w = width - margin.left - margin.right, - height = 45 + (30 * data.length), + height = 45 + (30 * data.length * $rootScope.sizeRatio), h = height - margin.top - margin.bottom, maxVal = d3.max(data, function(d) { return d3.max(properties, function(p) {return d[p]; }); }); diff --git a/app/js/directives/directive-header.js b/app/js/directives/directive-header.js index 152c23a7..2a7e806c 100755 --- a/app/js/directives/directive-header.js +++ b/app/js/directives/directive-header.js @@ -1,4 +1,4 @@ -angular.module('app').directive('shipyardHeader', ['lodash', '$rootScope', '$state', 'Persist', 'Serializer', 'ShipsDB', function(_, $rootScope, $state, Persist, Serializer, ships) { +angular.module('app').directive('shipyardHeader', ['lodash', '$window', '$rootScope', '$state', 'Persist', 'Serializer', 'ShipsDB', function(_, $window, $rootScope, $state, Persist, Serializer, ships) { return { @@ -84,6 +84,7 @@ angular.module('app').directive('shipyardHeader', ['lodash', '$rootScope', '$sta scope.textSizeChange = function(size) { $rootScope.sizeRatio = size; document.getElementById('main').style.fontSize = size + 'em'; + Persist.setSizeRatio(size); win.triggerHandler('resize'); }; diff --git a/app/js/directives/directive-line-chart.js b/app/js/directives/directive-line-chart.js index 2385897a..d52687d3 100644 --- a/app/js/directives/directive-line-chart.js +++ b/app/js/directives/directive-line-chart.js @@ -51,7 +51,7 @@ angular.module('app').directive('lineChart', ['$window', '$translate', '$rootSco .text($translate.instant(labels.xAxis.title) + ' (' + $translate.instant(labels.xAxis.unit) + ')'); // Create and Add tooltip - var tipWidth = (Math.max(labels.yAxis.unit.length, labels.xAxis.unit.length) * 1.25) + 2; + var tipWidth = (Math.max(labels.yAxis.unit.length, labels.xAxis.unit.length) * 1.25) + 2.5; var tips = vis.append('g').style('display', 'none'); var background = vis.append('rect') // Background to capture hover/drag @@ -83,7 +83,7 @@ angular.module('app').directive('lineChart', ['$window', '$translate', '$rootSco function render() { var width = element[0].parentElement.offsetWidth, - height = width * 0.5, + height = width * 0.5 * $rootScope.sizeRatio, xMax = seriesConfig.xMax, xMin = seriesConfig.xMin, yMax = seriesConfig.yMax, diff --git a/app/js/directives/directive-power-bands.js b/app/js/directives/directive-power-bands.js index e466c20f..3982a23c 100644 --- a/app/js/directives/directive-power-bands.js +++ b/app/js/directives/directive-power-bands.js @@ -1,8 +1,4 @@ -<<<<<<< HEAD angular.module('app').directive('powerBands', ['$window', '$translate', '$rootScope', function($window, $translate, $rootScope) { -======= -angular.module('app').directive('powerBands', ['$window', '$rootScope', function($window, $rootScope) { ->>>>>>> Another improvement to font-size adjustments return { restrict: 'A', scope: { @@ -44,6 +40,7 @@ angular.module('app').directive('powerBands', ['$window', '$rootScope', function // Create Y Axis SVG Elements vis.append('g').attr('class', 'watt axis'); vis.append('g').attr('class', 'pct axis'); + var retLbl = vis.append('text').attr('x', -35).attr('y', 16).attr('class', 'primary upp'); var depLbl = vis.append('text').attr('x', -35).attr('y', barHeight + 18).attr('class', 'primary upp'); var retVal = vis.append('text').attr('y', 16); @@ -81,7 +78,7 @@ angular.module('app').directive('powerBands', ['$window', '$rootScope', function } function render() { - var size = $rootScope.sizeRatio; + var size = $rootScope.sizeRatio, mTop = Math.round(25 * size), mRight = Math.round(130 * size), mBottom = Math.round(25 * size), @@ -110,7 +107,6 @@ angular.module('app').directive('powerBands', ['$window', '$rootScope', function vis.selectAll('.watt.axis').call(wattAxis); vis.selectAll('.pct.axis').attr('transform', 'translate(0,' + innerHeight + ')').call(pctAxis); -<<<<<<< HEAD for (var b = 0, l = bands.length; b < l; b++) { if (bands[b].retSelected) { retractedSum += bands[b].retracted + bands[b].retOnly; @@ -173,16 +169,16 @@ angular.module('app').directive('powerBands', ['$window', '$rootScope', function } - function updateLabel(lbl, width, y, selected, sum, available) { + function updateLabel(lbl, width, y, selected, sum, avail) { lbl .attr('x', width + 5 ) .attr('y', y) - .attr('class', getClass(selected, sum, available)) - .text(wattFmt(Math.max(0, sum)) + ' (' + pctFmt(Math.max(0, sum / available)) + ')'); + .attr('class', getClass(selected, sum, avail)) + .text(wattFmt(Math.max(0, sum)) + ' (' + pctFmt(Math.max(0, sum / avail)) + ')'); } - function getClass(selected, sum, available) { - return selected ? 'secondary' : (sum > available) ? 'warning' : 'primary'; + function getClass(selected, sum, avail) { + return selected ? 'secondary' : (sum > avail) ? 'warning' : 'primary'; } function bandText(val, index) { diff --git a/app/js/directives/directive-slider.js b/app/js/directives/directive-slider.js index bc6b8e9f..f6ad4a9a 100644 --- a/app/js/directives/directive-slider.js +++ b/app/js/directives/directive-slider.js @@ -21,7 +21,7 @@ angular.module('app').directive('slider', ['$window', function($window) { vis = svg.append('g').attr('transform', 'translate(' + margin.left + ',' + margin.top + ')'), xAxisContainer = vis.append('g').attr('class', 'x slider-axis').attr('transform', 'translate(0,' + h / 2 + ')'), x = d3.scale.linear(), - xAxis = d3.svg.axis().scale(x).orient('bottom').tickFormat(function(d) { return d + unit; }).tickSize(0).tickPadding(12); + xAxis = d3.svg.axis().scale(x).orient('bottom').tickFormat(function(d) { return d + unit; }).tickSize(0).tickPadding(12), slider = vis.append('g').attr('class', 'slider'), filled = slider.append('path').attr('class', 'filled').attr('transform', 'translate(0,' + h / 2 + ')'), brush = d3.svg.brush().x(x).extent([scope.max, scope.max]).on('brush', brushed), diff --git a/app/js/service-persist.js b/app/js/service-persist.js index 43fb48bf..5c98223c 100755 --- a/app/js/service-persist.js +++ b/app/js/service-persist.js @@ -257,7 +257,7 @@ angular.module('app').service('Persist', ['$window', 'lodash', function($window, /** * Retrieve the last router state from local storage - * @param {object} state State object containing state name and params + * @return {object} state State object containing state name and params */ this.getState = function() { if (this.lsEnabled) { @@ -279,6 +279,30 @@ angular.module('app').service('Persist', ['$window', 'lodash', function($window, } }; + /** + * Retrieve the last router state from local storage + * @return {number} size Ratio + */ + this.getSizeRatio = function() { + if (this.lsEnabled) { + var ratio = localStorage.getItem('sizeRatio'); + if (!isNaN(ratio) && ratio > 0.6) { + return ratio + } + } + return 1; + }; + + /** + * Save the current size ratio to localstorage + * @param {number} sizeRatio + */ + this.setSizeRatio = function(sizeRatio) { + if (this.lsEnabled) { + localStorage.setItem('sizeRatio', sizeRatio); + } + }; + /** * Check if localStorage is enabled/active * @return {Boolean} True if localStorage is enabled diff --git a/app/views/_header.html b/app/views/_header.html index dbaf0c77..819f8719 100755 --- a/app/views/_header.html +++ b/app/views/_header.html @@ -73,11 +73,14 @@
    • - +
    - + + + +
    A AA
    Reset