Browse Source

Merge branch 'pr/1650' into dev

pull/1675/head
Ændrew Rininsland 9 years ago
parent
commit
6fb9c0a871
  1. 53
      c3.js
  2. 10
      c3.min.js
  3. 45
      spec/axis-spec.js
  4. 4
      src/api.load.js
  5. 23
      src/axis.js
  6. 4
      src/config.js
  7. 2
      src/core.js
  8. 28
      src/data.convert.js
  9. 2
      src/data.load.js
  10. 8
      src/size.js

53
c3.js

@ -86,7 +86,7 @@
$$.initParams(); $$.initParams();
if (config.data_url) { if (config.data_url) {
$$.convertUrlToData(config.data_url, config.data_mimeType, config.data_keys, $$.initWithData); $$.convertUrlToData(config.data_url, config.data_mimeType, config.data_headers, config.data_keys, $$.initWithData);
} }
else if (config.data_json) { else if (config.data_json) {
$$.initWithData($$.convertJsonToData(config.data_json, config.data_keys)); $$.initWithData($$.convertJsonToData(config.data_json, config.data_keys));
@ -1123,6 +1123,7 @@
data_onselected: function () {}, data_onselected: function () {},
data_onunselected: function () {}, data_onunselected: function () {},
data_url: undefined, data_url: undefined,
data_headers: undefined,
data_json: undefined, data_json: undefined,
data_rows: undefined, data_rows: undefined,
data_columns: undefined, data_columns: undefined,
@ -1186,7 +1187,8 @@
axis_y_label: {}, axis_y_label: {},
axis_y_tick_format: undefined, axis_y_tick_format: undefined,
axis_y_tick_outer: true, axis_y_tick_outer: true,
axis_y_tick_values: null, axis_y_tick_values: null,
axis_y_tick_rotate: 0,
axis_y_tick_count: undefined, axis_y_tick_count: undefined,
axis_y_tick_time_value: undefined, axis_y_tick_time_value: undefined,
axis_y_tick_time_interval: undefined, axis_y_tick_time_interval: undefined,
@ -2020,9 +2022,15 @@
return current; return current;
}; };
c3_chart_internal_fn.convertUrlToData = function (url, mimeType, keys, done) { c3_chart_internal_fn.convertUrlToData = function (url, mimeType, headers, keys, done) {
var $$ = this, type = mimeType ? mimeType : 'csv'; var $$ = this, type = mimeType ? mimeType : 'csv';
$$.d3.xhr(url, function (error, data) { var req = $$.d3.xhr(url);
if (headers) {
Object.keys(headers).forEach(function (header) {
req.header(header, headers[header]);
});
}
req.get(function (error, data) {
var d; var d;
if (!data) { if (!data) {
throw new Error(error.responseURL + ' ' + error.status + ' (' + error.statusText + ')'); throw new Error(error.responseURL + ' ' + error.status + ' (' + error.statusText + ')');
@ -2258,7 +2266,7 @@
$$.load($$.convertDataToTargets(args.data), args); $$.load($$.convertDataToTargets(args.data), args);
} }
else if (args.url) { else if (args.url) {
$$.convertUrlToData(args.url, args.mimeType, args.keys, function (data) { $$.convertUrlToData(args.url, args.mimeType, args.headers, args.keys, function (data) {
$$.load($$.convertDataToTargets(data), args); $$.load($$.convertDataToTargets(data), args);
}); });
} }
@ -2747,12 +2755,18 @@
var $$ = this, config = $$.config, h = 30; var $$ = this, config = $$.config, h = 30;
if (axisId === 'x' && !config.axis_x_show) { return 8; } if (axisId === 'x' && !config.axis_x_show) { return 8; }
if (axisId === 'x' && config.axis_x_height) { return config.axis_x_height; } if (axisId === 'x' && config.axis_x_height) { return config.axis_x_height; }
if (axisId === 'y' && !config.axis_y_show) { return config.legend_show && !$$.isLegendRight && !$$.isLegendInset ? 10 : 1; } if (axisId === 'y' && !config.axis_y_show) {
return config.legend_show && !$$.isLegendRight && !$$.isLegendInset ? 10 : 1;
}
if (axisId === 'y2' && !config.axis_y2_show) { return $$.rotated_padding_top; } if (axisId === 'y2' && !config.axis_y2_show) { return $$.rotated_padding_top; }
// Calculate x axis height when tick rotated // Calculate x axis height when tick rotated
if (axisId === 'x' && !config.axis_rotated && config.axis_x_tick_rotate) { if (axisId === 'x' && !config.axis_rotated && config.axis_x_tick_rotate) {
h = 30 + $$.axis.getMaxTickWidth(axisId) * Math.cos(Math.PI * (90 - config.axis_x_tick_rotate) / 180); h = 30 + $$.axis.getMaxTickWidth(axisId) * Math.cos(Math.PI * (90 - config.axis_x_tick_rotate) / 180);
} }
// Calculate y axis height when tick rotated
if (axisId === 'y' && config.axis_rotated && config.axis_y_tick_rotate) {
h = 30 + $$.axis.getMaxTickWidth(axisId) * Math.cos(Math.PI * (90 - config.axis_y_tick_rotate) / 180);
}
return h + ($$.axis.getLabelPositionById(axisId).isInner ? 0 : 10) + (axisId === 'y2' ? -10 : 0); return h + ($$.axis.getLabelPositionById(axisId).isInner ? 0 : 10) + (axisId === 'y2' ? -10 : 0);
}; };
@ -4396,17 +4410,16 @@
} }
return tickValues; return tickValues;
}; };
Axis.prototype.getYAxis = function getYAxis(scale, orient, tickFormat, tickValues, withOuterTick, withoutTransition) { Axis.prototype.getYAxis = function getYAxis(scale, orient, tickFormat, tickValues, withOuterTick, withoutTransition, withoutRotateTickText) {
var axisParams = { var $$ = this.owner, config = $$.config,
withOuterTick: withOuterTick, axisParams = {
withoutTransition: withoutTransition, withOuterTick: withOuterTick,
}, withoutTransition: withoutTransition,
$$ = this.owner, tickTextRotate: withoutRotateTickText ? 0 : config.axis_y_tick_rotate
d3 = $$.d3, },
config = $$.config, axis = c3_axis($$.d3, axisParams).scale(scale).orient(orient).tickFormat(tickFormat);
axis = c3_axis(d3, axisParams).scale(scale).orient(orient).tickFormat(tickFormat);
if ($$.isTimeSeriesY()) { if ($$.isTimeSeriesY()) {
axis.ticks(d3.time[config.axis_y_tick_time_value], config.axis_y_tick_time_interval); axis.ticks($$.d3.time[config.axis_y_tick_time_value], config.axis_y_tick_time_interval);
} else { } else {
axis.tickValues(tickValues); axis.tickValues(tickValues);
} }
@ -4596,10 +4609,10 @@
targetsToShow = $$.filterTargetsToShow($$.data.targets); targetsToShow = $$.filterTargetsToShow($$.data.targets);
if (id === 'y') { if (id === 'y') {
scale = $$.y.copy().domain($$.getYDomain(targetsToShow, 'y')); scale = $$.y.copy().domain($$.getYDomain(targetsToShow, 'y'));
axis = this.getYAxis(scale, $$.yOrient, config.axis_y_tick_format, $$.yAxisTickValues, false, true); axis = this.getYAxis(scale, $$.yOrient, config.axis_y_tick_format, $$.yAxisTickValues, false, true, true);
} else if (id === 'y2') { } else if (id === 'y2') {
scale = $$.y2.copy().domain($$.getYDomain(targetsToShow, 'y2')); scale = $$.y2.copy().domain($$.getYDomain(targetsToShow, 'y2'));
axis = this.getYAxis(scale, $$.y2Orient, config.axis_y2_tick_format, $$.y2AxisTickValues, false, true); axis = this.getYAxis(scale, $$.y2Orient, config.axis_y2_tick_format, $$.y2AxisTickValues, false, true, true);
} else { } else {
scale = $$.x.copy().domain($$.getXDomain(targetsToShow)); scale = $$.x.copy().domain($$.getXDomain(targetsToShow));
axis = this.getXAxis(scale, $$.xOrient, $$.xAxisTickFormat, $$.xAxisTickValues, false, true, true); axis = this.getXAxis(scale, $$.xOrient, $$.xAxisTickFormat, $$.xAxisTickValues, false, true, true);
@ -6220,6 +6233,10 @@
if (args.xs) { if (args.xs) {
$$.addXs(args.xs); $$.addXs(args.xs);
} }
// update names if exists
if ('names' in args) {
c3_chart_fn.data.names.bind(this)(args.names);
}
// update classes if exists // update classes if exists
if ('classes' in args) { if ('classes' in args) {
Object.keys(args.classes).forEach(function (id) { Object.keys(args.classes).forEach(function (id) {

10
c3.min.js vendored

File diff suppressed because one or more lines are too long

45
spec/axis-spec.js

@ -153,7 +153,7 @@ describe('c3 chart axis', function () {
describe('axis.x.tick.values', function () { describe('axis.x.tick.values', function () {
describe('function is provided', function () { describe('function is provided', function () {
var tickGenerator = function (/*domain*/) { var tickGenerator = function () {
var values = []; var values = [];
for (var i = 0; i <= 300; i += 50) { for (var i = 0; i <= 300; i += 50) {
values.push(i); values.push(i);
@ -599,6 +599,49 @@ describe('c3 chart axis', function () {
}); });
}); });
describe('axis.y.tick.rotate', function () {
describe('not rotated', function () {
it('should update args successfully', function () {
args = {
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250, 100, 600],
['data2', 50, 20, 10, 40, 15, 25],
]
},
axis: {
rotated: true,
y: {
tick: {
rotate: 45
}
}
}
};
expect(true).toBeTruthy();
});
it('should rotate tick texts', function () {
chart.internal.main.selectAll('.c3-axis-y g.tick').each(function () {
var tick = d3.select(this),
text = tick.select('text'),
tspan = text.select('tspan');
expect(text.attr('transform')).toBe('rotate(45)');
expect(text.attr('y')).toBe('4');
expect(tspan.attr('dx')).toBeCloseTo('5.6', 0);
});
});
it('should have automatically calculated y axis width', function () {
var box = chart.internal.main.select('.c3-axis-y').node().getBoundingClientRect();
expect(box.width).toBeCloseTo(590, 1);
});
});
});
describe('axis.x.tick.fit', function () { describe('axis.x.tick.fit', function () {
describe('axis.x.tick.fit = true', function () { describe('axis.x.tick.fit = true', function () {

4
src/api.load.js

@ -4,6 +4,10 @@ c3_chart_fn.load = function (args) {
if (args.xs) { if (args.xs) {
$$.addXs(args.xs); $$.addXs(args.xs);
} }
// update names if exists
if ('names' in args) {
c3_chart_fn.data.names.bind(this)(args.names);
}
// update classes if exists // update classes if exists
if ('classes' in args) { if ('classes' in args) {
Object.keys(args.classes).forEach(function (id) { Object.keys(args.classes).forEach(function (id) {

23
src/axis.js

@ -76,17 +76,16 @@ Axis.prototype.updateXAxisTickValues = function updateXAxisTickValues(targets, a
} }
return tickValues; return tickValues;
}; };
Axis.prototype.getYAxis = function getYAxis(scale, orient, tickFormat, tickValues, withOuterTick, withoutTransition) { Axis.prototype.getYAxis = function getYAxis(scale, orient, tickFormat, tickValues, withOuterTick, withoutTransition, withoutRotateTickText) {
var axisParams = { var $$ = this.owner, config = $$.config,
withOuterTick: withOuterTick, axisParams = {
withoutTransition: withoutTransition, withOuterTick: withOuterTick,
}, withoutTransition: withoutTransition,
$$ = this.owner, tickTextRotate: withoutRotateTickText ? 0 : config.axis_y_tick_rotate
d3 = $$.d3, },
config = $$.config, axis = c3_axis($$.d3, axisParams).scale(scale).orient(orient).tickFormat(tickFormat);
axis = c3_axis(d3, axisParams).scale(scale).orient(orient).tickFormat(tickFormat);
if ($$.isTimeSeriesY()) { if ($$.isTimeSeriesY()) {
axis.ticks(d3.time[config.axis_y_tick_time_value], config.axis_y_tick_time_interval); axis.ticks($$.d3.time[config.axis_y_tick_time_value], config.axis_y_tick_time_interval);
} else { } else {
axis.tickValues(tickValues); axis.tickValues(tickValues);
} }
@ -276,10 +275,10 @@ Axis.prototype.getMaxTickWidth = function getMaxTickWidth(id, withoutRecompute)
targetsToShow = $$.filterTargetsToShow($$.data.targets); targetsToShow = $$.filterTargetsToShow($$.data.targets);
if (id === 'y') { if (id === 'y') {
scale = $$.y.copy().domain($$.getYDomain(targetsToShow, 'y')); scale = $$.y.copy().domain($$.getYDomain(targetsToShow, 'y'));
axis = this.getYAxis(scale, $$.yOrient, config.axis_y_tick_format, $$.yAxisTickValues, false, true); axis = this.getYAxis(scale, $$.yOrient, config.axis_y_tick_format, $$.yAxisTickValues, false, true, true);
} else if (id === 'y2') { } else if (id === 'y2') {
scale = $$.y2.copy().domain($$.getYDomain(targetsToShow, 'y2')); scale = $$.y2.copy().domain($$.getYDomain(targetsToShow, 'y2'));
axis = this.getYAxis(scale, $$.y2Orient, config.axis_y2_tick_format, $$.y2AxisTickValues, false, true); axis = this.getYAxis(scale, $$.y2Orient, config.axis_y2_tick_format, $$.y2AxisTickValues, false, true, true);
} else { } else {
scale = $$.x.copy().domain($$.getXDomain(targetsToShow)); scale = $$.x.copy().domain($$.getXDomain(targetsToShow));
axis = this.getXAxis(scale, $$.xOrient, $$.xAxisTickFormat, $$.xAxisTickValues, false, true, true); axis = this.getXAxis(scale, $$.xOrient, $$.xAxisTickFormat, $$.xAxisTickValues, false, true, true);

4
src/config.js

@ -56,6 +56,7 @@ c3_chart_internal_fn.getDefaultConfig = function () {
data_onselected: function () {}, data_onselected: function () {},
data_onunselected: function () {}, data_onunselected: function () {},
data_url: undefined, data_url: undefined,
data_headers: undefined,
data_json: undefined, data_json: undefined,
data_rows: undefined, data_rows: undefined,
data_columns: undefined, data_columns: undefined,
@ -119,7 +120,8 @@ c3_chart_internal_fn.getDefaultConfig = function () {
axis_y_label: {}, axis_y_label: {},
axis_y_tick_format: undefined, axis_y_tick_format: undefined,
axis_y_tick_outer: true, axis_y_tick_outer: true,
axis_y_tick_values: null, axis_y_tick_values: null,
axis_y_tick_rotate: 0,
axis_y_tick_count: undefined, axis_y_tick_count: undefined,
axis_y_tick_time_value: undefined, axis_y_tick_time_value: undefined,
axis_y_tick_time_interval: undefined, axis_y_tick_time_interval: undefined,

2
src/core.js

@ -81,7 +81,7 @@ c3_chart_internal_fn.init = function () {
$$.initParams(); $$.initParams();
if (config.data_url) { if (config.data_url) {
$$.convertUrlToData(config.data_url, config.data_mimeType, config.data_keys, $$.initWithData); $$.convertUrlToData(config.data_url, config.data_mimeType, config.data_headers, config.data_keys, $$.initWithData);
} }
else if (config.data_json) { else if (config.data_json) {
$$.initWithData($$.convertJsonToData(config.data_json, config.data_keys)); $$.initWithData($$.convertJsonToData(config.data_json, config.data_keys));

28
src/data.convert.js

@ -1,6 +1,12 @@
c3_chart_internal_fn.convertUrlToData = function (url, mimeType, keys, done) { c3_chart_internal_fn.convertUrlToData = function (url, mimeType, headers, keys, done) {
var $$ = this, type = mimeType ? mimeType : 'csv'; var $$ = this, type = mimeType ? mimeType : 'csv';
$$.d3.xhr(url, function (error, data) { var req = $$.d3.xhr(url);
if (headers) {
Object.keys(headers).forEach(function (header) {
req.header(header, headers[header]);
});
}
req.get(function (error, data) {
var d; var d;
if (!data) { if (!data) {
throw new Error(error.responseURL + ' ' + error.status + ' (' + error.statusText + ')'); throw new Error(error.responseURL + ' ' + error.status + ' (' + error.statusText + ')');
@ -140,12 +146,20 @@ c3_chart_internal_fn.convertDataToTargets = function (data, appendXs) {
id: convertedId, id: convertedId,
id_org: id, id_org: id,
values: data.map(function (d, i) { values: data.map(function (d, i) {
var xKey = $$.getXKey(id), rawX = d[xKey], x = $$.generateTargetX(rawX, id, i), var xKey = $$.getXKey(id), rawX = d[xKey],
value = d[id] !== null && !isNaN(d[id]) ? +d[id] : null; value = d[id] !== null && !isNaN(d[id]) ? +d[id] : null, x;
// use x as categories if custom x and categorized // use x as categories if custom x and categorized
if ($$.isCustomX() && $$.isCategorized() && index === 0 && rawX) { if ($$.isCustomX() && $$.isCategorized() && rawX) {
if (i === 0) { config.axis_x_categories = []; } if (index === 0 && i === 0) {
config.axis_x_categories.push(rawX); config.axis_x_categories = [];
}
x = config.axis_x_categories.indexOf(rawX);
if (x === -1) {
x = config.axis_x_categories.length;
config.axis_x_categories.push(rawX);
}
} else {
x = $$.generateTargetX(rawX, id, i);
} }
// mark as x = undefined if value is undefined and filter to remove after mapped // mark as x = undefined if value is undefined and filter to remove after mapped
if (isUndefined(d[id]) || $$.data.xs[id].length <= i) { if (isUndefined(d[id]) || $$.data.xs[id].length <= i) {

2
src/data.load.js

@ -39,7 +39,7 @@ c3_chart_internal_fn.loadFromArgs = function (args) {
$$.load($$.convertDataToTargets(args.data), args); $$.load($$.convertDataToTargets(args.data), args);
} }
else if (args.url) { else if (args.url) {
$$.convertUrlToData(args.url, args.mimeType, args.keys, function (data) { $$.convertUrlToData(args.url, args.mimeType, args.headers, args.keys, function (data) {
$$.load($$.convertDataToTargets(data), args); $$.load($$.convertDataToTargets(data), args);
}); });
} }

8
src/size.js

@ -95,12 +95,18 @@ c3_chart_internal_fn.getHorizontalAxisHeight = function (axisId) {
var $$ = this, config = $$.config, h = 30; var $$ = this, config = $$.config, h = 30;
if (axisId === 'x' && !config.axis_x_show) { return 8; } if (axisId === 'x' && !config.axis_x_show) { return 8; }
if (axisId === 'x' && config.axis_x_height) { return config.axis_x_height; } if (axisId === 'x' && config.axis_x_height) { return config.axis_x_height; }
if (axisId === 'y' && !config.axis_y_show) { return config.legend_show && !$$.isLegendRight && !$$.isLegendInset ? 10 : 1; } if (axisId === 'y' && !config.axis_y_show) {
return config.legend_show && !$$.isLegendRight && !$$.isLegendInset ? 10 : 1;
}
if (axisId === 'y2' && !config.axis_y2_show) { return $$.rotated_padding_top; } if (axisId === 'y2' && !config.axis_y2_show) { return $$.rotated_padding_top; }
// Calculate x axis height when tick rotated // Calculate x axis height when tick rotated
if (axisId === 'x' && !config.axis_rotated && config.axis_x_tick_rotate) { if (axisId === 'x' && !config.axis_rotated && config.axis_x_tick_rotate) {
h = 30 + $$.axis.getMaxTickWidth(axisId) * Math.cos(Math.PI * (90 - config.axis_x_tick_rotate) / 180); h = 30 + $$.axis.getMaxTickWidth(axisId) * Math.cos(Math.PI * (90 - config.axis_x_tick_rotate) / 180);
} }
// Calculate y axis height when tick rotated
if (axisId === 'y' && config.axis_rotated && config.axis_y_tick_rotate) {
h = 30 + $$.axis.getMaxTickWidth(axisId) * Math.cos(Math.PI * (90 - config.axis_y_tick_rotate) / 180);
}
return h + ($$.axis.getLabelPositionById(axisId).isInner ? 0 : 10) + (axisId === 'y2' ? -10 : 0); return h + ($$.axis.getLabelPositionById(axisId).isInner ? 0 : 10) + (axisId === 'y2' ? -10 : 0);
}; };

Loading…
Cancel
Save