From f12a65f08c20f8ceef81bfbee8efbb54490db6a2 Mon Sep 17 00:00:00 2001 From: Warren Date: Wed, 12 Nov 2014 16:49:10 +0000 Subject: [PATCH] Added ability to use timeseries and intervals for y axis --- c3.js | 18 ++++++++++++++++-- spec/axis-spec.js | 46 ++++++++++++++++++++++++++++++++++++++++++++++ src/axis.js | 8 +++++++- src/config.js | 5 +++++ src/core.js | 3 +++ src/scale.js | 2 +- 6 files changed, 78 insertions(+), 4 deletions(-) diff --git a/c3.js b/c3.js index 962c88b..cc2adf3 100644 --- a/c3.js +++ b/c3.js @@ -657,6 +657,9 @@ c3_chart_internal_fn.isTimeSeries = function () { return this.config.axis_x_type === 'timeseries'; }; + c3_chart_internal_fn.isYaxisTimeSeries = function () { + return this.config.axis_y_type === 'timeseries'; + }; c3_chart_internal_fn.isCategorized = function () { return this.config.axis_x_type.indexOf('categor') >= 0; }; @@ -996,6 +999,7 @@ axis_x_extent: undefined, axis_x_label: {}, axis_y_show: true, + axis_y_type: undefined, axis_y_max: undefined, axis_y_min: undefined, axis_y_center: undefined, @@ -1004,6 +1008,10 @@ axis_y_tick_outer: true, axis_y_tick_values: null, axis_y_tick_count: undefined, + axis_y_ticks: {}, + axis_y_ticks_time: {}, + axis_y_ticks_time_value: undefined, + axis_y_ticks_time_interval: undefined, axis_y_padding: {}, axis_y_default: undefined, axis_y2_show: false, @@ -1156,7 +1164,7 @@ return scale; }; c3_chart_internal_fn.getY = function (min, max, domain) { - var scale = this.getScale(min, max); + var scale = this.getScale(min, max, this.isYaxisTimeSeries()); if (domain) { scale.domain(domain); } return scale; }; @@ -3986,7 +3994,13 @@ }; c3_chart_internal_fn.getYAxis = function (scale, orient, tickFormat, tickValues, withOuterTick) { var axisParams = {withOuterTick: withOuterTick}; - return c3_axis(this.d3, axisParams).scale(scale).orient(orient).tickFormat(tickFormat).tickValues(tickValues); + if (this.isYaxisTimeSeries()) { + var timeValue = this.config.axis_y_ticks_time_value; + var timeInterval = this.config.axis_y_ticks_time_interval; + return c3_axis(this.d3, axisParams).scale(scale).orient(orient).tickFormat(tickFormat).ticks(this.d3.time[timeValue], timeInterval); + } else { + return c3_axis(this.d3, axisParams).scale(scale).orient(orient).tickFormat(tickFormat).tickValues(tickValues); + } }; c3_chart_internal_fn.getAxisId = function (id) { var config = this.config; diff --git a/spec/axis-spec.js b/spec/axis-spec.js index 21fbbf0..a20a9db 100644 --- a/spec/axis-spec.js +++ b/spec/axis-spec.js @@ -86,6 +86,52 @@ describe('c3 chart axis', function () { }); + describe('axis y timeseries', function () { + + var args = { + data: { + columns: [ + ["times", 60000, 120000, 180000, 240000] + ] + }, + axis: { + y: { + type : 'timeseries', + tick: { + values: null, + count: undefined, + }, + ticks : { + time : { + value : 'seconds', + interval : 30 + } + }, + }, + } + }; + + beforeEach(function () { + chart = window.c3.generate(args); + }); + + it('should have 7 ticks on y axis', function () { + var ticksSize = d3.select('.c3-axis-y').selectAll('g.tick').size(); + expect(ticksSize).toBe(7); // the count starts at initial value and increments by the set interval + }); + + it('should have specified 30 second intervals', function () { + var prevValue; + d3.select('.c3-axis-y').selectAll('g.tick').each(function (d, i) { + if (i !== 0) { + var result = d - prevValue; + expect(result).toEqual(30000); // expressed in milliseconds + } + prevValue = d; + }); + }); + }); + describe('axis.x.tick.width', function () { describe('indexed x axis and y/y2 axis', function () { diff --git a/src/axis.js b/src/axis.js index 158d88e..be841e6 100644 --- a/src/axis.js +++ b/src/axis.js @@ -65,7 +65,13 @@ c3_chart_internal_fn.getXAxis = function (scale, orient, tickFormat, tickValues, }; c3_chart_internal_fn.getYAxis = function (scale, orient, tickFormat, tickValues, withOuterTick) { var axisParams = {withOuterTick: withOuterTick}; - return c3_axis(this.d3, axisParams).scale(scale).orient(orient).tickFormat(tickFormat).tickValues(tickValues); + if (this.isYaxisTimeSeries()) { + var timeValue = this.config.axis_y_ticks_time_value; + var timeInterval = this.config.axis_y_ticks_time_interval; + return c3_axis(this.d3, axisParams).scale(scale).orient(orient).tickFormat(tickFormat).ticks(this.d3.time[timeValue], timeInterval); + } else { + return c3_axis(this.d3, axisParams).scale(scale).orient(orient).tickFormat(tickFormat).tickValues(tickValues); + } }; c3_chart_internal_fn.getAxisId = function (id) { var config = this.config; diff --git a/src/config.js b/src/config.js index fdcb69f..fb60e11 100644 --- a/src/config.js +++ b/src/config.js @@ -101,6 +101,7 @@ c3_chart_internal_fn.getDefaultConfig = function () { axis_x_extent: undefined, axis_x_label: {}, axis_y_show: true, + axis_y_type: undefined, axis_y_max: undefined, axis_y_min: undefined, axis_y_center: undefined, @@ -109,6 +110,10 @@ c3_chart_internal_fn.getDefaultConfig = function () { axis_y_tick_outer: true, axis_y_tick_values: null, axis_y_tick_count: undefined, + axis_y_ticks: {}, + axis_y_ticks_time: {}, + axis_y_ticks_time_value: undefined, + axis_y_ticks_time_interval: undefined, axis_y_padding: {}, axis_y_default: undefined, axis_y2_show: false, diff --git a/src/core.js b/src/core.js index 8bd9b9f..aaad04e 100644 --- a/src/core.js +++ b/src/core.js @@ -652,6 +652,9 @@ c3_chart_internal_fn.updateAndRedraw = function (options) { c3_chart_internal_fn.isTimeSeries = function () { return this.config.axis_x_type === 'timeseries'; }; +c3_chart_internal_fn.isYaxisTimeSeries = function () { + return this.config.axis_y_type === 'timeseries'; +}; c3_chart_internal_fn.isCategorized = function () { return this.config.axis_x_type.indexOf('categor') >= 0; }; diff --git a/src/scale.js b/src/scale.js index 1d444f1..577c4b2 100644 --- a/src/scale.js +++ b/src/scale.js @@ -39,7 +39,7 @@ c3_chart_internal_fn.getX = function (min, max, domain, offset) { return scale; }; c3_chart_internal_fn.getY = function (min, max, domain) { - var scale = this.getScale(min, max); + var scale = this.getScale(min, max, this.isYaxisTimeSeries()); if (domain) { scale.domain(domain); } return scale; };