@antv/g2
Version:
the Grammar of Graphics in Javascript
832 lines • 34.5 kB
JavaScript
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import { Path, AABB } from '@antv/g';
import { path as d3Path } from '@antv/vendor/d3-path';
import { sort, bisector } from '@antv/vendor/d3-array';
import { filter } from '@antv/util';
import { select } from '../utils/selection';
import { mapObject } from '../utils/array';
import { ELEMENT_CLASS_NAME, PLOT_CLASS_NAME, } from '../runtime';
import { isOrdinalScale } from '../utils/scale';
import { rect } from '../shape/interval/color';
import { isPolar, isTranspose } from '../utils/coordinate';
import { getStyle } from '../utils/style';
import { reorder } from '../shape/utils';
import { angle, angleBetween, sub } from '../utils/vector';
import { traverseElements } from '../utils/traverse-elements';
/**
* Given root of chart returns elements to be manipulated
*/
export function selectG2Elements(root) {
return select(root)
.selectAll(`.${ELEMENT_CLASS_NAME}`)
.nodes()
.filter((d) => !d.__removed__);
}
export function selectFacetG2Elements(target, viewInstances) {
return selectFacetViews(target, viewInstances).flatMap(({ container }) => selectG2Elements(container));
}
export function selectFacetViews(target, viewInstances) {
return viewInstances.filter((d) => d !== target && d.options.parentKey === target.options.key);
}
export function selectPlotArea(root) {
return select(root).select(`.${PLOT_CLASS_NAME}`).node();
}
export function bboxOf(element) {
// The geometry bounds of a group is empty, so return the render bounds.
if (element.tagName === 'g')
return element.getRenderBounds();
// Compute the geometry bounds related to the parent.
const bounds = element.getGeometryBounds();
const aabb = new AABB();
aabb.setFromTransformedAABB(bounds, element.getWorldTransform());
return aabb;
}
export function mousePosition(target, event) {
const { offsetX, offsetY } = event;
const bbox = bboxOf(target);
const { min: [x, y], max: [x1, y1], } = bbox;
const isOutX = offsetX < x || offsetX > x1;
const isOutY = offsetY < y || offsetY > y1;
if (isOutX || isOutY)
return null;
return [offsetX - x, offsetY - y];
}
/**
* @todo Pass bbox rather than calc it here.
*/
export function brushMousePosition(target, event) {
const { offsetX, offsetY } = event;
const [x, y, x1, y1] = boundsOfBrushArea(target);
return [
Math.min(x1, Math.max(x, offsetX)) - x,
Math.min(y1, Math.max(y, offsetY)) - y,
];
}
export function boundsOfBrushArea(target) {
// Calc bbox after clipping.
const bbox = target.getRenderBounds();
const { min: [x0, y0], max: [x1, y1], } = bbox;
return [x0, y0, x1, y1];
}
export function createColorKey(view) {
return (element) => element.__data__.color;
}
export function createXKey(view) {
return (element) => element.__data__.x;
}
export function createDatumof(view) {
const views = Array.isArray(view) ? view : [view];
const keyData = new Map(views.flatMap((view) => {
const marks = Array.from(view.markState.keys());
return marks.map((mark) => [keyed(view.key, mark.key), mark.data]);
}));
return (element) => {
const { index, markKey, viewKey } = element.__data__;
const data = keyData.get(keyed(viewKey, markKey));
return data[index];
};
}
/**
* A state manager for G2Element.
* The keys for each state's style start with the state name.
* { selectedFill, selectedStroke } is for selected state.
* { unselectedFill, unselectedStroke } is for unselected state.
*/
/**
* Define state priorities, higher number means higher priority.
*/
const STATE_PRIORITIES = {
selected: 3,
unselected: 3,
active: 2,
inactive: 2,
default: 1,
};
/**
* Define state groups, states in the same group are mutually exclusive.
*/
const STATE_GROUPS = {
selection: ['selected', 'unselected'],
highlight: ['active', 'inactive'],
};
const setElementAttribute = (element, k, v) => {
traverseElements(element, (el) => {
if ('setAttribute' in el && typeof el.setAttribute === 'function') {
el.setAttribute(k, v);
}
});
};
export function createUseState(style, elements) {
// Apply interaction style to all elements.
elements.forEach((element) => {
// @ts-ignore
const currentStyle = element.__interactionStyle__;
if (currentStyle) {
// @ts-ignore
element.__interactionStyle__ = Object.assign(Object.assign({}, currentStyle), style);
}
else {
// @ts-ignore
element.__interactionStyle__ = style;
}
});
return (valueof = (d, element) => d, setAttribute = setElementAttribute) => useState(undefined, valueof, setAttribute);
}
export function useState(style, valueof = (d, element) => d, setAttribute = setElementAttribute) {
const STATES = '__states__';
const ORIGINAL = '__ordinal__';
// Get state priority.
const getStatePriority = (stateName) => STATE_PRIORITIES[stateName] || STATE_PRIORITIES.default;
// Get the group that a state belongs to.
const getStateGroup = (stateName) => {
var _a;
return (_a = Object.entries(STATE_GROUPS).find(([_, states]) => states.includes(stateName))) === null || _a === void 0 ? void 0 : _a[0];
};
// Mix style for each state and apply it to element.
const applyState = (element) => {
var _a;
const { [STATES]: states = [], [ORIGINAL]: original = {} } = element;
// Sort states by priority.
const sortedStates = [...states].sort((a, b) => getStatePriority(b) - getStatePriority(a));
// Create a Map to track the highest priority state for each style attribute.
const styleAttributeMap = new Map();
// Iterate through all states to find the highest priority state for each style attribute.
for (const state of sortedStates) {
// If style exists, use it directly, else use interaction style on element.
const stateStyles = ((_a = (style !== null && style !== void 0 ? style : element.__interactionStyle__)) === null || _a === void 0 ? void 0 : _a[state]) || {};
for (const [key, value] of Object.entries(stateStyles)) {
if (!styleAttributeMap.has(key)) {
styleAttributeMap.set(key, value);
}
}
}
// Apply styles including original styles.
const finalStyle = Object.assign({}, original);
for (const [key, value] of styleAttributeMap.entries()) {
finalStyle[key] = value;
}
if (Object.keys(finalStyle).length === 0)
return;
// Apply final styles to the element.
for (const [key, value] of Object.entries(finalStyle)) {
const currentValue = getStyle(element, key);
const v = valueof(value, element);
setAttribute(element, key, v);
// Store the attribute if it does not exist in original.
if (!(key in original))
original[key] = currentValue;
}
element[ORIGINAL] = original;
};
const initState = (element) => {
if (element[STATES])
return;
element[STATES] = [];
return;
};
/**
* Update states and update element, handle conflict states automatically.
*/
const updateState = (element, ...states) => {
initState(element);
const currentStates = element[STATES];
// Collect all new state groups.
const newStateGroups = new Set(states
.map((state) => getStateGroup(state))
.filter((group) => group !== undefined));
// Exclude old states that are in the new state group.
const remainingStates = currentStates.filter((existingState) => !newStateGroups.has(getStateGroup(existingState)));
element[STATES] = [...remainingStates, ...states];
applyState(element);
};
/**
* Set the states and update element.
*/
const setState = (element, ...states) => {
initState(element);
element[STATES] = [...states];
applyState(element);
};
/**
* Remove the states and update element.
*/
const removeState = (element, ...states) => {
initState(element);
for (const state of states) {
const index = element[STATES].indexOf(state);
if (index !== -1) {
element[STATES].splice(index, 1);
}
}
applyState(element);
};
const hasState = (element, state) => {
initState(element);
return element[STATES].indexOf(state) !== -1;
};
return {
setState,
updateState,
removeState,
hasState,
};
}
function isEmptyObject(obj) {
if (obj === undefined)
return true;
if (typeof obj !== 'object')
return false;
return Object.keys(obj).length === 0;
}
// A function to generate key for mark each view.
function keyed(viewKey, markKey) {
return `${viewKey},${markKey}`;
}
export function mergeState(options, states) {
// Index state by mark key and view key.
const views = Array.isArray(options) ? options : [options];
const markState = views.flatMap((view) => view.marks.map((mark) => [keyed(view.key, mark.key), mark.state]));
const state = {};
// Update each specified state.
for (const descriptor of states) {
const [key, defaults] = Array.isArray(descriptor)
? descriptor
: [descriptor, {}];
// Update each specified mark state.
state[key] = markState.reduce((merged, mark) => {
// Normalize state.
const [markKey, markState = {}] = mark;
const selectedState = isEmptyObject(markState[key])
? defaults
: markState[key];
// Update each state attribute.
for (const [attr, value] of Object.entries(selectedState)) {
const oldValue = merged[attr];
const newValue = (data, index, array, element) => {
const k = keyed(element.__data__.viewKey, element.__data__.markKey);
if (markKey !== k)
return oldValue === null || oldValue === void 0 ? void 0 : oldValue(data, index, array, element);
if (typeof value !== 'function')
return value;
return value(data, index, array, element);
};
merged[attr] = newValue;
}
return merged;
}, {});
}
return state;
}
// @todo Support elements from different view.
export function createValueof(elements, datum) {
const elementIndex = new Map(elements.map((d, i) => [d, i]));
const fa = datum ? elements.map(datum) : elements;
return (d, e) => {
if (typeof d !== 'function')
return d;
const i = elementIndex.get(e);
const fe = datum ? datum(e) : e;
return d(fe, i, fa, e);
};
}
export function renderLink(_a) {
var { link = false, valueof = (d, element) => d, coordinate } = _a, style = __rest(_a, ["link", "valueof", "coordinate"]);
const LINK_CLASS_NAME = 'element-link';
if (!link)
return [() => { }, () => { }];
const pointsOf = (element) => element.__data__.points;
const pathPointsOf = (P0, P1) => {
const [, p1, p2] = P0;
const [p0, , , p3] = P1;
const P = [p1, p0, p3, p2];
return P;
};
const append = (elements) => {
var _a;
if (elements.length <= 1)
return;
// Sort elements by normalized x to avoid cross.
const sortedElements = sort(elements, (e0, e1) => {
const { x: x0 } = e0.__data__;
const { x: x1 } = e1.__data__;
const dx = x0 - x1;
return dx;
});
for (let i = 1; i < sortedElements.length; i++) {
const p = d3Path();
const e0 = sortedElements[i - 1];
const e1 = sortedElements[i];
const [p0, p1, p2, p3] = pathPointsOf(pointsOf(e0), pointsOf(e1));
p.moveTo(...p0);
p.lineTo(...p1);
p.lineTo(...p2);
p.lineTo(...p3);
p.closePath();
const _b = mapObject(style, (d) => valueof(d, e0)), { fill = e0.getAttribute('fill') } = _b, rest = __rest(_b, ["fill"]);
const link = new Path({
className: LINK_CLASS_NAME,
style: Object.assign({ d: p.toString(), fill, zIndex: -2 }, rest),
});
// @ts-ignore
(_a = e0.link) === null || _a === void 0 ? void 0 : _a.remove();
e0.parentNode.appendChild(link);
// @ts-ignore
e0.link = link;
}
};
const remove = (element) => {
var _a;
(_a = element.link) === null || _a === void 0 ? void 0 : _a.remove();
element.link = null;
};
return [append, remove];
}
// Apply translate to mock slice out.
export function offsetTransform(element, offset, coordinate) {
const append = (t) => {
const { transform } = element.style;
return transform ? `${transform} ${t}` : t;
};
if (isPolar(coordinate)) {
const { points } = element.__data__;
const [p0, p1] = isTranspose(coordinate) ? reorder(points) : points;
const center = coordinate.getCenter();
const v0 = sub(p0, center);
const v1 = sub(p1, center);
const a0 = angle(v0);
const da = angleBetween(v0, v1);
const amid = a0 + da / 2;
const dx = offset * Math.cos(amid);
const dy = offset * Math.sin(amid);
return append(`translate(${dx}, ${dy})`);
}
if (isTranspose(coordinate))
return append(`translate(${offset}, 0)`);
return append(`translate(0, ${-offset})`);
}
export function renderBackground(_a) {
var { document, background, scale, coordinate, valueof } = _a, rest = __rest(_a, ["document", "background", "scale", "coordinate", "valueof"]);
const BACKGROUND_CLASS_NAME = 'element-background';
// Don't have background.
if (!background)
return [() => { }, () => { }];
const extentOf = (scale, x, padding) => {
const ax = scale.invert(x);
const mid = x + scale.getBandWidth(ax) / 2;
const half = scale.getStep(ax) / 2;
const offset = half * padding;
return [mid - half + offset, mid + half - offset];
};
const sizeXOf = (element, padding) => {
const { x: scaleX } = scale;
if (!isOrdinalScale(scaleX))
return [0, 1];
const { __data__: data } = element;
const { x } = data;
const [e1, e2] = extentOf(scaleX, x, padding);
return [e1, e2];
};
const sizeYOf = (element, padding) => {
const { y: scaleY } = scale;
if (!isOrdinalScale(scaleY))
return [0, 1];
const { __data__: data } = element;
const { y } = data;
const [e1, e2] = extentOf(scaleY, y, padding);
return [e1, e2];
};
const bandShapeOf = (element, style) => {
const { padding } = style;
const [x1, x2] = sizeXOf(element, padding);
const [y1, y2] = sizeYOf(element, padding);
const points = [
[x1, y1],
[x2, y1],
[x2, y2],
[x1, y2],
].map((d) => coordinate.map(d));
const { __data__: data } = element;
const { y: dy, y1: dy1 } = data;
return rect(document, points, { y: dy, y1: dy1 }, coordinate, style);
};
// Shape without ordinal style.
// Clone and scale it.
const cloneShapeOf = (element, style) => {
const { transform = 'scale(1.2, 1.2)', transformOrigin = 'center center', stroke = '' } = style, rest = __rest(style, ["transform", "transformOrigin", "stroke"]);
const finalStyle = Object.assign({ transform, transformOrigin, stroke }, rest);
const shape = element.cloneNode(true);
for (const [key, value] of Object.entries(finalStyle)) {
shape.style[key] = value;
}
return shape;
};
const isOrdinalShape = () => {
const { x, y } = scale;
return [x, y].some(isOrdinalScale);
};
const append = (element) => {
if (element.background)
element.background.remove();
const _a = mapObject(rest, (d) => valueof(d, element)), { fill = '#CCD6EC', fillOpacity = 0.3, zIndex = -2, padding = 0.001, lineWidth = 0 } = _a, style = __rest(_a, ["fill", "fillOpacity", "zIndex", "padding", "lineWidth"]);
const finalStyle = Object.assign(Object.assign({}, style), { fill,
fillOpacity,
zIndex,
padding,
lineWidth });
const shapeOf = isOrdinalShape() ? bandShapeOf : cloneShapeOf;
const shape = shapeOf(element, finalStyle);
shape.className = BACKGROUND_CLASS_NAME;
element.parentNode.parentNode.appendChild(shape);
element.background = shape;
};
const remove = (element) => {
var _a;
(_a = element.background) === null || _a === void 0 ? void 0 : _a.remove();
element.background = null;
};
const is = (element) => {
return element.className === BACKGROUND_CLASS_NAME;
};
return [append, remove, is];
}
export function setCursor(root, cursor) {
// @ts-ignore
const canvas = root.getRootNode().defaultView;
const dom = canvas.getContextService().getDomElement();
if (dom === null || dom === void 0 ? void 0 : dom.style) {
root.cursor = dom.style.cursor;
dom.style.cursor = cursor;
}
}
export function restoreCursor(root) {
setCursor(root, root.cursor);
}
export function selectElementByData(elements, data, datum) {
return elements.find((d) => Object.entries(data).every(([key, value]) => datum(d)[key] === value));
}
export function getPointsR(point, nextPoint) {
return Math.sqrt(Math.pow(point[0] - nextPoint[0], 2) + Math.pow(point[1] - nextPoint[1], 2));
}
// Points create path.
export function getPointsPath(points, isClose = false) {
const path = filter(points, (d) => !!d).map((d, i) => {
return [i === 0 ? 'M' : 'L', ...d];
});
if (isClose) {
path.push(['Z']);
}
return path;
}
// Get element.
export function getElements(plot) {
return plot.querySelectorAll('.element');
}
// Get Theta coordinate round path.
export function getThetaPath(center, points, isBig = 0) {
const path = [['M', ...points[1]]];
const innerRadius = getPointsR(center, points[1]);
const outerRadius = getPointsR(center, points[0]);
if (innerRadius === 0) {
path.push(['L', ...points[3]], ['A', outerRadius, outerRadius, 0, isBig, 1, ...points[0]], ['Z']);
}
else {
path.push(['A', innerRadius, innerRadius, 0, isBig, 0, ...points[2]], ['L', ...points[3]], ['A', outerRadius, outerRadius, 0, isBig, 1, ...points[0]], ['Z']);
}
return path;
}
export function maybeRoot(node, rootOf) {
if (rootOf(node))
return node;
let root = node.parent;
while (root && !rootOf(root))
root = root.parent;
return root;
}
export const VALID_FIND_BY_X_MARKS = ['interval', 'point', 'density'];
/**
* @description Create function that can find element by event.
* @returns Element find function.
*/
export function createFindElementByEvent({ elementsof, root, coordinate, scale, validFindByXMarks = VALID_FIND_BY_X_MARKS, }) {
var _a, _b;
let elements = elementsof(root);
const getValidFindByXMarks = (d) => validFindByXMarks.includes(d.markType);
const hasValidFindByXMarks = elements.find(getValidFindByXMarks);
// Try to find element by x position.
if (hasValidFindByXMarks) {
elements = elements.filter(getValidFindByXMarks);
const scaleX = scale.x;
const scaleSeries = scale.series;
const bandWidth = (_b = (_a = scaleX === null || scaleX === void 0 ? void 0 : scaleX.getBandWidth) === null || _a === void 0 ? void 0 : _a.call(scaleX)) !== null && _b !== void 0 ? _b : 0;
const xof = scaleSeries
? (d) => {
var _a, _b;
const seriesCount = Math.round(1 / ((_a = scaleSeries.valueBandWidth) !== null && _a !== void 0 ? _a : 1));
return (d.__data__.x +
((_b = d.__data__.series) !== null && _b !== void 0 ? _b : 0) * bandWidth +
bandWidth / (seriesCount * 2));
}
: (d) => d.__data__.x + bandWidth / 2;
// Sort for bisector search.
elements.sort((a, b) => xof(a) - xof(b));
return (event) => {
const mouse = mousePosition(root, event);
if (!mouse)
return;
const [abstractX] = coordinate.invert(mouse);
const search = bisector(xof).center;
const i = search(elements, abstractX);
const target = elements[i];
return target;
};
}
// If there is no valid element find by x, just return the target element.
return (event) => {
const { target } = event;
return maybeRoot(target, (node) => {
if (!node.classList)
return false;
return node.classList.includes('element');
});
};
}
/**
* Calculate adaptive sensitivity multiplier (inversely proportional to range).
*
* - Smaller range → higher sensitivity
* - Larger range → lower sensitivity
*
* @param range Current range (0-1)
* @returns Sensitivity multiplier (0.1x ~ 100x)
*/
export function calculateSensitivityMultiplier(range) {
// Base sensitivity factor (adjust this to tune overall responsiveness)
const BASE_FACTOR = 0.01;
const MIN_RANGE_FOR_SENSITIVITY = 0.0001;
const MIN_MULTIPLIER = 0.1;
const MAX_MULTIPLIER = 100;
// Simple inverse relationship with reasonable bounds
const multiplier = BASE_FACTOR / Math.max(range, MIN_RANGE_FOR_SENSITIVITY);
// Clamp to reasonable range: 0.1x to 100x
return Math.max(MIN_MULTIPLIER, Math.min(MAX_MULTIPLIER, multiplier));
}
/**
* Check if a value is considered "falsy" for configuration purposes.
* Returns true for false, null, or undefined values.
* Uses type predicate for better type safety.
*
* @param value The value to check
* @returns true if the value is falsy (false, null, undefined)
*/
export function isFalsyValue(value) {
return value === false || value === null || value === undefined;
}
/**
* Extract channel data with preserved X-Y relationships from all marks in a view.
* Supports multi-mark scenarios, bin transforms, and array-encoded Y values.
*
* @param view The view object containing markState
* @returns Object containing flattened values for backward compatibility and structured mark data
*/
export function extractChannelValues(view) {
var _a, _b;
const allXChannelValues = [];
const allYChannelValues = [];
const markDataPairs = [];
const marks = view.markState;
if (marks) {
for (const [mark, state] of marks.entries()) {
if (state === null || state === void 0 ? void 0 : state.channels) {
const channelData = {};
// Process each channel for the current mark
for (const channel of state.channels) {
if ((channel === null || channel === void 0 ? void 0 : channel.name) === 'x' && ((_a = channel.values) === null || _a === void 0 ? void 0 : _a.length) > 0) {
// Collect X values (supports bin transforms with multiple values)
let xValues = [];
for (const valueItem of channel.values) {
if (valueItem === null || valueItem === void 0 ? void 0 : valueItem.value) {
xValues = xValues.concat(valueItem.value);
allXChannelValues.push(valueItem.value);
}
}
channelData['x'] = xValues;
}
else if (channel &&
(channel.name === 'y' || channel.name.startsWith('y')) && // Support y, y1, y2, y3, etc.
((_b = channel.values) === null || _b === void 0 ? void 0 : _b.length) > 0) {
const channelName = channel.name;
const channelValues = [];
// Handle Y and Y1+ channels for multi-Y marks (e.g., area charts, candlestick charts)
for (const valueItem of channel.values) {
if (valueItem === null || valueItem === void 0 ? void 0 : valueItem.value) {
const values = valueItem.value;
// Preserve G2's internal structure for array-encoded data
// Area charts: [[low1,low2,low3], [high1,high2,high3]]
// Line charts: [[value1,value2,value3]]
channelValues.push(values);
if (channelName === 'y' || channelName === 'y1') {
// For global domain calculation, flatten only for allYChannelValues
if (Array.isArray(values)) {
allYChannelValues.push(values.flat());
}
else {
allYChannelValues.push([values]);
}
}
}
}
// Store all Y-related channels
channelData[channelName] = channelValues;
}
}
// Store mark data with preserved X-Y relationships
const xValues = channelData['x'] || [];
const yValues = channelData['y'] || [];
if (xValues.length > 0 && yValues.length > 0) {
markDataPairs.push({
markKey: mark.key || `mark_${markDataPairs.length}`,
channelData,
});
}
}
}
}
return {
xChannelValues: allXChannelValues.flat(),
yChannelValues: allYChannelValues.flat(),
markDataPairs,
};
}
/**
* Check if there are multiple independent axis for a given channel.
* Multi-axis can be defined by:
* 1. Explicit `independent: true` in scale configuration
* 2. Different `scale.key` values for the same channel name
*
* @param channel1 - Channel name (x or y)
* @param marks - Array of marks to check
* @returns true if multiple independent axis exist
*/
export function hasIndependentXYScale(channel1, marks) {
const scaleKeys = new Set();
for (const mark of marks) {
const { scale: markScale } = mark;
const channelScale = markScale === null || markScale === void 0 ? void 0 : markScale[channel1];
if (!channelScale)
continue;
// Early return if explicit independent flag is found
if (channelScale.independent) {
return true;
}
// Collect scale keys, treating undefined/missing key as 'default'
const key = channelScale.key || 'default';
scaleKeys.add(key);
// Early return if multiple different keys are detected
if (scaleKeys.size > 1) {
return true;
}
}
// No multiple axes detected
return false;
}
/**
* Calculate multi-axis channel domains for slider filtering.
* When independent scales are detected, generates separate domains for each axis (x1, y1, x2, y2, etc.)
*
* @param view The view object containing markState
* @param initDomain Initial domain configuration
* @param scaleX X scale instance
* @param scaleY Y scale instance
* @param independentInfo Pre-computed independent scale information
* @returns Extended channelDomain object with multi-axis support
*/
export function calculateMultiAxisChannelDomains(view, initDomain, scaleX, scaleY, independentInfo) {
var _a, _b, _c, _d;
const channelDomain = {
x: initDomain.x ||
scaleX.getOptions().domain ||
[],
y: initDomain.y ||
scaleY.getOptions().domain ||
[],
};
// Use pre-computed info if available, otherwise calculate
const info = independentInfo || calculateAllIndependentScaleInfo(view);
const { hasIndependentX, hasIndependentY } = info;
if (hasIndependentX || hasIndependentY) {
let xIndex = 1;
let yIndex = 1;
// Iterate through marks to collect independent scale domains
for (const [mark, state] of view.markState.entries()) {
if (state === null || state === void 0 ? void 0 : state.channels) {
// Process independent X scales
if (hasIndependentX) {
const xChannel = state.channels.find((ch) => ch.name === 'x');
if ((_b = (_a = mark === null || mark === void 0 ? void 0 : mark.scale) === null || _a === void 0 ? void 0 : _a.x) === null || _b === void 0 ? void 0 : _b.independent) {
const xKey = `x${xIndex}`;
channelDomain[xKey] = xChannel.scale.domain;
xIndex++;
}
}
// Process independent Y scales
if (hasIndependentY) {
const yChannel = state.channels.find((ch) => ch.name === 'y');
if ((_d = (_c = mark === null || mark === void 0 ? void 0 : mark.scale) === null || _c === void 0 ? void 0 : _c.y) === null || _d === void 0 ? void 0 : _d.independent) {
const yKey = `y${yIndex}`;
channelDomain[yKey] = yChannel.scale.domain;
yIndex++;
}
}
}
}
}
return channelDomain;
}
/**
* Calculate all independent scale information in one pass
* This function performs a single traversal to compute all independent scale related information,
* avoiding repeated calculations throughout the codebase.
*
* Multi-axis detection logic:
* 1. Explicit independent: scale.y.independent = true
* 2. Different scale keys: scale.y.key = 'left' vs scale.y.key = 'right'
*
* @param view The view object containing markState
* @returns Complete independent scale information
*/
export function calculateAllIndependentScaleInfo(view) {
var _a, _b, _c, _d, _e, _f, _g, _h;
const marks = Array.from(view.markState.keys());
const hasIndependentX = hasIndependentXYScale('x', marks);
const hasIndependentY = hasIndependentXYScale('y', marks);
const marksWithSharedX = [];
const marksWithIndependentX = [];
const marksWithSharedY = [];
const marksWithIndependentY = [];
const markToXScaleMap = new Map();
const markToYScaleMap = new Map();
// Track scale key assignments
const xScaleKeyMap = new Map(); // key -> index
const yScaleKeyMap = new Map(); // key -> index
let xIndex = 1;
let yIndex = 1;
// Single traversal to compute all classifications and mappings
for (const [mark] of view.markState.entries()) {
const markKey = mark.key;
// X axis processing
const xScaleKey = ((_b = (_a = mark === null || mark === void 0 ? void 0 : mark.scale) === null || _a === void 0 ? void 0 : _a.x) === null || _b === void 0 ? void 0 : _b.key) || 'x';
const hasExplicitIndependentX = !!((_d = (_c = mark === null || mark === void 0 ? void 0 : mark.scale) === null || _c === void 0 ? void 0 : _c.x) === null || _d === void 0 ? void 0 : _d.independent);
if (hasExplicitIndependentX || (hasIndependentX && xScaleKey !== 'x')) {
marksWithIndependentX.push(markKey);
// Assign scale name based on key
// Always use indexed names (x1, x2, ...) to avoid collision with shared 'x'
if (!xScaleKeyMap.has(xScaleKey)) {
xScaleKeyMap.set(xScaleKey, xIndex++);
}
const scaleIndex = xScaleKeyMap.get(xScaleKey);
markToXScaleMap.set(markKey, `x${scaleIndex}`);
}
else {
marksWithSharedX.push(markKey);
markToXScaleMap.set(markKey, 'x');
}
// Y axis processing
const yScaleKey = ((_f = (_e = mark === null || mark === void 0 ? void 0 : mark.scale) === null || _e === void 0 ? void 0 : _e.y) === null || _f === void 0 ? void 0 : _f.key) || 'y';
const hasExplicitIndependentY = !!((_h = (_g = mark === null || mark === void 0 ? void 0 : mark.scale) === null || _g === void 0 ? void 0 : _g.y) === null || _h === void 0 ? void 0 : _h.independent);
if (hasExplicitIndependentY || (hasIndependentY && yScaleKey !== 'y')) {
marksWithIndependentY.push(markKey);
// Assign scale name based on key
// Always use indexed names (y1, y2, ...) to avoid collision with shared 'y'
if (!yScaleKeyMap.has(yScaleKey)) {
yScaleKeyMap.set(yScaleKey, yIndex++);
}
const scaleIndex = yScaleKeyMap.get(yScaleKey);
markToYScaleMap.set(markKey, `y${scaleIndex}`);
}
else {
marksWithSharedY.push(markKey);
markToYScaleMap.set(markKey, 'y');
}
}
return {
hasIndependentX,
hasIndependentY,
marksWithSharedX,
marksWithIndependentX,
marksWithSharedY,
marksWithIndependentY,
markToXScaleMap,
markToYScaleMap,
};
}
//# sourceMappingURL=utils.js.map