Quite good looking graph derived from d3.js http://c3js.org
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

2108 lines
90 KiB

(function (window) {
'use strict';
var c3 = window.c3 = {};
var d3 = window.d3;
/*
* Generate chart according to config
*/
c3.generate = function (config) {
var c3 = { data : {} },
cache = {};
var EXPANDED = '_expanded_', SELECTED = '_selected_', INCLUDED = '_included_';
/*-- Handle Config --*/
function checkConfig(key, message) {
if (! (key in config)) { throw Error(message); }
}
function getConfig(keys, defaultValue) {
var target = config;
for (var i = 0; i < keys.length; i++) {
if (! (keys[i] in target)) { return defaultValue; }
target = target[keys[i]];
}
return target;
}
// bindto - id to bind the chart
var __bindto = getConfig(['bindto'], '#chart');
var __size_width = getConfig(['size', 'width'], null),
__size_height = getConfig(['size', 'height'], null);
var __zoom_enabled = getConfig(['zoom', 'enabled'], false),
__zoom_extent = getConfig(['zoom', 'extent'], null),
__zoom_privileged = getConfig(['zoom', 'privileged'], false);
var __onenter = getConfig(['onenter'], function () {}),
__onleave = getConfig(['onleave'], function () {});
// data - data configuration
checkConfig('data', 'data is required in config');
var __data_x = getConfig(['data', 'x'], 'x'),
__data_x_format = getConfig(['data', 'x_format'], '%Y-%m-%d'),
__data_id_converter = getConfig(['data', 'id_converter'], function (id) { return id; }),
__data_names = getConfig(['data', 'names'], {}),
__data_groups = getConfig(['data', 'groups'], []),
__data_axes = getConfig(['data', 'axes'], {}),
__data_types = getConfig(['data', 'types'], {}),
__data_regions = getConfig(['data', 'regions'], {}),
__data_colors = getConfig(['data', 'colors'], {}),
__data_selection_enabled = getConfig(['data', 'selection', 'enabled'], false),
__data_selection_grouped = getConfig(['data', 'selection', 'grouped'], false),
__data_selection_isselectable = getConfig(['data', 'selection', 'isselectable'], function () { return true; });
// subchart
var __subchart_show = getConfig(['subchart', 'show'], false),
__subchart_size_height = __subchart_show ? getConfig(['subchart', 'size', 'height'], 60) : 0;
// color
var __color_pattern = getConfig(['color', 'pattern'], null);
// legend
var __legend_show = getConfig(['legend', 'show'], true),
__legend_item_width = getConfig(['legend', 'item', 'width'], 80), // TODO: auto
__legend_item_onclick = getConfig(['legend', 'item', 'onclick'], function () {});
// axis
var __axis_x_type = getConfig(['axis', 'x', 'type'], 'indexed'),
__axis_x_categories = getConfig(['axis', 'x', 'categories'], []),
__axis_x_tick_centered = getConfig(['axis', 'x', 'tick', 'centered'], false),
__axis_x_default = getConfig(['axis', 'x', 'default'], null),
__axis_y_max = getConfig(['axis', 'y', 'max'], null),
__axis_y_min = getConfig(['axis', 'y', 'min'], null),
__axis_y_center = getConfig(['axis', 'y', 'center'], null),
__axis_y_text = getConfig(['axis', 'y', 'text'], null),
// not used
//__axis_y_rescale = getConfig(['axis', 'y', 'rescale'], true),
__axis_y_inner = getConfig(['axis', 'y', 'inner'], false),
__axis_y_format = getConfig(['axis', 'y', 'format'], function (d) { return d; }),
__axis_y_padding = getConfig(['axis', 'y', 'padding'], null),
__axis_y_ticks = getConfig(['axis', 'y', 'ticks'], 10),
__axis_y2_show = getConfig(['axis', 'y2', 'show'], false),
__axis_y2_max = getConfig(['axis', 'y2', 'max'], null),
__axis_y2_min = getConfig(['axis', 'y2', 'min'], null),
__axis_y2_center = getConfig(['axis', 'y2', 'center'], null),
// not used
// __axis_y2_text = getConfig(['axis', 'y2', 'text'], null),
// __axis_y2_rescale = getConfig(['axis', 'y2', 'rescale'], true),
__axis_y2_inner = getConfig(['axis', 'y2', 'inner'], false),
__axis_y2_format = getConfig(['axis', 'y2', 'format'], function (d) { return d; }),
__axis_y2_padding = getConfig(['axis', 'y2', 'padding'], null),
__axis_y2_ticks = getConfig(['axis', 'y2', 'ticks'], 10),
__axis_rotated = getConfig(['axis', 'rotated'], false);
// grid
var __grid_x_show = getConfig(['grid', 'x', 'show'], false),
__grid_x_type = getConfig(['grid', 'x', 'type'], 'tick'),
__grid_x_lines = getConfig(['grid', 'x', 'lines'], null),
__grid_y_show = getConfig(['grid', 'y', 'show'], false),
// not used
// __grid_y_type = getConfig(['grid', 'y', 'type'], 'tick'),
__grid_y_lines = getConfig(['grid', 'y', 'lines'], null);
// point - point of each data
var __point_show = getConfig(['point', 'show'], true),
__point_r = __point_show ? getConfig(['point', 'r'], 2.5) : 0,
__point_focus_line_enabled = getConfig(['point', 'focus', 'line', 'enabled'], true),
__point_focus_expand_enabled = getConfig(['point', 'focus', 'expand', 'enabled'], true),
__point_focus_expand_r = getConfig(['point', 'focus', 'expand', 'r'], __point_focus_expand_enabled ? 4 : __point_r),
__point_select_r = getConfig(['point', 'focus', 'select', 'r'], 8),
__point_onclick = getConfig(['point', 'onclick'], function () {}),
__point_onselected = getConfig(['point', 'onselected'], function () {}),
__point_onunselected = getConfig(['point', 'onunselected'], function () {});
// region - region to change style
var __regions = getConfig(['regions'], []);
// tooltip - show when mouseover on each data
var __tooltip_contents = getConfig(['tooltip', 'contents'], function (d) {
var date = isTimeSeries ? d[0].x.getFullYear() + '.' + (d[0].x.getMonth() + 1) + '.' + d[0].x.getDate() : isCategorized ? category(d[0].x) : d[0].x,
text = "<table class='-tooltip'><tr><th colspan='2'>" + date + "</th></tr>", i, value, name;
for (i = 0; i < d.length; i++) {
if (isDefined(d[i])) {
value = isDefined(d[i].value) ? (Math.round(d[i].value * 100) / 100).toFixed(2) : '-';
name = d[i].name;
} else {
value = '-';
name = '-';
}
text += "<tr class='-tooltip-name-" + d[i].id + "'><td class='name'><span style='background-color:" + color(d[i].id) + "'></span>" + name + "</td><td class='value'>" + value + "</td></tr>";
}
return text + "</table>";
}),
__tooltip_init_show = getConfig(['tooltip', 'init', 'show'], false),
__tooltip_init_x = getConfig(['tooltip', 'init', 'x'], 0),
__tooltip_init_position = getConfig(['tooltip', 'init', 'position'], {top: '0px', left: '50px'});
/*-- Set Variables --*/
var clipId = __bindto.replace('#', '') + '-clip',
clipPath = "url(#" + clipId + ")";
var isTimeSeries = (__axis_x_type === 'timeseries'),
isCategorized = (__axis_x_type === 'categorized');
var dragStart = null, dragging = false, cancelClick = false;
var legendHeight = __legend_show ? 40 : 0;
var parseDate = d3.time.format(__data_x_format).parse;
var color = generateColor(__data_colors, __color_pattern);
var customTimeFormat = (function () {
var formats = [
[d3.time.format("%Y/%-m/%-d"), function () { return true; }],
[d3.time.format("%-m/%-d"), function (d) { return d.getMonth(); }],
[d3.time.format("%-m/%-d"), function (d) { return d.getDate() !== 1; }],
[d3.time.format("%-m/%-d"), function (d) { return d.getDay() && d.getDate() !== 1; }],
[d3.time.format("%I %p"), function (d) { return d.getHours(); }],
[d3.time.format("%I:%M"), function (d) { return d.getMinutes(); }],
[d3.time.format(":%S"), function (d) { return d.getSeconds(); }],
[d3.time.format(".%L"), function (d) { return d.getMilliseconds(); }]
];
return function (date) {
var i = formats.length - 1, f = formats[i];
while (!f[1](date)) { f = formats[--i]; }
return f[0](date);
};
})();
/*-- Set Chart Params --*/
var bottom, bottom2, right, left, top2, top3, margin, margin2, margin3, width, height, height2, height3, currentWidth, currentHeight;
var xMin, xMax, yMin, yMax, x, y, y2, subX, subY, subY2, xAxis, yAxis, yAxis2, subXAxis;
var xOrient = __axis_rotated ? "left" : "bottom",
yOrient = __axis_rotated ? (__axis_y_inner ? "top" : "bottom") : (__axis_y_inner ? "right" : "left"),
y2Orient = __axis_rotated ? (__axis_y2_inner ? "bottom" : "top") : (__axis_y2_inner ? "left" : "right"),
subXOrient = "bottom";
var translate = {
main : function () { return "translate(" + margin.left + "," + margin.top + ")"; },
context : function () { return "translate(" + margin2.left + "," + margin2.top + ")"; },
legend : function () { return "translate(" + margin3.left + "," + margin3.top + ")"; },
y2 : function () { return "translate(" + (__axis_rotated ? 0 : width) + "," + (__axis_rotated ? 10 : 0) + ")"; },
x : function () { return "translate(0," + height + ")"; },
subx : function () { return "translate(0," + height2 + ")"; }
};
/*-- Define Functions --*/
//-- Sizes --//
function updateSizes() {
currentWidth = getCurrentWidth();
currentHeight = getCurrentHeight();
bottom = 20 + __subchart_size_height + legendHeight;
right = __axis_y2_show && !__axis_rotated && !__axis_y2_inner ? 50 : 1;
left = __axis_y_inner ? 0 : 40;
top2 = currentHeight - __subchart_size_height - legendHeight;
bottom2 = 20 + legendHeight;
top3 = currentHeight - legendHeight;
margin = {top: 0, right: right, bottom: bottom, left: left};
margin2 = {top: top2, right: 20, bottom: bottom2, left: left};
margin3 = {top: top3, right: 20, bottom: 0, left: left};
width = currentWidth - margin.left - margin.right;
height = currentHeight - margin.top - margin.bottom;
height2 = currentHeight - margin2.top - margin2.bottom;
height3 = currentHeight - margin3.top - margin3.bottom;
}
function getCurrentWidth() {
return __size_width === null ? getParentWidth() : __size_width;
}
function getCurrentHeight() {
var h = __size_height === null ? getParentHeight() : __size_height;
return h > 0 ? h : 320;
}
function getParentWidth() {
return +d3.select(__bindto).style("width").replace('px', ''); // TODO: if rotated, use height
}
function getParentHeight() {
return +d3.select(__bindto).style('height').replace('px', ''); // TODO: if rotated, use width
}
//-- Scales --//
function updateScales() {
// update edges
xMin = __axis_rotated ? 10 : 0;
xMax = __axis_rotated ? height : width;
yMin = __axis_rotated ? 0 : height;
yMax = __axis_rotated ? width : 1;
// update scales
x = getX(xMin, xMax, isDefined(x) ? x.domain() : undefined, function () { return xAxis.tickOffset(); });
y = getY(yMin, yMax, isDefined(y) ? y.domain() : undefined);
y2 = getY(yMin, yMax, isDefined(y2) ? y2.domain() : undefined);
subX = getX(0, width, isDefined(orgXDomain) ? orgXDomain : undefined, function (d) { return d % 1 === 0 ? subXAxis.tickOffset() : 0; });
subY = getY(height2, 10);
subY2 = getY(height2, 10);
// update axes
xAxis = getXAxis(x, xOrient);
yAxis = getYAxis(y, yOrient);
yAxis2 = getYAxis(y2, y2Orient);
subXAxis = getXAxis(subX, subXOrient);
}
function getX(min, max, domain, offset) {
var scale = ((isTimeSeries) ? d3.time.scale() : d3.scale.linear()).range([min, max]);
// Set function and values for c3
scale.orgDomain = function () { return scale.domain(); };
if (isDefined(domain)) { scale.domain(domain); }
if (isUndefined(offset)) { offset = function () { return 0; }; }
// Define customized scale if categorized axis
if (isCategorized) {
var _scale = scale, key;
scale = function (d) { return _scale(d) + offset(d); };
for (key in _scale) {
scale[key] = _scale[key];
}
scale.orgDomain = function () {
return _scale.domain();
};
scale.domain = function (domain) {
if (!arguments.length) {
domain = _scale.domain();
return [domain[0], domain[1] + 1];
}
_scale.domain(domain);
return scale;
};
}
return scale;
}
function getY(min, max) {
return d3.scale.linear().range([min, max]);
}
function getYScale(id) {
return getAxisId(id) === 'y2' ? y2 : y;
}
function getSubYScale(id) {
return getAxisId(id) === 'y2' ? subY2 : subY;
}
//-- Axes --//
function getXAxis(scale, orient) {
var axis = (isCategorized ? categoryAxis() : d3.svg.axis()).scale(scale).orient(orient);
if (isTimeSeries) {
axis.tickFormat(customTimeFormat);
}
if (isCategorized) {
axis.categories(__axis_x_categories).tickCentered(__axis_x_tick_centered);
} else {
// TODO: fix
axis.tickOffset = function () { return 0; };
}
return axis;
}
function getYAxis(scale, orient) {
return d3.svg.axis().scale(scale).orient(orient);
}
function getAxisId(id) {
return id in __data_axes ? __data_axes[id] : 'y';
}
//-- Domain --//
function getYDomainMin(targets) {
return d3.min(targets, function (t) { return d3.min(t.values, function (v) { return v.value; }); });
}
function getYDomainMax(targets) {
var ys = {}, j, k;
targets.forEach(function (t) {
ys[t.id] = [];
t.values.forEach(function (v) {
ys[t.id].push(v.value);
});
});
for (j = 0; j < __data_groups.length; j++) {
for (k = 1; k < __data_groups[j].length; k++) {
if (! isBarType(__data_groups[j][k])) { continue; }
if (isUndefined(ys[__data_groups[j][k]])) { continue; }
ys[__data_groups[j][k]].forEach(function (v, i) {
if (getAxisId(__data_groups[j][k]) === getAxisId(__data_groups[j][0])) {
ys[__data_groups[j][0]][i] += v * 1;
}
});
}
}
return d3.max(Object.keys(ys).map(function (key) { return d3.max(ys[key]); }));
}
function getYDomain(targets, axisId) {
var yTargets = getTargets(function (d) { return getAxisId(d.id) === axisId; }),
yMin = axisId === 'y2' ? __axis_y2_min : __axis_y_min,
yMax = axisId === 'y2' ? __axis_y2_max : __axis_y_max,
yDomainMin = (yMin !== null) ? yMin : getYDomainMin(yTargets),
yDomainMax = (yMax !== null) ? yMax : getYDomainMax(yTargets),
padding = Math.abs(yDomainMax - yDomainMin) * 0.1,
padding_top = padding, padding_bottom = padding,
center = axisId === 'y2' ? __axis_y2_center : __axis_y_center;
if (center !== null) {
var yDomainAbs = Math.max(Math.abs(yDomainMin), Math.abs(yDomainMax));
yDomainMax = yDomainAbs - center;
yDomainMin = center - yDomainAbs;
}
if (axisId === 'y' && __axis_y_padding !== null) {
padding_top = isDefined(__axis_y_padding.top) ? __axis_y_padding.top : padding;
padding_bottom = isDefined(__axis_y_padding.bottom) ? __axis_y_padding.bottom : padding;
}
if (axisId === 'y2' && __axis_y2_padding !== null) {
padding_top = isDefined(__axis_y2_padding.top) ? __axis_y2_padding.top : padding;
padding_bottom = isDefined(__axis_y2_padding.bottom) ? __axis_y2_padding.bottom : padding;
}
return [hasBarType(yTargets) ? 0 : yDomainMin - padding_bottom, yDomainMax + padding_top];
}
function getXDomainRatio(isSub) {
var domain, extent;
if (isSub) {
domain = x.domain();
extent = brush.extent();
} else {
domain = orgXDomain;
extent = x.domain();
}
return (domain[1] - domain[0]) / (extent[1] - extent[0]);
}
function diffDomain(d) {
return d[1] - d[0];
}
//-- Cache --//
function hasCaches(ids) {
for (var i = 0; i < ids.length; i++) {
if (! (ids[i] in cache)) { return false; }
}
return true;
}
function addCache(id, target) {
cache[id] = cloneTarget(target);
}
function getCaches(ids) {
var targets = [];
for (var i = 0; i < ids.length; i++) {
if (ids[i] in cache) { targets.push(cloneTarget(cache[ids[i]])); }
}
return targets;
}
//-- Regions --//
function regionStart(d) {
return ('start' in d) ? x(isTimeSeries ? parseDate(d.start) : d.start) : 0;
}
function regionWidth(d) {
var start = regionStart(d),
end = ('end' in d) ? x(isTimeSeries ? parseDate(d.end) : d.end) : width,
w = end - start;
return (w < 0) ? 0 : w;
}
//-- Data --//
function addName(data) {
var name = __data_names[data.id];
data.name = isDefined(name) ? name : data.id;
return data;
}
function convertRowsToData(rows) {
var keys = rows[0], new_row = {}, new_rows = [], i, j;
for (i = 1; i < rows.length; i++) {
new_row = {};
for (j = 0; j < rows[i].length; j++) {
new_row[keys[j]] = rows[i][j];
}
new_rows.push(new_row);
}
return new_rows;
}
function convertColumnsToData(columns) {
var new_rows = [], i, j, key;
for (i = 0; i < columns.length; i++) {
key = columns[i][0];
for (j = 1; j < columns[i].length; j++) {
if (isUndefined(new_rows[j - 1])) {
new_rows[j - 1] = {};
}
new_rows[j - 1][key] = columns[i][j];
}
}
return new_rows;
}
function convertDataToTargets(data) {
var ids = d3.keys(data[0]).filter(function (key) { return key !== __data_x; });
var targets, i = 0, parsedDate;
data.forEach(function (d) {
if (isTimeSeries) {
if (!(__data_x in d)) { throw Error("'" + __data_x + "' must be included in data"); }
parsedDate = parseDate(d[__data_x]);
if (parsedDate === null) { throw Error("Failed to parse timeseries date in data"); }
d.x = parsedDate;
} else {
d.x = i++;
}
if (firstDate === null) { firstDate = new Date(d.x); }
lastDate = new Date(d.x);
});
targets = ids.map(function (id) {
var convertedId = __data_id_converter(id);
return {
id: convertedId,
id_org: id,
values: data.map(function (d) {
return {x: d.x, value: +d[id], id: convertedId};
})
};
});
// cache as original id keyed
targets.forEach(function (d) {
addCache(d.id_org, d);
});
return targets;
}
function cloneTarget(target) {
return {
id : target.id,
id_org : target.id_org,
values : target.values.map(function (d) {
return {x: d.x, value: d.value, id: d.id};
})
};
}
function maxDataCount() {
return d3.max(c3.data.targets, function (t) { return t.values.length; });
}
function getTargetIds(targets) {
targets = isUndefined(targets) ? c3.data.targets : targets;
return targets.map(function (d) { return d.id; });
}
function hasTarget(id) {
var ids = getTargetIds(), i;
for (i = 0; i < ids.length; i++) {
if (ids[i] === id) {
return true;
}
}
return false;
}
function getTargets(filter) {
return isDefined(filter) ? c3.data.targets.filter(filter) : c3.data.targets;
}
function category(i) {
return i < __axis_x_categories.length ? __axis_x_categories[i] : i;
}
function classShapes(d) { return "-shapes -shapes-" + d.id; }
function classLine(d) { return classShapes(d) + " -line -line-" + d.id; }
function classCircles(d) { return classShapes(d) + " -circles -circles-" + d.id; }
function classBars(d) { return classShapes(d) + " -bars -bars-" + d.id; }
function classShape(d, i) { return "-shape -shape-" + i; }
function classCircle(d, i) { return classShape(d, i) + " -circle -circle-" + i; }
function classBar(d, i) { return classShape(d, i) + " -bar -bar-" + i; }
function classRegion(d, i) { return 'region region-' + i + ' ' + ('classes' in d ? [].concat(d.classes).join(' ') : ''); }
function xx(d) {
return x(d.x);
}
function xv(d) {
return x(isTimeSeries ? parseDate(d.value) : d.value);
}
function yv(d) {
return y(d.value);
}
//-- Circle --/
function circleX(d) {
return x(d.x);
}
function circleY(d) {
return getYScale(d.id)(d.value);
}
//-- Bar --//
function getBarIndices() {
var indices = {}, i = 0, j, k;
getTargets(isBarType).forEach(function (d) {
for (j = 0; j < __data_groups.length; j++) {
if (__data_groups[j].indexOf(d.id) < 0) { continue; }
for (k = 0; k < __data_groups[j].length; k++) {
if (__data_groups[j][k] in indices) {
indices[d.id] = indices[__data_groups[j][k]];
break;
}
}
}
if (isUndefined(indices[d.id])) { indices[d.id] = i++; }
});
indices.__max__ = i - 1;
return indices;
}
function getBarX(barW, barTargetsNum, barIndices, isSub) {
var scale = isSub ? subX : x;
return function (d) {
var barIndex = d.id in barIndices ? barIndices[d.id] : 0;
return scale(d.x) - barW * (barTargetsNum / 2 - barIndex);
};
}
function getBarY(barH, barIndices, zeroBased, isSub) {
var indicesIds = Object.keys(barIndices);
return function (d, i) {
var offset = 0;
var scale = isSub ? getSubYScale(d.id) : getYScale(d.id);
getTargets(isBarType).forEach(function (t) {
if (t.id === d.id || barIndices[t.id] !== barIndices[d.id]) { return; }
if (indicesIds.indexOf(t.id) < indicesIds.indexOf(d.id)) {
offset += barH(t.values[i]);
}
});
return zeroBased ? offset : scale(d.value) - offset;
};
}
function getBarW(axis, barTargetsNum, isSub) {
var barW;
if (isCategorized) {
barW = (axis.tickOffset() * 2 * 0.6) / barTargetsNum;
} else {
barW = (((__axis_rotated ? height : width) * getXDomainRatio(isSub)) / (maxDataCount() - 1)) * 0.6;
}
return barW;
}
function getBarH(height, isSub) {
var h = height === null ? function (v) { return v; } : function (v) { return height - v; };
return function (d) {
var scale = isSub ? getSubYScale(d.id) : getYScale(d.id);
return h(scale(d.value));
};
}
//-- Type --//
function setTargetType(targets, type) {
var targetIds = isUndefined(targets) ? getTargetIds() : targets;
if (typeof targetIds === 'string') { targetIds = [targetIds]; }
for (var i = 0; i < targetIds.length; i++) {
__data_types[targetIds[i]] = type;
}
}
function hasType(targets, type) {
var has = false;
targets.forEach(function (t) {
if (__data_types[t.id] === type) { has = true; }
if (!(t.id in __data_types) && type === 'line') { has = true; }
});
return has;
}
/* not used
function hasLineType(targets) {
return hasType(targets, 'line');
}
*/
function hasBarType(targets) {
return hasType(targets, 'bar');
}
function isLineType(d) {
var id = (typeof d === 'string') ? d : d.id;
return !(id in __data_types) || __data_types[id] === 'line' || __data_types[id] === 'spline';
}
function isSplineType(d) {
var id = (typeof d === 'string') ? d : d.id;
return __data_types[id] === 'spline';
}
function isBarType(d) {
var id = (typeof d === 'string') ? d : d.id;
return __data_types[id] === 'bar';
}
function lineData(d) {
return isLineType(d) ? d.values : [];
}
function barData(d) {
return isBarType(d) ? d.values : [];
}
//-- Color --//
function generateColor(_colors, _pattern) {
var ids = [],
colors = _colors,
pattern = (_pattern !== null) ? _pattern : ['#1f77b4', '#ff7f0e', '#2ca02c', '#d62728', '#9467bd', '#8c564b', '#e377c2', '#7f7f7f', '#bcbd22', '#17becf']; //same as d3.scale.category10()
return function (id) {
// if specified, choose that color
if (id in colors) { return _colors[id]; }
// if not specified, choose from pattern
if (ids.indexOf(id) === -1) {
ids.push(id);
}
return pattern[ids.indexOf(id) % pattern.length];
};
}
//-- Util --//
function isWithinCircle(_this, _r) {
var mouse = d3.mouse(_this), d3_this = d3.select(_this);
var cx = d3_this.attr("cx") * 1, cy = d3_this.attr("cy") * 1;
return Math.sqrt(Math.pow(cx - mouse[0], 2) + Math.pow(cy - mouse[1], 2)) < _r;
}
function isWithinBar(_this) {
var mouse = d3.mouse(_this), d3_this = d3.select(_this);
var x = d3_this.attr("x") * 1, y = d3_this.attr("y") * 1, w = d3_this.attr("width") * 1;
var sx = x - 10, ex = x + w + 10, ey = y - 10;
return sx < mouse[0] && mouse[0] < ex && ey < mouse[1];
}
function isWithinRegions(x, regions) {
var i;
for (i = 0; i < regions.length; i++) {
if (regions[i].start < x && x <= regions[i].end) { return true; }
}
return false;
}
//-- Selection --//
function selectPoint(target, d, i) {
__point_onselected(target, d);
// add selected-circle on low layer g
main.select(".selected-circles-" + d.id).selectAll('.selected-circle-' + i)
.data([d])
.enter().append('circle')
.attr("class", function () { return "selected-circle selected-circle-" + i; })
.attr("cx", __axis_rotated ? circleY : circleX)
.attr("cy", __axis_rotated ? circleX : circleY)
.attr("stroke", function () { return color(d.id); })
.attr("r", __point_select_r * 1.4)
.transition().duration(100)
.attr("r", __point_select_r);
}
function unselectPoint(target, d, i) {
__point_onunselected(target, d);
// remove selected-circle from low layer g
main.select(".selected-circles-" + d.id).selectAll(".selected-circle-" + i)
.transition().duration(100).attr('r', 0)
.remove();
}
function togglePoint(selected, target, d, i) {
(selected) ? selectPoint(target, d, i) : unselectPoint(target, d, i);
}
function selectBar() {
}
function unselectBar() {
}
function toggleBar(selected, target, d, i) {
(selected) ? selectBar(target, d, i) : unselectBar(target, d, i);
}
//-- Shape --//
// For main region
var lineOnMain = (function () {
var line = d3.svg.line()
.x(__axis_rotated ? function (d) { return getYScale(d.id)(d.value); } : xx)
.y(__axis_rotated ? xx : function (d) { return getYScale(d.id)(d.value); });
return function (d) {
var x0, y0;
if (isLineType(d)) {
isSplineType(d) ? line.interpolate("cardinal") : line.interpolate("linear");
return Object.keys(__data_regions).length > 0 ? lineWithRegions(d.values, x, getYScale(d.id), __data_regions[d.id]) : line(d.values);
} else {
x0 = x(d.values[0].x);
y0 = getYScale(d.id)(d.values[0].value);
return __axis_rotated ? "M " + y0 + " " + x0 : "M " + x0 + " " + y0;
}
};
})();
// For brush region
var lineOnSub = (function () {
var line = d3.svg.line()
.x(function (d) { return subX(d.x); })
.y(function (d) { return getSubYScale(d.id)(d.value); });
return function (d) {
return isLineType(d) ? line(d.values) : "M " + subX(d.values[0].x) + " " + getSubYScale(d.id)(d.values[0].value);
};
})();
function lineWithRegions(d, x, y, _regions) {
var prev = -1, i, j;
var s = "M", sWithRegion;
var xp, yp, dx, dy, dd, diff;
var xValue, yValue;
var regions = [];
// Check start/end of regions
if (isDefined(_regions)) {
for (i = 0; i < _regions.length; i++) {
regions[i] = {};
if (isUndefined(_regions[i].start)) {
regions[i].start = d[0].x;
} else if (isTimeSeries) {
regions[i].start = parseDate(_regions[i].start);
}
if (isUndefined(_regions[i].end)) {
regions[i].end = d[d.length - 1].x;
} else if (isTimeSeries) {
regions[i].end = parseDate(_regions[i].end);
}
}
}
// Set scales
xValue = __axis_rotated ? function (d) { return y(d.value); } : function (d) { return x(d.x); };
yValue = __axis_rotated ? function (d) { return x(d.x); } : function (d) { return y(d.value); };
// Define svg generator function for region
if (isTimeSeries) {
sWithRegion = function (d0, d1, j, diff) {
var x0 = d0.x.getTime(), x_diff = d1.x - d0.x,
xv0 = new Date(x0 + x_diff * j),
xv1 = new Date(x0 + x_diff * (j + diff));
return "M" + x(xv0) + " " + y(yp(j)) + " " + x(xv1) + " " + y(yp(j + diff));
};
} else {
sWithRegion = function (d0, d1, j, diff) {
return "M" + x(xp(j)) + " " + y(yp(j)) + " " + x(xp(j + diff)) + " " + y(yp(j + diff));
};
}
// Generate
for (i = 0; i < d.length; i++) {
// Draw as normal
if (isUndefined(regions) || ! isWithinRegions(d[i].x, regions)) {
s += " " + xValue(d[i]) + " " + yValue(d[i]);
}
// Draw with region // TODO: Fix for horizotal charts
else {
xp = getX(d[i - 1].x, d[i].x);
yp = getY(d[i - 1].value, d[i].value);
dx = x(d[i].x) - x(d[i - 1].x);
dy = y(d[i].value) - y(d[i - 1].value);
dd = Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2));
diff = 2 / dd;
var diffx2 = diff * 2;
for (j = diff; j <= 1; j += diffx2) {
s += sWithRegion(d[i - 1], d[i], j, diff);
}
}
prev = d[i].x;
}
return s;
}
//-- Define brush/zoom -//
var brush = d3.svg.brush().on("brush", redrawForBrush);
var zoom = d3.behavior.zoom().on("zoomstart", function () { zoom.altDomain = d3.event.sourceEvent.altKey ? x.orgDomain() : null; }).on("zoom", __zoom_enabled ? redrawForZoom : null);
// define functions for c3
brush.update = function () {
if (context) { context.select('.x.brush').call(this); }
return this;
};
zoom.orgScaleExtent = function () {
var extent = __zoom_extent ? __zoom_extent : [1, 10];
return [extent[0], Math.max(maxDataCount() / extent[1], extent[1])];
};
zoom.updateScaleExtent = function () {
var ratio = diffDomain(x.orgDomain()) / diffDomain(orgXDomain), extent = this.orgScaleExtent();
this.scaleExtent([extent[0] * ratio, extent[1] * ratio]);
return this;
};
/*-- Draw Chart --*/
// for svg elements
var svg, defs, main, context, legend, tooltip, selectChart;
// for brush area culculation
var firstDate = null, lastDate = null, orgXDomain;
function init(data) {
var targets = c3.data.targets = convertDataToTargets(data);
var grid, xgridLine;
var i;
selectChart = d3.select(__bindto);
if (selectChart.empty()) {
window.alert('No bind element found. Check the selector specified by "bindto" and existance of that element. Default "bindto" is "#chart".');
return;
}
// TODO: set names if names not specified
// Init sizes and scales
updateSizes();
updateScales();
// Set domains for each scale
x.domain(d3.extent(data.map(function (d) { return d.x; })));
y.domain(getYDomain(targets, 'y'));
y2.domain(getYDomain(targets, 'y2'));
subX.domain(x.domain());
subY.domain(y.domain());
subY2.domain(y2.domain());
// Set axes attrs
xAxis.ticks(data.length < 10 ? data.length : 10);
yAxis.ticks(__axis_y_ticks).outerTickSize(0).tickFormat(__axis_y_format);
yAxis2.ticks(__axis_y2_ticks).outerTickSize(0).tickFormat(__axis_y2_format);
// Save original x domain for zoom update
orgXDomain = x.domain();
// Set initialized scales to brush and zoom
brush.x(subX);
if (__zoom_enabled) { zoom.x(x); }
/*-- Basic Elements --*/
// Define svgs
svg = d3.select(__bindto).append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.on('mouseenter', __onenter)
.on('mouseleave', __onleave);
// Define defs
defs = svg.append("defs");
defs.append("clipPath")
.attr("id", clipId)
.append("rect")
.attr("y", margin.top)
.attr("width", width)
.attr("height", height - margin.top);
defs.append("clipPath")
.attr("id", "xaxis-clip")
.append("rect")
.attr("x", -1)
.attr("y", -1)
.attr("width", width + 2)
.attr("height", 40);
defs.append("clipPath")
.attr("id", "yaxis-clip")
.append("rect")
.attr("x", -margin.left + 1)
.attr("y", margin.top - 1)
.attr("width", margin.left)
.attr("height", height - margin.top + 2);
// Define regions
main = svg.append("g").attr("transform", translate.main);
context = __subchart_show ? svg.append("g").attr("transform", translate.context) : null;
legend = __legend_show ? svg.append("g").attr("transform", translate.legend) : null;
// Define tooltip
tooltip = d3.select(__bindto)
.style("position", "relative")
.append("div")
.style("position", "absolute")
.style("width", "30%") // TODO: cul actual width when show
.style("z-index", "10")
.style("visibility", "hidden");
/*-- Main Region --*/
// Add Axis
main.append("g")
.attr("class", "x axis")
.attr("clip-path", __axis_rotated ? "" : "url(#xaxis-clip)")
.attr("transform", translate.x)
.call(__axis_rotated ? yAxis : xAxis);
main.append("g")
.attr("class", "y axis")
.attr("clip-path", __axis_rotated ? "url(#yaxis-clip)" : "")
.call(__axis_rotated ? xAxis : yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("dy", "1.4em")
.attr("dx", "-.8em")
.style("text-anchor", "end")
.text(__axis_y_text);
if (__axis_y2_show) {
main.append("g")
.attr("class", "y2 axis")
.attr("transform", translate.y2)
.call(yAxis2);
}
// Grids
grid = main.append('g')
.attr("clip-path", clipPath)
.attr('class', 'grid');
// X-Grid
if (__grid_x_show) {
grid.append("g").attr("class", "xgrids");
}
if (__grid_x_lines) {
xgridLine = grid.append('g')
.attr("class", "xgrid-lines")
.selectAll('.xgrid-line')
.data(__grid_x_lines)
.enter().append('g')
.attr("class", "xgrid-line");
xgridLine.append('line')
.attr("class", function (d) { return "" + d['class']; });
xgridLine.append('text')
.attr("class", function (d) { return "" + d['class']; })
.attr("text-anchor", "end")
.attr("transform", __axis_rotated ? "" : "rotate(-90)")
.attr('dx', __axis_rotated ? 0 : -margin.top)
.attr('dy', -6)
.text(function (d) { return d.text; });
}
if (__point_focus_line_enabled) {
grid.append('g')
.attr("class", "xgrid-focus")
.append('line')
.attr('class', 'xgrid-focus')
.attr("x1", __axis_rotated ? 0 : -10)
.attr("x2", __axis_rotated ? width : -10)
.attr("y1", __axis_rotated ? -10 : margin.top)
.attr("y2", __axis_rotated ? -10 : height);
}
// Y-Grid
if (__grid_y_show) {
grid.append('g').attr('class', 'ygrids');
}
if (__grid_y_lines) {
grid.append('g')
.attr('class', 'ygrid-lines')
.selectAll('ygrid-line')
.data(__grid_y_lines)
.enter().append('line')
.attr("class", function (d) { return "ygrid-line " + d['class']; });
}
// Area
main.append('g')
.attr("clip-path", clipPath)
.attr("class", "regions");
// Define g for chart area
main.append('g')
.attr("clip-path", clipPath)
.attr('class', 'chart');
// Cover whole with rects for events
main.select('.chart').append("g")
.attr("class", "event-rects")
.style('fill-opacity', 0)
.style('cursor', __zoom_enabled ? 'ew-resize' : null)
.selectAll(".event-rects")
.data(data)
.enter().append("rect")
.attr("class", function (d, i) { return "event-rect event-rect-" + i; })
.style("cursor", __data_selection_enabled && __data_selection_grouped ? "pointer" : null)
.on('mouseover', function (d, i) {
if (dragging) { return; } // do nothing if dragging
var selectedData = c3.data.targets.map(function (d) { return addName(d.values[i]); });
var j, newData;
// Sort selectedData as names order
if (Object.keys(__data_names).length > 0) {
newData = [];
for (var id in __data_names) {
for (j = 0; j < selectedData.length; j++) {
if (selectedData[j].id === id) {
newData.push(selectedData[j]);
selectedData.shift(j);
break;
}
}
}
selectedData = newData.concat(selectedData); // Add remained
}
// Expand circles if needed
if (__point_focus_expand_enabled) {
main.selectAll('.-circle-' + i)
.classed(EXPANDED, true)
.attr('r', __point_focus_expand_r);
}
// Expand bars
main.selectAll(".-bar-" + i)
.classed(EXPANDED, true);
// Show xgrid focus line
main.selectAll('line.xgrid-focus')
.style("visibility", "visible")
.data([selectedData[0]])
.attr(__axis_rotated ? 'y1' : 'x1', xx)
.attr(__axis_rotated ? 'y2' : 'x2', xx);
// Set tooltip
tooltip.style("top", (d3.mouse(this)[1] + 30) + "px")
.style("left", ((__axis_rotated ? d3.mouse(this)[0] : x(selectedData[0].x)) + 60) + "px");
tooltip.html(__tooltip_contents(selectedData));
tooltip.style("visibility", "visible");
})
.on('mouseout', function (d, i) {
main.select('line.xgrid-focus').style("visibility", "hidden");
tooltip.style("visibility", "hidden");
// Undo expanded circles
main.selectAll('.-circle-' + i)
.filter(function () { return d3.select(this).classed(EXPANDED); })
.classed(EXPANDED, false)
.attr('r', __point_r);
// Undo expanded bar
main.selectAll(".-bar-" + i)
.classed(EXPANDED, false);
})
.on('mousemove', function (d, i) {
if (! __data_selection_enabled || dragging) { return; }
if (__data_selection_grouped) { return; } // nothing to do when grouped
main.selectAll('.-shape-' + i)
.filter(function (d) { return __data_selection_isselectable(d); })
.each(function () {
var _this = d3.select(this).classed(EXPANDED, true);
if (this.nodeName === 'circle') { _this.attr('r', __point_focus_expand_r); }
d3.select('.event-rect-' + i).style('cursor', null);
})
.filter(function () {
var _this = d3.select(this);
if (this.nodeName === 'circle') {
return isWithinCircle(this, __point_select_r);
}
else if (this.nodeName === 'rect') {
return isWithinBar(this, _this.attr('x'), _this.attr('y'));
}
})
.each(function () {
var _this = d3.select(this);
if (! _this.classed(EXPANDED)) {
_this.classed(EXPANDED, true);
if (this.nodeName === 'circle') { _this.attr('r', __point_select_r); }
}
d3.select('.event-rect-' + i).style('cursor', 'pointer');
});
})
.on('click', function (d, i) {
if (cancelClick) {
cancelClick = false;
return;
}
main.selectAll('.-shape-' + i).each(function (d) {
var _this = d3.select(this),
isSelected = _this.classed(SELECTED);
var isWithin = false, toggle;
if (this.nodeName === 'circle') {
isWithin = isWithinCircle(this, __point_select_r * 1.5);
toggle = togglePoint;
}
else if (this.nodeName === 'rect') {
isWithin = isWithinBar(this);
toggle = toggleBar;
}
if (__data_selection_grouped || isWithin) {
if (__data_selection_enabled && __data_selection_isselectable(d)) {
_this.classed(SELECTED, !isSelected);
toggle(!isSelected, _this, d, i);
}
__point_onclick(d, _this); // TODO: should be __data_onclick
}
});
})
.call(
d3.behavior.drag().origin(Object).on('drag', function () {
if (! __data_selection_enabled) { return; } // do nothing if not selectable
if (__zoom_enabled && ! zoom.altDomain) { return; } // skip if zoomable because of conflict drag dehavior
var sx = dragStart[0], sy = dragStart[1],
mouse = d3.mouse(this),
mx = mouse[0],
my = mouse[1],
minX = Math.min(sx, mx),
maxX = Math.max(sx, mx),
minY = (__data_selection_grouped) ? margin.top : Math.min(sy, my),
maxY = (__data_selection_grouped) ? height : Math.max(sy, my);
main.select('.dragarea')
.attr('x', minX)
.attr('y', minY)
.attr('width', maxX - minX)
.attr('height', maxY - minY);
main.selectAll('.-shapes').selectAll('.-shape')
.filter(function (d) { return __data_selection_isselectable(d); })
.each(function (d, i) {
var _this = d3.select(this),
isSelected = _this.classed(SELECTED),
isIncluded = _this.classed(INCLUDED),
_x, _y, _w, toggle, isWithin = false;
if (this.nodeName === 'circle') {
_x = _this.attr("cx") * 1;
_y = _this.attr("cy") * 1;
toggle = togglePoint;
isWithin = minX < _x && _x < maxX && minY < _y && _y < maxY;
}
else if (this.nodeName === 'rect') {
_x = _this.attr("x") * 1;
_y = _this.attr("y") * 1;
_w = _this.attr('width') * 1;
toggle = toggleBar;
isWithin = minX < _x + _w && _x < maxX && _y < maxY;
}
if (isWithin ^ isIncluded) {
_this.classed(INCLUDED, !isIncluded);
// TODO: included/unincluded callback here
_this.classed(SELECTED, !isSelected);
toggle(!isSelected, _this, d, i);
}
});
})
.on('dragstart', function () {
if (! __data_selection_enabled) { return; } // do nothing if not selectable
dragStart = d3.mouse(this);
main.select('.chart').append('rect')
.attr('class', 'dragarea')
.style('opacity', 0.1);
dragging = true;
// TODO: add callback here
})
.on('dragend', function () {
if (! __data_selection_enabled) { return; } // do nothing if not selectable
main.select('.dragarea')
.transition().duration(100)
.style('opacity', 0)
.remove();
main.selectAll('.-shape')
.classed(INCLUDED, false);
dragging = false;
// TODO: add callback here
})
)
.call(zoom).on("dblclick.zoom", null);
// Define g for bar chart area
main.select(".chart").append("g")
.attr("class", "chart-bars");
// Define g for line chart area
main.select(".chart").append("g")
.attr("class", "chart-lines");
if (__zoom_enabled) {
// if zoom privileged, insert rect to forefront
main.insert('rect', __zoom_privileged ? null : 'g.grid')
.attr('class', 'zoom-rect')
.attr('width', width)
.attr('height', height)
.style('opacity', 0)
.style('cursor', 'ew-resize')
.call(zoom).on("dblclick.zoom", null);
}
// Set default extent if defined
if (__axis_x_default !== null) {
brush.extent(typeof __axis_x_default !== 'function' ? __axis_x_default : (isTimeSeries ? __axis_x_default(firstDate, lastDate) : __axis_x_default(0, maxDataCount() - 1)));
}
/*-- Context Region --*/
if (__subchart_show) {
// Define g for chart area
context.append('g')
.attr("clip-path", clipPath)
.attr('class', 'chart');
// Define g for bar chart area
context.select(".chart").append("g")
.attr("class", "chart-bars");
// Define g for line chart area
context.select(".chart").append("g")
.attr("class", "chart-lines");
// Add extent rect for Brush
context.append("g")
.attr("clip-path", clipPath)
.attr("class", "x brush")
.call(brush)
.selectAll("rect")
.attr("height", height2);
// ATTENTION: This must be called AFTER chart added
// Add Axis
context.append("g")
.attr("class", "x axis")
.attr("transform", translate.subx)
.call(subXAxis);
}
/*-- Legend Region --*/
if (__legend_show) { updateLegend(targets); }
// Set targets
updateTargets(targets);
// Draw with targets
redraw({withTransition: false, withUpdateXDomain: true});
// Show tooltip if needed
if (__tooltip_init_show) {
if (isTimeSeries && typeof __tooltip_init_x === 'string') {
__tooltip_init_x = parseDate(__tooltip_init_x);
for (i = 0; i < targets[0].values.length; i++) {
if ((targets[0].values[i].x - __tooltip_init_x) === 0) { break; }
}
__tooltip_init_x = i;
}
tooltip.html(__tooltip_contents(targets.map(function (d) {
return addName(d.values[__tooltip_init_x]);
})));
tooltip.style("top", __tooltip_init_position.top)
.style("left", __tooltip_init_position.left)
.style("visibility", "visible");
}
}
function redraw(options) {
var xgrid, xgridData, xgridLine;
var mainCircle, mainBar;
var barIndices = getBarIndices(), barTargetsNum = barIndices.__max__ + 1;
var barX, barY, barW, barH;
var rectX, rectW;
var withY, withSubchart, withTransition, withUpdateXDomain;
var duration;
options = isDefined(options) ? options : {};
withY = isDefined(options.withY) ? options.withY : true;
withSubchart = isDefined(options.withSubchart) ? options.withSubchart : true;
withTransition = isDefined(options.withTransition) ? options.withTransition : true;
withUpdateXDomain = isDefined(options.withUpdateXDomain) ? options.withUpdateXDomain : false;
duration = withTransition ? 250 : 0;
// ATTENTION: call here to update tickOffset
if (withUpdateXDomain) {
x.domain(brush.empty() ? orgXDomain : brush.extent());
if (__zoom_enabled) { zoom.x(x).updateScaleExtent(); }
}
y.domain(getYDomain(c3.data.targets, 'y'));
y2.domain(getYDomain(c3.data.targets, 'y2'));
main.select(".x.axis").transition().duration(__axis_rotated ? duration : 0).call(__axis_rotated ? yAxis : xAxis);
main.select(".y.axis").transition().duration(__axis_rotated ? 0 : duration).call(__axis_rotated ? xAxis : yAxis);
main.select(".y2.axis").transition().call(yAxis2);
// Update sub domain
subY.domain(y.domain());
subY2.domain(y2.domain());
// tooltip
tooltip.style("visibility", "hidden");
// grid
main.select('line.xgrid-focus')
.style("visibility", "hidden")
.attr('y2', height);
if (__grid_x_show) {
if (__grid_x_type === 'year') {
xgridData = [];
var firstYear = firstDate.getFullYear();
var lastYear = lastDate.getFullYear();
for (var year = firstYear; year <= lastYear; year++) {
xgridData.push(new Date(year + '-01-01 00:00:00'));
}
} else {
xgridData = x.ticks(10);
}
xgrid = main.select('.xgrids').selectAll(".xgrid")
.data(xgridData);
xgrid.enter().append('line').attr("class", "xgrid");
xgrid.exit().remove();
main.selectAll(".xgrid")
.attr("x1", function (d) { return x(d) - xAxis.tickOffset(); })
.attr("x2", function (d) { return x(d) - xAxis.tickOffset(); })
.attr("y1", margin.top)
.attr("y2", height);
}
if (__grid_x_lines) {
xgridLine = main.selectAll(".xgrid-lines");
xgridLine.selectAll('line')
.attr("x1", __axis_rotated ? 0 : xv)
.attr("x2", __axis_rotated ? width : xv)
.attr("y1", __axis_rotated ? xv : margin.top)
.attr("y2", __axis_rotated ? xv : height);
xgridLine.selectAll('text')
.attr("x", __axis_rotated ? width : 0)
.attr("y", xv);
}
// Y-Grid
if (withY && __grid_y_show) {
var ygrid = main.select('.ygrids').selectAll(".ygrid")
.data(y.ticks(10));
ygrid.enter().append('line')
.attr('class', 'ygrid');
ygrid.attr("x1", __axis_rotated ? y : 0)
.attr("x2", __axis_rotated ? y : width)
.attr("y1", __axis_rotated ? 0 : y)
.attr("y2", __axis_rotated ? height : y)
.attr("opacity", 0)
.transition()
.attr("opacity", 1);
ygrid.exit().remove();
}
if (withY && __grid_y_lines) {
main.select('.ygrid-lines').selectAll('.ygrid-line')
.attr("y1", yv)
.attr("y2", yv);
}
// bars
barW = getBarW(xAxis, barTargetsNum, false);
barH = getBarH(__axis_rotated ? null : height);
barX = getBarX(barW, barTargetsNum, barIndices);
barY = getBarY(barH, barIndices, __axis_rotated);
mainBar = main.selectAll('.-bars').selectAll('.-bar')
.data(barData);
mainBar.transition().duration(duration)
.attr("x", __axis_rotated ? barY : barX)
.attr("y", __axis_rotated ? barX : barY)
.attr("width", __axis_rotated ? barH : barW)
.attr("height", __axis_rotated ? barW : barH);
mainBar.enter().append('rect')
.attr("class", classBar)
.attr("x", __axis_rotated ? barY : barX)
.attr("y", __axis_rotated ? barX : barY)
.attr("width", __axis_rotated ? barH : barW)
.attr("height", __axis_rotated ? barW : barH)
.style("opacity", 0)
.transition().duration(duration)
.style('opacity', 1);
mainBar.exit().transition().duration(duration)
.style('opacity', 0)
.remove();
// lines and cricles
main.selectAll('.-line')
.transition().duration(duration)
.attr("d", lineOnMain);
mainCircle = main.selectAll('.-circles').selectAll('.-circle')
.data(lineData);
mainCircle.transition().duration(duration)
.attr("cx", __axis_rotated ? circleY : circleX)
.attr("cy", __axis_rotated ? circleX : circleY);
mainCircle.enter().append("circle")
.attr("class", classCircle)
.attr("cx", __axis_rotated ? circleY : circleX)
.attr("cy", __axis_rotated ? circleX : circleY)
.attr("r", __point_r);
mainCircle.exit().remove();
// subchart
if (__subchart_show) {
// reflect main chart to extent on subchart if zoomed
if (d3.event !== null && d3.event.type === 'zoom') {
brush.extent(x.orgDomain()).update();
}
// update subchart elements if needed
if (withSubchart) {
// axes
// TODO: fix when rotated
context.select('.x.axis').transition().duration(__axis_rotated ? duration : 0).call(__axis_rotated ? yAxis : subXAxis);
// extent rect
if (! brush.empty()) {
brush.extent(x.orgDomain()).update();
}
// bars
barW = getBarW(subXAxis, barTargetsNum, true);
barH = getBarH(height2, true);
barX = getBarX(barW, barTargetsNum, barIndices, true);
barY = getBarY(barH, barIndices, false, true);
var contextBar = context.selectAll('.-bars').selectAll('.-bar')
.data(barData);
contextBar.transition().duration(duration)
.attr("x", barX).attr("y", barY).attr("width", barW).attr("height", barH);
contextBar.enter().append('rect')
.attr("class", classBar)
.attr("x", barX).attr("y", barY).attr("width", barW).attr("height", barH)
.style("opacity", 0)
.transition()
.style('opacity', 1);
contextBar.exit().transition()
.style('opacity', 0)
.remove();
// lines
context.selectAll('.-line')
.transition().duration(duration)
.attr("d", lineOnSub);
}
}
// circles for select
main.selectAll('.selected-circles')
.filter(function (d) { return isBarType(d); })
.selectAll('circle')
.remove();
main.selectAll('.selected-circle')
.transition().duration(duration)
.attr("cx", __axis_rotated ? circleY : circleX)
.attr("cy", __axis_rotated ? circleX : circleY);
// rect for mouseover
rectW = (((__axis_rotated ? height : width) * getXDomainRatio()) / (maxDataCount() - 1));
rectX = function (d) { return x(d.x) - (rectW / 2); };
main.selectAll('.event-rect')
.attr("x", __axis_rotated ? 0 : rectX)
.attr("y", __axis_rotated ? rectX : 0)
.attr("width", __axis_rotated ? width : rectW)
.attr("height", __axis_rotated ? rectW : height);
// rect for regions
var mainRegion = main.select('.regions').selectAll('rect.region')
.data(__regions);
mainRegion.enter().append('rect');
mainRegion
.attr('class', classRegion)
.attr("x", __axis_rotated ? 0 : regionStart)
.attr("y", __axis_rotated ? regionStart : margin.top)
.attr("width", __axis_rotated ? width : regionWidth)
.attr("height", __axis_rotated ? regionWidth : height)
.style("fill-opacity", function (d) { return isDefined(d.opacity) ? d.opacity : 0.1; });
mainRegion.exit().transition().duration(duration)
.style("fill-opacity", 0)
.remove();
}
function redrawForBrush() {
redraw({
withTransition: false,
withY: false,
withSubchart: false,
withUpdateXDomain: true
});
}
function redrawForZoom() {
if (d3.event.sourceEvent.type === 'mousemove' && zoom.altDomain) {
x.domain(zoom.altDomain);
zoom.x(x).updateScaleExtent();
return;
}
if (isCategorized && x.orgDomain()[0] === orgXDomain[0]) {
x.domain([orgXDomain[0] - 1e-10, x.orgDomain()[1]]);
}
redraw({
withTransition: false,
withY: false,
withSubchart: false
});
if (d3.event.sourceEvent.type === 'mousemove') {
cancelClick = true;
}
}
function resize() {
// Update sizes and scales
updateSizes();
updateScales();
// Set x for brush again because of scale update
brush.x(subX);
// Set x for zoom again because of scale update
if (__zoom_enabled) { zoom.x(x); }
// Update sizes
d3.select('svg').attr('width', currentWidth).attr('height', currentHeight);
d3.select('#' + clipId).select('rect').attr('width', width).attr('height', height);
d3.select('#xaxis-clip').select('rect').attr('width', width + 2);
d3.select('.zoom-rect').attr('width', width).attr('height', height);
// Update main positions
main.select('.x.axis').attr("transform", translate.x);
main.select('.y2.axis').attr("transform", translate.y2);
// Update context sizes and positions
if (__subchart_show) {
context.select('.x.brush').selectAll('rect').attr('height', height2);
context.attr("transform", translate.context);
context.select('.x.axis').attr("transform", translate.subx);
}
// Update legend positions
if (__legend_show) {
legend.attr("transform", translate.legend);
updateLegend(c3.data.targets, {withTransition: false});
}
// Draw with new sizes & scales
redraw({withTransition: false, withUpdateXDomain: true});
}
function updateTargets(targets) {
var mainLineEnter, mainLineUpdate, mainBarEnter, mainBarUpdate;
var contextLineEnter, contextLineUpdate, contextBarEnter, contextBarUpdate;
/*-- Main --*/
//-- Bar --//
mainBarUpdate = main.select('.chart-bars')
.selectAll('.chart-bar')
.data(targets);
mainBarEnter = mainBarUpdate.enter().append('g')
.attr('class', function (d) { return 'chart-bar target target-' + d.id; })
.style("pointer-events", "none")
.style('opacity', 0);
// Bars for each data
mainBarEnter.append('g')
.attr("class", classBars)
.style("fill", function (d) { return color(d.id); })
.style("stroke", function (d) { return color(d.id); })
.style("stroke-width", 0)
.style("cursor", function (d) { return __data_selection_isselectable(d) ? "pointer" : null; });
//-- Line --//
mainLineUpdate = main.select('.chart-lines')
.selectAll('.chart-line')
.data(targets);
mainLineEnter = mainLineUpdate.enter().append('g')
.attr('class', function (d) { return 'chart-line target target-' + d.id; })
.style("pointer-events", "none")
.style('opacity', 0);
// Lines for each data
mainLineEnter.append("path")
.attr("class", classLine)
.style("stroke", function (d) { return color(d.id); });
// Circles for each data point on lines
mainLineEnter.append('g')
.attr("class", function (d) { return "selected-circles selected-circles-" + d.id; });
mainLineEnter.append('g')
.attr("class", classCircles)
.style("fill", function (d) { return color(d.id); })
.style("cursor", function (d) { return __data_selection_isselectable(d) ? "pointer" : null; });
// Update date for selected circles
targets.forEach(function (t) {
main.selectAll('.selected-circles-' + t.id).selectAll('.selected-circle').each(function (d) {
d.value = t.values[d.x].value;
});
});
/*-- Context --*/
if (__subchart_show) {
contextBarUpdate = context.select('.chart-bars')
.selectAll('.chart-bar')
.data(targets);
contextBarEnter = contextBarUpdate.enter().append('g')
.attr('class', function (d) { return 'chart-bar target target-' + d.id; })
.style('opacity', 0);
// Bars for each data
contextBarEnter.append('g')
.attr("class", classBars)
.style("fill", function (d) { return color(d.id); });
//-- Line --//
contextLineUpdate = context.select('.chart-lines')
.selectAll('.chart-line')
.data(targets);
contextLineEnter = contextLineUpdate.enter().append('g')
.attr('class', function (d) { return 'chart-line target target-' + d.id; })
.style('opacity', 0);
// Lines for each data
contextLineEnter.append("path")
.attr("class", classLine)
.style("stroke", function (d) { return color(d.id); });
}
/*-- Legend --*/
if (__legend_show) {
updateLegend(targets);
}
/*-- Show --*/
// Fade-in each chart
d3.selectAll('.target')
.transition()
.style("opacity", 1);
}
function load(targets, done) {
// Update/Add data
c3.data.targets.forEach(function (d) {
for (var i = 0; i < targets.length; i++) {
if (d.id === targets[i].id) {
d.values = targets[i].values;
targets.splice(i, 1);
break;
}
}
});
c3.data.targets = c3.data.targets.concat(targets); // add remained
// Set targets
updateTargets(c3.data.targets);
// Redraw with new targets
redraw();
done();
}
/*-- Draw Legend --*/
function updateLegend(targets, options) {
var ids = getTargetIds(targets), l;
var padding = width / 2 - __legend_item_width * Object.keys(targets).length / 2;
var withTransition;
options = isUndefined(options) ? {} : options;
withTransition = isDefined(options.withTransition) ? options.withTransition : true;
// Define g for legend area
l = legend.selectAll('.legend-item')
.data(ids)
.enter().append('g')
.attr('class', function (d) { return 'legend-item legend-item-' + d; })
.style('cursor', 'pointer')
.on('click', function (d) {
__legend_item_onclick(d);
})
.on('mouseover', function (d) {
d3.selectAll('.legend-item').filter(function (_d) { return _d !== d; })
.transition().duration(100)
.style('opacity', 0.3);
c3.focus(d);
})
.on('mouseout', function () {
d3.selectAll('.legend-item')
.transition().duration(100)
.style('opacity', 1);
c3.revert();
});
l.append('rect')
.attr("class", "legend-item-event")
.style('fill-opacity', 0)
.attr('x', -200)
.attr('y', function () { return legendHeight / 2 - 16; })
.attr('width', __legend_item_width)
.attr('height', 24);
l.append('rect')
.attr("class", "legend-item-tile")
.style('fill', function (d) { return color(d); })
.attr('x', -200)
.attr('y', function () { return legendHeight / 2 - 9; })
.attr('width', 10)
.attr('height', 10);
l.append('text')
.text(function (d) { return isDefined(__data_names[d]) ? __data_names[d] : d; })
.attr('x', -200)
.attr('y', function () { return legendHeight / 2; });
legend.selectAll('rect.legend-item-event')
.data(ids)
.transition().duration(withTransition ? 250 : 0)
.attr('x', function (d, i) { return padding + __legend_item_width * i; });
legend.selectAll('rect.legend-item-tile')
.data(ids)
.transition().duration(withTransition ? 250 : 0)
.attr('x', function (d, i) { return padding + __legend_item_width * i; });
legend.selectAll('text')
.data(ids)
.transition().duration(withTransition ? 250 : 0)
.attr('x', function (d, i) { return padding + __legend_item_width * i + 14; });
}
/*-- Event Handling --*/
function getTargetSelector(target) {
return isDefined(target) ? '.target-' + target : '.target';
}
c3.focus = function (target) {
c3.defocus();
d3.selectAll(getTargetSelector(target))
.filter(function (d) { return hasTarget(d.id); })
.classed('focused', true)
.transition().duration(100)
.style('opacity', 1);
};
c3.defocus = function (target) {
d3.selectAll(getTargetSelector(target))
.filter(function (d) { return hasTarget(d.id); })
.classed('focused', false)
.transition().duration(100)
.style('opacity', 0.3);
};
c3.revert = function (target) {
d3.selectAll(getTargetSelector(target))
.filter(function (d) { return hasTarget(d.id); })
.classed('focused', false)
.transition().duration(100)
.style('opacity', 1);
};
c3.show = function (target) {
d3.selectAll(getTargetSelector(target))
.transition()
.style('opacity', 1);
};
c3.hide = function (target) {
d3.selectAll(getTargetSelector(target))
.transition()
.style('opacity', 0);
};
c3.unzoom = function () {
brush.clear().update();
redraw({withUpdateXDomain: true});
};
c3.load = function (args) {
// check args
if (isUndefined(args.done)) {
args.done = function () {};
}
// use cache if exists
if ('cacheIds' in args && hasCaches(args.cacheIds)) {
load(getCaches(args.cacheIds), args.done);
return;
}
// load data
if ('data' in args) {
load(convertDataToTargets(args.data), args.done);
}
else if ('url' in args) {
d3.csv(args.url, function (error, data) {
load(convertDataToTargets(data), args.done);
});
}
else if ('rows' in args) {
load(convertDataToTargets(convertRowsToData(args.rows)), args.done);
}
else if ('columns' in args) {
load(convertDataToTargets(convertColumnsToData(args.columns)), args.done);
}
else {
throw Error('url or rows or columns is required.');
}
};
c3.unload = function (target) {
c3.data.targets = c3.data.targets.filter(function (d) {
return d.id !== target;
});
d3.selectAll('.target-' + target)
.transition()
.style('opacity', 0)
.remove();
if (__legend_show) {
d3.selectAll('.legend-item-' + target).remove();
updateLegend(c3.data.targets);
}
if (c3.data.targets.length > 0) { redraw(); }
};
c3.selected = function (target) {
var suffix = isDefined(target) ? '-' + target : '';
return d3.merge(
main.selectAll('.-shapes' + suffix).selectAll('.-shape')
.filter(function () { return d3.select(this).classed(SELECTED); })
.map(function (d) { return d.map(function (_d) { return _d.__data__; }); })
);
};
c3.select = function (ids, indices, resetOther) {
if (! __data_selection_enabled) { return; }
main.selectAll('.-shapes').selectAll('.-shape').each(function (d, i) {
var selectShape = (this.nodeName === 'circle') ? selectPoint : selectBar,
unselectShape = (this.nodeName === 'circle') ? unselectPoint : unselectBar;
if (indices.indexOf(i) >= 0) {
if (__data_selection_isselectable(d) && (__data_selection_grouped || isUndefined(ids) || ids.indexOf(d.id) >= 0)) {
selectShape(d3.select(this).classed(SELECTED, true), d, i);
}
} else if (isDefined(resetOther) && resetOther) {
unselectShape(d3.select(this).classed(SELECTED, false), d, i);
}
});
};
c3.unselect = function (ids, indices) {
if (! __data_selection_enabled) { return; }
main.selectAll('.-shapes').selectAll('.-shape').each(function (d, i) {
var unselectShape = (this.nodeName === 'circle') ? unselectPoint : unselectBar;
if (isUndefined(indices) || indices.indexOf(i) >= 0) {
if (__data_selection_isselectable(d) && (__data_selection_grouped || isUndefined(ids) || ids.indexOf(d.id) >= 0)) {
unselectShape(d3.select(this).classed(SELECTED, false), d, i);
}
}
});
};
c3.toLine = function (targets) {
setTargetType(targets, 'line');
redraw();
};
c3.toSpline = function (targets) {
setTargetType(targets, 'spline');
redraw();
};
c3.toBar = function (targets) {
setTargetType(targets, 'bar');
redraw();
};
c3.groups = function (groups) {
if (isUndefined(groups)) { return __data_groups; }
__data_groups = groups;
redraw();
return __data_groups;
};
c3.regions = function (regions) {
if (isUndefined(regions)) { return __regions; }
__regions = regions;
redraw();
return __regions;
};
c3.regions.add = function (regions) {
if (isUndefined(regions)) { return __regions; }
__regions = __regions.concat(regions);
redraw();
return __regions;
};
c3.regions.remove = function (classes, options) {
var regionClasses = [].concat(classes);
options = isDefined(options) ? options : {};
regionClasses.forEach(function (cls) {
var regions = d3.selectAll('.' + cls);
if (isDefined(options.duration)) {
regions = regions.transition().duration(options.duration).style('fill-opacity', 0);
}
regions.remove();
__regions = __regions.filter(function (region) {
return region.classes.indexOf(cls) < 0;
});
});
return __regions;
};
c3.data.get = function (id) {
var target = c3.data.getAsTarget(id);
return isDefined(target) ? target.values.map(function (d) { return d.value; }) : undefined;
};
c3.data.getAsTarget = function (id) {
var targets = getTargets(function (d) { return d.id === id; });
return targets.length > 0 ? targets[0] : undefined;
};
/*-- Load data and init chart with defined functions --*/
if ('url' in config.data) {
d3.csv(config.data.url, function (error, data) { init(data); });
}
else if ('rows' in config.data) {
init(convertRowsToData(config.data.rows));
}
else if ('columns' in config.data) {
init(convertColumnsToData(config.data.columns));
}
else {
throw Error('url or rows or columns is required.');
}
// Bind resize event
window.onresize = resize;
return c3;
};
function categoryAxis() {
var scale = d3.scale.linear(), orient = "bottom", tickMajorSize = 6, /*tickMinorSize = 6,*/ tickEndSize = 6, tickPadding = 3, tickCentered = false, tickTextNum = 10, tickOffset = 0, categories = [];
function axisX(selection, x) {
selection.attr("transform", function (d) {
return "translate(" + (x(d) + tickOffset) + ", 0)";
});
}
function axisY(selection, y) {
selection.attr("transform", function (d) {
return "translate(0," + y(d) + ")";
});
}
function scaleExtent(domain) {
var start = domain[0], stop = domain[domain.length - 1];
return start < stop ? [ start, stop ] : [ stop, start ];
}
function generateTicks(domain) {
var ticks = [];
for (var i = Math.ceil(domain[0]); i < domain[1]; i++) {
ticks.push(i);
}
if (ticks.length > 0 && ticks[0] > 0) {
ticks.unshift(ticks[0] - (ticks[1] - ticks[0]));
}
return ticks;
}
function shouldShowTickText(ticks, i) {
return ticks.length < tickTextNum || i % Math.ceil(ticks.length / tickTextNum) === 0;
}
function category(i) {
return i < categories.length ? categories[i] : i;
}
function axis(g) {
g.each(function () {
var g = d3.select(this);
var ticks = generateTicks(scale.domain());
var tick = g.selectAll(".tick.major").data(ticks, String),
tickEnter = tick.enter().insert("g", "path").attr("class", "tick major").style("opacity", 1e-6),
tickExit = d3.transition(tick.exit()).style("opacity", 1e-6).remove(),
tickUpdate = d3.transition(tick).style("opacity", 1),
tickTransform,
tickX;
var range = scale.rangeExtent ? scale.rangeExtent() : scaleExtent(scale.range()),
path = g.selectAll(".domain").data([ 0 ]);
path.enter().append("path").attr("class", "domain");
var pathUpdate = d3.transition(path);
var scale1 = scale.copy(), scale0 = this.__chart__ || scale1;
this.__chart__ = scale1;
tickEnter.append("line");
tickEnter.append("text");
var lineEnter = tickEnter.select("line"), lineUpdate = tickUpdate.select("line"), text = tick.select("text"), textEnter = tickEnter.select("text"), textUpdate = tickUpdate.select("text");
tickOffset = (scale1(1) - scale1(0)) / 2;
tickX = tickCentered ? 0 : tickOffset;
switch (orient) {
case "bottom":
{
tickTransform = axisX;
lineEnter.attr("y2", tickMajorSize);
textEnter.attr("y", Math.max(tickMajorSize, 0) + tickPadding);
lineUpdate.attr("x1", tickX).attr("x2", tickX).attr("y2", tickMajorSize);
textUpdate.attr("x", 0).attr("y", Math.max(tickMajorSize, 0) + tickPadding);
text.attr("dy", ".71em").style("text-anchor", "middle");
text.text(function (i) { return shouldShowTickText(ticks, i) ? category(i) : ""; });
pathUpdate.attr("d", "M" + range[0] + "," + tickEndSize + "V0H" + range[1] + "V" + tickEndSize);
}
break;
/* TODO: implement
case "top":
{
tickTransform = axisX
lineEnter.attr("y2", -tickMajorSize)
textEnter.attr("y", -(Math.max(tickMajorSize, 0) + tickPadding))
lineUpdate.attr("x2", 0).attr("y2", -tickMajorSize)
textUpdate.attr("x", 0).attr("y", -(Math.max(tickMajorSize, 0) + tickPadding))
text.attr("dy", "0em").style("text-anchor", "middle")
pathUpdate.attr("d", "M" + range[0] + "," + -tickEndSize + "V0H" + range[1] + "V" + -tickEndSize)
break
}
*/
case "left":
{
tickTransform = axisY;
lineEnter.attr("x2", -tickMajorSize);
textEnter.attr("x", -(Math.max(tickMajorSize, 0) + tickPadding));
lineUpdate.attr("x2", -tickMajorSize).attr("y2", 0);
textUpdate.attr("x", -(Math.max(tickMajorSize, 0) + tickPadding)).attr("y", tickOffset);
text.attr("dy", ".32em").style("text-anchor", "end");
text.text(function (i) { return shouldShowTickText(ticks, i) ? category(i) : ""; });
pathUpdate.attr("d", "M" + -tickEndSize + "," + range[0] + "H0V" + range[1] + "H" + -tickEndSize);
break;
}
/*
case "right":
{
tickTransform = axisY
lineEnter.attr("x2", tickMajorSize)
textEnter.attr("x", Math.max(tickMajorSize, 0) + tickPadding)
lineUpdate.attr("x2", tickMajorSize).attr("y2", 0)
textUpdate.attr("x", Math.max(tickMajorSize, 0) + tickPadding).attr("y", 0)
text.attr("dy", ".32em").style("text-anchor", "start")
pathUpdate.attr("d", "M" + tickEndSize + "," + range[0] + "H0V" + range[1] + "H" + tickEndSize)
break
}
*/
}
if (scale.ticks) {
tickEnter.call(tickTransform, scale0);
tickUpdate.call(tickTransform, scale1);
tickExit.call(tickTransform, scale1);
} else {
var dx = scale1.rangeBand() / 2, x = function (d) {
return scale1(d) + dx;
};
tickEnter.call(tickTransform, x);
tickUpdate.call(tickTransform, x);
}
});
}
axis.scale = function (x) {
if (!arguments.length) { return scale; }
scale = x;
return axis;
};
axis.orient = function (x) {
if (!arguments.length) { return orient; }
orient = x in {top: 1, right: 1, bottom: 1, left: 1} ? x + "" : "bottom";
return axis;
};
axis.categories = function (x) {
if (!arguments.length) { return categories; }
categories = x;
return axis;
};
axis.tickCentered = function (x) {
if (!arguments.length) { return tickCentered; }
tickCentered = x;
return axis;
};
axis.tickTextNum = function (x) {
if (!arguments.length) { return tickTextNum; }
tickTextNum = x;
return axis;
};
axis.tickOffset = function () {
return tickOffset;
};
axis.ticks = function () {
return; // TODO: implement
};
return axis;
}
function isUndefined(v) {
return typeof v === 'undefined';
}
function isDefined(v) {
return typeof v !== 'undefined';
}
})(window);