terriajs
Version:
Geospatial data visualization platform.
97 lines • 4.67 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
import { AxisBottom, AxisLeft } from "@visx/axis";
import { Line } from "@visx/shape";
import { observer } from "mobx-react";
import { memo, useEffect, useRef } from "react";
import LineAndPointChart from "./LineAndPointChart";
import LineChart from "./LineChart";
import MomentLinesChart from "./MomentLinesChart";
import MomentPointsChart from "./MomentPointsChart";
import PointOnMap from "./PointOnMap";
const LABEL_COLOR = "#efefef";
const Y_AXIS_NUM_TICKS = 4;
const Y_AXIS_TICK_LABEL_FONT_SIZE = 10;
export const Plot = memo(({ chartItems, initialScales, zoomedScales }) => {
const chartRefs = useRef([]);
useEffect(() => {
chartRefs.current?.forEach((ref, i) => {
if (typeof ref?.zoomHandle.doZoom === "function") {
ref.zoomHandle.doZoom(zoomedScales[i]);
}
});
}, [zoomedScales]);
const addToRefs = (id, el) => {
if (el) {
chartRefs.current.push({ id, zoomHandle: el });
}
else {
chartRefs.current = chartRefs.current.filter((ref) => ref.id !== id);
}
};
return (_jsx(_Fragment, { children: chartItems.map((chartItem, i) => {
const id = sanitizeIdString(chartItem.key);
switch (chartItem.type) {
case "line":
return (_jsx(LineChart, { ref: (node) => addToRefs(id, node), id: id, chartItem: chartItem, scales: initialScales[i] }, chartItem.key));
case "momentPoints": {
// Find a basis item to stick the points on, if we can't find one, we
// vertically center the points
const basisItemIndex = chartItems.findIndex((item) => (item.type === "line" || item.type === "lineAndPoint") &&
item.xAxis.scale === "time");
return (_jsx(MomentPointsChart, { ref: (node) => addToRefs(id, node), id: id, chartItem: chartItem, scales: initialScales[i], basisItem: chartItems[basisItemIndex], basisItemScales: initialScales[basisItemIndex], glyph: chartItem.glyphStyle }, chartItem.key));
}
case "momentLines": {
return (_jsx(MomentLinesChart, { ref: (node) => addToRefs(id, node), id: id, chartItem: chartItem, scales: initialScales[i] }, chartItem.key));
}
case "lineAndPoint": {
return (_jsx(LineAndPointChart, { ref: (node) => addToRefs(id, node), id: id, chartItem: chartItem, scales: initialScales[i], glyph: chartItem.glyphStyle }, chartItem.key));
}
}
}) }));
});
Plot.displayName = "Plot";
export const XAxis = memo(({ scale, ...restProps }) => {
return (_jsx(AxisBottom, { stroke: "#efefef", tickStroke: "#efefef", tickLabelProps: () => ({
fill: "#efefef",
textAnchor: "middle",
fontSize: 12,
fontFamily: "Arial"
}), labelProps: {
fill: LABEL_COLOR,
fontSize: 12,
textAnchor: "middle",
fontFamily: "Arial"
},
// .nice() rounds the scale so that the aprox beginning and
// aprox end labels are shown
// See: https://stackoverflow.com/questions/21753126/d3-js-starting-and-ending-tick
scale: scale.nice(), ...restProps }));
});
XAxis.displayName = "XAxis";
export const YAxis = memo(({ scale, color, units, offset }) => {
return (_jsx(AxisLeft, { left: offset, scale: scale, numTicks: Y_AXIS_NUM_TICKS, stroke: color, tickStroke: color, label: units || "", labelOffset: 10, labelProps: {
fill: color,
textAnchor: "middle",
fontSize: 12,
fontFamily: "Arial"
}, tickLabelProps: () => ({
fill: color,
textAnchor: "end",
fontSize: Y_AXIS_TICK_LABEL_FONT_SIZE,
fontFamily: "Arial"
}) }, `y-axis-${units}`));
});
YAxis.displayName = "YAxis";
export const Cursor = memo(({ x, ...restProps }) => {
return _jsx(Line, { from: { x, y: 0 }, to: { x, y: 1000 }, ...restProps });
});
Cursor.displayName = "Cursor";
export const PointsOnMap = observer(({ chartItems }) => {
return (_jsx(_Fragment, { children: chartItems.map((chartItem) => chartItem.pointOnMap && (_jsx(PointOnMap, { color: chartItem.getColor(), point: chartItem.pointOnMap }, `point-on-map-${chartItem.key}`))) }));
});
PointsOnMap.displayName = "PointsOnMap";
const sanitizeIdString = (id) => {
// delete all non-alphanum chars
return id.replace(/[^a-zA-Z0-9_-]/g, "");
};
//# sourceMappingURL=utils.js.map