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

Add axis.x.inner (#2299) 

* Add axis.x.inner #794

* Fix axis.x.inner when category axis
pull/2188/merge
Masayuki Tanaka 7 years ago committed by Yoshiya Hinosawa
parent
76582fbe0c
commit
8ed856044f
6 changed files with 40 additions and 51 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. 62
      c3.js
  2. 2
      c3.min.js
  3. 22
      src/axis.js
  4. 1
      src/config.js
  5. 2
      src/core.js
  6. 2
      src/size.js

62
c3.js
Unescape View File

@ -90,32 +90,12 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
}; };
var classCallCheck = function (instance, Constructor) { var classCallCheck = function (instance, Constructor) {
if (!(instance instanceof Constructor)) { if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function"); throw new TypeError("Cannot call a class as a function");
} }
}; };
var inherits = function (subClass, superClass) { var inherits = function (subClass, superClass) {
if (typeof superClass !== "function" && superClass !== null) { if (typeof superClass !== "function" && superClass !== null) {
throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
@ -132,16 +112,6 @@ var inherits = function (subClass, superClass) {
if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
}; };
var possibleConstructorReturn = function (self, call) { var possibleConstructorReturn = function (self, call) {
if (!self) { if (!self) {
throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
@ -481,9 +451,21 @@ c3_axis_internal_fn.generateAxis = function () {
{ {
// TODO: rotated tick text // TODO: rotated tick text
tickTransform = internal.axisX; tickTransform = internal.axisX;
lineUpdate.attr("x2", 0).attr("y2", -internal.innerTickSize); lineUpdate.attr("x1", tickX).attr("x2", tickX).attr("y2", function (d, i) {
textUpdate.attr("x", 0).attr("y", -internal.tickLength).style("text-anchor", "middle"); return -1 * internal.lineY2(d, i);
tspanUpdate.attr('x', 0).attr("dy", "0em"); });
textUpdate.attr("x", 0).attr("y", function (d, i) {
return -1 * internal.textY(d, i) - (params.isCategory ? 2 : internal.tickLength - 2);
}).attr("transform", function (d, i) {
return internal.textTransform(d, i);
}).style("text-anchor", function (d, i) {
return internal.textTextAnchor(d, i);
});
tspanUpdate.attr('x', 0).attr("dy", function (d, i) {
return internal.tspanDy(d, i);
}).attr('dx', function (d, i) {
return internal.tspanDx(d, i);
});
pathUpdate.attr("d", "M" + internal.range[0] + "," + -internal.outerTickSize + "V0H" + internal.range[1] + "V" + -internal.outerTickSize); pathUpdate.attr("d", "M" + internal.range[0] + "," + -internal.outerTickSize + "V0H" + internal.range[1] + "V" + -internal.outerTickSize);
break; break;
} }
@ -501,8 +483,8 @@ c3_axis_internal_fn.generateAxis = function () {
case "right": case "right":
{ {
tickTransform = internal.axisY; tickTransform = internal.axisY;
lineUpdate.attr("x2", internal.innerTickSize).attr("y2", 0); lineUpdate.attr("x2", internal.innerTickSize).attr("y1", tickY).attr("y2", tickY);
textUpdate.attr("x", internal.tickLength).attr("y", 0).style("text-anchor", "start"); textUpdate.attr("x", internal.tickLength).attr("y", internal.tickOffset).style("text-anchor", "start");
tspanUpdate.attr('x', internal.tickLength).attr("dy", function (d, i) { tspanUpdate.attr('x', internal.tickLength).attr("dy", function (d, i) {
return internal.tspanDy(d, i); return internal.tspanDy(d, i);
}); });
@ -625,7 +607,7 @@ c3_axis_fn.init = function init() {
var $$ = this.owner, var $$ = this.owner,
config = $$.config, config = $$.config,
main = $$.main; main = $$.main;
$$.axes.x = main.append("g").attr("class", CLASS.axis + ' ' + CLASS.axisX).attr("clip-path", $$.clipPathForXAxis).attr("transform", $$.getTranslate('x')).style("visibility", config.axis_x_show ? 'visible' : 'hidden'); $$.axes.x = main.append("g").attr("class", CLASS.axis + ' ' + CLASS.axisX).attr("clip-path", config.axis_x_inner ? "" : $$.clipPathForXAxis).attr("transform", $$.getTranslate('x')).style("visibility", config.axis_x_show ? 'visible' : 'hidden');
$$.axes.x.append("text").attr("class", CLASS.axisXLabel).attr("transform", config.axis_rotated ? "rotate(-90)" : "").style("text-anchor", this.textAnchorForXAxisLabel.bind(this)); $$.axes.x.append("text").attr("class", CLASS.axisXLabel).attr("transform", config.axis_rotated ? "rotate(-90)" : "").style("text-anchor", this.textAnchorForXAxisLabel.bind(this));
$$.axes.y = main.append("g").attr("class", CLASS.axis + ' ' + CLASS.axisY).attr("clip-path", config.axis_y_inner ? "" : $$.clipPathForYAxis).attr("transform", $$.getTranslate('y')).style("visibility", config.axis_y_show ? 'visible' : 'hidden'); $$.axes.y = main.append("g").attr("class", CLASS.axis + ' ' + CLASS.axisY).attr("clip-path", config.axis_y_inner ? "" : $$.clipPathForYAxis).attr("transform", $$.getTranslate('y')).style("visibility", config.axis_y_show ? 'visible' : 'hidden');
$$.axes.y.append("text").attr("class", CLASS.axisYLabel).attr("transform", config.axis_rotated ? "" : "rotate(-90)").style("text-anchor", this.textAnchorForYAxisLabel.bind(this)); $$.axes.y.append("text").attr("class", CLASS.axisYLabel).attr("transform", config.axis_rotated ? "" : "rotate(-90)").style("text-anchor", this.textAnchorForYAxisLabel.bind(this));
@ -844,7 +826,7 @@ c3_axis_fn.dyForXAxisLabel = function dyForXAxisLabel() {
config = $$.config, config = $$.config,
position = this.getXAxisLabelPosition(); position = this.getXAxisLabelPosition();
if (config.axis_rotated) { if (config.axis_rotated) {
return position.isInner ? "1.2em" : -25 - this.getMaxTickWidth('x'); return position.isInner ? "1.2em" : -25 - ($$.config.axis_x_inner ? 0 : this.getMaxTickWidth('x'));
} else { } else {
return position.isInner ? "-0.5em" : config.axis_x_height ? config.axis_x_height - 10 : "3em"; return position.isInner ? "-0.5em" : config.axis_x_height ? config.axis_x_height - 10 : "3em";
} }
@ -1122,7 +1104,7 @@ c3_chart_internal_fn.initParams = function () {
$$.focusedTargetIds = []; $$.focusedTargetIds = [];
$$.defocusedTargetIds = []; $$.defocusedTargetIds = [];
$$.xOrient = config.axis_rotated ? "left" : "bottom"; $$.xOrient = config.axis_rotated ? config.axis_x_inner ? "right" : "left" : config.axis_x_inner ? "top" : "bottom";
$$.yOrient = config.axis_rotated ? config.axis_y_inner ? "top" : "bottom" : config.axis_y_inner ? "right" : "left"; $$.yOrient = config.axis_rotated ? config.axis_y_inner ? "top" : "bottom" : config.axis_y_inner ? "right" : "left";
$$.y2Orient = config.axis_rotated ? config.axis_y2_inner ? "bottom" : "top" : config.axis_y2_inner ? "left" : "right"; $$.y2Orient = config.axis_rotated ? config.axis_y2_inner ? "bottom" : "top" : config.axis_y2_inner ? "left" : "right";
$$.subXOrient = config.axis_rotated ? "left" : "bottom"; $$.subXOrient = config.axis_rotated ? "left" : "bottom";
@ -2162,6 +2144,7 @@ if (!Function.prototype.bind) {
// changes which were implemented in Firefox 43 and Chrome 46. // changes which were implemented in Firefox 43 and Chrome 46.
(function () { (function () {
if (!("SVGPathSeg" in window)) { if (!("SVGPathSeg" in window)) {
// Spec: http://www.w3.org/TR/SVG11/single-page.html#paths-InterfaceSVGPathSeg // Spec: http://www.w3.org/TR/SVG11/single-page.html#paths-InterfaceSVGPathSeg
window.SVGPathSeg = function (type, typeAsLetter, owningPathSegList) { window.SVGPathSeg = function (type, typeAsLetter, owningPathSegList) {
@ -5202,6 +5185,7 @@ c3_chart_internal_fn.getDefaultConfig = function () {
axis_x_height: undefined, axis_x_height: undefined,
axis_x_extent: undefined, axis_x_extent: undefined,
axis_x_label: {}, axis_x_label: {},
axis_x_inner: undefined,
axis_y_show: true, axis_y_show: true,
axis_y_type: undefined, axis_y_type: undefined,
axis_y_max: undefined, axis_y_max: undefined,
@ -8498,7 +8482,7 @@ c3_chart_internal_fn.getCurrentPaddingLeft = function (withoutRecompute) {
if (isValue(config.padding_left)) { if (isValue(config.padding_left)) {
return config.padding_left; return config.padding_left;
} 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 || config.axis_x_inner ? 1 : Math.max(ceil10($$.getAxisWidthByAxisId('x', withoutRecompute)), 40);
} else if (!config.axis_y_show || config.axis_y_inner) { } else if (!config.axis_y_show || config.axis_y_inner) {
// && !config.axis_rotated // && !config.axis_rotated
return $$.axis.getYAxisLabelPosition().isOuter ? 30 : 1; return $$.axis.getYAxisLabelPosition().isOuter ? 30 : 1;

2
c3.min.js vendored
View File

File diff suppressed because one or more lines are too long

22
src/axis.js
Unescape View File

@ -255,13 +255,16 @@ c3_axis_internal_fn.generateAxis = function () {
{ {
// TODO: rotated tick text // TODO: rotated tick text
tickTransform = internal.axisX; tickTransform = internal.axisX;
lineUpdate.attr("x2", 0) lineUpdate.attr("x1", tickX)
.attr("y2", -internal.innerTickSize); .attr("x2", tickX)
.attr("y2", function (d, i) { return -1 * internal.lineY2(d, i); });
textUpdate.attr("x", 0) textUpdate.attr("x", 0)
.attr("y", -internal.tickLength) .attr("y", function (d, i) { return -1 * internal.textY(d, i) - (params.isCategory ? 2 : (internal.tickLength - 2)); })
.style("text-anchor", "middle"); .attr("transform", function (d, i) { return internal.textTransform(d, i); })
.style("text-anchor", function (d, i) { return internal.textTextAnchor(d, i); });
tspanUpdate.attr('x', 0) tspanUpdate.attr('x', 0)
.attr("dy", "0em"); .attr("dy", function (d, i) { return internal.tspanDy(d, i); })
.attr('dx', function (d, i) { return internal.tspanDx(d, i); });
pathUpdate.attr("d", "M" + internal.range[0] + "," + -internal.outerTickSize + "V0H" + internal.range[1] + "V" + -internal.outerTickSize); pathUpdate.attr("d", "M" + internal.range[0] + "," + -internal.outerTickSize + "V0H" + internal.range[1] + "V" + -internal.outerTickSize);
break; break;
} }
@ -283,9 +286,10 @@ c3_axis_internal_fn.generateAxis = function () {
{ {
tickTransform = internal.axisY; tickTransform = internal.axisY;
lineUpdate.attr("x2", internal.innerTickSize) lineUpdate.attr("x2", internal.innerTickSize)
.attr("y2", 0); .attr("y1", tickY)
.attr("y2", tickY);
textUpdate.attr("x", internal.tickLength) textUpdate.attr("x", internal.tickLength)
.attr("y", 0) .attr("y", internal.tickOffset)
.style("text-anchor", "start"); .style("text-anchor", "start");
tspanUpdate.attr('x', internal.tickLength) tspanUpdate.attr('x', internal.tickLength)
.attr("dy", function (d, i) { return internal.tspanDy(d, i); }); .attr("dy", function (d, i) { return internal.tspanDy(d, i); });
@ -385,7 +389,7 @@ c3_axis_fn.init = function init() {
var $$ = this.owner, config = $$.config, main = $$.main; 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", config.axis_x_inner ? "" : $$.clipPathForXAxis)
.attr("transform", $$.getTranslate('x')) .attr("transform", $$.getTranslate('x'))
.style("visibility", config.axis_x_show ? 'visible' : 'hidden'); .style("visibility", config.axis_x_show ? 'visible' : 'hidden');
$$.axes.x.append("text") $$.axes.x.append("text")
@ -606,7 +610,7 @@ c3_axis_fn.dyForXAxisLabel = function dyForXAxisLabel() {
var $$ = this.owner, config = $$.config, var $$ = this.owner, config = $$.config,
position = this.getXAxisLabelPosition(); position = this.getXAxisLabelPosition();
if (config.axis_rotated) { if (config.axis_rotated) {
return position.isInner ? "1.2em" : -25 - this.getMaxTickWidth('x'); return position.isInner ? "1.2em" : -25 - ($$.config.axis_x_inner ? 0 : this.getMaxTickWidth('x'));
} else { } else {
return position.isInner ? "-0.5em" : config.axis_x_height ? config.axis_x_height - 10 : "3em"; return position.isInner ? "-0.5em" : config.axis_x_height ? config.axis_x_height - 10 : "3em";
} }

1
src/config.js
Unescape View File

@ -114,6 +114,7 @@ c3_chart_internal_fn.getDefaultConfig = function () {
axis_x_height: undefined, axis_x_height: undefined,
axis_x_extent: undefined, axis_x_extent: undefined,
axis_x_label: {}, axis_x_label: {},
axis_x_inner: undefined,
axis_y_show: true, axis_y_show: true,
axis_y_type: undefined, axis_y_type: undefined,
axis_y_max: undefined, axis_y_max: undefined,

2
src/core.js
Unescape View File

@ -125,7 +125,7 @@ c3_chart_internal_fn.initParams = function () {
$$.focusedTargetIds = []; $$.focusedTargetIds = [];
$$.defocusedTargetIds = []; $$.defocusedTargetIds = [];
$$.xOrient = config.axis_rotated ? "left" : "bottom"; $$.xOrient = config.axis_rotated ? (config.axis_x_inner ? "right" : "left") : (config.axis_x_inner ? "top" : "bottom");
$$.yOrient = config.axis_rotated ? (config.axis_y_inner ? "top" : "bottom") : (config.axis_y_inner ? "right" : "left"); $$.yOrient = config.axis_rotated ? (config.axis_y_inner ? "top" : "bottom") : (config.axis_y_inner ? "right" : "left");
$$.y2Orient = config.axis_rotated ? (config.axis_y2_inner ? "bottom" : "top") : (config.axis_y2_inner ? "left" : "right"); $$.y2Orient = config.axis_rotated ? (config.axis_y2_inner ? "bottom" : "top") : (config.axis_y2_inner ? "left" : "right");
$$.subXOrient = config.axis_rotated ? "left" : "bottom"; $$.subXOrient = config.axis_rotated ? "left" : "bottom";

2
src/size.js
Unescape View File

@ -29,7 +29,7 @@ c3_chart_internal_fn.getCurrentPaddingLeft = function (withoutRecompute) {
if (isValue(config.padding_left)) { if (isValue(config.padding_left)) {
return config.padding_left; return config.padding_left;
} 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 || config.axis_x_inner) ? 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 $$.axis.getYAxisLabelPosition().isOuter ? 30 : 1; return $$.axis.getYAxisLabelPosition().isOuter ? 30 : 1;
} else { } else {

Write Preview
Loading…
Cancel
Save