Skip to content

C
c3-closed
Commit d4256007 authored by Masayuki Tanaka's avatar Masayuki Tanaka
Browse files
Options

Fix rescale when grids API called - #721

parent b496c335
Hide whitespace changes
Inline Side-by-side
Showing with 184 additions and 101 deletions
c3.js
View file @ d4256007
......@@ -484,7 +484,7 @@
$$.subXAxis.tickValues([]);
}
if (withY && !options.flow) {
if (config.zoom_rescale && !options.flow) {
xDomainForZoom = $$.x.orgDomain();
}
......@@ -552,7 +552,7 @@
.style('opacity', targetsToShow.length ? 0 : 1);
// grid
$$.redrawGrid(duration, withY);
$$.redrawGrid(duration);
// rect for regions
$$.redrawRegion(duration);
......@@ -664,6 +664,14 @@
// Draw with new sizes & scales
$$.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 () {
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,
xgridLine, ygridLine, yv;
......@@ -3406,43 +3414,41 @@
.remove();
// Y-Grid
if (withY && config.grid_y_show) {
if (config.grid_y_show) {
$$.updateYGrid();
}
if (withY) {
$$.ygridLines = main.select('.' + CLASS.ygridLines).selectAll('.' + CLASS.ygridLine)
.data(config.grid_y_lines);
// enter
ygridLine = $$.ygridLines.enter().append('g')
.attr("class", function (d) { return CLASS.ygridLine + (d['class'] ? ' ' + d['class'] : ''); });
ygridLine.append('line')
.style("opacity", 0);
ygridLine.append('text')
.attr("text-anchor", "end")
.attr("transform", config.axis_rotated ? "rotate(-90)" : "")
.attr('dx', config.axis_rotated ? 0 : -$$.margin.top)
.attr('dy', -5)
.style("opacity", 0);
// update
yv = $$.yv.bind($$);
$$.ygridLines.select('line')
.transition().duration(duration)
.attr("x1", config.axis_rotated ? yv : 0)
.attr("x2", config.axis_rotated ? yv : $$.width)
.attr("y1", config.axis_rotated ? 0 : yv)
.attr("y2", config.axis_rotated ? $$.height : yv)
.style("opacity", 1);
$$.ygridLines.select('text')
.transition().duration(duration)
.attr("x", config.axis_rotated ? 0 : $$.width)
.attr("y", yv)
.text(function (d) { return d.text; })
.style("opacity", 1);
// exit
$$.ygridLines.exit().transition().duration(duration)
.style("opacity", 0)
.remove();
}
$$.ygridLines = main.select('.' + CLASS.ygridLines).selectAll('.' + CLASS.ygridLine)
.data(config.grid_y_lines);
// enter
ygridLine = $$.ygridLines.enter().append('g')
.attr("class", function (d) { return CLASS.ygridLine + (d['class'] ? ' ' + d['class'] : ''); });
ygridLine.append('line')
.style("opacity", 0);
ygridLine.append('text')
.attr("text-anchor", "end")
.attr("transform", config.axis_rotated ? "rotate(-90)" : "")
.attr('dx', config.axis_rotated ? 0 : -$$.margin.top)
.attr('dy', -5)
.style("opacity", 0);
// update
yv = $$.yv.bind($$);
$$.ygridLines.select('line')
.transition().duration(duration)
.attr("x1", config.axis_rotated ? yv : 0)
.attr("x2", config.axis_rotated ? yv : $$.width)
.attr("y1", config.axis_rotated ? 0 : yv)
.attr("y2", config.axis_rotated ? $$.height : yv)
.style("opacity", 1);
$$.ygridLines.select('text')
.transition().duration(duration)
.attr("x", config.axis_rotated ? 0 : $$.width)
.attr("y", yv)
.text(function (d) { return d.text; })
.style("opacity", 1);
// exit
$$.ygridLines.exit().transition().duration(duration)
.style("opacity", 0)
.remove();
};
c3_chart_internal_fn.addTransitionForGrid = function (transitions) {
var $$ = this, config = $$.config, xv = $$.xv.bind($$);
......@@ -5703,7 +5709,8 @@
domain = domain.map(function (x) { return $$.parseDate(x); });
}
$$.brush.extent(domain);
$$.redraw({withUpdateXDomain: true});
$$.redraw({withUpdateXDomain: true, withY: $$.config.zoom_rescale});
$$.config.zoom_onzoom.call(this, $$.x.orgDomain());
}
return $$.brush.extent();
};
......@@ -6147,7 +6154,7 @@
var $$ = this.internal, config = $$.config;
if (! grids) { return config.grid_x_lines; }
config.grid_x_lines = grids;
$$.redraw();
$$.redrawWithoutRescale();
return config.grid_x_lines;
};
c3_chart_fn.xgrids.add = function (grids) {
......@@ -6163,7 +6170,7 @@
var $$ = this.internal, config = $$.config;
if (! grids) { return config.grid_y_lines; }
config.grid_y_lines = grids;
$$.redraw();
$$.redrawWithoutRescale();
return config.grid_y_lines;
};
c3_chart_fn.ygrids.add = function (grids) {
......@@ -6179,14 +6186,14 @@
var $$ = this.internal, config = $$.config;
if (!regions) { return config.regions; }
config.regions = regions;
$$.redraw();
$$.redrawWithoutRescale();
return config.regions;
};
c3_chart_fn.regions.add = function (regions) {
var $$ = this.internal, config = $$.config;
if (!regions) { return config.regions; }
config.regions = config.regions.concat(regions);
$$.redraw();
$$.redrawWithoutRescale();
return config.regions;
};
c3_chart_fn.regions.remove = function (options) {
......
c3.min.js
View file @ d4256007
This source diff could not be displayed because it is too large. You can view the blob instead.
spec/api.grid-spec.js
View file @ d4256007
......@@ -60,12 +60,63 @@ describe('c3 api grid', function () {
}, 500);
setTimeout(function () {
done();
}, 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);
});
});
});
spec/zoom-spec.js
View file @ d4256007
......@@ -35,21 +35,39 @@ describe('c3 chart zoom', function () {
describe('default extent', function () {
it('should have default extent', function () {
var yDomain = chart.internal.y.domain(),
subYDomain = chart.internal.subY.domain(),
brushExtent = chart.internal.brush.extent(),
expectedYDomain = [-9, 219],
expectedSubYDomain = [-591.5, 6626.5],
expectedBrushExtent = [1, 2];
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]);
expect(brushExtent[1]).toBe(expectedBrushExtent[1]);
describe('main chart domain', function () {
it('should have original y domain', function () {
var yDomain = chart.internal.y.domain(),
expectedYDomain = [-591.5, 6626.5];
expect(yDomain[0]).toBe(expectedYDomain[0]);
expect(yDomain[1]).toBe(expectedYDomain[1]);
});
});
describe('main chart domain', function () {
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]);
});
});
});
});
src/api.grid.js
View file @ d4256007
......@@ -2,7 +2,7 @@ c3_chart_fn.xgrids = function (grids) {
var $$ = this.internal, config = $$.config;
if (! grids) { return config.grid_x_lines; }
config.grid_x_lines = grids;
$$.redraw();
$$.redrawWithoutRescale();
return config.grid_x_lines;
};
c3_chart_fn.xgrids.add = function (grids) {
......@@ -18,7 +18,7 @@ c3_chart_fn.ygrids = function (grids) {
var $$ = this.internal, config = $$.config;
if (! grids) { return config.grid_y_lines; }
config.grid_y_lines = grids;
$$.redraw();
$$.redrawWithoutRescale();
return config.grid_y_lines;
};
c3_chart_fn.ygrids.add = function (grids) {
......
src/api.region.js
View file @ d4256007
......@@ -2,14 +2,14 @@ c3_chart_fn.regions = function (regions) {
var $$ = this.internal, config = $$.config;
if (!regions) { return config.regions; }
config.regions = regions;
$$.redraw();
$$.redrawWithoutRescale();
return config.regions;
};
c3_chart_fn.regions.add = function (regions) {
var $$ = this.internal, config = $$.config;
if (!regions) { return config.regions; }
config.regions = config.regions.concat(regions);
$$.redraw();
$$.redrawWithoutRescale();
return config.regions;
};
c3_chart_fn.regions.remove = function (options) {
......
src/api.zoom.js
View file @ d4256007
......@@ -5,7 +5,8 @@ c3_chart_fn.zoom = function (domain) {
domain = domain.map(function (x) { return $$.parseDate(x); });
}
$$.brush.extent(domain);
$$.redraw({withUpdateXDomain: true});
$$.redraw({withUpdateXDomain: true, withY: $$.config.zoom_rescale});
$$.config.zoom_onzoom.call(this, $$.x.orgDomain());
}
return $$.brush.extent();
};
......
src/core.js
View file @ d4256007
......@@ -479,7 +479,7 @@ c3_chart_internal_fn.redraw = function (options, transitions) {
$$.subXAxis.tickValues([]);
}
if (withY && !options.flow) {
if (config.zoom_rescale && !options.flow) {
xDomainForZoom = $$.x.orgDomain();
}
......@@ -547,7 +547,7 @@ c3_chart_internal_fn.redraw = function (options, transitions) {
.style('opacity', targetsToShow.length ? 0 : 1);
// grid
$$.redrawGrid(duration, withY);
$$.redrawGrid(duration);
// rect for regions
$$.redrawRegion(duration);
......@@ -659,6 +659,14 @@ c3_chart_internal_fn.updateAndRedraw = function (options) {
// Draw with new sizes & scales
$$.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 () {
return this.config.axis_x_type === 'timeseries';
......
src/grid.js
View file @ d4256007
......@@ -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,
xgridLine, ygridLine, yv;
......@@ -102,43 +102,41 @@ c3_chart_internal_fn.redrawGrid = function (duration, withY) {
.remove();
// Y-Grid
if (withY && config.grid_y_show) {
if (config.grid_y_show) {
$$.updateYGrid();
}
if (withY) {
$$.ygridLines = main.select('.' + CLASS.ygridLines).selectAll('.' + CLASS.ygridLine)
.data(config.grid_y_lines);
// enter
ygridLine = $$.ygridLines.enter().append('g')
.attr("class", function (d) { return CLASS.ygridLine + (d['class'] ? ' ' + d['class'] : ''); });
ygridLine.append('line')
.style("opacity", 0);
ygridLine.append('text')
.attr("text-anchor", "end")
.attr("transform", config.axis_rotated ? "rotate(-90)" : "")
.attr('dx', config.axis_rotated ? 0 : -$$.margin.top)
.attr('dy', -5)
.style("opacity", 0);
// update
yv = $$.yv.bind($$);
$$.ygridLines.select('line')
.transition().duration(duration)
.attr("x1", config.axis_rotated ? yv : 0)
.attr("x2", config.axis_rotated ? yv : $$.width)
.attr("y1", config.axis_rotated ? 0 : yv)
.attr("y2", config.axis_rotated ? $$.height : yv)
.style("opacity", 1);
$$.ygridLines.select('text')
.transition().duration(duration)
.attr("x", config.axis_rotated ? 0 : $$.width)
.attr("y", yv)
.text(function (d) { return d.text; })
.style("opacity", 1);
// exit
$$.ygridLines.exit().transition().duration(duration)
.style("opacity", 0)
.remove();
}
$$.ygridLines = main.select('.' + CLASS.ygridLines).selectAll('.' + CLASS.ygridLine)
.data(config.grid_y_lines);
// enter
ygridLine = $$.ygridLines.enter().append('g')
.attr("class", function (d) { return CLASS.ygridLine + (d['class'] ? ' ' + d['class'] : ''); });
ygridLine.append('line')
.style("opacity", 0);
ygridLine.append('text')
.attr("text-anchor", "end")
.attr("transform", config.axis_rotated ? "rotate(-90)" : "")
.attr('dx', config.axis_rotated ? 0 : -$$.margin.top)
.attr('dy', -5)
.style("opacity", 0);
// update
yv = $$.yv.bind($$);
$$.ygridLines.select('line')
.transition().duration(duration)
.attr("x1", config.axis_rotated ? yv : 0)
.attr("x2", config.axis_rotated ? yv : $$.width)
.attr("y1", config.axis_rotated ? 0 : yv)
.attr("y2", config.axis_rotated ? $$.height : yv)
.style("opacity", 1);
$$.ygridLines.select('text')
.transition().duration(duration)
.attr("x", config.axis_rotated ? 0 : $$.width)
.attr("y", yv)
.text(function (d) { return d.text; })
.style("opacity", 1);
// exit
$$.ygridLines.exit().transition().duration(duration)
.style("opacity", 0)
.remove();
};
c3_chart_internal_fn.addTransitionForGrid = function (transitions) {
var $$ = this, config = $$.config, xv = $$.xv.bind($$);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment