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

Fix bugs

pull/476/head
Masayuki Tanaka 11 years ago
parent
3aae9ba4df
commit
bc8226a7f9
22 changed files with 664 additions and 547 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      Gruntfile.coffee
  2. 222
      c3.js
  3. 8
      c3.min.js
  4. 1
      htdocs/samples/categorized.html
  5. 2
      htdocs/samples/data_region.html
  6. 4
      htdocs/samples/data_region_timeseries.html
  7. 2
      htdocs/samples/grid_x_lines.html
  8. 2
      htdocs/samples/timeseries.html
  9. 2
      htdocs/samples/timeseries_date.html
  10. 11
      src/api.js
  11. 22
      src/config.js
  12. 64
      src/core.js
  13. 5
      src/data.convert.js
  14. 2
      src/drag.js
  15. 2
      src/format.js
  16. 3
      src/grid.js
  17. 6
      src/legend.js
  18. 22
      src/selection.js
  19. 6
      src/shape.js
  20. 2
      src/subchart.js
  21. 8
      src/zoom.js

1
Gruntfile.coffee
Unescape View File

@ -39,6 +39,7 @@ module.exports = (grunt) ->
'src/arc.js', 'src/arc.js',
'src/region.js', 'src/region.js',
'src/drag.js', 'src/drag.js',
'src/selection.js',
'src/subchart.js', 'src/subchart.js',
'src/zoom.js', 'src/zoom.js',
'src/color.js', 'src/color.js',

222
c3.js
Unescape View File

