Skip to content

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

Fix data.labels.format - #854

parent aa38b870
Hide whitespace changes
Inline Side-by-side
Showing with 126 additions and 18 deletions
c3.js
View file @ b790f46a
......@@ -1369,13 +1369,13 @@
}
// add padding for data label
if (showHorizontalDataLabel) {
lengths = $$.getDataLabelLength(yDomainMin, yDomainMax, axisId, 'width');
lengths = $$.getDataLabelLength(yDomainMin, yDomainMax, 'width');
diff = diffDomain($$.y.range());
ratio = [lengths[0] / diff, lengths[1] / diff];
padding_top += domainLength * (ratio[1] / (1 - ratio[0] - ratio[1]));
padding_bottom += domainLength * (ratio[0] / (1 - ratio[0] - ratio[1]));
} else if (showVerticalDataLabel) {
lengths = $$.getDataLabelLength(yDomainMin, yDomainMax, axisId, 'height');
lengths = $$.getDataLabelLength(yDomainMin, yDomainMax, 'height');
padding_top += this.convertPixelsToAxisPadding(lengths[1], domainLength);
padding_bottom += this.convertPixelsToAxisPadding(lengths[0], domainLength);
}
......@@ -1748,13 +1748,13 @@
}
return false;
};
c3_chart_internal_fn.getDataLabelLength = function (min, max, axisId, key) {
c3_chart_internal_fn.getDataLabelLength = function (min, max, key) {
var $$ = this,
lengths = [0, 0], paddingCoef = 1.3;
$$.selectChart.select('svg').selectAll('.dummy')
.data([min, max])
.enter().append('text')
.text(function (d) { return $$.formatByAxisId(axisId)(d); })
.text(function (d) { return $$.dataLabelFormat(d.id)(d); })
.each(function (d, i) {
lengths[i] = this.getBoundingClientRect()[key] * paddingCoef;
})
......@@ -3194,7 +3194,7 @@
.style("fill", function (d) { return $$.color(d); })
.style("fill-opacity", 0);
$$.mainText
.text(function (d, i, j) { return $$.formatByAxisId($$.getAxisId(d.id))(d.value, d.id, i, j); });
.text(function (d, i, j) { return $$.dataLabelFormat(d.id)(d.value, d.id, i, j); });
$$.mainText.exit()
.transition().duration(durationForExit)
.style('fill-opacity', 0)
......@@ -5435,16 +5435,20 @@
c3_chart_internal_fn.defaultArcValueFormat = function (v, ratio) {
return (ratio * 100).toFixed(1) + '%';
};
c3_chart_internal_fn.formatByAxisId = function (axisId) {
c3_chart_internal_fn.dataLabelFormat = function (targetId) {
var $$ = this, data_labels = $$.config.data_labels,
format = function (v) { return isValue(v) ? +v : ""; };
format, defaultFormat = function (v) { return isValue(v) ? +v : ""; };
// find format according to axis id
if (typeof data_labels.format === 'function') {
format = data_labels.format;
} else if (typeof data_labels.format === 'object') {
if (data_labels.format[axisId]) {
format = data_labels.format[axisId];
if (data_labels.format[targetId]) {
format = data_labels.format[targetId] === true ? defaultFormat : data_labels.format[targetId];
} else {
format = function () { return ''; };
}
} else {
format = defaultFormat;
}
return format;
};
......
c3.min.js
View file @ b790f46a
This source diff could not be displayed because it is too large. You can view the blob instead.
spec/data-spec.js
View file @ b790f46a
......@@ -227,6 +227,106 @@ describe('c3 chart data', function () {
describe('data.label', function () {
describe('for all targets', function () {
it('should update args to show data label for all data', function () {
args = {
data: {
columns: [
['data1', 100, 200, 100, 400, 150, 250],
['data2', 10, 20, 10, 40, 15, 25],
['data3', 1000, 2000, 1000, 4000, 1500, 2500]
],
labels: true
}
};
expect(true).toBeTruthy();
});
it('should have data labels on all data', function () {
d3.selectAll('.c3-texts-data1 text').each(function (d, i) {
expect(d3.select(this).text()).toBe(args.data.columns[0][i + 1] + '');
});
d3.selectAll('.c3-texts-data2 text').each(function (d, i) {
expect(d3.select(this).text()).toBe(args.data.columns[1][i + 1] + '');
});
d3.selectAll('.c3-texts-data3 text').each(function (d, i) {
expect(d3.select(this).text()).toBe(args.data.columns[2][i + 1] + '');
});
});
});
describe('for each target', function () {
describe('as true', function () {
it('should update args to show data label for only data1', function () {
args = {
data: {
columns: [
['data1', 100, 200, 100, 400, 150, 250],
['data2', 10, 20, 10, 40, 15, 25],
['data3', 1000, 2000, 1000, 4000, 1500, 2500]
],
labels: {
format: {
data1: true
}
}
}
};
expect(true).toBeTruthy();
});
it('should have data labels on all data', function () {
d3.selectAll('.c3-texts-data1 text').each(function (d, i) {
expect(d3.select(this).text()).toBe(args.data.columns[0][i + 1] + '');
});
d3.selectAll('.c3-texts-data2 text').each(function () {
expect(d3.select(this).text()).toBe('');
});
d3.selectAll('.c3-texts-data3 text').each(function () {
expect(d3.select(this).text()).toBe('');
});
});
});
describe('as function', function () {
it('should update args to show data label for only data1', function () {
args = {
data: {
columns: [
['data1', 100, 200, 100, 400, 150, 250],
['data2', 10, 20, 10, 40, 15, 25],
['data3', 1000, 2000, 1000, 4000, 1500, 2500]
],
labels: {
format: {
data1: d3.format('$')
}
}
}
};
expect(true).toBeTruthy();
});
it('should have data labels on all data', function () {
d3.selectAll('.c3-texts-data1 text').each(function (d, i) {
expect(d3.select(this).text()).toBe('$' + args.data.columns[0][i + 1]);
});
d3.selectAll('.c3-texts-data2 text').each(function () {
expect(d3.select(this).text()).toBe('');
});
d3.selectAll('.c3-texts-data3 text').each(function () {
expect(d3.select(this).text()).toBe('');
});
});
});
});
describe('with small values', function () {
it('should update args to show data label', function () {
......
src/data.js
View file @ b790f46a
......@@ -261,13 +261,13 @@ c3_chart_internal_fn.hasDataLabel = function () {
}
return false;
};
c3_chart_internal_fn.getDataLabelLength = function (min, max, axisId, key) {
c3_chart_internal_fn.getDataLabelLength = function (min, max, key) {
var $$ = this,
lengths = [0, 0], paddingCoef = 1.3;
$$.selectChart.select('svg').selectAll('.dummy')
.data([min, max])
.enter().append('text')
.text(function (d) { return $$.formatByAxisId(axisId)(d); })
.text(function (d) { return $$.dataLabelFormat(d.id)(d); })
.each(function (d, i) {
lengths[i] = this.getBoundingClientRect()[key] * paddingCoef;
})
......
src/domain.js
View file @ b790f46a
......@@ -119,13 +119,13 @@ c3_chart_internal_fn.getYDomain = function (targets, axisId, xDomain) {
}
// add padding for data label
if (showHorizontalDataLabel) {
lengths = $$.getDataLabelLength(yDomainMin, yDomainMax, axisId, 'width');
lengths = $$.getDataLabelLength(yDomainMin, yDomainMax, 'width');
diff = diffDomain($$.y.range());
ratio = [lengths[0] / diff, lengths[1] / diff];
padding_top += domainLength * (ratio[1] / (1 - ratio[0] - ratio[1]));
padding_bottom += domainLength * (ratio[0] / (1 - ratio[0] - ratio[1]));
} else if (showVerticalDataLabel) {
lengths = $$.getDataLabelLength(yDomainMin, yDomainMax, axisId, 'height');
lengths = $$.getDataLabelLength(yDomainMin, yDomainMax, 'height');
padding_top += this.convertPixelsToAxisPadding(lengths[1], domainLength);
padding_bottom += this.convertPixelsToAxisPadding(lengths[0], domainLength);
}
......
src/format.js
View file @ b790f46a
......@@ -23,16 +23,20 @@ c3_chart_internal_fn.defaultValueFormat = function (v) {
c3_chart_internal_fn.defaultArcValueFormat = function (v, ratio) {
return (ratio * 100).toFixed(1) + '%';
};
c3_chart_internal_fn.formatByAxisId = function (axisId) {
c3_chart_internal_fn.dataLabelFormat = function (targetId) {
var $$ = this, data_labels = $$.config.data_labels,
format = function (v) { return isValue(v) ? +v : ""; };
format, defaultFormat = function (v) { return isValue(v) ? +v : ""; };
// find format according to axis id
if (typeof data_labels.format === 'function') {
format = data_labels.format;
} else if (typeof data_labels.format === 'object') {
if (data_labels.format[axisId]) {
format = data_labels.format[axisId];
if (data_labels.format[targetId]) {
format = data_labels.format[targetId] === true ? defaultFormat : data_labels.format[targetId];
} else {
format = function () { return ''; };
}
} else {
format = defaultFormat;
}
return format;
};
src/text.js
View file @ b790f46a
......@@ -32,7 +32,7 @@ c3_chart_internal_fn.redrawText = function (durationForExit) {
.style("fill", function (d) { return $$.color(d); })
.style("fill-opacity", 0);
$$.mainText
.text(function (d, i, j) { return $$.formatByAxisId($$.getAxisId(d.id))(d.value, d.id, i, j); });
.text(function (d, i, j) { return $$.dataLabelFormat(d.id)(d.value, d.id, i, j); });
$$.mainText.exit()
.transition().duration(durationForExit)
.style('fill-opacity', 0)
......
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