Sanlih-Entertainment-Television/js/demo/text-to-chart.js

console.log('text-to-chart');

Chart.register(ChartDataLabels);



var inputField = document.getElementById("keyword_data");

var sendButton = document.getElementById("send_data");

var canvasPng = document.getElementById("textToChart");

var img_box = document.getElementById("img_box");

var sidebar = document.getElementById('style_setting');


var input_text_value;

var chartType = 'line';
var unit = '';
var myChart = null;
var chartColor = '#912B2B';
var displayXaxes = true;
var ctx;

var chartlabels;
var chartdata;

var XfontSizeValue = 18;
var YfontSizeValue = 18;

var TitlefontSizeValue = 32;


var chart_bgimg_url = "url(./img/bg.webp)";

var vocab = [];

var chartDiv = document.getElementById('chartdiv');

document.addEventListener('DOMContentLoaded', function () {
    axios.get("https://cmm.ai:8080/vocab")
        .then(response => {
            // apiHideLoading();     
            console.log(response);

            vocab = response.data;
        })
        .catch(error => {

            console.error('發生錯誤:', error);
        });
});


inputField.addEventListener('click', function () {
    // 確保輸入框處於焦點狀態
    inputField.focus();

    // 在控制台中顯示焦點狀態
    console.log('Input field focused');
});

document.addEventListener('DOMContentLoaded', function () {
    // const input = document.getElementById('stockInput');
    const suggestions = document.getElementById('suggestions');

    inputField.addEventListener('input', function () {
        const query = this.value.trim();
        suggestions.innerHTML = ''; // 清空之前的建議

        console.log('query', query);
        if (query) {
            // const filteredVocab = vocab.filter(item => item.toLowerCase().includes(query));
            const queryTerms = query.split(/\s+/); // 分割輸入的內容
            const lastQueryTerm = queryTerms[queryTerms.length - 1];
            const filteredVocab = vocab.filter(item => {
                // 對每個分割後的單詞進行匹配，只要其中有一個匹配成功就返回 true
                return item.toLowerCase().includes(lastQueryTerm.toLowerCase());

            });


            if (filteredVocab.length > 0) {
                suggestions.style.border = '1px solid #ccc';
                suggestions.style.display = 'block'; // 顯示建議容器
            } else {
                suggestions.style.border = 'none';
                suggestions.style.display = 'none'; // 隱藏建議容器
            }

            console.log(queryTerms[queryTerms.length - 1])

            filteredVocab.forEach(item => {
                const div = document.createElement('div');
                div.classList.add('autocomplete-suggestion');
                div.textContent = item;
                // div.addEventListener('click', function () {
                //     inputField.value = item;
                //     suggestions.innerHTML = ''; // 清空建議
                //     suggestions.style.border = 'none';
                //     suggestions.style.display = 'none'; // 隱藏建議容器

                // });
                console.log('queryTerms', queryTerms);

                // console.log('filteredVocab', filteredVocab);


                div.addEventListener('click', function () {
                    queryTerms.forEach((term, index) => {
                        const regex = new RegExp(term, 'gi');
                        const match = regex.exec(inputField.value);
                        // console.log(queryTerms[queryTerms.length - 1]);
                        // console.log(filteredVocab, queryTerms[queryTerms.length - 1])

                        if (index === queryTerms.length - 1) {

                            if (match) {
                                var start = match.index;
                                var end = start + match[0].length;

                                console.log(start, end)

                                const textBefore = inputField.value.substring(0, start);
                                const textAfter = inputField.value.substring(end, inputField.value.length);

                                console.log('start', start, 'end', end, 'textBefore', textBefore, 'textAfter', textAfter);

                                // 捕獲被選中的部分並替換它
                                const selectedText = inputField.value.substring(start, end);

                                console.log('selectedText', selectedText);


                                const newText = textBefore + item + textAfter.replace(selectedText, '');

                                console.log('newText', newText);

                                inputField.value = newText;
                                // inputField.value = textBefore + item.replace(selectedText, '') + textAfter;

                                suggestions.innerHTML = ''; // 清空建議
                                suggestions.style.border = 'none';
                            }
                        }

                    });

                    // const start = inputField.selectionStart;
                    // const end = inputField.selectionEnd;


                });

                suggestions.appendChild(div);

            });
        } else {
            suggestions.style.border = 'none';
            suggestions.style.display = 'none'; // 隱藏建議容器
        }
    });
});

// 監聽輸入框的鍵盤事件
// document.getElementById("keyword_data").addEventListener("keyup", function (event) {
//     // 判斷是否按下 Enter 鍵 (key code: 13)
//     if (event.keyCode === 13) {
//         // 觸發送出按鈕的點擊事件
//         document.getElementById("send_data").click();
//     }
// });

// 定義按鈕點擊事件處理函數
function sendButtonClickHandler() {
    console.log(inputField.value);
    var input_text_value = inputField.value;
    $('#chartdiv').hide();
    sidebar.classList.remove('show');
    sidebar.classList.add('hidden');
    // 在這裡添加你希望在按下按鈕時執行的其他代碼
    get_data(input_text_value);
}

sendButton.addEventListener("click", sendButtonClickHandler);

// sendButton.addEventListener("click", function () {
//     console.log(inputField.value);
//     input_text_value = inputField.value;

//     // if (myChart) {
//     //     console.log('已存在')
//     //     data = [];
//     //     labels = [];
//     //     myChart.removePlugin(Chart.pluginService.getPlugin('afterDraw'));
//     //     myChart.destroy();
//     // }

//     get_data(input_text_value);
// });

var lastKeyPressTime = 0;
var enterCount = 0;
var ENTER_THRESHOLD = 500; // 設定連續按下 Enter 的時間閾值（毫秒）

