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

Added "bar.space" parameter to set space between bars in bar charts

feat/add-bar-space-option
Anthony Pessy 8 years ago
parent
f7f99e0be1
commit
f3fd649900
5 changed files with 189 additions and 4 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. 3
      htdocs/index.html
  2. 28
      htdocs/samples/chart_bar_space.html
  3. 152
      spec/shape.bar-spec.js
  4. 1
      src/config.js
  5. 9
      src/shape.bar.js

3
htdocs/index.html
Unescape View File

@ -44,6 +44,9 @@
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<h3>Bar Chart</h3> <h3>Bar Chart</h3>
<a href="./samples/chart_bar_space.html">
Bar chart with spaces
</a>
<a href="./samples/chart_bar.html"> <a href="./samples/chart_bar.html">
Bar chart with ordinary data Bar chart with ordinary data
</a> </a>

28
htdocs/samples/chart_bar_space.html
Unescape View File

@ -0,0 +1,28 @@
<html>
<head>
<link href="/css/c3.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="chart"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script>
<script>
var generate = function () { return c3.generate({
data: {
columns: [
['data1', 30, 200, 100],
['data2', 50, 20, 10],
['data3', 150, 120, 110]
],
type: 'bar'
},
bar: {
space: 0.25
}
}); }, chart = generate();
</script>
</body>
</html>

152
spec/shape.bar-spec.js
Unescape View File

@ -178,4 +178,156 @@ describe('c3 chart shape bar', function () {
}); });
describe('bar spacing', function() {
var createArgs = function(spacing) {
return {
size: {
width: 500
},
data: {
columns: [
['data1', 30, 200, 100],
['data2', 50, 20, 10],
['data3', 150, 120, 110],
['data4', 12, 24, 20 ]
],
type: 'bar',
groups: [
[ 'data1', 'data4' ]
]
},
bar: {
space: spacing
}
};
};
var getBBox = function(selector) {
return d3.select(selector).node().getBBox();
};
var getBarContainerWidth = function() {
return parseInt(getBBox('.c3-chart-bars').width);
};
var getBarContainerOffset = function() {
return parseInt(getBBox('.c3-chart-bars').x);
};
var getBarBBox = function(name, idx) {
return getBBox('.c3-target-' + name + ' .c3-bar-' + (idx || 0));
};
var getBarWidth = function(name, idx) {
return parseInt(getBarBBox(name, idx).width);
};
var getBarOffset = function(name1, name2, idx) {
var bbox1 = getBarBBox(name1, idx);
var bbox2 = getBarBBox(name2, idx);
return parseInt(bbox2.x - (bbox1.x + bbox1.width));
};
it('should set bar spacing to 0', function () {
args = createArgs(0);
expect(true).toBeTruthy();
});
it('should display the bars without any spacing', function () {
// all bars should have the same width
expect(getBarWidth('data1', 0)).toEqual(30);
expect(getBarWidth('data2', 0)).toEqual(30);
expect(getBarWidth('data3', 0)).toEqual(30);
expect(getBarWidth('data1', 1)).toEqual(30);
expect(getBarWidth('data2', 1)).toEqual(30);
expect(getBarWidth('data3', 1)).toEqual(30);
expect(getBarWidth('data1', 2)).toEqual(30);
expect(getBarWidth('data2', 2)).toEqual(30);
expect(getBarWidth('data3', 2)).toEqual(30);
// all offsets should be the same
expect(getBarOffset('data1', 'data2', 0)).toEqual(0);
expect(getBarOffset('data2', 'data3', 0)).toEqual(0);
expect(getBarOffset('data1', 'data2', 1)).toEqual(0);
expect(getBarOffset('data2', 'data3', 1)).toEqual(0);
expect(getBarOffset('data1', 'data2', 2)).toEqual(0);
expect(getBarOffset('data2', 'data3', 2)).toEqual(0);
// default width/offset of the container for this chart
expect(getBarContainerWidth()).toEqual(396);
expect(getBarContainerOffset()).toEqual(31);
});
it('should set bar spacing to 0.25', function () {
args = createArgs(0.25);
expect(true).toBeTruthy();
});
it('should display the bars with a spacing ratio of 0.25', function () {
// with bar_space of 0.25, the space between bars is
// expected to be 25% of the original bar's width
// which is ~7
// expect all bars to be the same width
expect(getBarWidth('data1', 0)).toEqual(22);
expect(getBarWidth('data2', 0)).toEqual(22);
expect(getBarWidth('data3', 0)).toEqual(22);
expect(getBarWidth('data1', 1)).toEqual(22);
expect(getBarWidth('data2', 1)).toEqual(22);
expect(getBarWidth('data3', 1)).toEqual(22);
expect(getBarWidth('data1', 2)).toEqual(22);
expect(getBarWidth('data2', 2)).toEqual(22);
expect(getBarWidth('data3', 2)).toEqual(22);
// all offsets should be the same
expect(getBarOffset('data1', 'data2', 0)).toEqual(7);
expect(getBarOffset('data2', 'data3', 0)).toEqual(7);
expect(getBarOffset('data1', 'data2', 1)).toEqual(7);
expect(getBarOffset('data2', 'data3', 1)).toEqual(7);
expect(getBarOffset('data1', 'data2', 2)).toEqual(7);
expect(getBarOffset('data2', 'data3', 2)).toEqual(7);
// expect the container to shrink a little because of
// the offsets from the first/last chart
// we add/subtract 1 because of approximation due to rounded values
expect(getBarContainerWidth()).toEqual(396 - 7 - 1);
expect(getBarContainerOffset()).toEqual(31 + (parseInt(7 / 2) + 1));
});
it('should set bar spacing to 0.5', function () {
args = createArgs(0.5);
expect(true).toBeTruthy();
});
it('should display the bars with a spacing ratio of 0.5', function () {
// with bar_space of 0.5, the space between bars is
// expected to be 50% of the original bar's width
// which is ~15
// expect all bars to be the same width
expect(getBarWidth('data1', 0)).toEqual(15);
expect(getBarWidth('data2', 0)).toEqual(15);
expect(getBarWidth('data3', 0)).toEqual(15);
expect(getBarWidth('data1', 1)).toEqual(15);
expect(getBarWidth('data2', 1)).toEqual(15);
expect(getBarWidth('data3', 1)).toEqual(15);
expect(getBarWidth('data1', 2)).toEqual(15);
expect(getBarWidth('data2', 2)).toEqual(15);
expect(getBarWidth('data3', 2)).toEqual(15);
// all offsets should be the same
expect(getBarOffset('data1', 'data2', 0)).toEqual(15);
expect(getBarOffset('data2', 'data3', 0)).toEqual(15);
expect(getBarOffset('data1', 'data2', 1)).toEqual(15);
expect(getBarOffset('data2', 'data3', 1)).toEqual(15);
expect(getBarOffset('data1', 'data2', 2)).toEqual(15);
expect(getBarOffset('data2', 'data3', 2)).toEqual(15);
// expect the container to shrink a little because of
// the offsets from the first/last chart
expect(getBarContainerWidth()).toEqual(396 - 15);
expect(getBarContainerOffset()).toEqual(31 + parseInt(15 / 2));
});
});
}); });

