function _array_like_to_array(arr, len) {
    if (len == null || len > arr.length) len = arr.length;
    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
    return arr2;
}
function _array_without_holes(arr) {
    if (Array.isArray(arr)) return _array_like_to_array(arr);
}
function _iterable_to_array(iter) {
    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
}
function _non_iterable_spread() {
    throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _to_consumable_array(arr) {
    return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
}
function _unsupported_iterable_to_array(o, minLen) {
    if (!o) return;
    if (typeof o === "string") return _array_like_to_array(o, minLen);
    var n = Object.prototype.toString.call(o).slice(8, -1);
    if (n === "Object" && o.constructor) n = o.constructor.name;
    if (n === "Map" || n === "Set") return Array.from(n);
    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
}
import { CategoryScale, Chart as ChartJS, Legend, LinearScale, LineElement, PointElement, Title, Tooltip } from "chart.js";
import React, { useImperativeHandle, useRef } from "react";
import { Line as ChartLine } from "react-chartjs-2";
import { stringFormatNumber } from "../utils";
import { Container } from "./Container";
var chartMarkLineRegistered = false;
export var Line = function(props) {
    React.useMemo(function() {
        if (chartMarkLineRegistered) {
            return undefined;
        }
        if (typeof window === 'undefined') {
            return undefined;
        }
        ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend);
        chartMarkLineRegistered = true;
        return undefined;
    }, []);
    var chartRef = React.useRef(undefined);
    var htmlRef = useRef(null);
    var lineChartRef = useRef(null);
    useImperativeHandle(props.chartRef, function() {
        return chartRef.current;
    }, [
        chartRef.current
    ]);
    // 处理数据格式
    var processData = function() {
        if (!props.data || props.data.length === 0) {
            return {
                labels: [],
                datasets: []
            };
        }
        // 获取所有唯一的 x 值作为标签
        var labels = _to_consumable_array(new Set(props.data.map(function(item) {
            return item[props.xField];
        })));
        if (props.colorLegend) {
            // 如果有颜色图例，按颜色分组数据
            var groupedData = props.data.reduce(function(acc, item) {
                var group = item[props.colorLegend];
                if (!acc[group]) {
                    acc[group] = [];
                }
                acc[group].push(item);
                return acc;
            }, {});
            var datasets = Object.keys(groupedData).map(function(group, index) {
                var groupData = groupedData[group];
                var data = labels.map(function(label) {
                    var item = groupData.find(function(d) {
                        return d[props.xField] === label;
                    });
                    return item ? item[props.yField] : null;
                });
                var colors = [
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 99, 132, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)'
                ];
                return {
                    label: group,
                    data: data,
                    fill: false,
                    backgroundColor: colors[index % colors.length],
                    borderColor: colors[index % colors.length],
                    borderWidth: 2,
                    tension: 0.1
                };
            });
            return {
                labels: labels,
                datasets: datasets
            };
        } else {
            // 单一数据集
            var data = labels.map(function(label) {
                var item = props.data.find(function(d) {
                    return d[props.xField] === label;
                });
                return item ? item[props.yField] : null;
            });
            return {
                labels: labels,
                datasets: [
                    {
                        label: props.yField,
                        data: data,
                        fill: false,
                        backgroundColor: 'rgba(54, 162, 235, 1)',
                        borderColor: 'rgba(54, 162, 235, 1)',
                        borderWidth: 2,
                        tension: 0.1
                    }
                ]
            };
        }
    };
    var chartData = processData();
    var options = {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                display: !!props.colorLegend,
                position: 'top'
            },
            title: {
                display: false
            }
        },
        scales: {
            x: {
                display: true,
                title: {
                    display: false
                },
                ticks: {
                    callback: function callback(value, index) {
                        var label = chartData.labels[index];
                        return stringFormatNumber(label);
                    }
                }
            },
            y: {
                display: true,
                title: {
                    display: false
                },
                ticks: {
                    callback: function callback(value) {
                        return stringFormatNumber(value);
                    }
                }
            }
        },
        elements: {
            point: {
                radius: 3,
                hoverRadius: 5
            }
        }
    };
    // 更新 chartRef 当 Line 组件的 ref 改变时
    React.useEffect(function() {
        if (lineChartRef.current) {
            chartRef.current = lineChartRef.current;
        }
    }, [
        lineChartRef.current
    ]);
    return /*#__PURE__*/ React.createElement(Container, {
        index: props.index,
        chartRef: chartRef,
        htmlRef: htmlRef
    }, /*#__PURE__*/ React.createElement(ChartLine, {
        ref: lineChartRef,
        data: chartData,
        options: options
    }));
};