inputField.addEventListener("keyup", function (event) {
    // 判斷是否按下 Enter 鍵 (key code: 13)
    if (event.key === "Enter") {
        var currentTime = new Date().getTime();
        // 計算與上一次按鍵按下時間的差值
        var timeDiff = currentTime - lastKeyPressTime;
        lastKeyPressTime = currentTime;

        // 如果兩次 Enter 鍵按下的時間差小於閾值，則增加計數器
        if (timeDiff <= ENTER_THRESHOLD) {
            enterCount++;
            // 如果計數器為2，則觸發 API 請求並重置計數器
            if (enterCount === 2) {
                sendButtonClickHandler();
                enterCount = 0;
            }
        } else {
            // 如果時間差大於閾值，則重置計數器
            enterCount = 0;
        }
    } else {
        // 如果按下的不是 Enter 鍵，則重置計數器
        enterCount = 0;
    }
});

function number_format(number, decimals, dec_point, thousands_sep) {
    // *     example: number_format(1234.56, 2, ',', ' ');
    // *     return: '1 234,56'
    number = (number + '').replace(',', '').replace(' ', '');
    var n = !isFinite(+number) ? 0 : +number,
        prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
        sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
        dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
        s = '',
        toFixedFix = function (n, prec) {
            var k = Math.pow(10, prec);
            return '' + Math.round(n * k) / k;
        };
    // Fix for IE parseFloat(0.55).toFixed(0) = 0;
    s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
    if (s[0].length > 3) {
        s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep);
    }
    if ((s[1] || '').length < prec) {
        s[1] = s[1] || '';
        s[1] += new Array(prec - s[1].length + 1).join('0');
    }
    return s.join(dec);
}

var labels = [];
var data = [];

function apiLoading() {
    document.getElementById('chartDataLoading').style.display = 'block';
}


function apiHideLoading() {
    document.getElementById('chartDataLoading').style.display = 'none';

}


const DISPLAY = true;
const BORDER = true;
const CHART_AREA = true;
const TICKS = true;

var labels = [];
var data = [];

var dataArray;

function generateChart(dataArray) {
    // 创建一个空数组来存储 labels 和 data
    console.log(dataArray)
    // 遍历数据数组
    for (var i = 0; i < dataArray.length; i++) {
        var item = dataArray[i];
        // 遍历当前项的属性
        for (var key in item) {
            // 如果属性名不在 labels 数组中，并且属性值不是对象，则将属性名添加到 labels 数组中

            if (typeof item[key] === 'string') {
                labels.push(item[key]);
            }
            // 如果属性值是数值类型，则将其添加到 data 数组中
            if (typeof item[key] === 'number') {
                data.push(item[key]);
            }
        }
    }
    console.log(data);
    if (myChart) {
        console.log('已存在')
        myChart.destroy();

    }

    if (chartType === "doughnut") {
        // createChartDoughnut(chartType, data, labels);
        // createChartDoughnut2(data, labels)
    } else {
        createChart(chartType, data, labels);

    }
    // console.log(data);
    console.log(labels);

}

var amChartInstance;


function extractAndGenerateChart(dataArray) {

    for (var i = 0; i < dataArray.length; i++) {
        var item = dataArray[i];
        // 遍历当前项的属性
        for (var key in item) {
            // 如果属性名不在 labels 数组中，并且属性值不是对象，则将属性名添加到 labels 数组中


            if (typeof item[key] === 'string') {
                labels.push(item[key]);
            }
            // 如果属性值是数值类型，则将其添加到 data 数组中
            if (typeof item[key] === 'number') {
                data.push(item[key]);
            }
        }
    }

    // console.log('key', key);

    generateBarChart(key, dataArray);
}

// 圓餅圖
function generatePieChart(dataArray) {
    $('#chartdiv').show();
    bgImgelement.style.backgroundImage = chart_bgimg_url;
    // chartDiv.style.width = "100%"

    chartWhitelement.style.background = "rgba(255,255,255,0.5)"
    // Themes begin
    am4core.useTheme(am4themes_animated);
    // Themes end

    // Create chart instance
    var chart = am4core.create("chartdiv", am4charts.PieChart);
    chart.data = dataArray;
    chart.innerRadius = am4core.percent(50);
    // Add and configure Series
    var pieSeries = chart.series.push(new am4charts.PieSeries());
    pieSeries.dataFields.value = "y";
    pieSeries.dataFields.category = "x";
    pieSeries.slices.template.stroke = am4core.color("#fff");
    pieSeries.slices.template.strokeWidth = 2;
    pieSeries.slices.template.strokeOpacity = 1;

    // Configure labels
    pieSeries.labels.template.wrap = true;
    pieSeries.labels.template.maxWidth = 100;
    pieSeries.labels.template.truncate = false;
    pieSeries.labels.template.fontSize = 14;

    // Configure label text to wrap and show percentages
    pieSeries.labels.template.adapter.add("textOutput", function (text, target) {
        if (target.dataItem && target.dataItem.values.value.percent) {
            return "[font-size: 14px]" + target.dataItem.category + ": " + target.dataItem.values.value.percent.toFixed(1) + "%";
        }
        return text;
    });



    pieSeries.colors.list = [
        am4core.color('rgb(171, 51, 49)'),
        am4core.color('rgb(34, 83, 149)'),
        am4core.color('rgb(79, 148, 65)'),
        am4core.color('rgb(217, 195, 105)'),
        am4core.color('rgb(142, 124, 180)'),
        am4core.color('rgb(211, 183, 144)'),
        am4core.color('rgb(83, 84, 84)'),
        am4core.color('rgb(229, 147, 152)')
    ];

    // Ensure labels have background
    // pieSeries.labels.template.background.fillOpacity = 1;

    console.log(pieSeries.labels.template)

    // Set label background color to match corresponding slice color
    pieSeries.labels.template.adapter.add("background.fill", function (fill, target) {
        return target.dataItem.slice.fill;
    });
    // This creates initial animation
    pieSeries.hiddenState.properties.opacity = 1;
    pieSeries.hiddenState.properties.endAngle = -90;
    pieSeries.hiddenState.properties.startAngle = -90;

    // console.log('調位置')
}

