Browse Source

Fix legend item width when multiple charts rendered - #1011

pull/1069/merge
Masayuki Tanaka 10 years ago
parent
commit
dc50b136de
  1. 10
      c3.js
  2. 10
      c3.min.js
  3. 39
      spec/legend-spec.js
  4. 10
      src/legend.js

10
c3.js

@ -3812,6 +3812,7 @@
c3_chart_internal_fn.initLegend = function () { c3_chart_internal_fn.initLegend = function () {
var $$ = this; var $$ = this;
$$.legendItemTextBox = {};
$$.legendHasRendered = false; $$.legendHasRendered = false;
$$.legend = $$.svg.append("g").attr("transform", $$.getTranslate('legend')); $$.legend = $$.svg.append("g").attr("transform", $$.getTranslate('legend'));
if (!$$.config.legend_show) { if (!$$.config.legend_show) {
@ -3919,9 +3920,8 @@
.style('opacity', 0) .style('opacity', 0)
.style('visibility', 'hidden'); .style('visibility', 'hidden');
}; };
var legendItemTextBox = {};
c3_chart_internal_fn.clearLegendItemTextBoxCache = function () { c3_chart_internal_fn.clearLegendItemTextBoxCache = function () {
legendItemTextBox = {}; this.legendItemTextBox = {};
}; };
c3_chart_internal_fn.updateLegend = function (targetIds, options, transitions) { c3_chart_internal_fn.updateLegend = function (targetIds, options, transitions) {
var $$ = this, config = $$.config; var $$ = this, config = $$.config;
@ -3936,10 +3936,10 @@
withTransitionForTransform = getOption(options, "withTransitionForTransform", true); withTransitionForTransform = getOption(options, "withTransitionForTransform", true);
function getTextBox(textElement, id) { function getTextBox(textElement, id) {
if (!legendItemTextBox[id]) { if (!$$.legendItemTextBox[id]) {
legendItemTextBox[id] = $$.getTextRect(textElement.textContent, CLASS.legendItem); $$.legendItemTextBox[id] = $$.getTextRect(textElement.textContent, CLASS.legendItem);
} }
return legendItemTextBox[id]; return $$.legendItemTextBox[id];
} }
function updatePositions(textElement, id, index) { function updatePositions(textElement, id, index) {

10
c3.min.js vendored

File diff suppressed because one or more lines are too long

39
spec/legend-spec.js

@ -7,6 +7,45 @@ describe('c3 chart legend', function () {
chart = window.initChart(chart, args, done); chart = window.initChart(chart, args, done);
}); });
describe('legend when multiple charts rendered', function () {
it('should update args', function () {
args = {
data: {
columns: [
['data1', 30],
['data2', 50],
['data3', 100]
]
}
};
expect(true).toBeTruthy();
});
it('should update args with long data names', function () {
args = {
data: {
columns: [
['long data name 1', 30],
['long data name 2', 50],
['long data name 3', 50],
]
}
};
expect(true).toBeTruthy();
});
it('should have properly computed legend width', function () {
var expectedLeft = [148, 226, 384],
expectedWidth = [118, 118, 108];
d3.selectAll('.c3-legend-item').each(function (d, i) {
var rect = d3.select(this).node().getBoundingClientRect();
expect(rect.left).toBeCloseTo(expectedLeft[i], -2);
expect(rect.width).toBeCloseTo(expectedWidth[i], -2);
});
});
});
describe('legend position', function () { describe('legend position', function () {
it('should update args', function () { it('should update args', function () {

10
src/legend.js

@ -1,5 +1,6 @@
c3_chart_internal_fn.initLegend = function () { c3_chart_internal_fn.initLegend = function () {
var $$ = this; var $$ = this;
$$.legendItemTextBox = {};
$$.legendHasRendered = false; $$.legendHasRendered = false;
$$.legend = $$.svg.append("g").attr("transform", $$.getTranslate('legend')); $$.legend = $$.svg.append("g").attr("transform", $$.getTranslate('legend'));
if (!$$.config.legend_show) { if (!$$.config.legend_show) {
@ -107,9 +108,8 @@ c3_chart_internal_fn.hideLegend = function (targetIds) {
.style('opacity', 0) .style('opacity', 0)
.style('visibility', 'hidden'); .style('visibility', 'hidden');
}; };
var legendItemTextBox = {};
c3_chart_internal_fn.clearLegendItemTextBoxCache = function () { c3_chart_internal_fn.clearLegendItemTextBoxCache = function () {
legendItemTextBox = {}; this.legendItemTextBox = {};
}; };
c3_chart_internal_fn.updateLegend = function (targetIds, options, transitions) { c3_chart_internal_fn.updateLegend = function (targetIds, options, transitions) {
var $$ = this, config = $$.config; var $$ = this, config = $$.config;
@ -124,10 +124,10 @@ c3_chart_internal_fn.updateLegend = function (targetIds, options, transitions) {
withTransitionForTransform = getOption(options, "withTransitionForTransform", true); withTransitionForTransform = getOption(options, "withTransitionForTransform", true);
function getTextBox(textElement, id) { function getTextBox(textElement, id) {
if (!legendItemTextBox[id]) { if (!$$.legendItemTextBox[id]) {
legendItemTextBox[id] = $$.getTextRect(textElement.textContent, CLASS.legendItem); $$.legendItemTextBox[id] = $$.getTextRect(textElement.textContent, CLASS.legendItem);
} }
return legendItemTextBox[id]; return $$.legendItemTextBox[id];
} }
function updatePositions(textElement, id, index) { function updatePositions(textElement, id, index) {

Loading…
Cancel
Save