Skip to content

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

Fix legend item width when multiple charts rendered - #1011

parent 2df80e98
Hide whitespace changes
Inline Side-by-side
Showing with 49 additions and 10 deletions
c3.js
View file @ dc50b136
...@@ -3812,6 +3812,7 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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) {
......
c3.min.js
View file @ dc50b136
This source diff could not be displayed because it is too large. You can view the blob instead.
spec/legend-spec.js
View file @ dc50b136
...@@ -7,6 +7,45 @@ describe('c3 chart legend', function () { ...@@ -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 () {
......
src/legend.js
View file @ dc50b136
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) { ...@@ -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) { ...@@ -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) {
......
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