Merge pull request #1354 from EspadaV8/feature/gauge-min-max-formater

Add a function to allow the min/max values to be formated
c3js · Oct 18, 2016 · 955fdd6 · 955fdd6
2 parents 223404a + 508a797
commit 955fdd6
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 2 deletions.
diff --git a/htdocs/samples/chart_gauge.html b/htdocs/samples/chart_gauge.html
@@ -26,6 +26,9 @@
 //            format: function(value, ratio) {
 //              return value;
 //            },
+//            extents: function (value, isMax) {
+//                return value + '%';
+//            },
 //          show: false // to turn off the min/max labels.
           },
 //          min: 0, // 0 is default, //can handle negative min e.g. vacuum / voltage / current flow / rate of change

diff --git a/spec/arc-spec.js b/spec/arc-spec.js
@@ -154,6 +154,43 @@ describe('c3 chart arc', function () {
             // This test has bee updated to make tests pass. @TODO double-check this test is accurate.
             expect(data.attr('d')).toMatch(/M-221.*?,-2\..+A221.*?,221.*? 0 1,1 -68.*?,210.*?L-65.*?,201.*?A211.*?,211.*? 0 1,0 -211.*?,-2.*?Z/);
         });
+
+        it('should update labels use custom text', function() {
+            args = {
+                gauge: {
+                    width: 10,
+                    max: 100,
+                    expand: true,
+                    label: {
+                        extents: function (value, isMax) {
+                            if (isMax) {
+                                return 'Max: ' + value + '%';
+                            }
+
+                            return 'Min: ' + value + '%';
+                        }
+                    }
+                },
+                data: {
+                    columns: [
+                        ['data', 8]
+                    ],
+                    type: 'gauge',
+                    fullCircle: true,
+                    startingAngle: Math.PI/2
+                }
+            };
+            expect(true).toBeTruthy();
+        });
+
+        it('should show custom min/max guage labels', function () {
+            var chartArc = d3.select('.c3-chart-arcs'),
+                min = chartArc.select('.c3-chart-arcs-gauge-min'),
+                max = chartArc.select('.c3-chart-arcs-gauge-max');
+
+            expect(min.text()).toMatch('Min: 0%');
+            expect(max.text()).toMatch('Max: 100%');
+        });
     });
 
 });
diff --git a/src/arc.js b/src/arc.js
@@ -135,6 +135,13 @@ c3_chart_internal_fn.textForArcLabel = function (d) {
     return format ? format(value, ratio, id) : $$.defaultArcValueFormat(value, ratio);
 };
 
+c3_chart_internal_fn.textForGaugeMinMax = function (value, isMax) {
+    var $$ = this,
+        format = $$.getGaugeLabelExtents();
+
+    return format ? format(value, isMax) : value;
+};
+
 c3_chart_internal_fn.expandArc = function (targetIds) {
     var $$ = this, interval;
 
@@ -234,6 +241,11 @@ c3_chart_internal_fn.getArcLabelFormat = function () {
     return format;
 };
 
+c3_chart_internal_fn.getGaugeLabelExtents = function () {
+    var $$ = this, config = $$.config;
+    return config.gauge_label_extents;
+};
+
 c3_chart_internal_fn.getArcTitle = function () {
     var $$ = this;
     return $$.hasType('donut') ? $$.config.donut_title : "";
@@ -405,11 +417,11 @@ c3_chart_internal_fn.redrawArc = function (duration, durationForExit, withTransf
         $$.arcs.select('.' + CLASS.chartArcsGaugeMin)
             .attr("dx", -1 * ($$.innerRadius + (($$.radius - $$.innerRadius) / (config.gauge_fullCircle ? 1 : 2))) + "px")
             .attr("dy", "1.2em")
-            .text(config.gauge_label_show ? config.gauge_min : '');
+            .text(config.gauge_label_show ? $$.textForGaugeMinMax(config.gauge_min, false) : '');
         $$.arcs.select('.' + CLASS.chartArcsGaugeMax)
             .attr("dx", $$.innerRadius + (($$.radius - $$.innerRadius) / (config.gauge_fullCircle ? 1 : 2)) + "px")
             .attr("dy", "1.2em")
-            .text(config.gauge_label_show ? config.gauge_max : '');
+            .text(config.gauge_label_show ? $$.textForGaugeMinMax(config.gauge_max, true) : '');
     }
 };
 c3_chart_internal_fn.initGauge = function () {

diff --git a/src/config.js b/src/config.js
@@ -184,6 +184,7 @@ c3_chart_internal_fn.getDefaultConfig = function () {
         gauge_min: 0,
         gauge_max: 100,
         gauge_startingAngle: -1 * Math.PI/2,
+        gauge_label_extents: undefined,
         gauge_units: undefined,
         gauge_width: undefined,
         gauge_expand: {},