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
commit
f3fd649900
  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

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

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

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

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

@ -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]
]; ];
}; };
}; };

Loading…
Cancel
Save