Merge pull request #202 from ebi-uniprot/chart-options-input-field

with dropdown list to multiply chart size

app/directives/chart.html

@@ -12,6 +12,14 @@
         <label>
           <input type="checkbox" ng-model="$parent.showIds"> Show Ids
         </label>
+        <label>Chart size
+          <select
+            ng-options="item as item.name for item in multiplyChartSizeItems"
+            ng-model="multiplyChartSizeSelected"
+            ng-change="multiplyChartSize(multiplyChartSizeSelected)"
+            ng-init="item=multiplyChartSizeItems[0]">
+          </select>
+        </label>
         <label>Term box width
           <input type="number" ng-model="$parent.termBoxWidth">
         </label>

app/directives/chart.js

@@ -12,17 +12,40 @@ angular
       link: function(scope) {
         scope.showKey = true;
         scope.showIds = true;
-        scope.termBoxWidth = 85;
-        scope.termBoxHeight = 55;
-        scope.fontSize = 11;
+        scope.originalTermBoxWidth = 85;
+        scope.originalTermBoxHeight = 55;
+        scope.originalFontSize = 11;
+        scope.termBoxWidth = scope.originalTermBoxWidth;
+        scope.termBoxHeight = scope.originalTermBoxHeight;
+        scope.fontSize = scope.originalFontSize;
         scope.showSlimColours = false;
         scope.showChildren = false;
 
         var that = this;
-        scope.applyOptions = function(){
+
+        scope.applyOptions = function() {
           that.drawChart(scope);
         };
 
+        scope.multiplyChartSizeItems = [
+          { name: "Default - normal", value: 1 },
+          { name: "2X - double", value: 2 },
+          { name: "3X - triple", value: 3 },
+          { name: "4X - quadruple", value: 4 },
+        ];
+
+        scope.multiplyChartSize = function(selectedItem) {
+          var size = selectedItem.value;
+
+          if (!size) {
+            return;
+          }
+
+          scope.termBoxWidth = scope.originalTermBoxWidth * size;
+          scope.termBoxHeight = scope.originalTermBoxHeight * size;
+          scope.fontSize = scope.originalFontSize * size;
+        }
+
         scope.downloadChart = function() {
           if (!scope.termBoxHeight) {
             return;