mirror of https://github.com/masayuki0812/c3.git
Quite good looking graph derived from d3.js
http://c3js.org
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
471 lines
18 KiB
471 lines
18 KiB
import { |
|
CLASS, |
|
isValue, |
|
isFunction, |
|
isString, |
|
isEmpty, |
|
} from '../internals/index'; |
|
|
|
import { inherit, API } from './index'; |
|
import c3_axis from './c3.axis'; |
|
|
|
function Axis(owner) { |
|
API.call(this, owner); |
|
} |
|
|
|
inherit(API, Axis); |
|
|
|
Axis.prototype.init = function init() { |
|
const $$ = this.owner; |
|
const config = $$.config; |
|
const 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)); |
|
}; |
|
Axis.prototype.getXAxis = function getXAxis( |
|
scale, |
|
orient, |
|
tickFormat, |
|
tickValues, |
|
withOuterTick, |
|
withoutTransition, |
|
withoutRotateTickText) { |
|
const $$ = this.owner; |
|
const config = $$.config; |
|
const axisParams = { |
|
isCategory: $$.isCategorized(), |
|
withOuterTick, |
|
tickMultiline: config.axis_x_tick_multiline, |
|
tickWidth: config.axis_x_tick_width, |
|
tickTextRotate: withoutRotateTickText ? 0 : config.axis_x_tick_rotate, |
|
withoutTransition, |
|
}; |
|
const axis = c3_axis($$.d3, axisParams).scale(scale).orient(orient); |
|
|
|
if ($$.isTimeSeries() && tickValues && typeof tickValues !== 'function') { |
|
tickValues = tickValues.map(v => $$.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) { |
|
const $$ = this.owner; |
|
const config = $$.config; |
|
let 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(scale, |
|
orient, |
|
tickFormat, |
|
tickValues, |
|
withOuterTick, |
|
withoutTransition, |
|
withoutRotateTickText) { |
|
const $$ = this.owner; |
|
const config = $$.config; |
|
const axisParams = { |
|
withOuterTick, |
|
withoutTransition, |
|
tickTextRotate: withoutRotateTickText ? 0 : config.axis_y_tick_rotate, |
|
}; |
|
const 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 { |
|
axis.tickValues(tickValues); |
|
} |
|
return axis; |
|
}; |
|
Axis.prototype.getId = function getId(id) { |
|
const config = this.owner.config; |
|
return id in config.data_axes ? config.data_axes[id] : 'y'; |
|
}; |
|
Axis.prototype.getXAxisTickFormat = function getXAxisTickFormat() { |
|
const $$ = this.owner; |
|
const config = $$.config; |
|
let format = $$.isTimeSeries() ? // eslint-disable-line no-nested-ternary |
|
$$.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 isFunction(format) ? function (v) { return format.call($$, v); } : format; |
|
}; |
|
Axis.prototype.getTickValues = function getTickValues(tickValues, axis) { |
|
return tickValues ? tickValues : // eslint-disable-line no-nested-ternary,no-unneeded-ternary |
|
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) { |
|
const $$ = this.owner; |
|
const config = $$.config; |
|
let 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) { |
|
const option = this.getLabelOptionByAxisId(axisId); |
|
return isString(option) ? option : option ? option.text : null; // eslint-disable-line no-nested-ternary,max-len |
|
}; |
|
Axis.prototype.setLabelText = function setLabelText(axisId, text) { |
|
const $$ = this.owner; |
|
const config = $$.config; |
|
const 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) { |
|
const option = this.getLabelOptionByAxisId(axisId); |
|
const 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) { |
|
const $$ = 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() { |
|
const $$ = this.owner; |
|
const config = $$.config; |
|
const position = this.getXAxisLabelPosition(); |
|
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'; |
|
} |
|
}; |
|
Axis.prototype.dyForYAxisLabel = function dyForYAxisLabel() { |
|
const $$ = this.owner; |
|
const 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() { |
|
const $$ = this.owner; |
|
const 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() { |
|
const $$ = this.owner; |
|
return this.textAnchorForAxisLabel(!$$.config.axis_rotated, this.getXAxisLabelPosition()); |
|
}; |
|
Axis.prototype.textAnchorForYAxisLabel = function textAnchorForYAxisLabel() { |
|
const $$ = this.owner; |
|
return this.textAnchorForAxisLabel($$.config.axis_rotated, this.getYAxisLabelPosition()); |
|
}; |
|
Axis.prototype.textAnchorForY2AxisLabel = function textAnchorForY2AxisLabel() { |
|
const $$ = this.owner; |
|
return this.textAnchorForAxisLabel($$.config.axis_rotated, this.getY2AxisLabelPosition()); |
|
}; |
|
Axis.prototype.getMaxTickWidth = function getMaxTickWidth(id, withoutRecompute) { |
|
const $$ = this.owner; |
|
const config = $$.config; |
|
let maxWidth = 0; |
|
let targetsToShow; |
|
let scale; |
|
let axis; |
|
let dummy; |
|
let 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( |
|
scale, |
|
$$.yOrient, |
|
config.axis_y_tick_format, |
|
$$.yAxisTickValues, |
|
false, |
|
true, |
|
true |
|
); |
|
} else if (id === 'y2') { |
|
scale = $$.y2.copy().domain($$.getYDomain(targetsToShow, 'y2')); |
|
axis = this.getYAxis( |
|
scale, |
|
$$.y2Orient, |
|
config.axis_y2_tick_format, |
|
$$.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 () { |
|
const box = this.getBoundingClientRect(); |
|
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) { |
|
const $$ = this.owner; |
|
const axisXLabel = $$.main.select('.' + CLASS.axisX + ' .' + CLASS.axisXLabel); |
|
const axisYLabel = $$.main.select('.' + CLASS.axisY + ' .' + CLASS.axisYLabel); |
|
const 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) { |
|
const 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) { // eslint-disable-line max-len |
|
const $$ = this.owner; |
|
const length = $$.config.axis_rotated ? $$.width : $$.height; |
|
return domainLength * (pixels / length); |
|
}; |
|
Axis.prototype.generateTickValues = function generateTickValues(values, tickCount, forTimeSeries) { |
|
let tickValues = values; |
|
let targetCount; |
|
let start; |
|
let end; |
|
let count; |
|
let interval; |
|
let i; |
|
let 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((a, b) => a - b); } |
|
return tickValues; |
|
}; |
|
Axis.prototype.generateTransitions = function generateTransitions(duration) { |
|
let $$ = this.owner; |
|
let 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(transitions, isHidden) { |
|
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); |
|
transitions.axisSubX.call($$.subXAxis); |
|
}; |
|
|
|
export default Axis;
|
|
|