// 柱狀圖
function generateBarChart(key, dataArray) {
    $('#chartdiv').show();
    // var colorEven = document.getElementById('colorEven').value;
    // var colorOdd = document.getElementById('colorOdd').value;

    chartDiv.style.fontFamily = "Arial, sans-serif";

    chartDiv.style.fontWeight = "900";


    bgImgelement.style.backgroundImage = chart_bgimg_url;

    chartWhitelement.style.background = "rgba(255,255,255,0.5)"

    console.log('labelDependent', labelDependent);
    // Themes begin
    am4core.useTheme(am4themes_animated);
    // Themes end

    // Create chart instance
    var chart = am4core.create("chartdiv", am4charts.XYChart3D);

    console.log(dataArray);

    chart.data = dataArray;

    chart.angle = 30; // 圖表角度
    chart.depth = 25;  // 圖表深度


    let categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
    categoryAxis.dataFields.category = "x";
    categoryAxis.renderer.labels.template.rotation = 0;
    categoryAxis.renderer.labels.template.hideOversized = false;
    categoryAxis.renderer.minGridDistance = 20; // 間距
    // categoryAxis.renderer.labels.template.horizontalCenter = "left";
    // categoryAxis.renderer.labels.template.verticalCenter = "middle";
    // categoryAxis.tooltip.label.rotation = 90;
    // categoryAxis.tooltip.label.horizontalCenter = "right";
    // categoryAxis.tooltip.label.verticalCenter = "middle";

    // label 換行
    let label = categoryAxis.renderer.labels.template;
    label.wrap = true;
    label.maxWidth = 100;


    categoryAxis.renderer.cellEndLocation = 0.5; // 減少值可以增加間距

    let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
    valueAxis.title.text = labelDependent; // Y軸
    valueAxis.title.fontWeight = "bold";



    // Create series
    var series = chart.series.push(new am4charts.ColumnSeries3D());
    series.dataFields.valueY = 'y';
    series.dataFields.categoryX = "x";
    series.name = "y";
    series.tooltipText = "{categoryX}: [bold]{valueY}[/]";
    series.columns.template.fillOpacity = .8;

    let columnTemplate = series.columns.template;
    columnTemplate.strokeWidth = 2;
    columnTemplate.strokeOpacity = 1;
    columnTemplate.stroke = am4core.color("#FFFFFF");

    // columnTemplate.adapter.add("fill", function (fill, target) {
    //     return chart.colors.getIndex(target.dataItem.index);
    // })

    // 設置基數和偶數顏色
    columnTemplate.adapter.add("fill", function (fill, target) {
        return target.dataItem.index % 2 === 0 ? am4core.color("#288D97") : am4core.color("#427D7E");
    });

    columnTemplate.adapter.add("stroke", function (stroke, target) {
        return chart.colors.getIndex(target.dataItem.index);
    })

    // // 加上白色線條
    // series.columns.template.events.on("validated", function (event) {
    //   let column = event.target;
    //   let whiteLine = column.createChild(am4core.Line);

    //   whiteLine.stroke = am4core.color("#ffffff");

    //   whiteLine.strokeWidth = 1.3; // 線條寬度
    //   whiteLine.strokeOpacity = 0.5;// 透明度
    //   whiteLine.x1 = column.pixelWidth / 1;
    //   whiteLine.y1 = 0;
    //   whiteLine.x2 = column.pixelWidth / 1;
    //   whiteLine.y2 = column.pixelHeight;
    // });

    chart.cursor = new am4charts.XYCursor();
    chart.cursor.lineX.strokeOpacity = 0;
    chart.cursor.lineY.strokeOpacity = 0;

    categoryAxis.renderer.grid.template.strokeOpacity = 0; // 隱藏 X 軸
    // valueAxis.renderer.grid.template.strokeOpacity = 0; // 隱藏 Y 軸
    // valueAxis.renderer.line.strokeOpacity = 0;

    // LineSeries 底部線條
    var lineSeries = chart.series.push(new am4charts.LineSeries());
    lineSeries.dataFields.valueY = "bottom";
    lineSeries.dataFields.categoryX = "0";
    lineSeries.stroke = am4core.color("#FFFFFF")
    lineSeries.strokeWidth = 2;
    lineSeries.strokeOpacity = 1

    var bottomData = [];
    for (var i = 0; i < dataArray.length; i++) {
        bottomData.push({ "x": dataArray[i].x, "bottom": 0 });
    }
    lineSeries.data = bottomData;

    // 底部線條
    // let rectElements = document.querySelectorAll("rect");
    // // let widthValue = 0;
    // let fifthRectElement = rectElements[3];
    // // fifthRectElement.style.position = "relative";
    // setTimeout(() => {
    //   let width = fifthRectElement.getAttribute("width");
    //   // widthValue = parseFloat(width);
    //   console.log('rectElements', rectElements);
    //   console.log('fifthRectElement', fifthRectElement);
    //   console.log('width', width);

    //   let line = document.createElement("div");
    //   line.style.position = "absolute";
    //   line.style.bottom = "162px";
    //   line.style.right = "40px";
    //   line.style.width = `${parseFloat(width)}px`;
    //   line.style.height = "2px";
    //   line.style.backgroundColor = "#000000";

    //   document.getElementById("chartdiv").appendChild(line);
    // }, 10)

    // end am4core.ready()
}





var downloadButton = document.getElementById("downloadButton");

// 添加點擊事件監聽器
downloadButton.addEventListener('click', function () {
    setTimeout(function () {
        html2canvas(document.getElementById('data_chart_box')).then(function (canvas) {
            // // 獲取圖片資料 URL
            // var imageData = canvasPng.toDataURL("image/png");
            // // 創建下載連結
            // var link = document.createElement('a');
            // link.download = 'chart.png'; // 下載的檔案名稱
            // link.href = imageData; // 圖片資料 URL
            // // 模擬點擊下載連結
            // link.click();




            // 創建一個&lt;a&gt;元素
            const link = document.createElement('a');
            // 將 Canvas 轉換為 Data URL
            link.href = canvas.toDataURL('image/png');
            // 設置下載文件名
            link.download = 'chart.png';
            // 模擬點擊下載
            link.click();
        });
    }, 1000); // 等待 1 秒钟
});


var pieChartColors = [
    'rgb(171, 51, 49)',
    'rgb(34, 83, 149)',
    'rgb(79, 148, 65)',
    'rgb(217, 195, 105)',
    'rgb(142, 124, 180)',
    'rgb(211, 183, 144)',
    'rgb(83, 84, 84)',
    'rgb(229, 147, 152)'


];

