vscode-data-preview

VSCode Data Preview 🈸 extension for viewing 🔎 slicing 🔪 dicing 🎲 & charting 📊 large .json array .arrow .avro data files, .config .env .properties .yml configurations files, .csv/.tsv & .xlsx/.xlsm data files with Perspective - streaming data analytics WebAssembly library.

Data Preview 🈸 Features

• Preview 🈸 .json, .arrow, .avro, .yml, .csv/.tsv & .xlsx/.xlsm data files in a Data Grid with Sorting & Filtering
• Grid Data Summary display with Aggregate Functions, Row & Column Pivots (a.k.a. Group By & Split By)
• Basic Charts 📊 creation with Aggregate Functions, Row & Column Pivots
• Pluggable Charting 📊 libraries for stock Charts: highcharts || d3fc
• Persistent Data Preview Settings (View, Sort, Filter, Pivots, etc.) for restore of open Data View panels on VSCode Reload
• Mulptiple Spreadsheets Data Preview for Excel data files
• Arrow & Avro .schema.json generation for Data Schema Text Previews in JSON format
• Arrow, Avro & Excel data files .json data generation for Text Data Previews in JSON format
• Property Grid display for .json, .config, .env, .properties & .yml configuration files
• Filtered Data .csv, .json, .yml & .properties Data Grid/Chart 📊 Save file options
• Save & Load Data View .config options
• Dark & Light Data Preview 🈸 Panel Themes

Next V.

• Will include .parquet data format support, large text & binary data files loading & Apache Arrow data streaming

Note: this Data Preview 🈸 extension is already capable of loading a few MB's large data files with 100+K records & extensive list of supported data formats you'll be hard pressed to find on vscode marketplace.

Installation

Install Data Preview 🈸 via vscode Extensions tab (Ctrl+Shift+X) by searching for data preview || via vscode marketplace search results.

List of Data Preview 🈸 extension config Settings, with data.preview command info, keyboard shortcut, augmented vscode UI context menus, added Data Language mappings, supported Data Files list & configurable Theme & Charts 📊 Settings:

Configuration

Create User or Workspace Settings in vscode to change default Data Preview 🈸 extension Settings:

Setting	Type	Default Value	Description
data.preview.theme	string		Data Preview Theme: blank for light or .dark for dark theme data previews display.
data.preview.charts.plugin	string	hightcharts	Data Preview Charts 📊 library to use for stock charts: highcharts or d3fc
data.preview.create.json.files	boolean	true	Creates .json data & .schema.json files, if available, for Arrow, Avro & Excel data files.

Data Preview 🈸 example using .dark theme with d3fc charts config, viewing superstore.arrow data file :)

Usage Tips

Data Preview 🈸 Launch Tips

1. Run View -> Command Palette...>Data: Preview Data 🈸 command || hit Ctrl+Shift+D in an open .json .config .env .properties .yml || .csv/.tsv text data file document to launch Data Preview panel.
2. Hit Ctrl+S || File -> Save your text data file for immediate updates in an open Data Preview panel.
3. Right-click on a Binary .xlsx/.xlsm, .arrow || .avro data file in VSCode File Explorer to launch Data Preview panel.
4. Use exposed explorer/context, editor/title || editor/title/context Preview Data 🈸 context menu options to preview your data files.
5. Click on the Data Preview panel data filename link in its toolbar to Load saved Data View Grid || Chart 📊 .config.

Data Grid/Filter/Columns UX Tips

1. Double click on the Grid Column header to Sort data by that column.
2. Drag and drop a column from the left-side Columns control panel into Filter fields for data filtering (Group By, Split By, Sort, Filter).
3. Drag columns up and down in the left-side Columns control panel to reorder displayed columns in the Data Grid.
4. Uncheck a column in the Columns control panel to remove it from a Chart 📊 or Data Grid display.

Supported JSON, Config, Binary & Excel Data File Formats

{
  "when": "resourceFilename =~ /.*\\.(json|arrow|arr|avro|env|config|properties|yml|csv|tsv|txt|tab|dif|ods|prn|slk|xls|xlsb|xlsx|xlsm|xml|html)/",
  "command": "data.preview",
  "group": "navigation"
}

See https://github.com/SheetJS/js-xlsx#file-formats for more info on supported Excel file formats.

Provided Chart Types

• Area Chart
• Bar Chart
• Heatmap
• Line Chart
• Scatter Chart
• Sunburst
• Tree Map

Supported Aggregate Functions

• any
• avg
• count
• distinct count
• dominant
• first by index
• last by index
• last
• high
• low
• mean
• mean by count
• median
• pct sum parent
• pct sum grand total
• sum
• sum abs
• sum not null
• unique

Dev Log

See #DataPreview 🈸 tag on Twitter for the latest and greatest updates on this vscode extension and what's in store next.

Dev Build

$ git clone https://github.com/RandomFractals/vscode-data-preview
$ cd vscode-data-preview
$ npm install
$ code .

F5 to launch Data Preview 🈸 extension VSCode debug session.

Contributions

Any and all test, code or feedback contributions are welcome.

Open an issue or create a pull request to make this Data Preview 🈸 extension work better for all.