@devexperts/dxcharts-lite
Version:
90 lines (89 loc) • 4.26 kB
JavaScript
/*
* Copyright (C) 2019 - 2025 Devexperts Solutions IE Limited
* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
* If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import { CanvasElement, X_AXIS_MOBILE_PADDING } from '../../canvas/canvas-bounds-container';
import { calculateTextWidth } from '../../utils/canvas/canvas-font-measure-tool.utils';
/**
* This Drawer draws regular time labels for X Axis.
*/
export class XAxisTimeLabelsDrawer {
constructor(config, canvasModel, viewportModel, canvasBoundsContainer, labelsProvider, drawPredicate = () => true) {
this.config = config;
this.canvasModel = canvasModel;
this.viewportModel = viewportModel;
this.canvasBoundsContainer = canvasBoundsContainer;
this.labelsProvider = labelsProvider;
this.drawPredicate = drawPredicate;
}
/**
* Draws the X-axis labels on the canvas.
* If the drawPredicate is true, it will draw the labels.
* @returns {void}
*/
draw() {
var _a;
if (this.drawPredicate()) {
const ctx = this.canvasModel.ctx;
const xAxisColors = this.config.colors.xAxis;
const fontFamily = this.config.components.xAxis.fontFamily;
const font = XAxisTimeLabelsDrawer.getFontFromConfig(this.config);
const fontHeight = this.config.components.xAxis.fontSize;
const offsetTop = (_a = this.config.components.xAxis.padding.top) !== null && _a !== void 0 ? _a : 0;
ctx.save();
ctx.font = font;
ctx.fillStyle = xAxisColors.backgroundColor;
const bounds = this.canvasBoundsContainer.getBounds(CanvasElement.X_AXIS);
// draw axis background rect if the background color is not used
if (!this.config.components.chart.applyBackgroundToAxes.x) {
ctx.fillRect(bounds.x, bounds.y, bounds.width, bounds.height);
}
const color = this.config.colors.xAxis.labelTextColor;
const labels = this.labelsProvider();
this.drawLabels(ctx, labels, bounds, color, fontHeight, fontFamily, offsetTop + X_AXIS_MOBILE_PADDING / 2);
ctx.restore();
}
}
/**
* Draws labels on a canvas context.
* @param {CanvasRenderingContext2D} ctx - The canvas context to draw on.
* @param {NumericAxisLabel[]} labels - An array of NumericAxisLabel objects containing the value and text of each label.
* @param {Bounds} bounds - The bounds of the viewport.
* @param {string} color - The color of the labels.
* @param {number} fontHeight - The height of the font in pixels.
* @param {string} fontFamily - The font family to use for the labels.
* @param {number} offsetTop - The offset from the top of the viewport to draw the labels.
* @returns {void}
*/
drawLabels(ctx, labels, bounds, color, fontHeight, fontFamily, offsetTop) {
const font = `${fontHeight}px ${fontFamily}`;
ctx.fillStyle = color;
for (const label of labels) {
const x = this.viewportModel.toX(label.value) - calculateTextWidth(label.text, ctx, font) / 2;
if (x < bounds.x || x > bounds.width) {
continue;
}
const y = bounds.y + fontHeight - 1 + offsetTop; // -1 for font drawing inconsistency
const labelText = label.text;
ctx.font = font;
ctx.fillText(labelText, x, y);
}
}
/**
* Returns a font string based on the provided FullChartConfig object.
* @param {FullChartConfig} config - The FullChartConfig object containing the font style, size and family.
* @returns {string} - The font string in the format of "fontStyle fontSize fontFamily".
*/
static getFontFromConfig(config) {
return `${config.components.xAxis.fontStyle} ${config.components.xAxis.fontSize}px ${config.components.xAxis.fontFamily}`;
}
/**
* Returns an array of canvas IDs.
*
* @returns {Array<string>} An array containing the ID of the canvas.
*/
getCanvasIds() {
return [this.canvasModel.canvasId];
}
}