// @ts-ignore "declare module" doesn't work properly when importing dashboard in cloud
import "peity";
import React, { useRef, useState, useLayoutEffect, } from "react";
import { colorLuminance } from "../../utils/color-luminance";
export const PeityChart = ({ attributes, chartContainerElement, chartData, chartMetadata, chartElementClassName, chartElementId, orderedColors, }) => {
    const chartElement = useRef(null);
    // update width, height automatically each time
    const [$chartElement, set$chartElement] = useState();
    const peityOptions = useRef();
    // create chart
    useLayoutEffect(() => {
        if (chartElement.current && !$chartElement) {
            const $element = window.$(chartElement.current);
            const { width, height } = chartContainerElement.getBoundingClientRect();
            const { peityStrokeWidth = 1, } = attributes;
            const peityInitOptions = {
                stroke: window.NETDATA.themes.current.foreground,
                strokeWidth: peityStrokeWidth,
                width: Math.floor(width),
                height: Math.floor(height),
                fill: window.NETDATA.themes.current.foreground,
            };
            set$chartElement(() => $element);
            peityOptions.current = peityInitOptions;
        }
    }, [attributes, $chartElement, chartContainerElement]);
    // update chart
    useLayoutEffect(() => {
        if ($chartElement && peityOptions.current) {
            const getFillOverride = () => (chartMetadata.chart_type === "line"
                ? window.NETDATA.themes.current.background
                : colorLuminance(orderedColors[0], window.NETDATA.chartDefaults.fill_luminance));
            const updatedOptions = {
                ...peityOptions.current,
                stroke: orderedColors[0],
                // optimizatino from old dashboard, perhaps could be transformed to useMemo()
                fill: (orderedColors[0] === peityOptions.current.stroke)
                    ? peityOptions.current.fill
                    : getFillOverride(),
            };
            $chartElement.peity("line", updatedOptions);
            peityOptions.current = updatedOptions;
        }
    }, [$chartElement, chartData, chartMetadata, orderedColors]);
    return (React.createElement("div", { ref: chartElement, id: chartElementId, className: chartElementClassName }, chartData.result));
};
//# sourceMappingURL=peity-chart.js.map