Browse Source

separate axis internal API object and move responsibilities.

pull/1053/head
kiri 10 years ago
parent
commit
c7be08442a
  1. 1
      .jshintrc
  2. 537
      c3.js
  3. 10
      c3.min.js
  4. 4
      src/api.axis.js
  5. 440
      src/axis.js
  6. 37
      src/core.js
  7. 18
      src/domain.js
  8. 2
      src/format.js
  9. 20
      src/scale.js
  10. 12
      src/size.js
  11. 4
      src/tooltip.js

1
.jshintrc

@ -15,6 +15,7 @@
"newcap": false, "newcap": false,
"loopfunc": true, "loopfunc": true,
"bitwise": false, "bitwise": false,
"validthis": true,
"browser": true, "browser": true,

537
c3.js

@ -7,6 +7,25 @@
var c3_chart_fn, c3_chart_internal_fn; var c3_chart_fn, c3_chart_internal_fn;
function API(owner) {
this.owner = owner;
}
function inherit(base, derived) {
if (Object.create) {
derived.prototype = Object.create(base.prototype);
} else {
var f = function f() {};
f.prototype = base.prototype;
derived.prototype = new f();
}
derived.prototype.constructor = derived;
return derived;
}
function Chart(config) { function Chart(config) {
var $$ = this.internal = new ChartInternal(this); var $$ = this.internal = new ChartInternal(this);
$$.loadConfig(config); $$.loadConfig(config);
@ -154,6 +173,8 @@
var $$ = this, d3 = $$.d3, config = $$.config; var $$ = this, d3 = $$.d3, config = $$.config;
var defs, main, binding = true; var defs, main, binding = true;
$$._axis = new _Axis($$);
if ($$.initPie) { $$.initPie(); } if ($$.initPie) { $$.initPie(); }
if ($$.initBrush) { $$.initBrush(); } if ($$.initBrush) { $$.initBrush(); }
if ($$.initZoom) { $$.initZoom(); } if ($$.initZoom) { $$.initZoom(); }
@ -271,7 +292,7 @@
if (config.axis_x_extent) { $$.brush.extent($$.getDefaultExtent()); } if (config.axis_x_extent) { $$.brush.extent($$.getDefaultExtent()); }
// Add Axis // Add Axis
$$.initAxis(); $$._axis.init();
// Set targets // Set targets
$$.updateTargets($$.data.targets); $$.updateTargets($$.data.targets);
@ -461,7 +482,7 @@
durationForExit = withTransitionForExit ? duration : 0; durationForExit = withTransitionForExit ? duration : 0;
durationForAxis = withTransitionForAxis ? duration : 0; durationForAxis = withTransitionForAxis ? duration : 0;
transitions = transitions || $$.generateAxisTransitions(durationForAxis); transitions = transitions || $$._axis.generateTransitions(durationForAxis);
// update legend and transform each g // update legend and transform each g
if (withLegend && config.legend_show) { if (withLegend && config.legend_show) {
@ -480,7 +501,7 @@
if (targetsToShow.length) { if (targetsToShow.length) {
$$.updateXDomain(targetsToShow, withUpdateXDomain, withUpdateOrgXDomain, withTrimXDomain); $$.updateXDomain(targetsToShow, withUpdateXDomain, withUpdateOrgXDomain, withTrimXDomain);
if (!config.axis_x_tick_values) { if (!config.axis_x_tick_values) {
tickValues = $$.updateXAxisTickValues(targetsToShow); tickValues = $$._axis.updateXAxisTickValues(targetsToShow);
} }
} else { } else {
$$.xAxis.tickValues([]); $$.xAxis.tickValues([]);
@ -495,17 +516,17 @@
$$.y2.domain($$.getYDomain(targetsToShow, 'y2', xDomainForZoom)); $$.y2.domain($$.getYDomain(targetsToShow, 'y2', xDomainForZoom));
if (!config.axis_y_tick_values && config.axis_y_tick_count) { if (!config.axis_y_tick_values && config.axis_y_tick_count) {
$$.yAxis.tickValues($$.generateTickValues($$.y.domain(), config.axis_y_tick_count)); $$.yAxis.tickValues($$._axis.generateTickValues($$.y.domain(), config.axis_y_tick_count));
} }
if (!config.axis_y2_tick_values && config.axis_y2_tick_count) { if (!config.axis_y2_tick_values && config.axis_y2_tick_count) {
$$.y2Axis.tickValues($$.generateTickValues($$.y2.domain(), config.axis_y2_tick_count)); $$.y2Axis.tickValues($$._axis.generateTickValues($$.y2.domain(), config.axis_y2_tick_count));
} }
// axes // axes
$$.redrawAxis(transitions, hideAxis); $$._axis.redraw(transitions, hideAxis);
// Update axis label // Update axis label
$$.updateAxisLabels(withTransition); $$._axis.updateLabels(withTransition);
// show/hide if manual culling needed // show/hide if manual culling needed
if ((withUpdateXDomain || withUpdateXAxis) && targetsToShow.length) { if ((withUpdateXDomain || withUpdateXAxis) && targetsToShow.length) {
@ -683,7 +704,7 @@
$$.updateSizes(); $$.updateSizes();
// MEMO: called in updateLegend in redraw if withLegend // MEMO: called in updateLegend in redraw if withLegend
if (!(options.withLegend && config.legend_show)) { if (!(options.withLegend && config.legend_show)) {
transitions = $$.generateAxisTransitions(options.withTransitionForAxis ? config.transition_duration : 0); transitions = $$._axis.generateTransitions(options.withTransitionForAxis ? config.transition_duration : 0);
// Update scales // Update scales
$$.updateScales(); $$.updateScales();
$$.updateSvgSize(); $$.updateSvgSize();
@ -1231,10 +1252,10 @@
return scale; return scale;
}; };
c3_chart_internal_fn.getYScale = function (id) { c3_chart_internal_fn.getYScale = function (id) {
return this.getAxisId(id) === 'y2' ? this.y2 : this.y; return this._axis.getId(id) === 'y2' ? this.y2 : this.y;
}; };
c3_chart_internal_fn.getSubYScale = function (id) { c3_chart_internal_fn.getSubYScale = function (id) {
return this.getAxisId(id) === 'y2' ? this.subY2 : this.subY; return this._axis.getId(id) === 'y2' ? this.subY2 : this.subY;
}; };
c3_chart_internal_fn.updateScales = function () { c3_chart_internal_fn.updateScales = function () {
var $$ = this, config = $$.config, var $$ = this, config = $$.config,
@ -1256,15 +1277,15 @@
$$.subY = $$.getY($$.subYMin, $$.subYMax, forInit ? config.axis_y_default : $$.subY.domain()); $$.subY = $$.getY($$.subYMin, $$.subYMax, forInit ? config.axis_y_default : $$.subY.domain());
$$.subY2 = $$.getY($$.subYMin, $$.subYMax, forInit ? config.axis_y2_default : $$.subY2.domain()); $$.subY2 = $$.getY($$.subYMin, $$.subYMax, forInit ? config.axis_y2_default : $$.subY2.domain());
// update axes // update axes
$$.xAxisTickFormat = $$.getXAxisTickFormat(); $$.xAxisTickFormat = $$._axis.getXAxisTickFormat();
$$.xAxisTickValues = $$.getXAxisTickValues(); $$.xAxisTickValues = $$._axis.getXAxisTickValues();
$$.yAxisTickValues = $$.getYAxisTickValues(); $$.yAxisTickValues = $$._axis.getYAxisTickValues();
$$.y2AxisTickValues = $$.getY2AxisTickValues(); $$.y2AxisTickValues = $$._axis.getY2AxisTickValues();
$$.xAxis = $$.getXAxis($$.x, $$.xOrient, $$.xAxisTickFormat, $$.xAxisTickValues, config.axis_x_tick_outer); $$.xAxis = $$._axis.getXAxis($$.x, $$.xOrient, $$.xAxisTickFormat, $$.xAxisTickValues, config.axis_x_tick_outer);
$$.subXAxis = $$.getXAxis($$.subX, $$.subXOrient, $$.xAxisTickFormat, $$.xAxisTickValues, config.axis_x_tick_outer); $$.subXAxis = $$._axis.getXAxis($$.subX, $$.subXOrient, $$.xAxisTickFormat, $$.xAxisTickValues, config.axis_x_tick_outer);
$$.yAxis = $$.getYAxis($$.y, $$.yOrient, config.axis_y_tick_format, $$.yAxisTickValues, config.axis_y_tick_outer); $$.yAxis = $$._axis.getYAxis($$.y, $$.yOrient, config.axis_y_tick_format, $$.yAxisTickValues, config.axis_y_tick_outer);
$$.y2Axis = $$.getYAxis($$.y2, $$.y2Orient, config.axis_y2_tick_format, $$.y2AxisTickValues, config.axis_y2_tick_outer); $$.y2Axis = $$._axis.getYAxis($$.y2, $$.y2Orient, config.axis_y2_tick_format, $$.y2AxisTickValues, config.axis_y2_tick_outer);
// Set initialized scales to brush and zoom // Set initialized scales to brush and zoom
if (!forInit) { if (!forInit) {
@ -1297,7 +1318,7 @@
id = idsInGroup[k]; id = idsInGroup[k];
if (! ys[id]) { continue; } if (! ys[id]) { continue; }
ys[id].forEach(function (v, i) { ys[id].forEach(function (v, i) {
if ($$.getAxisId(id) === $$.getAxisId(baseId) && ys[baseId] && !(hasNegativeValue && +v > 0)) { if ($$._axis.getId(id) === $$._axis.getId(baseId) && ys[baseId] && !(hasNegativeValue && +v > 0)) {
ys[baseId][i] += +v; ys[baseId][i] += +v;
} }
}); });
@ -1328,7 +1349,7 @@
id = idsInGroup[k]; id = idsInGroup[k];
if (! ys[id]) { continue; } if (! ys[id]) { continue; }
ys[id].forEach(function (v, i) { ys[id].forEach(function (v, i) {
if ($$.getAxisId(id) === $$.getAxisId(baseId) && ys[baseId] && !(hasPositiveValue && +v < 0)) { if ($$._axis.getId(id) === $$._axis.getId(baseId) && ys[baseId] && !(hasPositiveValue && +v < 0)) {
ys[baseId][i] += +v; ys[baseId][i] += +v;
} }
}); });
@ -1339,7 +1360,7 @@
}; };
c3_chart_internal_fn.getYDomain = function (targets, axisId, xDomain) { c3_chart_internal_fn.getYDomain = function (targets, axisId, xDomain) {
var $$ = this, config = $$.config, var $$ = this, config = $$.config,
targetsByAxisId = targets.filter(function (t) { return $$.getAxisId(t.id) === axisId; }), targetsByAxisId = targets.filter(function (t) { return $$._axis.getId(t.id) === axisId; }),
yTargets = xDomain ? $$.filterByXDomain(targetsByAxisId, xDomain) : targetsByAxisId, yTargets = xDomain ? $$.filterByXDomain(targetsByAxisId, xDomain) : targetsByAxisId,
yMin = axisId === 'y2' ? config.axis_y2_min : config.axis_y_min, yMin = axisId === 'y2' ? config.axis_y2_min : config.axis_y_min,
yMax = axisId === 'y2' ? config.axis_y2_max : config.axis_y_max, yMax = axisId === 'y2' ? config.axis_y2_max : config.axis_y_max,
@ -1400,16 +1421,16 @@
padding_bottom += domainLength * (ratio[0] / (1 - ratio[0] - ratio[1])); padding_bottom += domainLength * (ratio[0] / (1 - ratio[0] - ratio[1]));
} else if (showVerticalDataLabel) { } else if (showVerticalDataLabel) {
lengths = $$.getDataLabelLength(yDomainMin, yDomainMax, 'height'); lengths = $$.getDataLabelLength(yDomainMin, yDomainMax, 'height');
padding_top += this.convertPixelsToAxisPadding(lengths[1], domainLength); padding_top += this._axis.convertPixelsToAxisPadding(lengths[1], domainLength);
padding_bottom += this.convertPixelsToAxisPadding(lengths[0], domainLength); padding_bottom += this._axis.convertPixelsToAxisPadding(lengths[0], domainLength);
} }
if (axisId === 'y' && notEmpty(config.axis_y_padding)) { if (axisId === 'y' && notEmpty(config.axis_y_padding)) {
padding_top = $$.getAxisPadding(config.axis_y_padding, 'top', padding_top, domainLength); padding_top = $$._axis.getPadding(config.axis_y_padding, 'top', padding_top, domainLength);
padding_bottom = $$.getAxisPadding(config.axis_y_padding, 'bottom', padding_bottom, domainLength); padding_bottom = $$._axis.getPadding(config.axis_y_padding, 'bottom', padding_bottom, domainLength);
} }
if (axisId === 'y2' && notEmpty(config.axis_y2_padding)) { if (axisId === 'y2' && notEmpty(config.axis_y2_padding)) {
padding_top = $$.getAxisPadding(config.axis_y2_padding, 'top', padding_top, domainLength); padding_top = $$._axis.getPadding(config.axis_y2_padding, 'top', padding_top, domainLength);
padding_bottom = $$.getAxisPadding(config.axis_y2_padding, 'bottom', padding_bottom, domainLength); padding_bottom = $$._axis.getPadding(config.axis_y2_padding, 'bottom', padding_bottom, domainLength);
} }
// Bar/Area chart should be 0-based if all positive|negative // Bar/Area chart should be 0-based if all positive|negative
if (isZeroBased) { if (isZeroBased) {
@ -2540,7 +2561,7 @@
} else if (config.axis_rotated) { } else if (config.axis_rotated) {
return !config.axis_x_show ? 1 : Math.max(ceil10($$.getAxisWidthByAxisId('x', withoutRecompute)), 40); return !config.axis_x_show ? 1 : Math.max(ceil10($$.getAxisWidthByAxisId('x', withoutRecompute)), 40);
} else if (!config.axis_y_show || config.axis_y_inner) { // && !config.axis_rotated } else if (!config.axis_y_show || config.axis_y_inner) { // && !config.axis_rotated
return $$.getYAxisLabelPosition().isOuter ? 30 : 1; return $$._axis.getYAxisLabelPosition().isOuter ? 30 : 1;
} else { } else {
return ceil10($$.getAxisWidthByAxisId('y', withoutRecompute)); return ceil10($$.getAxisWidthByAxisId('y', withoutRecompute));
} }
@ -2553,7 +2574,7 @@
} else if (config.axis_rotated) { } else if (config.axis_rotated) {
return defaultPadding + legendWidthOnRight; return defaultPadding + legendWidthOnRight;
} else if (!config.axis_y2_show || config.axis_y2_inner) { // && !config.axis_rotated } else if (!config.axis_y2_show || config.axis_y2_inner) { // && !config.axis_rotated
return 2 + legendWidthOnRight + ($$.getY2AxisLabelPosition().isOuter ? 20 : 0); return 2 + legendWidthOnRight + ($$._axis.getY2AxisLabelPosition().isOuter ? 20 : 0);
} else { } else {
return ceil10($$.getAxisWidthByAxisId('y2')) + legendWidthOnRight; return ceil10($$.getAxisWidthByAxisId('y2')) + legendWidthOnRight;
} }
@ -2593,8 +2614,8 @@
c3_chart_internal_fn.getAxisWidthByAxisId = function (id, withoutRecompute) { c3_chart_internal_fn.getAxisWidthByAxisId = function (id, withoutRecompute) {
var $$ = this, position = $$.getAxisLabelPositionById(id); var $$ = this, position = $$._axis.getLabelPositionById(id);
return $$.getMaxTickWidth(id, withoutRecompute) + (position.isInner ? 20 : 40); return $$._axis.getMaxTickWidth(id, withoutRecompute) + (position.isInner ? 20 : 40);
}; };
c3_chart_internal_fn.getHorizontalAxisHeight = function (axisId) { c3_chart_internal_fn.getHorizontalAxisHeight = function (axisId) {
var $$ = this, config = $$.config, h = 30; var $$ = this, config = $$.config, h = 30;
@ -2604,9 +2625,9 @@
if (axisId === 'y2' && !config.axis_y2_show) { return $$.rotated_padding_top; } if (axisId === 'y2' && !config.axis_y2_show) { return $$.rotated_padding_top; }
// Calculate x axis height when tick rotated // Calculate x axis height when tick rotated
if (axisId === 'x' && !config.axis_rotated && config.axis_x_tick_rotate) { if (axisId === 'x' && !config.axis_rotated && config.axis_x_tick_rotate) {
h = $$.getMaxTickWidth(axisId) * Math.cos(Math.PI * (90 - config.axis_x_tick_rotate) / 180); h = $$._axis.getMaxTickWidth(axisId) * Math.cos(Math.PI * (90 - config.axis_x_tick_rotate) / 180);
} }
return h + ($$.getAxisLabelPositionById(axisId).isInner ? 0 : 10) + (axisId === 'y2' ? -10 : 0); return h + ($$._axis.getLabelPositionById(axisId).isInner ? 0 : 10) + (axisId === 'y2' ? -10 : 0);
}; };
c3_chart_internal_fn.getEventRectWidth = function () { c3_chart_internal_fn.getEventRectWidth = function () {
@ -3645,7 +3666,7 @@
} }
$$.tooltip.html(config.tooltip_contents.call($$, $$.data.targets.map(function (d) { $$.tooltip.html(config.tooltip_contents.call($$, $$.data.targets.map(function (d) {
return $$.addName(d.values[config.tooltip_init_x]); return $$.addName(d.values[config.tooltip_init_x]);
}), $$.getXAxisTickFormat(), $$.getYFormat($$.hasArcType()), $$.color)); }), $$._axis.getXAxisTickFormat(), $$.getYFormat($$.hasArcType()), $$.color));
$$.tooltip.style("top", config.tooltip_init_position.top) $$.tooltip.style("top", config.tooltip_init_position.top)
.style("left", config.tooltip_init_position.left) .style("left", config.tooltip_init_position.left)
.style("display", "block"); .style("display", "block");
@ -3722,7 +3743,7 @@
if (dataToShow.length === 0 || !config.tooltip_show) { if (dataToShow.length === 0 || !config.tooltip_show) {
return; return;
} }
$$.tooltip.html(config.tooltip_contents.call($$, selectedData, $$.getXAxisTickFormat(), $$.getYFormat(forArc), $$.color)).style("display", "block"); $$.tooltip.html(config.tooltip_contents.call($$, selectedData, $$._axis.getXAxisTickFormat(), $$.getYFormat(forArc), $$.color)).style("display", "block");
// Get tooltip dimensions // Get tooltip dimensions
tWidth = $$.tooltip.property('offsetWidth'); tWidth = $$.tooltip.property('offsetWidth');
@ -4071,8 +4092,15 @@
$$.legendHasRendered = true; $$.legendHasRendered = true;
}; };
c3_chart_internal_fn.initAxis = function () { function _Axis(owner) {
var $$ = this, config = $$.config, main = $$.main; API.call(this, owner);
}
inherit(API, _Axis);
_Axis.prototype.init = function init() {
var $$ = this.owner, config = $$.config, main = $$.main;
$$.axes.x = main.append("g") $$.axes.x = main.append("g")
.attr("class", CLASS.axis + ' ' + CLASS.axisX) .attr("class", CLASS.axis + ' ' + CLASS.axisX)
.attr("clip-path", $$.clipPathForXAxis) .attr("clip-path", $$.clipPathForXAxis)
@ -4081,7 +4109,7 @@
$$.axes.x.append("text") $$.axes.x.append("text")
.attr("class", CLASS.axisXLabel) .attr("class", CLASS.axisXLabel)
.attr("transform", config.axis_rotated ? "rotate(-90)" : "") .attr("transform", config.axis_rotated ? "rotate(-90)" : "")
.style("text-anchor", $$.textAnchorForXAxisLabel.bind($$)); .style("text-anchor", _textAnchorForXAxisLabel.bind(this));
$$.axes.y = main.append("g") $$.axes.y = main.append("g")
.attr("class", CLASS.axis + ' ' + CLASS.axisY) .attr("class", CLASS.axis + ' ' + CLASS.axisY)
@ -4091,7 +4119,7 @@
$$.axes.y.append("text") $$.axes.y.append("text")
.attr("class", CLASS.axisYLabel) .attr("class", CLASS.axisYLabel)
.attr("transform", config.axis_rotated ? "" : "rotate(-90)") .attr("transform", config.axis_rotated ? "" : "rotate(-90)")
.style("text-anchor", $$.textAnchorForYAxisLabel.bind($$)); .style("text-anchor", _textAnchorForYAxisLabel.bind(this));
$$.axes.y2 = main.append("g") $$.axes.y2 = main.append("g")
.attr("class", CLASS.axis + ' ' + CLASS.axisY2) .attr("class", CLASS.axis + ' ' + CLASS.axisY2)
@ -4101,10 +4129,10 @@
$$.axes.y2.append("text") $$.axes.y2.append("text")
.attr("class", CLASS.axisY2Label) .attr("class", CLASS.axisY2Label)
.attr("transform", config.axis_rotated ? "" : "rotate(-90)") .attr("transform", config.axis_rotated ? "" : "rotate(-90)")
.style("text-anchor", $$.textAnchorForY2AxisLabel.bind($$)); .style("text-anchor", _textAnchorForY2AxisLabel.bind(this));
}; };
c3_chart_internal_fn.getXAxis = function (scale, orient, tickFormat, tickValues, withOuterTick, withoutTransition) { _Axis.prototype.getXAxis = function getXAxis(scale, orient, tickFormat, tickValues, withOuterTick, withoutTransition) {
var $$ = this, config = $$.config, var $$ = this.owner, config = $$.config,
axisParams = { axisParams = {
isCategory: $$.isCategorized(), isCategory: $$.isCategorized(),
withOuterTick: withOuterTick, withOuterTick: withOuterTick,
@ -4137,10 +4165,10 @@
return axis; return axis;
}; };
c3_chart_internal_fn.updateXAxisTickValues = function (targets, axis) { _Axis.prototype.updateXAxisTickValues = function updateXAxisTickValues(targets, axis) {
var $$ = this, config = $$.config, tickValues; var $$ = this.owner, config = $$.config, tickValues;
if (config.axis_x_tick_fit || config.axis_x_tick_count) { if (config.axis_x_tick_fit || config.axis_x_tick_count) {
tickValues = $$.generateTickValues($$.mapTargetsToUniqueXs(targets), config.axis_x_tick_count, $$.isTimeSeries()); tickValues = this.generateTickValues($$.mapTargetsToUniqueXs(targets), config.axis_x_tick_count, $$.isTimeSeries());
} }
if (axis) { if (axis) {
axis.tickValues(tickValues); axis.tickValues(tickValues);
@ -4150,22 +4178,25 @@
} }
return tickValues; return tickValues;
}; };
c3_chart_internal_fn.getYAxis = function (scale, orient, tickFormat, tickValues, withOuterTick) { _Axis.prototype.getYAxis = function getYAxis(scale, orient, tickFormat, tickValues, withOuterTick) {
var axisParams = {withOuterTick: withOuterTick}, var axisParams = {withOuterTick: withOuterTick},
axis = c3_axis(this.d3, axisParams).scale(scale).orient(orient).tickFormat(tickFormat); $$ = this.owner,
if (this.isTimeSeriesY()) { d3 = $$.d3,
axis.ticks(this.d3.time[this.config.axis_y_tick_time_value], this.config.axis_y_tick_time_interval); config = $$.config,
axis = c3_axis(d3, axisParams).scale(scale).orient(orient).tickFormat(tickFormat);
if ($$.isTimeSeriesY()) {
axis.ticks(d3.time[config.axis_y_tick_time_value], config.axis_y_tick_time_interval);
} else { } else {
axis.tickValues(tickValues); axis.tickValues(tickValues);
} }
return axis; return axis;
}; };
c3_chart_internal_fn.getAxisId = function (id) { _Axis.prototype.getId = function getId(id) {
var config = this.config; var config = this.owner.config;
return id in config.data_axes ? config.data_axes[id] : 'y'; return id in config.data_axes ? config.data_axes[id] : 'y';
}; };
c3_chart_internal_fn.getXAxisTickFormat = function () { _Axis.prototype.getXAxisTickFormat = function getXAxisTickFormat() {
var $$ = this, config = $$.config, var $$ = this.owner, config = $$.config,
format = $$.isTimeSeries() ? $$.defaultAxisTimeFormat : $$.isCategorized() ? $$.categoryName : function (v) { return v < 0 ? v.toFixed(0) : v; }; format = $$.isTimeSeries() ? $$.defaultAxisTimeFormat : $$.isCategorized() ? $$.categoryName : function (v) { return v < 0 ? v.toFixed(0) : v; };
if (config.axis_x_tick_format) { if (config.axis_x_tick_format) {
if (isFunction(config.axis_x_tick_format)) { if (isFunction(config.axis_x_tick_format)) {
@ -4178,36 +4209,18 @@
} }
return isFunction(format) ? function (v) { return format.call($$, v); } : format; return isFunction(format) ? function (v) { return format.call($$, v); } : format;
}; };
c3_chart_internal_fn.getAxisTickValues = function (tickValues, axis) { _Axis.prototype.getXAxisTickValues = function getXAxisTickValues() {
return tickValues ? tickValues : axis ? axis.tickValues() : undefined; return _getTickValues(this.owner.config.axis_x_tick_values, this.owner.xAxis);
}; };
c3_chart_internal_fn.getXAxisTickValues = function () { _Axis.prototype.getYAxisTickValues = function getYAxisTickValues() {
return this.getAxisTickValues(this.config.axis_x_tick_values, this.xAxis); return _getTickValues(this.owner.config.axis_y_tick_values, this.owner.yAxis);
}; };
c3_chart_internal_fn.getYAxisTickValues = function () { _Axis.prototype.getY2AxisTickValues = function getY2AxisTickValues() {
return this.getAxisTickValues(this.config.axis_y_tick_values, this.yAxis); return _getTickValues(this.owner.config.axis_y2_tick_values, this.owner.y2Axis);
};
c3_chart_internal_fn.getY2AxisTickValues = function () {
return this.getAxisTickValues(this.config.axis_y2_tick_values, this.y2Axis);
};
c3_chart_internal_fn.getAxisLabelOptionByAxisId = function (axisId) {
var $$ = this, config = $$.config, option;
if (axisId === 'y') {
option = config.axis_y_label;
} else if (axisId === 'y2') {
option = config.axis_y2_label;
} else if (axisId === 'x') {
option = config.axis_x_label;
}
return option;
}; };
c3_chart_internal_fn.getAxisLabelText = function (axisId) { _Axis.prototype.setLabelText = function setLabelText(axisId, text) {
var option = this.getAxisLabelOptionByAxisId(axisId);
return isString(option) ? option : option ? option.text : null;
};
c3_chart_internal_fn.setAxisLabelText = function (axisId, text) {
var $$ = this, config = $$.config, var $$ = this, config = $$.config,
option = $$.getAxisLabelOptionByAxisId(axisId); option = _getLabelOptionByAxisId.call(this, axisId);
if (isString(option)) { if (isString(option)) {
if (axisId === 'y') { if (axisId === 'y') {
config.axis_y_label = text; config.axis_y_label = text;
@ -4220,139 +4233,18 @@
option.text = text; option.text = text;
} }
}; };
c3_chart_internal_fn.getAxisLabelPosition = function (axisId, defaultPosition) { _Axis.prototype.getYAxisLabelPosition = function getYAxisLabelPosition() {
var option = this.getAxisLabelOptionByAxisId(axisId), return _getLabelPosition.call(this, 'y', this.owner.config.axis_rotated ? 'inner-right' : 'inner-top');
position = (option && typeof option === 'object' && option.position) ? option.position : defaultPosition;
return {
isInner: position.indexOf('inner') >= 0,
isOuter: position.indexOf('outer') >= 0,
isLeft: position.indexOf('left') >= 0,
isCenter: position.indexOf('center') >= 0,
isRight: position.indexOf('right') >= 0,
isTop: position.indexOf('top') >= 0,
isMiddle: position.indexOf('middle') >= 0,
isBottom: position.indexOf('bottom') >= 0
};
};
c3_chart_internal_fn.getXAxisLabelPosition = function () {
return this.getAxisLabelPosition('x', this.config.axis_rotated ? 'inner-top' : 'inner-right');
}; };
c3_chart_internal_fn.getYAxisLabelPosition = function () { _Axis.prototype.getY2AxisLabelPosition = function getY2AxisLabelPosition() {
return this.getAxisLabelPosition('y', this.config.axis_rotated ? 'inner-right' : 'inner-top'); return _getLabelPosition.call(this, 'y2', this.owner.config.axis_rotated ? 'inner-right' : 'inner-top');
}; };
c3_chart_internal_fn.getY2AxisLabelPosition = function () { _Axis.prototype.getLabelPositionById = function getLabelPositionById(id) {
return this.getAxisLabelPosition('y2', this.config.axis_rotated ? 'inner-right' : 'inner-top'); return id === 'y2' ? this.getY2AxisLabelPosition() : id === 'y' ? this.getYAxisLabelPosition() : _getXAxisLabelPosition.call(this);
};
c3_chart_internal_fn.getAxisLabelPositionById = function (id) {
return id === 'y2' ? this.getY2AxisLabelPosition() : id === 'y' ? this.getYAxisLabelPosition() : this.getXAxisLabelPosition();
};
c3_chart_internal_fn.textForXAxisLabel = function () {
return this.getAxisLabelText('x');
};
c3_chart_internal_fn.textForYAxisLabel = function () {
return this.getAxisLabelText('y');
};
c3_chart_internal_fn.textForY2AxisLabel = function () {
return this.getAxisLabelText('y2');
};
c3_chart_internal_fn.xForAxisLabel = function (forHorizontal, position) {
var $$ = this;
if (forHorizontal) {
return position.isLeft ? 0 : position.isCenter ? $$.width / 2 : $$.width;
} else {
return position.isBottom ? -$$.height : position.isMiddle ? -$$.height / 2 : 0;
}
};
c3_chart_internal_fn.dxForAxisLabel = function (forHorizontal, position) {
if (forHorizontal) {
return position.isLeft ? "0.5em" : position.isRight ? "-0.5em" : "0";
} else {
return position.isTop ? "-0.5em" : position.isBottom ? "0.5em" : "0";
}
};
c3_chart_internal_fn.textAnchorForAxisLabel = function (forHorizontal, position) {
if (forHorizontal) {
return position.isLeft ? 'start' : position.isCenter ? 'middle' : 'end';
} else {
return position.isBottom ? 'start' : position.isMiddle ? 'middle' : 'end';
}
};
c3_chart_internal_fn.xForXAxisLabel = function () {
return this.xForAxisLabel(!this.config.axis_rotated, this.getXAxisLabelPosition());
};
c3_chart_internal_fn.xForYAxisLabel = function () {
return this.xForAxisLabel(this.config.axis_rotated, this.getYAxisLabelPosition());
};
c3_chart_internal_fn.xForY2AxisLabel = function () {
return this.xForAxisLabel(this.config.axis_rotated, this.getY2AxisLabelPosition());
};
c3_chart_internal_fn.dxForXAxisLabel = function () {
return this.dxForAxisLabel(!this.config.axis_rotated, this.getXAxisLabelPosition());
};
c3_chart_internal_fn.dxForYAxisLabel = function () {
return this.dxForAxisLabel(this.config.axis_rotated, this.getYAxisLabelPosition());
};
c3_chart_internal_fn.dxForY2AxisLabel = function () {
return this.dxForAxisLabel(this.config.axis_rotated, this.getY2AxisLabelPosition());
};
c3_chart_internal_fn.dyForXAxisLabel = function () {
var $$ = this, config = $$.config,
position = $$.getXAxisLabelPosition();
if (config.axis_rotated) {
return position.isInner ? "1.2em" : -25 - $$.getMaxTickWidth('x');
} else {
return position.isInner ? "-0.5em" : config.axis_x_height ? config.axis_x_height - 10 : "3em";
}
};
c3_chart_internal_fn.dyForYAxisLabel = function () {
var $$ = this,
position = $$.getYAxisLabelPosition();
if ($$.config.axis_rotated) {
return position.isInner ? "-0.5em" : "3em";
} else {
return position.isInner ? "1.2em" : -10 - ($$.config.axis_y_inner ? 0 : ($$.getMaxTickWidth('y') + 10));
}
};
c3_chart_internal_fn.dyForY2AxisLabel = function () {
var $$ = this,
position = $$.getY2AxisLabelPosition();
if ($$.config.axis_rotated) {
return position.isInner ? "1.2em" : "-2.2em";
} else {
return position.isInner ? "-0.5em" : 15 + ($$.config.axis_y2_inner ? 0 : (this.getMaxTickWidth('y2') + 15));
}
};
c3_chart_internal_fn.textAnchorForXAxisLabel = function () {
var $$ = this;
return $$.textAnchorForAxisLabel(!$$.config.axis_rotated, $$.getXAxisLabelPosition());
};
c3_chart_internal_fn.textAnchorForYAxisLabel = function () {
var $$ = this;
return $$.textAnchorForAxisLabel($$.config.axis_rotated, $$.getYAxisLabelPosition());
};
c3_chart_internal_fn.textAnchorForY2AxisLabel = function () {
var $$ = this;
return $$.textAnchorForAxisLabel($$.config.axis_rotated, $$.getY2AxisLabelPosition());
}; };
c3_chart_internal_fn.xForRotatedTickText = function (r) { _Axis.prototype.getMaxTickWidth = function getMaxTickWidth(id, withoutRecompute) {
return 8 * Math.sin(Math.PI * (r / 180)); var $$ = this.owner, config = $$.config,
};
c3_chart_internal_fn.yForRotatedTickText = function (r) {
return 11.5 - 2.5 * (r / 15) * (r > 0 ? 1 : -1);
};
c3_chart_internal_fn.rotateTickText = function (axis, transition, rotate) {
axis.selectAll('.tick text')
.style("text-anchor", rotate > 0 ? "start" : "end");
transition.selectAll('.tick text')
.attr("y", this.yForRotatedTickText(rotate))
.attr("transform", "rotate(" + rotate + ")")
.selectAll('tspan')
.attr('dx', this.xForRotatedTickText(rotate));
};
c3_chart_internal_fn.getMaxTickWidth = function (id, withoutRecompute) {
var $$ = this, config = $$.config,
maxWidth = 0, targetsToShow, scale, axis, body, svg; maxWidth = 0, targetsToShow, scale, axis, body, svg;
if (withoutRecompute && $$.currentMaxTickWidths[id]) { if (withoutRecompute && $$.currentMaxTickWidths[id]) {
return $$.currentMaxTickWidths[id]; return $$.currentMaxTickWidths[id];
@ -4361,16 +4253,16 @@
targetsToShow = $$.filterTargetsToShow($$.data.targets); targetsToShow = $$.filterTargetsToShow($$.data.targets);
if (id === 'y') { if (id === 'y') {
scale = $$.y.copy().domain($$.getYDomain(targetsToShow, 'y')); scale = $$.y.copy().domain($$.getYDomain(targetsToShow, 'y'));
axis = $$.getYAxis(scale, $$.yOrient, config.axis_y_tick_format, $$.yAxisTickValues); axis = this.getYAxis(scale, $$.yOrient, config.axis_y_tick_format, $$.yAxisTickValues);
} else if (id === 'y2') { } else if (id === 'y2') {
scale = $$.y2.copy().domain($$.getYDomain(targetsToShow, 'y2')); scale = $$.y2.copy().domain($$.getYDomain(targetsToShow, 'y2'));
axis = $$.getYAxis(scale, $$.y2Orient, config.axis_y2_tick_format, $$.y2AxisTickValues); axis = this.getYAxis(scale, $$.y2Orient, config.axis_y2_tick_format, $$.y2AxisTickValues);
} else { } else {
scale = $$.x.copy().domain($$.getXDomain(targetsToShow)); scale = $$.x.copy().domain($$.getXDomain(targetsToShow));
axis = $$.getXAxis(scale, $$.xOrient, $$.xAxisTickFormat, $$.xAxisTickValues); axis = this.getXAxis(scale, $$.xOrient, $$.xAxisTickFormat, $$.xAxisTickValues);
$$.updateXAxisTickValues(targetsToShow, axis); this.updateXAxisTickValues(targetsToShow, axis);
} }
body = this.d3.select('body').classed('c3', true); body = $$.d3.select('body').classed('c3', true);
svg = body.append('svg').style('visibility', 'hidden'); svg = body.append('svg').style('visibility', 'hidden');
svg.append('g').call(axis).each(function () { svg.append('g').call(axis).each(function () {
$$.d3.select(this).selectAll('text tspan').each(function () { $$.d3.select(this).selectAll('text tspan').each(function () {
@ -4388,29 +4280,29 @@
return $$.currentMaxTickWidths[id]; return $$.currentMaxTickWidths[id];
}; };
c3_chart_internal_fn.updateAxisLabels = function (withTransition) { _Axis.prototype.updateLabels = function updateLabels(withTransition) {
var $$ = this; var $$ = this.owner;
var axisXLabel = $$.main.select('.' + CLASS.axisX + ' .' + CLASS.axisXLabel), var axisXLabel = $$.main.select('.' + CLASS.axisX + ' .' + CLASS.axisXLabel),
axisYLabel = $$.main.select('.' + CLASS.axisY + ' .' + CLASS.axisYLabel), axisYLabel = $$.main.select('.' + CLASS.axisY + ' .' + CLASS.axisYLabel),
axisY2Label = $$.main.select('.' + CLASS.axisY2 + ' .' + CLASS.axisY2Label); axisY2Label = $$.main.select('.' + CLASS.axisY2 + ' .' + CLASS.axisY2Label);
(withTransition ? axisXLabel.transition() : axisXLabel) (withTransition ? axisXLabel.transition() : axisXLabel)
.attr("x", $$.xForXAxisLabel.bind($$)) .attr("x", _xForXAxisLabel.bind(this))
.attr("dx", $$.dxForXAxisLabel.bind($$)) .attr("dx", _dxForXAxisLabel.bind(this))
.attr("dy", $$.dyForXAxisLabel.bind($$)) .attr("dy", _dyForXAxisLabel.bind(this))
.text($$.textForXAxisLabel.bind($$)); .text(_textForXAxisLabel.bind(this));
(withTransition ? axisYLabel.transition() : axisYLabel) (withTransition ? axisYLabel.transition() : axisYLabel)
.attr("x", $$.xForYAxisLabel.bind($$)) .attr("x", _xForYAxisLabel.bind(this))
.attr("dx", $$.dxForYAxisLabel.bind($$)) .attr("dx", _dxForYAxisLabel.bind(this))
.attr("dy", $$.dyForYAxisLabel.bind($$)) .attr("dy", _dyForYAxisLabel.bind(this))
.text($$.textForYAxisLabel.bind($$)); .text(_textForYAxisLabel.bind(this));
(withTransition ? axisY2Label.transition() : axisY2Label) (withTransition ? axisY2Label.transition() : axisY2Label)
.attr("x", $$.xForY2AxisLabel.bind($$)) .attr("x", _xForY2AxisLabel.bind(this))
.attr("dx", $$.dxForY2AxisLabel.bind($$)) .attr("dx", _dxForY2AxisLabel.bind(this))
.attr("dy", $$.dyForY2AxisLabel.bind($$)) .attr("dy", _dyForY2AxisLabel.bind(this))
.text($$.textForY2AxisLabel.bind($$)); .text(_textForY2AxisLabel.bind(this));
}; };
c3_chart_internal_fn.getAxisPadding = function (padding, key, defaultValue, domainLength) { _Axis.prototype.getPadding = function getPadding(padding, key, defaultValue, domainLength) {
if (!isValue(padding[key])) { if (!isValue(padding[key])) {
return defaultValue; return defaultValue;
} }
@ -4420,12 +4312,13 @@
// assume padding is pixels if unit is not specified // assume padding is pixels if unit is not specified
return this.convertPixelsToAxisPadding(padding[key], domainLength); return this.convertPixelsToAxisPadding(padding[key], domainLength);
}; };
c3_chart_internal_fn.convertPixelsToAxisPadding = function (pixels, domainLength) { _Axis.prototype.convertPixelsToAxisPadding = function convertPixelsToAxisPadding(pixels, domainLength) {
var length = this.config.axis_rotated ? this.width : this.height; var $$ = this.owner,
length = $$.config.axis_rotated ? $$.width : $$.height;
return domainLength * (pixels / length); return domainLength * (pixels / length);
}; };
c3_chart_internal_fn.generateTickValues = function (values, tickCount, forTimeSeries) { _Axis.prototype.generateTickValues = function generateTickValues(values, tickCount, forTimeSeries) {
var tickValues = values, targetCount, start, end, count, interval, i, tickValue; var tickValues = values, targetCount, start, end, count, interval, i, tickValue;
if (tickCount) { if (tickCount) {
targetCount = isFunction(tickCount) ? tickCount() : tickCount; targetCount = isFunction(tickCount) ? tickCount() : tickCount;
@ -4451,8 +4344,8 @@
if (!forTimeSeries) { tickValues = tickValues.sort(function (a, b) { return a - b; }); } if (!forTimeSeries) { tickValues = tickValues.sort(function (a, b) { return a - b; }); }
return tickValues; return tickValues;
}; };
c3_chart_internal_fn.generateAxisTransitions = function (duration) { _Axis.prototype.generateTransitions = function generateTransitions(duration) {
var $$ = this, axes = $$.axes; var $$ = this.owner, axes = $$.axes;
return { return {
axisX: duration ? axes.x.transition().duration(duration) : axes.x, axisX: duration ? axes.x.transition().duration(duration) : axes.x,
axisY: duration ? axes.y.transition().duration(duration) : axes.y, axisY: duration ? axes.y.transition().duration(duration) : axes.y,
@ -4460,8 +4353,8 @@
axisSubX: duration ? axes.subx.transition().duration(duration) : axes.subx axisSubX: duration ? axes.subx.transition().duration(duration) : axes.subx
}; };
}; };
c3_chart_internal_fn.redrawAxis = function (transitions, isHidden) { _Axis.prototype.redraw = function redraw(transitions, isHidden) {
var $$ = this, config = $$.config; var $$ = this.owner, config = $$.config;
$$.axes.x.style("opacity", isHidden ? 0 : 1); $$.axes.x.style("opacity", isHidden ? 0 : 1);
$$.axes.y.style("opacity", isHidden ? 0 : 1); $$.axes.y.style("opacity", isHidden ? 0 : 1);
$$.axes.y2.style("opacity", isHidden ? 0 : 1); $$.axes.y2.style("opacity", isHidden ? 0 : 1);
@ -4472,11 +4365,175 @@
transitions.axisSubX.call($$.subXAxis); transitions.axisSubX.call($$.subXAxis);
// rotate tick text if needed // rotate tick text if needed
if (!config.axis_rotated && config.axis_x_tick_rotate) { if (!config.axis_rotated && config.axis_x_tick_rotate) {
$$.rotateTickText($$.axes.x, transitions.axisX, config.axis_x_tick_rotate); _rotateTickText($$.axes.x, transitions.axisX, config.axis_x_tick_rotate);
$$.rotateTickText($$.axes.subx, transitions.axisSubX, config.axis_x_tick_rotate); _rotateTickText($$.axes.subx, transitions.axisSubX, config.axis_x_tick_rotate);
} }
}; };
function _getTickValues(tickValues, axis) {
return tickValues ? tickValues : axis ? axis.tickValues() : undefined;
}
function _getLabelOptionByAxisId(axisId) {
var $$ = this.owner, config = $$.config, option;
if (axisId === 'y') {
option = config.axis_y_label;
} else if (axisId === 'y2') {
option = config.axis_y2_label;
} else if (axisId === 'x') {
option = config.axis_x_label;
}
return option;
}
function _getLabelText(axisId) {
var option = _getLabelOptionByAxisId.call(this, axisId);
return isString(option) ? option : option ? option.text : null;
}
function _getLabelPosition(axisId, defaultPosition) {
var option = _getLabelOptionByAxisId.call(this, axisId),
position = (option && typeof option === 'object' && option.position) ? option.position : defaultPosition;
return {
isInner: position.indexOf('inner') >= 0,
isOuter: position.indexOf('outer') >= 0,
isLeft: position.indexOf('left') >= 0,
isCenter: position.indexOf('center') >= 0,
isRight: position.indexOf('right') >= 0,
isTop: position.indexOf('top') >= 0,
isMiddle: position.indexOf('middle') >= 0,
isBottom: position.indexOf('bottom') >= 0
};
}
function _getXAxisLabelPosition() {
return _getLabelPosition.call(this, 'x', this.owner.config.axis_rotated ? 'inner-top' : 'inner-right');
}
function _textForXAxisLabel() {
return _getLabelText.call(this, 'x');
}
function _textForYAxisLabel() {
return _getLabelText.call(this, 'y');
}
function _textForY2AxisLabel() {
return _getLabelText.call(this, 'y2');
}
function _xForAxisLabel(forHorizontal, position) {
var $$ = this.owner;
if (forHorizontal) {
return position.isLeft ? 0 : position.isCenter ? $$.width / 2 : $$.width;
} else {
return position.isBottom ? -$$.height : position.isMiddle ? -$$.height / 2 : 0;
}
}
function _dxForAxisLabel(forHorizontal, position) {
if (forHorizontal) {
return position.isLeft ? "0.5em" : position.isRight ? "-0.5em" : "0";
} else {
return position.isTop ? "-0.5em" : position.isBottom ? "0.5em" : "0";
}
}
function _textAnchorForAxisLabel(forHorizontal, position) {
if (forHorizontal) {
return position.isLeft ? 'start' : position.isCenter ? 'middle' : 'end';
} else {
return position.isBottom ? 'start' : position.isMiddle ? 'middle' : 'end';
}
}
function _xForXAxisLabel() {
return _xForAxisLabel.call(this, !this.owner.config.axis_rotated, _getXAxisLabelPosition.call(this));
}
function _xForYAxisLabel() {
return _xForAxisLabel.call(this, this.owner.config.axis_rotated, this.getYAxisLabelPosition());
}
function _xForY2AxisLabel() {
return _xForAxisLabel.call(this, this.owner.config.axis_rotated, this.getY2AxisLabelPosition());
}
function _dxForXAxisLabel() {
return _dxForAxisLabel(!this.owner.config.axis_rotated, _getXAxisLabelPosition.call(this));
}
function _dxForYAxisLabel() {
return _dxForAxisLabel(this.owner.config.axis_rotated, this.getYAxisLabelPosition());
}
function _dxForY2AxisLabel() {
return _dxForAxisLabel(this.owner.config.axis_rotated, this.getY2AxisLabelPosition());
}
function _dyForXAxisLabel() {
var $$ = this.owner, config = $$.config,
position = _getXAxisLabelPosition.call(this);
if (config.axis_rotated) {
return position.isInner ? "1.2em" : -25 - this.getMaxTickWidth('x');
} else {
return position.isInner ? "-0.5em" : config.axis_x_height ? config.axis_x_height - 10 : "3em";
}
}
function _dyForYAxisLabel() {
var $$ = this.owner,
position = this.getYAxisLabelPosition();
if ($$.config.axis_rotated) {
return position.isInner ? "-0.5em" : "3em";
} else {
return position.isInner ? "1.2em" : -10 - ($$.config.axis_y_inner ? 0 : (this.getMaxTickWidth('y') + 10));
}
}
function _dyForY2AxisLabel() {
var $$ = this.owner,
position = this.getY2AxisLabelPosition();
if ($$.config.axis_rotated) {
return position.isInner ? "1.2em" : "-2.2em";
} else {
return position.isInner ? "-0.5em" : 15 + ($$.config.axis_y2_inner ? 0 : (this.getMaxTickWidth('y2') + 15));
}
}
function _textAnchorForXAxisLabel() {
var $$ = this.owner;
return _textAnchorForAxisLabel(!$$.config.axis_rotated, _getXAxisLabelPosition.call(this));
}
function _textAnchorForYAxisLabel() {
var $$ = this.owner;
return _textAnchorForAxisLabel($$.config.axis_rotated, this.getYAxisLabelPosition());
}
function _textAnchorForY2AxisLabel() {
var $$ = this.owner;
return _textAnchorForAxisLabel($$.config.axis_rotated, this.getY2AxisLabelPosition());
}
function _xForRotatedTickText(r) {
return 8 * Math.sin(Math.PI * (r / 180));
}
function _yForRotatedTickText(r) {
return 11.5 - 2.5 * (r / 15) * (r > 0 ? 1 : -1);
}
function _rotateTickText(axis, transition, rotate) {
axis.selectAll('.tick text')
.style("text-anchor", rotate > 0 ? "start" : "end");
transition.selectAll('.tick text')
.attr("y", _yForRotatedTickText(rotate))
.attr("transform", "rotate(" + rotate + ")")
.selectAll('tspan')
.attr('dx', _xForRotatedTickText(rotate));
}
c3_chart_internal_fn.getClipPath = function (id) { c3_chart_internal_fn.getClipPath = function (id) {
var isIE9 = window.navigator.appVersion.toLowerCase().indexOf("msie 9.") >= 0; var isIE9 = window.navigator.appVersion.toLowerCase().indexOf("msie 9.") >= 0;
return "url(" + (isIE9 ? "" : document.URL.split('#')[0]) + "#" + id + ")"; return "url(" + (isIE9 ? "" : document.URL.split('#')[0]) + "#" + id + ")";
@ -5492,7 +5549,7 @@
formatForY = forArc && !$$.hasType('gauge') ? $$.defaultArcValueFormat : $$.yFormat, formatForY = forArc && !$$.hasType('gauge') ? $$.defaultArcValueFormat : $$.yFormat,
formatForY2 = forArc && !$$.hasType('gauge') ? $$.defaultArcValueFormat : $$.y2Format; formatForY2 = forArc && !$$.hasType('gauge') ? $$.defaultArcValueFormat : $$.y2Format;
return function (v, ratio, id) { return function (v, ratio, id) {
var format = $$.getAxisId(id) === 'y2' ? formatForY2 : formatForY; var format = $$._axis.getId(id) === 'y2' ? formatForY2 : formatForY;
return format.call($$, v, ratio); return format.call($$, v, ratio);
}; };
}; };
@ -6472,9 +6529,9 @@
var $$ = this.internal; var $$ = this.internal;
if (arguments.length) { if (arguments.length) {
Object.keys(labels).forEach(function (axisId) { Object.keys(labels).forEach(function (axisId) {
$$.setAxisLabelText(axisId, labels[axisId]); $$._axis.setLabelText(axisId, labels[axisId]);
}); });
$$.updateAxisLabels(); $$._axis.updateLabels();
} }
// TODO: return some values? // TODO: return some values?
}; };

10
c3.min.js vendored

File diff suppressed because one or more lines are too long

4
src/api.axis.js

@ -3,9 +3,9 @@ c3_chart_fn.axis.labels = function (labels) {
var $$ = this.internal; var $$ = this.internal;
if (arguments.length) { if (arguments.length) {
Object.keys(labels).forEach(function (axisId) { Object.keys(labels).forEach(function (axisId) {
$$.setAxisLabelText(axisId, labels[axisId]); $$._axis.setLabelText(axisId, labels[axisId]);
}); });
$$.updateAxisLabels(); $$._axis.updateLabels();
} }
// TODO: return some values? // TODO: return some values?
}; };

440
src/axis.js

@ -1,5 +1,12 @@
c3_chart_internal_fn.initAxis = function () { function _Axis(owner) {
var $$ = this, config = $$.config, main = $$.main; API.call(this, owner);
}
inherit(API, _Axis);
_Axis.prototype.init = function init() {
var $$ = this.owner, config = $$.config, main = $$.main;
$$.axes.x = main.append("g") $$.axes.x = main.append("g")
.attr("class", CLASS.axis + ' ' + CLASS.axisX) .attr("class", CLASS.axis + ' ' + CLASS.axisX)
.attr("clip-path", $$.clipPathForXAxis) .attr("clip-path", $$.clipPathForXAxis)
@ -8,7 +15,7 @@ c3_chart_internal_fn.initAxis = function () {
$$.axes.x.append("text") $$.axes.x.append("text")
.attr("class", CLASS.axisXLabel) .attr("class", CLASS.axisXLabel)
.attr("transform", config.axis_rotated ? "rotate(-90)" : "") .attr("transform", config.axis_rotated ? "rotate(-90)" : "")
.style("text-anchor", $$.textAnchorForXAxisLabel.bind($$)); .style("text-anchor", _textAnchorForXAxisLabel.bind(this));
$$.axes.y = main.append("g") $$.axes.y = main.append("g")
.attr("class", CLASS.axis + ' ' + CLASS.axisY) .attr("class", CLASS.axis + ' ' + CLASS.axisY)
@ -18,7 +25,7 @@ c3_chart_internal_fn.initAxis = function () {
$$.axes.y.append("text") $$.axes.y.append("text")
.attr("class", CLASS.axisYLabel) .attr("class", CLASS.axisYLabel)
.attr("transform", config.axis_rotated ? "" : "rotate(-90)") .attr("transform", config.axis_rotated ? "" : "rotate(-90)")
.style("text-anchor", $$.textAnchorForYAxisLabel.bind($$)); .style("text-anchor", _textAnchorForYAxisLabel.bind(this));
$$.axes.y2 = main.append("g") $$.axes.y2 = main.append("g")
.attr("class", CLASS.axis + ' ' + CLASS.axisY2) .attr("class", CLASS.axis + ' ' + CLASS.axisY2)
@ -28,10 +35,10 @@ c3_chart_internal_fn.initAxis = function () {
$$.axes.y2.append("text") $$.axes.y2.append("text")
.attr("class", CLASS.axisY2Label) .attr("class", CLASS.axisY2Label)
.attr("transform", config.axis_rotated ? "" : "rotate(-90)") .attr("transform", config.axis_rotated ? "" : "rotate(-90)")
.style("text-anchor", $$.textAnchorForY2AxisLabel.bind($$)); .style("text-anchor", _textAnchorForY2AxisLabel.bind(this));
}; };
c3_chart_internal_fn.getXAxis = function (scale, orient, tickFormat, tickValues, withOuterTick, withoutTransition) { _Axis.prototype.getXAxis = function getXAxis(scale, orient, tickFormat, tickValues, withOuterTick, withoutTransition) {
var $$ = this, config = $$.config, var $$ = this.owner, config = $$.config,
axisParams = { axisParams = {
isCategory: $$.isCategorized(), isCategory: $$.isCategorized(),
withOuterTick: withOuterTick, withOuterTick: withOuterTick,
@ -64,10 +71,10 @@ c3_chart_internal_fn.getXAxis = function (scale, orient, tickFormat, tickValues,
return axis; return axis;
}; };
c3_chart_internal_fn.updateXAxisTickValues = function (targets, axis) { _Axis.prototype.updateXAxisTickValues = function updateXAxisTickValues(targets, axis) {
var $$ = this, config = $$.config, tickValues; var $$ = this.owner, config = $$.config, tickValues;
if (config.axis_x_tick_fit || config.axis_x_tick_count) { if (config.axis_x_tick_fit || config.axis_x_tick_count) {
tickValues = $$.generateTickValues($$.mapTargetsToUniqueXs(targets), config.axis_x_tick_count, $$.isTimeSeries()); tickValues = this.generateTickValues($$.mapTargetsToUniqueXs(targets), config.axis_x_tick_count, $$.isTimeSeries());
} }
if (axis) { if (axis) {
axis.tickValues(tickValues); axis.tickValues(tickValues);
@ -77,22 +84,25 @@ c3_chart_internal_fn.updateXAxisTickValues = function (targets, axis) {
} }
return tickValues; return tickValues;
}; };
c3_chart_internal_fn.getYAxis = function (scale, orient, tickFormat, tickValues, withOuterTick) { _Axis.prototype.getYAxis = function getYAxis(scale, orient, tickFormat, tickValues, withOuterTick) {
var axisParams = {withOuterTick: withOuterTick}, var axisParams = {withOuterTick: withOuterTick},
axis = c3_axis(this.d3, axisParams).scale(scale).orient(orient).tickFormat(tickFormat); $$ = this.owner,
if (this.isTimeSeriesY()) { d3 = $$.d3,
axis.ticks(this.d3.time[this.config.axis_y_tick_time_value], this.config.axis_y_tick_time_interval); config = $$.config,
axis = c3_axis(d3, axisParams).scale(scale).orient(orient).tickFormat(tickFormat);
if ($$.isTimeSeriesY()) {
axis.ticks(d3.time[config.axis_y_tick_time_value], config.axis_y_tick_time_interval);
} else { } else {
axis.tickValues(tickValues); axis.tickValues(tickValues);
} }
return axis; return axis;
}; };
c3_chart_internal_fn.getAxisId = function (id) { _Axis.prototype.getId = function getId(id) {
var config = this.config; var config = this.owner.config;
return id in config.data_axes ? config.data_axes[id] : 'y'; return id in config.data_axes ? config.data_axes[id] : 'y';
}; };
c3_chart_internal_fn.getXAxisTickFormat = function () { _Axis.prototype.getXAxisTickFormat = function getXAxisTickFormat() {
var $$ = this, config = $$.config, var $$ = this.owner, config = $$.config,
format = $$.isTimeSeries() ? $$.defaultAxisTimeFormat : $$.isCategorized() ? $$.categoryName : function (v) { return v < 0 ? v.toFixed(0) : v; }; format = $$.isTimeSeries() ? $$.defaultAxisTimeFormat : $$.isCategorized() ? $$.categoryName : function (v) { return v < 0 ? v.toFixed(0) : v; };
if (config.axis_x_tick_format) { if (config.axis_x_tick_format) {
if (isFunction(config.axis_x_tick_format)) { if (isFunction(config.axis_x_tick_format)) {
@ -105,36 +115,18 @@ c3_chart_internal_fn.getXAxisTickFormat = function () {
} }
return isFunction(format) ? function (v) { return format.call($$, v); } : format; return isFunction(format) ? function (v) { return format.call($$, v); } : format;
}; };
c3_chart_internal_fn.getAxisTickValues = function (tickValues, axis) { _Axis.prototype.getXAxisTickValues = function getXAxisTickValues() {
return tickValues ? tickValues : axis ? axis.tickValues() : undefined; return _getTickValues(this.owner.config.axis_x_tick_values, this.owner.xAxis);
}; };
c3_chart_internal_fn.getXAxisTickValues = function () { _Axis.prototype.getYAxisTickValues = function getYAxisTickValues() {
return this.getAxisTickValues(this.config.axis_x_tick_values, this.xAxis); return _getTickValues(this.owner.config.axis_y_tick_values, this.owner.yAxis);
};
c3_chart_internal_fn.getYAxisTickValues = function () {
return this.getAxisTickValues(this.config.axis_y_tick_values, this.yAxis);
};
c3_chart_internal_fn.getY2AxisTickValues = function () {
return this.getAxisTickValues(this.config.axis_y2_tick_values, this.y2Axis);
};
c3_chart_internal_fn.getAxisLabelOptionByAxisId = function (axisId) {
var $$ = this, config = $$.config, option;
if (axisId === 'y') {
option = config.axis_y_label;
} else if (axisId === 'y2') {
option = config.axis_y2_label;
} else if (axisId === 'x') {
option = config.axis_x_label;
}
return option;
}; };
c3_chart_internal_fn.getAxisLabelText = function (axisId) { _Axis.prototype.getY2AxisTickValues = function getY2AxisTickValues() {
var option = this.getAxisLabelOptionByAxisId(axisId); return _getTickValues(this.owner.config.axis_y2_tick_values, this.owner.y2Axis);
return isString(option) ? option : option ? option.text : null;
}; };
c3_chart_internal_fn.setAxisLabelText = function (axisId, text) { _Axis.prototype.setLabelText = function setLabelText(axisId, text) {
var $$ = this, config = $$.config, var $$ = this, config = $$.config,
option = $$.getAxisLabelOptionByAxisId(axisId); option = _getLabelOptionByAxisId.call(this, axisId);
if (isString(option)) { if (isString(option)) {
if (axisId === 'y') { if (axisId === 'y') {
config.axis_y_label = text; config.axis_y_label = text;
@ -147,139 +139,18 @@ c3_chart_internal_fn.setAxisLabelText = function (axisId, text) {
option.text = text; option.text = text;
} }
}; };
c3_chart_internal_fn.getAxisLabelPosition = function (axisId, defaultPosition) { _Axis.prototype.getYAxisLabelPosition = function getYAxisLabelPosition() {
var option = this.getAxisLabelOptionByAxisId(axisId), return _getLabelPosition.call(this, 'y', this.owner.config.axis_rotated ? 'inner-right' : 'inner-top');
position = (option && typeof option === 'object' && option.position) ? option.position : defaultPosition;
return {
isInner: position.indexOf('inner') >= 0,
isOuter: position.indexOf('outer') >= 0,
isLeft: position.indexOf('left') >= 0,
isCenter: position.indexOf('center') >= 0,
isRight: position.indexOf('right') >= 0,
isTop: position.indexOf('top') >= 0,
isMiddle: position.indexOf('middle') >= 0,
isBottom: position.indexOf('bottom') >= 0
};
};
c3_chart_internal_fn.getXAxisLabelPosition = function () {
return this.getAxisLabelPosition('x', this.config.axis_rotated ? 'inner-top' : 'inner-right');
};
c3_chart_internal_fn.getYAxisLabelPosition = function () {
return this.getAxisLabelPosition('y', this.config.axis_rotated ? 'inner-right' : 'inner-top');
};
c3_chart_internal_fn.getY2AxisLabelPosition = function () {
return this.getAxisLabelPosition('y2', this.config.axis_rotated ? 'inner-right' : 'inner-top');
};
c3_chart_internal_fn.getAxisLabelPositionById = function (id) {
return id === 'y2' ? this.getY2AxisLabelPosition() : id === 'y' ? this.getYAxisLabelPosition() : this.getXAxisLabelPosition();
};
c3_chart_internal_fn.textForXAxisLabel = function () {
return this.getAxisLabelText('x');
};
c3_chart_internal_fn.textForYAxisLabel = function () {
return this.getAxisLabelText('y');
};
c3_chart_internal_fn.textForY2AxisLabel = function () {
return this.getAxisLabelText('y2');
};
c3_chart_internal_fn.xForAxisLabel = function (forHorizontal, position) {
var $$ = this;
if (forHorizontal) {
return position.isLeft ? 0 : position.isCenter ? $$.width / 2 : $$.width;
} else {
return position.isBottom ? -$$.height : position.isMiddle ? -$$.height / 2 : 0;
}
};
c3_chart_internal_fn.dxForAxisLabel = function (forHorizontal, position) {
if (forHorizontal) {
return position.isLeft ? "0.5em" : position.isRight ? "-0.5em" : "0";
} else {
return position.isTop ? "-0.5em" : position.isBottom ? "0.5em" : "0";
}
};
c3_chart_internal_fn.textAnchorForAxisLabel = function (forHorizontal, position) {
if (forHorizontal) {
return position.isLeft ? 'start' : position.isCenter ? 'middle' : 'end';
} else {
return position.isBottom ? 'start' : position.isMiddle ? 'middle' : 'end';
}
}; };
c3_chart_internal_fn.xForXAxisLabel = function () { _Axis.prototype.getY2AxisLabelPosition = function getY2AxisLabelPosition() {
return this.xForAxisLabel(!this.config.axis_rotated, this.getXAxisLabelPosition()); return _getLabelPosition.call(this, 'y2', this.owner.config.axis_rotated ? 'inner-right' : 'inner-top');
};
c3_chart_internal_fn.xForYAxisLabel = function () {
return this.xForAxisLabel(this.config.axis_rotated, this.getYAxisLabelPosition());
};
c3_chart_internal_fn.xForY2AxisLabel = function () {
return this.xForAxisLabel(this.config.axis_rotated, this.getY2AxisLabelPosition());
};
c3_chart_internal_fn.dxForXAxisLabel = function () {
return this.dxForAxisLabel(!this.config.axis_rotated, this.getXAxisLabelPosition());
};
c3_chart_internal_fn.dxForYAxisLabel = function () {
return this.dxForAxisLabel(this.config.axis_rotated, this.getYAxisLabelPosition());
};
c3_chart_internal_fn.dxForY2AxisLabel = function () {
return this.dxForAxisLabel(this.config.axis_rotated, this.getY2AxisLabelPosition());
};
c3_chart_internal_fn.dyForXAxisLabel = function () {
var $$ = this, config = $$.config,
position = $$.getXAxisLabelPosition();
if (config.axis_rotated) {
return position.isInner ? "1.2em" : -25 - $$.getMaxTickWidth('x');
} else {
return position.isInner ? "-0.5em" : config.axis_x_height ? config.axis_x_height - 10 : "3em";
}
}; };
c3_chart_internal_fn.dyForYAxisLabel = function () { _Axis.prototype.getLabelPositionById = function getLabelPositionById(id) {
var $$ = this, return id === 'y2' ? this.getY2AxisLabelPosition() : id === 'y' ? this.getYAxisLabelPosition() : _getXAxisLabelPosition.call(this);
position = $$.getYAxisLabelPosition();
if ($$.config.axis_rotated) {
return position.isInner ? "-0.5em" : "3em";
} else {
return position.isInner ? "1.2em" : -10 - ($$.config.axis_y_inner ? 0 : ($$.getMaxTickWidth('y') + 10));
}
};
c3_chart_internal_fn.dyForY2AxisLabel = function () {
var $$ = this,
position = $$.getY2AxisLabelPosition();
if ($$.config.axis_rotated) {
return position.isInner ? "1.2em" : "-2.2em";
} else {
return position.isInner ? "-0.5em" : 15 + ($$.config.axis_y2_inner ? 0 : (this.getMaxTickWidth('y2') + 15));
}
};
c3_chart_internal_fn.textAnchorForXAxisLabel = function () {
var $$ = this;
return $$.textAnchorForAxisLabel(!$$.config.axis_rotated, $$.getXAxisLabelPosition());
};
c3_chart_internal_fn.textAnchorForYAxisLabel = function () {
var $$ = this;
return $$.textAnchorForAxisLabel($$.config.axis_rotated, $$.getYAxisLabelPosition());
};
c3_chart_internal_fn.textAnchorForY2AxisLabel = function () {
var $$ = this;
return $$.textAnchorForAxisLabel($$.config.axis_rotated, $$.getY2AxisLabelPosition());
};
c3_chart_internal_fn.xForRotatedTickText = function (r) {
return 8 * Math.sin(Math.PI * (r / 180));
};
c3_chart_internal_fn.yForRotatedTickText = function (r) {
return 11.5 - 2.5 * (r / 15) * (r > 0 ? 1 : -1);
};
c3_chart_internal_fn.rotateTickText = function (axis, transition, rotate) {
axis.selectAll('.tick text')
.style("text-anchor", rotate > 0 ? "start" : "end");
transition.selectAll('.tick text')
.attr("y", this.yForRotatedTickText(rotate))
.attr("transform", "rotate(" + rotate + ")")
.selectAll('tspan')
.attr('dx', this.xForRotatedTickText(rotate));
}; };
c3_chart_internal_fn.getMaxTickWidth = function (id, withoutRecompute) { _Axis.prototype.getMaxTickWidth = function getMaxTickWidth(id, withoutRecompute) {
var $$ = this, config = $$.config, var $$ = this.owner, config = $$.config,
maxWidth = 0, targetsToShow, scale, axis, body, svg; maxWidth = 0, targetsToShow, scale, axis, body, svg;
if (withoutRecompute && $$.currentMaxTickWidths[id]) { if (withoutRecompute && $$.currentMaxTickWidths[id]) {
return $$.currentMaxTickWidths[id]; return $$.currentMaxTickWidths[id];
@ -288,16 +159,16 @@ c3_chart_internal_fn.getMaxTickWidth = function (id, withoutRecompute) {
targetsToShow = $$.filterTargetsToShow($$.data.targets); targetsToShow = $$.filterTargetsToShow($$.data.targets);
if (id === 'y') { if (id === 'y') {
scale = $$.y.copy().domain($$.getYDomain(targetsToShow, 'y')); scale = $$.y.copy().domain($$.getYDomain(targetsToShow, 'y'));
axis = $$.getYAxis(scale, $$.yOrient, config.axis_y_tick_format, $$.yAxisTickValues); axis = this.getYAxis(scale, $$.yOrient, config.axis_y_tick_format, $$.yAxisTickValues);
} else if (id === 'y2') { } else if (id === 'y2') {
scale = $$.y2.copy().domain($$.getYDomain(targetsToShow, 'y2')); scale = $$.y2.copy().domain($$.getYDomain(targetsToShow, 'y2'));
axis = $$.getYAxis(scale, $$.y2Orient, config.axis_y2_tick_format, $$.y2AxisTickValues); axis = this.getYAxis(scale, $$.y2Orient, config.axis_y2_tick_format, $$.y2AxisTickValues);
} else { } else {
scale = $$.x.copy().domain($$.getXDomain(targetsToShow)); scale = $$.x.copy().domain($$.getXDomain(targetsToShow));
axis = $$.getXAxis(scale, $$.xOrient, $$.xAxisTickFormat, $$.xAxisTickValues); axis = this.getXAxis(scale, $$.xOrient, $$.xAxisTickFormat, $$.xAxisTickValues);
$$.updateXAxisTickValues(targetsToShow, axis); this.updateXAxisTickValues(targetsToShow, axis);
} }
body = this.d3.select('body').classed('c3', true); body = $$.d3.select('body').classed('c3', true);
svg = body.append('svg').style('visibility', 'hidden'); svg = body.append('svg').style('visibility', 'hidden');
svg.append('g').call(axis).each(function () { svg.append('g').call(axis).each(function () {
$$.d3.select(this).selectAll('text tspan').each(function () { $$.d3.select(this).selectAll('text tspan').each(function () {
@ -315,29 +186,29 @@ c3_chart_internal_fn.getMaxTickWidth = function (id, withoutRecompute) {
return $$.currentMaxTickWidths[id]; return $$.currentMaxTickWidths[id];
}; };
c3_chart_internal_fn.updateAxisLabels = function (withTransition) { _Axis.prototype.updateLabels = function updateLabels(withTransition) {
var $$ = this; var $$ = this.owner;
var axisXLabel = $$.main.select('.' + CLASS.axisX + ' .' + CLASS.axisXLabel), var axisXLabel = $$.main.select('.' + CLASS.axisX + ' .' + CLASS.axisXLabel),
axisYLabel = $$.main.select('.' + CLASS.axisY + ' .' + CLASS.axisYLabel), axisYLabel = $$.main.select('.' + CLASS.axisY + ' .' + CLASS.axisYLabel),
axisY2Label = $$.main.select('.' + CLASS.axisY2 + ' .' + CLASS.axisY2Label); axisY2Label = $$.main.select('.' + CLASS.axisY2 + ' .' + CLASS.axisY2Label);
(withTransition ? axisXLabel.transition() : axisXLabel) (withTransition ? axisXLabel.transition() : axisXLabel)
.attr("x", $$.xForXAxisLabel.bind($$)) .attr("x", _xForXAxisLabel.bind(this))
.attr("dx", $$.dxForXAxisLabel.bind($$)) .attr("dx", _dxForXAxisLabel.bind(this))
.attr("dy", $$.dyForXAxisLabel.bind($$)) .attr("dy", _dyForXAxisLabel.bind(this))
.text($$.textForXAxisLabel.bind($$)); .text(_textForXAxisLabel.bind(this));
(withTransition ? axisYLabel.transition() : axisYLabel) (withTransition ? axisYLabel.transition() : axisYLabel)
.attr("x", $$.xForYAxisLabel.bind($$)) .attr("x", _xForYAxisLabel.bind(this))
.attr("dx", $$.dxForYAxisLabel.bind($$)) .attr("dx", _dxForYAxisLabel.bind(this))
.attr("dy", $$.dyForYAxisLabel.bind($$)) .attr("dy", _dyForYAxisLabel.bind(this))
.text($$.textForYAxisLabel.bind($$)); .text(_textForYAxisLabel.bind(this));
(withTransition ? axisY2Label.transition() : axisY2Label) (withTransition ? axisY2Label.transition() : axisY2Label)
.attr("x", $$.xForY2AxisLabel.bind($$)) .attr("x", _xForY2AxisLabel.bind(this))
.attr("dx", $$.dxForY2AxisLabel.bind($$)) .attr("dx", _dxForY2AxisLabel.bind(this))
.attr("dy", $$.dyForY2AxisLabel.bind($$)) .attr("dy", _dyForY2AxisLabel.bind(this))
.text($$.textForY2AxisLabel.bind($$)); .text(_textForY2AxisLabel.bind(this));
}; };
c3_chart_internal_fn.getAxisPadding = function (padding, key, defaultValue, domainLength) { _Axis.prototype.getPadding = function getPadding(padding, key, defaultValue, domainLength) {
if (!isValue(padding[key])) { if (!isValue(padding[key])) {
return defaultValue; return defaultValue;
} }
@ -347,12 +218,13 @@ c3_chart_internal_fn.getAxisPadding = function (padding, key, defaultValue, doma
// assume padding is pixels if unit is not specified // assume padding is pixels if unit is not specified
return this.convertPixelsToAxisPadding(padding[key], domainLength); return this.convertPixelsToAxisPadding(padding[key], domainLength);
}; };
c3_chart_internal_fn.convertPixelsToAxisPadding = function (pixels, domainLength) { _Axis.prototype.convertPixelsToAxisPadding = function convertPixelsToAxisPadding(pixels, domainLength) {
var length = this.config.axis_rotated ? this.width : this.height; var $$ = this.owner,
length = $$.config.axis_rotated ? $$.width : $$.height;
return domainLength * (pixels / length); return domainLength * (pixels / length);
}; };
c3_chart_internal_fn.generateTickValues = function (values, tickCount, forTimeSeries) { _Axis.prototype.generateTickValues = function generateTickValues(values, tickCount, forTimeSeries) {
var tickValues = values, targetCount, start, end, count, interval, i, tickValue; var tickValues = values, targetCount, start, end, count, interval, i, tickValue;
if (tickCount) { if (tickCount) {
targetCount = isFunction(tickCount) ? tickCount() : tickCount; targetCount = isFunction(tickCount) ? tickCount() : tickCount;
@ -378,8 +250,8 @@ c3_chart_internal_fn.generateTickValues = function (values, tickCount, forTimeSe
if (!forTimeSeries) { tickValues = tickValues.sort(function (a, b) { return a - b; }); } if (!forTimeSeries) { tickValues = tickValues.sort(function (a, b) { return a - b; }); }
return tickValues; return tickValues;
}; };
c3_chart_internal_fn.generateAxisTransitions = function (duration) { _Axis.prototype.generateTransitions = function generateTransitions(duration) {
var $$ = this, axes = $$.axes; var $$ = this.owner, axes = $$.axes;
return { return {
axisX: duration ? axes.x.transition().duration(duration) : axes.x, axisX: duration ? axes.x.transition().duration(duration) : axes.x,
axisY: duration ? axes.y.transition().duration(duration) : axes.y, axisY: duration ? axes.y.transition().duration(duration) : axes.y,
@ -387,8 +259,8 @@ c3_chart_internal_fn.generateAxisTransitions = function (duration) {
axisSubX: duration ? axes.subx.transition().duration(duration) : axes.subx axisSubX: duration ? axes.subx.transition().duration(duration) : axes.subx
}; };
}; };
c3_chart_internal_fn.redrawAxis = function (transitions, isHidden) { _Axis.prototype.redraw = function redraw(transitions, isHidden) {
var $$ = this, config = $$.config; var $$ = this.owner, config = $$.config;
$$.axes.x.style("opacity", isHidden ? 0 : 1); $$.axes.x.style("opacity", isHidden ? 0 : 1);
$$.axes.y.style("opacity", isHidden ? 0 : 1); $$.axes.y.style("opacity", isHidden ? 0 : 1);
$$.axes.y2.style("opacity", isHidden ? 0 : 1); $$.axes.y2.style("opacity", isHidden ? 0 : 1);
@ -399,7 +271,171 @@ c3_chart_internal_fn.redrawAxis = function (transitions, isHidden) {
transitions.axisSubX.call($$.subXAxis); transitions.axisSubX.call($$.subXAxis);
// rotate tick text if needed // rotate tick text if needed
if (!config.axis_rotated && config.axis_x_tick_rotate) { if (!config.axis_rotated && config.axis_x_tick_rotate) {
$$.rotateTickText($$.axes.x, transitions.axisX, config.axis_x_tick_rotate); _rotateTickText($$.axes.x, transitions.axisX, config.axis_x_tick_rotate);
$$.rotateTickText($$.axes.subx, transitions.axisSubX, config.axis_x_tick_rotate); _rotateTickText($$.axes.subx, transitions.axisSubX, config.axis_x_tick_rotate);
} }
}; };
function _getTickValues(tickValues, axis) {
return tickValues ? tickValues : axis ? axis.tickValues() : undefined;
}
function _getLabelOptionByAxisId(axisId) {
var $$ = this.owner, config = $$.config, option;
if (axisId === 'y') {
option = config.axis_y_label;
} else if (axisId === 'y2') {
option = config.axis_y2_label;
} else if (axisId === 'x') {
option = config.axis_x_label;
}
return option;
}
function _getLabelText(axisId) {
var option = _getLabelOptionByAxisId.call(this, axisId);
return isString(option) ? option : option ? option.text : null;
}
function _getLabelPosition(axisId, defaultPosition) {
var option = _getLabelOptionByAxisId.call(this, axisId),
position = (option && typeof option === 'object' && option.position) ? option.position : defaultPosition;
return {
isInner: position.indexOf('inner') >= 0,
isOuter: position.indexOf('outer') >= 0,
isLeft: position.indexOf('left') >= 0,
isCenter: position.indexOf('center') >= 0,
isRight: position.indexOf('right') >= 0,
isTop: position.indexOf('top') >= 0,
isMiddle: position.indexOf('middle') >= 0,
isBottom: position.indexOf('bottom') >= 0
};
}
function _getXAxisLabelPosition() {
return _getLabelPosition.call(this, 'x', this.owner.config.axis_rotated ? 'inner-top' : 'inner-right');
}
function _textForXAxisLabel() {
return _getLabelText.call(this, 'x');
}
function _textForYAxisLabel() {
return _getLabelText.call(this, 'y');
}
function _textForY2AxisLabel() {
return _getLabelText.call(this, 'y2');
}
function _xForAxisLabel(forHorizontal, position) {
var $$ = this.owner;
if (forHorizontal) {
return position.isLeft ? 0 : position.isCenter ? $$.width / 2 : $$.width;
} else {
return position.isBottom ? -$$.height : position.isMiddle ? -$$.height / 2 : 0;
}
}
function _dxForAxisLabel(forHorizontal, position) {
if (forHorizontal) {
return position.isLeft ? "0.5em" : position.isRight ? "-0.5em" : "0";
} else {
return position.isTop ? "-0.5em" : position.isBottom ? "0.5em" : "0";
}
}
function _textAnchorForAxisLabel(forHorizontal, position) {
if (forHorizontal) {
return position.isLeft ? 'start' : position.isCenter ? 'middle' : 'end';
} else {
return position.isBottom ? 'start' : position.isMiddle ? 'middle' : 'end';
}
}
function _xForXAxisLabel() {
return _xForAxisLabel.call(this, !this.owner.config.axis_rotated, _getXAxisLabelPosition.call(this));
}
function _xForYAxisLabel() {
return _xForAxisLabel.call(this, this.owner.config.axis_rotated, this.getYAxisLabelPosition());
}
function _xForY2AxisLabel() {
return _xForAxisLabel.call(this, this.owner.config.axis_rotated, this.getY2AxisLabelPosition());
}
function _dxForXAxisLabel() {
return _dxForAxisLabel(!this.owner.config.axis_rotated, _getXAxisLabelPosition.call(this));
}
function _dxForYAxisLabel() {
return _dxForAxisLabel(this.owner.config.axis_rotated, this.getYAxisLabelPosition());
}
function _dxForY2AxisLabel() {
return _dxForAxisLabel(this.owner.config.axis_rotated, this.getY2AxisLabelPosition());
}
function _dyForXAxisLabel() {
var $$ = this.owner, config = $$.config,
position = _getXAxisLabelPosition.call(this);
if (config.axis_rotated) {
return position.isInner ? "1.2em" : -25 - this.getMaxTickWidth('x');
} else {
return position.isInner ? "-0.5em" : config.axis_x_height ? config.axis_x_height - 10 : "3em";
}
}
function _dyForYAxisLabel() {
var $$ = this.owner,
position = this.getYAxisLabelPosition();
if ($$.config.axis_rotated) {
return position.isInner ? "-0.5em" : "3em";
} else {
return position.isInner ? "1.2em" : -10 - ($$.config.axis_y_inner ? 0 : (this.getMaxTickWidth('y') + 10));
}
}
function _dyForY2AxisLabel() {
var $$ = this.owner,
position = this.getY2AxisLabelPosition();
if ($$.config.axis_rotated) {
return position.isInner ? "1.2em" : "-2.2em";
} else {
return position.isInner ? "-0.5em" : 15 + ($$.config.axis_y2_inner ? 0 : (this.getMaxTickWidth('y2') + 15));
}
}
function _textAnchorForXAxisLabel() {
var $$ = this.owner;
return _textAnchorForAxisLabel(!$$.config.axis_rotated, _getXAxisLabelPosition.call(this));
}
function _textAnchorForYAxisLabel() {
var $$ = this.owner;
return _textAnchorForAxisLabel($$.config.axis_rotated, this.getYAxisLabelPosition());
}
function _textAnchorForY2AxisLabel() {
var $$ = this.owner;
return _textAnchorForAxisLabel($$.config.axis_rotated, this.getY2AxisLabelPosition());
}
function _xForRotatedTickText(r) {
return 8 * Math.sin(Math.PI * (r / 180));
}
function _yForRotatedTickText(r) {
return 11.5 - 2.5 * (r / 15) * (r > 0 ? 1 : -1);
}
function _rotateTickText(axis, transition, rotate) {
axis.selectAll('.tick text')
.style("text-anchor", rotate > 0 ? "start" : "end");
transition.selectAll('.tick text')
.attr("y", _yForRotatedTickText(rotate))
.attr("transform", "rotate(" + rotate + ")")
.selectAll('tspan')
.attr('dx', _xForRotatedTickText(rotate));
}

37
src/core.js

@ -2,6 +2,25 @@ var c3 = { version: "0.4.9" };
var c3_chart_fn, c3_chart_internal_fn; var c3_chart_fn, c3_chart_internal_fn;
function API(owner) {
this.owner = owner;
}
function inherit(base, derived) {
if (Object.create) {
derived.prototype = Object.create(base.prototype);
} else {
var f = function f() {};
f.prototype = base.prototype;
derived.prototype = new f();
}
derived.prototype.constructor = derived;
return derived;
}
function Chart(config) { function Chart(config) {
var $$ = this.internal = new ChartInternal(this); var $$ = this.internal = new ChartInternal(this);
$$.loadConfig(config); $$.loadConfig(config);
@ -149,6 +168,8 @@ c3_chart_internal_fn.initWithData = function (data) {
var $$ = this, d3 = $$.d3, config = $$.config; var $$ = this, d3 = $$.d3, config = $$.config;
var defs, main, binding = true; var defs, main, binding = true;
$$._axis = new _Axis($$);
if ($$.initPie) { $$.initPie(); } if ($$.initPie) { $$.initPie(); }
if ($$.initBrush) { $$.initBrush(); } if ($$.initBrush) { $$.initBrush(); }
if ($$.initZoom) { $$.initZoom(); } if ($$.initZoom) { $$.initZoom(); }
@ -266,7 +287,7 @@ c3_chart_internal_fn.initWithData = function (data) {
if (config.axis_x_extent) { $$.brush.extent($$.getDefaultExtent()); } if (config.axis_x_extent) { $$.brush.extent($$.getDefaultExtent()); }
// Add Axis // Add Axis
$$.initAxis(); $$._axis.init();
// Set targets // Set targets
$$.updateTargets($$.data.targets); $$.updateTargets($$.data.targets);
@ -456,7 +477,7 @@ c3_chart_internal_fn.redraw = function (options, transitions) {
durationForExit = withTransitionForExit ? duration : 0; durationForExit = withTransitionForExit ? duration : 0;
durationForAxis = withTransitionForAxis ? duration : 0; durationForAxis = withTransitionForAxis ? duration : 0;
transitions = transitions || $$.generateAxisTransitions(durationForAxis); transitions = transitions || $$._axis.generateTransitions(durationForAxis);
// update legend and transform each g // update legend and transform each g
if (withLegend && config.legend_show) { if (withLegend && config.legend_show) {
@ -475,7 +496,7 @@ c3_chart_internal_fn.redraw = function (options, transitions) {
if (targetsToShow.length) { if (targetsToShow.length) {
$$.updateXDomain(targetsToShow, withUpdateXDomain, withUpdateOrgXDomain, withTrimXDomain); $$.updateXDomain(targetsToShow, withUpdateXDomain, withUpdateOrgXDomain, withTrimXDomain);
if (!config.axis_x_tick_values) { if (!config.axis_x_tick_values) {
tickValues = $$.updateXAxisTickValues(targetsToShow); tickValues = $$._axis.updateXAxisTickValues(targetsToShow);
} }
} else { } else {
$$.xAxis.tickValues([]); $$.xAxis.tickValues([]);
@ -490,17 +511,17 @@ c3_chart_internal_fn.redraw = function (options, transitions) {
$$.y2.domain($$.getYDomain(targetsToShow, 'y2', xDomainForZoom)); $$.y2.domain($$.getYDomain(targetsToShow, 'y2', xDomainForZoom));
if (!config.axis_y_tick_values && config.axis_y_tick_count) { if (!config.axis_y_tick_values && config.axis_y_tick_count) {
$$.yAxis.tickValues($$.generateTickValues($$.y.domain(), config.axis_y_tick_count)); $$.yAxis.tickValues($$._axis.generateTickValues($$.y.domain(), config.axis_y_tick_count));
} }
if (!config.axis_y2_tick_values && config.axis_y2_tick_count) { if (!config.axis_y2_tick_values && config.axis_y2_tick_count) {
$$.y2Axis.tickValues($$.generateTickValues($$.y2.domain(), config.axis_y2_tick_count)); $$.y2Axis.tickValues($$._axis.generateTickValues($$.y2.domain(), config.axis_y2_tick_count));
} }
// axes // axes
$$.redrawAxis(transitions, hideAxis); $$._axis.redraw(transitions, hideAxis);
// Update axis label // Update axis label
$$.updateAxisLabels(withTransition); $$._axis.updateLabels(withTransition);
// show/hide if manual culling needed // show/hide if manual culling needed
if ((withUpdateXDomain || withUpdateXAxis) && targetsToShow.length) { if ((withUpdateXDomain || withUpdateXAxis) && targetsToShow.length) {
@ -678,7 +699,7 @@ c3_chart_internal_fn.updateAndRedraw = function (options) {
$$.updateSizes(); $$.updateSizes();
// MEMO: called in updateLegend in redraw if withLegend // MEMO: called in updateLegend in redraw if withLegend
if (!(options.withLegend && config.legend_show)) { if (!(options.withLegend && config.legend_show)) {
transitions = $$.generateAxisTransitions(options.withTransitionForAxis ? config.transition_duration : 0); transitions = $$._axis.generateTransitions(options.withTransitionForAxis ? config.transition_duration : 0);
// Update scales // Update scales
$$.updateScales(); $$.updateScales();
$$.updateSvgSize(); $$.updateSvgSize();

18
src/domain.js

@ -20,7 +20,7 @@ c3_chart_internal_fn.getYDomainMin = function (targets) {
id = idsInGroup[k]; id = idsInGroup[k];
if (! ys[id]) { continue; } if (! ys[id]) { continue; }
ys[id].forEach(function (v, i) { ys[id].forEach(function (v, i) {
if ($$.getAxisId(id) === $$.getAxisId(baseId) && ys[baseId] && !(hasNegativeValue && +v > 0)) { if ($$._axis.getId(id) === $$._axis.getId(baseId) && ys[baseId] && !(hasNegativeValue && +v > 0)) {
ys[baseId][i] += +v; ys[baseId][i] += +v;
} }
}); });
@ -51,7 +51,7 @@ c3_chart_internal_fn.getYDomainMax = function (targets) {
id = idsInGroup[k]; id = idsInGroup[k];
if (! ys[id]) { continue; } if (! ys[id]) { continue; }
ys[id].forEach(function (v, i) { ys[id].forEach(function (v, i) {
if ($$.getAxisId(id) === $$.getAxisId(baseId) && ys[baseId] && !(hasPositiveValue && +v < 0)) { if ($$._axis.getId(id) === $$._axis.getId(baseId) && ys[baseId] && !(hasPositiveValue && +v < 0)) {
ys[baseId][i] += +v; ys[baseId][i] += +v;
} }
}); });
@ -62,7 +62,7 @@ c3_chart_internal_fn.getYDomainMax = function (targets) {
}; };
c3_chart_internal_fn.getYDomain = function (targets, axisId, xDomain) { c3_chart_internal_fn.getYDomain = function (targets, axisId, xDomain) {
var $$ = this, config = $$.config, var $$ = this, config = $$.config,
targetsByAxisId = targets.filter(function (t) { return $$.getAxisId(t.id) === axisId; }), targetsByAxisId = targets.filter(function (t) { return $$._axis.getId(t.id) === axisId; }),
yTargets = xDomain ? $$.filterByXDomain(targetsByAxisId, xDomain) : targetsByAxisId, yTargets = xDomain ? $$.filterByXDomain(targetsByAxisId, xDomain) : targetsByAxisId,
yMin = axisId === 'y2' ? config.axis_y2_min : config.axis_y_min, yMin = axisId === 'y2' ? config.axis_y2_min : config.axis_y_min,
yMax = axisId === 'y2' ? config.axis_y2_max : config.axis_y_max, yMax = axisId === 'y2' ? config.axis_y2_max : config.axis_y_max,
@ -123,16 +123,16 @@ c3_chart_internal_fn.getYDomain = function (targets, axisId, xDomain) {
padding_bottom += domainLength * (ratio[0] / (1 - ratio[0] - ratio[1])); padding_bottom += domainLength * (ratio[0] / (1 - ratio[0] - ratio[1]));
} else if (showVerticalDataLabel) { } else if (showVerticalDataLabel) {
lengths = $$.getDataLabelLength(yDomainMin, yDomainMax, 'height'); lengths = $$.getDataLabelLength(yDomainMin, yDomainMax, 'height');
padding_top += this.convertPixelsToAxisPadding(lengths[1], domainLength); padding_top += this._axis.convertPixelsToAxisPadding(lengths[1], domainLength);
padding_bottom += this.convertPixelsToAxisPadding(lengths[0], domainLength); padding_bottom += this._axis.convertPixelsToAxisPadding(lengths[0], domainLength);
} }
if (axisId === 'y' && notEmpty(config.axis_y_padding)) { if (axisId === 'y' && notEmpty(config.axis_y_padding)) {
padding_top = $$.getAxisPadding(config.axis_y_padding, 'top', padding_top, domainLength); padding_top = $$._axis.getPadding(config.axis_y_padding, 'top', padding_top, domainLength);
padding_bottom = $$.getAxisPadding(config.axis_y_padding, 'bottom', padding_bottom, domainLength); padding_bottom = $$._axis.getPadding(config.axis_y_padding, 'bottom', padding_bottom, domainLength);
} }
if (axisId === 'y2' && notEmpty(config.axis_y2_padding)) { if (axisId === 'y2' && notEmpty(config.axis_y2_padding)) {
padding_top = $$.getAxisPadding(config.axis_y2_padding, 'top', padding_top, domainLength); padding_top = $$._axis.getPadding(config.axis_y2_padding, 'top', padding_top, domainLength);
padding_bottom = $$.getAxisPadding(config.axis_y2_padding, 'bottom', padding_bottom, domainLength); padding_bottom = $$._axis.getPadding(config.axis_y2_padding, 'bottom', padding_bottom, domainLength);
} }
// Bar/Area chart should be 0-based if all positive|negative // Bar/Area chart should be 0-based if all positive|negative
if (isZeroBased) { if (isZeroBased) {

2
src/format.js

@ -3,7 +3,7 @@ c3_chart_internal_fn.getYFormat = function (forArc) {
formatForY = forArc && !$$.hasType('gauge') ? $$.defaultArcValueFormat : $$.yFormat, formatForY = forArc && !$$.hasType('gauge') ? $$.defaultArcValueFormat : $$.yFormat,
formatForY2 = forArc && !$$.hasType('gauge') ? $$.defaultArcValueFormat : $$.y2Format; formatForY2 = forArc && !$$.hasType('gauge') ? $$.defaultArcValueFormat : $$.y2Format;
return function (v, ratio, id) { return function (v, ratio, id) {
var format = $$.getAxisId(id) === 'y2' ? formatForY2 : formatForY; var format = $$._axis.getId(id) === 'y2' ? formatForY2 : formatForY;
return format.call($$, v, ratio); return format.call($$, v, ratio);
}; };
}; };

20
src/scale.js

@ -44,10 +44,10 @@ c3_chart_internal_fn.getY = function (min, max, domain) {
return scale; return scale;
}; };
c3_chart_internal_fn.getYScale = function (id) { c3_chart_internal_fn.getYScale = function (id) {
return this.getAxisId(id) === 'y2' ? this.y2 : this.y; return this._axis.getId(id) === 'y2' ? this.y2 : this.y;
}; };
c3_chart_internal_fn.getSubYScale = function (id) { c3_chart_internal_fn.getSubYScale = function (id) {
return this.getAxisId(id) === 'y2' ? this.subY2 : this.subY; return this._axis.getId(id) === 'y2' ? this.subY2 : this.subY;
}; };
c3_chart_internal_fn.updateScales = function () { c3_chart_internal_fn.updateScales = function () {
var $$ = this, config = $$.config, var $$ = this, config = $$.config,
@ -69,15 +69,15 @@ c3_chart_internal_fn.updateScales = function () {
$$.subY = $$.getY($$.subYMin, $$.subYMax, forInit ? config.axis_y_default : $$.subY.domain()); $$.subY = $$.getY($$.subYMin, $$.subYMax, forInit ? config.axis_y_default : $$.subY.domain());
$$.subY2 = $$.getY($$.subYMin, $$.subYMax, forInit ? config.axis_y2_default : $$.subY2.domain()); $$.subY2 = $$.getY($$.subYMin, $$.subYMax, forInit ? config.axis_y2_default : $$.subY2.domain());
// update axes // update axes
$$.xAxisTickFormat = $$.getXAxisTickFormat(); $$.xAxisTickFormat = $$._axis.getXAxisTickFormat();
$$.xAxisTickValues = $$.getXAxisTickValues(); $$.xAxisTickValues = $$._axis.getXAxisTickValues();
$$.yAxisTickValues = $$.getYAxisTickValues(); $$.yAxisTickValues = $$._axis.getYAxisTickValues();
$$.y2AxisTickValues = $$.getY2AxisTickValues(); $$.y2AxisTickValues = $$._axis.getY2AxisTickValues();
$$.xAxis = $$.getXAxis($$.x, $$.xOrient, $$.xAxisTickFormat, $$.xAxisTickValues, config.axis_x_tick_outer); $$.xAxis = $$._axis.getXAxis($$.x, $$.xOrient, $$.xAxisTickFormat, $$.xAxisTickValues, config.axis_x_tick_outer);
$$.subXAxis = $$.getXAxis($$.subX, $$.subXOrient, $$.xAxisTickFormat, $$.xAxisTickValues, config.axis_x_tick_outer); $$.subXAxis = $$._axis.getXAxis($$.subX, $$.subXOrient, $$.xAxisTickFormat, $$.xAxisTickValues, config.axis_x_tick_outer);
$$.yAxis = $$.getYAxis($$.y, $$.yOrient, config.axis_y_tick_format, $$.yAxisTickValues, config.axis_y_tick_outer); $$.yAxis = $$._axis.getYAxis($$.y, $$.yOrient, config.axis_y_tick_format, $$.yAxisTickValues, config.axis_y_tick_outer);
$$.y2Axis = $$.getYAxis($$.y2, $$.y2Orient, config.axis_y2_tick_format, $$.y2AxisTickValues, config.axis_y2_tick_outer); $$.y2Axis = $$._axis.getYAxis($$.y2, $$.y2Orient, config.axis_y2_tick_format, $$.y2AxisTickValues, config.axis_y2_tick_outer);
// Set initialized scales to brush and zoom // Set initialized scales to brush and zoom
if (!forInit) { if (!forInit) {

12
src/size.js

@ -22,7 +22,7 @@ c3_chart_internal_fn.getCurrentPaddingLeft = function (withoutRecompute) {
} else if (config.axis_rotated) { } else if (config.axis_rotated) {
return !config.axis_x_show ? 1 : Math.max(ceil10($$.getAxisWidthByAxisId('x', withoutRecompute)), 40); return !config.axis_x_show ? 1 : Math.max(ceil10($$.getAxisWidthByAxisId('x', withoutRecompute)), 40);
} else if (!config.axis_y_show || config.axis_y_inner) { // && !config.axis_rotated } else if (!config.axis_y_show || config.axis_y_inner) { // && !config.axis_rotated
return $$.getYAxisLabelPosition().isOuter ? 30 : 1; return $$._axis.getYAxisLabelPosition().isOuter ? 30 : 1;
} else { } else {
return ceil10($$.getAxisWidthByAxisId('y', withoutRecompute)); return ceil10($$.getAxisWidthByAxisId('y', withoutRecompute));
} }
@ -35,7 +35,7 @@ c3_chart_internal_fn.getCurrentPaddingRight = function () {
} else if (config.axis_rotated) { } else if (config.axis_rotated) {
return defaultPadding + legendWidthOnRight; return defaultPadding + legendWidthOnRight;
} else if (!config.axis_y2_show || config.axis_y2_inner) { // && !config.axis_rotated } else if (!config.axis_y2_show || config.axis_y2_inner) { // && !config.axis_rotated
return 2 + legendWidthOnRight + ($$.getY2AxisLabelPosition().isOuter ? 20 : 0); return 2 + legendWidthOnRight + ($$._axis.getY2AxisLabelPosition().isOuter ? 20 : 0);
} else { } else {
return ceil10($$.getAxisWidthByAxisId('y2')) + legendWidthOnRight; return ceil10($$.getAxisWidthByAxisId('y2')) + legendWidthOnRight;
} }
@ -75,8 +75,8 @@ c3_chart_internal_fn.getSvgLeft = function (withoutRecompute) {
c3_chart_internal_fn.getAxisWidthByAxisId = function (id, withoutRecompute) { c3_chart_internal_fn.getAxisWidthByAxisId = function (id, withoutRecompute) {
var $$ = this, position = $$.getAxisLabelPositionById(id); var $$ = this, position = $$._axis.getLabelPositionById(id);
return $$.getMaxTickWidth(id, withoutRecompute) + (position.isInner ? 20 : 40); return $$._axis.getMaxTickWidth(id, withoutRecompute) + (position.isInner ? 20 : 40);
}; };
c3_chart_internal_fn.getHorizontalAxisHeight = function (axisId) { c3_chart_internal_fn.getHorizontalAxisHeight = function (axisId) {
var $$ = this, config = $$.config, h = 30; var $$ = this, config = $$.config, h = 30;
@ -86,9 +86,9 @@ c3_chart_internal_fn.getHorizontalAxisHeight = function (axisId) {
if (axisId === 'y2' && !config.axis_y2_show) { return $$.rotated_padding_top; } if (axisId === 'y2' && !config.axis_y2_show) { return $$.rotated_padding_top; }
// Calculate x axis height when tick rotated // Calculate x axis height when tick rotated
if (axisId === 'x' && !config.axis_rotated && config.axis_x_tick_rotate) { if (axisId === 'x' && !config.axis_rotated && config.axis_x_tick_rotate) {
h = $$.getMaxTickWidth(axisId) * Math.cos(Math.PI * (90 - config.axis_x_tick_rotate) / 180); h = $$._axis.getMaxTickWidth(axisId) * Math.cos(Math.PI * (90 - config.axis_x_tick_rotate) / 180);
} }
return h + ($$.getAxisLabelPositionById(axisId).isInner ? 0 : 10) + (axisId === 'y2' ? -10 : 0); return h + ($$._axis.getLabelPositionById(axisId).isInner ? 0 : 10) + (axisId === 'y2' ? -10 : 0);
}; };
c3_chart_internal_fn.getEventRectWidth = function () { c3_chart_internal_fn.getEventRectWidth = function () {

4
src/tooltip.js

@ -18,7 +18,7 @@ c3_chart_internal_fn.initTooltip = function () {
} }
$$.tooltip.html(config.tooltip_contents.call($$, $$.data.targets.map(function (d) { $$.tooltip.html(config.tooltip_contents.call($$, $$.data.targets.map(function (d) {
return $$.addName(d.values[config.tooltip_init_x]); return $$.addName(d.values[config.tooltip_init_x]);
}), $$.getXAxisTickFormat(), $$.getYFormat($$.hasArcType()), $$.color)); }), $$._axis.getXAxisTickFormat(), $$.getYFormat($$.hasArcType()), $$.color));
$$.tooltip.style("top", config.tooltip_init_position.top) $$.tooltip.style("top", config.tooltip_init_position.top)
.style("left", config.tooltip_init_position.left) .style("left", config.tooltip_init_position.left)
.style("display", "block"); .style("display", "block");
@ -95,7 +95,7 @@ c3_chart_internal_fn.showTooltip = function (selectedData, element) {
if (dataToShow.length === 0 || !config.tooltip_show) { if (dataToShow.length === 0 || !config.tooltip_show) {
return; return;
} }
$$.tooltip.html(config.tooltip_contents.call($$, selectedData, $$.getXAxisTickFormat(), $$.getYFormat(forArc), $$.color)).style("display", "block"); $$.tooltip.html(config.tooltip_contents.call($$, selectedData, $$._axis.getXAxisTickFormat(), $$.getYFormat(forArc), $$.color)).style("display", "block");
// Get tooltip dimensions // Get tooltip dimensions
tWidth = $$.tooltip.property('offsetWidth'); tWidth = $$.tooltip.property('offsetWidth');

Loading…
Cancel
Save