|
|
|
|
@ -4,11 +4,10 @@ function API(owner) {
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function inherit(base, derived) { |
|
|
|
|
|
|
|
|
|
if (Object.create) { |
|
|
|
|
derived.prototype = Object.create(base.prototype); |
|
|
|
|
} else { |
|
|
|
|
var f = function f() {}; |
|
|
|
|
const f = function f() {}; |
|
|
|
|
f.prototype = base.prototype; |
|
|
|
|
derived.prototype = new f(); |
|
|
|
|
} |
|
|
|
|
@ -22,31 +21,31 @@ function inherit(base, derived) {
|
|
|
|
|
// 1. category axis
|
|
|
|
|
// 2. ceil values of translate/x/y to int for half pixel antialiasing
|
|
|
|
|
// 3. multiline tick text
|
|
|
|
|
var tickTextCharSize; |
|
|
|
|
let tickTextCharSize; |
|
|
|
|
function c3_axis(d3, params) { |
|
|
|
|
var scale = d3.scale.linear(), orient = "bottom", innerTickSize = 6, outerTickSize, tickPadding = 3, tickValues = null, tickFormat, tickArguments; |
|
|
|
|
let scale = d3.scale.linear(), orient = 'bottom', innerTickSize = 6, outerTickSize, tickPadding = 3, tickValues = null, tickFormat, tickArguments; |
|
|
|
|
|
|
|
|
|
var tickOffset = 0, tickCulling = true, tickCentered; |
|
|
|
|
let tickOffset = 0, tickCulling = true, tickCentered; |
|
|
|
|
|
|
|
|
|
params = params || {}; |
|
|
|
|
outerTickSize = params.withOuterTick ? 6 : 0; |
|
|
|
|
|
|
|
|
|
function axisX(selection, x) { |
|
|
|
|
selection.attr("transform", function (d) { |
|
|
|
|
return "translate(" + Math.ceil(x(d) + tickOffset) + ", 0)"; |
|
|
|
|
selection.attr('transform', (d) => { |
|
|
|
|
return 'translate(' + Math.ceil(x(d) + tickOffset) + ', 0)'; |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
function axisY(selection, y) { |
|
|
|
|
selection.attr("transform", function (d) { |
|
|
|
|
return "translate(0," + Math.ceil(y(d)) + ")"; |
|
|
|
|
selection.attr('transform', (d) => { |
|
|
|
|
return 'translate(0,' + Math.ceil(y(d)) + ')'; |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
function scaleExtent(domain) { |
|
|
|
|
var start = domain[0], stop = domain[domain.length - 1]; |
|
|
|
|
return start < stop ? [ start, stop ] : [ stop, start ]; |
|
|
|
|
let start = domain[0], stop = domain[domain.length - 1]; |
|
|
|
|
return start < stop ? [start, stop] : [stop, start]; |
|
|
|
|
} |
|
|
|
|
function generateTicks(scale) { |
|
|
|
|
var i, domain, ticks = []; |
|
|
|
|
let i, domain, ticks = []; |
|
|
|
|
if (scale.ticks) { |
|
|
|
|
return scale.ticks.apply(scale, tickArguments); |
|
|
|
|
} |
|
|
|
|
@ -60,7 +59,7 @@ function c3_axis(d3, params) {
|
|
|
|
|
return ticks; |
|
|
|
|
} |
|
|
|
|
function copyScale() { |
|
|
|
|
var newScale = scale.copy(), domain; |
|
|
|
|
let newScale = scale.copy(), domain; |
|
|
|
|
if (params.isCategory) { |
|
|
|
|
domain = scale.domain(); |
|
|
|
|
newScale.domain([domain[0], domain[1] - 1]); |
|
|
|
|
@ -68,19 +67,19 @@ function c3_axis(d3, params) {
|
|
|
|
|
return newScale; |
|
|
|
|
} |
|
|
|
|
function textFormatted(v) { |
|
|
|
|
var formatted = tickFormat ? tickFormat(v) : v; |
|
|
|
|
const formatted = tickFormat ? tickFormat(v) : v; |
|
|
|
|
return typeof formatted !== 'undefined' ? formatted : ''; |
|
|
|
|
} |
|
|
|
|
function getSizeFor1Char(tick) { |
|
|
|
|
if (tickTextCharSize) { |
|
|
|
|
return tickTextCharSize; |
|
|
|
|
} |
|
|
|
|
var size = { |
|
|
|
|
const size = { |
|
|
|
|
h: 11.5, |
|
|
|
|
w: 5.5 |
|
|
|
|
w: 5.5, |
|
|
|
|
}; |
|
|
|
|
tick.select('text').text(textFormatted).each(function (d) { |
|
|
|
|
var box = this.getBoundingClientRect(), |
|
|
|
|
let box = this.getBoundingClientRect(), |
|
|
|
|
text = textFormatted(d), |
|
|
|
|
h = box.height, |
|
|
|
|
w = text ? (box.width / text.length) : undefined; |
|
|
|
|
@ -97,28 +96,28 @@ function c3_axis(d3, params) {
|
|
|
|
|
} |
|
|
|
|
function axis(g) { |
|
|
|
|
g.each(function () { |
|
|
|
|
var g = axis.g = d3.select(this); |
|
|
|
|
const g = axis.g = d3.select(this); |
|
|
|
|
|
|
|
|
|
var scale0 = this.__chart__ || scale, scale1 = this.__chart__ = copyScale(); |
|
|
|
|
let scale0 = this.__chart__ || scale, scale1 = this.__chart__ = copyScale(); |
|
|
|
|
|
|
|
|
|
var ticks = tickValues ? tickValues : generateTicks(scale1), |
|
|
|
|
tick = g.selectAll(".tick").data(ticks, scale1), |
|
|
|
|
tickEnter = tick.enter().insert("g", ".domain").attr("class", "tick").style("opacity", 1e-6), |
|
|
|
|
let ticks = tickValues ? tickValues : generateTicks(scale1), |
|
|
|
|
tick = g.selectAll('.tick').data(ticks, scale1), |
|
|
|
|
tickEnter = tick.enter().insert('g', '.domain').attr('class', 'tick').style('opacity', 1e-6), |
|
|
|
|
// MEMO: No exit transition. The reason is this transition affects max tick width calculation because old tick will be included in the ticks.
|
|
|
|
|
tickExit = tick.exit().remove(), |
|
|
|
|
tickUpdate = transitionise(tick).style("opacity", 1), |
|
|
|
|
tickUpdate = transitionise(tick).style('opacity', 1), |
|
|
|
|
tickTransform, tickX, tickY; |
|
|
|
|
|
|
|
|
|
var range = scale.rangeExtent ? scale.rangeExtent() : scaleExtent(scale.range()), |
|
|
|
|
path = g.selectAll(".domain").data([ 0 ]), |
|
|
|
|
pathUpdate = (path.enter().append("path").attr("class", "domain"), transitionise(path)); |
|
|
|
|
tickEnter.append("line"); |
|
|
|
|
tickEnter.append("text"); |
|
|
|
|
let range = scale.rangeExtent ? scale.rangeExtent() : scaleExtent(scale.range()), |
|
|
|
|
path = g.selectAll('.domain').data([0]), |
|
|
|
|
pathUpdate = (path.enter().append('path').attr('class', 'domain'), transitionise(path)); |
|
|
|
|
tickEnter.append('line'); |
|
|
|
|
tickEnter.append('text'); |
|
|
|
|
|
|
|
|
|
var lineEnter = tickEnter.select("line"), |
|
|
|
|
lineUpdate = tickUpdate.select("line"), |
|
|
|
|
textEnter = tickEnter.select("text"), |
|
|
|
|
textUpdate = tickUpdate.select("text"); |
|
|
|
|
let lineEnter = tickEnter.select('line'), |
|
|
|
|
lineUpdate = tickUpdate.select('line'), |
|
|
|
|
textEnter = tickEnter.select('text'), |
|
|
|
|
textUpdate = tickUpdate.select('text'); |
|
|
|
|
|
|
|
|
|
if (params.isCategory) { |
|
|
|
|
tickOffset = Math.ceil((scale1(1) - scale1(0)) / 2); |
|
|
|
|
@ -128,16 +127,16 @@ function c3_axis(d3, params) {
|
|
|
|
|
tickOffset = tickX = 0; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
var text, tspan, sizeFor1Char = getSizeFor1Char(g.select('.tick')), counts = []; |
|
|
|
|
var tickLength = Math.max(innerTickSize, 0) + tickPadding, |
|
|
|
|
let text, tspan, sizeFor1Char = getSizeFor1Char(g.select('.tick')), counts = []; |
|
|
|
|
let tickLength = Math.max(innerTickSize, 0) + tickPadding, |
|
|
|
|
isVertical = orient === 'left' || orient === 'right'; |
|
|
|
|
|
|
|
|
|
// this should be called only when category axis
|
|
|
|
|
function splitTickText(d, maxWidth) { |
|
|
|
|
var tickText = textFormatted(d), |
|
|
|
|
let tickText = textFormatted(d), |
|
|
|
|
subtext, spaceIndex, textWidth, splitted = []; |
|
|
|
|
|
|
|
|
|
if (Object.prototype.toString.call(tickText) === "[object Array]") { |
|
|
|
|
if (Object.prototype.toString.call(tickText) === '[object Array]') { |
|
|
|
|
return tickText; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@ -147,7 +146,7 @@ function c3_axis(d3, params) {
|
|
|
|
|
|
|
|
|
|
function split(splitted, text) { |
|
|
|
|
spaceIndex = undefined; |
|
|
|
|
for (var i = 1; i < text.length; i++) { |
|
|
|
|
for (let i = 1; i < text.length; i++) { |
|
|
|
|
if (text.charAt(i) === ' ') { |
|
|
|
|
spaceIndex = i; |
|
|
|
|
} |
|
|
|
|
@ -164,52 +163,52 @@ function c3_axis(d3, params) {
|
|
|
|
|
return splitted.concat(text); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return split(splitted, tickText + ""); |
|
|
|
|
return split(splitted, tickText + ''); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function tspanDy(d, i) { |
|
|
|
|
var dy = sizeFor1Char.h; |
|
|
|
|
let dy = sizeFor1Char.h; |
|
|
|
|
if (i === 0) { |
|
|
|
|
if (orient === 'left' || orient === 'right') { |
|
|
|
|
dy = -((counts[d.index] - 1) * (sizeFor1Char.h / 2) - 3); |
|
|
|
|
} else { |
|
|
|
|
dy = ".71em"; |
|
|
|
|
dy = '.71em'; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
return dy; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function tickSize(d) { |
|
|
|
|
var tickPosition = scale(d) + (tickCentered ? 0 : tickOffset); |
|
|
|
|
const tickPosition = scale(d) + (tickCentered ? 0 : tickOffset); |
|
|
|
|
return range[0] < tickPosition && tickPosition < range[1] ? innerTickSize : 0; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
text = tick.select("text"); |
|
|
|
|
text = tick.select('text'); |
|
|
|
|
tspan = text.selectAll('tspan') |
|
|
|
|
.data(function (d, i) { |
|
|
|
|
var splitted = params.tickMultiline ? splitTickText(d, params.tickWidth) : [].concat(textFormatted(d)); |
|
|
|
|
.data((d, i) => { |
|
|
|
|
const splitted = params.tickMultiline ? splitTickText(d, params.tickWidth) : [].concat(textFormatted(d)); |
|
|
|
|
counts[i] = splitted.length; |
|
|
|
|
return splitted.map(function (s) { |
|
|
|
|
return splitted.map((s) => { |
|
|
|
|
return { index: i, splitted: s }; |
|
|
|
|
}); |
|
|
|
|
}); |
|
|
|
|
tspan.enter().append('tspan'); |
|
|
|
|
tspan.exit().remove(); |
|
|
|
|
tspan.text(function (d) { return d.splitted; }); |
|
|
|
|
tspan.text((d) => { return d.splitted; }); |
|
|
|
|
|
|
|
|
|
var rotate = params.tickTextRotate; |
|
|
|
|
const rotate = params.tickTextRotate; |
|
|
|
|
|
|
|
|
|
function textAnchorForText(rotate) { |
|
|
|
|
if (!rotate) { |
|
|
|
|
return 'middle'; |
|
|
|
|
} |
|
|
|
|
return rotate > 0 ? "start" : "end"; |
|
|
|
|
return rotate > 0 ? 'start' : 'end'; |
|
|
|
|
} |
|
|
|
|
function textTransform(rotate) { |
|
|
|
|
if (!rotate) { |
|
|
|
|
return ''; |
|
|
|
|
} |
|
|
|
|
return "rotate(" + rotate + ")"; |
|
|
|
|
return 'rotate(' + rotate + ')'; |
|
|
|
|
} |
|
|
|
|
function dxForText(rotate) { |
|
|
|
|
if (!rotate) { |
|
|
|
|
@ -225,59 +224,59 @@ function c3_axis(d3, params) {
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
switch (orient) { |
|
|
|
|
case "bottom": |
|
|
|
|
case 'bottom': |
|
|
|
|
{ |
|
|
|
|
tickTransform = axisX; |
|
|
|
|
lineEnter.attr("y2", innerTickSize); |
|
|
|
|
textEnter.attr("y", tickLength); |
|
|
|
|
lineUpdate.attr("x1", tickX).attr("x2", tickX).attr("y2", tickSize); |
|
|
|
|
textUpdate.attr("x", 0).attr("y", yForText(rotate)) |
|
|
|
|
.style("text-anchor", textAnchorForText(rotate)) |
|
|
|
|
.attr("transform", textTransform(rotate)); |
|
|
|
|
tspan.attr('x', 0).attr("dy", tspanDy).attr('dx', dxForText(rotate)); |
|
|
|
|
pathUpdate.attr("d", "M" + range[0] + "," + outerTickSize + "V0H" + range[1] + "V" + outerTickSize); |
|
|
|
|
lineEnter.attr('y2', innerTickSize); |
|
|
|
|
textEnter.attr('y', tickLength); |
|
|
|
|
lineUpdate.attr('x1', tickX).attr('x2', tickX).attr('y2', tickSize); |
|
|
|
|
textUpdate.attr('x', 0).attr('y', yForText(rotate)) |
|
|
|
|
.style('text-anchor', textAnchorForText(rotate)) |
|
|
|
|
.attr('transform', textTransform(rotate)); |
|
|
|
|
tspan.attr('x', 0).attr('dy', tspanDy).attr('dx', dxForText(rotate)); |
|
|
|
|
pathUpdate.attr('d', 'M' + range[0] + ',' + outerTickSize + 'V0H' + range[1] + 'V' + outerTickSize); |
|
|
|
|
break; |
|
|
|
|
} |
|
|
|
|
case "top": |
|
|
|
|
case 'top': |
|
|
|
|
{ |
|
|
|
|
// TODO: rotated tick text
|
|
|
|
|
tickTransform = axisX; |
|
|
|
|
lineEnter.attr("y2", -innerTickSize); |
|
|
|
|
textEnter.attr("y", -tickLength); |
|
|
|
|
lineUpdate.attr("x2", 0).attr("y2", -innerTickSize); |
|
|
|
|
textUpdate.attr("x", 0).attr("y", -tickLength); |
|
|
|
|
text.style("text-anchor", "middle"); |
|
|
|
|
tspan.attr('x', 0).attr("dy", "0em"); |
|
|
|
|
pathUpdate.attr("d", "M" + range[0] + "," + -outerTickSize + "V0H" + range[1] + "V" + -outerTickSize); |
|
|
|
|
lineEnter.attr('y2', -innerTickSize); |
|
|
|
|
textEnter.attr('y', -tickLength); |
|
|
|
|
lineUpdate.attr('x2', 0).attr('y2', -innerTickSize); |
|
|
|
|
textUpdate.attr('x', 0).attr('y', -tickLength); |
|
|
|
|
text.style('text-anchor', 'middle'); |
|
|
|
|
tspan.attr('x', 0).attr('dy', '0em'); |
|
|
|
|
pathUpdate.attr('d', 'M' + range[0] + ',' + -outerTickSize + 'V0H' + range[1] + 'V' + -outerTickSize); |
|
|
|
|
break; |
|
|
|
|
} |
|
|
|
|
case "left": |
|
|
|
|
case 'left': |
|
|
|
|
{ |
|
|
|
|
tickTransform = axisY; |
|
|
|
|
lineEnter.attr("x2", -innerTickSize); |
|
|
|
|
textEnter.attr("x", -tickLength); |
|
|
|
|
lineUpdate.attr("x2", -innerTickSize).attr("y1", tickY).attr("y2", tickY); |
|
|
|
|
textUpdate.attr("x", -tickLength).attr("y", tickOffset); |
|
|
|
|
text.style("text-anchor", "end"); |
|
|
|
|
tspan.attr('x', -tickLength).attr("dy", tspanDy); |
|
|
|
|
pathUpdate.attr("d", "M" + -outerTickSize + "," + range[0] + "H0V" + range[1] + "H" + -outerTickSize); |
|
|
|
|
lineEnter.attr('x2', -innerTickSize); |
|
|
|
|
textEnter.attr('x', -tickLength); |
|
|
|
|
lineUpdate.attr('x2', -innerTickSize).attr('y1', tickY).attr('y2', tickY); |
|
|
|
|
textUpdate.attr('x', -tickLength).attr('y', tickOffset); |
|
|
|
|
text.style('text-anchor', 'end'); |
|
|
|
|
tspan.attr('x', -tickLength).attr('dy', tspanDy); |
|
|
|
|
pathUpdate.attr('d', 'M' + -outerTickSize + ',' + range[0] + 'H0V' + range[1] + 'H' + -outerTickSize); |
|
|
|
|
break; |
|
|
|
|
} |
|
|
|
|
case "right": |
|
|
|
|
case 'right': |
|
|
|
|
{ |
|
|
|
|
tickTransform = axisY; |
|
|
|
|
lineEnter.attr("x2", innerTickSize); |
|
|
|
|
textEnter.attr("x", tickLength); |
|
|
|
|
lineUpdate.attr("x2", innerTickSize).attr("y2", 0); |
|
|
|
|
textUpdate.attr("x", tickLength).attr("y", 0); |
|
|
|
|
text.style("text-anchor", "start"); |
|
|
|
|
tspan.attr('x', tickLength).attr("dy", tspanDy); |
|
|
|
|
pathUpdate.attr("d", "M" + outerTickSize + "," + range[0] + "H0V" + range[1] + "H" + outerTickSize); |
|
|
|
|
lineEnter.attr('x2', innerTickSize); |
|
|
|
|
textEnter.attr('x', tickLength); |
|
|
|
|
lineUpdate.attr('x2', innerTickSize).attr('y2', 0); |
|
|
|
|
textUpdate.attr('x', tickLength).attr('y', 0); |
|
|
|
|
text.style('text-anchor', 'start'); |
|
|
|
|
tspan.attr('x', tickLength).attr('dy', tspanDy); |
|
|
|
|
pathUpdate.attr('d', 'M' + outerTickSize + ',' + range[0] + 'H0V' + range[1] + 'H' + outerTickSize); |
|
|
|
|
break; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
if (scale1.rangeBand) { |
|
|
|
|
var x = scale1, dx = x.rangeBand() / 2; |
|
|
|
|
let x = scale1, dx = x.rangeBand() / 2; |
|
|
|
|
scale0 = scale1 = function (d) { |
|
|
|
|
return x(d) + dx; |
|
|
|
|
}; |
|
|
|
|
@ -297,7 +296,7 @@ function c3_axis(d3, params) {
|
|
|
|
|
}; |
|
|
|
|
axis.orient = function (x) { |
|
|
|
|
if (!arguments.length) { return orient; } |
|
|
|
|
orient = x in {top: 1, right: 1, bottom: 1, left: 1} ? x + "" : "bottom"; |
|
|
|
|
orient = x in { top: 1, right: 1, bottom: 1, left: 1 } ? x + '' : 'bottom'; |
|
|
|
|
return axis; |
|
|
|
|
}; |
|
|
|
|
axis.tickFormat = function (format) { |
|
|
|
|
@ -314,7 +313,7 @@ function c3_axis(d3, params) {
|
|
|
|
|
return tickOffset; |
|
|
|
|
}; |
|
|
|
|
axis.tickInterval = function () { |
|
|
|
|
var interval, length; |
|
|
|
|
let interval, length; |
|
|
|
|
if (params.isCategory) { |
|
|
|
|
interval = tickOffset * 2; |
|
|
|
|
} |
|
|
|
|
@ -356,51 +355,50 @@ function Axis(owner) {
|
|
|
|
|
inherit(API, Axis); |
|
|
|
|
|
|
|
|
|
Axis.prototype.init = function init() { |
|
|
|
|
|
|
|
|
|
var $$ = this.owner, config = $$.config, 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.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.append("text") |
|
|
|
|
.attr("class", CLASS.axisYLabel) |
|
|
|
|
.attr("transform", config.axis_rotated ? "" : "rotate(-90)") |
|
|
|
|
.style("text-anchor", this.textAnchorForYAxisLabel.bind(this)); |
|
|
|
|
|
|
|
|
|
$$.axes.y2 = main.append("g") |
|
|
|
|
.attr("class", CLASS.axis + ' ' + CLASS.axisY2) |
|
|
|
|
let $$ = this.owner, config = $$.config, 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.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.append('text') |
|
|
|
|
.attr('class', CLASS.axisYLabel) |
|
|
|
|
.attr('transform', config.axis_rotated ? '' : 'rotate(-90)') |
|
|
|
|
.style('text-anchor', this.textAnchorForYAxisLabel.bind(this)); |
|
|
|
|
|
|
|
|
|
$$.axes.y2 = main.append('g') |
|
|
|
|
.attr('class', CLASS.axis + ' ' + CLASS.axisY2) |
|
|
|
|
// clip-path?
|
|
|
|
|
.attr("transform", $$.getTranslate('y2')) |
|
|
|
|
.style("visibility", config.axis_y2_show ? 'visible' : 'hidden'); |
|
|
|
|
$$.axes.y2.append("text") |
|
|
|
|
.attr("class", CLASS.axisY2Label) |
|
|
|
|
.attr("transform", config.axis_rotated ? "" : "rotate(-90)") |
|
|
|
|
.style("text-anchor", this.textAnchorForY2AxisLabel.bind(this)); |
|
|
|
|
.attr('transform', $$.getTranslate('y2')) |
|
|
|
|
.style('visibility', config.axis_y2_show ? 'visible' : 'hidden'); |
|
|
|
|
$$.axes.y2.append('text') |
|
|
|
|
.attr('class', CLASS.axisY2Label) |
|
|
|
|
.attr('transform', config.axis_rotated ? '' : 'rotate(-90)') |
|
|
|
|
.style('text-anchor', this.textAnchorForY2AxisLabel.bind(this)); |
|
|
|
|
}; |
|
|
|
|
Axis.prototype.getXAxis = function getXAxis(scale, orient, tickFormat, tickValues, withOuterTick, withoutTransition, withoutRotateTickText) { |
|
|
|
|
var $$ = this.owner, config = $$.config, |
|
|
|
|
let $$ = this.owner, config = $$.config, |
|
|
|
|
axisParams = { |
|
|
|
|
isCategory: $$.isCategorized(), |
|
|
|
|
withOuterTick: withOuterTick, |
|
|
|
|
withOuterTick, |
|
|
|
|
tickMultiline: config.axis_x_tick_multiline, |
|
|
|
|
tickWidth: config.axis_x_tick_width, |
|
|
|
|
tickTextRotate: withoutRotateTickText ? 0 : config.axis_x_tick_rotate, |
|
|
|
|
withoutTransition: withoutTransition, |
|
|
|
|
withoutTransition, |
|
|
|
|
}, |
|
|
|
|
axis = c3_axis($$.d3, axisParams).scale(scale).orient(orient); |
|
|
|
|
|
|
|
|
|
if ($$.isTimeSeries() && tickValues && typeof tickValues !== "function") { |
|
|
|
|
tickValues = tickValues.map(function (v) { return $$.parseDate(v); }); |
|
|
|
|
if ($$.isTimeSeries() && tickValues && typeof tickValues !== 'function') { |
|
|
|
|
tickValues = tickValues.map((v) => { return $$.parseDate(v); }); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// Set tick
|
|
|
|
|
@ -415,7 +413,7 @@ Axis.prototype.getXAxis = function getXAxis(scale, orient, tickFormat, tickValue
|
|
|
|
|
return axis; |
|
|
|
|
}; |
|
|
|
|
Axis.prototype.updateXAxisTickValues = function updateXAxisTickValues(targets, axis) { |
|
|
|
|
var $$ = this.owner, config = $$.config, tickValues; |
|
|
|
|
let $$ = this.owner, config = $$.config, tickValues; |
|
|
|
|
if (config.axis_x_tick_fit || config.axis_x_tick_count) { |
|
|
|
|
tickValues = this.generateTickValues($$.mapTargetsToUniqueXs(targets), config.axis_x_tick_count, $$.isTimeSeries()); |
|
|
|
|
} |
|
|
|
|
@ -428,11 +426,11 @@ Axis.prototype.updateXAxisTickValues = function updateXAxisTickValues(targets, a
|
|
|
|
|
return tickValues; |
|
|
|
|
}; |
|
|
|
|
Axis.prototype.getYAxis = function getYAxis(scale, orient, tickFormat, tickValues, withOuterTick, withoutTransition, withoutRotateTickText) { |
|
|
|
|
var $$ = this.owner, config = $$.config, |
|
|
|
|
let $$ = this.owner, config = $$.config, |
|
|
|
|
axisParams = { |
|
|
|
|
withOuterTick: withOuterTick, |
|
|
|
|
withoutTransition: withoutTransition, |
|
|
|
|
tickTextRotate: withoutRotateTickText ? 0 : config.axis_y_tick_rotate |
|
|
|
|
withOuterTick, |
|
|
|
|
withoutTransition, |
|
|
|
|
tickTextRotate: withoutRotateTickText ? 0 : config.axis_y_tick_rotate, |
|
|
|
|
}, |
|
|
|
|
axis = c3_axis($$.d3, axisParams).scale(scale).orient(orient).tickFormat(tickFormat); |
|
|
|
|
if ($$.isTimeSeriesY()) { |
|
|
|
|
@ -443,18 +441,18 @@ Axis.prototype.getYAxis = function getYAxis(scale, orient, tickFormat, tickValue
|
|
|
|
|
return axis; |
|
|
|
|
}; |
|
|
|
|
Axis.prototype.getId = function getId(id) { |
|
|
|
|
var config = this.owner.config; |
|
|
|
|
const config = this.owner.config; |
|
|
|
|
return id in config.data_axes ? config.data_axes[id] : 'y'; |
|
|
|
|
}; |
|
|
|
|
Axis.prototype.getXAxisTickFormat = function getXAxisTickFormat() { |
|
|
|
|
var $$ = this.owner, config = $$.config, |
|
|
|
|
let $$ = this.owner, config = $$.config, |
|
|
|
|
format = $$.isTimeSeries() ? $$.defaultAxisTimeFormat : $$.isCategorized() ? $$.categoryName : function (v) { return v < 0 ? v.toFixed(0) : v; }; |
|
|
|
|
if (config.axis_x_tick_format) { |
|
|
|
|
if (isFunction(config.axis_x_tick_format)) { |
|
|
|
|
format = config.axis_x_tick_format; |
|
|
|
|
} else if ($$.isTimeSeries()) { |
|
|
|
|
format = function (date) { |
|
|
|
|
return date ? $$.axisTimeFormat(config.axis_x_tick_format)(date) : ""; |
|
|
|
|
return date ? $$.axisTimeFormat(config.axis_x_tick_format)(date) : ''; |
|
|
|
|
}; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
@ -473,7 +471,7 @@ Axis.prototype.getY2AxisTickValues = function getY2AxisTickValues() {
|
|
|
|
|
return this.getTickValues(this.owner.config.axis_y2_tick_values, this.owner.y2Axis); |
|
|
|
|
}; |
|
|
|
|
Axis.prototype.getLabelOptionByAxisId = function getLabelOptionByAxisId(axisId) { |
|
|
|
|
var $$ = this.owner, config = $$.config, option; |
|
|
|
|
let $$ = this.owner, config = $$.config, option; |
|
|
|
|
if (axisId === 'y') { |
|
|
|
|
option = config.axis_y_label; |
|
|
|
|
} else if (axisId === 'y2') { |
|
|
|
|
@ -484,11 +482,11 @@ Axis.prototype.getLabelOptionByAxisId = function getLabelOptionByAxisId(axisId)
|
|
|
|
|
return option; |
|
|
|
|
}; |
|
|
|
|
Axis.prototype.getLabelText = function getLabelText(axisId) { |
|
|
|
|
var option = this.getLabelOptionByAxisId(axisId); |
|
|
|
|
const option = this.getLabelOptionByAxisId(axisId); |
|
|
|
|
return isString(option) ? option : option ? option.text : null; |
|
|
|
|
}; |
|
|
|
|
Axis.prototype.setLabelText = function setLabelText(axisId, text) { |
|
|
|
|
var $$ = this.owner, config = $$.config, |
|
|
|
|
let $$ = this.owner, config = $$.config, |
|
|
|
|
option = this.getLabelOptionByAxisId(axisId); |
|
|
|
|
if (isString(option)) { |
|
|
|
|
if (axisId === 'y') { |
|
|
|
|
@ -503,7 +501,7 @@ Axis.prototype.setLabelText = function setLabelText(axisId, text) {
|
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
Axis.prototype.getLabelPosition = function getLabelPosition(axisId, defaultPosition) { |
|
|
|
|
var option = this.getLabelOptionByAxisId(axisId), |
|
|
|
|
let option = this.getLabelOptionByAxisId(axisId), |
|
|
|
|
position = (option && typeof option === 'object' && option.position) ? option.position : defaultPosition; |
|
|
|
|
return { |
|
|
|
|
isInner: position.indexOf('inner') >= 0, |
|
|
|
|
@ -513,7 +511,7 @@ Axis.prototype.getLabelPosition = function getLabelPosition(axisId, defaultPosit
|
|
|
|
|
isRight: position.indexOf('right') >= 0, |
|
|
|
|
isTop: position.indexOf('top') >= 0, |
|
|
|
|
isMiddle: position.indexOf('middle') >= 0, |
|
|
|
|
isBottom: position.indexOf('bottom') >= 0 |
|
|
|
|
isBottom: position.indexOf('bottom') >= 0, |
|
|
|
|
}; |
|
|
|
|
}; |
|
|
|
|
Axis.prototype.getXAxisLabelPosition = function getXAxisLabelPosition() { |
|
|
|
|
@ -538,7 +536,7 @@ Axis.prototype.textForY2AxisLabel = function textForY2AxisLabel() {
|
|
|
|
|
return this.getLabelText('y2'); |
|
|
|
|
}; |
|
|
|
|
Axis.prototype.xForAxisLabel = function xForAxisLabel(forHorizontal, position) { |
|
|
|
|
var $$ = this.owner; |
|
|
|
|
const $$ = this.owner; |
|
|
|
|
if (forHorizontal) { |
|
|
|
|
return position.isLeft ? 0 : position.isCenter ? $$.width / 2 : $$.width; |
|
|
|
|
} else { |
|
|
|
|
@ -547,9 +545,9 @@ Axis.prototype.xForAxisLabel = function xForAxisLabel(forHorizontal, position) {
|
|
|
|
|
}; |
|
|
|
|
Axis.prototype.dxForAxisLabel = function dxForAxisLabel(forHorizontal, position) { |
|
|
|
|
if (forHorizontal) { |
|
|
|
|
return position.isLeft ? "0.5em" : position.isRight ? "-0.5em" : "0"; |
|
|
|
|
return position.isLeft ? '0.5em' : position.isRight ? '-0.5em' : '0'; |
|
|
|
|
} else { |
|
|
|
|
return position.isTop ? "-0.5em" : position.isBottom ? "0.5em" : "0"; |
|
|
|
|
return position.isTop ? '-0.5em' : position.isBottom ? '0.5em' : '0'; |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
Axis.prototype.textAnchorForAxisLabel = function textAnchorForAxisLabel(forHorizontal, position) { |
|
|
|
|
@ -578,46 +576,46 @@ Axis.prototype.dxForY2AxisLabel = function dxForY2AxisLabel() {
|
|
|
|
|
return this.dxForAxisLabel(this.owner.config.axis_rotated, this.getY2AxisLabelPosition()); |
|
|
|
|
}; |
|
|
|
|
Axis.prototype.dyForXAxisLabel = function dyForXAxisLabel() { |
|
|
|
|
var $$ = this.owner, config = $$.config, |
|
|
|
|
let $$ = this.owner, config = $$.config, |
|
|
|
|
position = this.getXAxisLabelPosition(); |
|
|
|
|
if (config.axis_rotated) { |
|
|
|
|
return position.isInner ? "1.2em" : -25 - this.getMaxTickWidth('x'); |
|
|
|
|
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"; |
|
|
|
|
return position.isInner ? '-0.5em' : config.axis_x_height ? config.axis_x_height - 10 : '3em'; |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
Axis.prototype.dyForYAxisLabel = function dyForYAxisLabel() { |
|
|
|
|
var $$ = this.owner, |
|
|
|
|
let $$ = this.owner, |
|
|
|
|
position = this.getYAxisLabelPosition(); |
|
|
|
|
if ($$.config.axis_rotated) { |
|
|
|
|
return position.isInner ? "-0.5em" : "3em"; |
|
|
|
|
return position.isInner ? '-0.5em' : '3em'; |
|
|
|
|
} else { |
|
|
|
|
return position.isInner ? "1.2em" : -10 - ($$.config.axis_y_inner ? 0 : (this.getMaxTickWidth('y') + 10)); |
|
|
|
|
return position.isInner ? '1.2em' : -10 - ($$.config.axis_y_inner ? 0 : (this.getMaxTickWidth('y') + 10)); |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
Axis.prototype.dyForY2AxisLabel = function dyForY2AxisLabel() { |
|
|
|
|
var $$ = this.owner, |
|
|
|
|
let $$ = this.owner, |
|
|
|
|
position = this.getY2AxisLabelPosition(); |
|
|
|
|
if ($$.config.axis_rotated) { |
|
|
|
|
return position.isInner ? "1.2em" : "-2.2em"; |
|
|
|
|
return position.isInner ? '1.2em' : '-2.2em'; |
|
|
|
|
} else { |
|
|
|
|
return position.isInner ? "-0.5em" : 15 + ($$.config.axis_y2_inner ? 0 : (this.getMaxTickWidth('y2') + 15)); |
|
|
|
|
return position.isInner ? '-0.5em' : 15 + ($$.config.axis_y2_inner ? 0 : (this.getMaxTickWidth('y2') + 15)); |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
Axis.prototype.textAnchorForXAxisLabel = function textAnchorForXAxisLabel() { |
|
|
|
|
var $$ = this.owner; |
|
|
|
|
const $$ = this.owner; |
|
|
|
|
return this.textAnchorForAxisLabel(!$$.config.axis_rotated, this.getXAxisLabelPosition()); |
|
|
|
|
}; |
|
|
|
|
Axis.prototype.textAnchorForYAxisLabel = function textAnchorForYAxisLabel() { |
|
|
|
|
var $$ = this.owner; |
|
|
|
|
const $$ = this.owner; |
|
|
|
|
return this.textAnchorForAxisLabel($$.config.axis_rotated, this.getYAxisLabelPosition()); |
|
|
|
|
}; |
|
|
|
|
Axis.prototype.textAnchorForY2AxisLabel = function textAnchorForY2AxisLabel() { |
|
|
|
|
var $$ = this.owner; |
|
|
|
|
const $$ = this.owner; |
|
|
|
|
return this.textAnchorForAxisLabel($$.config.axis_rotated, this.getY2AxisLabelPosition()); |
|
|
|
|
}; |
|
|
|
|
Axis.prototype.getMaxTickWidth = function getMaxTickWidth(id, withoutRecompute) { |
|
|
|
|
var $$ = this.owner, config = $$.config, |
|
|
|
|
let $$ = this.owner, config = $$.config, |
|
|
|
|
maxWidth = 0, targetsToShow, scale, axis, dummy, svg; |
|
|
|
|
if (withoutRecompute && $$.currentMaxTickWidths[id]) { |
|
|
|
|
return $$.currentMaxTickWidths[id]; |
|
|
|
|
@ -636,10 +634,10 @@ Axis.prototype.getMaxTickWidth = function getMaxTickWidth(id, withoutRecompute)
|
|
|
|
|
this.updateXAxisTickValues(targetsToShow, axis); |
|
|
|
|
} |
|
|
|
|
dummy = $$.d3.select('body').append('div').classed('c3', true); |
|
|
|
|
svg = dummy.append("svg").style('visibility', 'hidden').style('position', 'fixed').style('top', 0).style('left', 0), |
|
|
|
|
svg = dummy.append('svg').style('visibility', 'hidden').style('position', 'fixed').style('top', 0).style('left', 0), |
|
|
|
|
svg.append('g').call(axis).each(function () { |
|
|
|
|
$$.d3.select(this).selectAll('text').each(function () { |
|
|
|
|
var box = this.getBoundingClientRect(); |
|
|
|
|
const box = this.getBoundingClientRect(); |
|
|
|
|
if (maxWidth < box.width) { maxWidth = box.width; } |
|
|
|
|
}); |
|
|
|
|
dummy.remove(); |
|
|
|
|
@ -650,28 +648,28 @@ Axis.prototype.getMaxTickWidth = function getMaxTickWidth(id, withoutRecompute)
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
Axis.prototype.updateLabels = function updateLabels(withTransition) { |
|
|
|
|
var $$ = this.owner; |
|
|
|
|
var axisXLabel = $$.main.select('.' + CLASS.axisX + ' .' + CLASS.axisXLabel), |
|
|
|
|
const $$ = this.owner; |
|
|
|
|
let axisXLabel = $$.main.select('.' + CLASS.axisX + ' .' + CLASS.axisXLabel), |
|
|
|
|
axisYLabel = $$.main.select('.' + CLASS.axisY + ' .' + CLASS.axisYLabel), |
|
|
|
|
axisY2Label = $$.main.select('.' + CLASS.axisY2 + ' .' + CLASS.axisY2Label); |
|
|
|
|
(withTransition ? axisXLabel.transition() : axisXLabel) |
|
|
|
|
.attr("x", this.xForXAxisLabel.bind(this)) |
|
|
|
|
.attr("dx", this.dxForXAxisLabel.bind(this)) |
|
|
|
|
.attr("dy", this.dyForXAxisLabel.bind(this)) |
|
|
|
|
.attr('x', this.xForXAxisLabel.bind(this)) |
|
|
|
|
.attr('dx', this.dxForXAxisLabel.bind(this)) |
|
|
|
|
.attr('dy', this.dyForXAxisLabel.bind(this)) |
|
|
|
|
.text(this.textForXAxisLabel.bind(this)); |
|
|
|
|
(withTransition ? axisYLabel.transition() : axisYLabel) |
|
|
|
|
.attr("x", this.xForYAxisLabel.bind(this)) |
|
|
|
|
.attr("dx", this.dxForYAxisLabel.bind(this)) |
|
|
|
|
.attr("dy", this.dyForYAxisLabel.bind(this)) |
|
|
|
|
.attr('x', this.xForYAxisLabel.bind(this)) |
|
|
|
|
.attr('dx', this.dxForYAxisLabel.bind(this)) |
|
|
|
|
.attr('dy', this.dyForYAxisLabel.bind(this)) |
|
|
|
|
.text(this.textForYAxisLabel.bind(this)); |
|
|
|
|
(withTransition ? axisY2Label.transition() : axisY2Label) |
|
|
|
|
.attr("x", this.xForY2AxisLabel.bind(this)) |
|
|
|
|
.attr("dx", this.dxForY2AxisLabel.bind(this)) |
|
|
|
|
.attr("dy", this.dyForY2AxisLabel.bind(this)) |
|
|
|
|
.attr('x', this.xForY2AxisLabel.bind(this)) |
|
|
|
|
.attr('dx', this.dxForY2AxisLabel.bind(this)) |
|
|
|
|
.attr('dy', this.dyForY2AxisLabel.bind(this)) |
|
|
|
|
.text(this.textForY2AxisLabel.bind(this)); |
|
|
|
|
}; |
|
|
|
|
Axis.prototype.getPadding = function getPadding(padding, key, defaultValue, domainLength) { |
|
|
|
|
var p = typeof padding === 'number' ? padding : padding[key]; |
|
|
|
|
const p = typeof padding === 'number' ? padding : padding[key]; |
|
|
|
|
if (!isValue(p)) { |
|
|
|
|
return defaultValue; |
|
|
|
|
} |
|
|
|
|
@ -682,12 +680,12 @@ Axis.prototype.getPadding = function getPadding(padding, key, defaultValue, doma
|
|
|
|
|
return this.convertPixelsToAxisPadding(p, domainLength); |
|
|
|
|
}; |
|
|
|
|
Axis.prototype.convertPixelsToAxisPadding = function convertPixelsToAxisPadding(pixels, domainLength) { |
|
|
|
|
var $$ = this.owner, |
|
|
|
|
let $$ = this.owner, |
|
|
|
|
length = $$.config.axis_rotated ? $$.width : $$.height; |
|
|
|
|
return domainLength * (pixels / length); |
|
|
|
|
}; |
|
|
|
|
Axis.prototype.generateTickValues = function generateTickValues(values, tickCount, forTimeSeries) { |
|
|
|
|
var tickValues = values, targetCount, start, end, count, interval, i, tickValue; |
|
|
|
|
let tickValues = values, targetCount, start, end, count, interval, i, tickValue; |
|
|
|
|
if (tickCount) { |
|
|
|
|
targetCount = isFunction(tickCount) ? tickCount() : tickCount; |
|
|
|
|
// compute ticks according to tickCount
|
|
|
|
|
@ -709,24 +707,24 @@ Axis.prototype.generateTickValues = function generateTickValues(values, tickCoun
|
|
|
|
|
tickValues.push(end); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
if (!forTimeSeries) { tickValues = tickValues.sort(function (a, b) { return a - b; }); } |
|
|
|
|
if (!forTimeSeries) { tickValues = tickValues.sort((a, b) => { return a - b; }); } |
|
|
|
|
return tickValues; |
|
|
|
|
}; |
|
|
|
|
Axis.prototype.generateTransitions = function generateTransitions(duration) { |
|
|
|
|
var $$ = this.owner, axes = $$.axes; |
|
|
|
|
let $$ = this.owner, axes = $$.axes; |
|
|
|
|
return { |
|
|
|
|
axisX: duration ? axes.x.transition().duration(duration) : axes.x, |
|
|
|
|
axisY: duration ? axes.y.transition().duration(duration) : axes.y, |
|
|
|
|
axisY2: duration ? axes.y2.transition().duration(duration) : axes.y2, |
|
|
|
|
axisSubX: duration ? axes.subx.transition().duration(duration) : axes.subx |
|
|
|
|
axisSubX: duration ? axes.subx.transition().duration(duration) : axes.subx, |
|
|
|
|
}; |
|
|
|
|
}; |
|
|
|
|
Axis.prototype.redraw = function redraw(transitions, isHidden) { |
|
|
|
|
var $$ = this.owner; |
|
|
|
|
$$.axes.x.style("opacity", isHidden ? 0 : 1); |
|
|
|
|
$$.axes.y.style("opacity", isHidden ? 0 : 1); |
|
|
|
|
$$.axes.y2.style("opacity", isHidden ? 0 : 1); |
|
|
|
|
$$.axes.subx.style("opacity", isHidden ? 0 : 1); |
|
|
|
|
const $$ = this.owner; |
|
|
|
|
$$.axes.x.style('opacity', isHidden ? 0 : 1); |
|
|
|
|
$$.axes.y.style('opacity', isHidden ? 0 : 1); |
|
|
|
|
$$.axes.y2.style('opacity', isHidden ? 0 : 1); |
|
|
|
|
$$.axes.subx.style('opacity', isHidden ? 0 : 1); |
|
|
|
|
transitions.axisX.call($$.xAxis); |
|
|
|
|
transitions.axisY.call($$.yAxis); |
|
|
|
|
transitions.axisY2.call($$.y2Axis); |
|
|
|
|
|
Ændrew Rininsland
8 years ago