Draggable price alerts

import { createFinancialChart, type AlertEvent } from "@ortex-charts/financial";

const chart = createFinancialChart(el, {
    theme,
    timeZone: TIME_ZONE,
    resolution: "1D",
    watermark: { text: SYMBOL, visible: true, fontSize: 38 },
    data: history,
});

const alerts = chart.alerts({ draggable: true });
alerts.add({ price: at(0.68), label: "Take profit", repeat: true });
alerts.add({ price: at(0.32), label: "Stop", color: "#EF4E5A", repeat: true });

// `triggered` fires as the last price crosses a line, `moved` when the user
// drags one. `alerts.list()` is plain JSON, so the host can store it.
alerts.subscribe((event: AlertEvent) => {
    if (event.type === "triggered") {
        crossings++;
        status(
            `${event.alert.label} crossed ${event.direction} at ${event.price.toFixed(2)} on ${new Date(event.time).toISOString().slice(0, 10)} — ${crossings} so far`,
        );
    } else if (event.type === "moved") {
        status(`${event.alert.label} moved from ${event.from.toFixed(2)} to ${event.alert.price.toFixed(2)}`);
    }
});