billboard.js
Version:
Re-usable easy interface JavaScript chart library, based on D3 v4+
1,254 lines (1,252 loc) • 82.6 kB
JavaScript
/*!
* Copyright (c) 2017 ~ present NAVER Corp.
* billboard.js project is licensed under the MIT license
*
* billboard.js, JavaScript chart library
* https://naver.github.io/billboard.js/
*
* @version 4.0.1
*/
import { getStackingBarRadiusSet, getBarRadiusInfo, getBarRadiusResolver } from '../ChartInternal/shape/core/barRadius.js';
import { getLineRegionSegments } from '../ChartInternal/shape/core/dataRegion.js';
import { getRenderDataPoint, getShapePoint, getTreemapNodeRect, getTreemapLabelText, getRenderPoint } from '../ChartInternal/shape/core/geometry.js';
import { generateDrawAreaPath, generateDrawLinePath } from '../ChartInternal/shape/core/path.js';
import { TYPE, SUBCHART_BRUSH_HANDLE_PATH } from '../config/const.js';
import { window as win } from '../module/browser.js';
import CanvasPainter from './CanvasPainter.js';
import { withOpacity } from './color.js';
import { getCanvasBarGeometry, getCanvasCandlestickGeometry } from './geometry.js';
import { getLabelImageOption, getLabelImageUrl, getLabelImagePosition, getRotatedLabelPosition, getLabelColor, drawLabelDecorations, getLabelText, getPointLabelAnchor, getLabelPosition, getExpandedFocusMatcher, getLabelDecorationBox } from './labels.js';
import { drawPointPattern } from './pointPattern.js';
import { hasCanvasDrawableValue, isCanvasPointType, isFiniteCanvasCoordinate, isCanvasAreaType, getCanvasShapeIndices, isCanvasBarType, isCanvasCandlestickType, isCanvasLineType, getCanvasTargetVisibleRange, createCanvasPointOccupancyGrid, markCanvasPointOccupancy, isCanvasTreemapType, getFontSize, isCanvasTargetSupported, isCanvasScatterType, isCanvasBubbleType, DENSE_SCATTER_POINT_CULL_THRESHOLD } from './util.js';
import { isNumber, isFunction, isObject, isString, asHalfPixel } from '../module/util/type-checks.js';
/**
* Copyright (c) 2017 ~ present NAVER Corp.
* billboard.js project is licensed under the MIT license
*/
const RENDERER_GROUPED_TYPE_FILTERS = [
isCanvasAreaType,
isCanvasBarType,
isCanvasPointType,
isCanvasCandlestickType
];
// Small point series are faster as one batched path; beyond this, huge paths make
// fill() expensive, so canvas draws circles individually. SVG has no equivalent knob.
const MAX_BATCHED_CIRCLE_POINTS = 1000;
const canvasFocusLookupCache = new WeakMap();
const subchartBrushHandlePathCache = new Map();
/**
* Apply a CSS matrix transform to a canvas context.
* @param {CanvasRenderingContext2D} ctx Canvas context
* @param {string} transform CSS transform value
* @private
*/
function applyCssMatrixTransform(ctx, transform) {
if (!transform || transform === "none") {
return;
}
const matrix = transform.match(/^matrix\(([^)]+)\)$/);
const matrix3d = transform.match(/^matrix3d\(([^)]+)\)$/);
if (matrix) {
const values = matrix[1].split(",").map(value => Number(value.trim()));
values.length === 6 &&
values.every(Number.isFinite) &&
ctx.transform(values[0], values[1], values[2], values[3], values[4], values[5]);
}
else if (matrix3d) {
const values = matrix3d[1].split(",").map(value => Number(value.trim()));
values.length === 16 &&
values.every(Number.isFinite) &&
ctx.transform(values[0], values[1], values[4], values[5], values[12], values[13]);
}
}
/**
* Get SVG image equivalent destination rect for canvas background.
* @param {HTMLImageElement} image Image element
* @param {number} width Background viewport width
* @param {number} height Background viewport height
* @returns {object} Destination rect
* @private
*/
function getPreservedAspectRatioRect(image, width, height) {
const imageWidth = image.naturalWidth || image.width;
const imageHeight = image.naturalHeight || image.height;
if (!imageWidth || !imageHeight || !width || !height) {
return { x: 0, y: 0, w: width, h: height };
}
const scale = Math.min(width / imageWidth, height / imageHeight);
const w = imageWidth * scale;
const h = imageHeight * scale;
return {
x: (width - w) / 2,
y: (height - h) / 2,
w,
h
};
}
/**
* Get SVG main group translate offset for canvas background image parity.
* @param {object} $$ ChartInternal instance
* @returns {object} Main group offset
* @private
*/
function getBackgroundImageOffset($$) {
const { state } = $$;
return state.hasFunnel || state.hasTreemap ? { x: 0, y: 0 } : {
x: asHalfPixel(state.margin.left),
y: asHalfPixel(state.margin.top)
};
}
/**
* Draw a canvas line target directly from common geometry.
* @param {object} $$ ChartInternal instance
* @param {object} target Data target
* @param {object} indices Shape indices
* @param {CanvasPainter} painter Canvas painter
* @param {boolean} isSub Whether to use subchart scales
* @private
*/
function drawCanvasLine($$, target, indices, painter, isSub = false) {
painter.strokePath(ctx => {
generateDrawLinePath($$, indices, isSub, ctx)(target);
}, { lineDash: [] });
}
/**
* Draw a canvas area target directly from common geometry.
* @param {object} $$ ChartInternal instance
* @param {object} target Data target
* @param {object} indices Shape indices
* @param {CanvasPainter} painter Canvas painter
* @param {boolean} isSub Whether to use subchart scales
* @private
*/
function drawCanvasArea($$, target, indices, painter, isSub = false) {
painter.fillPath(ctx => {
generateDrawAreaPath($$, indices, isSub, ctx)(target);
});
}
/**
* Get a target copy clipped to the current visible x range.
* @param {object} $$ ChartInternal instance
* @param {object} target Data target
* @returns {object} Original target or a visible values copy
* @private
*/
function getVisibleCanvasTarget($$, target) {
const range = getCanvasTargetVisibleRange($$, target);
return range.start === 0 && range.end === target.values.length ? target : {
...target,
values: target.values.slice(range.start, range.end)
};
}
/**
* Get focused row for a datum or target.
* @param {Array} focusData Focused data rows
* @param {object} d Rendered data row or target
* @returns {object|null}
* @private
*/
function getFocusedCanvasDatum(focusData, d) {
if (!focusData?.length || !d?.id) {
return null;
}
let lookup = canvasFocusLookupCache.get(focusData);
if (!lookup) {
lookup = new Map();
for (const focus of focusData) {
if (!focus?.id) {
continue;
}
const targetKey = `${focus.id}:*`;
if (!lookup.has(targetKey)) {
lookup.set(targetKey, focus);
}
if ("index" in focus) {
lookup.set(`${focus.id}:${focus.index}`, focus);
}
}
canvasFocusLookupCache.set(focusData, lookup);
}
return "index" in d ?
lookup.get(`${d.id}:${d.index}`) || null :
lookup.get(`${d.id}:*`) || null;
}
/**
* Get cached Path2D for a subchart brush handle.
* @param {string} axis Brush axis
* @param {string} type Brush handle side
* @returns {Path2D|null}
* @private
*/
function getSubchartBrushHandlePath(axis, type) {
const Path2DCtor = win.Path2D;
if (!Path2DCtor) {
return null;
}
const key = `${axis}:${type}`;
const cached = subchartBrushHandlePathCache.get(key);
if (cached) {
return cached;
}
const path = new Path2DCtor(SUBCHART_BRUSH_HANDLE_PATH[axis][type]);
subchartBrushHandlePathCache.set(key, path);
return path;
}
/**
* Resolve color.onover for a focused data row.
* @param {object} $$ ChartInternal instance
* @param {object} d Focused data row
* @returns {string|null}
* @private
*/
function getCanvasOverColor($$, d) {
const onover = $$.config.color_onover;
if (!onover || !d) {
return null;
}
if (isObject(onover)) {
return d.id in onover ? onover[d.id] : null;
}
else if (isString(onover)) {
return onover;
}
else if (isFunction(onover)) {
return onover.call($$.api, d);
}
return null;
}
/**
* Resolve a target/datum color, including color.onover focus color.
* @param {object} $$ ChartInternal instance
* @param {object} d Data target or row
* @param {Array} focusData Focused data rows
* @returns {string}
* @private
*/
function getCanvasRenderColor($$, d, focusData) {
const focus = getFocusedCanvasDatum(focusData, d);
const overColor = getCanvasOverColor($$, focus);
return overColor || $$.color(d.id);
}
/**
* Get target id from a data target or row.
* @param {object} d Data target or row
* @returns {string|undefined} Target id
* @private
*/
function getCanvasTargetId(d) {
return d?.id || d?.data?.id;
}
/**
* Check whether the canvas target is focused.
* @param {object} $$ ChartInternal instance
* @param {object} d Data target or row
* @returns {boolean} Whether target is focused
* @private
*/
function isCanvasTargetFocused($$, d) {
const id = getCanvasTargetId(d);
return !!id && $$.state.focusedTargetIds?.has(id);
}
/**
* Get SVG-compatible target focus opacity.
* @param {object} $$ ChartInternal instance
* @param {object} d Data target or row
* @returns {number} Target opacity
* @private
*/
function getCanvasTargetFocusOpacity($$, d) {
const id = getCanvasTargetId(d);
return id && $$.state.defocusedTargetIds?.has(id) ?
$$.canvasTheme.style.shape.targetDefocusedOpacity :
1;
}
/**
* Get normalized bounding box for area gradient coordinates.
* @param {object} $$ ChartInternal instance
* @param {object} target Data target
* @param {object} indices Shape indices
* @param {boolean} isSub Whether to use subchart scales
* @returns {object|null}
* @private
*/
function getCanvasAreaBounds($$, target, indices, isSub = false) {
const getPoints = $$.generateGetAreaPoints?.(indices, isSub);
if (!getPoints) {
return null;
}
const range = getCanvasTargetVisibleRange($$, target);
let minX = Infinity;
let minY = Infinity;
let maxX = -Infinity;
let maxY = -Infinity;
for (let i = range.start; i < range.end; i++) {
const d = target.values[i];
if (!hasCanvasDrawableValue($$, d)) {
continue;
}
getPoints(d, i).forEach(([x, y]) => {
if (!isFiniteCanvasCoordinate(x, y)) {
return;
}
minX = Math.min(minX, x);
minY = Math.min(minY, y);
maxX = Math.max(maxX, x);
maxY = Math.max(maxY, y);
});
}
return Number.isFinite(minX) && Number.isFinite(minY) ?
{ x: minX, y: minY, w: maxX - minX, h: maxY - minY } :
null;
}
/**
* Resolve objectBoundingBox gradient coordinate.
* @param {number} value Normalized coordinate
* @param {number} origin Bounding box origin
* @param {number} size Bounding box size
* @returns {number}
* @private
*/
function getLinearGradientCoord(value, origin, size) {
return origin + size * (isNumber(value) ? value : 0);
}
/**
* Create a canvas linear gradient from area/bar linearGradient options.
* @param {object} $$ ChartInternal instance
* @param {CanvasRenderingContext2D} ctx Canvas context
* @param {object} target Data target
* @param {string} shape Shape option prefix
* @param {object} rect Shape bounding box
* @param {string} baseColor Fallback target color
* @returns {CanvasGradient|string}
* @private
*/
function getCanvasLinearGradientFill($$, ctx, target, shape, rect, baseColor) {
const option = $$.config[`${shape}_linearGradient`];
if (!option || !rect || !rect.w || !rect.h) {
return baseColor;
}
const isRotated = $$.config.axis_rotated;
const gradientOption = typeof option === "object" ? option : {};
const x = gradientOption.x || (isRotated ? [1, 0] : [0, 0]);
const y = gradientOption.y || (isRotated ? [0, 0] : [0, 1]);
const stops = Array.isArray(gradientOption.stops) ?
gradientOption.stops :
[[0, baseColor, 1], [1, baseColor, 0]];
const gradient = ctx.createLinearGradient(getLinearGradientCoord(x[0], rect.x, rect.w), getLinearGradientCoord(y[0], rect.y, rect.h), getLinearGradientCoord(x[1], rect.x, rect.w), getLinearGradientCoord(y[1], rect.y, rect.h));
stops.forEach(([offset, stopColor, stopOpacity]) => {
const colorValue = isFunction(stopColor) ? stopColor.call($$.api, target.id) : stopColor;
const color = String(colorValue || baseColor);
const numericOffset = Number(offset);
const parsedOffset = Number.isFinite(numericOffset) ?
Math.max(0, Math.min(1, numericOffset)) :
0;
gradient.addColorStop(parsedOffset, withOpacity(color, stopOpacity));
});
return gradient;
}
/**
* Check if a target is supported by canvas v1.
* @param {object} $$ ChartInternal instance
* @param {object} target Data target
* @returns {boolean} Whether the target is supported
* @private
*/
function isCanvasRenderableTarget($$, target) {
return isCanvasTargetSupported($$, target, RENDERER_GROUPED_TYPE_FILTERS);
}
/**
* Get canvas point opacity following SVG circle defaults.
* @param {object} $$ ChartInternal instance
* @param {object} target Data target
* @returns {number} Point opacity
* @private
*/
function getPointOpacity($$, target) {
const opacity = $$.config.point_opacity;
return Number.isFinite(opacity) ? opacity : (isCanvasScatterType($$, target) || isCanvasBubbleType($$, target) ? 0.5 : 1);
}
/**
* Get a target point radius without calling pointR for static non-bubble points.
* @param {object} $$ ChartInternal instance
* @param {object} target Data target
* @param {object} d Data row
* @returns {number} Point radius
* @private
*/
function getTargetPointRadius($$, target, d) {
const pointR = $$.config.point_r;
return isCanvasBubbleType($$, target) || isFunction(pointR) ? ($$.pointR?.(d) ?? 2.5) : pointR;
}
/**
* Check whether dense scatter point drawing can skip duplicate pixel centers.
* @param {object} $$ ChartInternal instance
* @param {object} target Data target
* @param {string} pointType Canvas point type
* @param {boolean} hasGradient Whether radial gradient point fill is enabled
* @returns {boolean} Whether pixel-center culling can be used
* @private
*/
function shouldCullDenseScatterPoints($$, target, pointType, hasGradient) {
return !hasGradient &&
pointType === "circle" &&
isCanvasScatterType($$, target) &&
!isFunction($$.config.point_r) &&
target.values.length > DENSE_SCATTER_POINT_CULL_THRESHOLD;
}
/**
* Get configured bar connect line type for a target.
* @param {object} $$ ChartInternal instance
* @param {string} id Data id
* @returns {string|null} Connect line type
* @private
*/
function getBarConnectLineType($$, id) {
const { bar_connectLine: connectLine } = $$.config;
const type = isObject(connectLine) ? connectLine[id] : connectLine;
return /^(start|end)-(start|end)$/.test(type) ? type : null;
}
/**
* Get SVG-compatible bar connect line geometry.
* @param {object} $$ ChartInternal instance
* @param {Array} points Shared bar points
* @param {object} radiusInfo Bar radius geometry info
* @returns {object} Connect line geometry
* @private
*/
function getBarConnectLineBox($$, points, radiusInfo) {
const { indexX, indexY, pos } = radiusInfo;
return $$.config.axis_rotated ?
{
x: points[0][indexX],
y: points[0][indexY],
width: points[0][indexX] - pos,
height: points[2][indexY] - points[0][indexY]
} :
{
x: points[0][indexX],
y: pos,
width: points[2][indexX] - points[0][indexX],
height: points[3][indexY] - pos
};
}
/**
* Draw SVG-compatible bar connect lines.
* @param {object} $$ ChartInternal instance
* @param {object} painter Canvas painter
* @param {string} type Connect line type
* @param {Array} boxes Bar connect line geometry list
* @param {number} alpha Line opacity
* @private
*/
function drawBarConnectLine($$, painter, type, boxes, alpha = 1) {
if (boxes.length < 2) {
return;
}
const isRotated = $$.config.axis_rotated;
const isStart = /^start-(start|end)$/.test(type);
const isEnd = /^end-(start|end)$/.test(type);
const isToEnd = /\w+-end$/.test(type);
const isToStart = /\w+-start$/.test(type);
const getMovePoint = (box) => ({
x: isRotated ? (isEnd ? box.x - box.width : box.x) : (box.x + box.width),
y: isRotated ? box.y + box.height : (isStart ? box.y + box.height : box.y)
});
const getLinePoint = (box) => ({
x: isRotated ? box.x - (isToEnd ? box.width : 0) : box.x,
y: isRotated ? box.y : box.y + (isToStart ? box.height : 0)
});
let movePoint = getMovePoint(boxes[0]);
painter.strokePath(() => {
for (let i = 1; i < boxes.length; i++) {
const linePoint = getLinePoint(boxes[i]);
painter.traceLine(movePoint.x, movePoint.y, linePoint.x, linePoint.y);
if (i < boxes.length - 1) {
movePoint = getMovePoint(boxes[i]);
}
}
}, {
alpha,
stroke: $$.canvasTheme.style.shape.barConnectLineColor,
lineWidth: $$.canvasTheme.style.shape.barConnectLineWidth,
lineDash: []
});
}
/**
* Get normalized canvas point shape for the target.
* @param {object} $$ ChartInternal instance
* @param {object} target Data target
* @returns {string} Canvas point shape
* @private
*/
function getPointType($$, target) {
const { config } = $$;
if (isCanvasBubbleType($$, target)) {
return "circle";
}
const targetIds = $$.mapToIds?.($$.data.targets) || [];
const pattern = Array.isArray(config.point_pattern) && config.point_pattern.length ?
config.point_pattern :
[config.point_type];
const index = Math.max(0, targetIds.indexOf(target.id));
const type = pattern[index % pattern.length];
return /^rect(angle)?$/i.test(type) || type === "rectangle" ? "rectangle" : (type || "circle");
}
/**
* Get point fill style, including canvas radial gradient when configured.
* @param {object} $$ ChartInternal instance
* @param {CanvasRenderingContext2D} ctx Canvas context
* @param {object} d Data row
* @param {number} x X coordinate
* @param {number} y Y coordinate
* @param {number} r Point radius
* @param {string} fallback Fallback color
* @returns {string|CanvasGradient} Fill style
* @private
*/
function getPointFillStyle($$, ctx, d, x, y, r, fallback) {
const option = $$.config.point_radialGradient;
if (!option || !r) {
return fallback;
}
const gradientOption = isObject(option) ? option : {};
const cx = isNumber(gradientOption.cx) ? gradientOption.cx : 0.3;
const cy = isNumber(gradientOption.cy) ? gradientOption.cy : 0.3;
const radius = isNumber(gradientOption.r) ? gradientOption.r : 0.7;
const stops = Array.isArray(gradientOption.stops) ?
gradientOption.stops :
[[0.1, null, 1], [0.9, null, 0]];
const gradientX = x + (cx - 0.5) * r * 2;
const gradientY = y + (cy - 0.5) * r * 2;
const gradient = ctx.createRadialGradient(gradientX, gradientY, 0, gradientX, gradientY, Math.max(1, r * radius * 2));
stops.forEach(([offset, stopColor, stopOpacity]) => {
let color = isFunction(stopColor) ? stopColor.bind($$.api)(d.id) : stopColor;
if (!color) {
color = fallback;
}
// addColorStop throws IndexSizeError for out-of-range offsets
const numericOffset = Number(offset);
const parsedOffset = Number.isFinite(numericOffset) ?
Math.max(0, Math.min(1, numericOffset)) :
0;
gradient.addColorStop(parsedOffset, withOpacity(color, stopOpacity));
});
return gradient;
}
/**
* Get candlestick fill color for the data row.
* @param {object} $$ ChartInternal instance
* @param {object} d Data row
* @param {object} value Parsed candlestick value
* @returns {string} Fill color
* @private
*/
function getCandlestickColor($$, d, value) {
const downColor = $$.config.candlestick_color_down;
const color = value?._isUp ? $$.color(d) : (downColor && typeof downColor === "object" ? downColor[d.id] : downColor);
return color || $$.color(d);
}
/**
* Check if points should be drawn for a line target.
* @param {object} $$ ChartInternal instance
* @param {object} target Data target
* @returns {boolean} Whether points should be drawn
* @private
*/
function shouldDrawPoints($$, target) {
return $$.shouldDrawPointsForLine ? $$.shouldDrawPointsForLine(target) : true;
}
/**
* Check whether two canvas dash arrays are equal.
* @param {Array} a First dash array
* @param {Array} b Second dash array
* @returns {boolean} Whether arrays have the same values
* @private
*/
function isSameDash(a, b) {
return a.length === b.length && a.every((value, index) => value === b[index]);
}
/**
* Draw a line target with per-data dashed regions.
* @param {object} $$ ChartInternal instance
* @param {object} target Data target
* @param {object} painter Canvas painter
* @private
*/
function drawCanvasLineWithDataRegions($$, target, painter) {
const { config, scale } = $$;
const x = scale.zoom || scale.x;
const y = $$.getYScaleById(target.id);
const rawValues = config.line_connectNull ? $$.filterRemoveNull(target.values) : target.values;
let values = $$.isAreaRangeType(target) ?
rawValues.map(d => ({ ...d, value: $$.getRangedData(d, "mid") })) :
rawValues;
if ($$.isStepType(target)) {
values = $$.convertValuesToStep(values);
}
const segments = getLineRegionSegments($$, values, x, y, config.data_regions[target.id]);
let currentDash = null;
let currentPoints = [];
const flush = () => {
if (currentPoints.length < 2 || !currentDash) {
currentPoints = [];
return;
}
painter.strokePath(ctx => {
const [start, ...rest] = currentPoints;
ctx.moveTo(start[0], start[1]);
rest.forEach(point => {
ctx.lineTo(point[0], point[1]);
});
}, { lineDash: currentDash });
currentPoints = [];
};
const appendSegment = (start, end, dash) => {
if (!currentDash || !isSameDash(currentDash, dash)) {
flush();
currentDash = dash;
currentPoints = [start, end];
}
else {
currentPoints.push(end);
}
};
for (const { start, end, dash, isBreak } of segments) {
if (isBreak || !start || !end || !dash) {
flush();
currentDash = null;
continue;
}
if (!isFiniteCanvasCoordinate(start[0], start[1]) ||
!isFiniteCanvasCoordinate(end[0], end[1])) {
flush();
currentDash = null;
continue;
}
appendSegment(start, end, dash);
}
flush();
}
/**
* Draw axis-based chart shapes on canvas.
* @private
*/
class CanvasRenderer {
engine;
theme;
painter;
labelImageCache = new Map();
backgroundImageCache = new Map();
backgroundClassStyleCache = new Map();
/**
* Constructor.
* @param {CanvasEngine} engine Canvas drawing engine
* @param {CanvasTheme} theme Canvas theme resolver
* @private
*/
constructor(engine, theme) {
this.engine = engine;
this.theme = theme;
this.painter = new CanvasPainter(engine.ctx);
}
/**
* Get the drawing context for the main canvas.
* @returns {CanvasRenderingContext2D} Canvas drawing context
* @private
*/
get ctx() {
return this.painter.context;
}
/**
* Run renderer draw calls on another canvas context.
* @param {CanvasRenderingContext2D} ctx Canvas drawing context
* @param {function} draw Draw callback
* @private
*/
withContext(ctx, draw) {
this.painter.withContext(ctx, draw);
}
/**
* Release renderer caches that can hold chart or DOM references.
* @private
*/
destroy() {
const clearImageHandler = (entry) => {
entry.image.onload = null;
entry.image.onerror = null;
};
this.labelImageCache.forEach(clearImageHandler);
this.backgroundImageCache.forEach(clearImageHandler);
this.labelImageCache.clear();
this.backgroundImageCache.clear();
this.backgroundClassStyleCache.clear();
}
/**
* Get cached image for data label.
* @param {string} url Image URL
* @param {object} $$ ChartInternal instance
* @returns {object|null} Cached image entry
* @private
*/
getLabelImage(url, $$) {
if (!url || !win.Image) {
return null;
}
let entry = this.labelImageCache.get(url);
if (!entry) {
const nextEntry = {
image: new win.Image(),
loaded: false,
loading: true
};
entry = nextEntry;
this.labelImageCache.set(url, entry);
nextEntry.image.onload = () => {
nextEntry.loaded = true;
nextEntry.loading = false;
$$.redraw?.();
};
nextEntry.image.onerror = () => {
nextEntry.loaded = false;
nextEntry.loading = false;
};
nextEntry.image.src = url;
}
return entry;
}
/**
* Get cached chart background image.
* @param {string} url Image URL
* @param {object} $$ ChartInternal instance
* @returns {object|null} Cached image entry
* @private
*/
getBackgroundImage(url, $$) {
if (!url || !win.Image) {
return null;
}
let entry = this.backgroundImageCache.get(url);
if (!entry) {
const nextEntry = {
image: new win.Image(),
loaded: false,
loading: true
};
entry = nextEntry;
this.backgroundImageCache.set(url, entry);
nextEntry.image.onload = () => {
nextEntry.loaded = true;
nextEntry.loading = false;
$$.renderCanvasFrame?.(undefined, null, false);
};
nextEntry.image.onerror = () => {
nextEntry.loaded = false;
nextEntry.loading = false;
};
nextEntry.image.src = url;
}
return entry;
}
/**
* Resolve background.class CSS values that canvas can reasonably mirror.
* @param {object} $$ ChartInternal instance
* @param {string} className Background class name
* @returns {object} Class style
* @private
*/
getBackgroundClassStyle($$, className) {
if (!className || !win.document) {
return {};
}
const cached = this.backgroundClassStyleCache.get(className);
if (cached) {
return cached;
}
const probe = win.document.createElement("div");
probe.className = className;
probe.style.cssText =
"position:absolute;visibility:hidden;pointer-events:none;width:1px;height:1px;";
$$.$el.chart.node().appendChild(probe);
const style = win.getComputedStyle(probe);
const opacity = parseFloat(style.opacity);
const result = {
opacity: Number.isFinite(opacity) ? opacity : undefined,
transform: style.transform || undefined
};
probe.remove();
this.backgroundClassStyleCache.set(className, result);
return result;
}
/**
* Draw configured chart background behind all canvas layers.
* @param {object} $$ ChartInternal instance
* @private
*/
drawBackground($$) {
const bg = $$.config.background;
if (!bg?.imgUrl && !bg?.color) {
return;
}
const { ctx, painter } = this;
const { current, margin, width, height } = $$.state;
const classStyle = this.getBackgroundClassStyle($$, bg.class);
painter.withState(() => {
if (classStyle.opacity !== undefined) {
ctx.globalAlpha *= classStyle.opacity;
}
if (bg.imgUrl) {
const entry = this.getBackgroundImage(bg.imgUrl, $$);
if (entry?.loaded) {
const offset = getBackgroundImageOffset($$);
const rect = getPreservedAspectRatioRect(entry.image, current.width, current.height);
ctx.translate(offset.x, offset.y);
applyCssMatrixTransform(ctx, classStyle.transform);
ctx.drawImage(entry.image, rect.x, rect.y, rect.w, rect.h);
}
}
else if (bg.color) {
applyCssMatrixTransform(ctx, classStyle.transform);
painter.fillRect({
x: margin.left,
y: margin.top,
w: width,
h: height
}, { fill: bg.color });
}
});
}
/**
* Draw data label image when loaded, or queue it for loading.
* @param {object} $$ ChartInternal instance
* @param {object} d Data row
* @param {string} text Label text
* @param {number} x Label x coordinate
* @param {number} y Label y coordinate
* @returns {object} Adjusted text position
* @private
*/
drawLabelImage($$, d, text, x, y) {
const option = getLabelImageOption($$, d);
if (!option?.url) {
return { x, y };
}
const url = getLabelImageUrl(option, d);
const position = getLabelImagePosition($$, option, text, x, y, d);
const entry = this.getLabelImage(url, $$);
if (entry?.loaded) {
this.ctx.drawImage(entry.image, position.x, position.y, option.width, option.height);
}
return {
x: position.textX,
y: position.textY
};
}
/**
* Draw a data label at a resolved canvas position.
* @param {object} $$ ChartInternal instance
* @param {object} d Data row
* @param {string} text Label text
* @param {number} x Label x coordinate
* @param {number} y Label y coordinate
* @private
*/
drawDataLabel($$, d, text, x, y) {
const { painter, theme: { style } } = this;
({ x, y } = this.drawLabelImage($$, d, text, x, y));
if ($$.config.data_labels.rotate) {
const position = getRotatedLabelPosition($$, d, x, y);
x = position.x;
y = position.y;
this.ctx.textAlign = position.textAlign;
}
this.ctx.fillStyle = getLabelColor($$, d, style.label.color);
drawLabelDecorations($$, painter, d, text, x, y);
painter.textLines(text, x, y, {
angle: $$.config.data_labels.rotate
});
}
/**
* Redraw focused point data labels over the hover overlay.
* @param {object} $$ ChartInternal instance
* @param {Array} selectedData Focused data rows
* @private
*/
drawFocusLabels($$, selectedData) {
if (!$$.hasDataLabel?.()) {
return;
}
const { ctx, theme: { style } } = this;
const rows = selectedData.filter(d => d &&
hasCanvasDrawableValue($$, d) &&
isCanvasPointType($$, d) &&
isCanvasRenderableTarget($$, { id: d.id }));
const texts = {
size: () => rows.length
};
if (!rows.length) {
return;
}
ctx.font = style.label.font;
rows.forEach(d => {
const text = getLabelText($$, d);
let { x, y } = getRenderDataPoint($$, d);
if (!text) {
return;
}
({ x, y } = getPointLabelAnchor($$, ctx, d, x, y));
x += getLabelPosition($$, d, "x", texts);
y += getLabelPosition($$, d, "y", texts);
if (!isFiniteCanvasCoordinate(x, y)) {
return;
}
this.drawDataLabel($$, d, text, x, y);
});
}
/**
* Draw all supported canvas shape layers.
* @param {object} $$ ChartInternal instance
* @param {object} shape Cached draw shape object
* @param {Array} focusData Focused data rows
* @private
*/
draw($$, shape, focusData) {
if ($$.state.hasTreemap) {
this.drawTreemaps($$);
return;
}
const { margin, width, height } = $$.state;
const drawLineLayers = () => {
if (!$$.config.area_front) {
this.drawAreas($$, shape, focusData);
}
this.drawLines($$, shape);
if ($$.config.area_front) {
this.drawAreas($$, shape, focusData);
}
this.drawCircles($$, shape, focusData);
};
const drawContent = () => {
if (!$$.config.bar_front) {
this.drawBars($$, shape, focusData);
}
this.drawCandlesticks($$, shape, focusData);
drawLineLayers();
if ($$.config.bar_front) {
this.drawBars($$, shape, focusData);
}
this.drawSelections($$, shape);
this.drawLabels($$, shape);
};
$$.config.clipPath === false ?
drawContent() :
this.painter.clipRect({ x: margin.left, y: margin.top, w: width, h: height }, drawContent);
}
/**
* Draw the canvas subchart overview and brush selection.
* @param {object} $$ ChartInternal instance
* @param {object} shape Cached draw shape object
* @private
*/
drawSubchart($$, shape) {
const { config, state } = $$;
if (!config.subchart_show || !state.hasAxis || state.width2 <= 0 || state.height2 <= 0) {
return;
}
const { ctx, painter, theme: { style } } = this;
const { margin2, width2, height2 } = state;
const rect = { x: margin2.left, y: margin2.top, w: width2, h: height2 };
const targets = $$.filterTargetsToShow()
.filter(isCanvasRenderableTarget.bind(null, $$));
painter.withState(() => {
ctx.strokeStyle = style.axis.lineColor;
ctx.lineWidth = style.axis.lineWidth;
painter.strokePath(() => {
if (config.axis_rotated) {
painter.traceLine(rect.x, rect.y, rect.x, rect.y + rect.h);
}
else {
painter.traceLine(rect.x, rect.y + rect.h, rect.x + rect.w, rect.y + rect.h);
}
});
painter.clipRect(rect, () => {
painter.withTranslation(rect.x, rect.y, () => {
const areaTargets = targets.filter(isCanvasAreaType.bind(null, $$));
const areaIndices = getCanvasShapeIndices($$, shape, TYPE.AREA, isCanvasAreaType.bind(null, $$));
ctx.globalAlpha = style.shape.areaOpacity;
for (const target of areaTargets) {
if (!target.values.some(hasCanvasDrawableValue.bind(null, $$))) {
continue;
}
ctx.fillStyle = $$.color(target.id);
drawCanvasArea($$, target, areaIndices, painter, true);
}
ctx.globalAlpha = 1;
const barTargets = targets.filter(isCanvasBarType.bind(null, $$));
const barIndices = getCanvasShapeIndices($$, shape, TYPE.BAR, isCanvasBarType.bind(null, $$));
const getBarPoints = $$.generateGetBarPoints?.(barIndices, true);
if (getBarPoints) {
ctx.globalAlpha = style.shape.barOpacity;
for (const target of barTargets) {
ctx.fillStyle = $$.color(target.id);
target.values.forEach((d, i) => {
if (!hasCanvasDrawableValue($$, d)) {
return;
}
const geometry = getCanvasBarGeometry($$, getBarPoints, d, i);
geometry && painter.fillRect(geometry.rect, { fill: ctx.fillStyle });
});
}
ctx.globalAlpha = 1;
}
const candlestickTargets = targets.filter(isCanvasCandlestickType.bind(null, $$));
const candlestickIndices = getCanvasShapeIndices($$, shape, TYPE.CANDLESTICK, isCanvasCandlestickType.bind(null, $$));
const getCandlestickPoints = $$.generateGetCandlestickPoints?.(candlestickIndices, true);
if (getCandlestickPoints) {
ctx.lineWidth = style.shape.candlestickLineWidth;
for (const target of candlestickTargets) {
target.values.forEach((d, i) => {
const value = $$.getCandlestickData?.(d);
const geometry = value && getCanvasCandlestickGeometry($$, getCandlestickPoints, d, i);
if (!geometry) {
return;
}
const color = getCandlestickColor($$, { id: target.id }, value);
ctx.strokeStyle = color;
ctx.fillStyle = color;
painter.strokePath(() => {
painter.traceLine(geometry.wickStart[0], geometry.wickStart[1], geometry.wickEnd[0], geometry.wickEnd[1]);
});
painter.fillRect(geometry.body, { fill: ctx.fillStyle });
});
}
}
const lineTargets = targets.filter(isCanvasLineType.bind(null, $$));
const lineIndices = getCanvasShapeIndices($$, shape, TYPE.LINE, isCanvasLineType.bind(null, $$));
ctx.globalAlpha = 1;
ctx.lineWidth = style.shape.lineWidth;
for (const target of lineTargets) {
if (!target.values.some(hasCanvasDrawableValue.bind(null, $$))) {
continue;
}
ctx.strokeStyle = $$.color(target.id);
drawCanvasLine($$, target, lineIndices, painter, true);
}
if (config.point_show && !$$.isPointFocusOnly?.()) {
const cy = $$.updateCircleY?.(true);
const cx = $$.subxx?.bind($$);
if (cx && cy) {
for (const target of targets) {
if (!isCanvasPointType($$, target) ||
(isCanvasLineType($$, target) && !shouldDrawPoints($$, target))) {
continue;
}
const color = $$.color(target.id);
const pointFill = style.shape.pointFillColor || color;
const pointStroke = style.shape.pointStrokeColor || color;
const pointLineWidth = pointStroke ?
(style.shape.pointLineWidth ?? 1) :
0;
const pointStyle = pointStroke && pointLineWidth > 0 ?
{
fill: pointFill,
stroke: pointStroke,
lineWidth: pointLineWidth
} :
{ fill: pointFill };
ctx.globalAlpha = getPointOpacity($$, target);
target.values.forEach((d, i) => {
if (!hasCanvasDrawableValue($$, d)) {
return;
}
const x = config.axis_rotated ? cy(d, i) : cx(d);
const y = config.axis_rotated ? cx(d) : cy(d, i);
const r = Math.min(getTargetPointRadius($$, target, d), 3);
if (isFiniteCanvasCoordinate(x, y)) {
drawPointPattern(painter, "circle", x, y, r, pointStyle);
}
});
}
ctx.globalAlpha = 1;
}
}
});
});
this.drawSubchartBrush($$);
});
}
/**
* Draw current subchart brush selection.
* @param {object} $$ ChartInternal instance
* @private
*/
drawSubchartBrush($$) {
const { config, scale, state } = $$;
const domain = state.domain;
if (!config.subchart_show || !domain?.length || !scale.subX) {
return;
}
const { margin2, width2, height2 } = state;
const p0 = scale.subX(domain[0]);
const p1 = scale.subX(domain[1]);
const axisLength = config.axis_rotated ? height2 : width2;
const extent = $$.axis?.getExtent?.();
const extentValues = Array.isArray(extent) && extent.length >= 2 && extent.every(Number.isFinite) ?
extent.slice(0, 2) :
[0, axisLength];
const extentStart = Math.max(0, Math.min(axisLength, Math.min(...extentValues)));
const extentEnd = Math.max(0, Math.min(axisLength, Math.max(...extentValues)));
const start = Math.max(extentStart, Math.min(extentEnd, Math.min(p0, p1)));
const end = Math.max(extentStart, Math.min(extentEnd, Math.max(p0, p1)));
const size = end - start;
if (size <= 0) {
return;
}
const rect = config.axis_rotated ?
{ x: margin2.left, y: margin2.top + start, w: width2, h: size } :
{ x: margin2.left + start, y: margin2.top, w: size, h: height2 };
this.painter.fillRect(rect, {
fill: this.theme.style.subchartBrush.fill,
alpha: this.theme.style.subchartBrush.opacity
});
if (config.subchart_showHandle) {
this.drawSubchartBrushHandle($$, start, "start");
this.drawSubchartBrushHandle($$, end, "end");
}
}
/**
* Draw a visible subchart brush resize handle.
* @param {object} $$ ChartInternal instance
* @param {number} coord Brush handle coordinate
* @param {string} type Brush handle side
* @private
*/
drawSubchartBrushHandle($$, coord, type) {
const { config, state: { margin2, width2, height2 } } = $$;
const { ctx, painter, theme: { style } } = this;
const isRotated = config.axis_rotated;
const fill = style.subchartBrush.handleFill;
const stroke = style.subchartBrush.handleStroke;
const x = isRotated ? margin2.left + (width2 / 2) : margin2.left + coord;
const y = isRotated ? margin2.top + coord : margin2.top + (height2 / 2);
const path = getSubchartBrushHandlePath(isRotated ? "y" : "x", type);
if (!path) {
return;
}
painter.withState(() => {
ctx.translate(x, y);
ctx.fillStyle = fill;
ctx.strokeStyle = stroke;
ctx.lineWidth = style.subchartBrush.handleLineWidth;
ctx.globalAlpha = style.subchartBrush.handleOpacity;
ctx.fill(path);
ctx.globalAlpha = 1;
ctx.stroke(path);
});
}
/**
* Draw bar shapes on canvas.
* @param {object} $$ ChartInternal instance
* @param {object} shape Cached draw shape object
* @param {Array} focusData Focused data rows
* @private
*/
drawBars($$, shape, focusData) {
const { ctx, painter, theme: { style } } = this;
const isBar = isCanvasBarType.bind(null, $$);
const isExpanded = getExpandedFocusMatcher($$, focusData, isCanvasBarType);
const targets = $$.filterTargetsToShow()
.filter(isBar)
.filter(isCanvasRenderableTarget.bind(null, $$));
const getPoints = $$.generateGetBarPoints(getCanvasShapeIndices($$, shape, TYPE.BAR, isBar), false);
const { margin } = $$.state;
const getRadius = getBarRadiusResolver($$);
const stackingRadiusSet = getRadius ? getStackingBarRadiusSet($$) : new Set();
if (!getPoints) {
return;
}
painter.withTranslation(margin.left, margin.top, () => {
for (const target of targets) {
const range = getCanvasTargetVisibleRange($$, target);
const connectLineType = getBarConnectLineType($$, target.id);
const targetOpacity = getCanvasTargetFocusOpacity($$, target);
const connectLineBoxes = [];
const bars = [];
for (let i = range.start; i < range.end; i++) {
const d = target.values[i];
if (!hasCanvasDrawableValue($$, d)) {
continue;
}
const geometry = getCanvasBarGeometry($$, getPoints, d, i);
if (!geometry) {
continue;
}
const { points, rect } = geometry;
const radiusInfo = getBarRadiusInfo($$, d, points, getRadius, stackingRadiusSet, $$.isStackingRadiusData?.bind($$));
bars.push({ d, points, rect, radiusInfo });
if (connectLineType) {
connectLineBoxes.push(getBarConnectLineBox($$, points, radiusInfo));
}
}
if (connectLineType && style.shape.barConnectLineWidth > 0) {
drawBarConnectLine($$, painter, connectLineType, connectLineBoxes, targetOpacity);
}
for (const { d, rect, radiusInfo } of bars) {
const overColor = getCanvasOverColor($$, getFocusedCanvasDatum(focusData, d));
const color = overColor || $$.color(target.id);
const fillAlpha = isExpanded(d) ?
style.shape.barExpandedOpacity :
style.shape.barOpacity;
const alpha = fillAlpha * targetOpacity;
ctx.fillStyle = overColor ?
color :
getCanvasLinearGradientFill($$, ctx, target, "bar", rect, color);
getRadius ?
painter.fillRoundRect(rect, radiusInfo.corners, { alpha }) :
painter.fillRect(rect, { alpha });
if (style.shape.barLineWidth > 0) {
ctx.strokeStyle = style.shape.barStrokeColor;
ctx.lineWidth = style.shape.barLineWidth;
getRadius ?
painter.strokeRoundRect(rect, radiusInfo.corners, { alpha: style.shape.barOpacity * targetOpacity }) :
painter.strokeRect(rect, {
alpha: style.shape.barOpacity * targetOpacity
});
}
}
}
});
}
/**
* Draw candlestick shapes on canvas.
* @param {object} $$ ChartInternal instance
* @param {object} shape Cached draw shape object
* @param {Array} focusData Focused data rows
* @private
*/
drawCandlesticks($$, shape, focusData) {
const { ctx, painter, theme: { style } } = this;
const isCandlestick = isCanvasCandlestickType.bind(null, $$);
const isExpanded = getExpandedFocusMatcher($$, focusData, isCanvasCandlestickType);
const targets = $$.filterTargetsToShow()
.filter(isCandlestick)
.filter(isCanvasRenderableTarget.bind(null, $$));
const getPoints = $$.generateGetCandlestickPoints?.(getCanvasShapeIndices($$, shape, TYPE.CANDLESTICK, isCandlestick), false);
const { margin } = $$.state;
if (!getPoints) {
return;
}
painter.withTranslation(margin.left, margin.top, () => {
ctx.lineWidth = style.shape.candlestickLineWidth;
for (const target of targets) {
const range = getCanvasTargetVisibleRange($$, target);
const targetOpacity = getCanvasTargetFocusOpacity($$, target);
const lineWidth = style.shape.candlestickLineWidth;
const strokeColor = style.shape.candlestickStrokeColor || "#000";
for (let i = range.start; i < range.end; i++) {
const d = target.values[i];
const value = $$.getCandlestickData?.(d);
if (!value) {
continue;
}
const geometry = getCanvasCandlestickGeometry($$, getPoints, d, i);
if (!geometry) {