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

Support position for grid lines

pull/1014/merge
Masayuki Tanaka 10 years ago
parent
6bc1db6183
commit
c485308f45
4 changed files with 240 additions and 19 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. 25
      c3.js
  2. 6
      c3.min.js
  3. 203
      spec/grid-spec.js
  4. 25
      src/grid.js

25
c3.js
Unescape View File

@ -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)

6
c3.min.js vendored
View File

File diff suppressed because one or more lines are too long

203
spec/grid-spec.js
Unescape View File

@ -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 () {
});
});
});
});

25
src/grid.js
Unescape View File

@ -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)

Write Preview
Loading…
Cancel
Save