Issue Mikhus#117: fix auto-width calculations for value box drawings

MeetmeLeave · Mar 11, 2017 · 7d7b197 · 7d7b197
1 parent b49c253
commit 7d7b197
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 5 deletions.
diff --git a/examples/custom-002.html b/examples/custom-002.html
@@ -35,12 +35,15 @@
         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,
 

diff --git a/examples/custom-003.html b/examples/custom-003.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <title>Gauge Test</title>
+    <style>body {
+        padding: 0;
+        margin: 0;
+        background: #fff
+    }</style>
+</head>
+<body>
+
+<button onclick="animateGauges()">Animate</button>
+
+<hr>
+
+<canvas data-type="radial-gauge"
+        data-major-ticks="950, 960, 970, 980, 990, 1000, 1010, 1020, 1030, 1040, 1050"
+        data-type="radial-gauge"
+        data-title="Barometer"
+        data-units="mBar"
+        data-width="200"
+        data-height="200"
+        data-value-int="0"
+        data-value-dec="0"
+        data-width="200"
+        data-height="200"
+        data-value-int="0"
+        data-value-dec="0"
+        data-min-value="950"
+        data-max-value="1050"
+        data-highlights="false"
+></canvas>
+
+<script async src="../gauge.min.js"></script>
+<script>
+    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));
+        });
+    }
+</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/drawings.js b/lib/drawings.js
@@ -347,6 +347,12 @@ export function drawValueBox(context, options, value, x, y, max) {
 
     reset(context);
 
+    let addLength = (options.valueDec ? 1 + options.valueDec : 0);
+    let maxValueWidth = '9'.repeat(Math.max.apply(null,
+        [String(parseInt(value)).length + addLength]
+        .concat(options.majorTicks.map(val =>
+            String(parseInt(val, 10)).length + addLength
+        ))));
     let text = options.valueText || padValue(value, options);
     let tunit = max / 200;
     let runit = max / 100;
@@ -357,7 +363,7 @@ export function drawValueBox(context, options, value, x, y, max) {
     drawValueTextShadow(context, options, offset, blur);
 
     let tw = context.measureText(options.valueText ?
-        text : ('-' + padValue(0, options))).width;
+        text : ('-' + padValue(Number(maxValueWidth), options))).width;
 
     reset(context);