vscode-data-preview

Data Preview 🈸 extension for importing 📤 viewing 🔎 slicing 🔪 dicing 🎲 charting 📊 & exporting 📥 large .json array .arrow .avro .parquet data files, .config .env .properties .ini .yml configurations files, .csv/.tsv & .xlsx/.xlsb Excel files and .md markdown tables with Perspective - streaming data analytics WebAssembly library.

🈸 Features

• Preview .json .arrow .avro .parquet .yml .csv/.tsv & .xlsx/.xlsb data files in a Data Grid w/Sorting & Filtering
• Grid Data Summary display w/Aggregate Functions, Row & Column Pivots (a.k.a. Group By & Split By)
• Basic Charts 📊 creation w/Aggregate Functions, Row & Column Pivots
• Pluggable Charting 📊 libraries for bult-in Charts: d3fc || highcharts
• 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
• Markdown tables data preview for .md documentation files
• Data .schema.json generation for Arrow & Avro Data Schema Text Previews in JSON format
• Binary Data files .json generation for Arrow, Avro & Excel formats for Text Data Preview
• Property Grid display for .json .config .env .properties .ini & .yml configuration files
• Open Data Preview on Side option for slim data || config files
• Quick Launch new Data Preview input box for data files in open workspace
• Save Filtered Data Grid || Chart 📊 Data in .arrow .csv .json(s) .yml & .properties formats
• Save & Load Data View .config options
• Dark, Light, Dense & High Contrast Blue Data Preview 🈸 Panel UI Themes

Next V.

• Will include large text & binary data files loading & Apache Arrow data streaming.

Note: Data Preview 🈸 is already capable of loading a few 10+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 in one extension.

See data/large/... data folder for sample large data files and Data View .configs you can try in Data Preview 🈸.

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, data.preview command(s), keyboard shortcut(s), 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:

Data Preview 🈸 example using dark UI theme with d3fc Charts 📊 Data View config, viewing superstore.arrow data file :)

Usage Tips

Data Preview 🈸 Launch Tips

1. Run View -> Command Palette...>Data: Preview Data command or Ctrl+Shift+D in an open .json .config .env .properties .ini .yml or .csv/.tsv text data file document to launch Data Preview panel.
2. File -> Save (Ctrl+S) your text data file for immediate updates in an open Data Preview 🈸 panel.
3. Right-click on a Binary .xlsx/.xlsb, .arrow or .avro data file in VSCode File Explorer to launch Data Preview panel.
4. Use exposed explorer/context, editor/title or editor/title/context Preview Data 🈸 or Preview Data on Side context menu options to preview your data files.
5. Click on the Data View Filename toolbar link to Load saved Data View Grid || Chart 📊 .config.
6. Click on the Data View 🈸 icon to Launch new Data Preview Panel for new view config changes.
7. Use Open Data File or URL 📤 option from Data View toolbar to launch new Data Preview 🈸.
8. Run View -> Command Palette...>Data: Preview Remote Data command or Ctrl+Shift+R to launch Data Preview for remote http(s) data files.

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.

Usage Scenarios

Use Data Preview 🈸 to:

• Load large data files for sorting, filtering & charting 📊
• Export displayed data in a compact binary .arrow data format, .ods .xlsb || .xlsx spreadsheet format, or .csv .json .yml .md or .properties text formats
• Preview .properites and other key-value pairs configuration files to reformat them or find set config option values
• Generate Arrow & Avro .shema.json for metadata text preview of those binary data files
• Generate .json files for text data preview of binary Excel files
• Preview Excel files and workbooks with multiple workseets without opening Excel
• Convert .csv or .tsv data to .json or .yml format
• Extract, sort, filter and save markdown tables from .md documentation files
• Use built-in Charts 📊 for Exploratory Data Analysis

Supported JSON, Config, Binary & Excel Data File Formats

Tip: try sample data and Data View .config files from this repository data/... folders: data/arrow data/avro data/parquet data/config data/excel data/json data/yaml data/large

Vega datasets repository also has a broad collection of sample .csv & .json array data files you can try in Data Preview 🈸

Data Preview 🈸 Files Matching Rules

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

Data Preview 🈸 Files Loading Details

Note: .json .config & .yml configuration files that don't contain array data are converted to flat properties key/value pairs Object and displayed in a Property Grid Data View mode. See json.utils.ts for more info.

See Data Manager API & src/data.providers folder for data loading and saving imlementation details.

Provided Chart 📊 Types

• Area Chart
• Bar Chart
• Candlesick Chart (d3fc only))
• Heatmap
• Line Chart
• OHLC Chart (d3fc only)
• Scatter Chart
• Sunburst
• Tree Map

Supported Filter Functions

• <, <=, ==, !=, >, >= for dates and number columns/fields
• ==, !=, contains, in, not in, begins with, ends with for string fields and dictionaries
• &, |, and, or, ==, != for bolean fields

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

Recommended VSCode Extensions

Other extensions Data Preview 🈸 replaces, enhances or supplements for working with supported data file formats in VSCode:

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.

||

vscode-data-preview>vsce package

to generate VSIX Data Preview extension package from our latest for local dev install in VSCode.

Note: Use Help -> Toggle Developer Tools vscode menu option to view Data Preview console log.

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.

Backers

SheetJS	Aman Mittal