/* eslint-disable object-curly-newline */
/* eslint-disable react/jsx-props-no-spreading */
/* eslint-disable react/destructuring-assignment */
/* eslint-disable operator-linebreak */
/* eslint-disable arrow-body-style */
/* eslint-disable react/prop-types */
// @ts-nocheck
import React, { memo } from "react";
import styled from "styled-components";
import { Flex, Text } from "@netdata/netdata-ui";
import { useSelector } from "../../../../../../store/redux-separate-context";
import { useFormatters } from "../../../../utils/formatters";
import { netdataDashboard } from "../../../../../dashboard/utils/netdata-dashboard";
import { selectChartData } from "../../../../selectors";
const Title = styled(Text) `
  text-overflow: ellipsis;
  max-width: 120px;
  overflow-x: hidden;
`;
const getUnitSign = unit => {
    return unit === "percentage" ? "%" : ` ${unit.replace(/milliseconds/, "ms")}`;
};
const aggrMethods = {
    avg: "Average",
    sum: "Sum",
    min: "Min",
    max: "Max",
};
const getAggregation = value => `${aggrMethods[value]}` || "";
const ChartValueContainer = memo(({ id, units, aggrMethod, displayedIndex }) => {
    const chartData = useSelector((state) => selectChartData(state, { id }));
    const value = typeof displayedIndex === "number"
        ? chartData.result[displayedIndex]
        : chartData.view_latest_values[0];
    const { legendFormatValue, unitsCurrent } = useFormatters({
        attributes: {},
        data: chartData,
        units,
        unitsCommon: null,
        unitsDesired: null,
        uuid: id,
    });
    const aggregation = getAggregation(aggrMethod);
    return (React.createElement(Text, { wordBreak: "keep-all", color: "bright", margin: [0, 0, 0, "auto"], "data-testid": "k8sPopoverChart-chartValue" },
        aggregation && (React.createElement(Text, { margin: [0, 1, 0, 0], color: "separator", "data-testid": "k8sPopoverChart-chartValue-aggr" }, aggregation)),
        legendFormatValue(value),
        getUnitSign(unitsCurrent)));
});
const ChartValue = ({ id, ...rest }) => {
    const chartData = useSelector((state) => selectChartData(state, { id }));
    if (!chartData || chartData.result.length === 0)
        return null;
    return React.createElement(ChartValueContainer, Object.assign({ id: id }, rest));
};
const ChartOverview = ({ id, chartMetadata, aggrMethod, displayedIndex }) => {
    const { units, context } = chartMetadata;
    const title = context.replace(/cgroup\./, "");
    const icon = netdataDashboard.menuIcon(chartMetadata);
    return (React.createElement(Flex, { gap: 2, "data-testid": "k8sPopoverChart-overview" },
        React.createElement(Text, { color: "bright", dangerouslySetInnerHTML: { __html: icon } }),
        React.createElement(Title, { color: "bright", "data-testid": "k8sPopoverChart-title" }, title),
        React.createElement(ChartValue, { id: id, units: units, aggrMethod: aggrMethod, displayedIndex: displayedIndex })));
};
export default memo(ChartOverview);
//# sourceMappingURL=chartOverview.js.map