terriajs
Version:
Geospatial data visualization platform.
23 lines • 1.01 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { LinePath } from "@visx/shape";
import { line } from "d3-shape";
import { observer } from "mobx-react";
import { forwardRef, useImperativeHandle } from "react";
const _LineChart = forwardRef(({ id, chartItem, scales, color }, ref) => {
useImperativeHandle(ref, () => ({
doZoom(scales) {
const el = document.querySelector(`#${id} path`);
if (!el)
return;
const path = line()
.x((p) => scales.x(p.x))
.y((p) => scales.y(p.y));
el.setAttribute("d", path(chartItem.points));
}
}), [id, chartItem]);
const stroke = color || chartItem.getColor();
return (_jsx("g", { id: id, children: _jsx(LinePath, { data: chartItem.points, x: (p) => scales.x(p.x), y: (p) => scales.y(p.y), stroke: stroke, strokeWidth: 2 }) }));
});
_LineChart.displayName = "LineChart";
export default observer(_LineChart);
//# sourceMappingURL=LineChart.js.map