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 @@ ...@@ -3468,7 +3468,18 @@
$$.smoothLines($$.ygrid, 'grid'); $$.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) { c3_chart_internal_fn.updateGrid = function (duration) {
var $$ = this, main = $$.main, config = $$.config, var $$ = this, main = $$.main, config = $$.config,
xgridLine, ygridLine, yv; xgridLine, ygridLine, yv;
...@@ -3488,9 +3499,9 @@ ...@@ -3488,9 +3499,9 @@
xgridLine.append('line') xgridLine.append('line')
.style("opacity", 0); .style("opacity", 0);
xgridLine.append('text') xgridLine.append('text')
.attr("text-anchor", "end") .attr("text-anchor", $$.gridTextAnchor)
.attr("transform", config.axis_rotated ? "" : "rotate(-90)") .attr("transform", config.axis_rotated ? "" : "rotate(-90)")
.attr('dx', -4) .attr('dx', $$.gridTextDx)
.attr('dy', -5) .attr('dy', -5)
.style("opacity", 0); .style("opacity", 0);
// udpate // udpate
...@@ -3512,9 +3523,9 @@ ...@@ -3512,9 +3523,9 @@
ygridLine.append('line') ygridLine.append('line')
.style("opacity", 0); .style("opacity", 0);
ygridLine.append('text') ygridLine.append('text')
.attr("text-anchor", "end") .attr("text-anchor", $$.gridTextAnchor)
.attr("transform", config.axis_rotated ? "rotate(-90)" : "") .attr("transform", config.axis_rotated ? "rotate(-90)" : "")
.attr('dx', config.axis_rotated ? 0 : -$$.margin.top) .attr('dx', $$.gridTextDx)
.attr('dy', -5) .attr('dy', -5)
.style("opacity", 0); .style("opacity", 0);
// update // update
...@@ -3528,7 +3539,7 @@ ...@@ -3528,7 +3539,7 @@
.style("opacity", 1); .style("opacity", 1);
$$.ygridLines.select('text') $$.ygridLines.select('text')
.transition().duration(duration) .transition().duration(duration)
.attr("x", config.axis_rotated ? 0 : $$.width) .attr("x", config.axis_rotated ? $$.xGridTextX.bind($$) : $$.yGridTextX.bind($$))
.attr("y", yv) .attr("y", yv)
.text(function (d) { return d.text; }) .text(function (d) { return d.text; })
.style("opacity", 1); .style("opacity", 1);
...@@ -3549,7 +3560,7 @@ ...@@ -3549,7 +3560,7 @@
.attr("y2", config.axis_rotated ? xv : $$.height) .attr("y2", config.axis_rotated ? xv : $$.height)
.style("opacity", 1), .style("opacity", 1),
(withTransition ? texts.transition() : texts) (withTransition ? texts.transition() : texts)
.attr("x", config.axis_rotated ? $$.width : 0) .attr("x", config.axis_rotated ? $$.yGridTextX.bind($$) : $$.xGridTextX.bind($$))
.attr("y", xv) .attr("y", xv)
.text(function (d) { return d.text; }) .text(function (d) { return d.text; })
.style("opacity", 1) .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 () { ...@@ -7,7 +7,7 @@ describe('c3 chart grid', function () {
chart = window.initChart(chart, args, done); chart = window.initChart(chart, args, done);
}); });
describe('y grid', function () { describe('y grid show', function () {
it('should update args', function () { it('should update args', function () {
args = { args = {
...@@ -75,11 +75,211 @@ describe('c3 chart grid', function () { ...@@ -75,11 +75,211 @@ describe('c3 chart grid', function () {
expect(t.translate[1]).toBe(expectedYs[i]); 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('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 () { describe('with padding.top', function () {
it('should have correct height', function () { it('should have correct height', function () {
...@@ -160,7 +360,6 @@ describe('c3 chart grid', 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 () { ...@@ -69,7 +69,18 @@ c3_chart_internal_fn.updateYGrid = function () {
$$.smoothLines($$.ygrid, 'grid'); $$.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) { c3_chart_internal_fn.updateGrid = function (duration) {
var $$ = this, main = $$.main, config = $$.config, var $$ = this, main = $$.main, config = $$.config,
xgridLine, ygridLine, yv; xgridLine, ygridLine, yv;
...@@ -89,9 +100,9 @@ c3_chart_internal_fn.updateGrid = function (duration) { ...@@ -89,9 +100,9 @@ c3_chart_internal_fn.updateGrid = function (duration) {
xgridLine.append('line') xgridLine.append('line')
.style("opacity", 0); .style("opacity", 0);
xgridLine.append('text') xgridLine.append('text')
.attr("text-anchor", "end") .attr("text-anchor", $$.gridTextAnchor)
.attr("transform", config.axis_rotated ? "" : "rotate(-90)") .attr("transform", config.axis_rotated ? "" : "rotate(-90)")
.attr('dx', -4) .attr('dx', $$.gridTextDx)
.attr('dy', -5) .attr('dy', -5)
.style("opacity", 0); .style("opacity", 0);
// udpate // udpate
...@@ -113,9 +124,9 @@ c3_chart_internal_fn.updateGrid = function (duration) { ...@@ -113,9 +124,9 @@ c3_chart_internal_fn.updateGrid = function (duration) {
ygridLine.append('line') ygridLine.append('line')
.style("opacity", 0); .style("opacity", 0);
ygridLine.append('text') ygridLine.append('text')
.attr("text-anchor", "end") .attr("text-anchor", $$.gridTextAnchor)
.attr("transform", config.axis_rotated ? "rotate(-90)" : "") .attr("transform", config.axis_rotated ? "rotate(-90)" : "")
.attr('dx', config.axis_rotated ? 0 : -$$.margin.top) .attr('dx', $$.gridTextDx)
.attr('dy', -5) .attr('dy', -5)
.style("opacity", 0); .style("opacity", 0);
// update // update
...@@ -129,7 +140,7 @@ c3_chart_internal_fn.updateGrid = function (duration) { ...@@ -129,7 +140,7 @@ c3_chart_internal_fn.updateGrid = function (duration) {
.style("opacity", 1); .style("opacity", 1);
$$.ygridLines.select('text') $$.ygridLines.select('text')
.transition().duration(duration) .transition().duration(duration)
.attr("x", config.axis_rotated ? 0 : $$.width) .attr("x", config.axis_rotated ? $$.xGridTextX.bind($$) : $$.yGridTextX.bind($$))
.attr("y", yv) .attr("y", yv)
.text(function (d) { return d.text; }) .text(function (d) { return d.text; })
.style("opacity", 1); .style("opacity", 1);
...@@ -150,7 +161,7 @@ c3_chart_internal_fn.redrawGrid = function (withTransition) { ...@@ -150,7 +161,7 @@ c3_chart_internal_fn.redrawGrid = function (withTransition) {
.attr("y2", config.axis_rotated ? xv : $$.height) .attr("y2", config.axis_rotated ? xv : $$.height)
.style("opacity", 1), .style("opacity", 1),
(withTransition ? texts.transition() : texts) (withTransition ? texts.transition() : texts)
.attr("x", config.axis_rotated ? $$.width : 0) .attr("x", config.axis_rotated ? $$.yGridTextX.bind($$) : $$.xGridTextX.bind($$))
.attr("y", xv) .attr("y", xv)
.text(function (d) { return d.text; }) .text(function (d) { return d.text; })
.style("opacity", 1) .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