@ -8,15 +8,26 @@
var c3_chart_fn, c3_chart_internal_fn; var c3_chart_fn, c3_chart_internal_fn;
function Chart(config) { function Chart(config) {
var $$ = this.internal = new ChartInternal(config, this); var $$ = this.internal = new ChartInternal(this);
$$.loadConfig(config); $$.loadConfig(config);
$$.init(); $$.init();
// bind "this" to nested API
(function bindThis(fn, target, argThis) {
for (var key in fn) {
target[key] = fn[key].bind(argThis);
if (Object.keys(fn[key]).length > 0) {
bindThis(fn[key], target[key], argThis);
}
}
})(c3_chart_fn, this, this);
} }
function ChartInternal(config, api) { function ChartInternal(api) {
var $$ = this; var $$ = this;
$$.d3 = window.d3 ? window.d3 : typeof require !== 'undefined' ? require("d3") : undefined; $$.d3 = window.d3 ? window.d3 : typeof require !== 'undefined' ? require("d3") : undefined;
$$.api = api; $$.api = api;
$$.config = $$.getDefaultConfig();
$$.data = {}; $$.data = {};
$$.cache = {}; $$.cache = {};
$$.axes = {}; $$.axes = {};
@ -59,7 +70,7 @@
}; };
c3_chart_internal_fn.initParams = function () { c3_chart_internal_fn.initParams = function () {
var $$ = this, d3 = $$.d3; var $$ = this, d3 = $$.d3, config = $$.config;
// MEMO: clipId needs to be unique because it conflicts when multiple charts exist // MEMO: clipId needs to be unique because it conflicts when multiple charts exist
$$.clipId = "c3-" + (+new Date()) + '-clip', $$.clipId = "c3-" + (+new Date()) + '-clip',
@ -78,7 +89,7 @@
$$.color = $$.generateColor(); $$.color = $$.generateColor();
$$.levelColor = $$.generateLevelColor(); $$.levelColor = $$.generateLevelColor();
$$.dataTimeFormat = config[__data_x_localtime] ? d3.time.format : d3.time.format.utc; $$.dataTimeFormat = config[__data_xLocaltime] ? d3.time.format : d3.time.format.utc;
$$.axisTimeFormat = config[__axis_x_localtime] ? d3.time.format : d3.time.format.utc; $$.axisTimeFormat = config[__axis_x_localtime] ? d3.time.format : d3.time.format.utc;
$$.defaultAxisTimeFormat = $$.axisTimeFormat.multi([ $$.defaultAxisTimeFormat = $$.axisTimeFormat.multi([
[".%L", function (d) { return d.getMilliseconds(); }], [".%L", function (d) { return d.getMilliseconds(); }],
@ -505,6 +516,7 @@
var drawArea, drawBar, drawLine, xForText, yForText; var drawArea, drawBar, drawLine, xForText, yForText;
var duration, durationForExit, durationForAxis, waitForDraw; var duration, durationForExit, durationForAxis, waitForDraw;
var targetsToShow = $$.filterTargetsToShow($$.data.targets), tickValues, i, intervalForCulling; var targetsToShow = $$.filterTargetsToShow($$.data.targets), tickValues, i, intervalForCulling;
var xv, cx, cy;
xgrid = xgridLines = mainCircle = mainText = d3.selectAll([]); xgrid = xgridLines = mainCircle = mainText = d3.selectAll([]);
@ -870,13 +882,13 @@
} }
} }
var xv_ = generateCall($$.xv, $$); xv = generateCall($$.xv, $$);
cx = generateCall($$.config[__axis_rotated] ? $$.circleY : $$.circleX, $$);
cy = generateCall($$.config[__axis_rotated] ? $$.circleX : $$.circleY, $$);
// transition should be derived from one transition // transition should be derived from one transition
d3.transition().duration(duration).each(function () { d3.transition().duration(duration).each(function () {
var transitions = [], var transitions = [];
cx = generateCall($$.config[__axis_rotated] ? $$.circleY : $$.circleX, $$),
cy = generateCall($$.config[__axis_rotated] ? $$.circleX : $$.circleY, $$);
transitions.push(mainBar.transition() transitions.push(mainBar.transition()
.attr('d', drawBar) .attr('d', drawBar)
@ -904,20 +916,20 @@
.style("fill", $$.color) .style("fill", $$.color)
.style("fill-opacity", options.flow ? 0 : generateCall($$.opacityForText, $$))); .style("fill-opacity", options.flow ? 0 : generateCall($$.opacityForText, $$)));
transitions.push(mainRegion.selectAll('rect').transition() transitions.push(mainRegion.selectAll('rect').transition()
.attr("x", $$.regionX) .attr("x", generateCall($$.regionX, $$))
.attr("y", $$.regionY) .attr("y", generateCall($$.regionY, $$))
.attr("width", $$.regionWidth) .attr("width", generateCall($$.regionWidth, $$))
.attr("height", $$.regionHeight) .attr("height", generateCall($$.regionHeight, $$))
.style("fill-opacity", function (d) { return isValue(d.opacity) ? d.opacity : 0.1; })); .style("fill-opacity", function (d) { return isValue(d.opacity) ? d.opacity : 0.1; }));
transitions.push(xgridLines.select('line').transition() transitions.push(xgridLines.select('line').transition()
.attr("x1", config[__axis_rotated] ? 0 : xv_) .attr("x1", config[__axis_rotated] ? 0 : xv)
.attr("x2", config[__axis_rotated] ? $$.width : xv_) .attr("x2", config[__axis_rotated] ? $$.width : xv)
.attr("y1", config[__axis_rotated] ? xv_ : $$.margin.top) .attr("y1", config[__axis_rotated] ? xv : $$.margin.top)
.attr("y2", config[__axis_rotated] ? xv_ : $$.height) .attr("y2", config[__axis_rotated] ? xv : $$.height)
.style("opacity", 1)); .style("opacity", 1));
transitions.push(xgridLines.select('text').transition() transitions.push(xgridLines.select('text').transition()
.attr("x", config[__axis_rotated] ? $$.width : 0) .attr("x", config[__axis_rotated] ? $$.width : 0)
.attr("y", xv_) .attr("y", xv)
.text(function (d) { return d.text; }) .text(function (d) { return d.text; })
.style("opacity", 1)); .style("opacity", 1));
// Wait for end of transitions if called from flow API // Wait for end of transitions if called from flow API
@ -1008,11 +1020,11 @@
xgridLines xgridLines
.attr('transform', null); .attr('transform', null);
xgridLines.select('line') xgridLines.select('line')
.attr("x1", config[__axis_rotated] ? 0 : xv_) .attr("x1", config[__axis_rotated] ? 0 : xv)
.attr("x2", config[__axis_rotated] ? $$.width : xv_); .attr("x2", config[__axis_rotated] ? $$.width : xv);
xgridLines.select('text') xgridLines.select('text')
.attr("x", config[__axis_rotated] ? $$.width : 0) .attr("x", config[__axis_rotated] ? $$.width : 0)
.attr("y", xv_); .attr("y", xv);
mainBar mainBar
.attr('transform', null) .attr('transform', null)
.attr("d", drawBar); .attr("d", drawBar);
@ -1024,8 +1036,8 @@
.attr("d", drawArea); .attr("d", drawArea);
mainCircle mainCircle
.attr('transform', null) .attr('transform', null)
.attr("cx", config[__axis_rotated] ? $$.circleY : $$.circleX) .attr("cx", cx)
.attr("cy", config[__axis_rotated] ? $$.circleX : $$.circleY); .attr("cy", cy);
mainText mainText
.attr('transform', null) .attr('transform', null)
.attr('x', xForText) .attr('x', xForText)
@ -1034,8 +1046,8 @@
mainRegion mainRegion
.attr('transform', null); .attr('transform', null);
mainRegion.select('rect').filter($$.isRegionOnX) mainRegion.select('rect').filter($$.isRegionOnX)
.attr("x", $$.regionX) .attr("x", generateCall($$.regionX, $$))
.attr("width", $$.regionWidth); .attr("width", generateCall($$.regionWidth, $$));
eventRectUpdate eventRectUpdate
.attr("x", config[__axis_rotated] ? 0 : rectX) .attr("x", config[__axis_rotated] ? 0 : rectX)
.attr("y", config[__axis_rotated] ? rectX : 0) .attr("y", config[__axis_rotated] ? rectX : 0)
@ -1391,7 +1403,7 @@
c3_chart_internal_fn.transformAll = function (withTransition, transitions) { c3_chart_internal_fn.transformAll = function (withTransition, transitions) {
var $$ = this; var $$ = this;
$$.transformMain(withTransition, transitions); $$.transformMain(withTransition, transitions);
if (config[__subchart_show]) { $$.transformContext(withTransition, transitions); } if ($$.config[__subchart_show]) { $$.transformContext(withTransition, transitions); }
if ($$.legend) { $$.transformLegend(withTransition); } if ($$.legend) { $$.transformLegend(withTransition); }
}; };
@ -1538,7 +1550,7 @@
} else if (typeof date === 'number') { } else if (typeof date === 'number') {
parsedDate = new Date(date); parsedDate = new Date(date);
} else { } else {
parsedDate = $$.dataTimeFormat(config[__data_x_format]).parse(date); parsedDate = $$.dataTimeFormat($$.config[__data_xFormat]).parse(date);
} }
if (!parsedDate || isNaN(+parsedDate)) { if (!parsedDate || isNaN(+parsedDate)) {
window.console.error("Failed to parse x '" + date + "' to Date object"); window.console.error("Failed to parse x '" + date + "' to Date object");
@ -1565,9 +1577,9 @@
__transition_duration = 'transition_duration', __transition_duration = 'transition_duration',
__data_x = 'data_x', __data_x = 'data_x',
__data_xs = 'data_xs', __data_xs = 'data_xs',
__data_x_format = 'data_x_format', __data_xFormat = 'data_xFormat',
__data_x_localtime = 'data_x_localtime', __data_xLocaltime = 'data_xLocaltime',
__data_id_converter = 'data_id_converter', __data_idConverter = 'data_idConverter',
__data_names = 'data_names', __data_names = 'data_names',
__data_classes = 'data_classes', __data_classes = 'data_classes',
__data_groups = 'data_groups', __data_groups = 'data_groups',
@ -1700,7 +1712,8 @@
__tooltip_init_x = 'tooltip_init_x', __tooltip_init_x = 'tooltip_init_x',
__tooltip_init_position = 'tooltip_init_position'; __tooltip_init_position = 'tooltip_init_position';
var config = c3_chart_internal_fn.config = {}; c3_chart_internal_fn.getDefaultConfig = function () {
var config = {};
config[__bindto] = '#chart'; config[__bindto] = '#chart';
config[__size_width] = undefined; config[__size_width] = undefined;
config[__size_height] = undefined; config[__size_height] = undefined;
@ -1720,9 +1733,9 @@
config[__transition_duration] = 350; config[__transition_duration] = 350;
config[__data_x] = undefined; config[__data_x] = undefined;
config[__data_xs] = {}; config[__data_xs] = {};
config[__data_x_format] = '%Y-%m-%d'; config[__data_xFormat] = '%Y-%m-%d';
config[__data_x_localtime] = true; config[__data_xLocaltime] = true;
config[__data_id_converter] = function (id) { return id; }; config[__data_idConverter] = function (id) { return id; };
config[__data_names] = {}; config[__data_names] = {};
config[__data_classes] = {}; config[__data_classes] = {};
config[__data_groups] = []; config[__data_groups] = [];
@ -1867,18 +1880,21 @@
config[__tooltip_format_name] = undefined; config[__tooltip_format_name] = undefined;
config[__tooltip_format_value] = undefined; config[__tooltip_format_value] = undefined;
config[__tooltip_contents] = function (d, defaultTitleFormat, defaultValueFormat, color) { config[__tooltip_contents] = function (d, defaultTitleFormat, defaultValueFormat, color) {
return this.getTooltipContent ? this.getTooltipContent(d, defaultValueFormat, defaultValueFormat, color) : ''; return this.getTooltipContent ? this.getTooltipContent(d, defaultTitleFormat, defaultValueFormat, color) : '';
}, },
config[__tooltip_init_show] = false; config[__tooltip_init_show] = false;
config[__tooltip_init_x] = 0; config[__tooltip_init_x] = 0;
config[__tooltip_init_position] = {top: '0px', left: '50px'}; config[__tooltip_init_position] = {top: '0px', left: '50px'};
return config;
};
c3_chart_internal_fn.loadConfig = function (config) { c3_chart_internal_fn.loadConfig = function (config) {
var this_config = this.config, target, keys, read; var this_config = this.config, target, keys, read;
function find() { function find() {
var key = keys.shift(); var key = keys.shift();
// console.log("key =>", key, ", target =>", target); // console.log("key =>", key, ", target =>", target);
if (key && target && key in target) { if (key && target && typeof target === 'object' && key in target) {
target = target[key]; target = target[key];
return find(); return find();
} }
@ -2519,7 +2535,7 @@
} else { } else {
d = $$.convertCsvToData(data.response); d = $$.convertCsvToData(data.response);
} }
done(d); done.call($$, d);
}); });
}; };
c3_chart_internal_fn.convertCsvToData = function (csv) { c3_chart_internal_fn.convertCsvToData = function (csv) {
@ -2625,6 +2641,7 @@
} }
}); });
// check x is defined // check x is defined
ids.forEach(function (id) { ids.forEach(function (id) {
if (!$$.data.xs[id]) { if (!$$.data.xs[id]) {
@ -2634,7 +2651,7 @@
// convert to target // convert to target
targets = ids.map(function (id, index) { targets = ids.map(function (id, index) {
var convertedId = config[__data_id_converter](id); var convertedId = config[__data_idConverter](id);
return { return {
id: convertedId, id: convertedId,
id_org: id, id_org: id,
@ -3108,13 +3125,13 @@
getPoints = $$.generateGetBarPoints(barIndices, false), getPoints = $$.generateGetBarPoints(barIndices, false),
getter = forX ? $$.getXForText : $$.getYForText; getter = forX ? $$.getXForText : $$.getYForText;
return function (d, i) { return function (d, i) {
return getter(getPoints(d, i), d, this); return getter.call($$, getPoints(d, i), d, this);
}; };
}; };
c3_chart_internal_fn.getXForText = function (points, d, textElement) { c3_chart_internal_fn.getXForText = function (points, d, textElement) {
var $$ = this, var $$ = this,
box = textElement.getBoundingClientRect(), xPos, padding; box = textElement.getBoundingClientRect(), xPos, padding;
if (config[__axis_rotated]) { if ($$.config[__axis_rotated]) {
padding = $$.isBarType(d) ? 4 : 6; padding = $$.isBarType(d) ? 4 : 6;
xPos = points[2][1] + padding * (d.value < 0 ? -1 : 1); xPos = points[2][1] + padding * (d.value < 0 ? -1 : 1);
} else { } else {
@ -3125,7 +3142,7 @@
c3_chart_internal_fn.getYForText = function (points, d, textElement) { c3_chart_internal_fn.getYForText = function (points, d, textElement) {
var $$ = this, var $$ = this,
box = textElement.getBoundingClientRect(), yPos; box = textElement.getBoundingClientRect(), yPos;
if (config[__axis_rotated]) { if ($$.config[__axis_rotated]) {
yPos = (points[0][0] + points[2][0] + box.height * 0.6) / 2; yPos = (points[0][0] + points[2][0] + box.height * 0.6) / 2;
} else { } else {
yPos = points[2][1] + (d.value < 0 ? box.height : $$.isBarType(d) ? -3 : -6); yPos = points[2][1] + (d.value < 0 ? box.height : $$.isBarType(d) ? -3 : -6);
@ -3366,7 +3383,8 @@
}; };
c3_chart_internal_fn.showXGridFocus = function (selectedData) { c3_chart_internal_fn.showXGridFocus = function (selectedData) {
var $$ = this, dataToShow = selectedData.filter(function (d) { return d && isValue(d.value); }); var $$ = this, config = $$.config,
dataToShow = selectedData.filter(function (d) { return d && isValue(d.value); });
if (! config[__tooltip_show]) { return; } if (! config[__tooltip_show]) { return; }
// Hide when scatter plot exists // Hide when scatter plot exists
if ($$.hasType('scatter') || $$.hasArcType()) { return; } if ($$.hasType('scatter') || $$.hasArcType()) { return; }
@ -3537,7 +3555,7 @@
c3_chart_internal_fn.initLegend = function () { c3_chart_internal_fn.initLegend = function () {
var $$ = this; var $$ = this;
$$.legend = $$.svg.append("g").attr("transform", $$.getTranslate('legend')); $$.legend = $$.svg.append("g").attr("transform", $$.getTranslate('legend'));
if (!config[__legend_show]) { if (!$$.config[__legend_show]) {
$$.legend.style('visibility', 'hidden'); $$.legend.style('visibility', 'hidden');
$$.hiddenLegendIds = $$.mapToIds($$.data.targets); $$.hiddenLegendIds = $$.mapToIds($$.data.targets);
} }
@ -3546,7 +3564,7 @@
$$.updateLegend($$.mapToIds($$.data.targets), {withTransform: false, withTransitionForTransform: false, withTransition: false}); $$.updateLegend($$.mapToIds($$.data.targets), {withTransform: false, withTransitionForTransform: false, withTransition: false});
}; };
c3_chart_internal_fn.updateSizeForLegend = function (legendHeight, legendWidth) { c3_chart_internal_fn.updateSizeForLegend = function (legendHeight, legendWidth) {
var $$ = this, insetLegendPosition = { var $$ = this, config = $$.config, insetLegendPosition = {
top: $$.isLegendTop ? $$.getCurrentPaddingTop() + config[__legend_inset_y] + 5.5 : $$.currentHeight - legendHeight - $$.getCurrentPaddingBottom() - config[__legend_inset_y], top: $$.isLegendTop ? $$.getCurrentPaddingTop() + config[__legend_inset_y] + 5.5 : $$.currentHeight - legendHeight - $$.getCurrentPaddingBottom() - config[__legend_inset_y],
left: $$.isLegendLeft ? $$.getCurrentPaddingLeft() + config[__legend_inset_x] + 0.5 : $$.currentWidth - legendWidth - $$.getCurrentPaddingRight() - config[__legend_inset_x] + 0.5 left: $$.isLegendLeft ? $$.getCurrentPaddingLeft() + config[__legend_inset_x] + 0.5 : $$.currentWidth - legendWidth - $$.getCurrentPaddingRight() - config[__legend_inset_x] + 0.5
}; };
@ -3733,7 +3751,7 @@
.style('visibility', function (id) { return $$.isLegendToShow(id) ? 'visible' : 'hidden'; }) .style('visibility', function (id) { return $$.isLegendToShow(id) ? 'visible' : 'hidden'; })
.style('cursor', 'pointer') .style('cursor', 'pointer')
.on('click', function (id) { .on('click', function (id) {
isFunction(config[__legend_item_onclick]) ? config[__legend_item_onclick].call(c3, id) : $$.api.toggle(id); isFunction(config[__legend_item_onclick]) ? config[__legend_item_onclick].call($$, id) : $$.api.toggle(id);
}) })
.on('mouseover', function (id) { .on('mouseover', function (id) {
$$.d3.select(this).classed(CLASS[_legendItemFocused], true); $$.d3.select(this).classed(CLASS[_legendItemFocused], true);
@ -4379,11 +4397,11 @@
}; };
c3_chart_internal_fn.initArc = function () { c3_chart_internal_fn.initArc = function () {
var $$ = this, arcs; var $$ = this;
arcs = $$.main.select('.' + CLASS[_chart]).append("g") $$.arcs = $$.main.select('.' + CLASS[_chart]).append("g")
.attr("class", CLASS[_chartArcs]) .attr("class", CLASS[_chartArcs])
.attr("transform", $$.getTranslate('arc')); .attr("transform", $$.getTranslate('arc'));
arcs.append('text') $$.arcs.append('text')
.attr('class', CLASS[_chartArcsTitle]) .attr('class', CLASS[_chartArcsTitle])
.style("text-anchor", "middle") .style("text-anchor", "middle")
.text($$.getArcTitle()); .text($$.getArcTitle());
@ -4491,7 +4509,7 @@
}; };
c3_chart_internal_fn.initGauge = function () { c3_chart_internal_fn.initGauge = function () {
var $$ = this, config = $$.config, arcs; var $$ = this, config = $$.config, arcs = $$.arcs;
if ($$.hasType('gauge')) { if ($$.hasType('gauge')) {
arcs.append('path') arcs.append('path')
.attr("class", CLASS[_chartArcsBackground]) .attr("class", CLASS[_chartArcsBackground])
@ -4623,7 +4641,7 @@
shape.classed(CLASS[_INCLUDED], !isIncluded); shape.classed(CLASS[_INCLUDED], !isIncluded);
// TODO: included/unincluded callback here // TODO: included/unincluded callback here
shape.classed(CLASS[_SELECTED], !isSelected); shape.classed(CLASS[_SELECTED], !isSelected);
$$.toggle(!isSelected, shape, d, i); toggle.call($$, !isSelected, shape, d, i);
} }
}); });
}; };
@ -4655,6 +4673,89 @@
}; };
c3_chart_internal_fn.selectPoint = function (target, d, i) {
var $$ = this, config = $$.config,
cx = generateCall(config[__axis_rotated] ? $$.circleY : $$.circleX, $$),
cy = generateCall(config[__axis_rotated] ? $$.circleX : $$.circleY, $$);
config[__data_onselected].call($$.api, d, target.node());
// add selected-circle on low layer g
$$.main.select('.' + CLASS[_selectedCircles] + $$.getTargetSelectorSuffix(d.id)).selectAll('.' + CLASS[_selectedCircle] + '-' + i)
.data([d])
.enter().append('circle')
.attr("class", function () { return $$.generateClass(CLASS[_selectedCircle], i); })
.attr("cx", cx)
.attr("cy", cy)
.attr("stroke", function () { return $$.color(d); })
.attr("r", function (d) { return $$.pointSelectR(d) * 1.4; })
.transition().duration(100)
.attr("r", generateCall($$.pointSelectR, $$));
};
c3_chart_internal_fn.unselectPoint = function (target, d, i) {
var $$ = this;
$$.config[__data_onunselected](d, target.node());
// remove selected-circle from low layer g
$$.main.select('.' + CLASS[_selectedCircles] + $$.getTargetSelectorSuffix(d.id)).selectAll('.' + CLASS[_selectedCircle] + '-' + i)
.transition().duration(100).attr('r', 0)
.remove();
};
c3_chart_internal_fn.togglePoint = function (selected, target, d, i) {
selected ? this.selectPoint(target, d, i) : this.unselectPoint(target, d, i);
};
c3_chart_internal_fn.selectBar = function (target, d) {
var $$ = this;
$$.config[__data_onselected].call($$, d, target.node());
target.transition().duration(100)
.style("fill", function () { return $$.d3.rgb($$.color(d)).brighter(0.75); });
};
c3_chart_internal_fn.unselectBar = function (target, d) {
var $$ = this;
$$.config[__data_onunselected].call($$, d, target.node());
target.transition().duration(100)
.style("fill", function () { return $$.color(d); });
};
c3_chart_internal_fn.toggleBar = function (selected, target, d, i) {
selected ? this.selectBar(target, d, i) : this.unselectBar(target, d, i);
};
c3_chart_internal_fn.toggleArc = function (selected, target, d, i) {
this.toggleBar(selected, target, d.data, i);
};
c3_chart_internal_fn.getToggle = function (that) {
var $$ = this;
// path selection not supported yet
return that.nodeName === 'circle' ? $$.togglePoint : ($$.d3.select(that).classed(CLASS[_bar]) ? $$.toggleBar : $$.toggleArc);
};
c3_chart_internal_fn.toggleShape = function (that, d, i) {
var $$ = this, d3 = $$.d3, config = $$.config,
shape = d3.select(that), isSelected = shape.classed(CLASS[_SELECTED]), isWithin, toggle;
if (that.nodeName === 'circle') {
isWithin = $$.isWithinCircle(that, $$.pointSelectR(d) * 1.5);
toggle = $$.togglePoint;
}
else if (that.nodeName === 'path') {
if (shape.classed(CLASS[_bar])) {
isWithin = $$.isWithinBar(that);
toggle = $$.toggleBar;
} else { // would be arc
isWithin = true;
toggle = $$.toggleArc;
}
}
if (config[__data_selection_grouped] || isWithin) {
if (config[__data_selection_enabled] && config[__data_selection_isselectable](d)) {
if (!config[__data_selection_multiple]) {
$$.main.selectAll('.' + CLASS[_shapes] + (config[__data_selection_grouped] ? $$.getTargetSelectorSuffix(d.id) : "")).selectAll('.' + CLASS[_shape]).each(function (d, i) {
var shape = d3.select(this);
if (shape.classed(CLASS[_SELECTED])) { toggle.call($$, false, shape.classed(CLASS[_SELECTED], false), d, i); }
});
}
shape.classed(CLASS[_SELECTED], !isSelected);
toggle.call($$, !isSelected, shape, d, i);
}
$$.config[__data_onclick].call($$.api, d, that);
}
};
c3_chart_internal_fn.initBrush = function () { c3_chart_internal_fn.initBrush = function () {
var $$ = this, d3 = $$.d3; var $$ = this, d3 = $$.d3;
$$.brush = d3.svg.brush().on("brush", function () { $$.redrawForBrush(); }); $$.brush = d3.svg.brush().on("brush", function () { $$.redrawForBrush(); });
@ -4815,7 +4916,7 @@
withSubchart: false, withSubchart: false,
withUpdateXDomain: true withUpdateXDomain: true
}); });
$$.config[__subchart_onbrush].call($$, x.orgDomain()); $$.config[__subchart_onbrush].call($$.api, x.orgDomain());
}; };
c3_chart_internal_fn.transformContext = function (withTransition, transitions) { c3_chart_internal_fn.transformContext = function (withTransition, transitions) {
var $$ = this, subXAxis; var $$ = this, subXAxis;
@ -4835,7 +4936,7 @@
.on("zoomstart", function () { .on("zoomstart", function () {
$$.zoom.altDomain = d3.event.sourceEvent.altKey ? $$.x.orgDomain() : null; $$.zoom.altDomain = d3.event.sourceEvent.altKey ? $$.x.orgDomain() : null;
}) })
.on("zoom", $$.redrawForZoom); .on("zoom", function () { $$.redrawForZoom.call($$); });
$$.zoom.scale = function (scale) { $$.zoom.scale = function (scale) {
return config[__axis_rotated] ? this.y(scale) : this.x(scale); return config[__axis_rotated] ? this.y(scale) : this.x(scale);
}; };
@ -4845,8 +4946,8 @@
}; };
$$.zoom.updateScaleExtent = function () { $$.zoom.updateScaleExtent = function () {
var ratio = diffDomain($$.x.orgDomain()) / diffDomain($$.orgXDomain), var ratio = diffDomain($$.x.orgDomain()) / diffDomain($$.orgXDomain),
extent = $$.orgScaleExtent(); extent = this.orgScaleExtent();
$$.scaleExtent([extent[0] * ratio, extent[1] * ratio]); this.scaleExtent([extent[0] * ratio, extent[1] * ratio]);
return this; return this;
}; };
}; };
@ -4879,7 +4980,7 @@
if (d3.event.sourceEvent.type === 'mousemove') { if (d3.event.sourceEvent.type === 'mousemove') {
$$.cancelClick = true; $$.cancelClick = true;
} }
config[__zoom_onzoom].call(c3, x.orgDomain()); config[__zoom_onzoom].call($$.api, x.orgDomain());
}; };
c3_chart_internal_fn.generateColor = function () { c3_chart_internal_fn.generateColor = function () {
@ -4955,7 +5056,7 @@
return (ratio * 100).toFixed(1) + '%'; return (ratio * 100).toFixed(1) + '%';
}; };
c3_chart_internal_fn.formatByAxisId = function (axisId) { c3_chart_internal_fn.formatByAxisId = function (axisId) {
var $$ = this.internal, data_labels = $$.config[__data_labels], var $$ = this, data_labels = $$.config[__data_labels],
format = function (v) { return isValue(v) ? +v : ""; }; format = function (v) { return isValue(v) ? +v : ""; };
// find format according to axis id // find format according to axis id
if (isFunction(data_labels.format)) { if (isFunction(data_labels.format)) {
@ -5648,7 +5749,7 @@
}; };
c3_chart_fn.ygrids.add = function (grids) { c3_chart_fn.ygrids.add = function (grids) {
var $$ = this.internal; var $$ = this.internal;
return c3.ygrids($$.config[__grid_y_lines].concat(grids ? grids : [])); return this.ygrids($$.config[__grid_y_lines].concat(grids ? grids : []));
}; };
c3_chart_fn.ygrids.remove = function (params) { // TODO: multiple c3_chart_fn.ygrids.remove = function (params) { // TODO: multiple
var $$ = this.internal; var $$ = this.internal;
@ -5696,8 +5797,7 @@
return config[__regions]; return config[__regions];
}; };
c3_chart_fn.data = function () { c3_chart_fn.data = function () {};
};
c3_chart_fn.data.get = function (targetId) { c3_chart_fn.data.get = function (targetId) {
var target = this.data.getAsTarget(targetId); var target = this.data.getAsTarget(targetId);
return isDefined(target) ? target.values.map(function (d) { return d.value; }) : undefined; return isDefined(target) ? target.values.map(function (d) { return d.value; }) : undefined;
@ -5764,8 +5864,7 @@
}; };
c3_chart_fn.axis = function () { c3_chart_fn.axis = function () {};
};
c3_chart_fn.axis.labels = function (labels) { c3_chart_fn.axis.labels = function (labels) {
var $$ = this.internal; var $$ = this.internal;
if (arguments.length) { if (arguments.length) {
@ -5810,8 +5909,7 @@
}; };
c3_chart_fn.legend = function () { c3_chart_fn.legend = function () {};
};
c3_chart_fn.legend.show = function (targetIds) { c3_chart_fn.legend.show = function (targetIds) {
var $$ = this.internal; var $$ = this.internal;
$$.showLegend($$.mapToTargetIds(targetIds)); $$.showLegend($$.mapToTargetIds(targetIds));

8
c3.min.js vendored
View File

File diff suppressed because one or more lines are too long

1
htdocs/samples/categorized.html
Unescape View File

@ -9,6 +9,7 @@
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script> <script src="/js/c3.js"></script>
<script> <script>
var chart1 = c3.generate({ var chart1 = c3.generate({
bindto: '#chart1', bindto: '#chart1',
data: { data: {

2
htdocs/samples/data_region.html
Unescape View File

@ -6,7 +6,7 @@
<div id="chart"></div> <div id="chart"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.min.js"></script> <script src="/js/c3.js"></script>
<script> <script>
var chart = c3.generate({ var chart = c3.generate({
bindto: '#chart', bindto: '#chart',

4
htdocs/samples/data_region_timeseries.html
Unescape View File

@ -6,13 +6,13 @@
<div id="chart"></div> <div id="chart"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.min.js"></script> <script src="/js/c3.js"></script>
<script> <script>
var chart = c3.generate({ var chart = c3.generate({
bindto: '#chart', bindto: '#chart',
data: { data: {
x : 'date', x : 'date',
x_format : '%Y%m%d', xFormat : '%Y%m%d',
columns: [ columns: [
// ['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06'], // ['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06'],
['date', '20130101', '20130102', '20130103', '20130104', '20130105', '20130106'], ['date', '20130101', '20130102', '20130103', '20130104', '20130105', '20130106'],

2
htdocs/samples/grid_x_lines.html
Unescape View File

@ -7,7 +7,7 @@
<div id="chart2"></div> <div id="chart2"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.min.js"></script> <script src="/js/c3.js"></script>
<script> <script>
var chart = c3.generate({ var chart = c3.generate({

2
htdocs/samples/timeseries.html
Unescape View File

@ -12,7 +12,7 @@
bindto: '#chart', bindto: '#chart',
data: { data: {
x : 'date', x : 'date',
x_format : '%Y%m%d', xFormat : '%Y%m%d',
columns: [ columns: [
// ['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06'], // ['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06'],
['date', '20130101', '20130102', '20130103', '20130104', '20130105', '20130106'], ['date', '20130101', '20130102', '20130103', '20130104', '20130105', '20130106'],

2
htdocs/samples/timeseries_date.html
Unescape View File

@ -12,7 +12,7 @@
bindto: '#chart', bindto: '#chart',
data: { data: {
x : 'x', x : 'x',
x_format : '%Y%m%d', xFormat : '%Y%m%d',
columns: [ columns: [
['x', new Date('2013-01-01 00:00:00'), new Date('2013-01-02 00:00:00'), new Date('2013-01-03 00:00:00'), new Date('2013-01-04 00:00:00'), new Date('2013-01-05 00:00:00'), new Date('2013-01-06 00:00:00')], ['x', new Date('2013-01-01 00:00:00'), new Date('2013-01-02 00:00:00'), new Date('2013-01-03 00:00:00'), new Date('2013-01-04 00:00:00'), new Date('2013-01-05 00:00:00'), new Date('2013-01-06 00:00:00')],
['sample', 30, 200, 100, 400, 150, 250], ['sample', 30, 200, 100, 400, 150, 250],

11
src/api.js
Unescape View File

@ -377,7 +377,7 @@ c3_chart_fn.ygrids = function (grids) {
}; };
c3_chart_fn.ygrids.add = function (grids) { c3_chart_fn.ygrids.add = function (grids) {
var $$ = this.internal; var $$ = this.internal;
return c3.ygrids($$.config[__grid_y_lines].concat(grids ? grids : [])); return this.ygrids($$.config[__grid_y_lines].concat(grids ? grids : []));
}; };
c3_chart_fn.ygrids.remove = function (params) { // TODO: multiple c3_chart_fn.ygrids.remove = function (params) { // TODO: multiple
var $$ = this.internal; var $$ = this.internal;
@ -425,8 +425,7 @@ c3_chart_fn.regions.remove = function (options) {
return config[__regions]; return config[__regions];
}; };
c3_chart_fn.data = function () { c3_chart_fn.data = function () {};
};
c3_chart_fn.data.get = function (targetId) { c3_chart_fn.data.get = function (targetId) {
var target = this.data.getAsTarget(targetId); var target = this.data.getAsTarget(targetId);
return isDefined(target) ? target.values.map(function (d) { return d.value; }) : undefined; return isDefined(target) ? target.values.map(function (d) { return d.value; }) : undefined;
@ -493,8 +492,7 @@ c3_chart_fn.xs = function (xs) {
}; };
c3_chart_fn.axis = function () { c3_chart_fn.axis = function () {};
};
c3_chart_fn.axis.labels = function (labels) { c3_chart_fn.axis.labels = function (labels) {
var $$ = this.internal; var $$ = this.internal;
if (arguments.length) { if (arguments.length) {
@ -539,8 +537,7 @@ c3_chart_fn.axis.range = function (range) {
}; };
c3_chart_fn.legend = function () { c3_chart_fn.legend = function () {};
};
c3_chart_fn.legend.show = function (targetIds) { c3_chart_fn.legend.show = function (targetIds) {
var $$ = this.internal; var $$ = this.internal;
$$.showLegend($$.mapToTargetIds(targetIds)); $$.showLegend($$.mapToTargetIds(targetIds));

22
src/config.js
Unescape View File

@ -17,9 +17,9 @@ var __bindto = 'bindto',
__transition_duration = 'transition_duration', __transition_duration = 'transition_duration',
__data_x = 'data_x', __data_x = 'data_x',
__data_xs = 'data_xs', __data_xs = 'data_xs',
__data_x_format = 'data_x_format', __data_xFormat = 'data_xFormat',
__data_x_localtime = 'data_x_localtime', __data_xLocaltime = 'data_xLocaltime',
__data_id_converter = 'data_id_converter', __data_idConverter = 'data_idConverter',
__data_names = 'data_names', __data_names = 'data_names',
__data_classes = 'data_classes', __data_classes = 'data_classes',
__data_groups = 'data_groups', __data_groups = 'data_groups',
@ -152,7 +152,8 @@ var __bindto = 'bindto',
__tooltip_init_x = 'tooltip_init_x', __tooltip_init_x = 'tooltip_init_x',
__tooltip_init_position = 'tooltip_init_position'; __tooltip_init_position = 'tooltip_init_position';
var config = c3_chart_internal_fn.config = {}; c3_chart_internal_fn.getDefaultConfig = function () {
var config = {};
config[__bindto] = '#chart'; config[__bindto] = '#chart';
config[__size_width] = undefined; config[__size_width] = undefined;
config[__size_height] = undefined; config[__size_height] = undefined;
@ -172,9 +173,9 @@ config[__onresized] = function () {};
config[__transition_duration] = 350; config[__transition_duration] = 350;
config[__data_x] = undefined; config[__data_x] = undefined;
config[__data_xs] = {}; config[__data_xs] = {};
config[__data_x_format] = '%Y-%m-%d'; config[__data_xFormat] = '%Y-%m-%d';
config[__data_x_localtime] = true; config[__data_xLocaltime] = true;
config[__data_id_converter] = function (id) { return id; }; config[__data_idConverter] = function (id) { return id; };
config[__data_names] = {}; config[__data_names] = {};
config[__data_classes] = {}; config[__data_classes] = {};
config[__data_groups] = []; config[__data_groups] = [];
@ -319,18 +320,21 @@ config[__tooltip_format_title] = undefined;
config[__tooltip_format_name] = undefined; config[__tooltip_format_name] = undefined;
config[__tooltip_format_value] = undefined; config[__tooltip_format_value] = undefined;
config[__tooltip_contents] = function (d, defaultTitleFormat, defaultValueFormat, color) { config[__tooltip_contents] = function (d, defaultTitleFormat, defaultValueFormat, color) {
return this.getTooltipContent ? this.getTooltipContent(d, defaultValueFormat, defaultValueFormat, color) : ''; return this.getTooltipContent ? this.getTooltipContent(d, defaultTitleFormat, defaultValueFormat, color) : '';
}, },
config[__tooltip_init_show] = false; config[__tooltip_init_show] = false;
config[__tooltip_init_x] = 0; config[__tooltip_init_x] = 0;
config[__tooltip_init_position] = {top: '0px', left: '50px'}; config[__tooltip_init_position] = {top: '0px', left: '50px'};
return config;
};
c3_chart_internal_fn.loadConfig = function (config) { c3_chart_internal_fn.loadConfig = function (config) {
var this_config = this.config, target, keys, read; var this_config = this.config, target, keys, read;
function find() { function find() {
var key = keys.shift(); var key = keys.shift();
// console.log("key =>", key, ", target =>", target); // console.log("key =>", key, ", target =>", target);
if (key && target && key in target) { if (key && target && typeof target === 'object' && key in target) {
target = target[key]; target = target[key];
return find(); return find();
} }

64
src/core.js
Unescape View File

@ -3,15 +3,26 @@ var c3 = { version: "0.3.0" };
var c3_chart_fn, c3_chart_internal_fn; var c3_chart_fn, c3_chart_internal_fn;
function Chart(config) { function Chart(config) {
var $$ = this.internal = new ChartInternal(config, this); var $$ = this.internal = new ChartInternal(this);
$$.loadConfig(config); $$.loadConfig(config);
$$.init(); $$.init();
// bind "this" to nested API
(function bindThis(fn, target, argThis) {
for (var key in fn) {
target[key] = fn[key].bind(argThis);
if (Object.keys(fn[key]).length > 0) {
bindThis(fn[key], target[key], argThis);
}
}
})(c3_chart_fn, this, this);
} }
function ChartInternal(config, api) { function ChartInternal(api) {
var $$ = this; var $$ = this;
$$.d3 = window.d3 ? window.d3 : typeof require !== 'undefined' ? require("d3") : undefined; $$.d3 = window.d3 ? window.d3 : typeof require !== 'undefined' ? require("d3") : undefined;
$$.api = api; $$.api = api;
$$.config = $$.getDefaultConfig();
$$.data = {}; $$.data = {};
$$.cache = {}; $$.cache = {};
$$.axes = {}; $$.axes = {};
@ -54,7 +65,7 @@ c3_chart_internal_fn.init = function () {
}; };
c3_chart_internal_fn.initParams = function () { c3_chart_internal_fn.initParams = function () {
var $$ = this, d3 = $$.d3; var $$ = this, d3 = $$.d3, config = $$.config;
// MEMO: clipId needs to be unique because it conflicts when multiple charts exist // MEMO: clipId needs to be unique because it conflicts when multiple charts exist
$$.clipId = "c3-" + (+new Date()) + '-clip', $$.clipId = "c3-" + (+new Date()) + '-clip',
@ -73,7 +84,7 @@ c3_chart_internal_fn.initParams = function () {
$$.color = $$.generateColor(); $$.color = $$.generateColor();
$$.levelColor = $$.generateLevelColor(); $$.levelColor = $$.generateLevelColor();
$$.dataTimeFormat = config[__data_x_localtime] ? d3.time.format : d3.time.format.utc; $$.dataTimeFormat = config[__data_xLocaltime] ? d3.time.format : d3.time.format.utc;
$$.axisTimeFormat = config[__axis_x_localtime] ? d3.time.format : d3.time.format.utc; $$.axisTimeFormat = config[__axis_x_localtime] ? d3.time.format : d3.time.format.utc;
$$.defaultAxisTimeFormat = $$.axisTimeFormat.multi([ $$.defaultAxisTimeFormat = $$.axisTimeFormat.multi([
[".%L", function (d) { return d.getMilliseconds(); }], [".%L", function (d) { return d.getMilliseconds(); }],
@ -500,6 +511,7 @@ c3_chart_internal_fn.redraw = function (options, transitions) {
var drawArea, drawBar, drawLine, xForText, yForText; var drawArea, drawBar, drawLine, xForText, yForText;
var duration, durationForExit, durationForAxis, waitForDraw; var duration, durationForExit, durationForAxis, waitForDraw;
var targetsToShow = $$.filterTargetsToShow($$.data.targets), tickValues, i, intervalForCulling; var targetsToShow = $$.filterTargetsToShow($$.data.targets), tickValues, i, intervalForCulling;
var xv, cx, cy;
xgrid = xgridLines = mainCircle = mainText = d3.selectAll([]); xgrid = xgridLines = mainCircle = mainText = d3.selectAll([]);
@ -865,13 +877,13 @@ c3_chart_internal_fn.redraw = function (options, transitions) {
} }
} }
var xv_ = generateCall($$.xv, $$); xv = generateCall($$.xv, $$);
cx = generateCall($$.config[__axis_rotated] ? $$.circleY : $$.circleX, $$);
cy = generateCall($$.config[__axis_rotated] ? $$.circleX : $$.circleY, $$);
// transition should be derived from one transition // transition should be derived from one transition
d3.transition().duration(duration).each(function () { d3.transition().duration(duration).each(function () {
var transitions = [], var transitions = [];
cx = generateCall($$.config[__axis_rotated] ? $$.circleY : $$.circleX, $$),
cy = generateCall($$.config[__axis_rotated] ? $$.circleX : $$.circleY, $$);
transitions.push(mainBar.transition() transitions.push(mainBar.transition()
.attr('d', drawBar) .attr('d', drawBar)
@ -899,20 +911,20 @@ c3_chart_internal_fn.redraw = function (options, transitions) {
.style("fill", $$.color) .style("fill", $$.color)
.style("fill-opacity", options.flow ? 0 : generateCall($$.opacityForText, $$))); .style("fill-opacity", options.flow ? 0 : generateCall($$.opacityForText, $$)));
transitions.push(mainRegion.selectAll('rect').transition() transitions.push(mainRegion.selectAll('rect').transition()
.attr("x", $$.regionX) .attr("x", generateCall($$.regionX, $$))
.attr("y", $$.regionY) .attr("y", generateCall($$.regionY, $$))
.attr("width", $$.regionWidth) .attr("width", generateCall($$.regionWidth, $$))
.attr("height", $$.regionHeight) .attr("height", generateCall($$.regionHeight, $$))
.style("fill-opacity", function (d) { return isValue(d.opacity) ? d.opacity : 0.1; })); .style("fill-opacity", function (d) { return isValue(d.opacity) ? d.opacity : 0.1; }));
transitions.push(xgridLines.select('line').transition() transitions.push(xgridLines.select('line').transition()
.attr("x1", config[__axis_rotated] ? 0 : xv_) .attr("x1", config[__axis_rotated] ? 0 : xv)
.attr("x2", config[__axis_rotated] ? $$.width : xv_) .attr("x2", config[__axis_rotated] ? $$.width : xv)
.attr("y1", config[__axis_rotated] ? xv_ : $$.margin.top) .attr("y1", config[__axis_rotated] ? xv : $$.margin.top)
.attr("y2", config[__axis_rotated] ? xv_ : $$.height) .attr("y2", config[__axis_rotated] ? xv : $$.height)
.style("opacity", 1)); .style("opacity", 1));
transitions.push(xgridLines.select('text').transition() transitions.push(xgridLines.select('text').transition()
.attr("x", config[__axis_rotated] ? $$.width : 0) .attr("x", config[__axis_rotated] ? $$.width : 0)
.attr("y", xv_) .attr("y", xv)
.text(function (d) { return d.text; }) .text(function (d) { return d.text; })
.style("opacity", 1)); .style("opacity", 1));
// Wait for end of transitions if called from flow API // Wait for end of transitions if called from flow API
@ -1003,11 +1015,11 @@ c3_chart_internal_fn.redraw = function (options, transitions) {
xgridLines xgridLines
.attr('transform', null); .attr('transform', null);
xgridLines.select('line') xgridLines.select('line')
.attr("x1", config[__axis_rotated] ? 0 : xv_) .attr("x1", config[__axis_rotated] ? 0 : xv)
.attr("x2", config[__axis_rotated] ? $$.width : xv_); .attr("x2", config[__axis_rotated] ? $$.width : xv);
xgridLines.select('text') xgridLines.select('text')
.attr("x", config[__axis_rotated] ? $$.width : 0) .attr("x", config[__axis_rotated] ? $$.width : 0)
.attr("y", xv_); .attr("y", xv);
mainBar mainBar
.attr('transform', null) .attr('transform', null)
.attr("d", drawBar); .attr("d", drawBar);
@ -1019,8 +1031,8 @@ c3_chart_internal_fn.redraw = function (options, transitions) {
.attr("d", drawArea); .attr("d", drawArea);
mainCircle mainCircle
.attr('transform', null) .attr('transform', null)
.attr("cx", config[__axis_rotated] ? $$.circleY : $$.circleX) .attr("cx", cx)
.attr("cy", config[__axis_rotated] ? $$.circleX : $$.circleY); .attr("cy", cy);
mainText mainText
.attr('transform', null) .attr('transform', null)
.attr('x', xForText) .attr('x', xForText)
@ -1029,8 +1041,8 @@ c3_chart_internal_fn.redraw = function (options, transitions) {
mainRegion mainRegion
.attr('transform', null); .attr('transform', null);
mainRegion.select('rect').filter($$.isRegionOnX) mainRegion.select('rect').filter($$.isRegionOnX)
.attr("x", $$.regionX) .attr("x", generateCall($$.regionX, $$))
.attr("width", $$.regionWidth); .attr("width", generateCall($$.regionWidth, $$));
eventRectUpdate eventRectUpdate
.attr("x", config[__axis_rotated] ? 0 : rectX) .attr("x", config[__axis_rotated] ? 0 : rectX)
.attr("y", config[__axis_rotated] ? rectX : 0) .attr("y", config[__axis_rotated] ? rectX : 0)
@ -1386,7 +1398,7 @@ c3_chart_internal_fn.transformMain = function (withTransition, transitions) {
c3_chart_internal_fn.transformAll = function (withTransition, transitions) { c3_chart_internal_fn.transformAll = function (withTransition, transitions) {
var $$ = this; var $$ = this;
$$.transformMain(withTransition, transitions); $$.transformMain(withTransition, transitions);
if (config[__subchart_show]) { $$.transformContext(withTransition, transitions); } if ($$.config[__subchart_show]) { $$.transformContext(withTransition, transitions); }
if ($$.legend) { $$.transformLegend(withTransition); } if ($$.legend) { $$.transformLegend(withTransition); }
}; };
@ -1533,7 +1545,7 @@ c3_chart_internal_fn.parseDate = function (date) {
} else if (typeof date === 'number') { } else if (typeof date === 'number') {
parsedDate = new Date(date); parsedDate = new Date(date);
} else { } else {
parsedDate = $$.dataTimeFormat(config[__data_x_format]).parse(date); parsedDate = $$.dataTimeFormat($$.config[__data_xFormat]).parse(date);
} }
if (!parsedDate || isNaN(+parsedDate)) { if (!parsedDate || isNaN(+parsedDate)) {
window.console.error("Failed to parse x '" + date + "' to Date object"); window.console.error("Failed to parse x '" + date + "' to Date object");

5
src/data.convert.js
Unescape View File

@ -7,7 +7,7 @@ c3_chart_internal_fn.convertUrlToData = function (url, mimeType, keys, done) {
} else { } else {
d = $$.convertCsvToData(data.response); d = $$.convertCsvToData(data.response);
} }
done(d); done.call($$, d);
}); });
}; };
c3_chart_internal_fn.convertCsvToData = function (csv) { c3_chart_internal_fn.convertCsvToData = function (csv) {
@ -113,6 +113,7 @@ c3_chart_internal_fn.convertDataToTargets = function (data, appendXs) {
} }
}); });
// check x is defined // check x is defined
ids.forEach(function (id) { ids.forEach(function (id) {
if (!$$.data.xs[id]) { if (!$$.data.xs[id]) {
@ -122,7 +123,7 @@ c3_chart_internal_fn.convertDataToTargets = function (data, appendXs) {
// convert to target // convert to target
targets = ids.map(function (id, index) { targets = ids.map(function (id, index) {
var convertedId = config[__data_id_converter](id); var convertedId = config[__data_idConverter](id);
return { return {
id: convertedId, id: convertedId,
id_org: id, id_org: id,

2
src/drag.js
Unescape View File

@ -51,7 +51,7 @@ c3_chart_internal_fn.drag = function (mouse) {
shape.classed(CLASS[_INCLUDED], !isIncluded); shape.classed(CLASS[_INCLUDED], !isIncluded);
// TODO: included/unincluded callback here // TODO: included/unincluded callback here
shape.classed(CLASS[_SELECTED], !isSelected); shape.classed(CLASS[_SELECTED], !isSelected);
$$.toggle(!isSelected, shape, d, i); toggle.call($$, !isSelected, shape, d, i);
} }
}); });
}; };

2
src/format.js
Unescape View File

@ -24,7 +24,7 @@ c3_chart_internal_fn.defaultArcValueFormat = function (v, ratio) {
return (ratio * 100).toFixed(1) + '%'; return (ratio * 100).toFixed(1) + '%';
}; };
c3_chart_internal_fn.formatByAxisId = function (axisId) { c3_chart_internal_fn.formatByAxisId = function (axisId) {
var $$ = this.internal, data_labels = $$.config[__data_labels], var $$ = this, data_labels = $$.config[__data_labels],
format = function (v) { return isValue(v) ? +v : ""; }; format = function (v) { return isValue(v) ? +v : ""; };
// find format according to axis id // find format according to axis id
if (isFunction(data_labels.format)) { if (isFunction(data_labels.format)) {

3
src/grid.js
Unescape View File

@ -1,5 +1,6 @@
c3_chart_internal_fn.showXGridFocus = function (selectedData) { c3_chart_internal_fn.showXGridFocus = function (selectedData) {
var $$ = this, dataToShow = selectedData.filter(function (d) { return d && isValue(d.value); }); var $$ = this, config = $$.config,
dataToShow = selectedData.filter(function (d) { return d && isValue(d.value); });
if (! config[__tooltip_show]) { return; } if (! config[__tooltip_show]) { return; }
// Hide when scatter plot exists // Hide when scatter plot exists
if ($$.hasType('scatter') || $$.hasArcType()) { return; } if ($$.hasType('scatter') || $$.hasArcType()) { return; }

6
src/legend.js
Unescape View File

@ -1,7 +1,7 @@
c3_chart_internal_fn.initLegend = function () { c3_chart_internal_fn.initLegend = function () {
var $$ = this; var $$ = this;
$$.legend = $$.svg.append("g").attr("transform", $$.getTranslate('legend')); $$.legend = $$.svg.append("g").attr("transform", $$.getTranslate('legend'));
if (!config[__legend_show]) { if (!$$.config[__legend_show]) {
$$.legend.style('visibility', 'hidden'); $$.legend.style('visibility', 'hidden');
$$.hiddenLegendIds = $$.mapToIds($$.data.targets); $$.hiddenLegendIds = $$.mapToIds($$.data.targets);
} }
@ -10,7 +10,7 @@ c3_chart_internal_fn.initLegend = function () {
$$.updateLegend($$.mapToIds($$.data.targets), {withTransform: false, withTransitionForTransform: false, withTransition: false}); $$.updateLegend($$.mapToIds($$.data.targets), {withTransform: false, withTransitionForTransform: false, withTransition: false});
}; };
c3_chart_internal_fn.updateSizeForLegend = function (legendHeight, legendWidth) { c3_chart_internal_fn.updateSizeForLegend = function (legendHeight, legendWidth) {
var $$ = this, insetLegendPosition = { var $$ = this, config = $$.config, insetLegendPosition = {
top: $$.isLegendTop ? $$.getCurrentPaddingTop() + config[__legend_inset_y] + 5.5 : $$.currentHeight - legendHeight - $$.getCurrentPaddingBottom() - config[__legend_inset_y], top: $$.isLegendTop ? $$.getCurrentPaddingTop() + config[__legend_inset_y] + 5.5 : $$.currentHeight - legendHeight - $$.getCurrentPaddingBottom() - config[__legend_inset_y],
left: $$.isLegendLeft ? $$.getCurrentPaddingLeft() + config[__legend_inset_x] + 0.5 : $$.currentWidth - legendWidth - $$.getCurrentPaddingRight() - config[__legend_inset_x] + 0.5 left: $$.isLegendLeft ? $$.getCurrentPaddingLeft() + config[__legend_inset_x] + 0.5 : $$.currentWidth - legendWidth - $$.getCurrentPaddingRight() - config[__legend_inset_x] + 0.5
}; };
@ -197,7 +197,7 @@ c3_chart_internal_fn.updateLegend = function (targetIds, options, transitions) {
.style('visibility', function (id) { return $$.isLegendToShow(id) ? 'visible' : 'hidden'; }) .style('visibility', function (id) { return $$.isLegendToShow(id) ? 'visible' : 'hidden'; })
.style('cursor', 'pointer') .style('cursor', 'pointer')
.on('click', function (id) { .on('click', function (id) {
isFunction(config[__legend_item_onclick]) ? config[__legend_item_onclick].call(c3, id) : $$.api.toggle(id); isFunction(config[__legend_item_onclick]) ? config[__legend_item_onclick].call($$, id) : $$.api.toggle(id);
}) })
.on('mouseover', function (id) { .on('mouseover', function (id) {
$$.d3.select(this).classed(CLASS[_legendItemFocused], true); $$.d3.select(this).classed(CLASS[_legendItemFocused], true);

22
src/selection.js
Unescape View File

@ -1,17 +1,20 @@
c3_chart_internal_fn.selectPoint = function (target, d, i) { c3_chart_internal_fn.selectPoint = function (target, d, i) {
var $$ = this, config = $$.config; var $$ = this, config = $$.config,
config[__data_onselected](d, target.node()); cx = generateCall(config[__axis_rotated] ? $$.circleY : $$.circleX, $$),
cy = generateCall(config[__axis_rotated] ? $$.circleX : $$.circleY, $$);
config[__data_onselected].call($$.api, d, target.node());
// add selected-circle on low layer g // add selected-circle on low layer g
$$.main.select('.' + CLASS[_selectedCircles] + $$.getTargetSelectorSuffix(d.id)).selectAll('.' + CLASS[_selectedCircle] + '-' + i) $$.main.select('.' + CLASS[_selectedCircles] + $$.getTargetSelectorSuffix(d.id)).selectAll('.' + CLASS[_selectedCircle] + '-' + i)
.data([d]) .data([d])
.enter().append('circle') .enter().append('circle')
.attr("class", function () { return $$.generateClass(CLASS[_selectedCircle], i); }) .attr("class", function () { return $$.generateClass(CLASS[_selectedCircle], i); })
.attr("cx", config[__axis_rotated] ? $$.circleY : $$.circleX) .attr("cx", cx)
.attr("cy", config[__axis_rotated] ? $$.circleX : $$.circleY) .attr("cy", cy)
.attr("stroke", function () { return $$.color(d); }) .attr("stroke", function () { return $$.color(d); })
.attr("r", $$.pointSelectR(d) * 1.4) .attr("r", function (d) { return $$.pointSelectR(d) * 1.4; })
.transition().duration(100) .transition().duration(100)
.attr("r", $$.pointSelectR); .attr("r", generateCall($$.pointSelectR, $$));
}; };
c3_chart_internal_fn.unselectPoint = function (target, d, i) { c3_chart_internal_fn.unselectPoint = function (target, d, i) {
var $$ = this; var $$ = this;
@ -68,13 +71,12 @@
if (!config[__data_selection_multiple]) { if (!config[__data_selection_multiple]) {
$$.main.selectAll('.' + CLASS[_shapes] + (config[__data_selection_grouped] ? $$.getTargetSelectorSuffix(d.id) : "")).selectAll('.' + CLASS[_shape]).each(function (d, i) { $$.main.selectAll('.' + CLASS[_shapes] + (config[__data_selection_grouped] ? $$.getTargetSelectorSuffix(d.id) : "")).selectAll('.' + CLASS[_shape]).each(function (d, i) {
var shape = d3.select(this); var shape = d3.select(this);
if (shape.classed(CLASS[_SELECTED])) { toggle(false, shape.classed(CLASS[_SELECTED], false), d, i); } if (shape.classed(CLASS[_SELECTED])) { toggle.call($$, false, shape.classed(CLASS[_SELECTED], false), d, i); }
}); });
} }
shape.classed(CLASS[_SELECTED], !isSelected); shape.classed(CLASS[_SELECTED], !isSelected);
toggle(!isSelected, shape, d, i); toggle.call($$, !isSelected, shape, d, i);
} }
$$.config[__data_onclick](d, that); $$.config[__data_onclick].call($$.api, d, that);
} }
}; };

6
src/shape.js
Unescape View File

@ -222,13 +222,13 @@ c3_chart_internal_fn.generateXYForText = function (barIndices, forX) {
getPoints = $$.generateGetBarPoints(barIndices, false), getPoints = $$.generateGetBarPoints(barIndices, false),
getter = forX ? $$.getXForText : $$.getYForText; getter = forX ? $$.getXForText : $$.getYForText;
return function (d, i) { return function (d, i) {
return getter(getPoints(d, i), d, this); return getter.call($$, getPoints(d, i), d, this);
}; };
}; };
c3_chart_internal_fn.getXForText = function (points, d, textElement) { c3_chart_internal_fn.getXForText = function (points, d, textElement) {
var $$ = this, var $$ = this,
box = textElement.getBoundingClientRect(), xPos, padding; box = textElement.getBoundingClientRect(), xPos, padding;
if (config[__axis_rotated]) { if ($$.config[__axis_rotated]) {
padding = $$.isBarType(d) ? 4 : 6; padding = $$.isBarType(d) ? 4 : 6;
xPos = points[2][1] + padding * (d.value < 0 ? -1 : 1); xPos = points[2][1] + padding * (d.value < 0 ? -1 : 1);
} else { } else {
@ -239,7 +239,7 @@ c3_chart_internal_fn.getXForText = function (points, d, textElement) {
c3_chart_internal_fn.getYForText = function (points, d, textElement) { c3_chart_internal_fn.getYForText = function (points, d, textElement) {
var $$ = this, var $$ = this,
box = textElement.getBoundingClientRect(), yPos; box = textElement.getBoundingClientRect(), yPos;
if (config[__axis_rotated]) { if ($$.config[__axis_rotated]) {
yPos = (points[0][0] + points[2][0] + box.height * 0.6) / 2; yPos = (points[0][0] + points[2][0] + box.height * 0.6) / 2;
} else { } else {
yPos = points[2][1] + (d.value < 0 ? box.height : $$.isBarType(d) ? -3 : -6); yPos = points[2][1] + (d.value < 0 ? box.height : $$.isBarType(d) ? -3 : -6);

2
src/subchart.js
Unescape View File

@ -158,7 +158,7 @@ c3_chart_internal_fn.redrawForBrush = function () {
withSubchart: false, withSubchart: false,
withUpdateXDomain: true withUpdateXDomain: true
}); });
$$.config[__subchart_onbrush].call($$, x.orgDomain()); $$.config[__subchart_onbrush].call($$.api, x.orgDomain());
}; };
c3_chart_internal_fn.transformContext = function (withTransition, transitions) { c3_chart_internal_fn.transformContext = function (withTransition, transitions) {
var $$ = this, subXAxis; var $$ = this, subXAxis;

8
src/zoom.js
Unescape View File

@ -4,7 +4,7 @@ c3_chart_internal_fn.initZoom = function () {
.on("zoomstart", function () { .on("zoomstart", function () {
$$.zoom.altDomain = d3.event.sourceEvent.altKey ? $$.x.orgDomain() : null; $$.zoom.altDomain = d3.event.sourceEvent.altKey ? $$.x.orgDomain() : null;
}) })
.on("zoom", $$.redrawForZoom); .on("zoom", function () { $$.redrawForZoom.call($$); });
$$.zoom.scale = function (scale) { $$.zoom.scale = function (scale) {
return config[__axis_rotated] ? this.y(scale) : this.x(scale); return config[__axis_rotated] ? this.y(scale) : this.x(scale);
}; };
@ -14,8 +14,8 @@ c3_chart_internal_fn.initZoom = function () {
}; };
$$.zoom.updateScaleExtent = function () { $$.zoom.updateScaleExtent = function () {
var ratio = diffDomain($$.x.orgDomain()) / diffDomain($$.orgXDomain), var ratio = diffDomain($$.x.orgDomain()) / diffDomain($$.orgXDomain),
extent = $$.orgScaleExtent(); extent = this.orgScaleExtent();
$$.scaleExtent([extent[0] * ratio, extent[1] * ratio]); this.scaleExtent([extent[0] * ratio, extent[1] * ratio]);
return this; return this;
}; };
}; };
@ -48,5 +48,5 @@ c3_chart_internal_fn.redrawForZoom = function () {
if (d3.event.sourceEvent.type === 'mousemove') { if (d3.event.sourceEvent.type === 'mousemove') {
$$.cancelClick = true; $$.cancelClick = true;
} }
config[__zoom_onzoom].call(c3, x.orgDomain()); config[__zoom_onzoom].call($$.api, x.orgDomain());
}; };

Write Preview
Loading…
Cancel
Save