import { HorizontalLineAnnotation, EventHandler, drawLineAnnotation, EHorizontalAnchorPoint, ELabelPlacement, } from "scichart"; import {DpiHelper} from "scichart/Charting/Visuals/TextureManager/DpiHelper"; import {dividedBy, multiplyValues, subtractValues} from "@/utils/calculationUtils"; import {colorListForDarkFont} from "@/constans/chart"; function getPriceDifference(price, lineValue, direction) { const baseValue = direction === "UP" ? lineValue : price; const compareValue = direction === "UP" ? price : lineValue; const percent = subtractValues(dividedBy(multiplyValues(baseValue, 100), compareValue), 100); return percent > 0 ? `+${percent.toFixed(2)}%` : `${percent.toFixed(2)}%`; } class CustomizedHorizontalLineAnnotation extends HorizontalLineAnnotation { constructor({ x1, y1, stroke, strokeThickness, isEditable, isSelected, id, strokeDashArray, onClick, onDragEnded, onDragStarted, labelPlacement, labelValue, showLabel, axisLabelFill, isHidden, onHover, lineType, }) { super(); this.customDragEventHandler = new EventHandler(); this.id = id; this.isSelected = isSelected; this.isHidden = isHidden; this.onClick = onClick; this.onHover = onHover; this.onDragEndedFunction = onDragEnded; this.onDragStartedFunction = onDragStarted; this.strokeDashArray = strokeDashArray; this.stroke = stroke; this.strokeThickness = strokeThickness; this.isEditable = isEditable; this.selectionBoxStroke = "rgba(255,255,255,0)"; this.selectionBoxThickness = 0; this.annotationsGripsRadius = 8; this.annotationsGripsFill = "#f4730b33"; this.annotationsGripsStroke = "#f4730b"; this.x1 = x1; this.y1 = y1; this.labelPlacement = labelPlacement; this.labelValue = labelValue; this.showLabel = showLabel; this.axisLabelFill = axisLabelFill; this.lineType = lineType; } hover(args) { super.hover(args) this.onHover(args); } click(args, selectOnClick) { const isSelected = super.click(args, selectOnClick); if (isSelected) { this.onClick({mouseArgs: args, sender: {id: this.id}}); } return isSelected; } onDragEnded() { super.onDragEnded(); this.onDragEndedFunction(); } onDragStarted(args) { if (this.onDragStartedFunction) { this.onDragStartedFunction(); } return super.onDragStarted(args); } onDragAdorner(args) { super.onDragAdorner(args); this.customDragEventHandler.raiseEvent({args, sender: this}); } delete() { this.customDragEventHandler.unsubscribeAll(); super.delete(); } drawWithContext(renderContext, xCalc, yCalc, viewRect) { const priceTextStyle = { color: colorListForDarkFont.includes(this.axisLabelFill) ? "#282828" : "#ffffff", fontSize: this.axisFontSize * DpiHelper.PIXEL_RATIO, fontFamily: this.axisFontFamily }; const priceDifferenceTextStyle = { color: this.axisLabelStroke, fontSize: 12 * DpiHelper.PIXEL_RATIO, fontFamily: "Ubuntu Mono, monospace" }; const borderY1 = this.getY1Coordinate(xCalc, yCalc); const borderY2 = borderY1; const price = this.parentSurface.annotations.items.find(({id}) => id === 'priceAnnotation')?.y1; // Price annotation drawLineAnnotation(this.parentSurface.yAxes.get(0), renderContext, ELabelPlacement.Axis, this.y1.toFixed(2), 0, 0, borderY1, borderY2, priceTextStyle, this.axisLabelFill, undefined, viewRect, true, 1, EHorizontalAnchorPoint.Right); // % price difference drawLineAnnotation(this.parentSurface.yAxes.get(0), renderContext, ELabelPlacement.TopLeft, getPriceDifference(price, this.y1, "UP"), 0, 0, borderY1, borderY2, priceDifferenceTextStyle, this.axisLabelFill, undefined, viewRect, true, 1, EHorizontalAnchorPoint.Left); drawLineAnnotation(this.parentSurface.yAxes.get(0), renderContext, ELabelPlacement.BottomLeft, getPriceDifference(price, this.y1, "DOWN"), 0, 0, borderY1, borderY2, priceDifferenceTextStyle, this.axisLabelFill, undefined, viewRect, true, 1, EHorizontalAnchorPoint.Left); super.drawWithContext(renderContext, xCalc, yCalc, viewRect); } } export { CustomizedHorizontalLineAnnotation };