diff --git a/htdocs/samples/chart_gauge.html b/htdocs/samples/chart_gauge.html index a650135..2cf7d8d 100644 --- 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 index f363693..242a8fe 100644 --- 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 index 5abcdde..b94baab 100644 --- 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 index aa6e57a..c127be5 100644 --- 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: {},