Merge branch 'hotfix/0.9.3'

.travis.yml

@@ -60,6 +60,8 @@ script:
   - $TRAVIS_BUILD_DIR/tests/integration-environment/restart.sh
   - mocha-casperjs --grep=Answers2
   - $TRAVIS_BUILD_DIR/tests/integration-environment/restart.sh
+  - mocha-casperjs --grep=Diagrams
+  - $TRAVIS_BUILD_DIR/tests/integration-environment/restart.sh
   - mocha-casperjs --grep=Multiple
   - $TRAVIS_BUILD_DIR/tests/integration-environment/restart.sh
   - mocha-casperjs --grep=Page

CHANGELOG.md

@@ -2,6 +2,13 @@
 ## Changelog ##
 
 
+### 0.9.3 ###
+
+Improve scales' chart
+
+* Use ratio (percents) when scales lengths differs
+* Rotate text labels to 45 degrees when we have too many scales
+
 ### 0.9.2 ###
 
 Fix scale`s max calc when in question we have few answers with scores
@@ -96,7 +103,7 @@ Individual answers
 * Update locales for main languages
 * Migrate existing tests on new questions-answers model
 * Allow to individualize answers: custom global answer title for question
-* Use "Test Categories" in admin menu to differ with post categories 
+* Use "Test Categories" in admin menu to differ with post categories
 
 
 ### 0.5.4 ###
@@ -155,7 +162,7 @@ Display tests in blog everywhere same as posts
 * Allow to hide individual tests from homepage by "Publish on the home page" setting at publish box
 * Fix quickedit for posts
 * Fix quickedit for tests by saving test part only in full edit mode
-* Minimize possibility of "Max post vars" warning by minizing the number of hidden inputs 
+* Minimize possibility of "Max post vars" warning by minizing the number of hidden inputs
 
 ### 0.3 ###
 Test plugin functionality in 37 combinations of WP and PHP and fix found problems

README.md

@@ -5,7 +5,7 @@
 **Tags:** psychological, testing, test, quiz  
 **Requires at least:** 3.2  
 **Tested up to:** 4.1.1  
-**Stable tag:** 0.9.2  
+**Stable tag:** 0.9.3  
 **License:** GPLv3  
 **License URI:** http://www.gnu.org/licenses/gpl-3.0.html  
 
@@ -84,5 +84,6 @@ PS: **If something broken or doesn't work**, pls create new topic in ["Support"
 14. Scale description with "more..." text closed
 15. Scale description with "more..." text opened (after clicking on "more" link)
 16. A test without scores is shown like a "Test is under construction". Answers titles are those that was entered
-17. Test results with scales chart when scales are hidden. Hovered scale shows it`s value and title in dynamic tag
-18. Multiple answers per question are also possible
+17. Test results with scales chart. Hovered scale shows it`s value and title in dynamic tag
+18. In case of too many scales their labels are rotated. Also when scales has different length (possible max total) they are shown as percents
+19. Multiple answers per question are also possible

js/line-diagram.js

@@ -1,13 +1,13 @@
 function WptLineDiagramOptions() {
     return this
         .setGoldenSizeRatio()
-        .setGutter(30)
-        .setDash('-')
+        .setGutter(32)
+        .setDash('.')
         .setLineColor('#888')
         .showAxis('left')
         .showAxis('bottom')
         .setAxisColor('#999')
-        .setAxisTextColor('#999')
+        .setAxisTextColor('#000')
         .setIsSmooth(true)
         .setSymbolColorOpacity(0.8)
         .setAnnotationRadius(6)
@@ -63,11 +63,13 @@ WptLineDiagramOptions.prototype.setLineColor = function(value) {
 
 WptLineDiagramOptions.prototype.axis = '0 0 0 0';
 WptLineDiagramOptions.prototype.textAxisIndex = null;
+WptLineDiagramOptions.prototype.valueAxisIndex = null;
 /**
  * @returns {WptLineDiagramOptions}
  */
 WptLineDiagramOptions.prototype.hideAxises = function() {
     this.textAxisIndex = null;
+    this.valueAxisIndex = null;
     this.axis = '0 0 0 0';
     return this;
 };
@@ -103,12 +105,32 @@ WptLineDiagramOptions.prototype.showAxis = function(name) {
         axisesIndex++;
         if (0 == i || 2 == i) {
             this.textAxisIndex = axisesIndex;
+        } else {
+            this.valueAxisIndex = axisesIndex;
         }
     }
 
     return this;
 };
 
+WptLineDiagramOptions.prototype.textAxisAngle = 0;
+/**
+ * @returns {WptLineDiagramOptions}
+ */
+WptLineDiagramOptions.prototype.setTextAxisAngle = function(value) {
+    this.textAxisAngle = value;
+    return this;
+};
+
+WptLineDiagramOptions.prototype.valueAxisTemplate = null;
+/**
+ * @returns {WptLineDiagramOptions}
+ */
+WptLineDiagramOptions.prototype.setValueAxisTemplate = function(value) {
+    this.valueAxisTemplate = value;
+    return this;
+};
+
 WptLineDiagramOptions.prototype.isSmooth = false;
 /**
  * @returns {WptLineDiagramOptions}
@@ -180,6 +202,7 @@ function WptLineDiagram(wrapper, holder, data, $, options) {
         .setupData(data)
         .createDiagram(holder, $)
         .addTextLabels()
+        .addValueLabels()
     ;
 };
 
@@ -253,16 +276,22 @@ WptLineDiagram.prototype.setupData = function(data) {
 WptLineDiagram.prototype.createDiagram = function(holder, $) {
     var me = this;
 
-    this.diagram = this.paper.linechart(
+    var axisYStep = this.dataMaximum - this.dataMinimum;
+    while (axisYStep > 20) {
+        axisYStep = Math.round(axisYStep / 10);
+    }
+
+    this.diagram  = this.paper.linechart(
         0, 0, $(holder).width(), $(holder).height(),
         [this.dataX, [0, 0]], [this.dataY, [this.dataMinimum, this.dataMaximum]],
         {
             gutter      : this.options.gutter,
             dash        : this.options.dash,
             colors      : [this.options.lineColor],
             symbol      : 'circle',
+            shade       : true,
             axisxstep   : this.dataX.length - 1,
-            axisystep   : this.dataMaximum - this.dataMinimum,
+            axisystep   : axisYStep,
             axis        : this.options.axis,
             smooth      : this.options.isSmooth
         }
@@ -277,11 +306,12 @@ WptLineDiagram.prototype.createDiagram = function(holder, $) {
     });
 
     // Show annotations
+    var valueTemplate = this.options.valueAxisTemplate;
     this.diagram.hoverColumn(function () {
         if ('' == me.data[this.axis].title) {
             return;
         }
-        var text  = me.data[this.axis].title + '\n' + this.values[0],
+        var text  = me.data[this.axis].title + '\n' + me.data[this.axis].valueTitle,
             angle = me.data[this.axis].angle;
         this.tags = me.paper.set();
         this.tags.push(
@@ -309,11 +339,22 @@ WptLineDiagram.prototype.addTextLabels = function() {
 
     var data  = this.data,
         axis  = this.diagram.axis[this.options.textAxisIndex],
+        angle = -this.options.textAxisAngle,
         texts = axis.text,
-        lastIndex = texts.length - 1,
-        maxWidth  = axis.paper.width/texts.length;
+        lastIndex  = texts.length - 1,
+        maxWidth   = axis.paper.width/lastIndex,
+        moveWidth  = Math.round(maxWidth * -0.05),
+        moveHeight = Math.round(this.options.gutter / 3);
 
     texts.forEach(function(text, index) {
+        if (angle != 0) {
+            text
+                .attr('text-anchor', 'start')
+                .transform('t' + moveWidth + ',' + moveHeight + 'r' + angle)
+                .attr('text', data[index].title)
+            ;
+            return;
+        }
         var align   = 'middle',
             divisor = 1;
 
@@ -353,6 +394,21 @@ WptLineDiagram.prototype.addTextLabels = function() {
     return this;
 };
 
+WptLineDiagram.prototype.addValueLabels = function() {
+    if (null === this.options.valueAxisIndex || null === this.options.valueAxisTemplate) {
+        return this;
+    }
+
+    var data  = this.data,
+        axis  = this.diagram.axis[this.options.valueAxisIndex];
+
+    axis.text.forEach(function(text, index) {
+        text.attr('text', this.options.valueAxisTemplate.replace('{value}', text.attr('text')));
+    }, this);
+
+    return this;
+};
+
 WptLineDiagram.prototype.calculateHeight = function(width) {
     return Math.round( width / this.options.sizeRatio);
 };

js/test-pass-get-results.js

@@ -14,6 +14,33 @@ jQuery(document).ready(function($) {
         return;
     }
 
+    var options  = new WptLineDiagramOptions(),
+        scales   = [],
+        maximums = [];
+    $.each(Wpt.scales, function(i, scale) {
+        maximums.push(scale.maximum);
+        scale.valueTitle = scale.outOf;
+        scales.push(scale);
+    });
+    maximums.sort();
+
+    var isScalesLengthSame = (maximums[0] == maximums[maximums.length - 1]),
+        isSwitchToPercents = !isScalesLengthSame;
+    if (isSwitchToPercents) {
+        $.each(scales, function(i, scale) {
+            var newValue  = Math.round(scale.ratio * 100);
+            scale.valueTitle = newValue + '%\n' + scale.outOf;
+            scale.value   = newValue;
+            scale.minimum = 0;
+            scale.maximum = 100;
+        });
+        options.setValueAxisTemplate('{value}%');
+    }
+
+    if (scales.length > 5) {
+        options.setTextAxisAngle(45);
+    }
+
     var holder  = $('<div/>').appendTo(wrapper).attr('id', 'holder-' + Raphael.createUUID()),
-        diagram = new WptLineDiagram(wrapper[0], holder[0], Wpt.scales, $);
+        diagram = new WptLineDiagram(wrapper[0], holder[0], scales, $, options);
 });

src/Model/Scale.php

@@ -75,6 +75,15 @@ public function getMaximum()
         return $this->maximum;
     }
 
+    /**
+     * Get scale value in "x out of Y" format
+     * @return string
+     */
+    public function formatValueAsOutOf()
+    {
+        return sprintf(__('%1$d out of %2$d', 'wp-testing'), $this->getValue(), $this->getMaximum());
+    }
+
     /**
      * @return number
      */
@@ -120,6 +129,8 @@ public function jsonSerialize() {
         return array(
             'title'   => $this->getTitle(),
             'value'   => $this->getValue(),
+            'outOf'   => $this->formatValueAsOutOf(),
+            'ratio'   => $this->getValueAsRatio(),
             'minimum' => $this->minimum,
             'maximum' => $this->getMaximum(),
         );

src/Template/Test/Passer/get-results.php

@@ -39,7 +39,7 @@
         <h3 class="<?php echo $scale->getCssClass($i) ?> title"><?php echo $scale->getTitle() ?></h4>
 
         <div class="<?php echo $scale->getCssClass($i) ?> scores">
-            <?php echo sprintf(__('%1$d out of %2$d', 'wp-testing'), $scale->getValue(), $scale->getMaximum()) ?>
+            <?php echo $scale->formatValueAsOutOf() ?>
         </div>
         <div class="<?php echo $scale->getCssClass($i) ?> meter">
             <span style="width: <?php echo $scale->getValueAsRatio()*100 ?>%"></span>