Unable to format the CSV Date(category) to show both Date & Time

[kazi86]

@junedchhipa I am unable to view time stamps with date in my CSV. I am using Apec charts 1.8 version as my Angular version is 15.1

export const realTimeMetricChartOptions: Partial = { series: [ { name: 'Current Inventory', data: [], color: '#F7B84B', }, { name: 'Flow Rate', data: [], color: '#0AB39C', }, ], chart: { animations: { enabled: true, easing: 'easein', speed: 800, }, height: 350, type: 'line', toolbar: { show: true, tools: { download: true, selection: true, zoom: true, zoomin: true, zoomout: true, pan: true, customIcons: [], }, export: { csv: { filename: "", columnDelimiter: ',', headerCategory: 'Date & Time', headerValue : 'value', dateFormatter: (timestamp) => { return timestamp; } }, png: { filename: "" } } }, zoom: { enabled: true, }, }, dataLabels: { enabled: false, }, grid: { show: false, }, stroke: { curve: 'smooth', width: 2 }, xAxis: { type: 'datetime', labels: { datetimeUTC: false, datetimeFormatter: { day: 'dd MMM', hour: 'HH:mm ' }, style: { colors: '#ADB5BD', fontSize: '11px', fontWeight: '400', fontFamily: 'poppins', }, }, }, yAxis: [

    {
        labels: inventoryLabelsSettings,
        title: {
            text: 'Inventory (gal)',
            style: textLabelStyle,
        },
        opposite: true,
        min: 0,
        axisBorder: {
            show: true,
            color: '#F7B84B',
            width: 1,
        },
        axisTicks: {
            show: true,
            color: '#ADB5BD',
        },
    },
    {
        labels: flowRateLabelSettings,
        title: {
            text: 'Flow rate (GPH)',
            style: textLabelStyle,
        },
        opposite: false,
        min: 0,
        axisBorder: {
            show: true,
            color: '#20B8A4',
            width: 1,
        },
        axisTicks: {
            show: true,
            color: '#ADB5BD',
        },
    },
],
tooltip: {
    shared: true,

    x: {
        format: 'dd/MM/yy HH:mm ',
    },
    y: {
        formatter: function (y) {
            if (typeof y !== 'undefined') {
                return y.toFixed(2) + '';
            }

            return y;
        },
    },
},
markers: {
    colors: ['#F7B84B', '#0AB39C'],

    hover: {
        size: 5,
    },
},
fill: {},
legend: {
    show: true,
    onItemClick: {
        toggleDataSeries: false
    }
}

};

this.chartOptions.chart.toolbar.tools.customIcons = [ { icon: '', index: 5, title: "Download PDF", click: () => { this.chart.dataURI().then(({imgURI}) => { let downloadedAt = new Date();

                    let dateRange =
                        "From : " +
                        from.toLocaleDateString() +
                        "  " +
                        "  To : " +
                        to.toLocaleDateString() +
                        "   "

                    const pdf = new jsPDF("p", "mm", "a4");

                    pdf.internal.scaleFactor = 30;

                    pdf.addImage(imgURI, "JPEG", 10, 10, 200, 80);

                    pdf.setFontSize(12);

                    pdf.text(
                        "Downloaded At : " + downloadedAt.toLocaleDateString() + " " + downloadedAt.getHours() + ":"
                        + (downloadedAt.getMinutes()>=10 ? downloadedAt.getMinutes() : '0'+downloadedAt.getMinutes()) ,
                        130, 8);

                    pdf.text("Application Name : " + this.selectedApplication.name + "\n" +
                        "Graph : Real Time Sensor Metrics " + " \n" +
                        dateRange ,
                        15, 100);

                    pdf.save(this.chartOptions.chart.toolbar.export.csv.filename);

                });

                },
        },

        {
            icon: '<i class="ri-file-excel-2-line ms-2" style="font-size: 20px;"></i>',
            index: 6,
            title: "Download CSV",
            click: () => {
                // @ts-ignore
                let apexChartExport = this.chart.chartObj.exports;

                let downloadedAt = new Date();

                apexChartExport.triggerDownload = async (href: any, fileName: any, extension: any) => {

                    let dateRange =
                        "From : " +
                        from.toLocaleDateString() +
                        "  " +
                        from.getHours() + ":" + (from.getMinutes()<10 ? '0'+from.getMinutes() : from.getMinutes()) + ":" + (from.getSeconds()<10 ? '0'+from.getSeconds() : from.getSeconds()) +
                        "  To : " +
                        to.toLocaleDateString() +
                        "   " +
                        to.getHours() + ":" +(to.getMinutes()<10 ? '0'+to.getMinutes() : to.getMinutes()) + ":" + (to.getSeconds()<10 ? '0'+to.getSeconds() : to.getSeconds())

                    const newTopRow = [
                        downloadedAt.toLocaleDateString() +
                        " " +
                        downloadedAt.toLocaleTimeString() +
                        " " +
                        "Real Time Sensor Metrics - " +
                        " " +
                        this.selectedApplication.name +
                        " " +
                        dateRange,
                    ];

                    const response = await fetch(href);

                    let csvStr = await response.text();

                    let csvArr = this.csvService.csvToArray(csvStr);

                    csvArr.unshift(newTopRow);

                    const uniqueData: string[][] = [];
                    const seen = new Set();

                     csvArr.forEach(row => {
                        const rowString = row.join(',');
                        if (!seen.has(rowString)) {
                            seen.add(rowString);
                            uniqueData.push(row);
                        }
                    });

                     csvArr = uniqueData;

                    this.csvService.triggerDownload(
                        this.csvService.arrayToCSV(csvArr),
                        this.chartOptions.chart.toolbar.export.csv.filename
                    );

                };

                //Triggers "triggerDownload" method
                apexChartExport.exportToCSV(this.chart.series, this.chartOptions.chart.toolbar.export.csv.filename);
            },
        },
    ];

[brianlagunas]

Did not follow bug template instructions.