function createChartDoughnut2(data, labels) {

    const chartData = {
        type: 'outlabeledPie',
        data: {
            labels: labels,
            datasets: [
                {
                    data: data,
                    borderWidth: borderWidthValue,
                    fill: false,
                    backgroundColor: pieChartColors,
                },
            ],
        },
        options: {
            plugins: {
                legend: false,
                outlabels: {
                    text: '%l %p',
                    color: 'white',
                    stretch: 35,
                    font: {
                        resizable: true,
                        family: 'Arial',
                        size: 48,
                        weight: 'bold',
                        style: 'italic',

                    },
                },
            },

        },
    };

    const devicePixelRatio = 4;

    var chartUrl = `https://quickchart.io/chart?c=${encodeURIComponent(JSON.stringify(chartData))}&devicePixelRatio=${devicePixelRatio}&f=png&fontsize=20`;



    // 获取目标 div 元素
    const targetDiv = document.getElementById('data_chartJs_box');

    // 创建一个 img 元素来显示图表
    const chartImg = document.createElement('img');

    chartImg.src = chartUrl;

    chartImg.classList.add('outlabeled_img');

    // 清空目标 div 元素
    targetDiv.innerHTML = '';

    // 将图表 img 元素插入到目标 div 中
    targetDiv.appendChild(chartImg);



    console.log(chart_bgimg_url);

    bgImgelement.style.backgroundImage = chart_bgimg_url;

    chartWhitelement.style.background = "rgba(255,255,255,0.5)"

}




// 版型二源餅圖
// // 创建 Chart.js 图表
function createChartDoughnut(chartType, data, labels) {
    $('#textToChart').show();
    canvasPng.style.maxWidth = '450px';
    canvasPng.style.maxHeight = '450px';

    var windowWidth = window.innerWidth || document.documentElement.clientWidth;
    var canvasWidth = Math.min(500, windowWidth); // 限制最大宽度为 500px
    canvasPng.style.width = canvasWidth + 'px'; // 设置 canvas 宽度
    canvasPng.style.marginLeft = 'auto'; // 左外边距自动计算
    canvasPng.style.marginRight = 'auto'; // 右外边距自动计算

    var ctx = document.getElementById("textToChart").getContext('2d');

    myChart = new Chart(ctx, {
        type: chartType,
        data: {
            labels: labels,
            datasets: [{
                strokeColor: "rgba(220,220,220,1)",
                StrokeWidth: 5,
                data: data,
                borderWidth: borderWidthValue,
                pointRadius: 0,
                pointBorderColor: '#fff',
                pointBorderWidth: 3,
                pointHoverRadius: 0,
                fill: false,
                backgroundColor: pieChartColors,
                // barPercentage: 0.5,
                // categoryPercentage: 0.5
            }]
        },
        options: {
            // responsive: true, // 啟用響應式
            maintainAspectRatio: true,
            responsive: true,
            aspectRatio: 1,
            plugins: {
                legend: {
                    display: false,
                },
                datalabels: {
                    color: '#fff', // 数据标签的颜色
                    anchor: 'end', // 数据标签的位置
                    align: 'start', // 数据标签的对齐方式
                    font: {
                        size: 14, // 数据标签的字体大小
                    },

                }
            },
            scales: {
                x: {
                    display: false, // 显示 x 轴
                    grid: {
                        display: false,
                        lineWidth: 5,
                        color: '#584B3D'
                    },
                    ticks: {
                        textStrokeColor: '#fff',
                        textStrokeWidth: 5,
                        font: {
                            display: false,
                            family: 'Arial', // 设置字体
                            size: XfontSizeValue, // 设置字体大小
                            weight: 'bold', // 设置字体粗细
                            fontColor: 'rgba(255,255,255,0.8)', // X-axis font color
                            shadowColor: 'rgba(0, 0, 0, 0.5)', // Shadow color
                            shadowBlur: 10, // Shadow blur level
                            shadowOffsetX: 5, // Horizontal shadow offset
                            shadowOffsetY: 5
                        },
                    },
                },
                y: {
                    display: false,
                    beginAtZero: false,
                    grid: {
                        display: false,
                        lineWidth: 5,
                        color: '#584B3D'
                    },
                    ticks: {
                        textStrokeColor: '#fff',
                        textStrokeWidth: 5,
                        font: {
                            family: 'Arial', // 設置字體
                            size: XfontSizeValue, // 設置字體大小
                            weight: 'bold', // 設置字體粗細
                            color: 'rgba(255,255,255,0.8)', // Y-axis 字體顏色
                            shadowColor: 'rgba(0, 0, 0, 0.5)', // 陰影顏色
                            shadowBlur: 10, // 陰影模糊級別
                            shadowOffsetX: 5, // 水平陰影偏移
                            shadowOffsetY: 5 // 垂直陰影偏移
                        },
                    }
                }
            },
            layout: {
                padding: {
                    left: 50, // 调整图表左边距
                    right: 50, // 调整图表右边距
                    top: 10,
                    bottom: 10,
                }
            },

        },
    });




    console.log(chart_bgimg_url);

    bgImgelement.style.backgroundImage = chart_bgimg_url;

    chartWhitelement.style.background = "rgba(255,255,255,0.5)"
}

var chartJsBox = document.getElementById('data_chartJs_box');

