@airplane/views
Version:
A React library for building Airplane views. Views components are optimized in style and functionality to produce internal apps that are easy to build and maintain.
56 lines (55 loc) • 2.3 kB
JavaScript
import { jsx } from "react/jsx-runtime";
import React__default from "react";
import { useChartState } from "../../state/components/chart/useChartState.js";
import { useComponentId } from "../../state/components/useId.js";
import { useNormalizedData, firstField } from "./useNormalizedData.js";
const ChartComponent = /* @__PURE__ */ React__default.lazy(() => import("./ChartComponent.js"));
const ConnectedChart = ({
...props
}) => {
const [selectionIndexes, setSelectionIndexes] = React__default.useState(/* @__PURE__ */ new Map());
const data = useNormalizedData(props, selectionIndexes);
const onClearSelection = React__default.useCallback(() => {
setSelectionIndexes(/* @__PURE__ */ new Map());
}, [setSelectionIndexes]);
const id = useComponentId(props.id);
const {
changeSelection
} = useChartState(id, {
onClearSelection
});
let xAxis = "";
if (props.type === "scatter" || props.type === "line" || props.type === "bar") {
if (props.data && Array.isArray(props.data) && props.data.length !== 0) {
xAxis = (props == null ? void 0 : props.xAxis) ?? firstField(props.data);
}
}
const onSelected = React__default.useCallback((data2) => {
var _a;
if (props.type !== "scatter" && props.type !== "line" && props.type !== "bar") {
return;
}
const newSelectionIndexes = /* @__PURE__ */ new Map();
for (const point of data2.points) {
if (!newSelectionIndexes.has(point.data.name)) {
newSelectionIndexes.set(point.data.name, []);
}
(_a = newSelectionIndexes.get(point.data.name)) == null ? void 0 : _a.push(point.pointIndex);
}
setSelectionIndexes(newSelectionIndexes);
const selectedPoints = data2.points.map((point) => ({
[xAxis]: point.x,
[point.data.name]: point.y
}));
changeSelection(selectedPoints);
}, [changeSelection, props.type, xAxis]);
const onDeselect = React__default.useCallback(() => {
changeSelection([]);
setSelectionIndexes(/* @__PURE__ */ new Map());
}, [changeSelection]);
return /* @__PURE__ */ jsx(React__default.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(ChartComponent, { ...props, normalizedData: data, onSelected, onDeselect }) });
};
export {
ConnectedChart
};
//# sourceMappingURL=ConnectedChart.js.map