@airplane/views/dist/components/chart/ChartComponent.js

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.

import { jsxs, jsx } from "react/jsx-runtime";
import { createStyles } from "@mantine/core";
import Plotly from "plotly.js-basic-dist";
import createPlotlyComponent from "../../externals/react-plotly.js/factory.js";
import { Heading } from "../heading/Heading.js";
import { Loader } from "../loader/Loader.js";
import { Label } from "../text/Text.js";
import { buildLayout } from "./buildLayout.js";
import { useCommonLayoutStyle } from "../layout/useCommonLayoutStyle.js";
const Plot = createPlotlyComponent(Plotly);
const DEFAULT_HEIGHT = "384px";
const useStyles = createStyles((_theme, {
  width,
  height
}) => ({
  wrapper: {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    rowGap: "0.5rem",
    width: "100%"
  },
  plot: {
    width: "100%",
    height: "100%"
  },
  loadingContainer: {
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    // If the container's width is set, fill it. If not, use a fixed width.
    width: width != null ? "100%" : 500,
    height: "100%",
    // If the container's height is not set, use a fixed height.
    minHeight: height != null ? void 0 : DEFAULT_HEIGHT
  },
  errorLabel: {
    // If the container's width/height is set, fill it. If not, use a fixed width/height.
    width: width != null ? "100%" : 500,
    height: "100%",
    // If the container's height is not set, use a fixed height.
    minHeight: height != null ? void 0 : DEFAULT_HEIGHT
  }
}));
const ChartComponent = ({
  onSelected,
  onDeselect,
  title,
  normalizedData,
  className,
  style,
  width,
  height = DEFAULT_HEIGHT,
  grow,
  loading,
  error,
  ...restProps
}) => {
  const {
    classes,
    cx
  } = useStyles({
    width,
    height
  });
  const {
    classes: layoutClasses
  } = useCommonLayoutStyle({
    width,
    height,
    grow
  });
  const layout = buildLayout(restProps);
  return /* @__PURE__ */ jsxs("div", {
    style,
    className: cx(classes.wrapper, layoutClasses.style),
    // Render title using our own component, instead of Plotly's.
    children: [
      title ? /* @__PURE__ */ jsx(Heading, { level: 2, children: title }) : null,
      loading && /* @__PURE__ */ jsx("div", { className: classes.loadingContainer, children: /* @__PURE__ */ jsx(Loader, {}) }),
      error && /* @__PURE__ */ jsx(Label, { className: classes.errorLabel, color: "red", children: error }),
      !loading && !error && /* @__PURE__ */ jsx(Plot, { onDeselect, onSelected, data: normalizedData, layout, useResizeHandler: true, config: {
        modeBarButtonsToRemove: ["select2d", "lasso2d"]
      }, className: classes.plot })
    ]
  });
};
export {
  ChartComponent as default
};
//# sourceMappingURL=ChartComponent.js.map