function createTable(dataArray, unit, Label_dependent_variable, Label_independent_variable,) {
    $('#chartdiv').hide();
    $('#textToChart').hide();

    var table = document.createElement('table');
    table.classList.add('table', 'table_template', 'dynamic-table'); // 添加 Bootstrap 的 table 样式，如果你在使用 Bootstrap


    // 创建表头
    var thead = table.createTHead();
    var headerRow = thead.insertRow();

    // Object.keys(dataArray[0]).forEach(function (key) {
    //     var header = headerRow.insertCell();
    //     header.textContent = key;
    // });

    var yearHeader = headerRow.insertCell();
    yearHeader.textContent = Label_independent_variable;
    var avgPriceHeader = headerRow.insertCell();
    avgPriceHeader.textContent = Label_dependent_variable;

    // 创建表格主体
    var tbody = table.createTBody();
    dataArray.forEach(function (item) {
        console.log(item)
        var row = tbody.insertRow();
        // var cell1 = row.insertCell();
        // cell1.textContent = item.year;
        // cell1.classList.add('year-class'); // 为年份单元格添加类
        // var cell2 = row.insertCell();
        Object.keys(item).forEach(function (key, index) {
            var cell = row.insertCell();
            if (index === 0) { // If it's the first cell, add 'year-class'
                cell.textContent = item[key];
                cell.classList.add('year-class');
            } else { // Otherwise, add 'average-class'
                if (key === 'Average_Close') {
                    cell.textContent = item[key].toFixed(2) + unit;
                } else {
                    // cell.textContent = item[key];
                    cell.textContent = item[key].toFixed(2) + unit;
                }
                cell.classList.add('average-class');
            }
        });

        // console.log(item.avg_price.toFixed(2))

        // cell.textContent = item[key].toFixed(2) + unit;

        // cell2.classList.add('average-class'); // 为年份单元格添加类
    });

    // 获取包含表格的 div 元素


    bgImgelement.style.backgroundImage = chart_bgimg_url;

    img_box.style.bottom = '60px';
    img_box.style.right = '5px';

    document.getElementById('img_box_url').style.width = "180px";

    // chartWhitelement.style.background = "rgba(255,255,255,0.5)"
    // 将表格添加到指定的 div 元素中
    chartJsBox.appendChild(table);
}

// 版型一折線圖
// // 创建 Chart.js 图表
function createChart(chartType, data, labels) {
    $('#textToChart').show();
    canvasPng.style.maxWidth = '';
    canvasPng.style.maxHeight = '';

    ctx = document.getElementById("textToChart");

    myChart = new Chart(ctx, {
        type: chartType,
        data: {
            labels: labels,
            datasets: [{
                strokeColor: "rgba(220,220,220,1)",
                StrokeWidth: 5,
                data: data,
                borderWidth: borderWidthValue,
                pointRadius: 0,
                pointBorderColor: '#fff',
                pointBorderWidth: 3,
                pointHoverRadius: 0,
                fill: false,
                backgroundColor: chartColor,
                borderColor: chartColor,
                // barPercentage: 0.5,
                // categoryPercentage: 0.5
            }]
        },
        options: {
            // responsive: true, // 啟用響應式
            maintainAspectRatio: false,

            plugins: {
                chart3d: {
                    enabled: true, // 啟用 3D 插件
                    alpha: 25, // 圖表繞 x 軸的旋轉角度
                    beta: 25, // 圖表繞 y 軸的旋轉角度
                    depth: 15 // 圖表的深度
                },
                // datalabels: {
                //     formatter: function (value, context) {
                //         // 添加单位
                //         return value + ' ' + unit;
                //     },
                //     textStrokeColor: '#fff',
                //     textStrokeWidth: 5,
                //     color: '#584B3D',
                //     font: {
                //         size: YfontSizeValue,
                //     },
                //     anchor: 'end',
                //     align: 'end',
                // },
                datalabels: null,
                // datalabels: data.length <= 10 ? {
                //     formatter: function (value, context) {
                //         // 添加单位
                //         return value + ' ' + unit;
                //     },
                //     textStrokeColor: '#fff',
                //     textStrokeWidth: 5,
                //     color: '#584B3D',
                //     font: {
                //         size: YfontSizeValue,
                //     },
                //     anchor: 'end',
                //     align: 'end',
                // } : null,
                customLabels: null,
                legend: {
                    display: false,
                },
                // subtitle: {
                //     display: true,
                //     align: 'left',
                //     position: 'top',
                //     text: 'Custom Chart Subtitle'
                // },
                // afterDatasetsDraw(chart) {
                //     var ctx = chart.ctx;
                //     var xAxis = chart.scales.x;
                //     var yAxis = chart.scales.y;
                //     var dataj = myChart.data.datasets[0].data;
                //     console.log('after', dataj)
                //     ctx.save();
                //     ctx.strokeStyle = '#000'; // 虚线颜色
                //     ctx.lineWidth = 1; // 虚线宽度
                //     ctx.setLineDash([5, 5]); // 设置虚线样式，[虚线段长度, 间隔长度]
                //     dataj.forEach(function (value, index) {
                //         var xPos = xAxis.getPixelForValue(labels[index]); // 获取 x 轴位置
                //         var yPos = yAxis.getPixelForValue(value); // 获取 y 轴位置
                //         // console.log(xPos)
                //         // 绘制虚线
                //         // ctx.beginPath();
                //         // ctx.moveTo(xPos, yPos);
                //         // ctx.lineTo(xPos, xAxis.bottom);
                //         // ctx.stroke();
                //         var xLineEnd = Math.min(yPos, yAxis.bottom);
                //         // console.log('第' + index + '條線', xPos, yPos, 'xLineEnd', xLineEnd, 'yAxis.getPixelForValue(value)', yAxis.getPixelForValue(value));
                //         // console.log('yAxis.getPixelForValue(value)', yAxis.getPixelForValue(value))
                //         // 绘制虚线
                //         ctx.beginPath();
                //         ctx.moveTo(xPos, yAxis.getPixelForValue(value));
                //         ctx.lineTo(xPos, xAxis.top);
                //         ctx.stroke();

                //         // 添加日期标签
                //         ctx.fillStyle = '#000'; // 文字颜色
                //         ctx.textAlign = 'center';
                //         // ctx.fillText(labels[index], xPos, yAxis.bottom + 20); // 将日期标签绘制在虚线下方

                //     });
                //     ctx.restore();
                // }
            },
            scales: {
                x: {
                    display: displayXaxes, // 显示 x 轴
                    grid: {
                        display: false,
                        lineWidth: 5,
                        color: '#584B3D'
                    },
                    ticks: {
                        textStrokeColor: '#fff',
                        textStrokeWidth: 5,
                        font: {
                            display: false,
                            family: 'Arial', // 设置字体
                            size: XfontSizeValue, // 设置字体大小
                            weight: 'bold', // 设置字体粗细
                            fontColor: 'rgba(255,255,255,0.8)', // X-axis font color
                            shadowColor: 'rgba(0, 0, 0, 0.5)', // Shadow color
                            shadowBlur: 10, // Shadow blur level
                            shadowOffsetX: 5, // Horizontal shadow offset
                            shadowOffsetY: 5
                        },
                    },
                },
                y: {
                    display: true,
                    beginAtZero: false,
                    grid: {
                        grid: {
                            display: true, // 显示 y 轴网格线
                            lineWidth: 1, // 网格线宽度
                            color: '#C0C5CC' // 网格线颜色
                        },
                    },
                    ticks: {
                        textStrokeColor: '#fff',
                        textStrokeWidth: 5,
                        font: {
                            family: 'Arial', // 設置字體
                            size: XfontSizeValue, // 設置字體大小
                            weight: 'bold', // 設置字體粗細
                            color: 'rgba(255,255,255,0.8)', // Y-axis 字體顏色
                            shadowColor: 'rgba(0, 0, 0, 0.5)', // 陰影顏色
                            shadowBlur: 10, // 陰影模糊級別
                            shadowOffsetX: 5, // 水平陰影偏移
                            shadowOffsetY: 5 // 垂直陰影偏移
                        },
                    }
                }
            },
            layout: {
                padding: {
                    left: 50, // 调整图表左边距
                    right: 50, // 调整图表右边距
                    top: 40,
                    bottom: 10,
                }
            },

        },
    });


    // 注册 afterDraw 事件
    // Chart.register({
    //     id: 'afterDraw',
    //     afterDraw: function (chart) {
    //         // console.log('處發', chart)
    //         // 在这里添加你的绘制代码
    //         var ctx = chart.ctx;
    //         var xAxis = chart.scales.x;
    //         var yAxis = chart.scales.y;
    //         var dataj = myChart.data.datasets[0].data;
    //         console.log('after', dataj)
    //         ctx.save();
    //         ctx.strokeStyle = '#000'; // 虚线颜色
    //         ctx.lineWidth = 1; // 虚线宽度
    //         ctx.setLineDash([5, 5]); // 设置虚线样式，[虚线段长度, 间隔长度]
    //         dataj.forEach(function (value, index) {
    //             var xPos = xAxis.getPixelForValue(labels[index]); // 获取 x 轴位置
    //             var yPos = yAxis.getPixelForValue(value); // 获取 y 轴位置
    //             // console.log(xPos)
    //             // 绘制虚线
    //             // ctx.beginPath();
    //             // ctx.moveTo(xPos, yPos);
    //             // ctx.lineTo(xPos, xAxis.bottom);
    //             // ctx.stroke();
    //             var xLineEnd = Math.min(yPos, yAxis.bottom);
    //             // console.log('第' + index + '條線', xPos, yPos, 'xLineEnd', xLineEnd, 'yAxis.getPixelForValue(value)', yAxis.getPixelForValue(value));
    //             // console.log('yAxis.getPixelForValue(value)', yAxis.getPixelForValue(value))
    //             // 绘制虚线
    //             ctx.beginPath();
    //             ctx.moveTo(xPos, yAxis.getPixelForValue(value));
    //             ctx.lineTo(xPos, xAxis.top);
    //             ctx.stroke();

    //             // 添加日期标签
    //             ctx.fillStyle = '#000'; // 文字颜色
    //             ctx.textAlign = 'center';
    //             // ctx.fillText(labels[index], xPos, yAxis.bottom + 20); // 将日期标签绘制在虚线下方

    //         });
    //         ctx.restore();
    //     }
    // });

    console.log(chart_bgimg_url);

    bgImgelement.style.backgroundImage = chart_bgimg_url;

    chartWhitelement.style.background = "rgba(255,255,255,0.5)"
}

