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

Merge branch 'master' into tooltip-fix-single-data-point 

Conflicts:
	c3.min.js
pull/528/head
Christian Kalmar 10 years ago
parent
a083af287e 7ee85d696a
commit
144ba072e7
11 changed files with 111 additions and 24 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. 38
      c3.js
  2. 8
      c3.min.js
  3. 43
      htdocs/samples/chart_area.html
  4. 8
      htdocs/samples/grid_x_lines.html
  5. 3
      src/arc.js
  6. 1
      src/class.js
  7. 5
      src/config.js
  8. 6
      src/core.js
  9. 9
      src/domain.js
  10. 12
      src/grid.js
  11. 2
      src/size.js

38
c3.js
Unescape View File

@ -224,6 +224,9 @@
.attr("clip-path", $$.clipPath) .attr("clip-path", $$.clipPath)
.attr('class', CLASS.chart); .attr('class', CLASS.chart);
// Grid lines
if (config.grid_lines_front) { $$.initGridLines(); }
// Cover whole with rects for events // Cover whole with rects for events
$$.initEventRect(); $$.initEventRect();
@ -371,6 +374,9 @@
// for arc // for arc
$$.arcWidth = $$.width - ($$.isLegendRight ? legendWidth + 10 : 0); $$.arcWidth = $$.width - ($$.isLegendRight ? legendWidth + 10 : 0);
$$.arcHeight = $$.height - ($$.isLegendRight ? 0 : 10); $$.arcHeight = $$.height - ($$.isLegendRight ? 0 : 10);
if ($$.hasType('gauge')) {
$$.arcHeight += $$.height - $$.getGaugeLabelHeight();
}
if ($$.updateRadius) { $$.updateRadius(); } if ($$.updateRadius) { $$.updateRadius(); }
if ($$.isLegendRight && hasArc) { if ($$.isLegendRight && hasArc) {
@ -958,7 +964,7 @@
axis_y_label: {}, axis_y_label: {},
axis_y_tick_format: undefined, axis_y_tick_format: undefined,
axis_y_tick_outer: true, axis_y_tick_outer: true,
axis_y_padding: undefined, axis_y_padding: {},
axis_y_ticks: 10, axis_y_ticks: 10,
axis_y2_show: false, axis_y2_show: false,
axis_y2_max: undefined, axis_y2_max: undefined,
@ -967,7 +973,7 @@
axis_y2_label: {}, axis_y2_label: {},
axis_y2_tick_format: undefined, axis_y2_tick_format: undefined,
axis_y2_tick_outer: true, axis_y2_tick_outer: true,
axis_y2_padding: undefined, axis_y2_padding: {},
axis_y2_ticks: 10, axis_y2_ticks: 10,
// grid // grid
grid_x_show: false, grid_x_show: false,
@ -979,6 +985,7 @@
grid_y_lines: [], grid_y_lines: [],
grid_y_ticks: 10, grid_y_ticks: 10,
grid_focus_show: true, grid_focus_show: true,
grid_lines_front: true,
// point - point of each data // point - point of each data
point_show: true, point_show: true,
point_r: 2.5, point_r: 2.5,
@ -1236,6 +1243,11 @@
isAllPositive = yDomainMin >= 0 && yDomainMax >= 0; isAllPositive = yDomainMin >= 0 && yDomainMax >= 0;
isAllNegative = yDomainMin <= 0 && yDomainMax <= 0; isAllNegative = yDomainMin <= 0 && yDomainMax <= 0;
// Cancel zerobased if axis_*_min / axis_*_max specified
if ((isValue(yMin) && isAllPositive) || (isValue(yMax) && isAllNegative)) {
isZeroBased = false;
}
// Bar/Area chart should be 0-based if all positive|negative // Bar/Area chart should be 0-based if all positive|negative
if (isZeroBased) { if (isZeroBased) {
if (isAllPositive) { yDomainMin = 0; } if (isAllPositive) { yDomainMin = 0; }
@ -1262,11 +1274,11 @@
padding_top += lengths[1]; padding_top += lengths[1];
padding_bottom += lengths[0]; padding_bottom += lengths[0];
} }
if (axisId === 'y' && config.axis_y_padding) { if (axisId === 'y' && notEmpty(config.axis_y_padding)) {
padding_top = $$.getAxisPadding(config.axis_y_padding, 'top', padding, domainLength); padding_top = $$.getAxisPadding(config.axis_y_padding, 'top', padding, domainLength);
padding_bottom = $$.getAxisPadding(config.axis_y_padding, 'bottom', padding, domainLength); padding_bottom = $$.getAxisPadding(config.axis_y_padding, 'bottom', padding, domainLength);
} }
if (axisId === 'y2' && config.axis_y2_padding) { if (axisId === 'y2' && notEmpty(config.axis_y2_padding)) {
padding_top = $$.getAxisPadding(config.axis_y2_padding, 'top', padding, domainLength); padding_top = $$.getAxisPadding(config.axis_y2_padding, 'top', padding, domainLength);
padding_bottom = $$.getAxisPadding(config.axis_y2_padding, 'bottom', padding, domainLength); padding_bottom = $$.getAxisPadding(config.axis_y2_padding, 'bottom', padding, domainLength);
} }
@ -2271,7 +2283,7 @@
c3_chart_internal_fn.getCurrentHeight = function () { c3_chart_internal_fn.getCurrentHeight = function () {
var $$ = this, config = $$.config, var $$ = this, config = $$.config,
h = config.size_height ? config.size_height : $$.getParentHeight(); h = config.size_height ? config.size_height : $$.getParentHeight();
return h > 0 ? h : 320; return h > 0 ? h : 320 / ($$.hasType('gauge') ? 2 : 1);
}; };
c3_chart_internal_fn.getCurrentPaddingTop = function () { c3_chart_internal_fn.getCurrentPaddingTop = function () {
var config = this.config; var config = this.config;
@ -3062,8 +3074,6 @@
if (config.grid_y_show) { if (config.grid_y_show) {
$$.grid.append('g').attr('class', CLASS.ygrids); $$.grid.append('g').attr('class', CLASS.ygrids);
} }
$$.grid.append('g').attr("class", CLASS.xgridLines);
$$.grid.append('g').attr('class', CLASS.ygridLines);
if (config.grid_focus_show) { if (config.grid_focus_show) {
$$.grid.append('g') $$.grid.append('g')
.attr("class", CLASS.xgridFocus) .attr("class", CLASS.xgridFocus)
@ -3071,9 +3081,17 @@
.attr('class', CLASS.xgridFocus); .attr('class', CLASS.xgridFocus);
} }
$$.xgrid = d3.selectAll([]); $$.xgrid = d3.selectAll([]);
if (!config.grid_lines_front) { $$.initGridLines(); }
};
c3_chart_internal_fn.initGridLines = function () {
var $$ = this, d3 = $$.d3;
$$.gridLines = $$.main.append('g')
.attr("clip-path", $$.clipPath)
.attr('class', CLASS.grid + ' ' + CLASS.gridLines);
$$.gridLines.append('g').attr("class", CLASS.xgridLines);
$$.gridLines.append('g').attr('class', CLASS.ygridLines);
$$.xgridLines = d3.selectAll([]); $$.xgridLines = d3.selectAll([]);
}; };
c3_chart_internal_fn.updateXGrid = function (withoutUpdate) { c3_chart_internal_fn.updateXGrid = function (withoutUpdate) {
var $$ = this, config = $$.config, d3 = $$.d3, var $$ = this, config = $$.config, d3 = $$.d3,
xgridData = $$.generateGridData(config.grid_x_type, $$.x), xgridData = $$.generateGridData(config.grid_x_type, $$.x),
@ -4413,6 +4431,9 @@
.text(config.gauge_label_show ? config.gauge_max : ''); .text(config.gauge_label_show ? config.gauge_max : '');
} }
}; };
c3_chart_internal_fn.getGaugeLabelHeight = function () {
return this.config.gauge_label_show ? 20 : 0;
};
c3_chart_internal_fn.initRegion = function () { c3_chart_internal_fn.initRegion = function () {
var $$ = this; var $$ = this;
@ -5043,6 +5064,7 @@
texts: 'c3-texts', texts: 'c3-texts',
gaugeValue: 'c3-gauge-value', gaugeValue: 'c3-gauge-value',
grid: 'c3-grid', grid: 'c3-grid',
gridLines: 'c3-grid-lines',
xgrid: 'c3-xgrid', xgrid: 'c3-xgrid',
xgrids: 'c3-xgrids', xgrids: 'c3-xgrids',
xgridLine: 'c3-xgrid-line', xgridLine: 'c3-xgrid-line',

8
c3.min.js vendored
View File

File diff suppressed because one or more lines are too long

43
htdocs/samples/chart_area.html
Unescape View File

@ -3,9 +3,16 @@
<link href="/css/c3.css" rel="stylesheet" type="text/css"> <link href="/css/c3.css" rel="stylesheet" type="text/css">
</head> </head>
<body> <body>
<h3>Zerobased</h3>
<div id="chart1"></div> <div id="chart1"></div>
<h3>Not zerobased because of axis.y.min</h3>
<div id="chart2"></div> <div id="chart2"></div>
<h3>Zerobased</h3>
<div id="chart3"></div> <div id="chart3"></div>
<h3>Not zerobased because of axis.y.min</h3>
<div id="chart4"></div>
<h3>+/- vaulues</h3>
<div id="chart5"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script> <script src="/js/c3.js"></script>
@ -24,6 +31,22 @@
var chart2 = c3.generate({ var chart2 = c3.generate({
bindto: '#chart2', bindto: '#chart2',
data: {
columns: [
['data1', 300, 350, 300, 0, 0, 0],
['data2', 130, 100, 140, 200, 150, 50]
],
type: 'area'
},
axis: {
y: {
min: 100,
}
},
});
var chart3 = c3.generate({
bindto: '#chart3',
data: { data: {
columns: [ columns: [
['data1', -300, -350, -300, 0, 0, 0], ['data1', -300, -350, -300, 0, 0, 0],
@ -33,8 +56,24 @@
} }
}); });
var chart3 = c3.generate({ var chart4 = c3.generate({
bindto: '#chart3', bindto: '#chart4',
data: {
columns: [
['data1', -300, -350, -300, 0, 0, 0],
['data2', -130, -100, -140, -200, -150, -50]
],
type: 'area'
},
axis: {
y: {
max: -100,
}
}
});
var chart5 = c3.generate({
bindto: '#chart5',
data: { data: {
columns: [ columns: [
['data1', -300, 350, -300, 0, 0, 0], ['data1', -300, 350, -300, 0, 0, 0],

8
htdocs/samples/grid_x_lines.html
Unescape View File

@ -15,7 +15,8 @@
data: { data: {
columns: [ columns: [
['data1', 30, 200, 100, 400, 150, 250] ['data1', 30, 200, 100, 400, 150, 250]
] ],
type: 'bar'
}, },
grid: { grid: {
x: { x: {
@ -39,7 +40,7 @@
columns: [ columns: [
['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05'], ['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05'],
['sample', 30, 200, 100, 400, 150] ['sample', 30, 200, 100, 400, 150]
] ],
}, },
axis : { axis : {
x : { x : {
@ -53,6 +54,9 @@
text: '2013/01/04', text: '2013/01/04',
class: 'lineFor20130104' class: 'lineFor20130104'
}] }]
},
lines: {
front: false
} }
} }
}); });

3
src/arc.js
Unescape View File

@ -360,3 +360,6 @@ c3_chart_internal_fn.initGauge = function () {
.text(config.gauge_label_show ? config.gauge_max : ''); .text(config.gauge_label_show ? config.gauge_max : '');
} }
}; };
c3_chart_internal_fn.getGaugeLabelHeight = function () {
return this.config.gauge_label_show ? 20 : 0;
};

1
src/class.js
Unescape View File

@ -44,6 +44,7 @@ var CLASS = c3_chart_internal_fn.CLASS = {
texts: 'c3-texts', texts: 'c3-texts',
gaugeValue: 'c3-gauge-value', gaugeValue: 'c3-gauge-value',
grid: 'c3-grid', grid: 'c3-grid',
gridLines: 'c3-grid-lines',
xgrid: 'c3-xgrid', xgrid: 'c3-xgrid',
xgrids: 'c3-xgrids', xgrids: 'c3-xgrids',
xgridLine: 'c3-xgrid-line', xgridLine: 'c3-xgrid-line',

5
src/config.js
Unescape View File

@ -100,7 +100,7 @@ c3_chart_internal_fn.getDefaultConfig = function () {
axis_y_label: {}, axis_y_label: {},
axis_y_tick_format: undefined, axis_y_tick_format: undefined,
axis_y_tick_outer: true, axis_y_tick_outer: true,
axis_y_padding: undefined, axis_y_padding: {},
axis_y_ticks: 10, axis_y_ticks: 10,
axis_y2_show: false, axis_y2_show: false,
axis_y2_max: undefined, axis_y2_max: undefined,
@ -109,7 +109,7 @@ c3_chart_internal_fn.getDefaultConfig = function () {
axis_y2_label: {}, axis_y2_label: {},
axis_y2_tick_format: undefined, axis_y2_tick_format: undefined,
axis_y2_tick_outer: true, axis_y2_tick_outer: true,
axis_y2_padding: undefined, axis_y2_padding: {},
axis_y2_ticks: 10, axis_y2_ticks: 10,
// grid // grid
grid_x_show: false, grid_x_show: false,
@ -121,6 +121,7 @@ c3_chart_internal_fn.getDefaultConfig = function () {
grid_y_lines: [], grid_y_lines: [],
grid_y_ticks: 10, grid_y_ticks: 10,
grid_focus_show: true, grid_focus_show: true,
grid_lines_front: true,
// point - point of each data // point - point of each data
point_show: true, point_show: true,
point_r: 2.5, point_r: 2.5,

6
src/core.js
Unescape View File

@ -219,6 +219,9 @@ c3_chart_internal_fn.initWithData = function (data) {
.attr("clip-path", $$.clipPath) .attr("clip-path", $$.clipPath)
.attr('class', CLASS.chart); .attr('class', CLASS.chart);
// Grid lines
if (config.grid_lines_front) { $$.initGridLines(); }
// Cover whole with rects for events // Cover whole with rects for events
$$.initEventRect(); $$.initEventRect();
@ -366,6 +369,9 @@ c3_chart_internal_fn.updateSizes = function () {
// for arc // for arc
$$.arcWidth = $$.width - ($$.isLegendRight ? legendWidth + 10 : 0); $$.arcWidth = $$.width - ($$.isLegendRight ? legendWidth + 10 : 0);
$$.arcHeight = $$.height - ($$.isLegendRight ? 0 : 10); $$.arcHeight = $$.height - ($$.isLegendRight ? 0 : 10);
if ($$.hasType('gauge')) {
$$.arcHeight += $$.height - $$.getGaugeLabelHeight();
}
if ($$.updateRadius) { $$.updateRadius(); } if ($$.updateRadius) { $$.updateRadius(); }
if ($$.isLegendRight && hasArc) { if ($$.isLegendRight && hasArc) {

9
src/domain.js
Unescape View File

@ -82,6 +82,11 @@ c3_chart_internal_fn.getYDomain = function (targets, axisId) {
isAllPositive = yDomainMin >= 0 && yDomainMax >= 0; isAllPositive = yDomainMin >= 0 && yDomainMax >= 0;
isAllNegative = yDomainMin <= 0 && yDomainMax <= 0; isAllNegative = yDomainMin <= 0 && yDomainMax <= 0;
// Cancel zerobased if axis_*_min / axis_*_max specified
if ((isValue(yMin) && isAllPositive) || (isValue(yMax) && isAllNegative)) {
isZeroBased = false;
}
// Bar/Area chart should be 0-based if all positive|negative // Bar/Area chart should be 0-based if all positive|negative
if (isZeroBased) { if (isZeroBased) {
if (isAllPositive) { yDomainMin = 0; } if (isAllPositive) { yDomainMin = 0; }
@ -108,11 +113,11 @@ c3_chart_internal_fn.getYDomain = function (targets, axisId) {
padding_top += lengths[1]; padding_top += lengths[1];
padding_bottom += lengths[0]; padding_bottom += lengths[0];
} }
if (axisId === 'y' && config.axis_y_padding) { if (axisId === 'y' && notEmpty(config.axis_y_padding)) {
padding_top = $$.getAxisPadding(config.axis_y_padding, 'top', padding, domainLength); padding_top = $$.getAxisPadding(config.axis_y_padding, 'top', padding, domainLength);
padding_bottom = $$.getAxisPadding(config.axis_y_padding, 'bottom', padding, domainLength); padding_bottom = $$.getAxisPadding(config.axis_y_padding, 'bottom', padding, domainLength);
} }
if (axisId === 'y2' && config.axis_y2_padding) { if (axisId === 'y2' && notEmpty(config.axis_y2_padding)) {
padding_top = $$.getAxisPadding(config.axis_y2_padding, 'top', padding, domainLength); padding_top = $$.getAxisPadding(config.axis_y2_padding, 'top', padding, domainLength);
padding_bottom = $$.getAxisPadding(config.axis_y2_padding, 'bottom', padding, domainLength); padding_bottom = $$.getAxisPadding(config.axis_y2_padding, 'bottom', padding, domainLength);
} }

12
src/grid.js
Unescape View File

@ -9,8 +9,6 @@ c3_chart_internal_fn.initGrid = function () {
if (config.grid_y_show) { if (config.grid_y_show) {
$$.grid.append('g').attr('class', CLASS.ygrids); $$.grid.append('g').attr('class', CLASS.ygrids);
} }
$$.grid.append('g').attr("class", CLASS.xgridLines);
$$.grid.append('g').attr('class', CLASS.ygridLines);
if (config.grid_focus_show) { if (config.grid_focus_show) {
$$.grid.append('g') $$.grid.append('g')
.attr("class", CLASS.xgridFocus) .attr("class", CLASS.xgridFocus)
@ -18,9 +16,17 @@ c3_chart_internal_fn.initGrid = function () {
.attr('class', CLASS.xgridFocus); .attr('class', CLASS.xgridFocus);
} }
$$.xgrid = d3.selectAll([]); $$.xgrid = d3.selectAll([]);
if (!config.grid_lines_front) { $$.initGridLines(); }
};
c3_chart_internal_fn.initGridLines = function () {
var $$ = this, d3 = $$.d3;
$$.gridLines = $$.main.append('g')
.attr("clip-path", $$.clipPath)
.attr('class', CLASS.grid + ' ' + CLASS.gridLines);
$$.gridLines.append('g').attr("class", CLASS.xgridLines);
$$.gridLines.append('g').attr('class', CLASS.ygridLines);
$$.xgridLines = d3.selectAll([]); $$.xgridLines = d3.selectAll([]);
}; };
c3_chart_internal_fn.updateXGrid = function (withoutUpdate) { c3_chart_internal_fn.updateXGrid = function (withoutUpdate) {
var $$ = this, config = $$.config, d3 = $$.d3, var $$ = this, config = $$.config, d3 = $$.d3,
xgridData = $$.generateGridData(config.grid_x_type, $$.x), xgridData = $$.generateGridData(config.grid_x_type, $$.x),

2
src/size.js
Unescape View File

@ -5,7 +5,7 @@ c3_chart_internal_fn.getCurrentWidth = function () {
c3_chart_internal_fn.getCurrentHeight = function () { c3_chart_internal_fn.getCurrentHeight = function () {
var $$ = this, config = $$.config, var $$ = this, config = $$.config,
h = config.size_height ? config.size_height : $$.getParentHeight(); h = config.size_height ? config.size_height : $$.getParentHeight();
return h > 0 ? h : 320; return h > 0 ? h : 320 / ($$.hasType('gauge') ? 2 : 1);
}; };
c3_chart_internal_fn.getCurrentPaddingTop = function () { c3_chart_internal_fn.getCurrentPaddingTop = function () {
var config = this.config; var config = this.config;

Write Preview
Loading…
Cancel
Save