Skip to content

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

Support position for grid lines

parent 6bc1db61
Hide whitespace changes
Inline Side-by-side
Showing with 237 additions and 16 deletions
c3.js
View file @ c485308f
......@@ -3468,7 +3468,18 @@
$$.smoothLines($$.ygrid, 'grid');
};
c3_chart_internal_fn.gridTextAnchor = function (d) {
return d.position ? d.position : "end";
};
c3_chart_internal_fn.gridTextDx = function (d) {
return d.position === 'start' ? 4 : d.position === 'middle' ? 0 : -4;
};
c3_chart_internal_fn.xGridTextX = function (d) {
return d.position === 'start' ? -this.height : d.position === 'middle' ? -this.height / 2 : 0;
};
c3_chart_internal_fn.yGridTextX = function (d) {
return d.position === 'start' ? 0 : d.position === 'middle' ? this.width / 2 : this.width;
};
c3_chart_internal_fn.updateGrid = function (duration) {
var $$ = this, main = $$.main, config = $$.config,
xgridLine, ygridLine, yv;
......@@ -3488,9 +3499,9 @@
xgridLine.append('line')
.style("opacity", 0);
xgridLine.append('text')
.attr("text-anchor", "end")
.attr("text-anchor", $$.gridTextAnchor)
.attr("transform", config.axis_rotated ? "" : "rotate(-90)")
.attr('dx', -4)
.attr('dx', $$.gridTextDx)
.attr('dy', -5)
.style("opacity", 0);
// udpate
......@@ -3512,9 +3523,9 @@
ygridLine.append('line')
.style("opacity", 0);
ygridLine.append('text')
.attr("text-anchor", "end")
.attr("text-anchor", $$.gridTextAnchor)
.attr("transform", config.axis_rotated ? "rotate(-90)" : "")
.attr('dx', config.axis_rotated ? 0 : -$$.margin.top)
.attr('dx', $$.gridTextDx)
.attr('dy', -5)
.style("opacity", 0);
// update
......@@ -3528,7 +3539,7 @@
.style("opacity", 1);
$$.ygridLines.select('text')
.transition().duration(duration)
.attr("x", config.axis_rotated ? 0 : $$.width)
.attr("x", config.axis_rotated ? $$.xGridTextX.bind($$) : $$.yGridTextX.bind($$))
.attr("y", yv)
.text(function (d) { return d.text; })
.style("opacity", 1);
......@@ -3549,7 +3560,7 @@
.attr("y2", config.axis_rotated ? xv : $$.height)
.style("opacity", 1),
(withTransition ? texts.transition() : texts)
.attr("x", config.axis_rotated ? $$.width : 0)
.attr("x", config.axis_rotated ? $$.yGridTextX.bind($$) : $$.xGridTextX.bind($$))
.attr("y", xv)
.text(function (d) { return d.text; })
.style("opacity", 1)
......
c3.min.js
View file @ c485308f
This source diff could not be displayed because it is too large. You can view the blob instead.
spec/grid-spec.js
View file @ c485308f
......@@ -7,7 +7,7 @@ describe('c3 chart grid', function () {
chart = window.initChart(chart, args, done);
});
describe('y grid', function () {
describe('y grid show', function () {
it('should update args', function () {
args = {
......@@ -75,11 +75,211 @@ describe('c3 chart grid', function () {
expect(t.translate[1]).toBe(expectedYs[i]);
});
});
});
describe('y grid lines', function () {
describe('position', function () {
it('should update args', function () {
args = {
data: {
columns: [
['data1', 10, 200, 100, 400, 150, 250]
]
},
grid: {
y: {
lines: [
{value: 30, text: 'Lable 30', position: 'start'},
{value: 145, text: 'Lable 145', position: 'middle'},
{value: 225, text: 'Lable 225'}
]
}
}
};
expect(true).toBeTruthy();
});
it('should show 3 grid lines', function () {
expect(chart.internal.main.selectAll('.c3-ygrid-lines .c3-ygrid-line').size()).toBe(3);
});
it('should locate grid lines properly', function () {
var lines = chart.internal.main.selectAll('.c3-ygrid-lines .c3-ygrid-line'),
expectedY1s = [373, 268, 196];
lines.each(function (d, i) {
var y1 = d3.select(this).select('line').attr('y1');
expect(y1).toBeCloseTo(expectedY1s[i], -2);
});
});
it('should locate grid texts properly', function () {
var lines = chart.internal.main.selectAll('.c3-ygrid-lines .c3-ygrid-line'),
expectedPositions = ['start', 'middle', 'end'],
expectedDxs = [4, 0, -4];
lines.each(function (d, i) {
var text = d3.select(this).select('text'),
textAnchor = text.attr('text-anchor'),
dx = text.attr('dx');
expect(textAnchor).toBe(expectedPositions[i]);
expect(+dx).toBe(expectedDxs[i]);
});
});
it('should update args', function () {
args = {
data: {
columns: [
['data1', 10, 200, 100, 400, 150, 250]
]
},
axis: {
rotated: true
},
grid: {
y: {
lines: [
{value: 30, text: 'Lable 30', position: 'start'},
{value: 145, text: 'Lable 145', position: 'middle'},
{value: 225, text: 'Lable 225'}
]
}
}
};
expect(true).toBeTruthy();
});
it('should show 3 grid lines', function () {
expect(chart.internal.main.selectAll('.c3-ygrid-lines .c3-ygrid-line').size()).toBe(3);
});
it('should locate grid lines properly', function () {
var lines = chart.internal.main.selectAll('.c3-ygrid-lines .c3-ygrid-line'),
expectedX1s = [75, 220, 321];
lines.each(function (d, i) {
var x1 = d3.select(this).select('line').attr('x1');
expect(x1).toBeCloseTo(expectedX1s[i], -2);
});
});
it('should locate grid texts properly', function () {
var lines = chart.internal.main.selectAll('.c3-ygrid-lines .c3-ygrid-line'),
expectedPositions = ['start', 'middle', 'end'],
expectedDxs = [4, 0, -4];
lines.each(function (d, i) {
var text = d3.select(this).select('text'),
textAnchor = text.attr('text-anchor'),
dx = text.attr('dx');
expect(textAnchor).toBe(expectedPositions[i]);
expect(+dx).toBe(expectedDxs[i]);
});
});
});
});
describe('x grid lines', function () {
describe('position', function () {
it('should have correct height', function () {
args = {
data: {
columns: [
['data1', 30, 200, 100, 400],
]
},
grid: {
x: {
lines: [
{value: 1, text: 'Label 1', position: 'start'},
{value: 2, text: 'Label 2', position: 'middle'},
{value: 3, text: 'Label 3'},
]
}
},
};
expect(true).toBeTruthy();
});
it('should show 3 grid lines', function () {
expect(chart.internal.main.selectAll('.c3-xgrid-lines .c3-xgrid-line').size()).toBe(3);
});
it('should locate grid lines properly', function () {
var lines = chart.internal.main.selectAll('.c3-xgrid-lines .c3-xgrid-line'),
expectedX1s = [202, 397, 593];
lines.each(function (d, i) {
var x1 = d3.select(this).select('line').attr('x1');
expect(x1).toBeCloseTo(expectedX1s[i], -2);
});
});
it('should locate grid texts properly', function () {
var lines = chart.internal.main.selectAll('.c3-xgrid-lines .c3-xgrid-line'),
expectedPositions = ['start', 'middle', 'end'],
expectedDxs = [4, 0, -4];
lines.each(function (d, i) {
var text = d3.select(this).select('text'),
textAnchor = text.attr('text-anchor'),
dx = text.attr('dx');
expect(textAnchor).toBe(expectedPositions[i]);
expect(+dx).toBe(expectedDxs[i]);
});
});
it('should update args', function () {
args = {
data: {
columns: [
['data1', 30, 200, 100, 400],
]
},
axis: {
rotated: true
},
grid: {
x: {
lines: [
{value: 1, text: 'Label 1', position: 'start'},
{value: 2, text: 'Label 2', position: 'middle'},
{value: 3, text: 'Label 3'},
]
}
},
};
expect(true).toBeTruthy();
});
it('should show 3 grid lines', function () {
expect(chart.internal.main.selectAll('.c3-xgrid-lines .c3-xgrid-line').size()).toBe(3);
});
it('should locate grid lines properly', function () {
var lines = chart.internal.main.selectAll('.c3-xgrid-lines .c3-xgrid-line'),
expectedY1s = [144, 283, 421];
lines.each(function (d, i) {
var y1 = d3.select(this).select('line').attr('y1');
expect(y1).toBeCloseTo(expectedY1s[i], -2);
});
});
it('should locate grid texts properly', function () {
var lines = chart.internal.main.selectAll('.c3-xgrid-lines .c3-xgrid-line'),
expectedPositions = ['start', 'middle', 'end'],
expectedDxs = [4, 0, -4];
lines.each(function (d, i) {
var text = d3.select(this).select('text'),
textAnchor = text.attr('text-anchor'),
dx = text.attr('dx');
expect(textAnchor).toBe(expectedPositions[i]);
expect(+dx).toBe(expectedDxs[i]);
});
});
});
describe('with padding.top', function () {
it('should have correct height', function () {
......@@ -160,7 +360,6 @@ describe('c3 chart grid', function () {
});
});
});
});
src/grid.js
View file @ c485308f
......@@ -69,7 +69,18 @@ c3_chart_internal_fn.updateYGrid = function () {
$$.smoothLines($$.ygrid, 'grid');
};
c3_chart_internal_fn.gridTextAnchor = function (d) {
return d.position ? d.position : "end";
};
c3_chart_internal_fn.gridTextDx = function (d) {
return d.position === 'start' ? 4 : d.position === 'middle' ? 0 : -4;
};
c3_chart_internal_fn.xGridTextX = function (d) {
return d.position === 'start' ? -this.height : d.position === 'middle' ? -this.height / 2 : 0;
};
c3_chart_internal_fn.yGridTextX = function (d) {
return d.position === 'start' ? 0 : d.position === 'middle' ? this.width / 2 : this.width;
};
c3_chart_internal_fn.updateGrid = function (duration) {
var $$ = this, main = $$.main, config = $$.config,
xgridLine, ygridLine, yv;
......@@ -89,9 +100,9 @@ c3_chart_internal_fn.updateGrid = function (duration) {
xgridLine.append('line')
.style("opacity", 0);
xgridLine.append('text')
.attr("text-anchor", "end")
.attr("text-anchor", $$.gridTextAnchor)
.attr("transform", config.axis_rotated ? "" : "rotate(-90)")
.attr('dx', -4)
.attr('dx', $$.gridTextDx)
.attr('dy', -5)
.style("opacity", 0);
// udpate
......@@ -113,9 +124,9 @@ c3_chart_internal_fn.updateGrid = function (duration) {
ygridLine.append('line')
.style("opacity", 0);
ygridLine.append('text')
.attr("text-anchor", "end")
.attr("text-anchor", $$.gridTextAnchor)
.attr("transform", config.axis_rotated ? "rotate(-90)" : "")
.attr('dx', config.axis_rotated ? 0 : -$$.margin.top)
.attr('dx', $$.gridTextDx)
.attr('dy', -5)
.style("opacity", 0);
// update
......@@ -129,7 +140,7 @@ c3_chart_internal_fn.updateGrid = function (duration) {
.style("opacity", 1);
$$.ygridLines.select('text')
.transition().duration(duration)
.attr("x", config.axis_rotated ? 0 : $$.width)
.attr("x", config.axis_rotated ? $$.xGridTextX.bind($$) : $$.yGridTextX.bind($$))
.attr("y", yv)
.text(function (d) { return d.text; })
.style("opacity", 1);
......@@ -150,7 +161,7 @@ c3_chart_internal_fn.redrawGrid = function (withTransition) {
.attr("y2", config.axis_rotated ? xv : $$.height)
.style("opacity", 1),
(withTransition ? texts.transition() : texts)
.attr("x", config.axis_rotated ? $$.width : 0)
.attr("x", config.axis_rotated ? $$.yGridTextX.bind($$) : $$.xGridTextX.bind($$))
.attr("y", xv)
.text(function (d) { return d.text; })
.style("opacity", 1)
......
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