// createChart(chartType);

// createChart(chartType)

const ChartOptions = document.querySelectorAll('input[name="ChartOptions"]');

ChartOptions.forEach(button => {
    button.addEventListener('click', function () {
        // console.log(this.value);
        chartType = this.value;
        console.log(chartType);
        if (myChart !== null) {
            myChart.destroy();
            data = [];
            labels = [];
        }
        if (chartType === 'line') {
            $('#chartdiv').hide();
            generateChart(dataArray);
        } else {
            $('#textToChart').hide();
            extractAndGenerateChart(dataArray);

        }

        // createChart(chartType, data, labels);
    });
});

// 表格字體
var fontSizeInput = document.getElementById('table_fontSize');

// 添加事件监听器
fontSizeInput.addEventListener('input', function () {
    // 获取输入框的值
    var fontSize = fontSizeInput.value;

    // 获取动态创建的表格元素
    var dynamicTable = document.querySelector('.dynamic-table');

    // 如果表格存在，则调整其字体大小
    if (dynamicTable) {
        dynamicTable.style.fontSize = fontSize + 'px';
    }
});

// 是否顯示point

var togglePoints = document.getElementById('togglePoints');

togglePoints.addEventListener('change', function () {
    console.log('checked')
    if (this.checked) {
        myChart.data.datasets[0].pointRadius = 5;
        myChart.data.datasets[0].pointHoverRadius = 8;
    } else {
        myChart.data.datasets[0].pointRadius = 0;
        myChart.data.datasets[0].pointHoverRadius = 0;
    }
    myChart.update();
});


// 單位標題
// =========================
var unitInput = document.getElementById('unit_data');

unitInput.addEventListener('input', function () {
    unit = unitInput.value;

    // 重新渲染图表
    myChart.update();
});

// ==========================

// y軸字體大小
// ==========================


var YfontSize = document.getElementById('YfontSize');
YfontSize.addEventListener('input', function () {

    YfontSizeValue = YfontSize.value;
    if (myChart) {
        myChart.destroy();
    }
    createChart(chartType, data, labels);
});

// ==========================




// x軸字體大小
// ==========================
var XfontSize = document.getElementById('XfontSize');

XfontSize.addEventListener('input', function () {

    XfontSizeValue = XfontSize.value;
    console.log(XfontSizeValue)
    if (myChart) {
        myChart.destroy();
    }
    createChart(chartType, data, labels);
});
// ==========================

