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

Fix rescale when grids API called - #721

pull/729/head
Masayuki Tanaka 10 years ago
parent
b496c33515
commit
d42560075e
9 changed files with 189 additions and 106 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. 93
      c3.js
  2. 10
      c3.min.js
  3. 53
      spec/api.grid-spec.js
  4. 44
      spec/zoom-spec.js
  5. 4
      src/api.grid.js
  6. 4
      src/api.region.js
  7. 3
      src/api.zoom.js
  8. 12
      src/core.js
  9. 70
      src/grid.js

93
c3.js
Unescape View File

@ -484,7 +484,7 @@
$$.subXAxis.tickValues([]); $$.subXAxis.tickValues([]);
} }
if (withY && !options.flow) { if (config.zoom_rescale && !options.flow) {
xDomainForZoom = $$.x.orgDomain(); xDomainForZoom = $$.x.orgDomain();
} }
@ -552,7 +552,7 @@
.style('opacity', targetsToShow.length ? 0 : 1); .style('opacity', targetsToShow.length ? 0 : 1);
// grid // grid
$$.redrawGrid(duration, withY); $$.redrawGrid(duration);
// rect for regions // rect for regions
$$.redrawRegion(duration); $$.redrawRegion(duration);
@ -664,6 +664,14 @@
// Draw with new sizes & scales // Draw with new sizes & scales
$$.redraw(options, transitions); $$.redraw(options, transitions);
}; };
c3_chart_internal_fn.redrawWithoutRescale = function () {
this.redraw({
withY: false,
withSubchart: false,
withEventRect: false,
withTransitionForAxis: false
});
};
c3_chart_internal_fn.isTimeSeries = function () { c3_chart_internal_fn.isTimeSeries = function () {
return this.config.axis_x_type === 'timeseries'; return this.config.axis_x_type === 'timeseries';
@ -3374,7 +3382,7 @@
}; };
c3_chart_internal_fn.redrawGrid = function (duration, withY) { c3_chart_internal_fn.redrawGrid = function (duration) {
var $$ = this, main = $$.main, config = $$.config, var $$ = this, main = $$.main, config = $$.config,
xgridLine, ygridLine, yv; xgridLine, ygridLine, yv;
@ -3406,43 +3414,41 @@
.remove(); .remove();
// Y-Grid // Y-Grid
if (withY && config.grid_y_show) { if (config.grid_y_show) {
$$.updateYGrid(); $$.updateYGrid();
} }
if (withY) { $$.ygridLines = main.select('.' + CLASS.ygridLines).selectAll('.' + CLASS.ygridLine)
$$.ygridLines = main.select('.' + CLASS.ygridLines).selectAll('.' + CLASS.ygridLine) .data(config.grid_y_lines);
.data(config.grid_y_lines); // enter
// enter ygridLine = $$.ygridLines.enter().append('g')
ygridLine = $$.ygridLines.enter().append('g') .attr("class", function (d) { return CLASS.ygridLine + (d['class'] ? ' ' + d['class'] : ''); });
.attr("class", function (d) { return CLASS.ygridLine + (d['class'] ? ' ' + d['class'] : ''); }); ygridLine.append('line')
ygridLine.append('line') .style("opacity", 0);
.style("opacity", 0); ygridLine.append('text')
ygridLine.append('text') .attr("text-anchor", "end")
.attr("text-anchor", "end") .attr("transform", config.axis_rotated ? "rotate(-90)" : "")
.attr("transform", config.axis_rotated ? "rotate(-90)" : "") .attr('dx', config.axis_rotated ? 0 : -$$.margin.top)
.attr('dx', config.axis_rotated ? 0 : -$$.margin.top) .attr('dy', -5)
.attr('dy', -5) .style("opacity", 0);
.style("opacity", 0); // update
// update yv = $$.yv.bind($$);
yv = $$.yv.bind($$); $$.ygridLines.select('line')
$$.ygridLines.select('line') .transition().duration(duration)
.transition().duration(duration) .attr("x1", config.axis_rotated ? yv : 0)
.attr("x1", config.axis_rotated ? yv : 0) .attr("x2", config.axis_rotated ? yv : $$.width)
.attr("x2", config.axis_rotated ? yv : $$.width) .attr("y1", config.axis_rotated ? 0 : yv)
.attr("y1", config.axis_rotated ? 0 : yv) .attr("y2", config.axis_rotated ? $$.height : yv)
.attr("y2", config.axis_rotated ? $$.height : yv) .style("opacity", 1);
.style("opacity", 1); $$.ygridLines.select('text')
$$.ygridLines.select('text') .transition().duration(duration)
.transition().duration(duration) .attr("x", config.axis_rotated ? 0 : $$.width)
.attr("x", config.axis_rotated ? 0 : $$.width) .attr("y", yv)
.attr("y", yv) .text(function (d) { return d.text; })
.text(function (d) { return d.text; }) .style("opacity", 1);
.style("opacity", 1); // exit
// exit $$.ygridLines.exit().transition().duration(duration)
$$.ygridLines.exit().transition().duration(duration) .style("opacity", 0)
.style("opacity", 0) .remove();
.remove();
}
}; };
c3_chart_internal_fn.addTransitionForGrid = function (transitions) { c3_chart_internal_fn.addTransitionForGrid = function (transitions) {
var $$ = this, config = $$.config, xv = $$.xv.bind($$); var $$ = this, config = $$.config, xv = $$.xv.bind($$);
@ -5703,7 +5709,8 @@
domain = domain.map(function (x) { return $$.parseDate(x); }); domain = domain.map(function (x) { return $$.parseDate(x); });
} }
$$.brush.extent(domain); $$.brush.extent(domain);
$$.redraw({withUpdateXDomain: true}); $$.redraw({withUpdateXDomain: true, withY: $$.config.zoom_rescale});
$$.config.zoom_onzoom.call(this, $$.x.orgDomain());
} }
return $$.brush.extent(); return $$.brush.extent();
}; };
@ -6147,7 +6154,7 @@
var $$ = this.internal, config = $$.config; var $$ = this.internal, config = $$.config;
if (! grids) { return config.grid_x_lines; } if (! grids) { return config.grid_x_lines; }
config.grid_x_lines = grids; config.grid_x_lines = grids;
$$.redraw(); $$.redrawWithoutRescale();
return config.grid_x_lines; return config.grid_x_lines;
}; };
c3_chart_fn.xgrids.add = function (grids) { c3_chart_fn.xgrids.add = function (grids) {
@ -6163,7 +6170,7 @@
var $$ = this.internal, config = $$.config; var $$ = this.internal, config = $$.config;
if (! grids) { return config.grid_y_lines; } if (! grids) { return config.grid_y_lines; }
config.grid_y_lines = grids; config.grid_y_lines = grids;
$$.redraw(); $$.redrawWithoutRescale();
return config.grid_y_lines; return config.grid_y_lines;
}; };
c3_chart_fn.ygrids.add = function (grids) { c3_chart_fn.ygrids.add = function (grids) {
@ -6179,14 +6186,14 @@
var $$ = this.internal, config = $$.config; var $$ = this.internal, config = $$.config;
if (!regions) { return config.regions; } if (!regions) { return config.regions; }
config.regions = regions; config.regions = regions;
$$.redraw(); $$.redrawWithoutRescale();
return config.regions; return config.regions;
}; };
c3_chart_fn.regions.add = function (regions) { c3_chart_fn.regions.add = function (regions) {
var $$ = this.internal, config = $$.config; var $$ = this.internal, config = $$.config;
if (!regions) { return config.regions; } if (!regions) { return config.regions; }
config.regions = config.regions.concat(regions); config.regions = config.regions.concat(regions);
$$.redraw(); $$.redrawWithoutRescale();
return config.regions; return config.regions;
}; };
c3_chart_fn.regions.remove = function (options) { c3_chart_fn.regions.remove = function (options) {

10
c3.min.js vendored
View File

File diff suppressed because one or more lines are too long

53
spec/api.grid-spec.js
Unescape View File

@ -60,12 +60,63 @@ describe('c3 api grid', function () {
}, 500); }, 500);
setTimeout(function () { setTimeout(function () {
done(); done();
}, 1200); }, 1200);
}); });
it("should update x ygrids even if it's zoomed", function (done) {
var main = chart.internal.main,
expectedGrids = [
{
value: 0,
text: 'Pressure Low'
},
{
value: 1,
text: 'Pressure High'
}
],
grids, domain;
chart.zoom([0, 2]);
setTimeout(function () {
// Call xgrids
chart.xgrids(expectedGrids);
setTimeout(function () {
grids = main.selectAll('.c3-xgrid-line');
expect(grids.size()).toBe(expectedGrids.length);
grids.each(function (d, i) {
var x = +d3.select(this).select('line').attr('x1'),
text = d3.select(this).select('text').text(),
expectedX = Math.round(chart.internal.x(expectedGrids[i].value)),
expectedText = expectedGrids[i].text;
expect(x).toBe(expectedX);
expect(text).toBe(expectedText);
});
// check if it was not rescaled
domain = chart.internal.y.domain();
expect(domain[0]).toBeLessThan(0);
expect(domain[1]).toBeGreaterThan(400);
// Call xgrids.remove
chart.xgrids.remove(expectedGrids);
setTimeout(function () {
grids = main.selectAll('.c3-xgrid-line');
expect(grids.size()).toBe(0);
}, 500); // for xgrids.remove()
}, 500); // for xgrids()
}, 500); // for zoom
setTimeout(function () {
done();
}, 1700);
});
}); });
}); });

