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

Fix axis.y2.inner - #742

pull/813/head
Masayuki Tanaka 10 years ago
parent
56d9d450f1
commit
bfac88c2e5
7 changed files with 112 additions and 28 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. 7
      c3.js
  2. 10
      c3.min.js
  3. 90
      spec/axis-spec.js
  4. 22
      spec/interaction-spec.js
  5. 4
      spec/tooltip-spec.js
  6. 2
      src/core.js
  7. 5
      src/size.js

7
c3.js
Unescape View File

@ -114,7 +114,7 @@
$$.xOrient = config.axis_rotated ? "left" : "bottom"; $$.xOrient = config.axis_rotated ? "left" : "bottom";
$$.yOrient = config.axis_rotated ? (config.axis_y_inner ? "top" : "bottom") : (config.axis_y_inner ? "right" : "left"); $$.yOrient = config.axis_rotated ? (config.axis_y_inner ? "top" : "bottom") : (config.axis_y_inner ? "right" : "left");
$$.y2Orient = config.axis_rotated ? (config.axis_y_inner ? "bottom" : "top") : (config.axis_y_inner ? "left" : "right"); $$.y2Orient = config.axis_rotated ? (config.axis_y2_inner ? "bottom" : "top") : (config.axis_y2_inner ? "left" : "right");
$$.subXOrient = config.axis_rotated ? "left" : "bottom"; $$.subXOrient = config.axis_rotated ? "left" : "bottom";
$$.isLegendRight = config.legend_position === 'right'; $$.isLegendRight = config.legend_position === 'right';
@ -2519,7 +2519,7 @@
} else if (config.axis_rotated) { } else if (config.axis_rotated) {
return defaultPadding + legendWidthOnRight; return defaultPadding + legendWidthOnRight;
} else if (!config.axis_y2_show || config.axis_y2_inner) { // && !config.axis_rotated } else if (!config.axis_y2_show || config.axis_y2_inner) { // && !config.axis_rotated
return defaultPadding + legendWidthOnRight + ($$.getY2AxisLabelPosition().isOuter ? 20 : 0); return 2 + legendWidthOnRight + ($$.getY2AxisLabelPosition().isOuter ? 20 : 0);
} else { } else {
return ceil10($$.getAxisWidthByAxisId('y2')) + legendWidthOnRight; return ceil10($$.getAxisWidthByAxisId('y2')) + legendWidthOnRight;
} }
@ -2547,9 +2547,10 @@
c3_chart_internal_fn.getSvgLeft = function (withoutRecompute) { c3_chart_internal_fn.getSvgLeft = function (withoutRecompute) {
var $$ = this, config = $$.config, var $$ = this, config = $$.config,
hasLeftAxisRect = config.axis_rotated || (!config.axis_rotated && !config.axis_y_inner),
leftAxisClass = config.axis_rotated ? CLASS.axisX : CLASS.axisY, leftAxisClass = config.axis_rotated ? CLASS.axisX : CLASS.axisY,
leftAxis = $$.main.select('.' + leftAxisClass).node(), leftAxis = $$.main.select('.' + leftAxisClass).node(),
svgRect = leftAxis ? leftAxis.getBoundingClientRect() : {right: 0}, svgRect = leftAxis && hasLeftAxisRect ? leftAxis.getBoundingClientRect() : {right: 0},
chartRect = $$.selectChart.node().getBoundingClientRect(), chartRect = $$.selectChart.node().getBoundingClientRect(),
hasArc = $$.hasArcType(), hasArc = $$.hasArcType(),
svgLeft = svgRect.right - chartRect.left - (hasArc ? 0 : $$.getCurrentPaddingLeft(withoutRecompute)); svgLeft = svgRect.right - chartRect.left - (hasArc ? 0 : $$.getCurrentPaddingLeft(withoutRecompute));

10
c3.min.js vendored
View File

File diff suppressed because one or more lines are too long

90
spec/axis-spec.js
Unescape View File

@ -674,4 +674,94 @@ describe('c3 chart axis', function () {
}); });
}); });
describe('axis.y.inner', function () {
it('should update args', function () {
args = {
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
]
},
axis: {
y: {
inner: false
}
}
};
expect(true).toBeTruthy();
});
it('should not have inner y axis', function () {
var paddingLeft = chart.internal.getCurrentPaddingLeft(),
tickTexts = chart.internal.main.selectAll('.c3-axis-y g.tick text');
expect(paddingLeft).toBe(50);
tickTexts.each(function () {
expect(+d3.select(this).attr('x')).toBeLessThan(0);
});
});
it('should update args to have inner y axis', function () {
args.axis.y.inner = true;
expect(true).toBeTruthy();
});
it('should have inner y axis', function () {
var paddingLeft = chart.internal.getCurrentPaddingLeft(),
tickTexts = chart.internal.main.selectAll('.c3-axis-y g.tick text');
expect(paddingLeft).toBe(1);
tickTexts.each(function () {
expect(+d3.select(this).attr('x')).toBeGreaterThan(0);
});
});
});
describe('axis.y2.inner', function () {
it('should update args', function () {
args = {
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
]
},
axis: {
y2: {
show: true,
inner: false
}
}
};
expect(true).toBeTruthy();
});
it('should not have inner y axis', function () {
var paddingRight = chart.internal.getCurrentPaddingRight(),
tickTexts = chart.internal.main.selectAll('.c3-axis-2y g.tick text');
expect(paddingRight).toBe(40);
tickTexts.each(function () {
expect(+d3.select(this).attr('x')).toBeGreaterThan(0);
});
});
it('should update args to have inner y axis', function () {
args.axis.y2.inner = true;
expect(true).toBeTruthy();
});
it('should have inner y axis', function () {
var paddingRight = chart.internal.getCurrentPaddingRight(),
tickTexts = chart.internal.main.selectAll('.c3-axis-2y g.tick text');
expect(paddingRight).toBe(2);
tickTexts.each(function () {
expect(+d3.select(this).attr('x')).toBeLessThan(0);
});
});
});
}); });

