import React, { useState, useLayoutEffect, useMemo, useRef, } from "react";
import uuid from "uuid";
import { ChartContainer } from "../../chart/components/chart-container";
const noop = () => { };
export const ChartWrapper = ({ attributes, dropdownMenu, id, style: styleOverride, chartMetadata, renderCustomElementForDygraph, onAttributesChange = noop, }) => {
    const chartContainerRef = useRef(null);
    const [chartContainerElement, setChartContainerElement] = useState();
    useLayoutEffect(() => {
        if (!chartContainerElement && chartContainerRef.current) {
            setChartContainerElement(chartContainerRef.current);
        }
    }, [chartContainerElement]);
    // const style = height
    //   ? { width: "100%", height: `${height}px` }
    //   : { width: "100%" }
    const chartUuid = useMemo(() => uuid.v4(), []);
    return (React.createElement("div", { ref: chartContainerRef, className: "dashboardjs-chart", id: id, role: "application", style: styleOverride }, chartContainerElement && (React.createElement(ChartContainer, { attributes: attributes, chartMetadata: chartMetadata, chartUuid: chartUuid, dropdownMenu: dropdownMenu, portalNode: chartContainerElement, renderCustomElementForDygraph: renderCustomElementForDygraph, onAttributesChange: onAttributesChange }))));
};
//# sourceMappingURL=chart-wrapper.js.map