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

Fix padding.left when rotated category axis - #872

pull/888/head
Masayuki Tanaka 10 years ago
parent
b03d5309c8
commit
6292548a5e
9 changed files with 81 additions and 50 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. 42
      c3.js
  2. 10
      c3.min.js
  3. 9
      spec/axis-spec.js
  4. 2
      spec/grid-spec.js
  5. 16
      spec/interaction-spec.js
  6. 2
      spec/legend-spec.js
  7. 8
      spec/tooltip-spec.js
  8. 34
      src/axis.js
  9. 8
      src/core.js

42
c3.js
Unescape View File

@ -478,13 +478,7 @@
if (targetsToShow.length) { if (targetsToShow.length) {
$$.updateXDomain(targetsToShow, withUpdateXDomain, withUpdateOrgXDomain, withTrimXDomain); $$.updateXDomain(targetsToShow, withUpdateXDomain, withUpdateOrgXDomain, withTrimXDomain);
if (!config.axis_x_tick_values) { if (!config.axis_x_tick_values) {
if (config.axis_x_tick_fit || config.axis_x_tick_count) { tickValues = $$.updateXAxisTickValues(targetsToShow);
tickValues = $$.generateTickValues($$.mapTargetsToUniqueXs(targetsToShow), config.axis_x_tick_count, $$.isTimeSeries());
} else {
tickValues = undefined;
}
$$.xAxis.tickValues(tickValues);
$$.subXAxis.tickValues(tickValues);
} }
} else { } else {
$$.xAxis.tickValues([]); $$.xAxis.tickValues([]);
@ -4068,13 +4062,14 @@
.attr("transform", config.axis_rotated ? "" : "rotate(-90)") .attr("transform", config.axis_rotated ? "" : "rotate(-90)")
.style("text-anchor", $$.textAnchorForY2AxisLabel.bind($$)); .style("text-anchor", $$.textAnchorForY2AxisLabel.bind($$));
}; };
c3_chart_internal_fn.getXAxis = function (scale, orient, tickFormat, tickValues, withOuterTick) { c3_chart_internal_fn.getXAxis = function (scale, orient, tickFormat, tickValues, withOuterTick, withoutTransition) {
var $$ = this, config = $$.config, var $$ = this, config = $$.config,
axisParams = { axisParams = {
isCategory: $$.isCategorized(), isCategory: $$.isCategorized(),
withOuterTick: withOuterTick, withOuterTick: withOuterTick,
tickMultiline: config.axis_x_tick_multiline, tickMultiline: config.axis_x_tick_multiline,
tickWidth: config.axis_x_tick_width tickWidth: config.axis_x_tick_width,
withoutTransition: withoutTransition,
}, },
axis = c3_axis($$.d3, axisParams).scale(scale).orient(orient); axis = c3_axis($$.d3, axisParams).scale(scale).orient(orient);
@ -4101,6 +4096,19 @@
return axis; return axis;
}; };
c3_chart_internal_fn.updateXAxisTickValues = function (targets, axis) {
var $$ = this, config = $$.config, tickValues;
if (config.axis_x_tick_fit || config.axis_x_tick_count) {
tickValues = $$.generateTickValues($$.mapTargetsToUniqueXs(targets), config.axis_x_tick_count, $$.isTimeSeries());
}
if (axis) {
axis.tickValues(tickValues);
} else {
$$.xAxis.tickValues(tickValues);
$$.subXAxis.tickValues(tickValues);
}
return tickValues;
};
c3_chart_internal_fn.getYAxis = function (scale, orient, tickFormat, tickValues, withOuterTick) { c3_chart_internal_fn.getYAxis = function (scale, orient, tickFormat, tickValues, withOuterTick) {
var axisParams = {withOuterTick: withOuterTick}, var axisParams = {withOuterTick: withOuterTick},
axis = c3_axis(this.d3, axisParams).scale(scale).orient(orient).tickFormat(tickFormat); axis = c3_axis(this.d3, axisParams).scale(scale).orient(orient).tickFormat(tickFormat);
@ -4304,7 +4312,7 @@
c3_chart_internal_fn.getMaxTickWidth = function (id, withoutRecompute) { c3_chart_internal_fn.getMaxTickWidth = function (id, withoutRecompute) {
var $$ = this, config = $$.config, var $$ = this, config = $$.config,
maxWidth = 0, targetsToShow, scale, axis; maxWidth = 0, targetsToShow, scale, axis, body, svg;
if (withoutRecompute && $$.currentMaxTickWidths[id]) { if (withoutRecompute && $$.currentMaxTickWidths[id]) {
return $$.currentMaxTickWidths[id]; return $$.currentMaxTickWidths[id];
} }
@ -4319,13 +4327,21 @@
} else { } else {
scale = $$.x.copy().domain($$.getXDomain(targetsToShow)); scale = $$.x.copy().domain($$.getXDomain(targetsToShow));
axis = $$.getXAxis(scale, $$.xOrient, $$.xAxisTickFormat, $$.xAxisTickValues); axis = $$.getXAxis(scale, $$.xOrient, $$.xAxisTickFormat, $$.xAxisTickValues);
$$.updateXAxisTickValues(targetsToShow, axis);
} }
$$.d3.select('body').append("g").style('visibility', 'hidden').call(axis).each(function () { body = this.d3.select('body').classed('c3', true);
svg = body.append('svg').style('visibility', 'hidden');
svg.append('g').call(axis).each(function () {
$$.d3.select(this).selectAll('text tspan').each(function () { $$.d3.select(this).selectAll('text tspan').each(function () {
var box = this.getBoundingClientRect(); var box = this.getBoundingClientRect();
if (box.left > 0 && maxWidth < box.width) { maxWidth = box.width; } if (box.left >= 0 && maxWidth < box.width) { maxWidth = box.width; }
}); });
}).remove(); });
// TODO: time lag to get maxWidth
window.setTimeout(function () {
svg.remove();
}, 100);
body.classed('c3', false);
} }
$$.currentMaxTickWidths[id] = maxWidth <= 0 ? $$.currentMaxTickWidths[id] : maxWidth; $$.currentMaxTickWidths[id] = maxWidth <= 0 ? $$.currentMaxTickWidths[id] : maxWidth;
return $$.currentMaxTickWidths[id]; return $$.currentMaxTickWidths[id];

10
c3.min.js vendored
View File

File diff suppressed because one or more lines are too long

9
spec/axis-spec.js
Unescape View File

@ -380,11 +380,10 @@ describe('c3 chart axis', function () {
expectedTickTexts = [ expectedTickTexts = [
'this is a very', 'this is a very',
'long tick text', 'long tick text',
'on category', 'on category axis'
'axis',
], ],
expectedX = '0'; expectedX = '0';
expect(tspans.size()).toBe(4); expect(tspans.size()).toBe(3);
tspans.each(function (d, i) { tspans.each(function (d, i) {
var tspan = d3.select(this); var tspan = d3.select(this);
expect(tspan.text()).toBe(expectedTickTexts[i]); expect(tspan.text()).toBe(expectedTickTexts[i]);
@ -697,7 +696,7 @@ describe('c3 chart axis', function () {
it('should not have inner y axis', function () { it('should not have inner y axis', function () {
var paddingLeft = chart.internal.getCurrentPaddingLeft(), var paddingLeft = chart.internal.getCurrentPaddingLeft(),
tickTexts = chart.internal.main.selectAll('.c3-axis-y g.tick text'); tickTexts = chart.internal.main.selectAll('.c3-axis-y g.tick text');
expect(paddingLeft).toBe(50); expect(paddingLeft).toBeGreaterThan(19);
tickTexts.each(function () { tickTexts.each(function () {
expect(+d3.select(this).attr('x')).toBeLessThan(0); expect(+d3.select(this).attr('x')).toBeLessThan(0);
}); });
@ -742,7 +741,7 @@ describe('c3 chart axis', function () {
it('should not have inner y axis', function () { it('should not have inner y axis', function () {
var paddingRight = chart.internal.getCurrentPaddingRight(), var paddingRight = chart.internal.getCurrentPaddingRight(),
tickTexts = chart.internal.main.selectAll('.c3-axis-2y g.tick text'); tickTexts = chart.internal.main.selectAll('.c3-axis-2y g.tick text');
expect(paddingRight).toBeGreaterThan(39); expect(paddingRight).toBeGreaterThan(19);
tickTexts.each(function () { tickTexts.each(function () {
expect(+d3.select(this).attr('x')).toBeGreaterThan(0); expect(+d3.select(this).attr('x')).toBeGreaterThan(0);
}); });

2
spec/grid-spec.js
Unescape View File

@ -119,7 +119,7 @@ describe('c3 chart grid', function () {
var line = d3.select(this), var line = d3.select(this),
l = line.select('line'), l = line.select('line'),
t = line.select('text'); t = line.select('text');
expect(+l.attr('x1')).toBeCloseTo(expectedX1[i], -1); expect(+l.attr('x1')).toBeCloseTo(expectedX1[i], -2);
expect(t.text()).toBe(expectedText[i]); expect(t.text()).toBe(expectedText[i]);
}); });
}); });

16
spec/interaction-spec.js
Unescape View File

@ -46,8 +46,8 @@ describe('c3 chart interaction', function () {
widths = [60, 67.5, 202, 194]; widths = [60, 67.5, 202, 194];
d3.selectAll('.c3-event-rect').each(function (d, i) { d3.selectAll('.c3-event-rect').each(function (d, i) {
var box = d3.select(this).node().getBoundingClientRect(); var box = d3.select(this).node().getBoundingClientRect();
expect(box.left).toBe(lefts[i]); expect(box.left).toBeCloseTo(lefts[i], -2);
expect(box.width).toBe(widths[i]); expect(box.width).toBeCloseTo(widths[i], -2);
}); });
}); });
@ -70,8 +70,8 @@ describe('c3 chart interaction', function () {
expect(eventRects.size()).toBe(1); expect(eventRects.size()).toBe(1);
eventRects.each(function () { eventRects.each(function () {
var box = d3.select(this).node().getBoundingClientRect(); var box = d3.select(this).node().getBoundingClientRect();
expect(box.left).toBe(40.5); expect(box.left).toBeCloseTo(40.5, -2);
expect(box.width).toBe(598); expect(box.width).toBeCloseTo(598, -2);
}); });
}); });
}); });
@ -96,8 +96,8 @@ describe('c3 chart interaction', function () {
widths = [149.5, 160, 147, 136]; widths = [149.5, 160, 147, 136];
d3.selectAll('.c3-event-rect').each(function (d, i) { d3.selectAll('.c3-event-rect').each(function (d, i) {
var box = d3.select(this).node().getBoundingClientRect(); var box = d3.select(this).node().getBoundingClientRect();
expect(box.left).toBe(lefts[i]); expect(box.left).toBeCloseTo(lefts[i], -2);
expect(box.width).toBe(widths[i]); expect(box.width).toBeCloseTo(widths[i], -2);
}); });
}); });
@ -120,8 +120,8 @@ describe('c3 chart interaction', function () {
expect(eventRects.size()).toBe(1); expect(eventRects.size()).toBe(1);
eventRects.each(function () { eventRects.each(function () {
var box = d3.select(this).node().getBoundingClientRect(); var box = d3.select(this).node().getBoundingClientRect();
expect(box.left).toBe(40.5); expect(box.left).toBeCloseTo(40.5, -2);
expect(box.width).toBe(598); expect(box.width).toBeCloseTo(598, -2);
}); });
}); });

2
spec/legend-spec.js
Unescape View File

@ -56,7 +56,7 @@ describe('c3 chart legend', function () {
it('should be positioned properly', function () { it('should be positioned properly', function () {
var box = d3.select('.c3-legend-background').node().getBoundingClientRect(); var box = d3.select('.c3-legend-background').node().getBoundingClientRect();
expect(box.top).toBe(5.5); expect(box.top).toBe(5.5);
expect(box.left).toBe(60.5); expect(box.left).toBeGreaterThan(30);
}); });
it('should have automatically calculated height', function () { it('should have automatically calculated height', function () {

8
spec/tooltip-spec.js
Unescape View File

@ -44,9 +44,9 @@ describe('c3 chart tooltip', function () {
top = Math.floor(+tooltipContainer.style('top').replace(/px/, '')), top = Math.floor(+tooltipContainer.style('top').replace(/px/, '')),
left = Math.floor(+tooltipContainer.style('left').replace(/px/, '')), left = Math.floor(+tooltipContainer.style('left').replace(/px/, '')),
topExpected = 115, topExpected = 115,
leftExpected = 307; leftExpected = 280;
expect(top).toBe(topExpected); expect(top).toBe(topExpected);
expect(left).toBe(leftExpected); expect(left).toBeGreaterThan(leftExpected);
}); });
}); });
@ -66,9 +66,9 @@ describe('c3 chart tooltip', function () {
top = Math.floor(+tooltipContainer.style('top').replace(/px/, '')), top = Math.floor(+tooltipContainer.style('top').replace(/px/, '')),
left = Math.floor(+tooltipContainer.style('left').replace(/px/, '')), left = Math.floor(+tooltipContainer.style('left').replace(/px/, '')),
topExpected = 115, topExpected = 115,
leftExpected = 307; leftExpected = 280;
expect(top).toBe(topExpected); expect(top).toBe(topExpected);
expect(left).toBe(leftExpected); expect(left).toBeGreaterThan(leftExpected);
}); });
}); });

