Skip to content

C
c3-closed
Commit 14db4af6 authored by Masayuki Tanaka's avatar Masayuki Tanaka
Browse files
Options

Fix data label for area chart

parent 7d8a949a
Hide whitespace changes
Inline Side-by-side
Showing with 215 additions and 4 deletions
c3.js
View file @ 14db4af6
...@@ -3288,7 +3288,7 @@ ...@@ -3288,7 +3288,7 @@
}; };
c3_chart_internal_fn.generateXYForText = function (areaIndices, barIndices, lineIndices, forX) { c3_chart_internal_fn.generateXYForText = function (areaIndices, barIndices, lineIndices, forX) {
var $$ = this, var $$ = this,
getAreaPoints = $$.generateGetAreaPoints(barIndices, false), getAreaPoints = $$.generateGetAreaPoints(areaIndices, false),
getBarPoints = $$.generateGetBarPoints(barIndices, false), getBarPoints = $$.generateGetBarPoints(barIndices, false),
getLinePoints = $$.generateGetLinePoints(lineIndices, false), getLinePoints = $$.generateGetLinePoints(lineIndices, false),
getter = forX ? $$.getXForText : $$.getYForText; getter = forX ? $$.getXForText : $$.getYForText;
...@@ -3322,7 +3322,7 @@ ...@@ -3322,7 +3322,7 @@
if ($$.config.axis_rotated) { if ($$.config.axis_rotated) {
yPos = (points[0][0] + points[2][0] + box.height * 0.6) / 2; yPos = (points[0][0] + points[2][0] + box.height * 0.6) / 2;
} else { } else {
yPos = points[2][1] + (d.value < 0 ? box.height : $$.isBarType(d) ? -3 : -6); yPos = points[2][1] + (d.value < 0 ? box.height * 1.3 : $$.isBarType(d) ? -3 : -6);
} }
// show labels regardless of the domain if value is null // show labels regardless of the domain if value is null
if (d.value === null && !$$.config.axis_rotated) { if (d.value === null && !$$.config.axis_rotated) {
......
c3.min.js
View file @ 14db4af6
This source diff could not be displayed because it is too large. You can view the blob instead.
spec/data-spec.js
View file @ 14db4af6
...@@ -7,6 +7,217 @@ describe('c3 chart data', function () { ...@@ -7,6 +7,217 @@ describe('c3 chart data', function () {
chart = window.initChart(chart, args, done); chart = window.initChart(chart, args, done);
}); });
describe('data.lables', function () {
describe('on line chart', function () {
it('should update args', function () {
args = {
data: {
columns: [
['data1', 1030, 2200, 2100],
['data2', 1150, 2010, 1200],
['data3', -1150, -2010, -1200],
['data4', -1030, -2200, -2100],
],
type: 'line',
labels: true,
}
};
expect(true).toBeTruthy();
});
it('should locate data labels in correct position', function () {
var expectedTextY = {
data1: [128, 38, 46],
data2: [119, 53, 115],
data3: [311, 377, 315],
data4: [302, 392, 384],
};
var expectedTextX = {
data1: [6, 294, 583],
data2: [6, 294, 583],
data3: [6, 294, 583],
data4: [6, 294, 583],
};
Object.keys(expectedTextY).forEach(function (key) {
d3.selectAll('.c3-texts-' + key + ' text.c3-text').each(function (d, i) {
var text = d3.select(this);
expect(+text.attr('y')).toBeCloseTo(expectedTextY[key][i], -2);
expect(+text.attr('x')).toBeCloseTo(expectedTextX[key][i], -2);
});
});
});
it('should update args to be stacked', function () {
args.data.groups = [['data1', 'data2'], ['data3', 'data4']];
expect(true).toBeTruthy();
});
it('should locate data labels in correct position', function () {
var expectedTextY = {
data1: [120, 38, 75],
data2: [161, 127, 159],
data3: [269, 303, 271],
data4: [310, 392, 355],
};
var expectedTextX = {
data1: [6, 294, 583],
data2: [6, 294, 583],
data3: [6, 294, 583],
data4: [6, 294, 583],
};
Object.keys(expectedTextY).forEach(function (key) {
d3.selectAll('.c3-texts-' + key + ' text.c3-text').each(function (d, i) {
var text = d3.select(this);
expect(+text.attr('y')).toBeCloseTo(expectedTextY[key][i], -2);
expect(+text.attr('x')).toBeCloseTo(expectedTextX[key][i], -2);
});
});
});
});
describe('on area chart', function () {
it('should update args', function () {
args = {
data: {
columns: [
['data1', 1030, 2200, 2100],
['data2', 1150, 2010, 1200],
['data3', -1150, -2010, -1200],
['data4', -1030, -2200, -2100],
],
type: 'area',
labels: true,
}
};
expect(true).toBeTruthy();
});
it('should locate data labels in correct position', function () {
var expectedTextY = {
data1: [128, 38, 46],
data2: [119, 53, 115],
data3: [311, 377, 315],
data4: [302, 392, 384],
};
var expectedTextX = {
data1: [6, 294, 583],
data2: [6, 294, 583],
data3: [6, 294, 583],
data4: [6, 294, 583],
};
Object.keys(expectedTextY).forEach(function (key) {
d3.selectAll('.c3-texts-' + key + ' text.c3-text').each(function (d, i) {
var text = d3.select(this);
expect(+text.attr('y')).toBeCloseTo(expectedTextY[key][i], -2);
expect(+text.attr('x')).toBeCloseTo(expectedTextX[key][i], -2);
});
});
});
it('should update args to be stacked', function () {
args.data.groups = [['data1', 'data2'], ['data3', 'data4']];
expect(true).toBeTruthy();
});
it('should locate data labels in correct position', function () {
var expectedTextY = {
data1: [120, 38, 75],
data2: [161, 127, 159],
data3: [269, 303, 271],
data4: [310, 392, 355],
};
var expectedTextX = {
data1: [6, 294, 583],
data2: [6, 294, 583],
data3: [6, 294, 583],
data4: [6, 294, 583],
};
Object.keys(expectedTextY).forEach(function (key) {
d3.selectAll('.c3-texts-' + key + ' text.c3-text').each(function (d, i) {
var text = d3.select(this);
expect(+text.attr('y')).toBeCloseTo(expectedTextY[key][i], -2);
expect(+text.attr('x')).toBeCloseTo(expectedTextX[key][i], -2);
});
});
});
});
describe('on bar chart', function () {
it('should update args', function () {
args = {
data: {
columns: [
['data1', 1030, 2200, 2100],
['data2', 1150, 2010, 1200],
['data3', -1150, -2010, -1200],
['data4', -1030, -2200, -2100],
],
type: 'bar',
labels: true,
}
};
expect(true).toBeTruthy();
});
it('should locate data labels in correct position', function () {
var expectedTextY = {
data1: [128, 38, 46],
data2: [119, 53, 115],
data3: [311, 377, 315],
data4: [302, 392, 384],
};
var expectedTextX = {
data1: [53, 249, 445],
data2: [83, 279, 475],
data3: [112, 308, 504],
data4: [142, 338, 534],
};
Object.keys(expectedTextY).forEach(function (key) {
d3.selectAll('.c3-texts-' + key + ' text.c3-text').each(function (d, i) {
var text = d3.select(this);
expect(+text.attr('y')).toBeCloseTo(expectedTextY[key][i], -2);
expect(+text.attr('x')).toBeCloseTo(expectedTextX[key][i], -2);
});
});
});
it('should update args to be stacked', function () {
args.data.groups = [['data1', 'data2'], ['data3', 'data4']];
expect(true).toBeTruthy();
});
it('should locate data labels in correct position', function () {
var expectedTextY = {
data1: [120, 38, 75],
data2: [161, 127, 159],
data3: [269, 303, 271],
data4: [310, 392, 355],
};
var expectedTextX = {
data1: [68.6, 264, 460],
data2: [68.6, 264, 460],
data3: [127, 323, 519],
data4: [127, 323, 519],
};
Object.keys(expectedTextY).forEach(function (key) {
d3.selectAll('.c3-texts-' + key + ' text.c3-text').each(function (d, i) {
var text = d3.select(this);
expect(+text.attr('y')).toBeCloseTo(expectedTextY[key][i], -2);
expect(+text.attr('x')).toBeCloseTo(expectedTextX[key][i], -2);
});
});
});
});
});
describe('function in data.order', function () { describe('function in data.order', function () {
it('should update args', function () { it('should update args', function () {
args = { args = {
......
src/text.js
View file @ 14db4af6
...@@ -63,7 +63,7 @@ c3_chart_internal_fn.getTextRect = function (text, cls) { ...@@ -63,7 +63,7 @@ c3_chart_internal_fn.getTextRect = function (text, cls) {
}; };
c3_chart_internal_fn.generateXYForText = function (areaIndices, barIndices, lineIndices, forX) { c3_chart_internal_fn.generateXYForText = function (areaIndices, barIndices, lineIndices, forX) {
var $$ = this, var $$ = this,
getAreaPoints = $$.generateGetAreaPoints(barIndices, false), getAreaPoints = $$.generateGetAreaPoints(areaIndices, false),
getBarPoints = $$.generateGetBarPoints(barIndices, false), getBarPoints = $$.generateGetBarPoints(barIndices, false),
getLinePoints = $$.generateGetLinePoints(lineIndices, false), getLinePoints = $$.generateGetLinePoints(lineIndices, false),
getter = forX ? $$.getXForText : $$.getYForText; getter = forX ? $$.getXForText : $$.getYForText;
...@@ -97,7 +97,7 @@ c3_chart_internal_fn.getYForText = function (points, d, textElement) { ...@@ -97,7 +97,7 @@ c3_chart_internal_fn.getYForText = function (points, d, textElement) {
if ($$.config.axis_rotated) { if ($$.config.axis_rotated) {
yPos = (points[0][0] + points[2][0] + box.height * 0.6) / 2; yPos = (points[0][0] + points[2][0] + box.height * 0.6) / 2;
} else { } else {
yPos = points[2][1] + (d.value < 0 ? box.height : $$.isBarType(d) ? -3 : -6); yPos = points[2][1] + (d.value < 0 ? box.height * 1.3 : $$.isBarType(d) ? -3 : -6);
} }
// show labels regardless of the domain if value is null // show labels regardless of the domain if value is null
if (d.value === null && !$$.config.axis_rotated) { if (d.value === null && !$$.config.axis_rotated) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment