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

This will allow to display points based on a condition.
8 years ago · ae7dd53694
4 changed files with 56 additions and 1 deletions
--- a/htdocs/index.html
+++ b/htdocs/index.html
@ -330,6 +330,9 @@
              <a href="./samples/point_r.html">
                Change radius of data point
              </a>
+              <a href="./samples/point_show.html">
+                Show points based on condition
+              </a>
            </div>
            <div class="col-md-4">
              <h3>Bar</h3>
--- a/htdocs/samples/point_show.html
+++ b/htdocs/samples/point_show.html
@ -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>
--- a/spec/shape.line-spec.js
+++ b/spec/shape.line-spec.js
@ -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 () {
--- a/src/core.js
+++ b/src/core.js
@ -791,7 +791,8 @@ c3_chart_internal_fn.initialOpacityForCircle = function (d) {
    return d.value !== null && this.withoutFadeIn[d.id] ? this.opacityForCircle(d) : 0;
 };
 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;
 };
 c3_chart_internal_fn.opacityForText = function () {