44
spec/zoom-spec.js
Unescape View File

@ -35,19 +35,37 @@ describe('c3 chart zoom', function () {
describe('default extent', function () { describe('default extent', function () {
it('should have default extent', function () { describe('main chart domain', function () {
var yDomain = chart.internal.y.domain(),
subYDomain = chart.internal.subY.domain(), it('should have original y domain', function () {
brushExtent = chart.internal.brush.extent(), var yDomain = chart.internal.y.domain(),
expectedYDomain = [-9, 219], expectedYDomain = [-591.5, 6626.5];
expectedSubYDomain = [-591.5, 6626.5], expect(yDomain[0]).toBe(expectedYDomain[0]);
expectedBrushExtent = [1, 2]; expect(yDomain[1]).toBe(expectedYDomain[1]);
expect(yDomain[0]).toBe(expectedYDomain[0]); });
expect(yDomain[1]).toBe(expectedYDomain[1]);
expect(subYDomain[0]).toBe(expectedSubYDomain[0]); });
expect(subYDomain[1]).toBe(expectedSubYDomain[1]);
expect(brushExtent[0]).toBe(expectedBrushExtent[0]); describe('main chart domain', function () {
expect(brushExtent[1]).toBe(expectedBrushExtent[1]);
it('should have original y domain in subchart', function () {
var yDomain = chart.internal.y.domain(),
subYDomain = chart.internal.subY.domain();
expect(subYDomain[0]).toBe(yDomain[0]);
expect(subYDomain[1]).toBe(yDomain[1]);
});
});
describe('main chart domain', function () {
it('should have specified brush extent', function () {
var brushExtent = chart.internal.brush.extent(),
expectedBrushExtent = [1, 2];
expect(brushExtent[0]).toBe(expectedBrushExtent[0]);
expect(brushExtent[1]).toBe(expectedBrushExtent[1]);
});
}); });
}); });

4
src/api.grid.js
Unescape View File

@ -2,7 +2,7 @@ c3_chart_fn.xgrids = function (grids) {
var $$ = this.internal, config = $$.config; var $$ = this.internal, config = $$.config;
if (! grids) { return config.grid_x_lines; } if (! grids) { return config.grid_x_lines; }
config.grid_x_lines = grids; config.grid_x_lines = grids;
$$.redraw(); $$.redrawWithoutRescale();
return config.grid_x_lines; return config.grid_x_lines;
}; };
c3_chart_fn.xgrids.add = function (grids) { c3_chart_fn.xgrids.add = function (grids) {
@ -18,7 +18,7 @@ c3_chart_fn.ygrids = function (grids) {
var $$ = this.internal, config = $$.config; var $$ = this.internal, config = $$.config;
if (! grids) { return config.grid_y_lines; } if (! grids) { return config.grid_y_lines; }
config.grid_y_lines = grids; config.grid_y_lines = grids;
$$.redraw(); $$.redrawWithoutRescale();
return config.grid_y_lines; return config.grid_y_lines;
}; };
c3_chart_fn.ygrids.add = function (grids) { c3_chart_fn.ygrids.add = function (grids) {

4
src/api.region.js
Unescape View File

@ -2,14 +2,14 @@ c3_chart_fn.regions = function (regions) {
var $$ = this.internal, config = $$.config; var $$ = this.internal, config = $$.config;
if (!regions) { return config.regions; } if (!regions) { return config.regions; }
config.regions = regions; config.regions = regions;
$$.redraw(); $$.redrawWithoutRescale();
return config.regions; return config.regions;
}; };
c3_chart_fn.regions.add = function (regions) { c3_chart_fn.regions.add = function (regions) {
var $$ = this.internal, config = $$.config; var $$ = this.internal, config = $$.config;
if (!regions) { return config.regions; } if (!regions) { return config.regions; }
config.regions = config.regions.concat(regions); config.regions = config.regions.concat(regions);
$$.redraw(); $$.redrawWithoutRescale();
return config.regions; return config.regions;
}; };
c3_chart_fn.regions.remove = function (options) { c3_chart_fn.regions.remove = function (options) {

3
src/api.zoom.js
Unescape View File

@ -5,7 +5,8 @@ c3_chart_fn.zoom = function (domain) {
domain = domain.map(function (x) { return $$.parseDate(x); }); domain = domain.map(function (x) { return $$.parseDate(x); });
} }
$$.brush.extent(domain); $$.brush.extent(domain);
$$.redraw({withUpdateXDomain: true}); $$.redraw({withUpdateXDomain: true, withY: $$.config.zoom_rescale});
$$.config.zoom_onzoom.call(this, $$.x.orgDomain());
} }
return $$.brush.extent(); return $$.brush.extent();
}; };

