import React, { useRef, useEffect, useState, } from "react";
// @ts-ignore "declare module" doesn't work properly when importing dashboard in cloud
import { Gauge } from "gaugeJS";
import { identity, sortBy, map, pipe, always, } from "ramda";
const isSetByUser = (x) => (typeof x === "number");
export const GaugeChart = ({ attributes, chartData, chartMetadata, chartElementClassName, chartElementId, chartUuid, chartHeight, chartWidth, hoveredRow, legendFormatValue, orderedColors, setMinMax, showUndefined, unitsCurrent, }) => {
    const chartCanvasElement = useRef(null);
    const [chartInstance, setChartInstance] = useState();
    const valueIndex = hoveredRow === -1
        ? 0
        : (chartData.result.length - 1 - hoveredRow); // because data for easy-pie-chart are flipped
    const value = chartData.result[valueIndex];
    const { 
    // if this is set, then we're overriding commonMin
    gaugeMinValue: minAttribute, gaugeMaxValue: maxAttribute, } = attributes;
    const min = isSetByUser(minAttribute) ? minAttribute : chartData.min;
    const max = isSetByUser(maxAttribute) ? maxAttribute : chartData.max;
    // we should use minAttribute if it's existing
    // old app was using commonMin
    // make sure the order is correct and that value is not outside those boundaries
    // (this check was present in old dashboard but perhaps it's not needed)
    const [safeMin, safeMax] = pipe(
    // if they are attributes, make sure they're converted to numbers
    map((x) => +x), 
    // make sure it is zero based
    // but only if it has not been set by the user
    ([_min, _max]) => [
        (!isSetByUser(minAttribute) && _min > 0) ? 0 : _min,
        (!isSetByUser(maxAttribute) && _max < 0) ? 0 : _max,
    ], 
    // make sure min <= max
    sortBy(identity), ([_min, _max]) => [Math.min(_min, value), Math.max(_max, value)])([min, max]);
    // calling outside "useEffect" intentionally,
    // because it should update the values first, and only then render the chart in useEffect()
    useEffect(() => {
        setMinMax([safeMin, safeMax]);
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [safeMin, safeMax]);
    const pcent = pipe(always(((value - safeMin) * 100) / (safeMax - safeMin)), 
    // bug fix for gauge.js 1.3.1
    // if the value is the absolute min or max, the chart is broken
    (_pcent) => Math.max(0.001, _pcent), (_pcent) => Math.min(99.999, _pcent))();
    useEffect(() => {
        if (chartCanvasElement.current && !chartInstance) {
            const { gaugePointerColor = window.NETDATA.themes.current.gauge_pointer, gaugeStrokeColor = window.NETDATA.themes.current.gauge_stroke, gaugeStartColor = orderedColors[0], gaugeStopColor, gaugeGenerateGradient = false, } = attributes;
            const options = {
                lines: 12,
                angle: 0.14,
                lineWidth: 0.57,
                radiusScale: 1.0,
                pointer: {
                    length: 0.85,
                    strokeWidth: 0.045,
                    color: gaugePointerColor,
                },
                // If false, the max value of the gauge will be updated if value surpass max
                // If true, the min value of the gauge will be fixed unless you set it manually
                limitMax: true,
                limitMin: true,
                colorStart: gaugeStartColor,
                colorStop: gaugeStopColor,
                strokeColor: gaugeStrokeColor,
                generateGradient: (gaugeGenerateGradient === true),
                gradientType: 0,
                highDpiSupport: true,
            };
            const newChartInstance = new Gauge(chartCanvasElement.current).setOptions(options);
            // we will always feed a percentage (copied from old dashboard)
            newChartInstance.minValue = 0;
            newChartInstance.maxValue = 100;
            setChartInstance(newChartInstance);
        }
    }, [attributes, chartData, chartInstance, chartWidth, orderedColors]);
    // update with value
    useEffect(() => {
        if (chartInstance) {
            // gauge animation
            const shouldUseAnimation = hoveredRow === -1 && !showUndefined;
            // animation doesn't work in newest, 1.3.7 version!
            const speed = shouldUseAnimation ? 32 : 1000000000;
            chartInstance.animationSpeed = speed;
            setTimeout(() => {
                chartInstance.set(showUndefined ? 0 : pcent);
            }, 0);
        }
    }, [chartInstance, chartHeight, chartWidth, hoveredRow, pcent, showUndefined]);
    const valueFontSize = Math.floor(chartHeight / 5);
    const valueTop = Math.round((chartHeight - valueFontSize) / 3.2);
    const titleFontSize = Math.round(valueFontSize / 2.1);
    const titleTop = 0;
    const unitFontSize = Math.round(titleFontSize * 0.9);
    const minMaxFontSize = Math.round(valueFontSize * 0.75);
    return (React.createElement("div", { id: chartElementId, className: chartElementClassName },
        React.createElement("canvas", { ref: chartCanvasElement, className: "gaugeChart", id: `gauge-${chartUuid}-canvas`, style: {
                width: chartWidth,
                height: chartHeight,
            } }),
        React.createElement("span", { className: "gaugeChartLabel", style: {
                fontSize: valueFontSize,
                top: valueTop,
            } }, legendFormatValue(showUndefined ? null : value)),
        React.createElement("span", { className: "gaugeChartTitle", style: {
                fontSize: titleFontSize,
                top: titleTop,
            } }, attributes.title || chartMetadata.title),
        React.createElement("span", { className: "gaugeChartUnits", style: {
                fontSize: unitFontSize,
            } }, unitsCurrent),
        React.createElement("span", { className: "gaugeChartMin", style: { fontSize: minMaxFontSize } }, legendFormatValue(showUndefined ? null : safeMin)),
        React.createElement("span", { className: "gaugeChartMax", style: { fontSize: minMaxFontSize } }, legendFormatValue(showUndefined ? null : safeMax))));
};
//# sourceMappingURL=gauge-chart.js.map