Skip to content

C
c3-closed
Commit 46631051 authored by Evgeny's avatar Evgeny
Browse files
Options

Thind out grid with small width or height

parent 154bc4c7
Hide whitespace changes
Inline Side-by-side
Showing with 132 additions and 10 deletions
c3.js
View file @ 46631051
...@@ -3864,6 +3864,22 @@ ...@@ -3864,6 +3864,22 @@
xgridData = $$.generateGridData(config.grid_x_type, $$.x), xgridData = $$.generateGridData(config.grid_x_type, $$.x),
tickOffset = $$.isCategorized() ? $$.xAxis.tickOffset() : 0; tickOffset = $$.isCategorized() ? $$.xAxis.tickOffset() : 0;
if($$.shouldThinOutXGrid()){
var tmp = [];
for(var i = 0; i < xgridData.length; i++){
if(i % 2 === 0){
tmp.push(xgridData[i]);
}
}
if(xgridData.length % 2 === 1){
tmp.push(xgridData[xgridData.length-1]);
}
xgridData = tmp;
}
$$.xgridAttr = config.axis_rotated ? { $$.xgridAttr = config.axis_rotated ? {
'x1': 0, 'x1': 0,
'x2': $$.width, 'x2': $$.width,
...@@ -3889,6 +3905,13 @@ ...@@ -3889,6 +3905,13 @@
c3_chart_internal_fn.updateYGrid = function () { c3_chart_internal_fn.updateYGrid = function () {
var $$ = this, config = $$.config, var $$ = this, config = $$.config,
gridValues = $$.yAxis.tickValues() || $$.y.ticks(config.grid_y_ticks); gridValues = $$.yAxis.tickValues() || $$.y.ticks(config.grid_y_ticks);
if($$.shouldThinOutYGrid()){
gridValues = gridValues.filter(function(v, i){
return i%2 == 0;
});
}
$$.ygrid = $$.main.select('.' + CLASS.ygrids).selectAll('.' + CLASS.ygrid) $$.ygrid = $$.main.select('.' + CLASS.ygrids).selectAll('.' + CLASS.ygrid)
.data(gridValues); .data(gridValues);
$$.ygrid.enter().append('line') $$.ygrid.enter().append('line')
...@@ -4058,6 +4081,26 @@ ...@@ -4058,6 +4081,26 @@
} else { } else {
config.grid_y_lines = config.grid_y_lines.filter(toShow); config.grid_y_lines = config.grid_y_lines.filter(toShow);
} }
}
c3_chart_internal_fn.shouldThinOutXGrid = function(){
var $$ = this, config = $$.config;
if(config.axis_rotated){
return $$.getCurrentHeight() <= 300;
} else {
return $$.getCurrentWidth() <= 300;
}
};;
c3_chart_internal_fn.shouldThinOutYGrid = function(){
var $$ = this, config = $$.config;
if(config.axis_rotated){
return $$.getCurrentWidth() <= 300;
} else {
return $$.getCurrentHeight() <= 300;
}
}; };
c3_chart_internal_fn.initTooltip = function () { c3_chart_internal_fn.initTooltip = function () {
...@@ -8028,16 +8071,16 @@ ...@@ -8028,16 +8071,16 @@
var heightLimits = [ var heightLimits = [
// Left is width, right is number of tick labels to be removed // Left is width, right is number of tick labels to be removed
[-Infinity], [-Infinity],
[150, 10], [100, 6],
[200, 5], [150, 4],
[270, 2], [270, 2],
[Infinity, 1] [Infinity, 1]
]; ];
var widthLimits = [ var widthLimits = [
// Left is width, right is number of tick labels to be removed // Left is width, right is number of tick labels to be removed
[-Infinity], [-Infinity],
[100, 10], [100, 6],
[200, 5], [200, 4],
[300, 2], [300, 2],
[Infinity, 1] [Infinity, 1]
]; ];
...@@ -8187,7 +8230,6 @@ ...@@ -8187,7 +8230,6 @@
} }
text = tick.select("text"); text = tick.select("text");
text.style('display', function(d, i){ text.style('display', function(d, i){
return shouldDrawTickText(i) ? 'block' : 'none'; return shouldDrawTickText(i) ? 'block' : 'none';
...@@ -8216,6 +8258,25 @@ ...@@ -8216,6 +8258,25 @@
return d.splitted; return d.splitted;
}); });
var line = tick.select("line");
switch(orient){
case "bottom":
case "top":
if($$.shouldThinOutXGrid()){
line.style('display', function(d, i){
return i%2 == 0 ? 'block' : 'none';
});
}
case "left":
case "right":
if($$.shouldThinOutYGrid()){
line.style('display', function(d, i){
return i%2 == 0 ? 'block' : 'none';
});
}
}
switch (orient) { switch (orient) {
case "bottom": case "bottom":
{ {
......
c3.min.js
View file @ 46631051
This source diff could not be displayed because it is too large. You can view the blob instead.
src/c3.axis.js
View file @ 46631051
...@@ -30,16 +30,16 @@ function c3_axis(d3, params, $$) { ...@@ -30,16 +30,16 @@ function c3_axis(d3, params, $$) {
var heightLimits = [ var heightLimits = [
// Left is width, right is number of tick labels to be removed // Left is width, right is number of tick labels to be removed
[-Infinity], [-Infinity],
[150, 10], [100, 6],
[200, 5], [150, 4],
[270, 2], [270, 2],
[Infinity, 1] [Infinity, 1]
]; ];
var widthLimits = [ var widthLimits = [
// Left is width, right is number of tick labels to be removed // Left is width, right is number of tick labels to be removed
[-Infinity], [-Infinity],
[100, 10], [100, 6],
[200, 5], [200, 4],
[300, 2], [300, 2],
[Infinity, 1] [Infinity, 1]
]; ];
...@@ -189,7 +189,6 @@ function c3_axis(d3, params, $$) { ...@@ -189,7 +189,6 @@ function c3_axis(d3, params, $$) {
} }
text = tick.select("text"); text = tick.select("text");
text.style('display', function(d, i){ text.style('display', function(d, i){
return shouldDrawTickText(i) ? 'block' : 'none'; return shouldDrawTickText(i) ? 'block' : 'none';
...@@ -218,6 +217,25 @@ function c3_axis(d3, params, $$) { ...@@ -218,6 +217,25 @@ function c3_axis(d3, params, $$) {
return d.splitted; return d.splitted;
}); });
var line = tick.select("line");
switch(orient){
case "bottom":
case "top":
if($$.shouldThinOutXGrid()){
line.style('display', function(d, i){
return i%2 == 0 ? 'block' : 'none';
});
}
case "left":
case "right":
if($$.shouldThinOutYGrid()){
line.style('display', function(d, i){
return i%2 == 0 ? 'block' : 'none';
});
}
}
switch (orient) { switch (orient) {
case "bottom": case "bottom":
{ {
......
src/grid.js
View file @ 46631051
...@@ -32,6 +32,22 @@ c3_chart_internal_fn.updateXGrid = function (withoutUpdate) { ...@@ -32,6 +32,22 @@ c3_chart_internal_fn.updateXGrid = function (withoutUpdate) {
xgridData = $$.generateGridData(config.grid_x_type, $$.x), xgridData = $$.generateGridData(config.grid_x_type, $$.x),
tickOffset = $$.isCategorized() ? $$.xAxis.tickOffset() : 0; tickOffset = $$.isCategorized() ? $$.xAxis.tickOffset() : 0;
if($$.shouldThinOutXGrid()){
var tmp = [];
for(var i = 0; i < xgridData.length; i++){
if(i % 2 === 0){
tmp.push(xgridData[i]);
}
}
if(xgridData.length % 2 === 1){
tmp.push(xgridData[xgridData.length-1]);
}
xgridData = tmp;
}
$$.xgridAttr = config.axis_rotated ? { $$.xgridAttr = config.axis_rotated ? {
'x1': 0, 'x1': 0,
'x2': $$.width, 'x2': $$.width,
...@@ -57,6 +73,13 @@ c3_chart_internal_fn.updateXGrid = function (withoutUpdate) { ...@@ -57,6 +73,13 @@ c3_chart_internal_fn.updateXGrid = function (withoutUpdate) {
c3_chart_internal_fn.updateYGrid = function () { c3_chart_internal_fn.updateYGrid = function () {
var $$ = this, config = $$.config, var $$ = this, config = $$.config,
gridValues = $$.yAxis.tickValues() || $$.y.ticks(config.grid_y_ticks); gridValues = $$.yAxis.tickValues() || $$.y.ticks(config.grid_y_ticks);
if($$.shouldThinOutYGrid()){
gridValues = gridValues.filter(function(v, i){
return i%2 == 0;
});
}
$$.ygrid = $$.main.select('.' + CLASS.ygrids).selectAll('.' + CLASS.ygrid) $$.ygrid = $$.main.select('.' + CLASS.ygrids).selectAll('.' + CLASS.ygrid)
.data(gridValues); .data(gridValues);
$$.ygrid.enter().append('line') $$.ygrid.enter().append('line')
...@@ -226,4 +249,24 @@ c3_chart_internal_fn.removeGridLines = function (params, forX) { ...@@ -226,4 +249,24 @@ c3_chart_internal_fn.removeGridLines = function (params, forX) {
} else { } else {
config.grid_y_lines = config.grid_y_lines.filter(toShow); config.grid_y_lines = config.grid_y_lines.filter(toShow);
} }
}
c3_chart_internal_fn.shouldThinOutXGrid = function(){
var $$ = this, config = $$.config;
if(config.axis_rotated){
return $$.getCurrentHeight() <= 300;
} else {
return $$.getCurrentWidth() <= 300;
}
};;
c3_chart_internal_fn.shouldThinOutYGrid = function(){
var $$ = this, config = $$.config;
if(config.axis_rotated){
return $$.getCurrentWidth() <= 300;
} else {
return $$.getCurrentHeight() <= 300;
}
}; };
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