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 @@
xgridData = $$.generateGridData(config.grid_x_type, $$.x),
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 ? {
'x1': 0,
'x2': $$.width,
......@@ -3889,6 +3905,13 @@
c3_chart_internal_fn.updateYGrid = function () {
var $$ = this, config = $$.config,
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)
.data(gridValues);
$$.ygrid.enter().append('line')
......@@ -4058,6 +4081,26 @@
} else {
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 () {
......@@ -8028,16 +8071,16 @@
var heightLimits = [
// Left is width, right is number of tick labels to be removed
[-Infinity],
[150, 10],
[200, 5],
[100, 6],
[150, 4],
[270, 2],
[Infinity, 1]
];
var widthLimits = [
// Left is width, right is number of tick labels to be removed
[-Infinity],
[100, 10],
[200, 5],
[100, 6],
[200, 4],
[300, 2],
[Infinity, 1]
];
......@@ -8187,7 +8230,6 @@
}
text = tick.select("text");
text.style('display', function(d, i){
return shouldDrawTickText(i) ? 'block' : 'none';
......@@ -8216,6 +8258,25 @@
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) {
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, $$) {
var heightLimits = [
// Left is width, right is number of tick labels to be removed
[-Infinity],
[150, 10],
[200, 5],
[100, 6],
[150, 4],
[270, 2],
[Infinity, 1]
];
var widthLimits = [
// Left is width, right is number of tick labels to be removed
[-Infinity],
[100, 10],
[200, 5],
[100, 6],
[200, 4],
[300, 2],
[Infinity, 1]
];
......@@ -189,7 +189,6 @@ function c3_axis(d3, params, $$) {
}
text = tick.select("text");
text.style('display', function(d, i){
return shouldDrawTickText(i) ? 'block' : 'none';
......@@ -218,6 +217,25 @@ function c3_axis(d3, params, $$) {
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) {
case "bottom":
{
......
src/grid.js
View file @ 46631051
......@@ -32,6 +32,22 @@ c3_chart_internal_fn.updateXGrid = function (withoutUpdate) {
xgridData = $$.generateGridData(config.grid_x_type, $$.x),
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 ? {
'x1': 0,
'x2': $$.width,
......@@ -57,6 +73,13 @@ c3_chart_internal_fn.updateXGrid = function (withoutUpdate) {
c3_chart_internal_fn.updateYGrid = function () {
var $$ = this, config = $$.config,
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)
.data(gridValues);
$$.ygrid.enter().append('line')
......@@ -226,4 +249,24 @@ c3_chart_internal_fn.removeGridLines = function (params, forX) {
} else {
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