1
src/config.js
Unescape View File

@ -167,6 +167,7 @@ c3_chart_internal_fn.getDefaultConfig = function () {
bar_width_ratio: 0.6, bar_width_ratio: 0.6,
bar_width_max: undefined, bar_width_max: undefined,
bar_zerobased: true, bar_zerobased: true,
bar_space: 0,
// area // area
area_zerobased: true, area_zerobased: true,
area_above: false, area_above: false,

9
src/shape.bar.js
Unescape View File

@ -94,6 +94,7 @@ c3_chart_internal_fn.generateGetBarPoints = function (barIndices, isSub) {
barX = $$.getShapeX(barW, barTargetsNum, barIndices, !!isSub), barX = $$.getShapeX(barW, barTargetsNum, barIndices, !!isSub),
barY = $$.getShapeY(!!isSub), barY = $$.getShapeY(!!isSub),
barOffset = $$.getShapeOffset($$.isBarType, barIndices, !!isSub), barOffset = $$.getShapeOffset($$.isBarType, barIndices, !!isSub),
barSpaceOffset = barW * ($$.config.bar_space / 2),
yScale = isSub ? $$.getSubYScale : $$.getYScale; yScale = isSub ? $$.getSubYScale : $$.getYScale;
return function (d, i) { return function (d, i) {
var y0 = yScale.call($$, d.id)(0), var y0 = yScale.call($$, d.id)(0),
@ -105,10 +106,10 @@ c3_chart_internal_fn.generateGetBarPoints = function (barIndices, isSub) {
} }
// 4 points that make a bar // 4 points that make a bar
return [ return [
[posX, offset], [posX + barSpaceOffset, offset],
[posX, posY - (y0 - offset)], [posX + barSpaceOffset, posY - (y0 - offset)],
[posX + barW, posY - (y0 - offset)], [posX + barW - barSpaceOffset, posY - (y0 - offset)],
[posX + barW, offset] [posX + barW - barSpaceOffset, offset]
]; ];
}; };
}; };

Write Preview
Loading…
Cancel
Save