vscode-data-preview

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

Data Preview 🈸 Features

• Preview 🈸 flat .json .arrow .avro .yml .csv/.tsv & .xlsx/.xlsm 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
• 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 Preivew input box for data files in open workspace
• Save Filtered Data Grid || Chart 📊 Data in .csv .json(s) .yml & .properties formats
• 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: 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:

Setting	Type	Default Value	Description
data.preview.theme	string	dark	Data Preview UI Theme: dark or light
data.preview.charts.plugin	string	d3fc	Data Preview Charts 📊 library to use for built-in charts: d3fc or highcharts
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 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 || Ctrl+Shift+D in an open .json .config .env .properties .ini .yml || .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/.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 🈸 || 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.

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 data sorting, filtering, charting and export to .csv .json || .yml text data formats
• Preview .properites and other key-value pairs configuration files to reformat them || 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 || .tsv data to .json || .yml format
• 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/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 Preivew 🈸 Files Matching Rules

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

Data Preivew 🈸 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.

Data File Extension(s)	File Type	Data Parsing Library/Method Used	Data Format Specification
.json .config	text	JSON.parse()	https://json.org/
.json5	text	json5/JSON5.parse()	https://json5.org/
.hjson	text	hjson-js/Hjson.parse()	https://hjson.org/
.arrow .arr	binary	apache-arrow/Table.from()	https://arrow.apache.org/
.avro	binary	avsc/avro.createFileDecoder()	https://avro.apache.org/docs/current/
.properties .env	text	node-properties/properties.parse()	https://en.wikipedia.org/wiki/.properties
.ini	text	node-properties/properties.parse()	https://en.wikipedia.org/wiki/INI_file
.yml .yaml	text	js-yaml/yaml.load()	https://yaml.org/
.csv .tsv .txt .tab	text	perspective/perspectiveViewer.load(text)	https://en.wikipedia.org/wiki/Comma-separated_values https://en.wikipedia.org/wiki/Tab-separated_values
.dif .slk .prn .xml .html	text	js-xlsx/XLSX.readFile(text)	See https://github.com/SheetJS/js-xlsx#file-formats for more info on text Excel file formats
.ods .xls .xlsb .xlsx .xlsm	binary	js-xlsx/XLSX.readFile(binary)	See https://github.com/SheetJS/js-xlsx#file-formats for more info on binary Excel file formats

Provided Chart 📊 Types

• Area Chart
• Bar
• 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 || supplements for working with supported data file formats in VSCode:

Extension	Description
Excel Viewer	View Excel spreadsheets and CSV files
Avro Viewer	.avro file viewer
avro-idl	Avro IDL Syntax Highlighter
DotENV	.env Syntax Highlighter
Ini for VSCode	Provides outline view and section folding for INI files
Hjson	Hjson language syntax support
JSON5 syntax	Adds syntax highlighting of JSON5 files
YAML	YAML Language Support by Red Hat, with built-in Kubernetes and Kedge syntax support
docs-yaml	YAML schema validation and auto-completion for docs.microsoft.com authoring
YAML to JSON	Convert YAML from clipboard or current document/selection to JSON and vice versa
Properties To Yaml	Convert properties to yaml

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.

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.