Repository files navigation

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 withPerspective - streaming data analytics WebAssembly library.

• 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 forExcel 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

• 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 ofsupported Data Formats you'll be hard pressed to find onVSCode marketplace in one extension.

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

InstallData Preview 🈸 via vscode Extensions tab (Ctrl+Shift+X) by searching fordata preview || viaVSCode 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:

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

Data Preview 🈸 example usingdark UI theme withd3fc Charts 📊 Data Viewconfig, viewingsuperstore.arrow data file :)

1. RunView -> Command Palette...>Data: Preview Data command orCtrl+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 exposedexplorer/context,editor/title oreditor/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. RunView -> Command Palette...>Data: Preview Remote Data command orCtrl+Shift+Rto launch Data Preview for remotehttp(s) data files.

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

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

Tip: try sample data and Data View.config files from this repositorydata/... folders:data/arrowdata/avrodata/parquetdata/configdata/exceldata/jsondata/yamldata/large

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

{"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"}

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

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

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

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

• 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

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

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

$ 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 generateVSIX Data Preview extension package from our latest for local dev install in VSCode.

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

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

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

SheetJS	Aman Mittal