12
src/core.js
Unescape View File

@ -479,7 +479,7 @@ c3_chart_internal_fn.redraw = function (options, transitions) {
$$.subXAxis.tickValues([]); $$.subXAxis.tickValues([]);
} }
if (withY && !options.flow) { if (config.zoom_rescale && !options.flow) {
xDomainForZoom = $$.x.orgDomain(); xDomainForZoom = $$.x.orgDomain();
} }
@ -547,7 +547,7 @@ c3_chart_internal_fn.redraw = function (options, transitions) {
.style('opacity', targetsToShow.length ? 0 : 1); .style('opacity', targetsToShow.length ? 0 : 1);
// grid // grid
$$.redrawGrid(duration, withY); $$.redrawGrid(duration);
// rect for regions // rect for regions
$$.redrawRegion(duration); $$.redrawRegion(duration);
@ -659,6 +659,14 @@ c3_chart_internal_fn.updateAndRedraw = function (options) {
// Draw with new sizes & scales // Draw with new sizes & scales
$$.redraw(options, transitions); $$.redraw(options, transitions);
}; };
c3_chart_internal_fn.redrawWithoutRescale = function () {
this.redraw({
withY: false,
withSubchart: false,
withEventRect: false,
withTransitionForAxis: false
});
};
c3_chart_internal_fn.isTimeSeries = function () { c3_chart_internal_fn.isTimeSeries = function () {
return this.config.axis_x_type === 'timeseries'; return this.config.axis_x_type === 'timeseries';

70
src/grid.js
Unescape View File

@ -70,7 +70,7 @@ c3_chart_internal_fn.updateYGrid = function () {
}; };
c3_chart_internal_fn.redrawGrid = function (duration, withY) { c3_chart_internal_fn.redrawGrid = function (duration) {
var $$ = this, main = $$.main, config = $$.config, var $$ = this, main = $$.main, config = $$.config,
xgridLine, ygridLine, yv; xgridLine, ygridLine, yv;
@ -102,43 +102,41 @@ c3_chart_internal_fn.redrawGrid = function (duration, withY) {
.remove(); .remove();
// Y-Grid // Y-Grid
if (withY && config.grid_y_show) { if (config.grid_y_show) {
$$.updateYGrid(); $$.updateYGrid();
} }
if (withY) { $$.ygridLines = main.select('.' + CLASS.ygridLines).selectAll('.' + CLASS.ygridLine)
$$.ygridLines = main.select('.' + CLASS.ygridLines).selectAll('.' + CLASS.ygridLine) .data(config.grid_y_lines);
.data(config.grid_y_lines); // enter
// enter ygridLine = $$.ygridLines.enter().append('g')
ygridLine = $$.ygridLines.enter().append('g') .attr("class", function (d) { return CLASS.ygridLine + (d['class'] ? ' ' + d['class'] : ''); });
.attr("class", function (d) { return CLASS.ygridLine + (d['class'] ? ' ' + d['class'] : ''); }); ygridLine.append('line')
ygridLine.append('line') .style("opacity", 0);
.style("opacity", 0); ygridLine.append('text')
ygridLine.append('text') .attr("text-anchor", "end")
.attr("text-anchor", "end") .attr("transform", config.axis_rotated ? "rotate(-90)" : "")
.attr("transform", config.axis_rotated ? "rotate(-90)" : "") .attr('dx', config.axis_rotated ? 0 : -$$.margin.top)
.attr('dx', config.axis_rotated ? 0 : -$$.margin.top) .attr('dy', -5)
.attr('dy', -5) .style("opacity", 0);
.style("opacity", 0); // update
// update yv = $$.yv.bind($$);
yv = $$.yv.bind($$); $$.ygridLines.select('line')
$$.ygridLines.select('line') .transition().duration(duration)
.transition().duration(duration) .attr("x1", config.axis_rotated ? yv : 0)
.attr("x1", config.axis_rotated ? yv : 0) .attr("x2", config.axis_rotated ? yv : $$.width)
.attr("x2", config.axis_rotated ? yv : $$.width) .attr("y1", config.axis_rotated ? 0 : yv)
.attr("y1", config.axis_rotated ? 0 : yv) .attr("y2", config.axis_rotated ? $$.height : yv)
.attr("y2", config.axis_rotated ? $$.height : yv) .style("opacity", 1);
.style("opacity", 1); $$.ygridLines.select('text')
$$.ygridLines.select('text') .transition().duration(duration)
.transition().duration(duration) .attr("x", config.axis_rotated ? 0 : $$.width)
.attr("x", config.axis_rotated ? 0 : $$.width) .attr("y", yv)
.attr("y", yv) .text(function (d) { return d.text; })
.text(function (d) { return d.text; }) .style("opacity", 1);
.style("opacity", 1); // exit
// exit $$.ygridLines.exit().transition().duration(duration)
$$.ygridLines.exit().transition().duration(duration) .style("opacity", 0)
.style("opacity", 0) .remove();
.remove();
}
}; };
c3_chart_internal_fn.addTransitionForGrid = function (transitions) { c3_chart_internal_fn.addTransitionForGrid = function (transitions) {
var $$ = this, config = $$.config, xv = $$.xv.bind($$); var $$ = this, config = $$.config, xv = $$.xv.bind($$);

Write Preview
Loading…
Cancel
Save