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

Fix data.labels.format - #854

pull/888/head
Masayuki Tanaka 10 years ago
parent
aa38b870ba
commit
b790f46ad3
7 changed files with 130 additions and 22 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. 22
      c3.js
  2. 8
      c3.min.js
  3. 100
      spec/data-spec.js
  4. 4
      src/data.js
  5. 4
      src/domain.js
  6. 12
      src/format.js
  7. 2
      src/text.js

22
c3.js
Unescape View File

@ -1369,13 +1369,13 @@
} }
// add padding for data label // add padding for data label
if (showHorizontalDataLabel) { if (showHorizontalDataLabel) {
lengths = $$.getDataLabelLength(yDomainMin, yDomainMax, axisId, 'width'); lengths = $$.getDataLabelLength(yDomainMin, yDomainMax, 'width');
diff = diffDomain($$.y.range()); diff = diffDomain($$.y.range());
ratio = [lengths[0] / diff, lengths[1] / diff]; ratio = [lengths[0] / diff, lengths[1] / diff];
padding_top += domainLength * (ratio[1] / (1 - ratio[0] - ratio[1])); padding_top += domainLength * (ratio[1] / (1 - ratio[0] - ratio[1]));
padding_bottom += domainLength * (ratio[0] / (1 - ratio[0] - ratio[1])); padding_bottom += domainLength * (ratio[0] / (1 - ratio[0] - ratio[1]));
} else if (showVerticalDataLabel) { } else if (showVerticalDataLabel) {
lengths = $$.getDataLabelLength(yDomainMin, yDomainMax, axisId, 'height'); lengths = $$.getDataLabelLength(yDomainMin, yDomainMax, 'height');
padding_top += this.convertPixelsToAxisPadding(lengths[1], domainLength); padding_top += this.convertPixelsToAxisPadding(lengths[1], domainLength);
padding_bottom += this.convertPixelsToAxisPadding(lengths[0], domainLength); padding_bottom += this.convertPixelsToAxisPadding(lengths[0], domainLength);
} }
@ -1748,13 +1748,13 @@
} }
return false; return false;
}; };
c3_chart_internal_fn.getDataLabelLength = function (min, max, axisId, key) { c3_chart_internal_fn.getDataLabelLength = function (min, max, key) {
var $$ = this, var $$ = this,
lengths = [0, 0], paddingCoef = 1.3; lengths = [0, 0], paddingCoef = 1.3;
$$.selectChart.select('svg').selectAll('.dummy') $$.selectChart.select('svg').selectAll('.dummy')
.data([min, max]) .data([min, max])
.enter().append('text') .enter().append('text')
.text(function (d) { return $$.formatByAxisId(axisId)(d); }) .text(function (d) { return $$.dataLabelFormat(d.id)(d); })
.each(function (d, i) { .each(function (d, i) {
lengths[i] = this.getBoundingClientRect()[key] * paddingCoef; lengths[i] = this.getBoundingClientRect()[key] * paddingCoef;
}) })
@ -3194,7 +3194,7 @@
.style("fill", function (d) { return $$.color(d); }) .style("fill", function (d) { return $$.color(d); })
.style("fill-opacity", 0); .style("fill-opacity", 0);
$$.mainText $$.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() $$.mainText.exit()
.transition().duration(durationForExit) .transition().duration(durationForExit)
.style('fill-opacity', 0) .style('fill-opacity', 0)
@ -5435,16 +5435,20 @@
c3_chart_internal_fn.defaultArcValueFormat = function (v, ratio) { c3_chart_internal_fn.defaultArcValueFormat = function (v, ratio) {
return (ratio * 100).toFixed(1) + '%'; 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, 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 // find format according to axis id
if (typeof data_labels.format === 'function') { if (typeof data_labels.format === 'function') {
format = data_labels.format; format = data_labels.format;
} else if (typeof data_labels.format === 'object') { } else if (typeof data_labels.format === 'object') {
if (data_labels.format[axisId]) { if (data_labels.format[targetId]) {
format = data_labels.format[axisId]; format = data_labels.format[targetId] === true ? defaultFormat : data_labels.format[targetId];
} else {
format = function () { return ''; };
} }
} else {
format = defaultFormat;
} }
return format; return format;
}; };

8
c3.min.js vendored
View File

File diff suppressed because one or more lines are too long

100
spec/data-spec.js
Unescape View File

@ -227,6 +227,106 @@ describe('c3 chart data', function () {
describe('data.label', 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 () { describe('with small values', function () {
it('should update args to show data label', function () { it('should update args to show data label', function () {

4
src/data.js
Unescape View File

@ -261,13 +261,13 @@ c3_chart_internal_fn.hasDataLabel = function () {
} }
return false; return false;
}; };
c3_chart_internal_fn.getDataLabelLength = function (min, max, axisId, key) { c3_chart_internal_fn.getDataLabelLength = function (min, max, key) {
var $$ = this, var $$ = this,
lengths = [0, 0], paddingCoef = 1.3; lengths = [0, 0], paddingCoef = 1.3;
$$.selectChart.select('svg').selectAll('.dummy') $$.selectChart.select('svg').selectAll('.dummy')
.data([min, max]) .data([min, max])
.enter().append('text') .enter().append('text')
.text(function (d) { return $$.formatByAxisId(axisId)(d); }) .text(function (d) { return $$.dataLabelFormat(d.id)(d); })
.each(function (d, i) { .each(function (d, i) {
lengths[i] = this.getBoundingClientRect()[key] * paddingCoef; lengths[i] = this.getBoundingClientRect()[key] * paddingCoef;
}) })

4
src/domain.js
Unescape View File

@ -119,13 +119,13 @@ c3_chart_internal_fn.getYDomain = function (targets, axisId, xDomain) {
} }
// add padding for data label // add padding for data label
if (showHorizontalDataLabel) { if (showHorizontalDataLabel) {
lengths = $$.getDataLabelLength(yDomainMin, yDomainMax, axisId, 'width'); lengths = $$.getDataLabelLength(yDomainMin, yDomainMax, 'width');
diff = diffDomain($$.y.range()); diff = diffDomain($$.y.range());
ratio = [lengths[0] / diff, lengths[1] / diff]; ratio = [lengths[0] / diff, lengths[1] / diff];
padding_top += domainLength * (ratio[1] / (1 - ratio[0] - ratio[1])); padding_top += domainLength * (ratio[1] / (1 - ratio[0] - ratio[1]));
padding_bottom += domainLength * (ratio[0] / (1 - ratio[0] - ratio[1])); padding_bottom += domainLength * (ratio[0] / (1 - ratio[0] - ratio[1]));
} else if (showVerticalDataLabel) { } else if (showVerticalDataLabel) {
lengths = $$.getDataLabelLength(yDomainMin, yDomainMax, axisId, 'height'); lengths = $$.getDataLabelLength(yDomainMin, yDomainMax, 'height');
padding_top += this.convertPixelsToAxisPadding(lengths[1], domainLength); padding_top += this.convertPixelsToAxisPadding(lengths[1], domainLength);
padding_bottom += this.convertPixelsToAxisPadding(lengths[0], domainLength); padding_bottom += this.convertPixelsToAxisPadding(lengths[0], domainLength);
} }

12
src/format.js
Unescape View File

@ -23,16 +23,20 @@ c3_chart_internal_fn.defaultValueFormat = function (v) {
c3_chart_internal_fn.defaultArcValueFormat = function (v, ratio) { c3_chart_internal_fn.defaultArcValueFormat = function (v, ratio) {
return (ratio * 100).toFixed(1) + '%'; 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, 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 // find format according to axis id
if (typeof data_labels.format === 'function') { if (typeof data_labels.format === 'function') {
format = data_labels.format; format = data_labels.format;
} else if (typeof data_labels.format === 'object') { } else if (typeof data_labels.format === 'object') {
if (data_labels.format[axisId]) { if (data_labels.format[targetId]) {
format = data_labels.format[axisId]; format = data_labels.format[targetId] === true ? defaultFormat : data_labels.format[targetId];
} else {
format = function () { return ''; };
} }
} else {
format = defaultFormat;
} }
return format; return format;
}; };

2
src/text.js
Unescape View File

@ -32,7 +32,7 @@ c3_chart_internal_fn.redrawText = function (durationForExit) {
.style("fill", function (d) { return $$.color(d); }) .style("fill", function (d) { return $$.color(d); })
.style("fill-opacity", 0); .style("fill-opacity", 0);
$$.mainText $$.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() $$.mainText.exit()
.transition().duration(durationForExit) .transition().duration(durationForExit)
.style('fill-opacity', 0) .style('fill-opacity', 0)

Write Preview
Loading…
Cancel
Save