Skip to content

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

Enable resize and refactor

parent 9d840773
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 73 additions and 37 deletions
c3.js
View file @ a609042c
......@@ -30,7 +30,7 @@
// bindto - id to bind the chart
checkConfig('bindto', 'bindto is required in config');
var __size_width = getConfig(['size','width'], 640),
var __size_width = getConfig(['size','width'], null),
__size_height = getConfig(['size','height'], 280);
// data - data configuration
......@@ -151,9 +151,21 @@
};
}
var parseDate = d3.time.format(__data_x_format).parse;
/*-- Set Chart Params --*/
var bottom = 20 + __subchart_size_height + legendHeight,
var bottom, bottom2, right, top2, top3, margin, margin2, margin3, width, height, height2, height3;
var xMin, xMax, yMin, yMax, x, y, y2, subX, subY, subY2;
// TODO: Enable set position
var xAxis = isCategorized ? categoryAxis() : d3.svg.axis(),
yAxis = d3.svg.axis(),
yAxis2 = d3.svg.axis(),
subXAxis = isCategorized ? categoryAxis() : d3.svg.axis();
function updateSizes () {
bottom = 20 + __subchart_size_height + legendHeight,
right = __axis_y2_show && !__axis_rotated ? 50 : 1,
top2 = __size_height - __subchart_size_height - legendHeight,
bottom2 = 20 + legendHeight,
......@@ -161,35 +173,38 @@
margin = {top: 0, right: right, bottom: bottom, left: 40},
margin2 = {top: top2, right: 20, bottom: bottom2, left: 40},
margin3 = {top: top3, right: 20, bottom: 0, left: 40},
width = __size_width - margin.left - margin.right,
width = (__size_width == null ? getParentWidth() : __size_width) - margin.left - margin.right,
height = __size_height - margin.top - margin.bottom,
height2 = __size_height - margin2.top - margin2.bottom,
height3 = __size_height - margin3.top - margin3.bottom;
var parseDate = d3.time.format(__data_x_format).parse;
var xMin = __axis_rotated ? 10 : 0,
xMax = __axis_rotated ? height : width,
yMin = __axis_rotated ? 0 : height,
yMax = __axis_rotated ? width : 1;
var x = getX(xMin, xMax),
y = getY(yMin, yMax),
y2 = getY(yMin, yMax),
subX = getX(0, width),
subY = getY(height2, 10),
}
updateSizes();
function updateScales () {
var _x, _y, _y2, _subX;
// update edges
xMin = __axis_rotated ? 10 : 0;
xMax = __axis_rotated ? height : width; // AAA
yMin = __axis_rotated ? 0 : height;
yMax = __axis_rotated ? width : 1; // AAA
// update scales
_x = getX(xMin, xMax);
_y = getY(yMin, yMax);
_y2 = getY(yMin, yMax);
_subX = getX(0, width);
x = isDefined(x) ? _x.domain(x.domain()) : _x;
y = isDefined(y) ? _y.domain(y.domain()) : _y;
y2 = isDefined(y2) ? _y2.domain(y2.domain()) : _y2;
subX = isDefined(subX) ? _subX.domain(subX.domain()) : _subX;
subY = getY(height2, 10);
subY2 = getY(height2, 10);
// TODO: Enable set position
var xAxis = isCategorized ? categoryAxis() : d3.svg.axis(),
yAxis = d3.svg.axis(),
yAxis2 = d3.svg.axis(),
subXAxis = isCategorized ? categoryAxis() : d3.svg.axis();
xAxis.scale(x).orient(__axis_rotated ? "left" : "bottom");
yAxis.scale(y).orient(__axis_rotated ? "bottom" : "left");
yAxis2.scale(y2).orient(__axis_rotated ? "top" : "right");
subXAxis.scale(subX).orient("bottom");
// update axies
xAxis.scale(x).orient(__axis_rotated ? "left" : "bottom");
yAxis.scale(y).orient(__axis_rotated ? "bottom" : "left");
yAxis2.scale(y2).orient(__axis_rotated ? "top" : "right");
subXAxis.scale(subX).orient("bottom");
};
updateScales();
if (isTimeSeries) {
xAxis.tickFormat(customTimeFormat);
......@@ -278,27 +293,28 @@
// Define svgs
var svg = d3.select(config.bindto).append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
.attr("width", width + margin.left + margin.right) // AAA
.attr("height", height + margin.top + margin.bottom);
svg.append("defs");
// Define defs
var defs = svg.append("defs");
svg.select("defs").append("clipPath")
defs.append("clipPath")
.attr("id", clipId)
.append("rect")
.attr("y", margin.top)
.attr("width", width)
.attr("width", width) // AAA
.attr("height", height-margin.top);
svg.select("defs").append("clipPath")
defs.append("clipPath")
.attr("id", "xaxis-clip")
.append("rect")
.attr("x", -1)
.attr("y", -1)
.attr("width", width + 2)
.attr("width", width + 2) // AAA
.attr("height", 40);
svg.select("defs").append("clipPath")
defs.append("clipPath")
.attr("id", "yaxis-clip")
.append("rect")
.attr("x", -40 + 1)
......@@ -331,6 +347,11 @@
/*-- Define Functions --*/
function getParentWidth () {
// TODO: if rotated, use height
return +d3.select(config.bindto).style("width").replace('px','');
}
//-- Scale --//
function getX (min, max) {
......@@ -841,7 +862,7 @@
.append('line')
.attr('class', 'xgrid-focus')
.attr("x1", __axis_rotated ? 0 : -10)
.attr("x2", __axis_rotated ? width : -10)
.attr("x2", __axis_rotated ? width : -10) // AAA update on update
.attr("y1", __axis_rotated ? -10 : margin.top)
.attr("y2", __axis_rotated ? -10 : height);
}
......@@ -1082,7 +1103,7 @@
if (__axis_y2_show) {
main.append("g")
.attr("class", "y2 axis")
.attr("transform", "translate(" + (__axis_rotated ? 0 : width) + "," + (__axis_rotated ? 10 : 0) + ")")
.attr("transform", "translate(" + (__axis_rotated ? 0 : width) + "," + (__axis_rotated ? 10 : 0) + ")") // AAA
.call(yAxis2);
}
......@@ -1341,6 +1362,18 @@
});
}
function resize () {
// Update sizes and scales
updateSizes();
updateScales();
// Resize svg
d3.select('svg').attr('width', width + margin.left + margin.right);
d3.select('#'+clipId).select('rect').attr('width', width);
d3.select('#xaxis-clip').select('rect').attr('width', width + 2);
// Draw with new sizes & scales
redraw();
}
function updateTargets (targets) {
var mainLineEnter, mainLineUpdate, mainBarEnter, mainBarUpdate;
var contextLineEnter, contextLineUpdate, contextBarEnter, contextBarUpdate;
......@@ -1715,6 +1748,9 @@
throw Error('url or rows or columns is required.');
}
// Bind resize event
window.onresize = resize;
return c3;
}
......
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