playground
/
c3
mirror of https://github.com/masayuki0812/c3.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

Fix data label for area chart

pull/1053/head
Masayuki Tanaka 10 years ago
parent
7d8a949a70
commit
14db4af699
4 changed files with 216 additions and 5 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      c3.js
  2. 2
      c3.min.js
  3. 211
      spec/data-spec.js
  4. 4
      src/text.js

4
c3.js
Unescape View File

@ -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 @@
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) {

2
c3.min.js vendored
View File

File diff suppressed because one or more lines are too long

211
spec/data-spec.js
Unescape View File

@ -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 = {

4
src/text.js
Unescape View File

@ -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) {
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) {

Write Preview
Loading…
Cancel
Save