Directus CSV Chart Panel

Dashboard panel for Directus 12. It displays a numeric column from a CSV file as a line, area, or scatter chart.

Installation

npm install
npm run build

Then copy the complete project directory to Directus' extensions directory, or publish/install the package. The Worker is embedded in the generated dist/index.js, so no secondary JavaScript file needs to be exposed by Directus. Restart Directus after installation.

Configuration

1. Add the CSV Chart panel in Insights.
2. Select a CSV available in the file library, or enter its UUID.
3. Choose the X and Y columns, the X-axis type, the Y scale, the chart type, and the color.
4. Optionally enable a second Y series on the right axis, with its own column, scale, chart type, and color.
5. Keep the local index cache enabled for faster subsequent openings, or disable it for sensitive/shared browser profiles.

The manual UUID also accepts a Directus global variable, for example {{ file_id }}. For a simple relational variable linked to directus_files, Directus passes the selected UUID directly. Since the file is not known during configuration, the exact names of the X and Y columns must then be entered manually.

The panel declares a lightweight query for the file metadata so that Directus automatically reloads the chart when the relational variable changes. The selector's clear button removes the fixed file and allows you to use only the manual UUID or variable.

The CSV must contain a first row with unique headers. Comma, semicolon, and tab separators are detected automatically. Dates can be provided in ISO 8601 format or as Unix timestamps in milliseconds by selecting the corresponding X-axis type. The user must have permission to read the file.

Large files are downloaded in 4 MiB HTTP Range blocks and parsed in a Web Worker. The first pass builds a compact multi-resolution index instead of retaining every CSV row in memory. The CSV must be sorted increasingly by the selected X column. If the storage proxy does not support Range requests, the panel falls back to one progressive full download while keeping parsing off the main interface thread.

The panel sends roughly twice the chart width in points to ECharts. The index preserves the minima and maxima of both Y series. After a 150 ms zoom debounce, a more precise byte range is requested and the previous detail request is cancelled. The bottom slider, mouse wheel, and buttons let you select an area, zoom in, zoom out, go back, and reset the view.

When enabled, the local IndexedDB cache is invalidated automatically when the file date, size, or selected columns change. It retains at most three indexes or 200 MiB and falls back to memory when IndexedDB is unavailable.

Numeric and time axes adapt to the visible minimum and maximum values. The Y-axis is recalculated when the zoom area changes, without artificially forcing zero to be displayed.