Export CSV feature

[sridharan-dlt]

PR overview

• frontend/apps/monkvision/dashboards/dashboard2.page
  • Added chartMenu property in the randomline element, so we can handle the menu options in the chart.
• frontend/apps/monkvision/components/chart-box/chart-box.html
  • Added menu in the charts using the span-with-menu component.
  • Added hamburger icon image in svg format _(frontend/apps/monkvision/img/hamburgericon.svg)
• frontend/apps/monkvision/components/chart-box/chart-box.mjs
  • Added another mustache variable in createData(), which shows/hides the menu on chart.
  • Implemented Export CSV functionality.

Functionality:

• If element(bar/line graph) contains chartMenu property, then create an anchor tag under the chart element and calls storeBufferDataForExportCSV() which temporarily stores the contents.
• Once Client/user clicks on the Export CSV option, exportCSV() invoked and generate the CSV formatted string and ready for download.
• CSV filename holds NameOftheCluster-titleOfTheGraph-selectedTimestamp.

PS: As per discussion on PR #19, Export CSV functionality is re-worked using the front-end. Now the data which is visible on the dashboard is being generated as a CSV file.

[sridharan-dlt]

@TekMonksGitHub could you please review this PR.

[TekMonksGitHub]

Few things are wrong

1 - Why do we need a menu? It should be a simple image and clicking it exports the CSV. So this seems wrong

2 - I don't understand this either - it should be a simple onclick - call a function in the component to export the CSV and download it

No hash should ever be needed. In fact, 99% of times hashing to trap events is just plain wrong! HTML elements have onclick for a reason!

3 - When click is done there would be a single function which will take the chart's data, and export it to CSV file. Yes you will need an "" element but this is done dynamically, in fact, all you do is document.createElement("a").. etc within that function itself, and then click it. One doesn't go ahead creating physical elements etc.

And many other things are wrong! Please recode.

A simple image with a onclick handler sending a simple function call to the component which uses component's memory (see Monkshu component's memory) to get the data which was used to render the chart, and then simply exports it. This is probably going to be a 10 lines of code in a single function and that is it!

I am rejecting this fix. Design and code are wrong and fundamentals are wrong.