
//\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\//
// Chart functions
//\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\////\\//

function CreateChartJs(ChartElement, ChartDataJsonString) {

    //https://www.chartjs.org/docs/latest/

    //const labels = [
    //    'January',
    //    'February',
    //    'March',
    //    'April',
    //    'May',
    //    'June',
    //    'July',
    //];

    //const data = {
    //    labels: labels,
    //    datasets: [{
    //        label: 'My First dataset',
    //        backgroundColor: 'rgb(0, 99, 132)',
    //        borderColor: 'rgb(255, 99, 132)',
    //        data: [0, 10.823908746, 5, 2, 20, 30, 45],
    //    }]
    //};

    //const chartdata = {
    //    type: 'bar',
    //    data: data,
    //    options: {}
    //};

    // Register data labels plugin
    Chart.register(ChartDataLabels);

    if (!ChartDataJsonString)
        ChartDataJsonString = "{}";
    var chartdata = JSON.parse(ChartDataJsonString);

    // Convert string to function for ticks formatter
    var tickscallback = null;
    if (chartdata.options && chartdata.options.scales && chartdata.options.scales.y && chartdata.options.scales.y.ticks && chartdata.options.scales.y.ticks.callback)
        eval("var tickscallback = " + chartdata.options.scales.y.ticks.callback);
    if (tickscallback)
        chartdata.options.scales.y.ticks.callback = tickscallback;


    // Convert string to function for data label formatter
    var datafmtcallback = null;
    if (chartdata.options && chartdata.options.plugins && chartdata.options.plugins.datalabels && chartdata.options.plugins.datalabels.formatter)
        eval("var datafmtcallback = " + chartdata.options.plugins.datalabels.formatter);
    if (datafmtcallback)
        chartdata.options.plugins.datalabels.formatter = datafmtcallback;

    

    // Find the chart canvas html element
    var ChartHtmlElement = ChartElement.get(0);

    const ChartJs = new Chart(
        ChartHtmlElement,
        chartdata
    );
}


function OnClickChart(canvaselement) {

    if (!canvaselement)
        return;
    var ChartJs = Chart.getChart(canvaselement);
    if (!ChartJs)
        return;

    // Clicked records
    var RecordIds = GetClickedRecordIds(canvaselement);
    var RecordTables = GetClickedRecordTables(canvaselement);

    //ToastMessage("Click Chart: " + RecordIds);
}

function OnDoubleClickChart(canvaselement) {

    if (!canvaselement)
        return;
    var ChartJs = Chart.getChart(canvaselement);
    if (!ChartJs)
        return;

    // Clicked records
    var RecordIds = GetClickedRecordIds(canvaselement);
    var RecordTables = GetClickedRecordTables(canvaselement);
    if (!RecordIds)
        return;
    if (!RecordTables)
        return;

    var RecordTablesArrray = RecordTables.split(',');
    if (!RecordTablesArrray)
        return;
    if (RecordTablesArrray.length == 0)
        return;

    var RecordTable = RecordTablesArrray[0];

    // Open a new tab for these specific records
    ShowSpecificRecordsGrid(RecordTable, RecordIds);

    //ToastMessage("Double-click chart: " + RecordTables);
}




function GetClickedRecordIds(canvaselement) {

    if (!event)
        return "";
    if (!canvaselement)
        return "";
    var ChartJs = Chart.getChart(canvaselement);
    if (!ChartJs)
        return "";

    // Find the clicked bar
    const points = ChartJs.getElementsAtEventForMode(event, 'nearest', { intersect: true }, true);
    if (points.length) {
        const firstPoint = points[0];
        const dataset = ChartJs.data.datasets[firstPoint.datasetIndex];
        const label = ChartJs.data.labels[firstPoint.index];
        const value = ChartJs.data.datasets[firstPoint.datasetIndex].data[firstPoint.index];
        const tooltip = ChartJs.data.datasets[firstPoint.datasetIndex].tooltips[firstPoint.index];
        const recordids = ChartJs.data.datasets[firstPoint.datasetIndex].recordids[firstPoint.index];

        //ToastMessage("Click chart: " + label + ", " + recordids);

        // Record IDs stored inside each dataset
        return recordids;
    }

    // No record ids
    return "";
}

function GetClickedRecordTables(canvaselement) {

    if (!event)
        return "";
    if (!canvaselement)
        return "";
    var ChartJs = Chart.getChart(canvaselement);
    if (!ChartJs)
        return "";

    // Find the clicked bar
    const points = ChartJs.getElementsAtEventForMode(event, 'nearest', { intersect: true }, true);
    if (points.length) {
        const firstPoint = points[0];
        const dataset = ChartJs.data.datasets[firstPoint.datasetIndex];
        const label = ChartJs.data.labels[firstPoint.index];
        const value = ChartJs.data.datasets[firstPoint.datasetIndex].data[firstPoint.index];
        const tooltip = ChartJs.data.datasets[firstPoint.datasetIndex].tooltips[firstPoint.index];
        const recordtables = ChartJs.data.datasets[firstPoint.datasetIndex].recordtables[firstPoint.index];

        //ToastMessage("Click chart: " + label + ", " + recordids);

        // Record IDs stored inside each dataset
        return recordtables;
    }

    // No record ids
    return "";
}


/**
 * Called for each tick mark on the Y axis of Chart.js chart
 * @param {any} value
 * @param {any} index
 * @param {any} ticks
 * @param {any} formatstring
 * @returns
 */
function OnChartJsFormatYAxisTickLabel(value, index, ticks, formatstring) {
    //console.log("OnChartJsFormatYAxisTickLabel" + value + ", " + formatstring);

    // Format currency
    if (formatstring && formatstring == "C" || formatstring == "c")
        return FormatGridCellDoubleC(value);
    return value;
}

function OnChartJsFormatYAxisDataLabel(value, context, formatstring) {
    //console.log("OnChartJsFormatYAxisDataLabel" + value + ", " + formatstring);

    // Format currency
    if (formatstring && formatstring == "C" || formatstring == "c")
        return FormatGridCellDoubleC(value);
    return value;
}


