import CLASS from './class' import { isValue, isFunction, isString, isEmpty, getBBox } from './util' import { AxisInternal } from './axis-internal' export default class AxisClass { owner: any d3: any internal: typeof AxisInternal constructor(owner) { this.owner = owner this.d3 = owner.d3 this.internal = AxisInternal } } const Axis = AxisClass as any 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', 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.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)) } Axis.prototype.getXAxis = function getXAxis( scale, orient, tickFormat, tickValues, withOuterTick, withoutTransition, withoutRotateTickText ) { var $$ = this.owner, config = $$.config, axisParams = { isCategory: $$.isCategorized(), withOuterTick: withOuterTick, tickMultiline: config.axis_x_tick_multiline, tickMultilineMax: config.axis_x_tick_multiline ? Number(config.axis_x_tick_multilineMax) : 0, tickWidth: config.axis_x_tick_width, tickTextRotate: withoutRotateTickText ? 0 : config.axis_x_tick_rotate, withoutTransition: withoutTransition }, axis = new this.internal(this, axisParams).axis.scale(scale).orient(orient) if ($$.isTimeSeries() && tickValues && typeof tickValues !== 'function') { tickValues = tickValues.map(function(v) { return $$.parseDate(v) }) } // Set tick axis.tickFormat(tickFormat).tickValues(tickValues) if ($$.isCategorized()) { axis.tickCentered(config.axis_x_tick_centered) if (isEmpty(config.axis_x_tick_culling)) { config.axis_x_tick_culling = false } } return axis } Axis.prototype.updateXAxisTickValues = function updateXAxisTickValues( targets, axis ) { var $$ = 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() ) } if (axis) { axis.tickValues(tickValues) } else { $$.xAxis.tickValues(tickValues) $$.subXAxis.tickValues(tickValues) } return tickValues } Axis.prototype.getYAxis = function getYAxis( axisId, scale, orient, tickValues, withOuterTick, withoutTransition, withoutRotateTickText ) { const $$ = this.owner const config = $$.config let tickFormat = config[`axis_${axisId}_tick_format`] if (!tickFormat && $$.isAxisNormalized(axisId)) { tickFormat = x => `${x}%` } const axis = new this.internal(this, { withOuterTick: withOuterTick, withoutTransition: withoutTransition, tickTextRotate: withoutRotateTickText ? 0 : config.axis_y_tick_rotate }).axis .scale(scale) .orient(orient) if (tickFormat) { axis.tickFormat(tickFormat) } if ($$.isTimeSeriesY()) { axis.ticks(config.axis_y_tick_time_type, config.axis_y_tick_time_interval) } else { axis.tickValues(tickValues) } return axis } Axis.prototype.getId = function getId(id) { var config = this.owner.config return id in config.data_axes ? config.data_axes[id] : 'y' } Axis.prototype.getXAxisTickFormat = function getXAxisTickFormat() { // #2251 previously set any negative values to a whole number, // however both should be truncated according to the users format specification var $$ = this.owner, config = $$.config let format = $$.isTimeSeries() ? $$.defaultAxisTimeFormat : $$.isCategorized() ? $$.categoryName : function(v) { return 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 isFunction(format) ? function(v) { return format.call($$, v) } : format } Axis.prototype.getTickValues = function getTickValues(tickValues, axis) { return tickValues ? tickValues : axis ? axis.tickValues() : undefined } Axis.prototype.getXAxisTickValues = function getXAxisTickValues() { return this.getTickValues( this.owner.config.axis_x_tick_values, this.owner.xAxis ) } Axis.prototype.getYAxisTickValues = function getYAxisTickValues() { return this.getTickValues( this.owner.config.axis_y_tick_values, this.owner.yAxis ) } 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 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 } Axis.prototype.getLabelText = function getLabelText(axisId) { var option = this.getLabelOptionByAxisId(axisId) return isString(option) ? option : option ? option.text : null } Axis.prototype.setLabelText = function setLabelText(axisId, text) { var $$ = this.owner, config = $$.config, option = this.getLabelOptionByAxisId(axisId) if (isString(option)) { if (axisId === 'y') { config.axis_y_label = text } else if (axisId === 'y2') { config.axis_y2_label = text } else if (axisId === 'x') { config.axis_x_label = text } } else if (option) { option.text = text } } Axis.prototype.getLabelPosition = function getLabelPosition( axisId, defaultPosition ) { var option = this.getLabelOptionByAxisId(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 } } Axis.prototype.getXAxisLabelPosition = function getXAxisLabelPosition() { return this.getLabelPosition( 'x', this.owner.config.axis_rotated ? 'inner-top' : 'inner-right' ) } Axis.prototype.getYAxisLabelPosition = function getYAxisLabelPosition() { return this.getLabelPosition( 'y', this.owner.config.axis_rotated ? 'inner-right' : 'inner-top' ) } Axis.prototype.getY2AxisLabelPosition = function getY2AxisLabelPosition() { return this.getLabelPosition( 'y2', this.owner.config.axis_rotated ? 'inner-right' : 'inner-top' ) } Axis.prototype.getLabelPositionById = function getLabelPositionById(id) { return id === 'y2' ? this.getY2AxisLabelPosition() : id === 'y' ? this.getYAxisLabelPosition() : this.getXAxisLabelPosition() } Axis.prototype.textForXAxisLabel = function textForXAxisLabel() { return this.getLabelText('x') } Axis.prototype.textForYAxisLabel = function textForYAxisLabel() { return this.getLabelText('y') } Axis.prototype.textForY2AxisLabel = function textForY2AxisLabel() { return this.getLabelText('y2') } Axis.prototype.xForAxisLabel = 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 } } Axis.prototype.dxForAxisLabel = 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' } } Axis.prototype.textAnchorForAxisLabel = function textAnchorForAxisLabel( forHorizontal, position ) { if (forHorizontal) { return position.isLeft ? 'start' : position.isCenter ? 'middle' : 'end' } else { return position.isBottom ? 'start' : position.isMiddle ? 'middle' : 'end' } } Axis.prototype.xForXAxisLabel = function xForXAxisLabel() { return this.xForAxisLabel( !this.owner.config.axis_rotated, this.getXAxisLabelPosition() ) } Axis.prototype.xForYAxisLabel = function xForYAxisLabel() { return this.xForAxisLabel( this.owner.config.axis_rotated, this.getYAxisLabelPosition() ) } Axis.prototype.xForY2AxisLabel = function xForY2AxisLabel() { return this.xForAxisLabel( this.owner.config.axis_rotated, this.getY2AxisLabelPosition() ) } Axis.prototype.dxForXAxisLabel = function dxForXAxisLabel() { return this.dxForAxisLabel( !this.owner.config.axis_rotated, this.getXAxisLabelPosition() ) } Axis.prototype.dxForYAxisLabel = function dxForYAxisLabel() { return this.dxForAxisLabel( this.owner.config.axis_rotated, this.getYAxisLabelPosition() ) } 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, position = this.getXAxisLabelPosition() if (config.axis_rotated) { return position.isInner ? '1.2em' : -25 - ($$.config.axis_x_inner ? 0 : this.getMaxTickWidth('x')) } else { return position.isInner ? '-0.5em' : $$.getHorizontalAxisHeight('x') - 10 } } Axis.prototype.dyForYAxisLabel = 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) } } Axis.prototype.dyForY2AxisLabel = 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) } } Axis.prototype.textAnchorForXAxisLabel = function textAnchorForXAxisLabel() { var $$ = this.owner return this.textAnchorForAxisLabel( !$$.config.axis_rotated, this.getXAxisLabelPosition() ) } Axis.prototype.textAnchorForYAxisLabel = function textAnchorForYAxisLabel() { var $$ = this.owner return this.textAnchorForAxisLabel( $$.config.axis_rotated, this.getYAxisLabelPosition() ) } Axis.prototype.textAnchorForY2AxisLabel = function textAnchorForY2AxisLabel() { var $$ = this.owner return this.textAnchorForAxisLabel( $$.config.axis_rotated, this.getY2AxisLabelPosition() ) } Axis.prototype.getMaxTickWidth = function getMaxTickWidth( id, withoutRecompute ) { var $$ = this.owner, maxWidth = 0, targetsToShow, scale, axis, dummy, svg if (withoutRecompute && $$.currentMaxTickWidths[id]) { return $$.currentMaxTickWidths[id] } if ($$.svg) { targetsToShow = $$.filterTargetsToShow($$.data.targets) if (id === 'y') { scale = $$.y.copy().domain($$.getYDomain(targetsToShow, 'y')) axis = this.getYAxis( id, scale, $$.yOrient, $$.yAxisTickValues, false, true, true ) } else if (id === 'y2') { scale = $$.y2.copy().domain($$.getYDomain(targetsToShow, 'y2')) axis = this.getYAxis( id, scale, $$.y2Orient, $$.y2AxisTickValues, false, true, true ) } else { scale = $$.x.copy().domain($$.getXDomain(targetsToShow)) axis = this.getXAxis( scale, $$.xOrient, $$.xAxisTickFormat, $$.xAxisTickValues, false, true, true ) 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 .append('g') .call(axis) .each(function() { $$.d3 .select(this) .selectAll('text') .each(function() { var box = getBBox(this) if (maxWidth < box.width) { maxWidth = box.width } }) dummy.remove() }) } $$.currentMaxTickWidths[id] = maxWidth <= 0 ? $$.currentMaxTickWidths[id] : maxWidth return $$.currentMaxTickWidths[id] } Axis.prototype.updateLabels = function updateLabels(withTransition) { var $$ = this.owner var 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)) .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)) .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)) .text(this.textForY2AxisLabel.bind(this)) } Axis.prototype.getPadding = function getPadding( padding, key, defaultValue, domainLength ) { var p = typeof padding === 'number' ? padding : padding[key] if (!isValue(p)) { return defaultValue } if (padding.unit === 'ratio') { return padding[key] * domainLength } // assume padding is pixels if unit is not specified return this.convertPixelsToAxisPadding(p, domainLength) } Axis.prototype.convertPixelsToAxisPadding = function convertPixelsToAxisPadding( pixels, domainLength ) { var $$ = 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 if (tickCount) { targetCount = isFunction(tickCount) ? tickCount() : tickCount // compute ticks according to tickCount if (targetCount === 1) { tickValues = [values[0]] } else if (targetCount === 2) { tickValues = [values[0], values[values.length - 1]] } else if (targetCount > 2) { count = targetCount - 2 start = values[0] end = values[values.length - 1] interval = (end - start) / (count + 1) // re-construct unique values tickValues = [start] for (i = 0; i < count; i++) { tickValue = +start + interval * (i + 1) tickValues.push(forTimeSeries ? new Date(tickValue) : tickValue) } tickValues.push(end) } } if (!forTimeSeries) { tickValues = tickValues.sort(function(a, b) { return a - b }) } return tickValues } Axis.prototype.generateTransitions = function generateTransitions(duration) { var $$ = 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 } } Axis.prototype.redraw = function redraw(duration, isHidden) { var $$ = this.owner, transition = duration ? $$.d3.transition().duration(duration) : null $$.axes.x.style('opacity', isHidden ? 0 : 1).call($$.xAxis, transition) $$.axes.y.style('opacity', isHidden ? 0 : 1).call($$.yAxis, transition) $$.axes.y2.style('opacity', isHidden ? 0 : 1).call($$.y2Axis, transition) $$.axes.subx.style('opacity', isHidden ? 0 : 1).call($$.subXAxis, transition) }