diff --git a/spec/data-points-show-spec.js b/spec/data-points-show-spec.js new file mode 100644 index 000000000..68c95e933 --- /dev/null +++ b/spec/data-points-show-spec.js @@ -0,0 +1,127 @@ +describe('c3 points show', function () { + 'use strict'; + + var chart, args; + + beforeEach(function (done) { + chart = window.initChart(chart, args, done); + }); + + describe('when use a column name and points indexes', function () { + + beforeAll(function () { + args = { + data: { + columns: [ + ['data1', 30, 200, 100, 400, 150, 250], + ['data2', 50, 20, 10, 40, 15, 25] + ], + }, + point: { + show: ["data1", 0, 2, 4], + } + }; + }); + + it('should be able to show only those point in that column', function () { + var serie = 'data1'; + var expectedValue = ['1', '0', '1', '0', '1', '0']; + d3.selectAll('.c3-circles-' + serie).each(function (d, i) { + var circle = d3.select(this); + expect(d.id).toEqual(serie); + expect(circle.style('opacity')).toEqual(expectedValue[i]); + }); + }); + + }); + + describe('when no column name is specified and only indexes are used', function () { + + beforeAll(function () { + args = { + data: { + columns: [ + ['data1', 30, 200, 100, 400, 150, 250], + ['data2', 50, 20, 10, 40, 15, 25] + ], + }, + point: { + show: [0, 2, 4], + } + }; + }); + + it('should be able to show those points', function () { + var values = ['1', '0', '1', '0', '1', '0']; + d3.selectAll('.c3-circle-data1').each(function (d, i) { + var circle = d3.select(this); + expect(circle.style('opacity')).toEqual(values[i]); + }); + d3.selectAll('.c3-circle-data2').each(function (d, i) { + var circle = d3.select(this); + expect(circle.style('opacity')).toEqual(values[i]); + }); + }); + + }); + + describe('when a function is used', function () { + + beforeAll(function () { + args = { + data: { + columns: [ + ['data1', 30, 200, 100, 400, 150, 250], + ['data2', 50, 20, 10, 40, 15, 25] + ], + }, + point: { + show: function(d){ + return d.index % 2 !== 0 ? '1' : '0'; + }, + } + }; + }); + + it('should be able to show points based on the returned value', function () { + var values = ['0', '1', '0', '1', '0', '1']; + d3.selectAll('.c3-circle-data1').each(function (d, i) { + var circle = d3.select(this); + expect(circle.style('opacity')).toEqual(values[i]); + }); + d3.selectAll('.c3-circle-data2').each(function (d, i) { + var circle = d3.select(this); + expect(circle.style('opacity')).toEqual(values[i]); + }); + }); + + }); + + describe('when a function is used with aditional parameters', function () { + + beforeAll(function () { + args = { + data: { + columns: [ + ['data1', 30, 200, 100, 400, 150, 250], + ['data2', 50, 20, 10, 40, 15, 25] + ], + }, + point: { + show: function(d, indexes = [0, 1, 2]){ + return indexes.indexOf(d.index) >= 0 ? '1' : '0'; + }, + } + }; + }); + + it('should be able to show points based on the returned value', function () { + var expectedValue = ['1', '1', '1', '0', '0', '0', '1', '1', '1', '0', '0', '0']; + d3.selectAll('.c3-circles').each(function (d, i) { + var circle = d3.select(this); + expect(circle.style('opacity')).toEqual(expectedValue[i]); + }); + }); + + }); +}); \ No newline at end of file diff --git a/src/core.js b/src/core.js index 3e2a89eb5..89e3cd3bc 100644 --- a/src/core.js +++ b/src/core.js @@ -838,10 +838,23 @@ ChartInternal.prototype.initialOpacity = function(d) { ChartInternal.prototype.initialOpacityForCircle = function(d) { return d.value !== null && this.withoutFadeIn[d.id] ? this.opacityForCircle(d) : 0; }; -ChartInternal.prototype.opacityForCircle = function(d) { - var isPointShouldBeShown = isFunction(this.config.point_show) ? this.config.point_show(d) : this.config.point_show; +ChartInternal.prototype.opacityForCircle = function (d) { + var point_show = this.config.point_show; + var isAnArray = point_show instanceof Array; + var toShow = function(condition){ + return condition ? 1 : 0; + }; + var showPerSerie = function(condition){ + var matchSerie = d.id === point_show[0]; + var matchColumn = point_show.indexOf(d.index) >= 0; + return condition ? toShow(matchSerie && matchColumn) : toShow(matchColumn); + }; + + var isPointShouldBeShown = isFunction(point_show) ? point_show(d) + : (isAnArray ? showPerSerie(point_show[0]) : point_show); + var opacity = isPointShouldBeShown || this.isStanfordType(d) ? 1 : 0; - return isValue(d.value) ? (this.isScatterType(d) ? 0.5 : opacity) : 0; + return isValue(d.value) ? this.isScatterType(d) ? 0.5 : opacity : 0; }; ChartInternal.prototype.opacityForText = function() { return this.hasDataLabel() ? 1 : 0;