Fixes for language and scaling

2025-12-09 22:55:35 +00:00 · 2015-09-01 02:20:05 -07:00
parent bf217e7fdd
commit 65f53a3fa4
19 changed files with 696 additions and 568 deletions
--- a/app/js/directives/directive-bar-chart.js
+++ b/app/js/directives/directive-bar-chart.js
@@ -28,7 +28,7 @@ angular.module('app').directive('barChart', ['$window', '$translate', '$rootScop
          fmt = null,
          unit = null,
          properties = scope.facet.props,
-          margin = { top: 10, right: 20, bottom: 35, left: 150 },
+          margin = { top: 10, right: 20, bottom: 40, left: 150 },
          y0 = d3.scale.ordinal(),
          y1 = d3.scale.ordinal(),
          x = d3.scale.linear(),
@@ -55,18 +55,12 @@ angular.module('app').directive('barChart', ['$window', '$translate', '$rootScop
      var xAxisLbl = vis.append('g')
          .attr('class', 'x axis cap')
        .append('text')
-          .attr('y', 30)
+          .attr('y', 33)
          .attr('dy', '.1em')
          .style('text-anchor', 'middle');

      updateFormats();

-      /**
-       * Watch for changes in the comparison array (ships added/removed, sorting)
-       */
-      scope.$watchCollection('data', render);
-      angular.element($window).bind('orientationchange resize render', render);
-
      function render() {
        var data = scope.data,
            width = element[0].offsetWidth,
@@ -125,8 +119,9 @@ angular.module('app').directive('barChart', ['$window', '$translate', '$rootScop
        render();
      }

+      angular.element($window).bind('orientationchange resize render', render);
+      scope.$watchCollection('data', render); // Watch for changes in the comparison array
      scope.$on('languageChanged', updateFormats);
-
      scope.$on('$destroy', function() {
        angular.element($window).unbind('orientationchange resize render', render);
        tip.destroy(); // Remove the tooltip from the DOM
--- a/app/js/directives/directive-header.js
+++ b/app/js/directives/directive-header.js
@@ -82,10 +82,19 @@ angular.module('app').directive('shipyardHeader', ['lodash', '$window', '$rootSc
      });

      scope.textSizeChange = function(size) {
-        $rootScope.sizeRatio = size;
-        document.getElementById('main').style.fontSize = size + 'em';
-        Persist.setSizeRatio(size);
-        win.triggerHandler('resize');
+        if (size != $rootScope.sizeRatio) {
+          $rootScope.sizeRatio = size;
+          document.getElementById('main').style.fontSize = size + 'em';
+          Persist.setSizeRatio(size);
+          win.triggerHandler('resize');
+        }
+      };
+
+      scope.resetTextSize = function() {
+        if ($rootScope.sizeRatio != 1) {
+          scope.textSizeChange(1);
+          scope.$broadcast('reset');
+        }
      };

      scope.$watchCollection('allBuilds', function() {
--- a/app/js/directives/directive-line-chart.js
+++ b/app/js/directives/directive-line-chart.js
@@ -75,12 +75,6 @@ angular.module('app').directive('lineChart', ['$window', '$translate', '$rootSco

      updateFormats();

-      /**
-       * Watch for changes in the series data (mass changes, etc)
-       */
-      scope.$watchCollection('series', render);
-      angular.element($window).bind('orientationchange resize render', render);
-
      function render() {
        var width = element[0].parentElement.offsetWidth,
            height = width * 0.5 * $rootScope.sizeRatio,
@@ -193,8 +187,9 @@ angular.module('app').directive('lineChart', ['$window', '$translate', '$rootSco
        render();
      }

+      angular.element($window).bind('orientationchange resize render', render);
+      scope.$watchCollection('series', render);   // Watch for changes in the series data
      scope.$on('languageChanged', updateFormats);
-
      scope.$on('$destroy', function() {
        angular.element($window).unbind('orientationchange resize render', render);
      });
--- a/app/js/directives/directive-power-bands.js
+++ b/app/js/directives/directive-power-bands.js
@@ -16,10 +16,10 @@ angular.module('app').directive('powerBands', ['$window', '$translate', '$rootSc
          depBandsSelected = false,
          wattScale = d3.scale.linear(),
          pctScale = d3.scale.linear().domain([0, 1]),
-          wattFmt = d3.format('.2f'),
-          pctFmt = d3.format('.1%'),
-          wattAxis = d3.svg.axis().scale(wattScale).outerTickSize(0).orient('top').tickFormat(d3.format('.2r')),
-          pctAxis = d3.svg.axis().scale(pctScale).outerTickSize(0).orient('bottom').tickFormat(d3.format('%')),
+          wattFmt,
+          pctFmt,
+          wattAxis = d3.svg.axis().scale(wattScale).outerTickSize(0).orient('top'),
+          pctAxis = d3.svg.axis().scale(pctScale).outerTickSize(0).orient('bottom'),
          // Create chart
          svg = d3.select(element[0]).append('svg'),
          vis = svg.append('g'),
@@ -40,20 +40,14 @@ angular.module('app').directive('powerBands', ['$window', '$translate', '$rootSc
      // Create Y Axis SVG Elements
      vis.append('g').attr('class', 'watt axis');
      vis.append('g').attr('class', 'pct axis');
+      var retText = vis.append('text').attr('x', -3).style('text-anchor', 'end').attr('dy', '0.5em').attr('class', 'primary upp');
+      var depText = vis.append('text').attr('x', -3).style('text-anchor', 'end').attr('dy', '0.5em').attr('class', 'primary upp');
+      var retLbl = vis.append('text').attr('dy', '0.5em');
+      var depLbl = vis.append('text').attr('dy', '0.5em');

-      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);
-      var depVal = vis.append('text').attr('y', barHeight + 18);
+      updateFormats(true);

-      // Watch for changes to data and events
-      scope.$watchCollection('available', dataChange);
-      angular.element($window).bind('pwrchange', dataChange);
-      angular.element($window).bind('orientationchange resize', render);
-
-      updateFormats();
-
-      function render() {
+      function dataChange() {
        bands = scope.bands;
        available = scope.available;
        maxBand = bands[bands.length - 1];
@@ -82,7 +76,7 @@ angular.module('app').directive('powerBands', ['$window', '$translate', '$rootSc
            mTop = Math.round(25 * size),
            mRight = Math.round(130 * size),
            mBottom = Math.round(25 * size),
-            mLeft = Math.round(40 * size),
+            mLeft = Math.round(45 * size),
            barHeight = Math.round(20 * size),
            width = element[0].offsetWidth,
            innerHeight = (barHeight * 2) + 2,
@@ -107,19 +101,10 @@ angular.module('app').directive('powerBands', ['$window', '$translate', '$rootSc
        vis.selectAll('.watt.axis').call(wattAxis);
        vis.selectAll('.pct.axis').attr('transform', 'translate(0,' + innerHeight + ')').call(pctAxis);

-        for (var b = 0, l = bands.length; b < l; b++) {
-          if (bands[b].retSelected) {
-            retractedSum += bands[b].retracted + bands[b].retOnly;
-            retBandsSelected = true;
-          }
-          if (bands[b].depSelected) {
-            deployedSum += bands[b].deployed + bands[b].retracted;
-            depBandsSelected = true;
-          }
-        }
-
-        updateLabel(retVal, w, retBandsSelected, retBandsSelected ? retractedSum : maxBand.retractedSum, available);
-        updateLabel(depVal, w, depBandsSelected, depBandsSelected ? deployedSum : maxBand.deployedSum, available);
+        retText.attr('y', repY);
+        depText.attr('y', depY);
+        updateLabel(retLbl, w, repY, retBandsSelected, retBandsSelected ? retractedSum : maxBand.retractedSum, available);
+        updateLabel(depLbl, w, depY, depBandsSelected, depBandsSelected ? deployedSum : maxBand.deployedSum, available);

        retracted.selectAll('rect').data(bands).enter().append('rect')
          .attr('height', barHeight)
@@ -166,7 +151,6 @@ angular.module('app').directive('powerBands', ['$window', '$translate', '$rootSc
            dataChange();
          })
          .text(function(d, i) { return bandText(d.deployed + d.retracted, i); });
-
      }

      function updateLabel(lbl, width, y, selected, sum, avail) {
@@ -188,18 +172,23 @@ angular.module('app').directive('powerBands', ['$window', '$translate', '$rootSc
        return '';
      }

-      function updateFormats() {
-        retLbl.text($translate.instant('ret'));
-        depLbl.text($translate.instant('dep'));
+      function updateFormats(preventRender) {
+        retText.text($translate.instant('ret'));
+        depText.text($translate.instant('dep'));
        wattFmt = $rootScope.localeFormat.numberFormat('.2f');
        pctFmt = $rootScope.localeFormat.numberFormat('.1%');
        wattAxis.tickFormat($rootScope.localeFormat.numberFormat('.2r'));
        pctAxis.tickFormat($rootScope.localeFormat.numberFormat('%'));
-        render();
+        if (!preventRender) {
+          render();
+        }
      }

+      // Watch for changes to data and events
+      angular.element($window).bind('pwrchange', dataChange);
+      angular.element($window).bind('orientationchange resize', render);
+      scope.$watchCollection('available', dataChange);
      scope.$on('languageChanged', updateFormats);
-
      scope.$on('$destroy', function() {
        angular.element($window).unbind('orientationchange resize pwrchange', render);
      });
--- a/app/js/directives/directive-slider.js
+++ b/app/js/directives/directive-slider.js
@@ -7,7 +7,8 @@ angular.module('app').directive('slider', ['$window', function($window) {
      def: '=',
      max: '=',
      unit: '=',
-      change: '&onChange'
+      change: '&onChange',
+      ignoreResize: '='
    },
    link: function(scope, element) {
      var unit = scope.unit,
@@ -16,7 +17,8 @@ angular.module('app').directive('slider', ['$window', function($window) {
          h = height - margin.top,
          fmt = d3.format('.2f'),
          pct = d3.format('.1%'),
-          val = scope.def !== undefined ? scope.def : scope.max,
+          def = scope.def !== undefined ? scope.def : scope.max,
+          val = def,
          svg = d3.select(element[0]).append('svg'),
          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 + ')'),
@@ -32,16 +34,6 @@ angular.module('app').directive('slider', ['$window', function($window) {
      slider.select('.background').attr('height', h);
      handle.attr('transform', 'translate(0,' + h / 2 + ')');

-      /**
-       * Watch for changes in the max, window size
-       */
-      scope.$watch('max', function(newMax, oldMax) {
-        val = newMax * (val / oldMax); // Retain percentage filled
-        render();
-      });
-
-      //angular.element($window).bind('orientationchange resize', render);
-
      function render() {
        var width = element[0].offsetWidth, w = width - margin.left - margin.right;
        svg.attr('width', width).attr('height', height);
@@ -51,16 +43,18 @@ angular.module('app').directive('slider', ['$window', function($window) {
          xAxisContainer.call(xAxis.tickValues([0, scope.max / 4, scope.max / 2, (3 * scope.max) / 4, scope.max]));
          lbl.attr('x', w + 20);
        }
-        slider.call(brush.extent([val, val])).call(brush.event);
+        slider.call(brush.extent([val, val]));
+        drawBrush();
        slider.selectAll('.extent,.resize').remove();
      }

      function brushed() {
-        val = brush.extent()[0];
-        if (d3.event.sourceEvent) { // not a programmatic event
-          val = x.invert(d3.mouse(this)[0]);
-          brush.extent([val, val]);
-        }
+        val = x.invert(d3.mouse(this)[0]);
+        brush.extent([val, val]);
+        drawBrush();
+      }
+
+      function drawBrush() {
        if (unit) {
          lbl.text(fmt(val) + ' ' + unit + ' ' + pct(val / scope.max));
        }
@@ -69,6 +63,23 @@ angular.module('app').directive('slider', ['$window', function($window) {
        filled.attr('d', 'M0,0V0H' + x(val) + 'V0');
      }

+      /**
+       * Watch for changes in the max, window size
+       */
+      scope.$watch('max', function(newMax, oldMax) {
+        val = newMax * (val / oldMax); // Retain percentage filled
+        render();
+      });
+
+      if (!scope.ignoreResize) {
+        angular.element($window).bind('orientationchange resize', render);
+      }
+
+      scope.$on('reset', function() {
+        val = def;
+        render();
+      });
+
      scope.$on('$destroy', function() {
        angular.element($window).unbind('orientationchange resize render', render);
      });