uplot-webgpu 0.1.0 → 0.2.0

package/scripts/ts/uPlot.ts

@@ -0,0 +1,3732 @@
+import {
+	FEAT_TIME,
+	FEAT_LEGEND,
+
+	FEAT_POINTS,
+
+	FEAT_PATHS,
+	FEAT_PATHS_LINEAR,
+	FEAT_PATHS_SPLINE,
+	FEAT_PATHS_SPLINE2,
+	FEAT_PATHS_STEPPED,
+	FEAT_PATHS_BARS,
+
+	FEAT_JOIN,
+} from './utils/feats.js';
+
+import {
+	copy,
+	assign,
+	PI,
+	inf,
+	abs,
+	floor,
+	round,
+	roundDec,
+	ceil,
+	min,
+	max,
+	clamp,
+	pow,
+	asinh,
+	sinh,
+	log10,
+	closestIdx,
+	getMinMax,
+	rangeNum,
+	rangeLog,
+	rangeAsinh,
+	incrRound,
+	incrRoundUp,
+	isArr,
+	isObj,
+	fastIsObj,
+	isStr,
+	fnOrSelf,
+	fmtNum,
+	fixedDec,
+	ifNull,
+	join,
+	microTask,
+	retArg0,
+	retArg1,
+	retNull,
+	retTrue,
+	EMPTY_OBJ,
+	EMPTY_ARR,
+	nullNullTuple,
+	retEq,
+	autoRangePart,
+	rangePad,
+	hasData,
+	numIntDigits,
+	isUndef,
+	guessDec,
+	cmpObj,
+	isFn,
+} from './utils/utils.js';
+
+import {
+	WIDTH,
+	HEIGHT,
+	TOP,
+	BOTTOM,
+	LEFT,
+	RIGHT,
+	transparent,
+
+	mousemove,
+	mousedown,
+	mouseup,
+	mouseleave,
+	mouseenter,
+	dblclick,
+	resize,
+	scroll,
+
+	dppxchange,
+	LEGEND_DISP
+} from './utils/strings.js';
+
+import {
+	UPLOT,
+	ORI_HZ,
+	ORI_VT,
+	TITLE,
+	WRAP,
+	UNDER,
+	OVER,
+	AXIS,
+	OFF,
+	SELECT,
+	CURSOR_X,
+	CURSOR_Y,
+	CURSOR_PT,
+	LEGEND,
+	LEGEND_LIVE,
+	LEGEND_INLINE,
+	LEGEND_SERIES,
+	LEGEND_MARKER,
+	LEGEND_LABEL,
+	LEGEND_VALUE,
+} from './utils/domClasses.js';
+
+import {
+	domEnv,
+	doc,
+	win,
+	pxRatio as pxRatioGlobal,
+
+	addClass,
+	remClass,
+	setStylePx,
+	placeTag,
+	placeDiv,
+	elTrans,
+	elColor,
+	elSize,
+	on,
+	off,
+} from './utils/dom.js';
+
+import {
+	fmtDate,
+	tzDate,
+} from './utils/fmtDate.js';
+
+import {
+	ptDia,
+	cursorOpts,
+
+	xAxisOpts,
+	yAxisOpts,
+	xSeriesOpts,
+	ySeriesOpts,
+	xScaleOpts,
+	yScaleOpts,
+
+	xySeriesOpts,
+
+	clampScale,
+
+	timeIncrsMs,
+	timeIncrsS,
+
+	wholeIncrs,
+	numIncrs,
+	timeAxisVal,
+	timeAxisVals,
+	numAxisVals,
+
+	log2AxisValsFilt,
+	log10AxisValsFilt,
+
+	timeSeriesVal,
+	numSeriesVal,
+
+	timeSeriesLabel,
+	numSeriesLabel,
+
+	timeAxisSplitsMs,
+	timeAxisSplitsS,
+
+	numAxisSplits,
+	logAxisSplits,
+	asinhAxisSplits,
+
+	timeAxisStamps,
+
+	_timeAxisStampsMs,
+	_timeAxisStampsS,
+
+	timeSeriesStamp,
+	_timeSeriesStamp,
+
+	legendOpts,
+} from './utils/opts';
+
+import { _sync } from './utils/sync';
+
+import { WebGPURenderer } from './webgpu/WebGPURenderer';
+import { GPUPath } from './webgpu/GPUPath';
+
+import { points   } from '../../paths/ts/points.js';
+import { linear   } from '../../paths/ts/linear.js';
+import { stepped  } from '../../paths/ts/stepped.js';
+import { bars     } from '../../paths/ts/bars.js';
+import { monotoneCubic     as spline  } from '../../paths/ts/monotoneCubic.js';
+import { catmullRomCentrip as spline2 } from '../../paths/ts/catmullRomCentrip.js';
+
+import { addGap, clipGaps, moveToH, moveToV, arcH, arcV, orient, pxRoundGen, seriesFillTo, BAND_CLIP_FILL, BAND_CLIP_STROKE } from '../../paths/ts/utils.js';
+
+const cursorPlots = new Set<any>();
+
+function invalidateRects() {
+	for (let u of cursorPlots)
+		u.syncRect(true);
+}
+
+if (domEnv) {
+	on(resize, win, invalidateRects);
+	on(scroll, win, invalidateRects, true);
+	on(dppxchange, win, () => { uPlot.pxRatio = pxRatioGlobal; });
+}
+
+const linearPath = FEAT_PATHS && FEAT_PATHS_LINEAR ? linear() : null;
+const pointsPath = FEAT_POINTS ? points() : null;
+
+function setDefaults(d?: any, xo?: any, yo?: any, initY?: any, ..._extra: any[]) {
+	let d2 = initY ? [d[0], d[1]].concat(d.slice(2)) : [d[0]].concat(d.slice(1));
+	return d2.map((o, i) => setDefault(o, i, xo, yo));
+}
+
+function setDefaults2(d?: any, xyo?: any, ..._extra: any[]) {
+	return d.map((o, i) => i == 0 ? {} : assign({}, xyo, o));  // todo: assign() will not merge facet arrays
+}
+
+function setDefault(o?: any, i?: any, xo?: any, yo?: any, ..._extra: any[]) {
+	return assign({}, (i == 0 ? xo : yo), o);
+}
+
+function snapNumX(self?: any, dataMin?: any, dataMax?: any, ..._extra: any[]) {
+	return dataMin == null ? nullNullTuple : [dataMin, dataMax];
+}
+
+const snapTimeX = snapNumX;
+
+// this ensures that non-temporal/numeric y-axes get multiple-snapped padding added above/below
+// TODO: also account for incrs when snapping to ensure top of axis gets a tick & value
+function snapNumY(self?: any, dataMin?: any, dataMax?: any, ..._extra: any[]) {
+	return dataMin == null ? nullNullTuple : rangeNum(dataMin, dataMax, rangePad, true);
+}
+
+function snapLogY(self?: any, dataMin?: any, dataMax?: any, scale?: any, ..._extra: any[]) {
+	return dataMin == null ? nullNullTuple : rangeLog(dataMin, dataMax, self.scales[scale].log, true);
+}
+
+const snapLogX = snapLogY;
+
+function snapAsinhY(self?: any, dataMin?: any, dataMax?: any, scale?: any, ..._extra: any[]) {
+	return dataMin == null ? nullNullTuple : rangeAsinh(dataMin, dataMax, self.scales[scale].log, true);
+}
+
+const snapAsinhX = snapAsinhY;
+
+// dim is logical (getClientBoundingRect) pixels, not canvas pixels
+function findIncr(minVal?: any, maxVal?: any, incrs?: any, dim?: any, minSpace?: any, ..._extra: any[]) {
+	let intDigits = max(numIntDigits(minVal), numIntDigits(maxVal));
+
+	let delta = maxVal - minVal;
+
+	let incrIdx = closestIdx((minSpace / dim) * delta, incrs);
+
+	do {
+		let foundIncr = incrs[incrIdx];
+		let foundSpace = dim * foundIncr / delta;
+
+		if (foundSpace >= minSpace && intDigits + (foundIncr < 5 ? fixedDec.get(foundIncr) : 0) <= 17)
+			return [foundIncr, foundSpace];
+	} while (++incrIdx < incrs.length);
+
+	return [0, 0];
+}
+
+function pxRatioFont(font?: any, pxRatio?: any, ..._extra: any[]) {
+	let fontSize, fontSizeCss;
+	font = font.replace(/(\d+)px/, (m, p1) => (fontSize = round((fontSizeCss = +p1) * pxRatio)) + 'px');
+	return [font, fontSize, fontSizeCss];
+}
+
+function syncFontSize(axis?: any, pxRatio?: any, ..._extra: any[]) {
+	if (axis.show) {
+		[axis.font, axis.labelFont].forEach(f => {
+			let size = roundDec(f[2] * pxRatio, 1);
+			f[0] = f[0].replace(/[0-9.]+px/, size + 'px');
+			f[1] = size;
+		});
+	}
+}
+
+
+const livePlots = new Set<any>();
+let autoDestroyObserver = null;
+let autoDestroyRaf = 0;
+
+function isAutoDestroyEnabled(plot?: any, ..._extra: any[]) {
+	return plot?._autoDestroyDetached !== false && uPlot.autoDestroyDetached !== false;
+}
+
+function noteConnectedPlots() {
+	livePlots.forEach(plot => {
+		if (plot?.root?.isConnected)
+			plot._everConnected = true;
+	});
+}
+
+function destroyDetachedPlots() {
+	let count = 0;
+	livePlots.forEach(plot => {
+		if (plot == null || plot.status == 2)
+			return;
+
+		if (plot.root?.isConnected) {
+			plot._everConnected = true;
+			return;
+		}
+
+		if (plot._everConnected && isAutoDestroyEnabled(plot)) {
+			plot.destroy();
+			count++;
+		}
+	});
+
+	return count;
+}
+
+function scheduleDetachedDestroySweep() {
+	if (autoDestroyRaf || typeof win == 'undefined' || typeof win.requestAnimationFrame != 'function')
+		return;
+
+	let frames = Math.max(1, uPlot.autoDestroyDelayFrames | 0);
+
+	function tick() {
+		if (--frames > 0) {
+			autoDestroyRaf = win.requestAnimationFrame(tick);
+			return;
+		}
+
+		autoDestroyRaf = 0;
+		destroyDetachedPlots();
+	}
+
+	autoDestroyRaf = win.requestAnimationFrame(tick);
+}
+
+function ensureAutoDestroyObserver() {
+	if (autoDestroyObserver != null || typeof MutationObserver == 'undefined' || doc == null)
+		return;
+
+	let target = doc.body || doc.documentElement;
+	if (target == null)
+		return;
+
+	autoDestroyObserver = new MutationObserver(() => {
+		noteConnectedPlots();
+		scheduleDetachedDestroySweep();
+	});
+
+	autoDestroyObserver.observe(target, {childList: true, subtree: true});
+}
+
+function trackPlot(plot?: any, ..._extra: any[]) {
+	livePlots.add(plot);
+	plot._everConnected = !!plot.root?.isConnected;
+	plot._autoDestroyDetached = plot._autoDestroyDetached !== false;
+	ensureAutoDestroyObserver();
+}
+
+function untrackPlot(plot?: any, ..._extra: any[]) {
+	livePlots.delete(plot);
+
+	if (livePlots.size == 0 && autoDestroyObserver != null) {
+		autoDestroyObserver.disconnect();
+		autoDestroyObserver = null;
+	}
+}
+
+
+
+export interface UPlotLike {
+	root: HTMLElement;
+	ctx?: unknown;
+	renderer?: unknown;
+	series: unknown[];
+	axes: unknown[];
+	scales: Record<string, unknown>;
+	width: number;
+	height: number;
+	destroy(): void;
+	setData(data: unknown[], resetScales?: boolean): void;
+	setSize(size: {width: number; height: number}): void;
+	redraw(rebuildPaths?: boolean, recalcAxes?: boolean): void;
+	setScale(key: string, range: {min?: number; max?: number}): void;
+	setSelect(select: {left: number; top: number; width: number; height: number}, fireHook?: boolean): void;
+	addSeries(series: unknown, index?: number): void;
+	delSeries(index: number): void;
+	[key: string]: any;
+}
+
+export interface UPlotConstructor {
+	new (opts: Record<string, any>, data: unknown[], then?: HTMLElement | ((u: UPlotLike, init?: () => void) => void)): UPlotLike;
+	(opts: Record<string, any>, data: unknown[], then?: HTMLElement | ((u: UPlotLike, init?: () => void) => void)): UPlotLike;
+	assign: typeof assign;
+	fmtNum: typeof fmtNum;
+	rangeNum: typeof rangeNum;
+	rangeLog: typeof rangeLog;
+	rangeAsinh: typeof rangeAsinh;
+	orient: typeof orient;
+	pxRatio: number;
+	renderer: any;
+	rendererOptions: any;
+	autoDestroyDetached: boolean;
+	autoDestroyDelayFrames: number;
+	livePlots: Set<any>;
+	configure(opts?: Record<string, any> | null): UPlotConstructor;
+	destroyDetached(): number;
+	destroyAll(): number;
+	getLivePlots(): UPlotLike[];
+	WebGPURenderer: typeof WebGPURenderer;
+	GPUPath: typeof GPUPath;
+	[key: string]: any;
+}
+
+const uPlot = (function (opts: any, data: any, then?: any): any {
+	let pxRatio = opts.pxRatio ?? pxRatioGlobal;
+
+	function setPxRatio(_pxRatio?: any, ..._extra: any[]) {
+		pxRatio = self.pxRatio = (_pxRatio ?? pxRatioGlobal);
+		axes.forEach(axis => syncFontSize(axis, pxRatio));
+		_setSize(self.width, self.height, true);
+	}
+	const self: any = {
+		mode: ifNull(opts.mode, 1),
+		pxRatio,
+		setPxRatio,
+	};
+
+	self.setPxRatio = setPxRatio;
+	const mode = self.mode;
+
+	function getHPos(val?: any, scale?: any, dim?: any, off?: any, ..._extra: any[]) {
+		let pct = scale.valToPct(val);
+		return off + dim * (scale.dir == -1 ? (1 - pct) : pct);
+	}
+
+	function getVPos(val?: any, scale?: any, dim?: any, off?: any, ..._extra: any[]) {
+		let pct = scale.valToPct(val);
+		return off + dim * (scale.dir == -1 ? pct : (1 - pct));
+	}
+
+	function getPos(val?: any, scale?: any, dim?: any, off?: any, ..._extra: any[]) {
+		return scale.ori == 0 ? getHPos(val, scale, dim, off) : getVPos(val, scale, dim, off);
+	}
+
+	self.valToPosH = getHPos;
+	self.valToPosV = getVPos;
+
+	let ready = false;
+	self.status = 0;
+
+	const root = self.root = placeDiv(UPLOT);
+
+	if (opts.id != null)
+		root.id = opts.id;
+
+	addClass(root, opts.class);
+
+	if (opts.title) {
+		let title = placeDiv(TITLE, root);
+		title.textContent = opts.title;
+	}
+
+	const can = placeTag("canvas");
+	const Renderer = opts.renderer || uPlot.renderer || WebGPURenderer;
+	const rendererOptions = opts.rendererOptions || opts.webgpu || uPlot.rendererOptions || null;
+	const ctx = self.ctx = new Renderer(can, rendererOptions);
+	self.renderer = ctx;
+
+	const wrap = placeDiv(WRAP, root);
+
+	on("click", wrap, e => {
+		if (e.target === over) {
+			let didDrag = mouseLeft1 != mouseLeft0 || mouseTop1 != mouseTop0;
+			didDrag && drag.click(self, e);
+		}
+	}, true);
+
+	const under = self.under = placeDiv(UNDER, wrap);
+	wrap.appendChild(can);
+	ctx.mount?.(wrap, can);
+	const over = self.over = placeDiv(OVER, wrap);
+
+	opts = copy(opts);
+
+	const usePathCache = opts.cache ?? true;
+
+	const pxAlign = +ifNull(opts.pxAlign, 1);
+
+	const pxRound = pxRoundGen(pxAlign);
+
+	(opts.plugins || []).forEach(p => {
+		if (p.opts)
+			opts = p.opts(self, opts) || opts;
+	});
+
+	const ms = opts.ms || 1e-3;
+
+	const series  = self.series = mode == 1 ?
+		setDefaults(opts.series || [], xSeriesOpts, ySeriesOpts, false) :
+		setDefaults2(opts.series || [null], xySeriesOpts);
+	const axes    = self.axes   = setDefaults(opts.axes   || [], xAxisOpts,   yAxisOpts,    true);
+	const scales  = self.scales = {};
+	const bands   = self.bands  = opts.bands || [];
+
+	bands.forEach(b => {
+		b.fill = fnOrSelf(b.fill || null);
+		b.dir = ifNull(b.dir, -1);
+	});
+
+	const xScaleKey = mode == 2 ? series[1].facets[0].scale : series[0].scale;
+
+	const drawOrderMap = {
+		axes: drawAxesGrid,
+		series: drawSeries,
+	};
+
+	const drawOrder = (opts.drawOrder || ["axes", "series"]).map(key => drawOrderMap[key]);
+
+	function initValToPct(sc?: any, ..._extra: any[]) {
+		const getVal = (
+			sc.distr == 3   ? val => log10(val > 0 ? val : sc.clamp(self, val, sc.min, sc.max, sc.key)) :
+			sc.distr == 4   ? val => asinh(val, sc.asinh) :
+			sc.distr == 100 ? val => sc.fwd(val) :
+			val => val
+		);
+
+		return val => {
+			let _val = getVal(val);
+			let { _min, _max } = sc;
+			let delta = _max - _min;
+			return (_val - _min) / delta;
+		};
+	}
+
+	function initScale(scaleKey?: any, ..._extra: any[]) {
+		let sc = scales[scaleKey];
+
+		if (sc == null) {
+			let scaleOpts = (opts.scales || EMPTY_OBJ)[scaleKey] || EMPTY_OBJ;
+
+			if (scaleOpts.from != null) {
+				// ensure parent is initialized
+				initScale(scaleOpts.from);
+				// dependent scales inherit
+				let sc = assign({}, scales[scaleOpts.from], scaleOpts, {key: scaleKey});
+				sc.valToPct = initValToPct(sc);
+				scales[scaleKey] = sc;
+			}
+			else {
+				sc = scales[scaleKey] = assign({}, (scaleKey == xScaleKey ? xScaleOpts : yScaleOpts), scaleOpts);
+
+				sc.key = scaleKey;
+
+				let isTime = FEAT_TIME && sc.time;
+
+				let rn = sc.range;
+
+				let rangeIsArr = isArr(rn);
+
+				if (scaleKey != xScaleKey || (mode == 2 && !isTime)) {
+					// if range array has null limits, it should be auto
+					if (rangeIsArr && (rn[0] == null || rn[1] == null)) {
+						rn = {
+							min: rn[0] == null ? autoRangePart : {
+								mode: 1,
+								hard: rn[0],
+								soft: rn[0],
+							},
+							max: rn[1] == null ? autoRangePart : {
+								mode: 1,
+								hard: rn[1],
+								soft: rn[1],
+							},
+						};
+						rangeIsArr = false;
+					}
+
+					if (!rangeIsArr && isObj(rn)) {
+						let cfg = rn;
+						// this is similar to snapNumY
+						rn = (self, dataMin, dataMax) => dataMin == null ? nullNullTuple : rangeNum(dataMin, dataMax, cfg);
+					}
+				}
+
+				sc.range = fnOrSelf(rn || (isTime ? snapTimeX : scaleKey == xScaleKey ?
+					(sc.distr == 3 ? snapLogX : sc.distr == 4 ? snapAsinhX : snapNumX) :
+					(sc.distr == 3 ? snapLogY : sc.distr == 4 ? snapAsinhY : snapNumY)
+				));
+
+				sc.auto = fnOrSelf(rangeIsArr ? false : sc.auto);
+
+				sc.clamp = fnOrSelf(sc.clamp || clampScale);
+
+				// caches for expensive ops like asinh() & log()
+				sc._min = sc._max = null;
+
+				sc.valToPct = initValToPct(sc);
+			}
+		}
+	}
+
+	initScale("x");
+	initScale("y");
+
+	// TODO: init scales from facets in mode: 2
+	if (mode == 1) {
+		series.forEach(s => {
+			initScale(s.scale);
+		});
+	}
+
+	axes.forEach(a => {
+		initScale(a.scale);
+	});
+
+	for (let k in opts.scales)
+		initScale(k);
+
+	const scaleX = scales[xScaleKey];
+
+	const xScaleDistr = scaleX.distr;
+
+	let valToPosX, valToPosY, moveTo, arc, xDimCan, xOffCan, yDimCan, yOffCan, xDimCss, xOffCss, yDimCss, yOffCss, updOriDims;
+
+	if (scaleX.ori == 0) {
+		addClass(root, ORI_HZ);
+		valToPosX = getHPos;
+		valToPosY = getVPos;
+		moveTo    = moveToH;
+		arc       = arcH;
+		/*
+		updOriDims = () => {
+			xDimCan = plotWid;
+			xOffCan = plotLft;
+			yDimCan = plotHgt;
+			yOffCan = plotTop;
+
+			xDimCss = plotWidCss;
+			xOffCss = plotLftCss;
+			yDimCss = plotHgtCss;
+			yOffCss = plotTopCss;
+		};
+		*/
+	}
+	else {
+		addClass(root, ORI_VT);
+		valToPosX = getVPos;
+		valToPosY = getHPos;
+		moveTo    = moveToV;
+		arc       = arcV;
+		/*
+		updOriDims = () => {
+			xDimCan = plotHgt;
+			xOffCan = plotTop;
+			yDimCan = plotWid;
+			yOffCan = plotLft;
+
+			xDimCss = plotHgtCss;
+			xOffCss = plotTopCss;
+			yDimCss = plotWidCss;
+			yOffCss = plotLftCss;
+		};
+		*/
+	}
+
+	const pendScales = {};
+
+	// explicitly-set initial scales
+	for (let k in scales) {
+		let sc = scales[k];
+
+		if (sc.min != null || sc.max != null) {
+			pendScales[k] = {min: sc.min, max: sc.max};
+			sc.min = sc.max = null;
+		}
+	}
+
+//	self.tz = opts.tz || Intl.DateTimeFormat().resolvedOptions().timeZone;
+	const _tzDate  = FEAT_TIME && (opts.tzDate || (ts => new Date(round(ts / ms))));
+	const _fmtDate = FEAT_TIME && (opts.fmtDate || fmtDate);
+
+	const _timeAxisSplits = FEAT_TIME && (ms == 1 ? (timeAxisSplitsMs as any)(_tzDate) : (timeAxisSplitsS as any)(_tzDate));
+	const _timeAxisVals   = FEAT_TIME && timeAxisVals(_tzDate, timeAxisStamps((ms == 1 ? _timeAxisStampsMs : _timeAxisStampsS), _fmtDate));
+	const _timeSeriesVal  = FEAT_TIME && timeSeriesVal(_tzDate, timeSeriesStamp(_timeSeriesStamp, _fmtDate));
+
+	const activeIdxs = [];
+
+	const legend     = FEAT_LEGEND && (self.legend = assign({}, legendOpts, opts.legend));
+	const cursor     =                (self.cursor = assign({}, cursorOpts, {drag: {y: mode == 2}}, opts.cursor));
+	const showLegend = FEAT_LEGEND && legend.show;
+	const showCursor =                cursor.show;
+	const markers    = FEAT_LEGEND && legend.markers;
+
+	if (FEAT_LEGEND) {
+		legend.idxs = activeIdxs;
+
+		markers.width  = fnOrSelf(markers.width);
+		markers.dash   = fnOrSelf(markers.dash);
+		markers.stroke = fnOrSelf(markers.stroke);
+		markers.fill   = fnOrSelf(markers.fill);
+	}
+
+	let legendTable;
+	let legendHead;
+	let legendBody;
+	let legendRows = [];
+	let legendCells = [];
+	let legendCols;
+	let multiValLegend = false;
+	let NULL_LEGEND_VALUES = {};
+
+	if (FEAT_LEGEND && legend.live) {
+		const getMultiVals = series[1] ? series[1].values : null;
+		multiValLegend = getMultiVals != null;
+		legendCols = multiValLegend ? getMultiVals(self, 1, 0) : {_: 0};
+
+		for (let k in legendCols)
+			NULL_LEGEND_VALUES[k] = LEGEND_DISP;
+	}
+
+	if (showLegend) {
+		legendTable = placeTag("table", LEGEND, root);
+		legendBody = placeTag("tbody", null, legendTable);
+
+		// allows legend to be moved out of root
+		legend.mount(self, legendTable);
+
+		if (multiValLegend) {
+			legendHead = placeTag("thead", null, legendTable, legendBody);
+
+			let head = placeTag("tr", null, legendHead);
+			placeTag("th", null, head);
+
+			for (var key in legendCols)
+				placeTag("th", LEGEND_LABEL, head).textContent = key;
+		}
+		else {
+			addClass(legendTable, LEGEND_INLINE);
+			legend.live && addClass(legendTable, LEGEND_LIVE);
+		}
+	}
+
+	const son  = {show: true};
+	const soff = {show: false};
+
+	function initLegendRow(s?: any, i?: any, ..._extra: any[]) {
+		if (i == 0 && (multiValLegend || !legend.live || mode == 2))
+			return nullNullTuple;
+
+		let cells = [];
+
+		let row = placeTag("tr", LEGEND_SERIES, legendBody, legendBody.childNodes[i]);
+
+		addClass(row, s.class);
+
+		if (!s.show)
+			addClass(row, OFF);
+
+		let label = placeTag("th", null, row);
+
+		if (markers.show) {
+			let indic = placeDiv(LEGEND_MARKER, label);
+
+			if (i > 0) {
+				let width  = markers.width(self, i);
+
+				if (width)
+					indic.style.border = width + "px " + markers.dash(self, i) + " " + markers.stroke(self, i);
+
+				indic.style.background = markers.fill(self, i);
+			}
+		}
+
+		let text = placeDiv(LEGEND_LABEL, label);
+
+		if (s.label instanceof HTMLElement)
+			text.appendChild(s.label);
+		else
+			text.textContent = s.label;
+
+		if (i > 0) {
+			if (!markers.show)
+				text.style.color = s.width > 0 ? markers.stroke(self, i) : markers.fill(self, i);
+
+			onMouse("click", label, e => {
+				if (cursor._lock)
+					return;
+
+				setCursorEvent(e);
+
+				let seriesIdx = series.indexOf(s);
+
+				if ((e.ctrlKey || e.metaKey) != legend.isolate) {
+					// if any other series is shown, isolate this one. else show all
+					let isolate = series.some((s, i) => i > 0 && i != seriesIdx && s.show);
+
+					series.forEach((s, i) => {
+						i > 0 && setSeries(i, isolate ? (i == seriesIdx ? son : soff) : son, true, syncOpts.setSeries);
+					});
+				}
+				else
+					setSeries(seriesIdx, {show: !s.show}, true, syncOpts.setSeries);
+			}, false);
+
+			if (cursorFocus) {
+				onMouse(mouseenter, label, e => {
+					if (cursor._lock)
+						return;
+
+					setCursorEvent(e);
+
+					setSeries(series.indexOf(s), FOCUS_TRUE, true, syncOpts.setSeries);
+				}, false);
+			}
+		}
+
+		for (var key in legendCols) {
+			let v = placeTag("td", LEGEND_VALUE, row);
+			v.textContent = "--";
+			cells.push(v);
+		}
+
+		return [row, cells];
+	}
+
+	const mouseListeners = new Map();
+
+	function onMouse(ev?: any, targ?: any, fn?: any, onlyTarg: any = true, ..._extra: any[]) {
+		const targListeners = mouseListeners.get(targ) || {};
+		const listener = cursor.bind[ev](self, targ, fn, onlyTarg);
+
+		if (listener) {
+			on(ev, targ, targListeners[ev] = listener);
+			mouseListeners.set(targ, targListeners);
+		}
+	}
+
+	function offMouse(ev?: any, targ?: any, fn?: any, ..._extra: any[]) {
+		const targListeners = mouseListeners.get(targ) || {};
+
+		for (let k in targListeners) {
+			if (ev == null || k == ev) {
+				off(k, targ, targListeners[k]);
+				delete targListeners[k];
+			}
+		}
+
+		if (ev == null)
+			mouseListeners.delete(targ);
+	}
+
+	let fullWidCss = 0;
+	let fullHgtCss = 0;
+
+	let plotWidCss = 0;
+	let plotHgtCss = 0;
+
+	// plot margins to account for axes
+	let plotLftCss = 0;
+	let plotTopCss = 0;
+
+	// previous values for diffing
+	let _plotLftCss = plotLftCss;
+	let _plotTopCss = plotTopCss;
+	let _plotWidCss = plotWidCss;
+	let _plotHgtCss = plotHgtCss;
+
+
+	let plotLft = 0;
+	let plotTop = 0;
+	let plotWid = 0;
+	let plotHgt = 0;
+
+	self.bbox = {};
+
+	let shouldSetScales = false;
+	let shouldSetSize = false;
+	let shouldConvergeSize = false;
+	let shouldSetCursor = false;
+	let shouldSetSelect = false;
+	let shouldSetLegend = false;
+
+	function _setSize(width?: any, height?: any, force?: any, ..._extra: any[]) {
+		if (force || (width != self.width || height != self.height))
+			calcSize(width, height);
+
+		resetYSeries(false);
+
+		shouldConvergeSize = true;
+		shouldSetSize = true;
+
+		commit();
+	}
+
+	function calcSize(width?: any, height?: any, ..._extra: any[]) {
+	//	log("calcSize()", arguments);
+
+		self.width  = fullWidCss = plotWidCss = width;
+		self.height = fullHgtCss = plotHgtCss = height;
+		plotLftCss  = plotTopCss = 0;
+
+		calcPlotRect();
+		calcAxesRects();
+
+		let bb = self.bbox;
+
+		plotLft = bb.left   = incrRound(plotLftCss * pxRatio, 0.5);
+		plotTop = bb.top    = incrRound(plotTopCss * pxRatio, 0.5);
+		plotWid = bb.width  = incrRound(plotWidCss * pxRatio, 0.5);
+		plotHgt = bb.height = incrRound(plotHgtCss * pxRatio, 0.5);
+
+	//	updOriDims();
+	}
+
+	// ensures size calc convergence
+	const CYCLE_LIMIT = 3;
+
+	function convergeSize() {
+		let converged = false;
+
+		let cycleNum = 0;
+
+		while (!converged) {
+			cycleNum++;
+
+			let axesConverged = axesCalc(cycleNum);
+			let paddingConverged = paddingCalc(cycleNum);
+
+			converged = cycleNum == CYCLE_LIMIT || (axesConverged && paddingConverged);
+
+			if (!converged) {
+				calcSize(self.width, self.height);
+				shouldSetSize = true;
+			}
+		}
+	}
+
+	function setSize({width, height}, ..._extra: any[]) {
+		_setSize(width, height);
+	}
+
+	self.setSize = setSize;
+
+	// accumulate axis offsets, reduce canvas width
+	function calcPlotRect() {
+		// easements for edge labels
+		let hasTopAxis = false;
+		let hasBtmAxis = false;
+		let hasRgtAxis = false;
+		let hasLftAxis = false;
+
+		axes.forEach((axis, i) => {
+			if (axis.show && axis._show) {
+				let {side, _size} = axis;
+				let isVt = side % 2;
+				let labelSize = axis.label != null ? axis.labelSize : 0;
+
+				let fullSize = _size + labelSize;
+
+				if (fullSize > 0) {
+					if (isVt) {
+						plotWidCss -= fullSize;
+
+						if (side == 3) {
+							plotLftCss += fullSize;
+							hasLftAxis = true;
+						}
+						else
+							hasRgtAxis = true;
+					}
+					else {
+						plotHgtCss -= fullSize;
+
+						if (side == 0) {
+							plotTopCss += fullSize;
+							hasTopAxis = true;
+						}
+						else
+							hasBtmAxis = true;
+					}
+				}
+			}
+		});
+
+		sidesWithAxes[0] = hasTopAxis;
+		sidesWithAxes[1] = hasRgtAxis;
+		sidesWithAxes[2] = hasBtmAxis;
+		sidesWithAxes[3] = hasLftAxis;
+
+		// hz padding
+		plotWidCss -= _padding[1] + _padding[3];
+		plotLftCss += _padding[3];
+
+		// vt padding
+		plotHgtCss -= _padding[2] + _padding[0];
+		plotTopCss += _padding[0];
+	}
+
+	function calcAxesRects() {
+		// will accum +
+		let off1 = plotLftCss + plotWidCss;
+		let off2 = plotTopCss + plotHgtCss;
+		// will accum -
+		let off3 = plotLftCss;
+		let off0 = plotTopCss;
+
+		function incrOffset(side?: any, size?: any, ..._extra: any[]) {
+			switch (side) {
+				case 1: off1 += size; return off1 - size;
+				case 2: off2 += size; return off2 - size;
+				case 3: off3 -= size; return off3 + size;
+				case 0: off0 -= size; return off0 + size;
+			}
+		}
+
+		axes.forEach((axis, i) => {
+			if (axis.show && axis._show) {
+				let side = axis.side;
+
+				axis._pos = incrOffset(side, axis._size);
+
+				if (axis.label != null)
+					axis._lpos = incrOffset(side, axis.labelSize);
+			}
+		});
+	}
+
+	if (cursor.dataIdx == null) {
+		let hov = cursor.hover;
+
+		let skip = hov.skip = new Set(hov.skip ?? []);
+		skip.add(void 0); // alignment artifacts
+		let prox = hov.prox = fnOrSelf(hov.prox);
+		let bias = hov.bias ??= 0;
+
+		cursor.dataIdx = (self, seriesIdx, cursorIdx, valAtPosX) => {
+			if (seriesIdx == 0)
+				return cursorIdx;
+
+			let idx2 = cursorIdx;
+
+			let _prox = prox(self, seriesIdx, cursorIdx, valAtPosX) ?? inf;
+			let withProx = _prox >= 0 && _prox < inf;
+			let xDim = scaleX.ori == 0 ? plotWidCss : plotHgtCss;
+			let cursorLft = cursor.left;
+
+			let xValues = data[0];
+			let yValues = data[seriesIdx];
+
+			if (skip.has(yValues[cursorIdx])) {
+				idx2 = null;
+
+				let nonNullLft = null,
+					nonNullRgt = null,
+					j;
+
+				if (bias == 0 || bias == -1) {
+					j = cursorIdx;
+					while (nonNullLft == null && --j >= i0) {
+						if (!skip.has(yValues[j]))
+							nonNullLft = j;
+					}
+				}
+
+				if (bias == 0 || bias == 1) {
+					j = cursorIdx;
+					while (nonNullRgt == null && ++j <= i1) {
+						if (!skip.has(yValues[j]))
+							nonNullRgt = j;
+					}
+				}
+
+				if (nonNullLft != null || nonNullRgt != null) {
+					if (withProx) {
+						let lftPos = nonNullLft == null ? -Infinity : valToPosX(xValues[nonNullLft], scaleX, xDim, 0);
+						let rgtPos = nonNullRgt == null ?  Infinity : valToPosX(xValues[nonNullRgt], scaleX, xDim, 0);
+
+						let lftDelta = cursorLft - lftPos;
+						let rgtDelta = rgtPos - cursorLft;
+
+						if (lftDelta <= rgtDelta) {
+							if (lftDelta <= _prox)
+								idx2 = nonNullLft;
+						} else {
+							if (rgtDelta <= _prox)
+								idx2 = nonNullRgt;
+						}
+					}
+					else {
+						idx2 =
+							nonNullRgt == null ? nonNullLft :
+							nonNullLft == null ? nonNullRgt :
+							cursorIdx - nonNullLft <= nonNullRgt - cursorIdx ? nonNullLft : nonNullRgt;
+					}
+				}
+			}
+			else if (withProx) {
+				let dist = abs(cursorLft - valToPosX(xValues[cursorIdx], scaleX, xDim, 0));
+
+				if (dist > _prox)
+					idx2 = null;
+			}
+
+			return idx2;
+		};
+	}
+
+	const setCursorEvent = (e?: any, ..._extra: any[]) => { cursor.event = e; };
+
+	cursor.idxs = activeIdxs;
+
+	cursor._lock = false;
+
+	let points = cursor.points;
+
+	points.show   = fnOrSelf(points.show);
+	points.size   = fnOrSelf(points.size);
+	points.stroke = fnOrSelf(points.stroke);
+	points.width  = fnOrSelf(points.width);
+	points.fill   = fnOrSelf(points.fill);
+
+	const focus = self.focus = assign({}, opts.focus || {alpha: 0.3}, cursor.focus);
+
+	const cursorFocus = focus.prox >= 0;
+	const cursorOnePt = cursorFocus && points.one;
+
+	// series-intersection markers
+	let cursorPts = [];
+	// position caches in CSS pixels
+	let cursorPtsLft = [];
+	let cursorPtsTop = [];
+
+	function initCursorPt(s?: any, si?: any, ..._extra: any[]) {
+		let pt = points.show(self, si);
+
+		if (pt instanceof HTMLElement) {
+			addClass(pt, CURSOR_PT);
+			addClass(pt, s.class);
+			elTrans(pt, -10, -10, plotWidCss, plotHgtCss);
+			over.insertBefore(pt, cursorPts[si]);
+
+			return pt;
+		}
+	}
+
+	function initSeries(s?: any, i?: any, ..._extra: any[]) {
+		if (mode == 1 || i > 0) {
+			let isTime = FEAT_TIME && mode == 1 && scales[s.scale].time;
+
+			let sv = s.value;
+			s.value = isTime ? (isStr(sv) ? timeSeriesVal(_tzDate, timeSeriesStamp(sv, _fmtDate)) : sv || _timeSeriesVal) : sv || numSeriesVal;
+			s.label = s.label || (isTime ? timeSeriesLabel : numSeriesLabel);
+		}
+
+		if (cursorOnePt || i > 0) {
+			s.width  = s.width == null ? 1 : s.width;
+			s.paths  = s.paths || linearPath || retNull;
+			s.fillTo = fnOrSelf(s.fillTo || seriesFillTo);
+			s.pxAlign = +ifNull(s.pxAlign, pxAlign);
+			s.pxRound = pxRoundGen(s.pxAlign);
+
+			s.stroke = fnOrSelf(s.stroke || null);
+			s.fill   = fnOrSelf(s.fill || null);
+			s._stroke = s._fill = s._paths = s._focus = null;
+
+			let _ptDia = ptDia(max(1, s.width), 1);
+			let points = s.points = assign({}, {
+				size: _ptDia,
+				width: max(1, _ptDia * .2),
+				stroke: s.stroke,
+				space: _ptDia * 2,
+				paths: pointsPath,
+				_stroke: null,
+				_fill: null,
+			}, s.points);
+			points.show   = fnOrSelf(points.show);
+			points.filter = fnOrSelf(points.filter);
+			points.fill   = fnOrSelf(points.fill);
+			points.stroke = fnOrSelf(points.stroke);
+			points.paths  = fnOrSelf(points.paths);
+			points.pxAlign = s.pxAlign;
+		}
+
+		if (showLegend) {
+			let rowCells = initLegendRow(s, i);
+			legendRows.splice(i, 0, rowCells[0]);
+			legendCells.splice(i, 0, rowCells[1]);
+			legend.values.push(null);	// NULL_LEGEND_VALS not yet avil here :(
+		}
+
+		if (showCursor) {
+			activeIdxs.splice(i, 0, null);
+
+			let pt = null;
+
+			if (cursorOnePt) {
+				if (i == 0)
+					pt = initCursorPt(s, i);
+			}
+			else if (i > 0)
+				pt = initCursorPt(s, i);
+
+			cursorPts.splice(i, 0, pt);
+			cursorPtsLft.splice(i, 0, 0);
+			cursorPtsTop.splice(i, 0, 0);
+		}
+
+		fire("addSeries", i);
+	}
+
+	function addSeries(opts?: any, si?: any, ..._extra: any[]) {
+		si = si == null ? series.length : si;
+
+		opts = mode == 1 ? setDefault(opts, si, xSeriesOpts, ySeriesOpts) : setDefault(opts, si, {}, xySeriesOpts);
+
+		series.splice(si, 0, opts);
+		initSeries(series[si], si);
+	}
+
+	self.addSeries = addSeries;
+
+	function delSeries(i?: any, ..._extra: any[]) {
+		series.splice(i, 1);
+
+		if (showLegend) {
+			legend.values.splice(i, 1);
+
+			legendCells.splice(i, 1);
+			let tr = legendRows.splice(i, 1)[0];
+			offMouse(null, tr.firstChild);
+			tr.remove();
+		}
+
+		if (showCursor) {
+			activeIdxs.splice(i, 1);
+			cursorPts.splice(i, 1)[0].remove();
+			cursorPtsLft.splice(i, 1);
+			cursorPtsTop.splice(i, 1);
+		}
+
+		// TODO: de-init no-longer-needed scales?
+
+		fire("delSeries", i);
+	}
+
+	self.delSeries = delSeries;
+
+	const sidesWithAxes = [false, false, false, false];
+
+	function initAxis(axis?: any, i?: any, ..._extra: any[]) {
+		axis._show = axis.show;
+
+		if (axis.show) {
+			let isVt = axis.side % 2;
+
+			let sc = scales[axis.scale];
+
+			// this can occur if all series specify non-default scales
+			if (sc == null) {
+				axis.scale = isVt ? series[1].scale : xScaleKey;
+				sc = scales[axis.scale];
+			}
+
+			// also set defaults for incrs & values based on axis distr
+			let isTime = FEAT_TIME && sc.time;
+
+			axis.size   = fnOrSelf(axis.size);
+			axis.space  = fnOrSelf(axis.space);
+			axis.rotate = fnOrSelf(axis.rotate);
+
+			if (isArr(axis.incrs)) {
+				axis.incrs.forEach(incr => {
+					!fixedDec.has(incr) && fixedDec.set(incr, guessDec(incr));
+				});
+			}
+
+			axis.incrs  = fnOrSelf(axis.incrs  || (          sc.distr == 2 ? wholeIncrs : (isTime ? (ms == 1 ? timeIncrsMs : timeIncrsS) : numIncrs)));
+			axis.splits = fnOrSelf(axis.splits || (isTime && sc.distr == 1 ? _timeAxisSplits : sc.distr == 3 ? logAxisSplits : sc.distr == 4 ? asinhAxisSplits : numAxisSplits));
+
+			axis.stroke        = fnOrSelf(axis.stroke);
+			axis.grid.stroke   = fnOrSelf(axis.grid.stroke);
+			axis.ticks.stroke  = fnOrSelf(axis.ticks.stroke);
+			axis.border.stroke = fnOrSelf(axis.border.stroke);
+
+			let av = axis.values;
+
+			axis.values = (
+				// static array of tick values
+				isArr(av) && !isArr(av[0]) ? fnOrSelf(av) :
+				// temporal
+				isTime ? (
+					// config array of fmtDate string tpls
+					isArr(av) ?
+						timeAxisVals(_tzDate, timeAxisStamps(av, _fmtDate)) :
+					// fmtDate string tpl
+					isStr(av) ?
+						timeAxisVal(_tzDate, av) :
+					av || _timeAxisVals
+				) : av || numAxisVals
+			);
+
+			axis.filter = fnOrSelf(axis.filter || (          sc.distr >= 3 && sc.log == 10 ? log10AxisValsFilt : sc.distr == 3 && sc.log == 2 ? log2AxisValsFilt : retArg1));
+
+			axis.font      = pxRatioFont(axis.font, pxRatio);
+			axis.labelFont = pxRatioFont(axis.labelFont, pxRatio);
+
+			axis._size   = axis.size(self, null, i, 0);
+
+			axis._space  =
+			axis._rotate =
+			axis._incrs  =
+			axis._found  =	// foundIncrSpace
+			axis._splits =
+			axis._values = null;
+
+			if (axis._size > 0) {
+				sidesWithAxes[i] = true;
+				axis._el = placeDiv(AXIS, wrap);
+			}
+
+			// debug
+		//	axis._el.style.background = "#"  + Math.floor(Math.random()*16777215).toString(16) + '80';
+		}
+	}
+
+	function autoPadSide(self?: any, side?: any, sidesWithAxes?: any, cycleNum?: any, ..._extra: any[]) {
+		let [hasTopAxis, hasRgtAxis, hasBtmAxis, hasLftAxis] = sidesWithAxes;
+
+		let ori = side % 2;
+		let size = 0;
+
+		if (ori == 0 && (hasLftAxis || hasRgtAxis))
+			size = (side == 0 && !hasTopAxis || side == 2 && !hasBtmAxis ? round(xAxisOpts.size / 3) : 0);
+		if (ori == 1 && (hasTopAxis || hasBtmAxis))
+			size = (side == 1 && !hasRgtAxis || side == 3 && !hasLftAxis ? round(yAxisOpts.size / 2) : 0);
+
+		return size;
+	}
+
+	const padding = self.padding = (opts.padding || [autoPadSide,autoPadSide,autoPadSide,autoPadSide]).map(p => fnOrSelf(ifNull(p, autoPadSide)));
+	const _padding = self._padding = padding.map((p, i) => p(self, i, sidesWithAxes, 0));
+
+	let dataLen;
+
+	// rendered data window
+	let i0 = null;
+	let i1 = null;
+	const idxs = mode == 1 ? series[0].idxs : null;
+
+	let data0 = null;
+
+	let viaAutoScaleX = false;
+
+	function setData(_data?: any, _resetScales?: any, ..._extra: any[]) {
+		data = _data == null ? [] : _data;
+
+		self.data = self._data = data;
+
+		if (mode == 2) {
+			dataLen = 0;
+			for (let i = 1; i < series.length; i++)
+				dataLen += data[i][0].length;
+		}
+		else {
+			if (data.length == 0)
+				self.data = self._data = data = [[]];
+
+			data0 = data[0];
+			dataLen = data0.length;
+
+			let scaleData = data;
+
+			if (xScaleDistr == 2) {
+				scaleData = data.slice();
+
+				let _data0 = scaleData[0] = Array(dataLen);
+				for (let i = 0; i < dataLen; i++)
+					_data0[i] = i;
+			}
+
+			self._data = data = scaleData;
+		}
+
+		resetYSeries(true);
+
+		fire("setData");
+
+		// forces x axis tick values to re-generate when neither x scale nor y scale changes
+		// in ordinal mode, scale range is by index, so will not change if new data has same length, but tick values are from data
+		if (xScaleDistr == 2) {
+			shouldConvergeSize = true;
+
+			/* or somewhat cheaper, and uglier:
+			if (ready) {
+				// logic extracted from axesCalc()
+				let i = 0;
+				let axis = axes[i];
+				let _splits = axis._splits.map(i => data0[i]);
+				let [_incr, _space] = axis._found;
+				let incr = data0[_splits[1]] - data0[_splits[0]];
+				axis._values = axis.values(self, axis.filter(self, _splits, i, _space, incr), i, _space, incr);
+			}
+			*/
+		}
+
+		if (_resetScales !== false) {
+			let xsc = scaleX;
+
+			if (xsc.auto(self, viaAutoScaleX))
+				autoScaleX();
+			else
+				_setScale(xScaleKey, xsc.min, xsc.max);
+
+			shouldSetCursor = shouldSetCursor || cursor.left >= 0;
+			shouldSetLegend = true;
+			commit();
+		}
+	}
+
+	self.setData = setData;
+
+	function autoScaleX() {
+		viaAutoScaleX = true;
+
+		let _min, _max;
+
+		if (mode == 1) {
+			if (dataLen > 0) {
+				i0 = idxs[0] = 0;
+				i1 = idxs[1] = dataLen - 1;
+
+				_min = data[0][i0];
+				_max = data[0][i1];
+
+				if (xScaleDistr == 2) {
+					_min = i0;
+					_max = i1;
+				}
+				else if (_min == _max) {
+					if (xScaleDistr == 3)
+						[_min, _max] = rangeLog(_min, _min, scaleX.log, false);
+					else if (xScaleDistr == 4)
+						[_min, _max] = rangeAsinh(_min, _min, scaleX.log, false);
+					else if (scaleX.time)
+						_max = _min + round(86400 / ms);
+					else
+						[_min, _max] = rangeNum(_min, _max, rangePad, true);
+				}
+			}
+			else {
+				i0 = idxs[0] = _min = null;
+				i1 = idxs[1] = _max = null;
+			}
+		}
+
+		_setScale(xScaleKey, _min, _max);
+	}
+
+	let ctxStroke, ctxFill, ctxWidth, ctxDash, ctxJoin, ctxCap, ctxFont, ctxAlign, ctxBaseline;
+	let ctxAlpha;
+
+	function setCtxStyle(stroke?: any, width?: any, dash?: any, cap?: any, fill?: any, join?: any, ..._extra: any[]) {
+		stroke ??= transparent;
+		dash   ??= EMPTY_ARR;
+		cap    ??= "butt"; // (‿|‿)
+		fill   ??= transparent;
+		join   ??= "round";
+
+		if (stroke != ctxStroke)
+			ctx.strokeStyle = ctxStroke = stroke;
+		if (fill != ctxFill)
+			ctx.fillStyle = ctxFill = fill;
+		if (width != ctxWidth)
+			ctx.lineWidth = ctxWidth = width;
+		if (join != ctxJoin)
+			ctx.lineJoin = ctxJoin = join;
+		if (cap != ctxCap)
+			ctx.lineCap = ctxCap = cap;
+		if (dash != ctxDash)
+			ctx.setLineDash(ctxDash = dash);
+	}
+
+	function setFontStyle(font?: any, fill?: any, align?: any, baseline?: any, ..._extra: any[]) {
+		if (fill != ctxFill)
+			ctx.fillStyle = ctxFill = fill;
+		if (font != ctxFont)
+			ctx.font = ctxFont = font;
+		if (align != ctxAlign)
+			ctx.textAlign = ctxAlign = align;
+		if (baseline != ctxBaseline)
+			ctx.textBaseline = ctxBaseline = baseline;
+	}
+
+	function accScale(wsc?: any, psc?: any, facet?: any, data?: any, sorted: any = 0, ..._extra: any[]) {
+		if (data.length > 0 && wsc.auto(self, viaAutoScaleX) && (psc == null || psc.min == null)) {
+			let _i0 = ifNull(i0, 0);
+			let _i1 = ifNull(i1, data.length - 1);
+
+			// only run getMinMax() for invalidated series data, else reuse
+			let minMax = facet.min == null ? getMinMax(data, _i0, _i1, sorted, wsc.distr == 3) : [facet.min, facet.max];
+
+			// initial min/max
+			wsc.min = min(wsc.min, facet.min = minMax[0]);
+			wsc.max = max(wsc.max, facet.max = minMax[1]);
+		}
+	}
+
+	const AUTOSCALE = {min: null, max: null};
+
+	function setScales() {
+	//	log("setScales()", arguments);
+
+		// implicitly add auto scales, and unranged scales
+		for (let k in scales) {
+			let sc = scales[k];
+
+			if (pendScales[k] == null &&
+				(
+					// scales that have never been set (on init)
+					sc.min == null ||
+					// or auto scales when the x scale was explicitly set
+					pendScales[xScaleKey] != null && sc.auto(self, viaAutoScaleX)
+				)
+			) {
+				pendScales[k] = AUTOSCALE;
+			}
+		}
+
+		// implicitly add dependent scales
+		for (let k in scales) {
+			let sc = scales[k];
+
+			if (pendScales[k] == null && sc.from != null && pendScales[sc.from] != null)
+				pendScales[k] = AUTOSCALE;
+		}
+
+		// explicitly setting the x-scale invalidates everything (acts as redraw)
+		if (pendScales[xScaleKey] != null)
+			resetYSeries(true); // TODO: only reset series on auto scales?
+
+		let wipScales = {};
+
+		for (let k in pendScales) {
+			let psc = pendScales[k];
+
+			if (psc != null) {
+				let wsc = wipScales[k] = copy(scales[k], fastIsObj);
+
+				if (psc.min != null)
+					assign(wsc, psc);
+				else if (k != xScaleKey || mode == 2) {
+					if (dataLen == 0 && wsc.from == null) {
+						let minMax = wsc.range(self, null, null, k);
+						wsc.min = minMax[0];
+						wsc.max = minMax[1];
+					}
+					else {
+						wsc.min = inf;
+						wsc.max = -inf;
+					}
+				}
+			}
+		}
+
+		if (dataLen > 0) {
+			// pre-range y-scales from y series' data values
+			series.forEach((s, i) => {
+				if (mode == 1) {
+					let k = s.scale;
+					let psc = pendScales[k];
+
+					if (psc == null)
+						return;
+
+					let wsc = wipScales[k];
+
+					if (i == 0) {
+						let minMax = wsc.range(self, wsc.min, wsc.max, k);
+
+						wsc.min = minMax[0];
+						wsc.max = minMax[1];
+
+						i0 = closestIdx(wsc.min, data[0]);
+						i1 = closestIdx(wsc.max, data[0]);
+
+						// don't try to contract same or adjacent idxs
+						if (i1 - i0 > 1) {
+							// closest indices can be outside of view
+							if (data[0][i0] < wsc.min)
+								i0++;
+							if (data[0][i1] > wsc.max)
+								i1--;
+						}
+
+						s.min = data0[i0];
+						s.max = data0[i1];
+					}
+					else if (s.show && s.auto)
+						accScale(wsc, psc, s, data[i], s.sorted);
+
+					s.idxs[0] = i0;
+					s.idxs[1] = i1;
+				}
+				else {
+					if (i > 0) {
+						if (s.show && s.auto) {
+							// TODO: only handles, assumes and requires facets[0] / 'x' scale, and facets[1] / 'y' scale
+							let [ xFacet, yFacet ] = s.facets;
+							let xScaleKey = xFacet.scale;
+							let yScaleKey = yFacet.scale;
+							let [ xData, yData ] = data[i];
+
+							let wscx = wipScales[xScaleKey];
+							let wscy = wipScales[yScaleKey];
+
+							// null can happen when only x is zoomed, but y has static range and doesnt get auto-added to pending
+							wscx != null && accScale(wscx, pendScales[xScaleKey], xFacet, xData, xFacet.sorted);
+							wscy != null && accScale(wscy, pendScales[yScaleKey], yFacet, yData, yFacet.sorted);
+
+							// temp
+							s.min = yFacet.min;
+							s.max = yFacet.max;
+						}
+					}
+				}
+			});
+
+			// range independent scales
+			for (let k in wipScales) {
+				let wsc = wipScales[k];
+				let psc = pendScales[k];
+
+				if (wsc.from == null && (psc == null || psc.min == null)) {
+					let minMax = wsc.range(
+						self,
+						wsc.min ==  inf ? null : wsc.min,
+						wsc.max == -inf ? null : wsc.max,
+						k
+					);
+					wsc.min = minMax[0];
+					wsc.max = minMax[1];
+				}
+			}
+		}
+
+		// range dependent scales
+		for (let k in wipScales) {
+			let wsc = wipScales[k];
+
+			if (wsc.from != null) {
+				let base = wipScales[wsc.from];
+
+				if (base.min == null)
+					wsc.min = wsc.max = null;
+				else {
+					let minMax = wsc.range(self, base.min, base.max, k);
+					wsc.min = minMax[0];
+					wsc.max = minMax[1];
+				}
+			}
+		}
+
+		let changed: any = {};
+		let anyChanged = false;
+
+		for (let k in wipScales) {
+			let wsc = wipScales[k];
+			let sc = scales[k];
+
+			if (sc.min != wsc.min || sc.max != wsc.max) {
+				sc.min = wsc.min;
+				sc.max = wsc.max;
+
+				let distr = sc.distr;
+
+				sc._min = distr == 3 ? log10(sc.min) : distr == 4 ? asinh(sc.min, sc.asinh) : distr == 100 ? sc.fwd(sc.min) : sc.min;
+				sc._max = distr == 3 ? log10(sc.max) : distr == 4 ? asinh(sc.max, sc.asinh) : distr == 100 ? sc.fwd(sc.max) : sc.max;
+
+				changed[k] = anyChanged = true;
+			}
+		}
+
+		if (anyChanged) {
+			// invalidate paths of all series on changed scales
+			series.forEach((s, i) => {
+				if (mode == 2) {
+					if (i > 0 && changed.y)
+						s._paths = null;
+				}
+				else {
+					if (changed[s.scale])
+						s._paths = null;
+				}
+			});
+
+			for (let k in changed) {
+				shouldConvergeSize = true;
+				fire("setScale", k);
+			}
+
+			if (showCursor && cursor.left >= 0)
+				shouldSetCursor = shouldSetLegend = true;
+		}
+
+		for (let k in pendScales)
+			pendScales[k] = null;
+	}
+
+	// grabs the nearest indices with y data outside of x-scale limits
+	function getOuterIdxs(ydata?: any, ..._extra: any[]) {
+		let _i0 = clamp(i0 - 1, 0, dataLen - 1);
+		let _i1 = clamp(i1 + 1, 0, dataLen - 1);
+
+		while (ydata[_i0] == null && _i0 > 0)
+			_i0--;
+
+		while (ydata[_i1] == null && _i1 < dataLen - 1)
+			_i1++;
+
+		return [_i0, _i1];
+	}
+
+	function drawSeries() {
+		if (dataLen > 0) {
+			let shouldAlpha = series.some(s => s._focus) && ctxAlpha != focus.alpha;
+
+			if (shouldAlpha)
+				ctx.globalAlpha = ctxAlpha = focus.alpha;
+
+			series.forEach((s, i) => {
+				if (i > 0 && s.show) {
+					FEAT_PATHS && cacheStrokeFill(i, false);
+					FEAT_POINTS && cacheStrokeFill(i, true);
+
+					if (s._paths == null) {
+						let _ctxAlpha = ctxAlpha;
+
+						if (ctxAlpha != s.alpha)
+							ctx.globalAlpha = ctxAlpha = s.alpha;
+
+						let _idxs = mode == 2 ? [0, data[i][0].length - 1] : getOuterIdxs(data[i]);
+						s._paths = s.paths(self, i, _idxs[0], _idxs[1]);
+
+						if (ctxAlpha != _ctxAlpha)
+							ctx.globalAlpha = ctxAlpha = _ctxAlpha;
+					}
+				}
+			});
+
+			series.forEach((s, i) => {
+				if (i > 0 && s.show) {
+					let _ctxAlpha = ctxAlpha;
+
+					if (ctxAlpha != s.alpha)
+						ctx.globalAlpha = ctxAlpha = s.alpha;
+
+					FEAT_PATHS && s._paths != null && drawPath(i, false);
+
+					if (FEAT_POINTS) {
+						let _gaps = s._paths != null ? s._paths.gaps : null;
+
+						let show = s.points.show(self, i, i0, i1, _gaps);
+						let idxs = s.points.filter(self, i, show, _gaps);
+
+						if (show || idxs) {
+							s.points._paths = s.points.paths(self, i, i0, i1, idxs);
+							drawPath(i, true);
+						}
+					}
+
+					if (ctxAlpha != _ctxAlpha)
+						ctx.globalAlpha = ctxAlpha = _ctxAlpha;
+
+					fire("drawSeries", i);
+				}
+			});
+
+			if (shouldAlpha)
+				ctx.globalAlpha = ctxAlpha = 1;
+		}
+	}
+
+	function cacheStrokeFill(si?: any, _points?: any, ..._extra: any[]) {
+		let s = _points ? series[si].points : series[si];
+
+		s._stroke = s.stroke(self, si);
+		s._fill   = s.fill(self, si);
+	}
+
+	function drawPath(si?: any, _points?: any, ..._extra: any[]) {
+		let s = _points ? series[si].points : series[si];
+
+		let {
+			stroke,
+			fill,
+			clip: gapsClip,
+			flags,
+
+			_stroke: strokeStyle = s._stroke,
+			_fill:   fillStyle   = s._fill,
+			_width:  width       = s.width,
+		} = s._paths;
+
+		width = roundDec(width * pxRatio, 3);
+
+		let boundsClip = null;
+		let offset = (width % 2) / 2;
+
+		if (_points && fillStyle == null)
+			fillStyle = width > 0 ? "#fff" : strokeStyle;
+
+		let _pxAlign = s.pxAlign == 1 && offset > 0;
+
+		_pxAlign && offset != 0 && ctx.translate(offset, offset);
+
+		if (!_points) {
+			let lft = plotLft - width / 2,
+				top = plotTop - width / 2,
+				wid = plotWid + width,
+				hgt = plotHgt + width;
+
+			boundsClip = new GPUPath();
+			boundsClip.rect(lft, top, wid, hgt);
+		}
+
+		// the points pathbuilder's gapsClip is its boundsClip, since points dont need gaps clipping, and bounds depend on point size
+		if (_points)
+			strokeFill(strokeStyle, width, s.dash, s.cap, fillStyle, stroke, fill, flags, gapsClip);
+		else
+			fillStroke(si, strokeStyle, width, s.dash, s.cap, fillStyle, stroke, fill, flags, boundsClip, gapsClip);
+
+		_pxAlign && offset != 0 && ctx.translate(-offset, -offset);
+	}
+
+	function fillStroke(si?: any, strokeStyle?: any, lineWidth?: any, lineDash?: any, lineCap?: any, fillStyle?: any, strokePath?: any, fillPath?: any, flags?: any, boundsClip?: any, gapsClip?: any, ..._extra: any[]) {
+		let didStrokeFill = false;
+
+		// for all bands where this series is the top edge, create upwards clips using the bottom edges
+		// and apply clips + fill with band fill or dfltFill
+		flags != 0 && bands.forEach((b, bi) => {
+			// isUpperEdge?
+			if (b.series[0] == si) {
+				let lowerEdge = series[b.series[1]];
+				let lowerData = data[b.series[1]];
+
+				let bandClip = (lowerEdge._paths || EMPTY_OBJ).band;
+
+				if (isArr(bandClip))
+					bandClip = b.dir == 1 ? bandClip[0] : bandClip[1];
+
+				let gapsClip2;
+
+				let _fillStyle = null;
+
+				// hasLowerEdge?
+				if (lowerEdge.show && bandClip && hasData(lowerData, i0, i1)) {
+					_fillStyle = b.fill(self, bi) || fillStyle;
+					gapsClip2 = lowerEdge._paths.clip;
+				}
+				else
+					bandClip = null;
+
+				strokeFill(strokeStyle, lineWidth, lineDash, lineCap, _fillStyle, strokePath, fillPath, flags, boundsClip, gapsClip, gapsClip2, bandClip);
+
+				didStrokeFill = true;
+			}
+		});
+
+		if (!didStrokeFill)
+			strokeFill(strokeStyle, lineWidth, lineDash, lineCap, fillStyle, strokePath, fillPath, flags, boundsClip, gapsClip);
+	}
+
+	const CLIP_FILL_STROKE = BAND_CLIP_FILL | BAND_CLIP_STROKE;
+
+	function strokeFill(strokeStyle?: any, lineWidth?: any, lineDash?: any, lineCap?: any, fillStyle?: any, strokePath?: any, fillPath?: any, flags?: any, boundsClip?: any, gapsClip?: any, gapsClip2?: any, bandClip?: any, ..._extra: any[]) {
+		setCtxStyle(strokeStyle, lineWidth, lineDash, lineCap, fillStyle);
+
+		if (boundsClip || gapsClip || bandClip) {
+			ctx.save();
+			boundsClip && ctx.clip(boundsClip);
+			gapsClip && ctx.clip(gapsClip);
+		}
+
+		if (bandClip) {
+			if ((flags & CLIP_FILL_STROKE) == CLIP_FILL_STROKE) {
+				ctx.clip(bandClip);
+				gapsClip2 && ctx.clip(gapsClip2);
+				doFill(fillStyle, fillPath);
+				doStroke(strokeStyle, strokePath, lineWidth);
+			}
+			else if (flags & BAND_CLIP_STROKE) {
+				doFill(fillStyle, fillPath);
+				ctx.clip(bandClip);
+				doStroke(strokeStyle, strokePath, lineWidth);
+			}
+			else if (flags & BAND_CLIP_FILL) {
+				ctx.save();
+				ctx.clip(bandClip);
+				gapsClip2 && ctx.clip(gapsClip2);
+				doFill(fillStyle, fillPath);
+				ctx.restore();
+				doStroke(strokeStyle, strokePath, lineWidth);
+			}
+		}
+		else {
+			doFill(fillStyle, fillPath);
+			doStroke(strokeStyle, strokePath, lineWidth);
+		}
+
+		if (boundsClip || gapsClip || bandClip)
+			ctx.restore();
+	}
+
+	function doStroke(strokeStyle?: any, strokePath?: any, lineWidth?: any, ..._extra: any[]) {
+		if (lineWidth > 0) {
+			if (strokePath instanceof Map) {
+				strokePath.forEach((strokePath, strokeStyle) => {
+					ctx.strokeStyle = ctxStroke = strokeStyle;
+					ctx.stroke(strokePath);
+				});
+			}
+			else
+				strokePath != null && strokeStyle && ctx.stroke(strokePath);
+		}
+	}
+
+	function doFill(fillStyle?: any, fillPath?: any, ..._extra: any[]) {
+		if (fillPath instanceof Map) {
+			fillPath.forEach((fillPath, fillStyle) => {
+				ctx.fillStyle = ctxFill = fillStyle;
+				ctx.fill(fillPath);
+			});
+		}
+		else
+			fillPath != null && fillStyle && ctx.fill(fillPath);
+	}
+
+	function getIncrSpace(axisIdx?: any, min?: any, max?: any, fullDim?: any, ..._extra: any[]) {
+		let axis = axes[axisIdx];
+
+		let incrSpace;
+
+		if (fullDim <= 0)
+			incrSpace = [0, 0];
+		else {
+			let minSpace = axis._space = axis.space(self, axisIdx, min, max, fullDim);
+			let incrs    = axis._incrs = axis.incrs(self, axisIdx, min, max, fullDim, minSpace);
+			incrSpace    = findIncr(min, max, incrs, fullDim, minSpace);
+		}
+
+		return (axis._found = incrSpace);
+	}
+
+	function drawOrthoLines(offs?: any, filts?: any, ori?: any, side?: any, pos0?: any, len?: any, width?: any, stroke?: any, dash?: any, cap?: any, ..._extra: any[]) {
+		let offset = (width % 2) / 2;
+
+		pxAlign == 1 && offset != 0 && ctx.translate(offset, offset);
+
+		setCtxStyle(stroke, width, dash, cap, stroke);
+
+		ctx.beginPath();
+
+		let x0, y0, x1, y1, pos1 = pos0 + (side == 0 || side == 3 ? -len : len);
+
+		if (ori == 0) {
+			y0 = pos0;
+			y1 = pos1;
+		}
+		else {
+			x0 = pos0;
+			x1 = pos1;
+		}
+
+		for (let i = 0; i < offs.length; i++) {
+			if (filts[i] != null) {
+				if (ori == 0)
+					x0 = x1 = offs[i];
+				else
+					y0 = y1 = offs[i];
+
+				ctx.moveTo(x0, y0);
+				ctx.lineTo(x1, y1);
+			}
+		}
+
+		ctx.stroke();
+
+		pxAlign == 1 && offset != 0 && ctx.translate(-offset, -offset);
+	}
+
+	function axesCalc(cycleNum?: any, ..._extra: any[]) {
+	//	log("axesCalc()", arguments);
+
+		let converged = true;
+
+		axes.forEach((axis, i) => {
+			if (!axis.show)
+				return;
+
+			let scale = scales[axis.scale];
+
+			if (scale.min == null) {
+				if (axis._show) {
+					converged = false;
+					axis._show = false;
+					resetYSeries(false);
+				}
+				return;
+			}
+			else {
+				if (!axis._show) {
+					converged = false;
+					axis._show = true;
+					resetYSeries(false);
+				}
+			}
+
+			let side = axis.side;
+			let ori = side % 2;
+
+			let {min, max} = scale;		// 		// should this toggle them ._show = false
+
+			let [_incr, _space] = getIncrSpace(i, min, max, ori == 0 ? plotWidCss : plotHgtCss);
+
+			if (_space == 0)
+				return;
+
+			// if we're using index positions, force first tick to match passed index
+			let forceMin = scale.distr == 2;
+
+			let _splits = axis._splits = axis.splits(self, i, min, max, _incr, _space, forceMin);
+
+			// tick labels
+			// BOO this assumes a specific data/series
+			let splits = scale.distr == 2 ? _splits.map(i => data0[i]) : _splits;
+			let incr   = scale.distr == 2 ? data0[_splits[1]] - data0[_splits[0]] : _incr;
+
+			let values = axis._values = axis.values(self, axis.filter(self, splits, i, _space, incr), i, _space, incr);
+
+			// rotating of labels only supported on bottom x axis
+			axis._rotate = side == 2 ? axis.rotate(self, values, i, _space) : 0;
+
+			let oldSize = axis._size;
+
+			axis._size = ceil(axis.size(self, values, i, cycleNum));
+
+			if (oldSize != null && axis._size != oldSize)			// ready && ?
+				converged = false;
+		});
+
+		return converged;
+	}
+
+	function paddingCalc(cycleNum?: any, ..._extra: any[]) {
+		let converged = true;
+
+		padding.forEach((p, i) => {
+			let _p = p(self, i, sidesWithAxes, cycleNum);
+
+			if (_p != _padding[i])
+				converged = false;
+
+			_padding[i] = _p;
+		});
+
+		return converged;
+	}
+
+	function drawAxesGrid() {
+		for (let i = 0; i < axes.length; i++) {
+			let axis = axes[i];
+
+			if (!axis.show || !axis._show)
+				continue;
+
+			let side = axis.side;
+			let ori = side % 2;
+
+			let x, y;
+
+			let fillStyle = axis.stroke(self, i);
+
+			let shiftDir = side == 0 || side == 3 ? -1 : 1;
+
+			let [_incr, _space] = axis._found;
+
+			// axis label
+			if (axis.label != null) {
+				let shiftAmt = axis.labelGap * shiftDir;
+				let baseLpos = round((axis._lpos + shiftAmt) * pxRatio);
+
+				setFontStyle(axis.labelFont[0], fillStyle, "center", side == 2 ? TOP : BOTTOM);
+
+				ctx.save();
+
+				if (ori == 1) {
+					x = y = 0;
+
+					ctx.translate(
+						baseLpos,
+						round(plotTop + plotHgt / 2),
+					);
+					ctx.rotate((side == 3 ? -PI : PI) / 2);
+
+				}
+				else {
+					x = round(plotLft + plotWid / 2);
+					y = baseLpos;
+				}
+
+				let _label = isFn(axis.label) ? axis.label(self, i, _incr, _space) : axis.label;
+
+				ctx.fillText(_label, x, y);
+
+				ctx.restore();
+			}
+
+			if (_space == 0)
+				continue;
+
+			let scale = scales[axis.scale];
+
+			let plotDim = ori == 0 ? plotWid : plotHgt;
+			let plotOff = ori == 0 ? plotLft : plotTop;
+
+			let _splits = axis._splits;
+
+			// tick labels
+			// BOO this assumes a specific data/series
+			let splits = scale.distr == 2 ? _splits.map(i => data0[i]) : _splits;
+			let incr   = scale.distr == 2 ? data0[_splits[1]] - data0[_splits[0]] : _incr;
+
+			let ticks = axis.ticks;
+			let border = axis.border;
+			let _tickSize = ticks.show ? ticks.size : 0;
+			let tickSize = round(_tickSize * pxRatio);
+			let axisGap = round((axis.alignTo == 2 ? axis._size - _tickSize - axis.gap : axis.gap) * pxRatio);
+
+			// rotating of labels only supported on bottom x axis
+			let angle = axis._rotate * -PI/180;
+
+			let basePos  = pxRound(axis._pos * pxRatio);
+			let shiftAmt = (tickSize + axisGap) * shiftDir;
+			let finalPos = basePos + shiftAmt;
+			    y        = ori == 0 ? finalPos : 0;
+			    x        = ori == 1 ? finalPos : 0;
+
+			let font         = axis.font[0];
+			let textAlign    = axis.align == 1 ? LEFT :
+			                   axis.align == 2 ? RIGHT :
+			                   angle > 0 ? LEFT :
+			                   angle < 0 ? RIGHT :
+			                   ori == 0 ? "center" : side == 3 ? RIGHT : LEFT;
+			let textBaseline = angle ||
+			                   ori == 1 ? "middle" : side == 2 ? TOP   : BOTTOM;
+
+			setFontStyle(font, fillStyle, textAlign, textBaseline);
+
+			let lineHeight = axis.font[1] * axis.lineGap;
+
+			let canOffs = _splits.map(val => pxRound(getPos(val, scale, plotDim, plotOff)));
+
+			let _values = axis._values;
+
+			for (let i = 0; i < _values.length; i++) {
+				let val = _values[i];
+
+				if (val != null) {
+					if (ori == 0)
+						x = canOffs[i];
+					else
+						y = canOffs[i];
+
+					val = "" + val;
+
+					let _parts = val.indexOf("\n") == -1 ? [val] : val.split(/\n/gm);
+
+					for (let j = 0; j < _parts.length; j++) {
+						let text = _parts[j];
+
+						if (angle) {
+							ctx.save();
+							ctx.translate(x, y + j * lineHeight); // can this be replaced with position math?
+							ctx.rotate(angle); // can this be done once?
+							ctx.fillText(text, 0, 0);
+							ctx.restore();
+						}
+						else
+							ctx.fillText(text, x, y + j * lineHeight);
+					}
+				}
+			}
+
+			// ticks
+			if (ticks.show) {
+				drawOrthoLines(
+					canOffs,
+					ticks.filter(self, splits, i, _space, incr),
+					ori,
+					side,
+					basePos,
+					tickSize,
+					roundDec(ticks.width * pxRatio, 3),
+					ticks.stroke(self, i),
+					ticks.dash,
+					ticks.cap,
+				);
+			}
+
+			// grid
+			let grid = axis.grid;
+
+			if (grid.show) {
+				drawOrthoLines(
+					canOffs,
+					grid.filter(self, splits, i, _space, incr),
+					ori,
+					ori == 0 ? 2 : 1,
+					ori == 0 ? plotTop : plotLft,
+					ori == 0 ? plotHgt : plotWid,
+					roundDec(grid.width * pxRatio, 3),
+					grid.stroke(self, i),
+					grid.dash,
+					grid.cap,
+				);
+			}
+
+			if (border.show) {
+				drawOrthoLines(
+					[basePos],
+					[1],
+					ori == 0 ? 1 : 0,
+					ori == 0 ? 1 : 2,
+					ori == 1 ? plotTop : plotLft,
+					ori == 1 ? plotHgt : plotWid,
+					roundDec(border.width * pxRatio, 3),
+					border.stroke(self, i),
+					border.dash,
+					border.cap,
+				);
+			}
+		}
+
+		fire("drawAxes");
+	}
+
+	function resetYSeries(minMax?: any, ..._extra: any[]) {
+	//	log("resetYSeries()", arguments);
+
+		series.forEach((s, i) => {
+			if (i > 0) {
+				s._paths = null;
+
+				if (minMax) {
+					if (mode == 1) {
+						s.min = null;
+						s.max = null;
+					}
+					else {
+						s.facets.forEach(f => {
+							f.min = null;
+							f.max = null;
+						});
+					}
+				}
+			}
+		});
+	}
+
+	let queuedCommit = false;
+	let deferHooks = false;
+	let hooksQueue = [];
+
+	function flushHooks() {
+		deferHooks = false;
+
+		for (let i = 0; i < hooksQueue.length; i++)
+			fire(...hooksQueue[i])
+
+		hooksQueue.length = 0;
+	}
+
+	function commit() {
+		if (!queuedCommit) {
+			microTask(_commit);
+			queuedCommit = true;
+		}
+	}
+
+	// manual batching (aka immediate mode), skips microtask queue
+	function batch(fn?: any, _deferHooks: any = false, ..._extra: any[]) {
+		queuedCommit = true;
+		deferHooks = _deferHooks;
+
+		fn(self);
+		_commit();
+
+		if (_deferHooks && hooksQueue.length > 0)
+			queueMicrotask(flushHooks);
+	}
+
+	self.batch = batch;
+
+	function _commit() {
+	//	log("_commit()", arguments);
+
+		if (shouldSetScales) {
+			setScales();
+			shouldSetScales = false;
+		}
+
+		if (shouldConvergeSize) {
+			convergeSize();
+			shouldConvergeSize = false;
+		}
+
+		if (shouldSetSize) {
+			setStylePx(under, LEFT,   plotLftCss);
+			setStylePx(under, TOP,    plotTopCss);
+			setStylePx(under, WIDTH,  plotWidCss);
+			setStylePx(under, HEIGHT, plotHgtCss);
+
+			setStylePx(over, LEFT,    plotLftCss);
+			setStylePx(over, TOP,     plotTopCss);
+			setStylePx(over, WIDTH,   plotWidCss);
+			setStylePx(over, HEIGHT,  plotHgtCss);
+
+			setStylePx(wrap, WIDTH,   fullWidCss);
+			setStylePx(wrap, HEIGHT,  fullHgtCss);
+
+			// NOTE: mutating this during print preview in Chrome forces transparent
+			// canvas pixels to white, even when followed up with clearRect() below
+			can.width  = round(fullWidCss * pxRatio);
+			can.height = round(fullHgtCss * pxRatio);
+
+			axes.forEach(({ _el, _show, _size, _pos, side }) => {
+				if (_el != null) {
+					if (_show) {
+						let posOffset = (side === 3 || side === 0 ? _size : 0);
+						let isVt = side % 2 == 1;
+
+						setStylePx(_el, isVt ? "left"   : "top",    _pos - posOffset);
+						setStylePx(_el, isVt ? "width"  : "height", _size);
+						setStylePx(_el, isVt ? "top"    : "left",   isVt ? plotTopCss : plotLftCss);
+						setStylePx(_el, isVt ? "height" : "width",  isVt ? plotHgtCss : plotWidCss);
+
+						remClass(_el, OFF);
+					}
+					else
+						addClass(_el, OFF);
+				}
+			});
+
+			// invalidate ctx style cache
+			ctxStroke = ctxFill = ctxWidth = ctxJoin = ctxCap = ctxFont = ctxAlign = ctxBaseline = ctxDash = null;
+			ctxAlpha = 1;
+
+			syncRect(true);
+
+			if (
+				plotLftCss != _plotLftCss ||
+				plotTopCss != _plotTopCss ||
+				plotWidCss != _plotWidCss ||
+				plotHgtCss != _plotHgtCss
+			) {
+				resetYSeries(false);
+
+				let pctWid = plotWidCss / _plotWidCss;
+				let pctHgt = plotHgtCss / _plotHgtCss;
+
+				if (showCursor && !shouldSetCursor && cursor.left >= 0) {
+					cursor.left *= pctWid;
+					cursor.top  *= pctHgt;
+
+					vCursor && elTrans(vCursor, round(cursor.left), 0, plotWidCss, plotHgtCss);
+					hCursor && elTrans(hCursor, 0, round(cursor.top), plotWidCss, plotHgtCss);
+
+					for (let i = 0; i < cursorPts.length; i++) {
+						let pt = cursorPts[i];
+
+						if (pt != null) {
+							cursorPtsLft[i] *= pctWid;
+							cursorPtsTop[i] *= pctHgt;
+							elTrans(pt, ceil(cursorPtsLft[i]), ceil(cursorPtsTop[i]), plotWidCss, plotHgtCss);
+						}
+					}
+				}
+
+				if (select.show && !shouldSetSelect && select.left >= 0 && select.width > 0) {
+					select.left   *= pctWid;
+					select.width  *= pctWid;
+					select.top    *= pctHgt;
+					select.height *= pctHgt;
+
+					for (let prop in _hideProps)
+						setStylePx(selectDiv, prop, select[prop]);
+				}
+
+				_plotLftCss = plotLftCss;
+				_plotTopCss = plotTopCss;
+				_plotWidCss = plotWidCss;
+				_plotHgtCss = plotHgtCss;
+			}
+
+			fire("setSize");
+
+			shouldSetSize = false;
+		}
+
+		if (fullWidCss > 0 && fullHgtCss > 0) {
+			ctx.clearRect(0, 0, can.width, can.height);
+			fire("drawClear");
+			drawOrder.forEach(fn => fn());
+			fire("draw");
+			ctx.present();
+		}
+
+		if (select.show && shouldSetSelect) {
+			setSelect(select);
+			shouldSetSelect = false;
+		}
+
+		if (showCursor && shouldSetCursor) {
+			updateCursor(null, true, false);
+			shouldSetCursor = false;
+		}
+
+		if (FEAT_LEGEND && legend.show && legend.live && shouldSetLegend) {
+			setLegend();
+			shouldSetLegend = false; // redundant currently
+		}
+
+		if (!ready) {
+			ready = true;
+			self.status = 1;
+
+			fire("ready");
+		}
+
+		viaAutoScaleX = false;
+
+		queuedCommit = false;
+
+		if (!usePathCache)
+			clearPathCache();
+	}
+
+	function clearPathCache() {
+		series.forEach((s, i) => {
+			if (i > 0)
+				s._paths = null;
+		});
+	}
+
+	self.clearCache = clearPathCache;
+
+	self.redraw = (rebuildPaths, recalcAxes) => {
+		shouldConvergeSize = recalcAxes || false;
+
+		if (rebuildPaths !== false)
+			_setScale(xScaleKey, scaleX.min, scaleX.max);
+		else
+			commit();
+	};
+
+	// redraw() => setScale('x', scales.x.min, scales.x.max);
+
+	// explicit, never re-ranged (is this actually true? for x and y)
+	function setScale(key?: any, opts?: any, ..._extra: any[]) {
+		let sc = scales[key];
+
+		if (sc.from == null) {
+			if (dataLen == 0) {
+				let minMax = sc.range(self, opts.min, opts.max, key);
+				opts.min = minMax[0];
+				opts.max = minMax[1];
+			}
+
+			if (opts.min > opts.max) {
+				let _min = opts.min;
+				opts.min = opts.max;
+				opts.max = _min;
+			}
+
+			if (dataLen > 1 && opts.min != null && opts.max != null && opts.max - opts.min < 1e-16)
+				return;
+
+			if (key == xScaleKey) {
+				if (sc.distr == 2 && dataLen > 0) {
+					opts.min = closestIdx(opts.min, data[0]);
+					opts.max = closestIdx(opts.max, data[0]);
+
+					if (opts.min == opts.max)
+						opts.max++;
+				}
+			}
+
+		//	log("setScale()", arguments);
+
+			pendScales[key] = opts;
+
+			shouldSetScales = true;
+			commit();
+		}
+	}
+
+	self.setScale = setScale;
+
+//	INTERACTION
+
+	let xCursor;
+	let yCursor;
+	let vCursor;
+	let hCursor;
+
+	// starting position before cursor.move
+	let rawMouseLeft0;
+	let rawMouseTop0;
+
+	// starting position
+	let mouseLeft0;
+	let mouseTop0;
+
+	// current position before cursor.move
+	let rawMouseLeft1;
+	let rawMouseTop1;
+
+	// current position
+	let mouseLeft1;
+	let mouseTop1;
+
+	let dragging = false;
+
+	const drag = cursor.drag;
+
+	let dragX = drag.x;
+	let dragY = drag.y;
+
+	if (showCursor) {
+		if (cursor.x)
+			xCursor = placeDiv(CURSOR_X, over);
+		if (cursor.y)
+			yCursor = placeDiv(CURSOR_Y, over);
+
+		if (scaleX.ori == 0) {
+			vCursor = xCursor;
+			hCursor = yCursor;
+		}
+		else {
+			vCursor = yCursor;
+			hCursor = xCursor;
+		}
+
+		mouseLeft1 = cursor.left;
+		mouseTop1 = cursor.top;
+	}
+
+	const select = self.select = assign({
+		show:   true,
+		over:   true,
+		left:   0,
+		width:  0,
+		top:    0,
+		height: 0,
+	}, opts.select);
+
+	const selectDiv = select.show ? placeDiv(SELECT, select.over ? over : under) : null;
+
+	function setSelect(opts?: any, _fire?: any, ..._extra: any[]) {
+		if (select.show) {
+			for (let prop in opts) {
+				select[prop] = opts[prop];
+
+				if (prop in _hideProps)
+					setStylePx(selectDiv, prop, opts[prop]);
+			}
+
+			_fire !== false && fire("setSelect");
+		}
+	}
+
+	self.setSelect = setSelect;
+
+	function toggleDOM(i?: any, ..._extra: any[]) {
+		let s = series[i];
+
+		if (s.show)
+			showLegend && remClass(legendRows[i], OFF);
+		else {
+			showLegend && addClass(legendRows[i], OFF);
+
+			if (showCursor) {
+				let pt = cursorOnePt ? cursorPts[0] : cursorPts[i];
+				pt != null && elTrans(pt, -10, -10, plotWidCss, plotHgtCss);
+			}
+		}
+	}
+
+	function _setScale(key?: any, min?: any, max?: any, ..._extra: any[]) {
+		setScale(key, {min, max});
+	}
+
+	function setSeries(i?: any, opts?: any, _fire?: any, _pub?: any, ..._extra: any[]) {
+	//	log("setSeries()", arguments);
+
+		if (opts.focus != null)
+			setFocus(i);
+
+		if (opts.show != null) {
+			series.forEach((s, si) => {
+				if (si > 0 && (i == si || i == null)) {
+					s.show = opts.show;
+					FEAT_LEGEND && toggleDOM(si);
+
+					if (mode == 2) {
+						_setScale(s.facets[0].scale, null, null);
+						_setScale(s.facets[1].scale, null, null);
+					}
+					else
+						_setScale(s.scale, null, null);
+
+					commit();
+				}
+			});
+		}
+
+		_fire !== false && fire("setSeries", i, opts);
+
+		_pub && pubSync("setSeries", self, i, opts);
+	}
+
+	self.setSeries = setSeries;
+
+	function setBand(bi?: any, opts?: any, ..._extra: any[]) {
+		assign(bands[bi], opts);
+	}
+
+	function addBand(opts?: any, bi?: any, ..._extra: any[]) {
+		opts.fill = fnOrSelf(opts.fill || null);
+		opts.dir = ifNull(opts.dir, -1);
+		bi = bi == null ? bands.length : bi;
+		bands.splice(bi, 0, opts);
+	}
+
+	function delBand(bi?: any, ..._extra: any[]) {
+		if (bi == null)
+			bands.length = 0;
+		else
+			bands.splice(bi, 1);
+	}
+
+	self.addBand = addBand;
+	self.setBand = setBand;
+	self.delBand = delBand;
+
+	function setAlpha(i?: any, value?: any, ..._extra: any[]) {
+		series[i].alpha = value;
+
+		if (showCursor && cursorPts[i] != null)
+			cursorPts[i].style.opacity = value;
+
+		if (FEAT_LEGEND && showLegend && legendRows[i])
+			legendRows[i].style.opacity = value;
+	}
+
+	// y-distance
+	let closestDist;
+	let closestSeries;
+	let focusedSeries;
+	const FOCUS_TRUE  = {focus: true};
+
+	function setFocus(i?: any, ..._extra: any[]) {
+		if (i != focusedSeries) {
+		//	log("setFocus()", arguments);
+
+			let allFocused = i == null;
+
+			let _setAlpha = focus.alpha != 1;
+
+			series.forEach((s, i2) => {
+				if (mode == 1 || i2 > 0) {
+					let isFocused = allFocused || i2 == 0 || i2 == i;
+					s._focus = allFocused ? null : isFocused;
+					_setAlpha && setAlpha(i2, isFocused ? 1 : focus.alpha);
+				}
+			});
+
+			focusedSeries = i;
+			_setAlpha && commit();
+		}
+	}
+
+	if (showLegend && cursorFocus) {
+		onMouse(mouseleave, legendTable, e => {
+			if (cursor._lock)
+				return;
+
+			setCursorEvent(e);
+
+			if (focusedSeries != null)
+				setSeries(null, FOCUS_TRUE, true, syncOpts.setSeries);
+		});
+	}
+
+	function posToVal(pos?: any, scale?: any, can?: any, ..._extra: any[]) {
+		let sc = scales[scale];
+
+		if (can)
+			pos = pos / pxRatio - (sc.ori == 1 ? plotTopCss : plotLftCss);
+
+		let dim = plotWidCss;
+
+		if (sc.ori == 1) {
+			dim = plotHgtCss;
+			pos = dim - pos;
+		}
+
+		if (sc.dir == -1)
+			pos = dim - pos;
+
+		let _min = sc._min,
+			_max = sc._max,
+			pct = pos / dim;
+
+		let sv = _min + (_max - _min) * pct;
+
+		let distr = sc.distr;
+
+		return (
+			distr == 3 ? pow(10, sv) :
+			distr == 4 ? sinh(sv, sc.asinh) :
+			distr == 100 ? sc.bwd(sv) :
+			sv
+		);
+	}
+
+	function closestIdxFromXpos(pos?: any, can?: any, ..._extra: any[]) {
+		let v = posToVal(pos, xScaleKey, can);
+		return closestIdx(v, data[0], i0, i1);
+	}
+
+	self.valToIdx = val => closestIdx(val, data[0]);
+	self.posToIdx = closestIdxFromXpos;
+	self.posToVal = posToVal;
+	self.valToPos = (val, scale, can) => (
+		scales[scale].ori == 0 ?
+		getHPos(val, scales[scale],
+			can ? plotWid : plotWidCss,
+			can ? plotLft : 0,
+		) :
+		getVPos(val, scales[scale],
+			can ? plotHgt : plotHgtCss,
+			can ? plotTop : 0,
+		)
+	);
+
+	self.setCursor = (opts, _fire, _pub) => {
+		mouseLeft1 = opts.left;
+		mouseTop1 = opts.top;
+	//	assign(cursor, opts);
+		updateCursor(null, _fire, _pub);
+	};
+
+	function setSelH(off?: any, dim?: any, ..._extra: any[]) {
+		setStylePx(selectDiv, LEFT,  select.left = off);
+		setStylePx(selectDiv, WIDTH, select.width = dim);
+	}
+
+	function setSelV(off?: any, dim?: any, ..._extra: any[]) {
+		setStylePx(selectDiv, TOP,    select.top = off);
+		setStylePx(selectDiv, HEIGHT, select.height = dim);
+	}
+
+	let setSelX = scaleX.ori == 0 ? setSelH : setSelV;
+	let setSelY = scaleX.ori == 1 ? setSelH : setSelV;
+
+	function syncLegend() {
+		if (showLegend && legend.live) {
+			for (let i = mode == 2 ? 1 : 0; i < series.length; i++) {
+				if (i == 0 && multiValLegend)
+					continue;
+
+				let vals = legend.values[i];
+
+				let j = 0;
+
+				for (let k in vals)
+					legendCells[i][j++].firstChild.nodeValue = vals[k];
+			}
+		}
+	}
+
+	function setLegend(opts?: any, _fire?: any, ..._extra: any[]) {
+		if (opts != null) {
+			if (opts.idxs) {
+				opts.idxs.forEach((didx, sidx) => {
+					activeIdxs[sidx] = didx;
+				});
+			}
+			else if (!isUndef(opts.idx))
+				activeIdxs.fill(opts.idx);
+
+			legend.idx = activeIdxs[0];
+		}
+
+		if (showLegend && legend.live) {
+			for (let sidx = 0; sidx < series.length; sidx++) {
+				if (sidx > 0 || mode == 1 && !multiValLegend)
+					setLegendValues(sidx, activeIdxs[sidx]);
+			}
+
+			syncLegend();
+		}
+
+		shouldSetLegend = false;
+
+		_fire !== false && fire("setLegend");
+	}
+
+	self.setLegend = setLegend;
+
+	function setLegendValues(sidx?: any, idx?: any, ..._extra: any[]) {
+		let s = series[sidx];
+		let src = sidx == 0 && xScaleDistr == 2 ? data0 : data[sidx];
+		let val;
+
+		if (multiValLegend)
+			val = s.values(self, sidx, idx) ?? NULL_LEGEND_VALUES;
+		else {
+			val = s.value(self, idx == null ? null : src[idx], sidx, idx);
+			val = val == null ? NULL_LEGEND_VALUES : {_: val};
+		}
+
+		legend.values[sidx] = val;
+	}
+
+	function updateCursor(src?: any, _fire?: any, _pub?: any, ..._extra: any[]) {
+	//	ts == null && log("updateCursor()", arguments);
+
+		rawMouseLeft1 = mouseLeft1;
+		rawMouseTop1 = mouseTop1;
+
+		[mouseLeft1, mouseTop1] = cursor.move(self, mouseLeft1, mouseTop1);
+
+		cursor.left = mouseLeft1;
+		cursor.top = mouseTop1;
+
+		if (showCursor) {
+			vCursor && elTrans(vCursor, round(mouseLeft1), 0, plotWidCss, plotHgtCss);
+			hCursor && elTrans(hCursor, 0, round(mouseTop1), plotWidCss, plotHgtCss);
+		}
+
+		let idx;
+
+		// when zooming to an x scale range between datapoints the binary search
+		// for nearest min/max indices results in this condition. cheap hack :D
+		let noDataInRange = i0 > i1; // works for mode 1 only
+
+		closestDist = inf;
+		closestSeries = null;
+
+		// TODO: extract
+		let xDim = scaleX.ori == 0 ? plotWidCss : plotHgtCss;
+		let yDim = scaleX.ori == 1 ? plotWidCss : plotHgtCss;
+
+		// if cursor hidden, hide points & clear legend vals
+		if (mouseLeft1 < 0 || dataLen == 0 || noDataInRange) {
+			idx = cursor.idx = null;
+
+			for (let i = 0; i < series.length; i++) {
+				let pt = cursorPts[i];
+				pt != null && elTrans(pt, -10, -10, plotWidCss, plotHgtCss);
+			}
+
+			if (cursorFocus)
+				setSeries(null, FOCUS_TRUE, true, src == null && syncOpts.setSeries);
+
+			if (FEAT_LEGEND && legend.live) {
+				activeIdxs.fill(idx);
+				shouldSetLegend = true;
+			}
+		}
+		else {
+		//	let pctY = 1 - (y / rect.height);
+
+			let mouseXPos, valAtPosX, xPos;
+
+			if (mode == 1) {
+				mouseXPos = scaleX.ori == 0 ? mouseLeft1 : mouseTop1;
+				valAtPosX = posToVal(mouseXPos, xScaleKey);
+				idx = cursor.idx = closestIdx(valAtPosX, data[0], i0, i1);
+				xPos = valToPosX(data[0][idx], scaleX, xDim, 0);
+			}
+
+			// closest pt values
+			let _ptLft = -10;
+			let _ptTop = -10;
+			let _ptWid = 0;
+			let _ptHgt = 0;
+			let _centered = true;
+			let _ptFill = '';
+			let _ptStroke = '';
+
+			for (let i = mode == 2 ? 1 : 0; i < series.length; i++) {
+				let s = series[i];
+
+				let idx1  = activeIdxs[i];
+				let yVal1 = idx1 == null ? null : (mode == 1 ? data[i][idx1] : data[i][1][idx1]);
+
+				let idx2  = cursor.dataIdx(self, i, idx, valAtPosX);
+				let yVal2 = idx2 == null ? null : (mode == 1 ? data[i][idx2] : data[i][1][idx2]);
+
+				shouldSetLegend = shouldSetLegend || yVal2 != yVal1 || idx2 != idx1;
+
+				activeIdxs[i] = idx2;
+
+				if (i > 0 && s.show) {
+					let xPos2 = idx2 == null ? -10 : idx2 == idx ? xPos : valToPosX(mode == 1 ? data[0][idx2] : data[i][0][idx2], scaleX, xDim, 0);
+
+					// this doesnt really work for state timeline, heatmap, status history (where the value maps to color, not y coords)
+					let yPos = yVal2 == null ? -10 : valToPosY(yVal2, mode == 1 ? scales[s.scale] : scales[s.facets[1].scale], yDim, 0);
+
+					if (cursorFocus && yVal2 != null) {
+						let mouseYPos = scaleX.ori == 1 ? mouseLeft1 : mouseTop1;
+						let dist = abs(focus.dist(self, i, idx2, yPos, mouseYPos));
+
+						if (dist < closestDist) {
+							let bias = focus.bias;
+
+							if (bias != 0) {
+								let mouseYVal = posToVal(mouseYPos, s.scale);
+
+								let seriesYValSign = yVal2     >= 0 ? 1 : -1;
+								let mouseYValSign  = mouseYVal >= 0 ? 1 : -1;
+
+								// with a focus bias, we will never cross zero when prox testing
+								// it's either closest towards zero, or closest away from zero
+								if (mouseYValSign == seriesYValSign && (
+									mouseYValSign == 1 ?
+										(bias == 1 ? yVal2 >= mouseYVal : yVal2 <= mouseYVal) :  // >= 0
+										(bias == 1 ? yVal2 <= mouseYVal : yVal2 >= mouseYVal)    //  < 0
+								)) {
+									closestDist = dist;
+									closestSeries = i;
+								}
+							}
+							else {
+								closestDist = dist;
+								closestSeries = i;
+							}
+						}
+					}
+
+					if (shouldSetLegend || cursorOnePt) {
+						let hPos, vPos;
+
+						if (scaleX.ori == 0) {
+							hPos = xPos2;
+							vPos = yPos;
+						}
+						else {
+							hPos = yPos;
+							vPos = xPos2;
+						}
+
+						let ptWid, ptHgt, ptLft, ptTop,
+							ptStroke, ptFill,
+							centered = true,
+							getBBox = points.bbox;
+
+						if (getBBox != null) {
+							centered = false;
+
+							let bbox = getBBox(self, i);
+
+							ptLft = bbox.left;
+							ptTop = bbox.top;
+							ptWid = bbox.width;
+							ptHgt = bbox.height;
+						}
+						else {
+							ptLft = hPos;
+							ptTop = vPos;
+							ptWid = ptHgt = points.size(self, i);
+						}
+
+						ptFill = points.fill(self, i);
+						ptStroke = points.stroke(self, i);
+
+						if (cursorOnePt) {
+							if (i == closestSeries && closestDist <= focus.prox) {
+								_ptLft = ptLft;
+								_ptTop = ptTop;
+								_ptWid = ptWid;
+								_ptHgt = ptHgt;
+								_centered = centered;
+								_ptFill = ptFill;
+								_ptStroke = ptStroke;
+							}
+						}
+						else {
+							let pt = cursorPts[i];
+
+							if (pt != null) {
+								cursorPtsLft[i] = ptLft;
+								cursorPtsTop[i] = ptTop;
+
+								elSize(pt, ptWid, ptHgt, centered);
+								elColor(pt, ptFill, ptStroke);
+								elTrans(pt, ceil(ptLft), ceil(ptTop), plotWidCss, plotHgtCss);
+							}
+						}
+					}
+				}
+			}
+
+			// if only using single hover point (at cursorPts[0])
+			// we have trigger styling at last visible series (once closestSeries is settled)
+			if (cursorOnePt) {
+				// some of this logic is similar to series focus below, since it matches the behavior by design
+
+				let p = focus.prox;
+
+				let focusChanged = focusedSeries == null ? closestDist <= p : (closestDist > p || closestSeries != focusedSeries);
+
+				if (shouldSetLegend || focusChanged) {
+					let pt = cursorPts[0];
+
+					if (pt != null) {
+						cursorPtsLft[0] = _ptLft;
+						cursorPtsTop[0] = _ptTop;
+
+						elSize(pt, _ptWid, _ptHgt, _centered);
+						elColor(pt, _ptFill, _ptStroke);
+						elTrans(pt, ceil(_ptLft), ceil(_ptTop), plotWidCss, plotHgtCss);
+					}
+				}
+			}
+		}
+
+		// nit: cursor.drag.setSelect is assumed always true
+		if (select.show && dragging) {
+			if (src != null) {
+				let [xKey, yKey] = syncOpts.scales;
+				let [matchXKeys, matchYKeys] = syncOpts.match;
+				let [xKeySrc, yKeySrc] = src.cursor.sync.scales;
+
+				// match the dragX/dragY implicitness/explicitness of src
+				let sdrag = src.cursor.drag;
+				dragX = sdrag._x;
+				dragY = sdrag._y;
+
+				if (dragX || dragY) {
+					let { left, top, width, height } = src.select;
+
+					let sori = src.scales[xKeySrc].ori;
+					let sPosToVal = src.posToVal;
+
+					let sOff, sDim, sc, a, b;
+
+					let matchingX = xKey != null && matchXKeys(xKey, xKeySrc);
+					let matchingY = yKey != null && matchYKeys(yKey, yKeySrc);
+
+					if (matchingX && dragX) {
+						if (sori == 0) {
+							sOff = left;
+							sDim = width;
+						}
+						else {
+							sOff = top;
+							sDim = height;
+						}
+
+						sc = scales[xKey];
+
+						a = valToPosX(sPosToVal(sOff, xKeySrc),        sc, xDim, 0);
+						b = valToPosX(sPosToVal(sOff + sDim, xKeySrc), sc, xDim, 0);
+
+						setSelX(min(a,b), abs(b-a));
+					}
+					else
+						setSelX(0, xDim);
+
+					if (matchingY && dragY) {
+						if (sori == 1) {
+							sOff = left;
+							sDim = width;
+						}
+						else {
+							sOff = top;
+							sDim = height;
+						}
+
+						sc = scales[yKey];
+
+						a = valToPosY(sPosToVal(sOff, yKeySrc),        sc, yDim, 0);
+						b = valToPosY(sPosToVal(sOff + sDim, yKeySrc), sc, yDim, 0);
+
+						setSelY(min(a,b), abs(b-a));
+					}
+					else
+						setSelY(0, yDim);
+				}
+				else
+					hideSelect();
+			}
+			else {
+				let rawDX = abs(rawMouseLeft1 - rawMouseLeft0);
+				let rawDY = abs(rawMouseTop1 - rawMouseTop0);
+
+				if (scaleX.ori == 1) {
+					let _rawDX = rawDX;
+					rawDX = rawDY;
+					rawDY = _rawDX;
+				}
+
+				dragX = drag.x && rawDX >= drag.dist;
+				dragY = drag.y && rawDY >= drag.dist;
+
+				let uni = drag.uni;
+
+				if (uni != null) {
+					// only calc drag status if they pass the dist thresh
+					if (dragX && dragY) {
+						dragX = rawDX >= uni;
+						dragY = rawDY >= uni;
+
+						// force unidirectionality when both are under uni limit
+						if (!dragX && !dragY) {
+							if (rawDY > rawDX)
+								dragY = true;
+							else
+								dragX = true;
+						}
+					}
+				}
+				else if (drag.x && drag.y && (dragX || dragY))
+					// if omni with no uni then both dragX / dragY should be true if either is true
+					dragX = dragY = true;
+
+				let p0, p1;
+
+				if (dragX) {
+					if (scaleX.ori == 0) {
+						p0 = mouseLeft0;
+						p1 = mouseLeft1;
+					}
+					else {
+						p0 = mouseTop0;
+						p1 = mouseTop1;
+					}
+
+					setSelX(min(p0, p1), abs(p1 - p0));
+
+					if (!dragY)
+						setSelY(0, yDim);
+				}
+
+				if (dragY) {
+					if (scaleX.ori == 1) {
+						p0 = mouseLeft0;
+						p1 = mouseLeft1;
+					}
+					else {
+						p0 = mouseTop0;
+						p1 = mouseTop1;
+					}
+
+					setSelY(min(p0, p1), abs(p1 - p0));
+
+					if (!dragX)
+						setSelX(0, xDim);
+				}
+
+				// the drag didn't pass the dist requirement
+				if (!dragX && !dragY) {
+					setSelX(0, 0);
+					setSelY(0, 0);
+				}
+			}
+		}
+
+		drag._x = dragX;
+		drag._y = dragY;
+
+		if (src == null) {
+			if (_pub) {
+				if (syncKey != null) {
+					let [xSyncKey, ySyncKey] = syncOpts.scales;
+
+					syncOpts.values[0] = xSyncKey != null ? posToVal(scaleX.ori == 0 ? mouseLeft1 : mouseTop1, xSyncKey) : null;
+					syncOpts.values[1] = ySyncKey != null ? posToVal(scaleX.ori == 1 ? mouseLeft1 : mouseTop1, ySyncKey) : null;
+				}
+
+				pubSync(mousemove, self, mouseLeft1, mouseTop1, plotWidCss, plotHgtCss, idx);
+			}
+
+			if (cursorFocus) {
+				let shouldPub = _pub && syncOpts.setSeries;
+				let p = focus.prox;
+
+				if (focusedSeries == null) {
+					if (closestDist <= p)
+						setSeries(closestSeries, FOCUS_TRUE, true, shouldPub);
+				}
+				else {
+					if (closestDist > p)
+						setSeries(null, FOCUS_TRUE, true, shouldPub);
+					else if (closestSeries != focusedSeries)
+						setSeries(closestSeries, FOCUS_TRUE, true, shouldPub);
+				}
+			}
+		}
+
+		if (shouldSetLegend) {
+			legend.idx = idx;
+			setLegend();
+		}
+
+		_fire !== false && fire("setCursor");
+	}
+
+	let rect = null;
+
+	Object.defineProperty(self, 'rect', {
+		get() {
+			if (rect == null)
+				syncRect(false);
+
+			return rect;
+		},
+	});
+
+	function syncRect(defer: any = false, ..._extra: any[]) {
+		if (defer)
+			rect = null;
+		else {
+			rect = over.getBoundingClientRect();
+			fire("syncRect", rect);
+		}
+	}
+
+	function mouseMove(e?: any, src?: any, _l?: any, _t?: any, _w?: any, _h?: any, _i?: any, ..._extra: any[]) {
+		if (cursor._lock)
+			return;
+
+		// Chrome on Windows has a bug which triggers a stray mousemove event after an initial mousedown event
+		// when clicking into a plot as part of re-focusing the browser window.
+		// we gotta ignore it to avoid triggering a phantom drag / setSelect
+		// However, on touch-only devices Chrome-based browsers trigger a 0-distance mousemove before mousedown
+		// so we don't ignore it when mousedown has set the dragging flag
+		if (dragging && e != null && e.movementX == 0 && e.movementY == 0)
+			return;
+
+		cacheMouse(e, src, _l, _t, _w, _h, _i, false, e != null);
+
+		if (e != null)
+			updateCursor(null, true, true);
+		else
+			updateCursor(src, true, false);
+	}
+
+	function cacheMouse(e?: any, src?: any, _l?: any, _t?: any, _w?: any, _h?: any, _i?: any, initial?: any, snap?: any, ..._extra: any[]) {
+		if (rect == null)
+			syncRect(false);
+
+		setCursorEvent(e);
+
+		if (e != null) {
+			_l = e.clientX - rect.left;
+			_t = e.clientY - rect.top;
+		}
+		else {
+			if (_l < 0 || _t < 0) {
+				mouseLeft1 = -10;
+				mouseTop1 = -10;
+				return;
+			}
+
+			let [xKey, yKey] = syncOpts.scales;
+
+			let syncOptsSrc = src.cursor.sync;
+			let [xValSrc, yValSrc] = syncOptsSrc.values;
+			let [xKeySrc, yKeySrc] = syncOptsSrc.scales;
+			let [matchXKeys, matchYKeys] = syncOpts.match;
+
+			let rotSrc = src.axes[0].side % 2 == 1;
+
+			let xDim = scaleX.ori == 0 ? plotWidCss : plotHgtCss,
+				yDim = scaleX.ori == 1 ? plotWidCss : plotHgtCss,
+				_xDim = rotSrc ? _h : _w,
+				_yDim = rotSrc ? _w : _h,
+				_xPos = rotSrc ? _t : _l,
+				_yPos = rotSrc ? _l : _t;
+
+			if (xKeySrc != null)
+				_l = matchXKeys(xKey, xKeySrc) ? getPos(xValSrc, scales[xKey], xDim, 0) : -10;
+			else
+				_l = xDim * (_xPos/_xDim);
+
+			if (yKeySrc != null)
+				_t = matchYKeys(yKey, yKeySrc) ? getPos(yValSrc, scales[yKey], yDim, 0) : -10;
+			else
+				_t = yDim * (_yPos/_yDim);
+
+			if (scaleX.ori == 1) {
+				let __l = _l;
+				_l = _t;
+				_t = __l;
+			}
+		}
+
+		if (snap && (src == null || src.cursor.event.type == mousemove)) {
+			if (_l <= 1 || _l >= plotWidCss - 1)
+				_l = incrRound(_l, plotWidCss);
+
+			if (_t <= 1 || _t >= plotHgtCss - 1)
+				_t = incrRound(_t, plotHgtCss);
+		}
+
+		if (initial) {
+			rawMouseLeft0 = _l;
+			rawMouseTop0 = _t;
+
+			[mouseLeft0, mouseTop0] = cursor.move(self, _l, _t);
+		}
+		else {
+			mouseLeft1 = _l;
+			mouseTop1 = _t;
+		}
+	}
+
+	const _hideProps = {
+		width: 0,
+		height: 0,
+		left: 0,
+		top: 0,
+	};
+
+	function hideSelect() {
+		setSelect(_hideProps, false);
+	}
+
+	let downSelectLeft;
+	let downSelectTop;
+	let downSelectWidth;
+	let downSelectHeight;
+
+	function mouseDown(e?: any, src?: any, _l?: any, _t?: any, _w?: any, _h?: any, _i?: any, ..._extra: any[]) {
+		dragging = true;
+		dragX = dragY = drag._x = drag._y = false;
+
+		cacheMouse(e, src, _l, _t, _w, _h, _i, true, false);
+
+		if (e != null) {
+			onMouse(mouseup, doc, mouseUp, false);
+			pubSync(mousedown, self, mouseLeft0, mouseTop0, plotWidCss, plotHgtCss, null);
+		}
+
+		let { left, top, width, height } = select;
+
+		downSelectLeft   = left;
+		downSelectTop    = top;
+		downSelectWidth  = width;
+		downSelectHeight = height;
+
+	//	hideSelect();
+	}
+
+	function mouseUp(e?: any, src?: any, _l?: any, _t?: any, _w?: any, _h?: any, _i?: any, ..._extra: any[]) {
+		dragging = drag._x = drag._y = false;
+
+		cacheMouse(e, src, _l, _t, _w, _h, _i, false, true);
+
+		let { left, top, width, height } = select;
+
+		let hasSelect = width > 0 || height > 0;
+		let chgSelect = (
+			downSelectLeft   != left   ||
+			downSelectTop    != top    ||
+			downSelectWidth  != width  ||
+			downSelectHeight != height
+		);
+
+		hasSelect && chgSelect && setSelect(select);
+
+		if (drag.setScale && hasSelect && chgSelect) {
+		//	if (syncKey != null) {
+		//		dragX = drag.x;
+		//		dragY = drag.y;
+		//	}
+
+			let xOff = left,
+				xDim = width,
+				yOff = top,
+				yDim = height;
+
+			if (scaleX.ori == 1) {
+				xOff = top,
+				xDim = height,
+				yOff = left,
+				yDim = width;
+			}
+
+			if (dragX) {
+				_setScale(xScaleKey,
+					posToVal(xOff, xScaleKey),
+					posToVal(xOff + xDim, xScaleKey)
+				);
+			}
+
+			if (dragY) {
+				for (let k in scales) {
+					let sc = scales[k];
+
+					if (k != xScaleKey && sc.from == null && sc.min != inf) {
+						_setScale(k,
+							posToVal(yOff + yDim, k),
+							posToVal(yOff, k)
+						);
+					}
+				}
+			}
+
+			hideSelect();
+		}
+		else if (cursor.lock) {
+			cursor._lock = !cursor._lock;
+			updateCursor(src, true, e != null);
+		}
+
+		if (e != null) {
+			offMouse(mouseup, doc, mouseUp);
+			pubSync(mouseup, self, mouseLeft1, mouseTop1, plotWidCss, plotHgtCss, null);
+		}
+	}
+
+	function mouseLeave(e?: any, src?: any, _l?: any, _t?: any, _w?: any, _h?: any, _i?: any, ..._extra: any[]) {
+		if (cursor._lock)
+			return;
+
+		setCursorEvent(e);
+
+		let _dragging = dragging;
+
+		if (dragging) {
+			// handle case when mousemove aren't fired all the way to edges by browser
+			let snapH = true;
+			let snapV = true;
+			let snapProx = 10;
+
+			let dragH, dragV;
+
+			if (scaleX.ori == 0) {
+				dragH = dragX;
+				dragV = dragY;
+			}
+			else {
+				dragH = dragY;
+				dragV = dragX;
+			}
+
+			if (dragH && dragV) {
+				// maybe omni corner snap
+				snapH = mouseLeft1 <= snapProx || mouseLeft1 >= plotWidCss - snapProx;
+				snapV = mouseTop1  <= snapProx || mouseTop1  >= plotHgtCss - snapProx;
+			}
+
+			if (dragH && snapH)
+				mouseLeft1 = mouseLeft1 < mouseLeft0 ? 0 : plotWidCss;
+
+			if (dragV && snapV)
+				mouseTop1 = mouseTop1 < mouseTop0 ? 0 : plotHgtCss;
+
+			updateCursor(null, true, true);
+
+			dragging = false;
+		}
+
+		mouseLeft1 = -10;
+		mouseTop1 = -10;
+
+		activeIdxs.fill(null);
+
+		// passing a non-null timestamp to force sync/mousemove event
+		updateCursor(null, true, true);
+
+		if (_dragging)
+			dragging = _dragging;
+	}
+
+	function dblClick(e?: any, src?: any, _l?: any, _t?: any, _w?: any, _h?: any, _i?: any, ..._extra: any[]) {
+		if (cursor._lock)
+			return;
+
+		setCursorEvent(e);
+
+		autoScaleX();
+
+		hideSelect();
+
+		if (e != null)
+			pubSync(dblclick, self, mouseLeft1, mouseTop1, plotWidCss, plotHgtCss, null);
+	}
+
+	function onDppxChange() {
+		setPxRatio();
+	}
+
+	on(dppxchange, win, onDppxChange);
+
+	// internal pub/sub
+	const events: any = {};
+
+	events.mousedown = mouseDown;
+	events.mousemove = mouseMove;
+	events.mouseup = mouseUp;
+	events.dblclick = dblClick;
+	events["setSeries"] = (e, src, idx, opts) => {
+		let seriesIdxMatcher = syncOpts.match[2];
+		idx = seriesIdxMatcher(self, src, idx);
+		idx != -1 && setSeries(idx, opts, true, false);
+	};
+
+	if (showCursor) {
+		onMouse(mousedown,  over, mouseDown);
+		onMouse(mousemove,  over, mouseMove);
+		onMouse(mouseenter, over, e => {
+			setCursorEvent(e);
+			syncRect(false);
+		});
+		onMouse(mouseleave, over, mouseLeave);
+
+		onMouse(dblclick, over, dblClick);
+
+		cursorPlots.add(self);
+
+		self.syncRect = syncRect;
+	}
+
+	// external on/off
+	const hooks = self.hooks = opts.hooks || {};
+
+	function fire(evName?: any, a1?: any, a2?: any, ..._extra: any[]) {
+		if (deferHooks)
+			hooksQueue.push([evName, a1, a2]);
+		else {
+			if (evName in hooks) {
+				hooks[evName].forEach(fn => {
+					fn.call(null, self, a1, a2);
+				});
+			}
+		}
+	}
+
+	(opts.plugins || []).forEach(p => {
+		for (let evName in p.hooks)
+			hooks[evName] = (hooks[evName] || []).concat(p.hooks[evName]);
+	});
+
+	const seriesIdxMatcher = (self?: any, src?: any, srcSeriesIdx?: any, ..._extra: any[]) => srcSeriesIdx;
+
+	const syncOpts = assign({
+		key: null,
+		setSeries: false,
+		filters: {
+			pub: retTrue,
+			sub: retTrue,
+		},
+		scales: [xScaleKey, series[1] ? series[1].scale : null],
+		match: [retEq, retEq, seriesIdxMatcher],
+		values: [null, null],
+	}, cursor.sync);
+
+	if (syncOpts.match.length == 2)
+		syncOpts.match.push(seriesIdxMatcher);
+
+	cursor.sync = syncOpts;
+
+	const syncKey = syncOpts.key;
+
+	const sync = _sync(syncKey);
+
+	function pubSync(type?: any, src?: any, x?: any, y?: any, w?: any, h?: any, i?: any, ..._extra: any[]) {
+		if (syncOpts.filters.pub(type, src, x, y, w, h, i))
+			sync.pub(type, src, x, y, w, h, i);
+	}
+
+	sync.sub(self);
+
+	function pub(type?: any, src?: any, x?: any, y?: any, w?: any, h?: any, i?: any, ..._extra: any[]) {
+		if (syncOpts.filters.sub(type, src, x, y, w, h, i))
+			events[type](null, src, x, y, w, h, i);
+	}
+
+	self.pub = pub;
+
+	function destroy() {
+		if (self.status == 2)
+			return;
+
+		self.status = 2;
+		untrackPlot(self);
+		sync.unsub(self);
+		cursorPlots.delete(self);
+		mouseListeners.clear();
+		off(dppxchange, win, onDppxChange);
+		ctx.destroy?.();
+		root.remove();
+		FEAT_LEGEND && legendTable?.remove(); // in case mounted outside of root
+		fire("destroy");
+	}
+
+	self.destroy = destroy;
+	trackPlot(self);
+
+	function _init() {
+		fire("init", opts, data);
+
+		setData(data || opts.data, false);
+
+		if (pendScales[xScaleKey])
+			setScale(xScaleKey, pendScales[xScaleKey]);
+		else
+			autoScaleX();
+
+		shouldSetSelect = select.show && (select.width > 0 || select.height > 0);
+		shouldSetCursor = shouldSetLegend = true;
+
+		_setSize(opts.width, opts.height);
+	}
+
+	series.forEach(initSeries);
+
+	axes.forEach(initAxis);
+
+	if (then) {
+		if (then instanceof HTMLElement) {
+			then.appendChild(root);
+			_init();
+		}
+		else
+			then(self, _init);
+	}
+	else
+		_init();
+
+	return self;
+}) as any as UPlotConstructor;
+
+uPlot.assign = assign;
+uPlot.fmtNum = fmtNum;
+uPlot.rangeNum = rangeNum;
+uPlot.rangeLog = rangeLog;
+uPlot.rangeAsinh = rangeAsinh;
+uPlot.orient   = orient;
+uPlot.pxRatio = pxRatioGlobal;
+uPlot.renderer = WebGPURenderer;
+uPlot.rendererOptions = null;
+uPlot.autoDestroyDetached = true;
+uPlot.autoDestroyDelayFrames = 2;
+uPlot.livePlots = livePlots;
+uPlot.configure = opts => {
+	if (opts == null)
+		return uPlot;
+
+	if ('renderer' in opts)
+		uPlot.renderer = opts.renderer || WebGPURenderer;
+
+	if ('rendererOptions' in opts)
+		uPlot.rendererOptions = opts.rendererOptions || null;
+
+	if ('webgpu' in opts)
+		uPlot.rendererOptions = opts.webgpu || null;
+
+	if ('autoDestroyDetached' in opts)
+		uPlot.autoDestroyDetached = opts.autoDestroyDetached !== false;
+
+	if ('autoDestroyDelayFrames' in opts)
+		uPlot.autoDestroyDelayFrames = Math.max(1, opts.autoDestroyDelayFrames | 0);
+
+	if ('sharedRuntime' in opts)
+		WebGPURenderer.setSharedRuntimeEnabled?.(opts.sharedRuntime !== false);
+
+	return uPlot;
+};
+uPlot.destroyDetached = destroyDetachedPlots;
+uPlot.destroyAll = () => {
+	let plots = Array.from(livePlots);
+	plots.forEach(plot => plot?.destroy?.());
+	return plots.length;
+};
+uPlot.getLivePlots = () => Array.from(livePlots);
+uPlot.WebGPURenderer = WebGPURenderer;
+uPlot.GPUPath = GPUPath;
+
+if (FEAT_JOIN) {
+	uPlot.join = join;
+}
+
+if (FEAT_TIME) {
+	uPlot.fmtDate = fmtDate;
+	uPlot.tzDate  = tzDate;
+}
+
+uPlot.sync = _sync;
+
+if (FEAT_PATHS) {
+	uPlot.addGap = addGap;
+	uPlot.clipGaps = clipGaps;
+
+	let paths: any = uPlot.paths = {
+		points,
+	};
+
+	FEAT_PATHS_LINEAR  && (paths.linear  = linear);
+	FEAT_PATHS_STEPPED && (paths.stepped = stepped);
+	FEAT_PATHS_BARS    && (paths.bars    = bars);
+	FEAT_PATHS_SPLINE  && (paths.spline  = spline);
+	FEAT_PATHS_SPLINE2 && (paths.spline2 = spline2);
+}
+
+export default uPlot;