(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 = "", 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 += ""; } return text + "
" + date + "
" + name + "" + value + "
"; }), __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 : 0; 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] !== null ? +d[id] : null, 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); } function filterRemoveNull(data) { return data.filter(function (d) { return d.value !== null; }); } //-- 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 data = filterRemoveNull(d.values), x0, y0; if (isLineType(d)) { isSplineType(d) ? line.interpolate("cardinal") : line.interpolate("linear"); return Object.keys(__data_regions).length > 0 ? lineWithRegions(data, x, getYScale(d.id), __data_regions[d.id]) : line(data); } else { x0 = x(data[0].x); y0 = getYScale(d.id)(data[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) { var data = filterRemoveNull(d.values); return isLineType(d) ? line(data) : "M " + subX(data[0].x) + " " + getSubYScale(d.id)(data[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) .style('opacity', function (d) { return d.value === null ? 0 : 1; }) .attr("cx", __axis_rotated ? circleY : circleX) .attr("cy", __axis_rotated ? circleX : circleY); mainCircle.enter().append("circle") .style('opacity', function (d) { return d.value === null ? 0 : 1; }) .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 () {}; } // update categories if exists if ('categories' in args && isCategorized) { __axis_x_categories = args.categories; xAxis.categories(__axis_x_categories); } // 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);