@devexperts/dxcharts-lite
Version:
136 lines (135 loc) • 7.01 kB
JavaScript
/*
* Copyright (C) 2019 - 2026 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 { setLineWidth } from '../data-series.drawer';
import { buildLinePath } from './data-series-drawers.utils';
import { firstOf, lastOf } from '../../utils/array.utils';
import { toRGBA } from '../../utils/color.utils';
const DEFAULT_LINE_COLOR = `#383838`;
export class DifferenceCloudDrawer {
constructor() { }
draw(ctx, allPoints, model, hitTestDrawerConfig) {
const drawPredicates = model.config.additionalVisibilityPredicatesMap;
const shouldDrawLine = (drawPredicates === null || drawPredicates === void 0 ? void 0 : drawPredicates.showLine) !== undefined ? drawPredicates.showLine : model.config.visible;
const shouldDrawCloud = (drawPredicates === null || drawPredicates === void 0 ? void 0 : drawPredicates.showCloud) !== undefined ? drawPredicates.showCloud : model.config.visible;
if (shouldDrawLine) {
// draw main line
allPoints.forEach((points, idx) => {
var _a;
const config = model.getPaintConfig(idx);
setLineWidth(ctx, config.lineWidth, model, hitTestDrawerConfig, config.hoveredLineWidth);
const lineColor = (_a = hitTestDrawerConfig.color) !== null && _a !== void 0 ? _a : config.color;
ctx.strokeStyle = lineColor;
this.drawLine(ctx, points, model.view);
});
}
if (shouldDrawCloud) {
// draw difference cloud
model.linkedDataSeriesModels.forEach((linkedSeries, linkedSeriesIdx) => {
const linkedDrawPredicates = linkedSeries.config.additionalVisibilityPredicatesMap;
const linkedShouldDrawCloud = (linkedDrawPredicates === null || linkedDrawPredicates === void 0 ? void 0 : linkedDrawPredicates.showCloud) !== undefined
? linkedDrawPredicates.showCloud
: linkedSeries.config.visible;
if (isDifferenceTool(linkedSeries.config.type) &&
isDifferenceTool(model.config.type) &&
linkedShouldDrawCloud) {
const mainSeries = model;
const allPointsMain = mainSeries.getSeriesInViewport(mainSeries.scale.xStart - 1, mainSeries.scale.xEnd + 1);
const allPointsLinked = linkedSeries.getSeriesInViewport(linkedSeries.scale.xStart - 1, linkedSeries.scale.xEnd + 1);
allPointsMain.forEach((points, idx) => {
var _a, _b;
const differencePoints = [];
const to = Math.min(points.length, (_b = (_a = allPointsLinked[idx]) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0);
for (let k = 0; k < to; k++) {
const diffPoints = [
points[k].clone(),
allPointsLinked[idx][k].clone(),
];
differencePoints.push({
diffPoints,
});
}
const curSeriesColor = mainSeries.getPaintConfig(idx).color;
const nextSeriesColor = linkedSeries.getPaintConfig(linkedSeriesIdx).color;
this.drawDifference(ctx, curSeriesColor, nextSeriesColor, differencePoints, mainSeries, linkedSeries, hitTestDrawerConfig, drawPredicates);
});
}
});
}
}
drawLine(ctx, points, view) {
ctx.beginPath();
buildLinePath(points, ctx, view);
ctx.stroke();
}
drawDifference(ctx, lineColor, nextLineColor, diffPoints, curSeries, nextSeries, hitTestDrawerConfig, drawPredicates) {
const [linePoints, nextLinePoints] = [[], []];
diffPoints.forEach(points => {
const [point, nextPoint] = points.diffPoints;
linePoints.push(point);
nextLinePoints.push(nextPoint);
});
const curSeriesPoints = this.mapDataSeriesDiffPointsIntoPoints(linePoints, curSeries.view);
const nextSeriesPoints = this.mapDataSeriesDiffPointsIntoPoints(nextLinePoints, nextSeries.view);
const bgColor = drawPredicates === null || drawPredicates === void 0 ? void 0 : drawPredicates.backgroundColor;
const fillColor1 = bgColor !== undefined ? bgColor : nextLineColor;
const fillColor2 = bgColor !== undefined ? bgColor : lineColor;
this.fillCloud(ctx, fillColor1, curSeriesPoints, nextSeriesPoints, hitTestDrawerConfig, drawPredicates);
this.fillCloud(ctx, fillColor2, nextSeriesPoints, curSeriesPoints, hitTestDrawerConfig, drawPredicates);
}
fillCloud(ctx, color, linePoints, nextLinePoints, hitTestDrawerConfig, drawPredicates) {
var _a, _b, _c, _d;
ctx.save();
// clip above lowerLine
ctx.beginPath();
const firstX = (_b = (_a = firstOf(linePoints)) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : 0;
const lastX = (_d = (_c = lastOf(linePoints)) === null || _c === void 0 ? void 0 : _c.x) !== null && _d !== void 0 ? _d : 0;
ctx.lineTo(firstX, 0);
linePoints.forEach(p => {
ctx.lineTo(p.x, p.y);
});
ctx.lineTo(lastX, 0);
ctx.closePath();
ctx.clip();
ctx.beginPath();
linePoints.forEach((p, idx) => {
if (idx === 0) {
ctx.moveTo(p.x, p.y);
}
else {
ctx.lineTo(p.x, p.y);
}
});
nextLinePoints
.slice()
.reverse()
.forEach(p => {
ctx.lineTo(p.x, p.y);
});
ctx.closePath();
const hasBgColor = (drawPredicates === null || drawPredicates === void 0 ? void 0 : drawPredicates.backgroundColor) !== undefined;
if (hitTestDrawerConfig.color) {
ctx.fillStyle = hitTestDrawerConfig.color;
// If the background color exists, use the color as-is
}
else if (hasBgColor) {
ctx.fillStyle = color !== null && color !== void 0 ? color : DEFAULT_LINE_COLOR;
}
else {
ctx.fillStyle = toRGBA(color !== null && color !== void 0 ? color : DEFAULT_LINE_COLOR, 0.3);
}
ctx.fill();
ctx.restore();
}
mapDataSeriesDiffPointsIntoPoints(points, view) {
return points.map(p => {
const { centerUnit, close } = p;
const x = view.toX(centerUnit);
const y = view.toY(close);
return { x, y };
});
}
}
export const isDifferenceTool = (type) => type === 'DIFFERENCE';