diff --git a/spec/arc-spec.js b/spec/arc-spec.js index 517bf64..b828368 100644 --- a/spec/arc-spec.js +++ b/spec/arc-spec.js @@ -97,4 +97,62 @@ describe('c3 chart arc', function () { }); + describe('show gauge', function () { + + it('should update args to have a 180 degree gauge', function () { + args = { + gauge: { + width: 10, + max: 10, + expand: true + }, + data: { + columns: [ + ['data', 8] + ], + type: 'gauge' + } + }; + expect(true).toBeTruthy(); + }); + + it('should have correct d for Pi radian gauge', function () { + var chartArc = d3.select('.c3-chart-arcs'), + data = chartArc.select('.c3-chart-arc.c3-target.c3-target-data') + .select('g.c3-shapes.c3-shapes-data.c3-arcs.c3-arcs-data') + .select('path.c3-shape.c3-shape.c3-arc.c3-arc-data'); + + expect(data.attr('d')).toMatch('M-304,-3.7229262694079536e-14A304,304 0 0,1 245.94116628998404,-178.68671669691184L237.85099634623455,-172.8088641739871A294,294 0 0,0 -294,-3.6004615894932184e-14Z'); + }); + + it('should update args to have a 2 Pi radian gauge that starts at Pi/2', function() { + args = { + gauge: { + width: 10, + max: 10, + expand: true, + fullCircle: true + }, + data: { + columns: [ + ['data', 8] + ], + type: 'gauge', + fullCircle: true, + startingAngle: Math.PI/2 + } + }; + expect(true).toBeTruthy(); + }); + + it('should have correct d for 2 Pi radian gauge starting at Pi/2', function() { + var chartArc = d3.select('.c3-chart-arcs'), + data = chartArc.select('.c3-chart-arc.c3-target.c3-target-data') + .select('g.c3-shapes.c3-shapes-data.c3-arcs.c3-arcs-data') + .select('path.c3-shape.c3-shape.c3-arc.c3-arc-data'); + + expect(data.attr('d')).toMatch('M-304,-3.7229262694079536e-14A304,304 0 0,1 245.94116628998404,-178.68671669691184L237.85099634623455,-172.8088641739871A294,294 0 0,0 -294,-3.6004615894932184e-14Z'); + }); + }); + }); diff --git a/src/arc.js b/src/arc.js index df2f995..748291e 100644 --- a/src/arc.js +++ b/src/arc.js @@ -50,9 +50,9 @@ c3_chart_internal_fn.updateAngle = function (d) { if ($$.isGaugeType(d.data)) { gMin = config.gauge_min; gMax = config.gauge_max; - gTic = (Math.PI) / (gMax - gMin); + gTic = (Math.PI * (config.gauge_fullCircle ? 2 : 1)) / (gMax - gMin); gValue = d.value < gMin ? 0 : d.value < gMax ? d.value - gMin : (gMax - gMin); - d.startAngle = -1 * (Math.PI / 2); + d.startAngle = config.gauge_startingAngle; d.endAngle = d.startAngle + gTic * gValue; } return found ? d : null; @@ -103,7 +103,8 @@ c3_chart_internal_fn.transformForArcLabel = function (d) { c3_chart_internal_fn.getArcRatio = function (d) { var $$ = this, - whole = $$.hasType('gauge') ? Math.PI : (Math.PI * 2); + config = $$.config, + whole = Math.PI * ($$.hasType('gauge') && !config.gauge_fullCircle ? 1 : 2); return d ? (d.endAngle - d.startAngle) / whole : null; }; @@ -278,7 +279,7 @@ c3_chart_internal_fn.redrawArc = function (duration, durationForExit, withTransf .style("opacity", 0) .each(function (d) { if ($$.isGaugeType(d.data)) { - d.startAngle = d.endAngle = -1 * (Math.PI / 2); + d.startAngle = d.endAngle = config.gauge_startingAngle; } this._current = d; }); @@ -388,8 +389,8 @@ c3_chart_internal_fn.redrawArc = function (duration, durationForExit, withTransf .attr("d", function () { var d = { data: [{value: config.gauge_max}], - startAngle: -1 * (Math.PI / 2), - endAngle: Math.PI / 2 + startAngle: config.gauge_startingAngle, + endAngle: -1 * config.gauge_startingAngle }; return $$.getArc(d, true, true); }); @@ -397,11 +398,11 @@ c3_chart_internal_fn.redrawArc = function (duration, durationForExit, withTransf .attr("dy", ".75em") .text(config.gauge_label_show ? config.gauge_units : ''); $$.arcs.select('.' + CLASS.chartArcsGaugeMin) - .attr("dx", -1 * ($$.innerRadius + (($$.radius - $$.innerRadius) / 2)) + "px") + .attr("dx", -1 * ($$.innerRadius + (($$.radius - $$.innerRadius) / (config.gauge_fullCircle ? 1 : 2))) + "px") .attr("dy", "1.2em") .text(config.gauge_label_show ? config.gauge_min : ''); $$.arcs.select('.' + CLASS.chartArcsGaugeMax) - .attr("dx", $$.innerRadius + (($$.radius - $$.innerRadius) / 2) + "px") + .attr("dx", $$.innerRadius + (($$.radius - $$.innerRadius) / (config.gauge_fullCircle ? 1 : 2)) + "px") .attr("dy", "1.2em") .text(config.gauge_label_show ? config.gauge_max : ''); } diff --git a/src/config.js b/src/config.js index ae9aa9f..b5740bc 100644 --- a/src/config.js +++ b/src/config.js @@ -173,10 +173,12 @@ c3_chart_internal_fn.getDefaultConfig = function () { pie_expand: {}, pie_expand_duration: 50, // gauge + gauge_fullCircle: false, gauge_label_show: true, gauge_label_format: undefined, gauge_min: 0, gauge_max: 100, + gauge_startingAngle: -1 * Math.PI/2, gauge_units: undefined, gauge_width: undefined, gauge_expand: {}, diff --git a/src/core.js b/src/core.js index 4dad60d..e97ea76 100644 --- a/src/core.js +++ b/src/core.js @@ -419,7 +419,7 @@ c3_chart_internal_fn.updateSizes = function () { // for arc $$.arcWidth = $$.width - ($$.isLegendRight ? legendWidth + 10 : 0); $$.arcHeight = $$.height - ($$.isLegendRight ? 0 : 10); - if ($$.hasType('gauge')) { + if ($$.hasType('gauge') && !config.gauge_fullCircle) { $$.arcHeight += $$.height - $$.getGaugeLabelHeight(); } if ($$.updateRadius) { $$.updateRadius(); } diff --git a/src/size.js b/src/size.js index fb05a79..b4c0aaa 100644 --- a/src/size.js +++ b/src/size.js @@ -5,7 +5,7 @@ c3_chart_internal_fn.getCurrentWidth = function () { c3_chart_internal_fn.getCurrentHeight = function () { var $$ = this, config = $$.config, h = config.size_height ? config.size_height : $$.getParentHeight(); - return h > 0 ? h : 320 / ($$.hasType('gauge') ? 2 : 1); + return h > 0 ? h : 320 / ($$.hasType('gauge') && !config.gauge_fullCircle ? 2 : 1); }; c3_chart_internal_fn.getCurrentPaddingTop = function () { var $$ = this,