34
src/axis.js
Unescape View File

@ -30,13 +30,14 @@ c3_chart_internal_fn.initAxis = function () {
.attr("transform", config.axis_rotated ? "" : "rotate(-90)") .attr("transform", config.axis_rotated ? "" : "rotate(-90)")
.style("text-anchor", $$.textAnchorForY2AxisLabel.bind($$)); .style("text-anchor", $$.textAnchorForY2AxisLabel.bind($$));
}; };
c3_chart_internal_fn.getXAxis = function (scale, orient, tickFormat, tickValues, withOuterTick) { c3_chart_internal_fn.getXAxis = function (scale, orient, tickFormat, tickValues, withOuterTick, withoutTransition) {
var $$ = this, config = $$.config, var $$ = this, config = $$.config,
axisParams = { axisParams = {
isCategory: $$.isCategorized(), isCategory: $$.isCategorized(),
withOuterTick: withOuterTick, withOuterTick: withOuterTick,
tickMultiline: config.axis_x_tick_multiline, tickMultiline: config.axis_x_tick_multiline,
tickWidth: config.axis_x_tick_width tickWidth: config.axis_x_tick_width,
withoutTransition: withoutTransition,
}, },
axis = c3_axis($$.d3, axisParams).scale(scale).orient(orient); axis = c3_axis($$.d3, axisParams).scale(scale).orient(orient);
@ -63,6 +64,19 @@ c3_chart_internal_fn.getXAxis = function (scale, orient, tickFormat, tickValues,
return axis; return axis;
}; };
c3_chart_internal_fn.updateXAxisTickValues = function (targets, axis) {
var $$ = this, config = $$.config, tickValues;
if (config.axis_x_tick_fit || config.axis_x_tick_count) {
tickValues = $$.generateTickValues($$.mapTargetsToUniqueXs(targets), config.axis_x_tick_count, $$.isTimeSeries());
}
if (axis) {
axis.tickValues(tickValues);
} else {
$$.xAxis.tickValues(tickValues);
$$.subXAxis.tickValues(tickValues);
}
return tickValues;
};
c3_chart_internal_fn.getYAxis = function (scale, orient, tickFormat, tickValues, withOuterTick) { c3_chart_internal_fn.getYAxis = function (scale, orient, tickFormat, tickValues, withOuterTick) {
var axisParams = {withOuterTick: withOuterTick}, var axisParams = {withOuterTick: withOuterTick},
axis = c3_axis(this.d3, axisParams).scale(scale).orient(orient).tickFormat(tickFormat); axis = c3_axis(this.d3, axisParams).scale(scale).orient(orient).tickFormat(tickFormat);
@ -266,7 +280,7 @@ c3_chart_internal_fn.rotateTickText = function (axis, transition, rotate) {
c3_chart_internal_fn.getMaxTickWidth = function (id, withoutRecompute) { c3_chart_internal_fn.getMaxTickWidth = function (id, withoutRecompute) {
var $$ = this, config = $$.config, var $$ = this, config = $$.config,
maxWidth = 0, targetsToShow, scale, axis; maxWidth = 0, targetsToShow, scale, axis, body, svg;
if (withoutRecompute && $$.currentMaxTickWidths[id]) { if (withoutRecompute && $$.currentMaxTickWidths[id]) {
return $$.currentMaxTickWidths[id]; return $$.currentMaxTickWidths[id];
} }
@ -281,13 +295,21 @@ c3_chart_internal_fn.getMaxTickWidth = function (id, withoutRecompute) {
} else { } else {
scale = $$.x.copy().domain($$.getXDomain(targetsToShow)); scale = $$.x.copy().domain($$.getXDomain(targetsToShow));
axis = $$.getXAxis(scale, $$.xOrient, $$.xAxisTickFormat, $$.xAxisTickValues); axis = $$.getXAxis(scale, $$.xOrient, $$.xAxisTickFormat, $$.xAxisTickValues);
$$.updateXAxisTickValues(targetsToShow, axis);
} }
$$.d3.select('body').append("g").style('visibility', 'hidden').call(axis).each(function () { body = this.d3.select('body').classed('c3', true);
svg = body.append('svg').style('visibility', 'hidden');
svg.append('g').call(axis).each(function () {
$$.d3.select(this).selectAll('text tspan').each(function () { $$.d3.select(this).selectAll('text tspan').each(function () {
var box = this.getBoundingClientRect(); var box = this.getBoundingClientRect();
if (box.left > 0 && maxWidth < box.width) { maxWidth = box.width; } if (box.left >= 0 && maxWidth < box.width) { maxWidth = box.width; }
}); });
}).remove(); });
// TODO: time lag to get maxWidth
window.setTimeout(function () {
svg.remove();
}, 100);
body.classed('c3', false);
} }
$$.currentMaxTickWidths[id] = maxWidth <= 0 ? $$.currentMaxTickWidths[id] : maxWidth; $$.currentMaxTickWidths[id] = maxWidth <= 0 ? $$.currentMaxTickWidths[id] : maxWidth;
return $$.currentMaxTickWidths[id]; return $$.currentMaxTickWidths[id];

8
src/core.js
Unescape View File

@ -473,13 +473,7 @@ c3_chart_internal_fn.redraw = function (options, transitions) {
if (targetsToShow.length) { if (targetsToShow.length) {
$$.updateXDomain(targetsToShow, withUpdateXDomain, withUpdateOrgXDomain, withTrimXDomain); $$.updateXDomain(targetsToShow, withUpdateXDomain, withUpdateOrgXDomain, withTrimXDomain);
if (!config.axis_x_tick_values) { if (!config.axis_x_tick_values) {
if (config.axis_x_tick_fit || config.axis_x_tick_count) { tickValues = $$.updateXAxisTickValues(targetsToShow);
tickValues = $$.generateTickValues($$.mapTargetsToUniqueXs(targetsToShow), config.axis_x_tick_count, $$.isTimeSeries());
} else {
tickValues = undefined;
}
$$.xAxis.tickValues(tickValues);
$$.subXAxis.tickValues(tickValues);
} }
} else { } else {
$$.xAxis.tickValues([]); $$.xAxis.tickValues([]);

Write Preview
Loading…
Cancel
Save