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

Fix legend position to be centered - #515

pull/555/head
Masayuki Tanaka 10 years ago
parent
d9c280a587
commit
2cb20df9ea
4 changed files with 26 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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 22
      c3.js
  2. 4
      c3.min.js
  3. 20
      src/legend.js
  4. 2
      src/text.js

22
c3.js
Unescape View File

@ -3000,7 +3000,7 @@
};
c3_chart_internal_fn.getTextRect = function (text, cls) {
var rect;
this.d3.select('body').selectAll('.dummy')
this.svg.selectAll('.dummy')
.data([text])
.enter().append('text')
.classed(cls ? cls : "", true)
@ -3462,6 +3462,7 @@
top: $$.isLegendTop ? $$.getCurrentPaddingTop() + config.legend_inset_y + 5.5 : $$.currentHeight - legendHeight - $$.getCurrentPaddingBottom() - config.legend_inset_y,
left: $$.isLegendLeft ? $$.getCurrentPaddingLeft() + config.legend_inset_x + 0.5 : $$.currentWidth - legendWidth - $$.getCurrentPaddingRight() - config.legend_inset_x + 0.5
};
$$.margin3 = {
top: $$.isLegendRight ? 0 : $$.isLegendInset ? insetLegendPosition.top : $$.currentHeight - legendHeight,
right: NaN,
@ -3552,7 +3553,7 @@
c3_chart_internal_fn.updateLegend = function (targetIds, options, transitions) {
var $$ = this, config = $$.config;
var xForLegend, xForLegendText, xForLegendRect, yForLegend, yForLegendText, yForLegendRect;
var paddingTop = 4, paddingRight = 36, maxWidth = 0, maxHeight = 0, posMin = 10;
var paddingTop = 4, paddingRight = 10, maxWidth = 0, maxHeight = 0, posMin = 10, tileWidth = 15;
var l, totalLength = 0, offsets = {}, widths = {}, heights = {}, margins = [0], steps = {}, step = 0;
var withTransition, withTransitionForTransform;
var hasFocused = $$.legend.selectAll('.' + CLASS.legendItemFocused).size();
@ -3562,10 +3563,11 @@
withTransition = getOption(options, "withTransition", true);
withTransitionForTransform = getOption(options, "withTransitionForTransform", true);
function updatePositions(textElement, id, reset) {
var box = $$.getTextRect(textElement.textContent, CLASS.legendItem),
itemWidth = Math.ceil((box.width + paddingRight) / 10) * 10,
itemHeight = Math.ceil((box.height + paddingTop) / 10) * 10,
function updatePositions(textElement, id, index) {
var reset = index === 0, isLast = index === targetIds.length - 1,
box = $$.getTextRect(textElement.textContent, CLASS.legendItem),
itemWidth = box.width + tileWidth + (isLast && !$$.isLegendRight ? 0 : paddingRight),
itemHeight = box.height + paddingTop,
itemLength = $$.isLegendRight || $$.isLegendInset ? itemHeight : itemWidth,
areaLength = $$.isLegendRight || $$.isLegendInset ? $$.getLegendHeight() : $$.getLegendWidth(),
margin, maxLength;
@ -3634,8 +3636,8 @@
}
xForLegendText = function (id, i) { return xForLegend(id, i) + 14; };
yForLegendText = function (id, i) { return yForLegend(id, i) + 9; };
xForLegendRect = function (id, i) { return xForLegend(id, i) - 4; };
yForLegendRect = function (id, i) { return yForLegend(id, i) - 7; };
xForLegendRect = function (id, i) { return xForLegend(id, i); };
yForLegendRect = function (id, i) { return yForLegend(id, i) - 5; };
// Define g for legend area
l = $$.legend.selectAll('.' + CLASS.legendItem)
@ -3667,7 +3669,7 @@
});
l.append('text')
.text(function (id) { return isDefined(config.data_names[id]) ? config.data_names[id] : id; })
.each(function (id, i) { updatePositions(this, id, i === 0); })
.each(function (id, i) { updatePositions(this, id, i); })
.style("pointer-events", "none")
.attr('x', $$.isLegendRight || $$.isLegendInset ? xForLegendText : -200)
.attr('y', $$.isLegendRight || $$.isLegendInset ? -200 : yForLegendText);
@ -3696,7 +3698,7 @@
texts = $$.legend.selectAll('text')
.data(targetIds)
.text(function (id) { return isDefined(config.data_names[id]) ? config.data_names[id] : id; }) // MEMO: needed for update
.each(function (id, i) { updatePositions(this, id, i === 0); });
.each(function (id, i) { updatePositions(this, id, i); });
(withTransition ? texts.transition() : texts)
.attr('x', xForLegendText)
.attr('y', yForLegendText);

4
c3.min.js vendored
View File

File diff suppressed because one or more lines are too long

20
src/legend.js
Unescape View File

@ -14,6 +14,7 @@ c3_chart_internal_fn.updateSizeForLegend = function (legendHeight, legendWidth)
top: $$.isLegendTop ? $$.getCurrentPaddingTop() + config.legend_inset_y + 5.5 : $$.currentHeight - legendHeight - $$.getCurrentPaddingBottom() - config.legend_inset_y,
left: $$.isLegendLeft ? $$.getCurrentPaddingLeft() + config.legend_inset_x + 0.5 : $$.currentWidth - legendWidth - $$.getCurrentPaddingRight() - config.legend_inset_x + 0.5
};
$$.margin3 = {
top: $$.isLegendRight ? 0 : $$.isLegendInset ? insetLegendPosition.top : $$.currentHeight - legendHeight,
right: NaN,
@ -104,7 +105,7 @@ c3_chart_internal_fn.hideLegend = function (targetIds) {
c3_chart_internal_fn.updateLegend = function (targetIds, options, transitions) {
var $$ = this, config = $$.config;
var xForLegend, xForLegendText, xForLegendRect, yForLegend, yForLegendText, yForLegendRect;
var paddingTop = 4, paddingRight = 36, maxWidth = 0, maxHeight = 0, posMin = 10;
var paddingTop = 4, paddingRight = 10, maxWidth = 0, maxHeight = 0, posMin = 10, tileWidth = 15;
var l, totalLength = 0, offsets = {}, widths = {}, heights = {}, margins = [0], steps = {}, step = 0;
var withTransition, withTransitionForTransform;
var hasFocused = $$.legend.selectAll('.' + CLASS.legendItemFocused).size();
@ -114,10 +115,11 @@ c3_chart_internal_fn.updateLegend = function (targetIds, options, transitions) {
withTransition = getOption(options, "withTransition", true);
withTransitionForTransform = getOption(options, "withTransitionForTransform", true);
function updatePositions(textElement, id, reset) {
var box = $$.getTextRect(textElement.textContent, CLASS.legendItem),
itemWidth = Math.ceil((box.width + paddingRight) / 10) * 10,
itemHeight = Math.ceil((box.height + paddingTop) / 10) * 10,
function updatePositions(textElement, id, index) {
var reset = index === 0, isLast = index === targetIds.length - 1,
box = $$.getTextRect(textElement.textContent, CLASS.legendItem),
itemWidth = box.width + tileWidth + (isLast && !$$.isLegendRight ? 0 : paddingRight),
itemHeight = box.height + paddingTop,
itemLength = $$.isLegendRight || $$.isLegendInset ? itemHeight : itemWidth,
areaLength = $$.isLegendRight || $$.isLegendInset ? $$.getLegendHeight() : $$.getLegendWidth(),
margin, maxLength;
@ -186,8 +188,8 @@ c3_chart_internal_fn.updateLegend = function (targetIds, options, transitions) {
}
xForLegendText = function (id, i) { return xForLegend(id, i) + 14; };
yForLegendText = function (id, i) { return yForLegend(id, i) + 9; };
xForLegendRect = function (id, i) { return xForLegend(id, i) - 4; };
yForLegendRect = function (id, i) { return yForLegend(id, i) - 7; };
xForLegendRect = function (id, i) { return xForLegend(id, i); };
yForLegendRect = function (id, i) { return yForLegend(id, i) - 5; };
// Define g for legend area
l = $$.legend.selectAll('.' + CLASS.legendItem)
@ -219,7 +221,7 @@ c3_chart_internal_fn.updateLegend = function (targetIds, options, transitions) {
});
l.append('text')
.text(function (id) { return isDefined(config.data_names[id]) ? config.data_names[id] : id; })
.each(function (id, i) { updatePositions(this, id, i === 0); })
.each(function (id, i) { updatePositions(this, id, i); })
.style("pointer-events", "none")
.attr('x', $$.isLegendRight || $$.isLegendInset ? xForLegendText : -200)
.attr('y', $$.isLegendRight || $$.isLegendInset ? -200 : yForLegendText);
@ -248,7 +250,7 @@ c3_chart_internal_fn.updateLegend = function (targetIds, options, transitions) {
texts = $$.legend.selectAll('text')
.data(targetIds)
.text(function (id) { return isDefined(config.data_names[id]) ? config.data_names[id] : id; }) // MEMO: needed for update
.each(function (id, i) { updatePositions(this, id, i === 0); });
.each(function (id, i) { updatePositions(this, id, i); });
(withTransition ? texts.transition() : texts)
.attr('x', xForLegendText)
.attr('y', yForLegendText);

2
src/text.js
Unescape View File

@ -48,7 +48,7 @@ c3_chart_internal_fn.addTransitionForText = function (transitions, xForText, yFo
};
c3_chart_internal_fn.getTextRect = function (text, cls) {
var rect;
this.d3.select('body').selectAll('.dummy')
this.svg.selectAll('.dummy')
.data([text])
.enter().append('text')
.classed(cls ? cls : "", true)

Write Preview
Loading…
Cancel
Save