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

Allow passing a function to point.show configuration (#2054) (#2062) 

This will allow to display points based on a condition.
pull/2082/head
iocube 8 years ago committed by Yoshiya Hinosawa
parent
9a43cda97d
commit
ae7dd53694
4 changed files with 56 additions and 1 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. 27
      htdocs/samples/point_show.html
  3. 24
      spec/shape.line-spec.js
  4. 3
      src/core.js

3
htdocs/index.html
Unescape View File

@ -330,6 +330,9 @@
<a href="./samples/point_r.html"> <a href="./samples/point_r.html">
Change radius of data point Change radius of data point
</a> </a>
<a href="./samples/point_show.html">
Show points based on condition
</a>
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<h3>Bar</h3> <h3>Bar</h3>

27
htdocs/samples/point_show.html
Unescape View File

@ -0,0 +1,27 @@
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/c3.css">
</head>
<body>
<div id="chart"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.min.js"></script>
<script>
var chart = c3.generate({
bindto: '#chart',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 300, 200, 600, 250, 150]
]
},
point: {
show: function(d) {
return d.value > 200;
}
}
});
</script>
</body>
</html>

24
spec/shape.line-spec.js
Unescape View File

@ -129,6 +129,30 @@ describe('c3 chart shape line', function () {
// }); // });
}); });
describe('should allow passing a function', function() {
beforeAll(function(){
args = {
data: {
columns: [
['data1', 30, 50, 100]
],
type: 'line'
},
point: {
show: function(d) {
return d.value > 50;
}
}
};
});
it('should show point if function returns true', function() {
var target = chart.internal.main.select('.c3-chart-line.c3-target-data1');
expect(+target.select('.c3-circle-0').style('opacity')).toBe(0);
expect(+target.select('.c3-circle-1').style('opacity')).toBe(0);
expect(+target.select('.c3-circle-2').style('opacity')).toBe(1);
});
});
}); });
describe('spline.interpolation option', function () { describe('spline.interpolation option', function () {

3
src/core.js
Unescape View File

@ -791,7 +791,8 @@ c3_chart_internal_fn.initialOpacityForCircle = function (d) {
return d.value !== null && this.withoutFadeIn[d.id] ? this.opacityForCircle(d) : 0; return d.value !== null && this.withoutFadeIn[d.id] ? this.opacityForCircle(d) : 0;
}; };
c3_chart_internal_fn.opacityForCircle = function (d) { c3_chart_internal_fn.opacityForCircle = function (d) {
var opacity = this.config.point_show ? 1 : 0; var isPointShouldBeShown = isFunction(this.config.point_show) ? this.config.point_show(d) : this.config.point_show;
var opacity = isPointShouldBeShown ? 1 : 0;
return isValue(d.value) ? (this.isScatterType(d) ? 0.5 : opacity) : 0; return isValue(d.value) ? (this.isScatterType(d) ? 0.5 : opacity) : 0;
}; };
c3_chart_internal_fn.opacityForText = function () { c3_chart_internal_fn.opacityForText = function () {

Write Preview
Loading…
Cancel
Save