// 線條粗細
// =========================
var rangeInput = document.getElementById('borderWidthRange');

var rangeInputSpan = document.getElementById('borderWidthRangeValue');

var borderWidthValue;

rangeInputSpan.textContent = rangeInput.value;


// 添加事件监听器，当滑动条的值发生改变时更新显示的值
rangeInput.addEventListener('input', function () {
    // 获取滑动条的当前值
    borderWidthValue = rangeInput.value;

    console.log(borderWidthValue);
    rangeInputSpan.textContent = borderWidthValue;

    if (myChart) {
        myChart.destroy();
    }

    createChart(chartType, data, labels);
    // myChart.data.datasets[0].borderWidth = borderWidthValue;

});

// =========================

// 線條顏色
// =========================


const colorInput = document.getElementById('borderColorInput');


// 添加事件监听器，当颜色选择发生变化时触发
colorInput.addEventListener('input', function () {
    // 获取当前选择的颜色值
    chartColor = colorInput.value;

    if (myChart) {
        myChart.destroy();
    }

    console.log(chartColor);
    createChart(chartType, data, labels);
});

// =========================


// 模板樣式
// =========================
// JavaScript
document.addEventListener("DOMContentLoaded", function () {

    // 獲取所有帶有 templateImg class 的圖像元素
    var templateImgs = document.querySelectorAll('.templateImg');

    // 為每個圖像元素添加點擊事件監聽器
    templateImgs.forEach(function (img) {
        img.addEventListener('click', function () {
            // 在點擊時印出圖像元素的 value 屬性值
            console.log(this.getAttribute('value'));
        });
    });
});
// =========================

var bgImgelement = document.getElementById('data_chart_box');

var chartWhitelement = document.getElementById('data_chartJs_box');


// 背景樣式
// =========================
// JavaScript
document.addEventListener("DOMContentLoaded", function () {
    // 獲取所有帶有 templateImg class 的圖像元素
    var bgImgs = document.querySelectorAll('.bgImg');

    // 為每個圖像元素添加點擊事件監聽器
    bgImgs.forEach(function (img) {
        img.addEventListener('click', function () {
            // 在點擊時印出圖像元素的 value 屬性值
            console.log(this.getAttribute('value'));

            var bgImgUrl = this.getAttribute('value');

            chart_bgimg_url = 'url(' + bgImgUrl + ')';

            bgImgelement.style.backgroundImage = chart_bgimg_url;

            // bgImgelement.style.backgroundSize = 'cover'; // 調整背景圖片大小
            // bgImgelement.style.backgroundPosition = 'center'; // 調整背景圖片位置
            // bgImgelement.style.backgroundRepeat = 'no-repeat'; // 調整背景圖片重複
        });
    });
});
// =========================

const radioButtons = document.querySelectorAll('input[name="inlineRadioOptions"]');
var chartTitle = document.querySelector('.chart_title');

radioButtons.forEach(button => {
    button.addEventListener('click', function () {
        if (this.value === '0') {
            chartTitle.style.textAlign = 'left';
        } else if (this.value === '1') {
            chartTitle.style.textAlign = 'center';
        } else if (this.value === '2') {
            chartTitle.style.textAlign = 'right';
        }
    });
});

var keywordInput = document.getElementById('title_data');


// 初始时将输入框的值设置为标题的文本内容
keywordInput.value = chartTitle.textContent;

// 监听输入框的输入事件，实现内容同步更新
keywordInput.addEventListener('input', function () {
    chartTitle.textContent = this.value;
});



// 標題字體大小
// ==========================

var TitlefontSize = document.getElementById('TitlefontSize');

TitlefontSize.addEventListener('input', function () {

    var TitlefontSizeValue = TitlefontSize.value;

    chartTitle.style.fontSize = TitlefontSizeValue + 'px';;

});



// ==========================


let labelDependent = ""; // 圖表左側 Label

function get_data(input_text_value) {
    inputField.value = "";
    apiLoading();
    var existingTable = chartJsBox.querySelector('table');

    if (chartDiv.childElementCount != 0) {
        data = [];
        labels = [];
        console.log('已存在')
        chartTitle.textContent = "";
        bgImgelement.style.backgroundImage = "";
        chartWhitelement.style.background = "";
        document.getElementById('img_box_url').src = "";
    }

    if (existingTable) {
        chartJsBox.removeChild(existingTable);
        chartTitle.textContent = "";
        bgImgelement.style.backgroundImage = "";
        chartWhitelement.style.background = "";
        document.getElementById('img_box_url').src = "";

    }
    if (myChart) {
        data = [];
        labels = [];
        chartTitle.textContent = "";
        bgImgelement.style.backgroundImage = "";
        chartWhitelement.style.background = "";
        myChart.destroy();
        document.getElementById('img_box_url').src = "";
    }
    axios.get('https://cmm.ai:8080/answer?question=' + input_text_value)
        .then(response => {

            apiHideLoading();

            // 在這裡處理成功獲取 JSON 的情況
            console.log(response);

            var chart_info = response.data.chart_info.Title;

            chartType = response.data.chart_info.Chart_type;

            var finance_img_url = response.data.imageUrl_info.imageUrl;
            if (response.data.imageUrl_info != null) {
                console.log(finance_img_url);
                document.getElementById('img_box_url').src = finance_img_url;
            }


            // switch (chartType) {
            //     case "line":
            //         document.getElementById("inlineRadio4").checked = true; // 折线图
            //         break;
            //     case "bar":
            //         document.getElementById("inlineRadio5").checked = true; // 柱状图
            //         labelDependent = response.data.chart_info.Label_dependent_variable;
            //         break;
            //     case "pie":
            //         document.getElementById("inlineRadio6").checked = true; // 圆饼图
            //         break;
            //     case "table":
            //         document.getElementById("inlineRadio7").checked = true; // 表格
            //         break;
            //     default:
            //     // 默认情况
            // }

            keywordInput.value = chart_info;

            chartTitle.textContent = chart_info;

            unit = response.data.chart_info.Unit_of_dependent_variable;

            var Label_dependent_variable = response.data.chart_info.Label_dependent_variable;

            var Label_independent_variable = response.data.chart_info.Label_independent_variable;


            unit_data.value = response.data.chart_info.Unit_of_dependent_variable;


            dataArray = response.data.data;


            if (chartType === "table") {
                createTable(dataArray, unit, Label_dependent_variable, Label_independent_variable);
                // document.getElementById('img_box_url').src = "";

            } else if (chartType === "bar") {
                console.log('圖表類型bar')
                $('#textToChart').hide();
                extractAndGenerateChart(dataArray);
            } else if (chartType === "doughnut") {
                $('#textToChart').hide();

                generatePieChart(dataArray)
            } else {
                $('#chartdiv').hide();
                generateChart(dataArray);
            }

            // generateChart(dataArray);
        })
        .catch(error => {
            apiHideLoading();

            // 在這裡處理請求失敗的情況
            console.error('發生錯誤:', error);
        });
}






