import React, { useMemo, forwardRef } from "react";
import { Flex } from "@netdata/netdata-ui";
import { ChartWrapper } from "../../dashboard/components/chart-wrapper";
import { withChartHeadProps } from "../charts";
import useDuration from "./useDuration";
export const ChartHead = ({ chart, dashboardAttributes, menuChartAttributes, ...rest }) => {
    const duration = useDuration(chart.update_every);
    const attributes = useMemo(() => ({
        ...menuChartAttributes,
        ...dashboardAttributes,
        after: -duration,
        points: duration,
    }), [dashboardAttributes, menuChartAttributes, duration]);
    return React.createElement(ChartWrapper, Object.assign({ attributes: attributes, chartMetadata: chart }, rest));
};
export const ChartHeadContainer = withChartHeadProps(ChartHead);
export const ChartHeadsWrapper = forwardRef((props, ref) => (React.createElement(Flex, Object.assign({ justifyContent: "center", alignItems: "baseline", ref: ref }, props))));
export const ChartHeadsContainer = ({ ids, uuid, ...rest }) => (React.createElement(ChartHeadsWrapper, Object.assign({}, rest), ids.map(id => (React.createElement(ChartHeadContainer, { key: id, id: id, uuid: uuid })))));
//# sourceMappingURL=chartHead.js.map