22
spec/interaction-spec.js
Unescape View File

@ -19,16 +19,8 @@ describe('c3 chart interaction', function () {
}; };
beforeEach(function (done) { beforeEach(function (done) {
if (typeof chart === 'undefined') { chart = window.initChart(chart, args, done);
window.initDom();
}
chart = window.c3.generate(args);
d3 = chart.internal.d3; d3 = chart.internal.d3;
chart.internal.d3.select('.jasmine_html-reporter').style('display', 'none');
window.setTimeout(function () {
done();
}, 10);
}); });
describe('generate event rects', function () { describe('generate event rects', function () {
@ -50,8 +42,8 @@ describe('c3 chart interaction', function () {
}); });
it('should have 4 event rects properly', function () { it('should have 4 event rects properly', function () {
var lefts = [77.5, 137, 203.5, 402.5], var lefts = [78, 138, 205.5, 407.5],
widths = [59.5, 66.5, 199, 191.5]; 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).toBe(lefts[i]);
@ -79,7 +71,7 @@ describe('c3 chart interaction', function () {
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).toBe(40.5);
expect(box.width).toBe(590); expect(box.width).toBe(598);
}); });
}); });
}); });
@ -100,8 +92,8 @@ describe('c3 chart interaction', function () {
}); });
it('should have 4 event rects properly', function () { it('should have 4 event rects properly', function () {
var lefts = [43.5, 191, 349, 494], var lefts = [43.5, 193, 353, 500],
widths = [147.5, 158, 145, 134]; 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).toBe(lefts[i]);
@ -129,7 +121,7 @@ describe('c3 chart interaction', function () {
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).toBe(40.5);
expect(box.width).toBe(590); expect(box.width).toBe(598);
}); });
}); });

4
spec/tooltip-spec.js
Unescape View File

@ -35,7 +35,7 @@ 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 = 304; leftExpected = 307;
expect(top).toBe(topExpected); expect(top).toBe(topExpected);
expect(left).toBe(leftExpected); expect(left).toBe(leftExpected);
}); });
@ -57,7 +57,7 @@ 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 = 304; leftExpected = 307;
expect(top).toBe(topExpected); expect(top).toBe(topExpected);
expect(left).toBe(leftExpected); expect(left).toBe(leftExpected);
}); });

2
src/core.js
Unescape View File

@ -109,7 +109,7 @@ c3_chart_internal_fn.initParams = function () {
$$.xOrient = config.axis_rotated ? "left" : "bottom"; $$.xOrient = config.axis_rotated ? "left" : "bottom";
$$.yOrient = config.axis_rotated ? (config.axis_y_inner ? "top" : "bottom") : (config.axis_y_inner ? "right" : "left"); $$.yOrient = config.axis_rotated ? (config.axis_y_inner ? "top" : "bottom") : (config.axis_y_inner ? "right" : "left");
$$.y2Orient = config.axis_rotated ? (config.axis_y_inner ? "bottom" : "top") : (config.axis_y_inner ? "left" : "right"); $$.y2Orient = config.axis_rotated ? (config.axis_y2_inner ? "bottom" : "top") : (config.axis_y2_inner ? "left" : "right");
$$.subXOrient = config.axis_rotated ? "left" : "bottom"; $$.subXOrient = config.axis_rotated ? "left" : "bottom";
$$.isLegendRight = config.legend_position === 'right'; $$.isLegendRight = config.legend_position === 'right';

5
src/size.js
Unescape View File

@ -35,7 +35,7 @@ c3_chart_internal_fn.getCurrentPaddingRight = function () {
} else if (config.axis_rotated) { } else if (config.axis_rotated) {
return defaultPadding + legendWidthOnRight; return defaultPadding + legendWidthOnRight;
} else if (!config.axis_y2_show || config.axis_y2_inner) { // && !config.axis_rotated } else if (!config.axis_y2_show || config.axis_y2_inner) { // && !config.axis_rotated
return defaultPadding + legendWidthOnRight + ($$.getY2AxisLabelPosition().isOuter ? 20 : 0); return 2 + legendWidthOnRight + ($$.getY2AxisLabelPosition().isOuter ? 20 : 0);
} else { } else {
return ceil10($$.getAxisWidthByAxisId('y2')) + legendWidthOnRight; return ceil10($$.getAxisWidthByAxisId('y2')) + legendWidthOnRight;
} }
@ -63,9 +63,10 @@ c3_chart_internal_fn.getParentHeight = function () {
c3_chart_internal_fn.getSvgLeft = function (withoutRecompute) { c3_chart_internal_fn.getSvgLeft = function (withoutRecompute) {
var $$ = this, config = $$.config, var $$ = this, config = $$.config,
hasLeftAxisRect = config.axis_rotated || (!config.axis_rotated && !config.axis_y_inner),
leftAxisClass = config.axis_rotated ? CLASS.axisX : CLASS.axisY, leftAxisClass = config.axis_rotated ? CLASS.axisX : CLASS.axisY,
leftAxis = $$.main.select('.' + leftAxisClass).node(), leftAxis = $$.main.select('.' + leftAxisClass).node(),
svgRect = leftAxis ? leftAxis.getBoundingClientRect() : {right: 0}, svgRect = leftAxis && hasLeftAxisRect ? leftAxis.getBoundingClientRect() : {right: 0},
chartRect = $$.selectChart.node().getBoundingClientRect(), chartRect = $$.selectChart.node().getBoundingClientRect(),
hasArc = $$.hasArcType(), hasArc = $$.hasArcType(),
svgLeft = svgRect.right - chartRect.left - (hasArc ? 0 : $$.getCurrentPaddingLeft(withoutRecompute)); svgLeft = svgRect.right - chartRect.left - (hasArc ? 0 : $$.getCurrentPaddingLeft(withoutRecompute));

Write Preview
Loading…
Cancel
Save