@devexperts/dxcharts-lite
Version:
112 lines (111 loc) • 5.15 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 { 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';
export class DifferenceCloudDrawer {
constructor() { }
draw(ctx, allPoints, model, hitTestDrawerConfig) {
if (model.config.visible) {
// 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);
});
// draw difference cloud
model.linkedDataSeriesModels.forEach((linkedSeries, linkedSeriesIdx) => {
if (isDifferenceTool(linkedSeries.config.type) &&
isDifferenceTool(model.config.type) &&
linkedSeries.config.visible) {
const differencePoints = [];
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) => {
const to = Math.min(points.length, allPointsLinked[idx].length);
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);
});
}
});
}
}
drawLine(ctx, points, view) {
ctx.beginPath();
buildLinePath(points, ctx, view);
ctx.stroke();
}
drawDifference(ctx, lineColor, nextLineColor, diffPoints, curSeries, nextSeries, hitTestDrawerConfig) {
const [linePoints, nextLinePoints] = [[], []];
diffPoints.forEach(points => {
const [point, nextPoint] = points.diffPoints;
linePoints.push(point);
nextLinePoints.push(nextPoint);
});
const curSeriesPoints = mapDataSeriesDiffPointsIntoPoints(linePoints, curSeries.view);
const nextSeriesPoints = mapDataSeriesDiffPointsIntoPoints(nextLinePoints, nextSeries.view);
this.fillCloud(ctx, nextLineColor, curSeriesPoints, nextSeriesPoints, hitTestDrawerConfig);
this.fillCloud(ctx, lineColor, nextSeriesPoints, curSeriesPoints, hitTestDrawerConfig);
}
fillCloud(ctx, color, linePoints, nextLinePoints, hitTestDrawerConfig) {
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();
ctx.fillStyle = hitTestDrawerConfig.color ? hitTestDrawerConfig.color : toRGBA(color ? color : '#383838', 0.3);
ctx.fill();
ctx.restore();
}
}
const 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';