In Flask CSV download file and managing CSV file automatically after download existing data file

Question

These instructions demonstrate how to edit a CSV file before installation to automatically add graphs, groups, and sorting to the data. Although I attempted to use a plotly.js variable to automate graph creation, it was unsuccessful. The process involves taking Cloudtrail logs and adding them to a CSV file in an unorganized format. I would like to organize this data in CSV format, but the method varies depending on the type of data.

<script>
  // Get the button and table elements
  const generateBtn = document.getElementById('generate-password');
  const downloadBtn = document.getElementById('download-csv');
  const table = document.querySelector('table');

  let temporaryPassword = '';

  // Add an event listener to the generate button to generate a temporary password
  generateBtn.addEventListener('click', () => {
    temporaryPassword = Math.random().toString(36).slice(-8);
    alert(`Your temporary password is ${temporaryPassword}. This password is valid for one-time use only and will expire after use.`);
  });

  // Add an event listener to the download button to handle the download
  downloadBtn.addEventListener('click', () => {
    // Prompt the user for a password
    const password = prompt('Please enter the download password:');

    // Verify the password
    if (password !== temporaryPassword) {
      alert('Incorrect password!');
      return;
    }

    // Get the table data as an array
    const tableData = Array.from(table.querySelectorAll('tr')).map(row => {
      return Array.from(row.querySelectorAll('td')).map(cell => cell.textContent);
    });

    // Convert the table data to CSV format
    const csvData = tableData.map(row => row.join(',')).join('\n');

    // Create a blob from the CSV data
    const blob = new Blob([csvData], { type: 'text/csv' });

    // Create a URL for the blob
    const url = URL.createObjectURL(blob);

    // Create a link element for the URL and click it to prompt the download
    const link = document.createElement('a');
    link.href = url;
    link.download = 'data.csv';
    link.click();

    // Clean up the URL and link elements
    URL.revokeObjectURL(url);
    link.remove();
  });

  // Log the download event Day April 6
fetch('/log_download', {
  method: 'POST',
  body: JSON.stringify({
    file_name: 'data.csv',
    ip_address: '{{ request.remote_addr }}',
    timestamp: new Date().toISOString()
  }),
  headers: {
    'Content-Type': 'application/json'
  }
}).then(response => {
  console.log('Download logged successfully!');
}).catch(error => {
  console.error('Failed to log download:', error);
});

</script>```


I attempted to add some variables and libraries to obtain an organized CSV format. Specifically, I tried to test it by organizing Column B and listing its contents, but it did not work. Additionally, the graph did not appear after downloading the CSV file, and there were no results in this case.

// Filter the data to only include the event names in column B const eventData = tableData.filter(row => row[1] !== undefined).map(row => row[1]);

// Count the frequency of each event name
const eventCounts = {};
eventData.forEach(name => {
  eventCounts[name] = (eventCounts[name] || 0) + 1;
});

// Create the chart using Chart.js const chart = new Chart('chart', { type: 'bar', data: { labels: chartData.map(data => data.label), datasets: [ { data: chartData.map(data => data.data[0]) } ] }, options: { scales: { yAxes: [{ ticks: { beginAtZero: true } }] } } });

// Clean up the chart when the download is complete
chart.destroy();