$(document).ready(function () {
    $('#dataTable').DataTable();
});


function resizeChart() {
    if (myChart) {
        myChart.resize();
    }
}

document.addEventListener('visibilitychange', function () {
    console.log('Visibility changed:', document.visibilityState);
    if (document.visibilityState === 'visible') {
        resizeChart();
    }
});

// 监听窗口resize事件
window.addEventListener('resize', resizeChart);


var seeting_button = document.getElementById('chart_seeting_button');

var closeButton = document.getElementById('style_setting_close');

var closeButton_table = document.getElementById('style_setting_close_table');




// var borderSetting = document.getElementById('borderSetting');


var lineChartSetting = document.getElementById('lineChartSetting');

var table_setting = document.getElementById('table_setting');

var chart_category = document.getElementById('chart_category');


// 获取 chartDiv 元素



seeting_button.addEventListener('click', () => {

    console.log('setting_button')
    if (myChart === null && !chartJsBox.querySelector('table') && chartDiv.childElementCount === 0) {
        alert('請先生成圖表');
        return
    }
    if (chartType === 'table') {
        console.log('表格');
        sidebar.classList.toggle('show');
        sidebar.classList.toggle('hidden');
        lineChartSetting.style.display = 'none';
        table_setting.style.display = 'block';
        chart_category.style.display = 'none';

    } else if (chartType === "bar") {
        console.log('柱狀圖')
        sidebar.classList.toggle('show');
        sidebar.classList.toggle('hidden');
        lineChartSetting.style.display = 'none';
        table_setting.style.display = 'none';


    } else if (chartType === "doughnut") {
        console.log('快捷功能圓餅圖')
        sidebar.classList.toggle('show');
        sidebar.classList.toggle('hidden');
        lineChartSetting.style.display = 'none';
        table_setting.style.display = 'none';
        chart_category.style.display = 'none';

    } else {
        sidebar.classList.toggle('show');
        sidebar.classList.toggle('hidden');
        table_setting.style.display = 'none';
        lineChartSetting.style.display = 'block';
    }

});


closeButton.addEventListener('click', () => {
    sidebar.classList.remove('show');
    sidebar.classList.add('hidden');
});





const finance_options = [
    { name: "原油油桶", imageUrl: "./img/finance/01.webp" },
    { name: "黃金", imageUrl: "./img/finance/02.webp" },
    { name: "房屋", imageUrl: "./img/finance/03.webp" },
    { name: "車", imageUrl: "./img/finance/04.webp" },
    { name: "股市", imageUrl: "./img/finance/05.webp" },
    { name: "晶圓", imageUrl: "./img/finance/06.webp" },
    { name: "TSMC 台積電", imageUrl: "./img/finance/07.webp" },
    { name: "台幣", imageUrl: "./img/finance/08.webp" },
    { name: "美金", imageUrl: "./img/finance/09.webp" },
    { name: "購物車", imageUrl: "./img/finance/10.webp" },
    { name: "美中貿易", imageUrl: "./img/finance/11.webp" },
    { name: "世界地圖", imageUrl: "./img/finance/12.webp" },
    { name: "小麥", imageUrl: "./img/finance/13.webp" },
    { name: "玉米", imageUrl: "./img/finance/14.webp" },
    { name: "智慧產線", imageUrl: "./img/finance/15.webp" }
];

const selectOptions = document.getElementById('finance_options');

const selectOptions_table = document.getElementById('finance_options_table');

finance_options.forEach((option, index) => {
    const optionElement = document.createElement('option');
    optionElement.value = index + 1; // 值从 1 开始
    optionElement.textContent = option.name;
    optionElement.setAttribute('data-image-url', option.imageUrl); // 存储图片 URL
    selectOptions.appendChild(optionElement);
});

selectOptions.addEventListener('change', function () {
    const selectedOption = selectOptions.options[selectOptions.selectedIndex];
    const imageUrl = selectedOption.getAttribute('data-image-url');
    document.getElementById('img_box_url').src = imageUrl;
});


// finance_options.forEach((option, index) => {
//     const optionElement = document.createElement('option');
//     optionElement.value = index + 1; // 值从 1 开始
//     optionElement.textContent = option.name;
//     optionElement.setAttribute('data-image-url', option.imageUrl); // 存储图片 URL
//     selectOptions_table.appendChild(optionElement);
// });

// selectOptions_table.addEventListener('change', function () {
//     const selectedOption = selectOptions_table.options[selectOptions_table.selectedIndex];
//     const imageUrl = selectedOption.getAttribute('data-image-url');
//     document.getElementById('img_box_url').src = imageUrl;
// });

document.querySelectorAll('input[name="ChartOptions"]').forEach(function (radio) {
    radio.addEventListener('change', function () {
        // 檢查哪個單選按鈕被選中
        if (this.value === 'line') {
            // 如果選擇了折線圖，執行相應的操作
            console.log("選擇了折線圖");
            // 在這裡執行顯示折線圖的相關代碼
        } else if (this.value === 'doughnut') {
            // 如果選擇了柱狀圖，執行相應的操作
            console.log("選擇了柱狀圖");
            // 在這裡執行顯示柱狀圖的相關代碼
        }
    });
});