import { axisTop as d3AxisTop, axisBottom as d3AxisBottom, axisLeft as d3AxisLeft, axisRight as d3AxisRight} from "d3-axis";import {scaleLinear as d3ScaleLinear} from "d3-scale";import CLASS from "../config/classes";import {capitalize, isArray, isFunction, isString, isValue, isEmpty, isNumber, isObjectType, mergeObj, sortValue} from "../internals/util";import AxisRenderer from "./AxisRenderer";
const isHorizontal = ($$, forHorizontal) => { const isRotated = $$.config.axis_rotated;
return forHorizontal ? isRotated : !isRotated;};
const getAxisClassName = id => `${CLASS.axis} ${CLASS[`axis${capitalize(id)}`]}`;
export default class Axis { constructor(owner) { this.owner = owner; this.setOrient(); }
init() { const $$ = this.owner; const config = $$.config; const isRotated = config.axis_rotated; const main = $$.main; const target = ["x", "y"];
config.axis_y2_show && target.push("y2");
$$.axesList = {};
target.forEach(v => { const classAxis = getAxisClassName(v); const classLabel = CLASS[`axis${v.toUpperCase()}Label`];
$$.axes[v] = main.append("g") .attr("class", classAxis) .attr("clip-path", () => { let res = null;
if (v === "x") { res = $$.clipPathForXAxis; } else if (v === "y" && config.axis_y_inner) { res = $$.clipPathForYAxis; }
return res; }) .attr("transform", $$.getTranslate(v)) .style("visibility", config[`axis_${v}_show`] ? "visible" : "hidden");
$$.axes[v].append("text") .attr("class", classLabel) .attr("transform", ["rotate(-90)", null][ v === "x" ? +!isRotated : +isRotated ]) .style("text-anchor", () => this.textAnchorForAxisLabel(v));
this.generateAxes(v); }); }
setOrient() { const $$ = this.owner; const config = $$.config; const isRotated = config.axis_rotated; const yInner = config.axis_y_inner; const y2Inner = config.axis_y2_inner;
$$.xOrient = isRotated ? "left" : "bottom"; $$.yOrient = isRotated ? (yInner ? "top" : "bottom") : (yInner ? "right" : "left"); $$.y2Orient = isRotated ? (y2Inner ? "bottom" : "top") : (y2Inner ? "left" : "right"); $$.subXOrient = isRotated ? "left" : "bottom"; }
generateAxes(id) { const $$ = this.owner; const config = $$.config; const axes = []; const axesConfig = config[`axis_${id}_axes`]; const isRotated = config.axis_rotated; let d3Axis;
if (id === "x") { d3Axis = isRotated ? d3AxisLeft : d3AxisBottom; } else if (id === "y") { d3Axis = isRotated ? d3AxisBottom : d3AxisLeft; } else if (id === "y2") { d3Axis = isRotated ? d3AxisTop : d3AxisRight; }
if (axesConfig.length) { axesConfig.forEach(v => { const tick = v.tick || {}; const scale = $$[id].copy();
v.domain && scale.domain(v.domain);
axes.push( d3Axis(scale) .ticks(tick.count) .tickFormat(tick.format || (x => x)) .tickValues(tick.values) .tickSizeOuter(tick.outer === false ? 0 : 6) ); }); }
$$.axesList[id] = axes; }
updateAxes() { const $$ = this.owner; const config = $$.config;
Object.keys($$.axesList).forEach(id => { const axesConfig = config[`axis_${id}_axes`]; const scale = $$[id].copy(); const range = scale.range();
$$.axesList[id].forEach((v, i) => { const axisRange = v.scale().range();
if (!range.every((v, i) => v === axisRange[i])) { v.scale().range(range); }
const className = `${getAxisClassName(id)}-${i + 1}`; let g = $$.main.select(`.${className.replace(/\s/, ".")}`);
if (g.empty()) { g = $$.main.append("g") .attr("class", className) .style("visibility", config[`axis_${id}_show`] ? "visible" : "hidden") .call(v); } else { axesConfig[i].domain && scale.domain(axesConfig[i].domain);
$$.xAxis.helper.transitionise(g) .call(v.scale(scale)); }
g.attr("transform", $$.getTranslate(id, i + 1)); }); }); }
getAxis(name, scale, outerTick, noTransition, noTickTextRotate) { const $$ = this.owner; const config = $$.config; const isX = /^(x|subX)$/.test(name); const type = isX ? "x" : name;
const isCategory = isX && $$.isCategorized(); const orient = $$[`${name}Orient`]; const tickFormat = isX ? $$.xAxisTickFormat : config[`axis_${name}_tick_format`]; const tickTextRotate = noTickTextRotate ? 0 : $$.getAxisTickRotate(type); let tickValues = isX ? $$.xAxisTickValues : $$[`${name}AxisTickValues`];
const axisParams = mergeObj({ outerTick, noTransition, config, name, tickTextRotate }, isX && { isCategory, tickMultiline: config.axis_x_tick_multiline, tickWidth: config.axis_x_tick_width, tickTitle: isCategory && config.axis_x_tick_tooltip && $$.api.categories(), orgXScale: $$.x });
if (!isX) { axisParams.tickStepSize = config[`axis_${type}_tick_stepSize`]; }
const axis = new AxisRenderer(axisParams) .scale((isX && $$.zoomScale) || scale) .orient(orient);
if (isX && $$.isTimeSeries() && tickValues && !isFunction(tickValues)) { tickValues = tickValues.map(v => $$.parseDate(v)); } else if (!isX && $$.isTimeSeriesY()) { axis.ticks(config.axis_y_tick_time_value); tickValues = null; }
tickValues && axis.tickValues(tickValues);
axis.tickFormat( tickFormat || ( !isX && ($$.isStackNormalized() && (x => `${x}%`)) ) );
if (isCategory) { axis.tickCentered(config.axis_x_tick_centered);
if (isEmpty(config.axis_x_tick_culling)) { config.axis_x_tick_culling = false; } }
const tickCount = config[`axis_${type}_tick_count`];
tickCount && axis.ticks(tickCount);
return axis; }
updateXAxisTickValues(targets, axis) { const $$ = this.owner; const config = $$.config; const fit = config.axis_x_tick_fit; let count = config.axis_x_tick_count; let values;
if (fit || (count && fit)) { values = $$.mapTargetsToUniqueXs(targets);
if ($$.isCategorized() && count > values.length) { count = values.length; }
values = this.generateTickValues( values, count, $$.isTimeSeries() ); }
if (axis) { axis.tickValues(values); } else if ($$.xAxis) { $$.xAxis.tickValues(values); $$.subXAxis.tickValues(values); }
return values; }
getId(id) { const config = this.owner.config;
return id in config.data_axes ? config.data_axes[id] : "y"; }
getXAxisTickFormat() { const $$ = this.owner; const config = $$.config; const tickFormat = config.axis_x_tick_format; const isTimeSeries = $$.isTimeSeries(); const isCategorized = $$.isCategorized(); let format;
if (tickFormat) { if (isFunction(tickFormat)) { format = tickFormat; } else if (isTimeSeries) { format = date => (date ? $$.axisTimeFormat(tickFormat)(date) : ""); } } else { format = isTimeSeries ? $$.defaultAxisTimeFormat : ( isCategorized ? $$.categoryName : v => (v < 0 ? v.toFixed(0) : v) ); }
return isFunction(format) ? v => format.apply($$, isCategorized ? [v, $$.categoryName(v)] : [v] ) : format; }
getTickValues(id) { const $$ = this.owner; const tickValues = $$.config[`axis_${id}_tick_values`]; const axis = $$[`${id}Axis`];
return (isFunction(tickValues) ? tickValues() : tickValues) || (axis ? axis.tickValues() : undefined); }
getLabelOptionByAxisId(id) { return this.owner.config[`axis_${id}_label`]; }
getLabelText(id) { const option = this.getLabelOptionByAxisId(id);
return isString(option) ? option : ( option ? option.text : null ); }
setLabelText(id, text) { const $$ = this.owner; const config = $$.config; const option = this.getLabelOptionByAxisId(id);
if (isString(option)) { config[`axis_${id}_label`] = text; } else if (option) { option.text = text; } }
getLabelPosition(id, defaultPosition) { const isRotated = this.owner.config.axis_rotated; const option = this.getLabelOptionByAxisId(id); const position = (isObjectType(option) && option.position) ? option.position : defaultPosition[+!isRotated];
const has = v => !!~position.indexOf(v);
return { isInner: has("inner"), isOuter: has("outer"), isLeft: has("left"), isCenter: has("center"), isRight: has("right"), isTop: has("top"), isMiddle: has("middle"), isBottom: has("bottom") }; }
getAxisLabelPosition(id) { return this.getLabelPosition(id, id === "x" ? ["inner-top", "inner-right"] : ["inner-right", "inner-top"]); }
getLabelPositionById(id) { return this.getAxisLabelPosition(id); }
xForAxisLabel(id) { const $$ = this.owner; const position = this.getAxisLabelPosition(id); let x = position.isMiddle ? -$$.height / 2 : 0;
if (isHorizontal($$, id !== "x")) { x = position.isLeft ? 0 : ( position.isCenter ? $$.width / 2 : $$.width ); } else if (position.isBottom) { x = -$$.height; }
return x; }
dxForAxisLabel(id) { const $$ = this.owner; const position = this.getAxisLabelPosition(id); let dx = position.isBottom ? "0.5em" : "0";
if (isHorizontal($$, id !== "x")) { dx = position.isLeft ? "0.5em" : ( position.isRight ? "-0.5em" : "0" ); } else if (position.isTop) { dx = "-0.5em"; }
return dx; }
textAnchorForAxisLabel(id) { const $$ = this.owner; const position = this.getAxisLabelPosition(id); let anchor = position.isMiddle ? "middle" : "end";
if (isHorizontal($$, id !== "x")) { anchor = position.isLeft ? "start" : ( position.isCenter ? "middle" : "end" ); } else if (position.isBottom) { anchor = "start"; }
return anchor; }
dyForAxisLabel(id) { const $$ = this.owner; const config = $$.config; const isRotated = config.axis_rotated; const isInner = this.getAxisLabelPosition(id).isInner; const tickRotate = config[`axis_${id}_tick_rotate`] ? $$.getHorizontalAxisHeight(id) : 0; const maxTickWidth = this.getMaxTickWidth(id); let dy;
if (id === "x") { const xHeight = config.axis_x_height;
if (isRotated) { dy = isInner ? "1.2em" : -25 - maxTickWidth; } else if (isInner) { dy = "-0.5em"; } else if (xHeight) { dy = xHeight - 10; } else if (tickRotate) { dy = tickRotate - 10; } else { dy = "3em"; } } else { dy = { y: ["-0.5em", 10, "3em", "1.2em", 10], y2: ["1.2em", -20, "-2.2em", "-0.5em", 15] }[id];
if (isRotated) { if (isInner) { dy = dy[0]; } else if (tickRotate) { dy = tickRotate * (id === "y2" ? -1 : 1) - dy[1]; } else { dy = dy[2]; } } else { dy = isInner ? dy[3] : ( dy[4] + ( config[`axis_${id}_inner`] ? 0 : (maxTickWidth + dy[4]) ) ) * (id === "y" ? -1 : 1); } }
return dy; }
getMaxTickWidth(id, withoutRecompute) { const $$ = this.owner; const config = $$.config; const currentTickMax = $$.currentMaxTickWidths[id]; let maxWidth = 0;
if (withoutRecompute || !config[`axis_${id}_show`] || $$.filterTargetsToShow().length === 0) { return currentTickMax.size; }
if ($$.svg) { const isYAxis = /^y2?$/.test(id); const targetsToShow = $$.filterTargetsToShow($$.data.targets); const scale = $$[id].copy().domain($$[`get${isYAxis ? "Y" : "X"}Domain`](targetsToShow, id)); const domain = scale.domain();
if ((domain[0] === domain[1] && domain.every(v => v > 0)) || (isArray(currentTickMax.domain) && currentTickMax.domain[0] === currentTickMax.domain[1]) ) { return currentTickMax.size; } else { currentTickMax.domain = domain; }
const axis = this.getAxis(id, scale, false, false, true); const tickCount = config[`axis_${id}_tick_count`]; const tickValues = config[`axis_${id}_tick_values`];
if (!tickValues && tickCount) { axis.tickValues( this.generateTickValues( domain, tickCount, isYAxis ? $$.isTimeSeriesY() : $$.isTimeSeries() )); }
!isYAxis && this.updateXAxisTickValues(targetsToShow, axis);
const dummy = $$.selectChart.append("svg") .style("visibility", "hidden") .style("position", "fixed") .style("top", "0px") .style("left", "0px");
axis.create(dummy);
dummy.selectAll("text") .each(function(d, i) { const currentTextWidth = this.getBoundingClientRect().width;
maxWidth = Math.max(maxWidth, currentTextWidth); if (id === "x") { $$.currentMaxTickWidths.x.ticks[i] = currentTextWidth; } });
dummy.remove(); }
if (maxWidth > 0) { currentTickMax.size = maxWidth; }
return currentTickMax.size; }
getXAxisTickTextY2Overflow(defaultPadding) { const $$ = this.owner; const config = $$.config; const xAxisTickRotate = $$.getAxisTickRotate("x"); const positiveRotation = xAxisTickRotate > 0 && xAxisTickRotate < 90;
if (($$.isCategorized() || $$.isTimeSeries()) && config.axis_x_tick_fit && !config.axis_x_tick_culling && !config.axis_x_tick_multiline && positiveRotation ) { const widthWithoutCurrentPaddingLeft = $$.currentWidth - $$.getCurrentPaddingLeft(); const maxOverflow = this.getXAxisTickMaxOverflow( xAxisTickRotate, widthWithoutCurrentPaddingLeft - defaultPadding ); const xAxisTickTextY2Overflow = Math.max(0, maxOverflow) + defaultPadding;
return Math.min(xAxisTickTextY2Overflow, widthWithoutCurrentPaddingLeft / 2); }
return 0; }
getXAxisTickMaxOverflow(xAxisTickRotate, widthWithoutCurrentPaddingLeft) { const $$ = this.owner; const config = $$.config; const isTimeSeries = $$.isTimeSeries();
const tickTextWidths = $$.currentMaxTickWidths.x.ticks; const tickCount = tickTextWidths.length; const {left, right} = this.x.padding; let maxOverflow = 0;
const remaining = tickCount - (isTimeSeries && config.axis_x_tick_fit ? 0.5 : 0);
for (let i = 0; i < tickCount; i++) { const tickIndex = i + 1; const rotatedTickTextWidth = Math.cos(Math.PI * xAxisTickRotate / 180) * tickTextWidths[i]; const ticksBeforeTickText = tickIndex - (isTimeSeries ? 1 : 0.5) + left;
if (ticksBeforeTickText <= 0) { continue; }
const xAxisLengthWithoutTickTextWidth = widthWithoutCurrentPaddingLeft - rotatedTickTextWidth; const tickLength = xAxisLengthWithoutTickTextWidth / ticksBeforeTickText; const remainingTicks = remaining - tickIndex;
const paddingRightLength = right * tickLength; const remainingTickWidth = (remainingTicks * tickLength) + paddingRightLength; const overflow = rotatedTickTextWidth - (tickLength / 2) - remainingTickWidth;
maxOverflow = Math.max(maxOverflow, overflow); }
let tickOffset = 0;
if (!isTimeSeries) { const scale = d3ScaleLinear() .domain([ left * -1, $$.getXDomainMax($$.data.targets) + 1 + right ]) .range([0, widthWithoutCurrentPaddingLeft - maxOverflow]);
tickOffset = (Math.ceil((scale(1) - scale(0)) / 2)); }
return maxOverflow + tickOffset; }
getXAxisPadding(tickCount) { const $$ = this.owner; let padding = $$.config.axis_x_padding;
if (isEmpty(padding)) { padding = {left: 0, right: 0}; } else { padding.left = padding.left || 0; padding.right = padding.right || 0; }
if ($$.isTimeSeries()) { const firstX = +$$.getXDomainMin($$.data.targets); const lastX = +$$.getXDomainMax($$.data.targets); const timeDiff = lastX - firstX;
const range = timeDiff + padding.left + padding.right; const relativeTickWidth = (timeDiff / tickCount) / range;
const left = padding.left / range / relativeTickWidth || 0; const right = padding.right / range / relativeTickWidth || 0;
padding = {left, right}; }
return padding; }
updateLabels(withTransition) { const $$ = this.owner; const labels = { x: $$.main.select(`.${CLASS.axisX} .${CLASS.axisXLabel}`), y: $$.main.select(`.${CLASS.axisY} .${CLASS.axisYLabel}`), y2: $$.main.select(`.${CLASS.axisY2} .${CLASS.axisY2Label}`) };
Object.keys(labels).filter(id => !labels[id].empty()) .forEach(v => { const node = labels[v];
(withTransition ? node.transition() : node) .attr("x", () => this.xForAxisLabel(v)) .attr("dx", () => this.dxForAxisLabel(v)) .attr("dy", () => this.dyForAxisLabel(v)) .text(() => this.getLabelText(v)); }); }
getPadding(padding, key, defaultValue, domainLength) { const p = isNumber(padding) ? padding : padding[key];
if (!isValue(p)) { return defaultValue; }
return this.convertPixelsToAxisPadding(p, domainLength); }
convertPixelsToAxisPadding(pixels, domainLength) { const $$ = this.owner; const length = $$.config.axis_rotated ? $$.width : $$.height;
return domainLength * (pixels / length); }
generateTickValues(values, tickCount, forTimeSeries) { let tickValues = values;
if (tickCount) { const targetCount = isFunction(tickCount) ? tickCount() : tickCount;
if (targetCount === 1) { tickValues = [values[0]]; } else if (targetCount === 2) { tickValues = [values[0], values[values.length - 1]]; } else if (targetCount > 2) { const isCategorized = this.owner.isCategorized();
const count = targetCount - 2; const start = values[0]; const end = values[values.length - 1]; const interval = (end - start) / (count + 1); let tickValue;
tickValues = [start];
for (let i = 0; i < count; i++) { tickValue = +start + interval * (i + 1); tickValues.push( forTimeSeries ? new Date(tickValue) : ( isCategorized ? Math.round(tickValue) : tickValue ) ); }
tickValues.push(end); } }
if (!forTimeSeries) { tickValues = tickValues.sort((a, b) => a - b); }
return tickValues; }
generateTransitions(duration) { const $$ = this.owner; const axes = $$.axes;
const [axisX, axisY, axisY2, axisSubX] = ["x", "y", "y2", "subx"] .map(v => { let axis = axes[v];
if (axis && duration) { axis = axis.transition().duration(duration); }
return axis; });
return {axisX, axisY, axisY2, axisSubX}; }
redraw(transitions, isHidden, isInit) { const $$ = this.owner; const opacity = isHidden ? "0" : "1";
["x", "y", "y2", "subX"].forEach(id => { const axis = $$[`${id}Axis`];
if (axis) { if (!isInit) { axis.config.withoutTransition = !$$.config.transition_duration; }
$$.axes[id.toLowerCase()].style("opacity", opacity); axis.create(transitions[`axis${capitalize(id)}`]); } });
this.updateAxes(); }
redrawAxis(targetsToShow, wth, transitions, flow, isInit) { const $$ = this.owner; const config = $$.config; const hasZoom = !!$$.zoomScale; let xDomainForZoom;
if (!hasZoom && $$.isCategorized() && targetsToShow.length === 0) { $$.x.domain([0, $$.axes.x.selectAll(".tick").size()]); }
if ($$.x && targetsToShow.length) { !hasZoom && $$.updateXDomain(targetsToShow, wth.UpdateXDomain, wth.UpdateOrgXDomain, wth.TrimXDomain);
if (!config.axis_x_tick_values) { this.updateXAxisTickValues(targetsToShow); } } else if ($$.xAxis) { $$.xAxis.tickValues([]); $$.subXAxis.tickValues([]); }
if (config.zoom_rescale && !flow) { xDomainForZoom = $$.x.orgDomain(); }
["y", "y2"].forEach(key => { const axis = $$[key];
if (axis) { const tickValues = config[`axis_${key}_tick_values`]; const tickCount = config[`axis_${key}_tick_count`];
axis.domain($$.getYDomain(targetsToShow, key, xDomainForZoom));
if (!tickValues && tickCount) { const domain = axis.domain();
$$[`${key}Axis`].tickValues( this.generateTickValues( domain, domain.every(v => v === 0) ? 1 : tickCount, $$.isTimeSeriesY() ) ); } } });
this.redraw(transitions, $$.hasArcType(), isInit);
this.updateLabels(wth.Transition);
if ((wth.UpdateXDomain || wth.UpdateXAxis || wth.Y) && targetsToShow.length) { this.setCulling(); }
if (wth.Y) { $$.subY && $$.subY.domain($$.getYDomain(targetsToShow, "y")); $$.subY2 && $$.subY2.domain($$.getYDomain(targetsToShow, "y2")); } }
setCulling() { const $$ = this.owner; const config = $$.config;
["subx", "x", "y", "y2"].forEach(type => { const axis = $$.axes[type];
const id = type === "subx" ? "x" : type; const toCull = config[`axis_${id}_tick_culling`];
if (axis && toCull) { const tickText = axis.selectAll(".tick text"); const tickValues = sortValue(tickText.data()); const tickSize = tickValues.length; const cullingMax = config[`axis_${id}_tick_culling_max`]; let intervalForCulling;
if (tickSize) { for (let i = 1; i < tickSize; i++) { if (tickSize / i < cullingMax) { intervalForCulling = i; break; } }
tickText.each(function(d) { this.style.display = tickValues.indexOf(d) % intervalForCulling ? "none" : "block"; }); } else { tickText.style("display", "block"); }
if (type === "x") { const clipPath = $$.clipXAxisTickMaxWidth ? $$.clipPathForXAxisTickTexts : null;
$$.svg.selectAll(`.${CLASS.axisX} .tick text`) .attr("clip-path", clipPath); } } }); }}