Skip to content

Conversation

ericahinkleRH
Copy link
Contributor

Description

CSV Export Plugin for BarChart
This PR implements the CSV export functionality for the BarChart plugin, working in conjunction with the core changes in perses/perses snapshot branch to enable CSV downloads for bar chart data. File gets downloaded with name "panelName_data.csv".

Overview
Adds an "Export as CSV" action button to BarChart panels that allows users to download their bar chart data in CSV format. The export includes proper column headers and formats data for Excel and Sheets compatibility. The first line of the CSV file has "Label, Value" and then under that it has the data structured in that way with descriptions beside the related values.

Implementation Details

  • BarChartExportAction component: Renders the download button and handles CSV generation
  • CSV export utilities: Functions for data formatting, filename sanitization, and CSV generation (shared with TimeSeriesChart)
  • Plugin integration: Adds export action to BarChart plugin definition
  • File naming: Generates descriptive filenames based on panel title (format: panelName_data.csv)

Integration with Core Changes

  • Depends on: Core CSV export infrastructure from perses/perses snapshot branch snapshot/timeseries-panel-actions
  • Plugin actions system: Utilizes the refactored plugin actions architecture
  • Data flow: Receives QueryData[] from core system and converts to CSV format
  • Shared infrastructure: Leverages CSV utilities developed for TimeSeriesChart export

Files Added/Modified

  • BarChartExportAction.tsx - Export button component and download logic
  • BarChart.tsx - Plugin definition with export action
  • CSVExportUtils.ts - Shared CSV formatting utilities (if not already present)
  • Type definitions as needed

Testing

  • Export button appears only when bar chart data is available
  • CSV format is Excel and Sheets-compatible
  • Filename sanitization handles special characters
  • Data formatting appropriate for bar chart structure

Dependencies
This plugin requires the core CSV export functionality from the snapshot branch snapshot/timeseries-panel-actions in perses/perses. Dependencies have been updated to reference the snapshot branch.

Screenshots

Export Button:
image

File Name and Information Format:
image

Checklist

  • Pull request has a descriptive title and context useful to a reviewer
  • Pull request title follows the [FEATURE] BarChart CSV Export Plugin naming convention
  • All commits have DCO signoffs
  • Plugin follows Perses plugin architecture guidelines
  • Export functionality integrates properly with panel actions system

UI Changes

  • Changes that impact the UI include screenshots and/or screencasts of the relevant changes.
  • Code follows the UI guidelines.

@ericahinkleRH ericahinkleRH force-pushed the Bar-Chart-Fixed-Plugin branch from 096d495 to 7909679 Compare August 7, 2025 18:05
@ericahinkleRH ericahinkleRH force-pushed the Bar-Chart-Fixed-Plugin branch from 7909679 to 1056350 Compare August 7, 2025 18:12
"module": "lib/index.js",
"types": "lib/index.d.ts",
"dependencies": {
"@perses-dev/components": "0.52.0-beta.1",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why do you need to move out the perses dependencies from the peerDependencies ?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

because the current dependencies of the monorepo are still pointing to 0.51.0 so we use this to be able to use a specific version for this plugin. When we upgrade all the plugins to use 0.52.0-beta.1 we can move this back to peerDependencies.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ah yeah ok got it. We will need another release of perses/perses to unlock the upgrade here unfortunately ...

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this change is not needed anymore as the PR #236 upgraded the @perses-dev dependencies to the v0.52.0-beta.3 and is resolving the issue raised here

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes exactly, let us know @ericahinkleRH if you have time to work on this feature. If not we can take over.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants