terriajs/dist/ReactViews/Custom/Chart/MomentLinesChart.js

Geospatial data visualization platform.

import { jsx as _jsx } from "react/jsx-runtime";
import { Line } from "@visx/shape";
import { observer } from "mobx-react";
import { forwardRef, useImperativeHandle } from "react";
const _MomentLines = forwardRef(({ id, chartItem, scales }, ref) => {
    useImperativeHandle(ref, () => ({
        doZoom(scales) {
            const lines = document.querySelectorAll(`g#${id} line`);
            lines.forEach((line, i) => {
                const point = chartItem.points[i];
                if (point) {
                    const x = scales.x(point.x);
                    line.setAttribute("x1", x.toString());
                    line.setAttribute("x2", x.toString());
                }
            });
        }
    }), [chartItem.points, id]);
    const baseKey = `moment-line-${chartItem.categoryName}-${chartItem.name}`;
    return (_jsx("g", { id: id, children: chartItem.points.map((p, i) => {
            const x = scales.x(p.x);
            const y = scales.y(0);
            return (_jsx(Line, { from: { x, y: 0 }, to: { x, y }, stroke: chartItem.getColor(), strokeWidth: 3, opacity: p.isSelected ? 1.0 : 0.3, pointerEvents: "all", cursor: "pointer", onClick: () => chartItem.onClick(p) }, `${baseKey}-${i}`));
        }) }));
});
_MomentLines.displayName = "MomentLines";
export default observer(_MomentLines);
//# sourceMappingURL=MomentLinesChart.js.map