Browse Source

Add spline custom interpolation

With these changes it is possible to set a custom spline interpolation
by giving a valid d3 interpolation to spline.interpolation.type.

Fixes #479
pull/1268/head
Edmundo Alvarez 10 years ago
parent
commit
da9db27200
  1. 47
      spec/shape.line-spec.js
  2. 2
      src/config.js
  3. 3
      src/shape.js
  4. 3
      src/type.js

47
spec/shape.line-spec.js

@ -30,7 +30,7 @@ describe('c3 chart shape line', function () {
}); });
}); });
it('should chnage to step chart', function () { it('should change to step chart', function () {
args.data.type = 'step'; args.data.type = 'step';
expect(true).toBeTruthy(); expect(true).toBeTruthy();
}); });
@ -42,6 +42,15 @@ describe('c3 chart shape line', function () {
}); });
}); });
it('should change to spline chart', function () {
args.data.type = 'spline';
expect(true).toBeTruthy();
});
it('should use cardinal interpolation by default', function () {
expect(chart.internal.config.spline_interpolation_type).toBe('cardinal');
});
}); });
describe('point.show option', function () { describe('point.show option', function () {
@ -96,4 +105,40 @@ describe('c3 chart shape line', function () {
}); });
describe('spline.interpolation option', function () {
it('should update args', function () {
args = {
data: {
columns: [
['data1', 30, 200, 100, 400, -150, 250],
['data2', 50, 20, 10, 40, 15, 25],
['data3', -150, 120, 110, 140, 115, 125]
],
type: 'spline'
},
spline: {
interpolation: {
type: 'monotone'
}
}
};
expect(true).toBeTruthy();
});
it('should update interpolation function', function() {
expect(chart.internal.getInterpolate(chart.data()[0])).toBe('monotone');
});
it('should not use a non-valid interpolation', function () {
args.spline.interpolation.type = 'foo';
expect(true).toBeTruthy();
});
it('should use cardinal interpolation when given option is not valid', function() {
expect(chart.internal.getInterpolate(chart.data()[0])).toBe('cardinal');
});
});
}); });

2
src/config.js

@ -188,6 +188,8 @@ c3_chart_internal_fn.getDefaultConfig = function () {
donut_title: "", donut_title: "",
donut_expand: {}, donut_expand: {},
donut_expand_duration: 50, donut_expand_duration: 50,
// spline
spline_interpolation_type: 'cardinal',
// region - region to change style // region - region to change style
regions: [], regions: [],
// tooltip - show when mouseover on each data // tooltip - show when mouseover on each data

3
src/shape.js

@ -67,5 +67,6 @@ c3_chart_internal_fn.isWithinShape = function (that, d) {
c3_chart_internal_fn.getInterpolate = function (d) { c3_chart_internal_fn.getInterpolate = function (d) {
var $$ = this; var $$ = this;
return $$.isSplineType(d) ? "cardinal" : $$.isStepType(d) ? $$.config.line_step_type : "linear"; var interpolation = $$.isInterpolationType() ? $$.config.spline_interpolation_type : 'cardinal';
return $$.isSplineType(d) ? interpolation : $$.isStepType(d) ? $$.config.line_step_type : "linear";
}; };

3
src/type.js

@ -89,3 +89,6 @@ c3_chart_internal_fn.lineOrScatterData = function (d) {
c3_chart_internal_fn.barOrLineData = function (d) { c3_chart_internal_fn.barOrLineData = function (d) {
return this.isBarType(d) || this.isLineType(d) ? d.values : []; return this.isBarType(d) || this.isLineType(d) ? d.values : [];
}; };
c3_chart_internal_fn.isInterpolationType = function () {
return ['linear', 'linear-closed', 'basis', 'basis-open', 'basis-closed', 'bundle', 'cardinal', 'cardinal-open', 'cardinal-closed', 'monotone'].indexOf(this.config.spline_interpolation_type) >= 0;
};

Loading…
Cancel
Save