Added value event

KSVenturesInc · Mar 14, 2017 · 0eefbf1 · 0eefbf1
1 parent 183ea9c
commit 0eefbf1
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 3 deletions.
diff --git a/examples/value-event.html b/examples/value-event.html
@@ -0,0 +1,96 @@
+<!doctype html>
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <title>Gauge Test</title>
+    <link rel="stylesheet" href="../fonts/fonts.css">
+    <script src="../gauge.min.js"></script>
+</head>
+<body style="background: #fff">
+
+<button onclick="animateGauges()">Animate</button>
+
+<canvas id="canvasPressure"></canvas>
+
+<script>
+    var gaugePressure = new RadialGauge({
+        renderTo: 'canvasPressure',
+        width: 300,
+        height: 300,
+        units: "1010 hPa",
+        startAngle: 70,
+        ticksAngle: 220,
+        colorPlate: "#ffffff",
+        colorUnits: "#3CA7DB",
+        colorNumbers: "#3CA7DB",
+        needleType: "arrow",
+        needleStart: 0,
+        needleEnd: 75,
+        needleWidth: 4,
+        needleCircleSize: 10,
+        needleCircleInner: false,
+        needleCircleOuter: true,
+        needleShadow: false,
+        colorNeedle: "#3CA7DB",
+        colorNeedleEnd: "#2698CE",
+        colorNeedleCircleOuter: "#3CA7DB",
+        colorNeedleCircleOuterEnd: "#3CA7DB",
+//        barWidth: 5,
+//        colorBarProgress: '#3CA7DB',
+//        colorBar: '#A8D3D5',
+
+        colorMajorTicks: ["#A8D3D5", "#ffffff", "#ffffff", "#ffffff", "#ffffff",
+            "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#ffffff", "#A8D3D5"],
+        colorMinorTicks: "#ffffff",
+
+        // Вопрос в мин и макс значениях, при этих значениях анимация не работает
+        minValue: 975,
+        maxValue: 1045,
+
+        majorTicks: ["","980","","990","","1000","","1010","","1020","","1030","","1040",""],
+        minorTicks: "10",
+        strokeTicks: true,
+
+        highlights: [
+            {
+                "from": 974.75,
+                "to": 1045.25,
+                "color": "#A8D3D5"
+            }
+        ],
+        //
+        highlightsWidth: 25,
+        numbersMargin: 12,
+        animation: true,
+        animationRule: "linear",
+        valueBox: false,
+        borders: false,
+        borderShadowWidth: 0,
+        value: 1010,
+        animateOnInit: true,
+        animatedValue: true
+
+    }).draw();
+
+    var timers = [];
+
+    function animateGauges() {
+        document.gauges.forEach(function(gauge) {
+            timers.push(setInterval(function() {
+                gauge.value = Math.random() *
+                    (gauge.options.maxValue - gauge.options.minValue) +
+                    gauge.options.minValue;
+            }, gauge.animation.duration + 50));
+        });
+    }
+
+    window.addEventListener('load', function() {
+        document.gauges.forEach(function(gauge) {
+            gauge.on('value', function(value) {
+                gauge.update({ units: parseInt(value, 10) + ' hPa' });
+            });
+        });
+    });
+</script>
+</body>
+</html>
diff --git a/gauge.min.js b/gauge.min.js
diff --git a/gauge.min.js.map b/gauge.min.js.map
diff --git a/lib/BaseGauge.js b/lib/BaseGauge.js
@@ -243,13 +243,19 @@ export default class BaseGauge extends EventEmitter {
             this.emit('animationStart');
 
             this.animation.animate(percent => {
+                let newValue = fromValue + (value - fromValue) * percent;
+
+                this.options.animatedValue &&
+                    this.emit('value', newValue, this.value);
+
                 this.options.value = fromValue + (value - fromValue) * percent;
 
                 this.draw();
 
-                this.emit('animate', percent, this.options.value);
+                this.emit('animate', percent, this.value);
             }, () => {
                 if (this._value !== undefined) {
+                    this.emit('value', this._value, this.value);
                     this.options.value = this._value;
                     delete this._value;
                 }
@@ -260,6 +266,7 @@ export default class BaseGauge extends EventEmitter {
         }
 
         else {
+            this.emit('value', value, this.value);
             this.options.value = value;
             this.draw();
         }